oci/zeronet
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add sidebar content fadein animation

Browse source
This commit is contained in:
shortcutme 2016-09-04 17:35:22 +02:00
parent 46a84a42dc
commit 227751e455
2 changed files with 33 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
plugins/Sidebar/media/Sidebar.coffee
View file

@ -13,6 +13,7 @@ class Sidebar extends Class
@initFixbutton() @initFixbutton()
@dragStarted = 0 @dragStarted = 0
@globe = null @globe = null
@preload_html = null
@original_set_site_info = wrapper.setSiteInfo # We going to override this, save the original @original_set_site_info = wrapper.setSiteInfo # We going to override this, save the original
@ -25,6 +26,15 @@ class Sidebar extends Class
initFixbutton: -> initFixbutton: ->
###
@fixbutton.on "mousedown touchstart", (e) =>
if not @opened
@logStart("Preloading")
wrapper.ws.cmd "sidebarGetHtmlTag", {}, (res) =>
@logEnd("Preloading")
@preload_html = res
###
# Detect dragging # Detect dragging
@fixbutton.on "mousedown touchstart", (e) => @fixbutton.on "mousedown touchstart", (e) =>
e.preventDefault() e.preventDefault()
@ -136,21 +146,28 @@ class Sidebar extends Class
updateHtmlTag: -> updateHtmlTag: ->
wrapper.ws.cmd "sidebarGetHtmlTag", {}, (res) => if @preload_html
if @tag.find(".content").children().length == 0 # First update @setHtmlTag(@preload_html)
@log "Creating content" @preload_html = null
morphdom(@tag.find(".content")[0], '<div class="content">'+res+'</div>') else
# @scrollable() wrapper.ws.cmd "sidebarGetHtmlTag", {}, @setHtmlTag
@when_loaded.resolve()
else # Not first update, patch the html to keep unchanged dom elements setHtmlTag: (res) =>
@log "Patching content" if @tag.find(".content").children().length == 0 # First update
morphdom @tag.find(".content")[0], '<div class="content">'+res+'</div>', { @log "Creating content"
onBeforeMorphEl: (from_el, to_el) -> # Ignore globe loaded state @container.addClass("loaded")
if from_el.className == "globe" or from_el.className.indexOf("noupdate") >= 0 morphdom(@tag.find(".content")[0], '<div class="content">'+res+'</div>')
return false # @scrollable()
else @when_loaded.resolve()
return true
else # Not first update, patch the html to keep unchanged dom elements
@log "Patching content"
morphdom @tag.find(".content")[0], '<div class="content">'+res+'</div>', {
onBeforeMorphEl: (from_el, to_el) -> # Ignore globe loaded state
if from_el.className == "globe" or from_el.className.indexOf("noupdate") >= 0
return false
else
return true
} }

3
plugins/Sidebar/media/all.css
View file

@ -65,7 +65,8 @@
.sidebar-container { width: 100%; height: 100%; overflow: hidden; position: fixed; } .sidebar-container { width: 100%; height: 100%; overflow: hidden; position: fixed; }
.sidebar { background-color: #212121; position: fixed; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden ; right: -1200px; height: 100%; width: 1200px; } /*box-shadow: inset 0px 0px 10px #000*/ .sidebar { background-color: #212121; position: fixed; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden ; right: -1200px; height: 100%; width: 1200px; } /*box-shadow: inset 0px 0px 10px #000*/
.sidebar .content { margin: 30px; font-family: "Segoe UI Light", "Segoe UI", "Helvetica Neue"; color: white; width: 375px; height: 300px; font-weight: 200 } .sidebar .content { margin: 30px; font-family: "Segoe UI Light", "Segoe UI", "Helvetica Neue"; color: white; width: 375px; height: 300px; font-weight: 200; -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; -ms-transition: all 1s; transition: all 1s ; opacity: 0 }
.sidebar-container.loaded .content { opacity: 1; -webkit-transform: none ; -moz-transform: none ; -o-transform: none ; -ms-transform: none ; transform: none }
.sidebar h1, .sidebar h2 { font-weight: lighter; } .sidebar h1, .sidebar h2 { font-weight: lighter; }
.sidebar .button { margin: 0px; display: inline-block; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s ; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box ; max-width: 160px } .sidebar .button { margin: 0px; display: inline-block; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s ; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box ; max-width: 160px }
.sidebar .button.hidden { padding: 0px; max-width: 0px; opacity: 0; pointer-events: none } .sidebar .button.hidden { padding: 0px; max-width: 0px; opacity: 0; pointer-events: none }