Add double click event to toggle the sidebar

ccorcoveanu · Thibaut · commit 4cb0d7a506c7 · 2016-04-17T10:57:27.000-04:00
diff --git a/assets/javascripts/app/app.coffee b/assets/javascripts/app/app.coffee
@@ -179,6 +179,14 @@
     # enabled because it doesn't support caching URLs that use CORS.
     @config[if @appCache and @settings.hasDocs() then 'index_path' else 'docs_host']
 
+  toggleSidebar: ->
+    state = @el.getAttribute('data-sidebar')
+    newState = if state == 'visible' then 'hidden' else 'visible'
+    @el.setAttribute('data-sidebar', newState)
+    @settings.setSidebar(newState)
+    @appCache?.updateInBackground()
+    return
+
   onBootError: (args...) ->
     @trigger 'bootError'
     @hideLoading()
diff --git a/assets/javascripts/app/settings.coffee b/assets/javascripts/app/settings.coffee
@@ -4,6 +4,7 @@ class app.Settings
   DARK_KEY = 'dark'
   LAYOUT_KEY = 'layout'
   SIZE_KEY = 'size'
+  SIDEBAR_KEY = 'sidebar'
 
   @defaults:
     count: 0
@@ -77,10 +78,17 @@ class app.Settings
     catch
     return
 
+  setSidebar: (value) ->
+    try
+      Cookies.set SIDEBAR_KEY, value, path: '/', expires: 1e8
+    catch
+    return
+
   reset: ->
     try Cookies.expire DOCS_KEY
     try Cookies.expire DARK_KEY
     try Cookies.expire LAYOUT_KEY
     try Cookies.expire SIZE_KEY
+    try Cookies.expire SIDEBAR_KEY
     try @store.del(SETTINGS_KEY)
     return
diff --git a/assets/javascripts/views/layout/resizer.coffee b/assets/javascripts/views/layout/resizer.coffee
@@ -4,6 +4,7 @@ class app.views.Resizer extends app.View
   @events:
     dragstart: 'onDragStart'
     dragend: 'onDragEnd'
+    dblclick: 'onDbLClick'
 
   @isSupported: ->
     'ondragstart' of document.createElement('div') and !app.isMobile()
@@ -31,6 +32,10 @@ class app.views.Resizer extends app.View
       app.appCache?.updateInBackground()
     return
 
+  onDbLClick: (event) =>
+    app.toggleSidebar()
+    return
+
   onDragStart: (event) =>
     @style.removeAttribute('disabled')
     event.dataTransfer.effectAllowed = 'link'
diff --git a/assets/stylesheets/components/_content.scss b/assets/stylesheets/components/_content.scss
@@ -10,6 +10,10 @@
   pointer-events: none;
   @extend %border-box;
 
+  ._app[data-sidebar="hidden"] & {
+    margin-left: 0;
+  }
+
   @media #{$mediumScreen} { margin-left: $sidebarMediumWidth; }
 }
 
diff --git a/assets/stylesheets/components/_path.scss b/assets/stylesheets/components/_path.scss
@@ -11,6 +11,10 @@
   background: $pathBackground;
   box-shadow: inset 0 1px $pathBorder;
 
+  ._app[data-sidebar="hidden"] & {
+    left: 0;
+  }
+
   @media #{$mediumScreen} { left: $sidebarMediumWidth; }
 
   ~ ._container { padding-bottom: 2rem; }
diff --git a/assets/stylesheets/components/_sidebar.scss b/assets/stylesheets/components/_sidebar.scss
@@ -33,6 +33,10 @@
   }
 
   a:focus { outline: 0; }
+
+  ._app[data-sidebar="hidden"] & {
+    display: none;
+  }
 }
 
 ._resizer {
@@ -44,6 +48,13 @@
   margin-left: -2px;
   width: 3px;
   cursor: col-resize;
+
+  ._app[data-sidebar="hidden"] & {
+    border: 1px solid $headerBorder;
+    background-color: $headerBackground;
+    margin-left: 0;
+    left: 1px;
+  }
 }
 
 //
diff --git a/lib/app.rb b/lib/app.rb
@@ -185,6 +185,10 @@ def dark_theme?
       app_theme == 'dark'
     end
 
+    def app_sidebar
+      cookies[:sidebar].nil? ? 'visible' : cookies[:sidebar]
+    end
+
     def redirect_via_js(path) # courtesy of HTML5 App Cache
       response.set_cookie :initial_path, value: path, expires: Time.now + 15, path: '/'
       redirect '/', 302
diff --git a/views/app.erb b/views/app.erb
@@ -1,4 +1,4 @@
-<div class="_app<%= " #{app_layout}" if app_layout %>">
+<div class="_app<%= " #{app_layout}" if app_layout %>" data-sidebar="<%= "#{app_sidebar}" if app_sidebar %>">
   <header class="_header">
     <a class="_home-link"></a>
     <a class="_menu-link"></a>

Original file line number	Diff line number	Diff line change
`@@ -10,6 +10,10 @@`
`10`	`10`	`pointer-events: none;`
`11`	`11`	`@extend %border-box;`
`12`	`12`
	`13`	`+ ._app[data-sidebar="hidden"] & {`
	`14`	`+ margin-left: 0;`
	`15`	`+ }`
	`16`	`+`
`13`	`17`	`@media #{$mediumScreen} { margin-left: $sidebarMediumWidth; }`
`14`	`18`	`}`
`15`	`19`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<div class="_app<%= " #{app_layout}" if app_layout %>">`
	`1`	`+<div class="_app<%= " #{app_layout}" if app_layout %>" data-sidebar="<%= "#{app_sidebar}" if app_sidebar %>">`
`2`	`2`	`<header class="_header">`
`3`	`3`	`<a class="_home-link"></a>`
`4`	`4`	`<a class="_menu-link"></a>`