From 227751e4551fbc34d5c099ff8e1853f37efe76de Mon Sep 17 00:00:00 2001
From: shortcutme <hello@noloop.me>
Date: Sun, 4 Sep 2016 17:35:22 +0200
Subject: [PATCH] Add sidebar content fadein animation

---
 plugins/Sidebar/media/Sidebar.coffee | 45 +++++++++++++++++++---------
 plugins/Sidebar/media/all.css        |  3 +-
 2 files changed, 33 insertions(+), 15 deletions(-)

diff --git a/plugins/Sidebar/media/Sidebar.coffee b/plugins/Sidebar/media/Sidebar.coffee
index 69b22570..9b3b7a25 100644
--- a/plugins/Sidebar/media/Sidebar.coffee
+++ b/plugins/Sidebar/media/Sidebar.coffee
@@ -13,6 +13,7 @@ class Sidebar extends Class
 		@initFixbutton()
 		@dragStarted = 0
 		@globe = null
+		@preload_html = null
 
 		@original_set_site_info = wrapper.setSiteInfo  # We going to override this, save the original
 
@@ -25,6 +26,15 @@ class Sidebar extends Class
 
 
 	initFixbutton: ->
+		###
+		@fixbutton.on "mousedown touchstart", (e) =>
+			if not @opened
+				@logStart("Preloading")
+				wrapper.ws.cmd "sidebarGetHtmlTag", {}, (res) =>
+					@logEnd("Preloading")
+					@preload_html = res
+		###
+
 		# Detect dragging
 		@fixbutton.on "mousedown touchstart", (e) =>
 			e.preventDefault()
@@ -136,21 +146,28 @@ class Sidebar extends Class
 
 
 	updateHtmlTag: ->
-		wrapper.ws.cmd "sidebarGetHtmlTag", {}, (res) =>
-			if @tag.find(".content").children().length == 0 # First update
-				@log "Creating content"
-				morphdom(@tag.find(".content")[0], '<div class="content">'+res+'</div>')
-				# @scrollable()
-				@when_loaded.resolve()
+		if @preload_html
+			@setHtmlTag(@preload_html)
+			@preload_html = null
+		else
+			wrapper.ws.cmd "sidebarGetHtmlTag", {}, @setHtmlTag
 
-			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
+	setHtmlTag: (res) =>
+		if @tag.find(".content").children().length == 0 # First update
+			@log "Creating content"
+			@container.addClass("loaded")
+			morphdom(@tag.find(".content")[0], '<div class="content">'+res+'</div>')
+			# @scrollable()
+			@when_loaded.resolve()
+
+		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
 				}
 
 
diff --git a/plugins/Sidebar/media/all.css b/plugins/Sidebar/media/all.css
index 3fd3576c..0827b393 100644
--- a/plugins/Sidebar/media/all.css
+++ b/plugins/Sidebar/media/all.css
@@ -65,7 +65,8 @@
 
 .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 .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 .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 }