From 86a40145742fcde30da11d2810930b6f94ce1366 Mon Sep 17 00:00:00 2001
From: Jens Kraemer <jk@jkraemer.net>
Date: Tue, 11 Oct 2016 11:06:34 +0800
Subject: [PATCH] make the sidebar collapsible

- uses the localStorage API
- degrades to a non-persistent collapsible sidebar if localStorage isn't
  available
- degrades to shared global sidebar state for all pages on IE8
- degrades nicely if no JS is available ('hide sidebar' link is not there in
  this case)
---
 app/views/layouts/base.html.erb    |  9 ++++-
 public/javascripts/application.js  | 81 ++++++++++++++++++++++++++++++++++++++
 public/stylesheets/application.css | 27 ++++++++++---
 3 files changed, 110 insertions(+), 7 deletions(-)

diff --git a/app/views/layouts/base.html.erb b/app/views/layouts/base.html.erb
index 204cdb6..2128c3a 100644
--- a/app/views/layouts/base.html.erb
+++ b/app/views/layouts/base.html.erb
@@ -98,13 +98,20 @@
     <% end %>
 </div>
 
-<div id="main" class="<%= sidebar_content? ? '' : 'nosidebar' %>">
+<div id="main" class="<%= sidebar_content? ? 'collapsiblesidebar' : 'nosidebar' %>">
+<%= javascript_tag "$('#main.collapsiblesidebar').collapsibleSidebar();" if sidebar_content? %>
     <div id="sidebar">
         <%= yield :sidebar %>
         <%= view_layouts_base_sidebar_hook_response %>
     </div>
 
     <div id="content">
+        <% if sidebar_content? %>
+          <div id="sidebar-switch-panel" style="visibility: hidden;">
+            <a id="sidebar-switch-button" href="#">&raquo;</a>
+          </div>
+          <%= javascript_tag "$('#sidebar-switch-panel').css('visibility', 'visible');" %>
+        <% end %>
         <%= render_flash_messages %>
         <%= yield %>
         <%= call_hook :view_layouts_base_content %>
diff --git a/public/javascripts/application.js b/public/javascripts/application.js
index 3d1ad43..628fb62 100644
--- a/public/javascripts/application.js
+++ b/public/javascripts/application.js
@@ -781,6 +781,87 @@ function keepAnchorOnSignIn(form){
   return true;
 }
 
+// collapsible sidebar jQuery plugin
+(function($) {
+
+  // main container this is applied to
+  var main;
+
+  // triggers show/hide
+  var button;
+
+  // the key to use in local storage
+  // this will later be expanded using the current controller and action to
+  // allow for different sidebar states for different pages
+  var localStorageKey = 'redmine-sidebar-state';
+
+  // true if local storage is available
+  var canUseLocalStorage = function(){
+    try {
+      if('localStorage' in window){
+        localStorage.setItem('redmine.test.storage', 'ok');
+        var item = localStorage.getItem('redmine.test.storage');
+        localStorage.removeItem('redmine.test.storage');
+        if(item === 'ok') return true;
+      }
+    } catch (err) {}
+    return false;
+  }();
+
+  // function to set current sidebar state
+  var setState = function(state){
+    if(canUseLocalStorage){
+      localStorage.setItem(localStorageKey, state);
+    }
+  };
+
+  var applyState = function(){
+    if(main.hasClass('nosidebar')){
+      button.html("&laquo;");
+      setState('hidden');
+    } else {
+      button.html("&raquo;");
+      setState('visible');
+    }
+  };
+
+  var setupToggleButton = function(){
+    button = $('#sidebar-switch-button');
+    button.click(function(e){
+      main.addClass("animate");
+      main.toggleClass('nosidebar');
+      applyState();
+      e.preventDefault();
+      return false;
+    });
+
+    applyState();
+  };
+
+  $.fn.collapsibleSidebar = function() {
+    main = this;
+    // determine previously stored sidebar state for this page
+    if(canUseLocalStorage) {
+      // determine current controller/action pair and use them as storage key
+      var bodyClass = $('body').attr('class');
+      if(bodyClass){
+        try {
+          localStorageKey += '-' + bodyClass.split(/\s+/).filter(function(s){
+            return s.match(/(action|controller)-.*/);
+          }).sort().join('-');
+        } catch(e) {
+          // in case of error (probably IE8), continue with the unmodified key
+        }
+      }
+      var storedState = localStorage.getItem(localStorageKey);
+      main.toggleClass('nosidebar', storedState === 'hidden');
+    }
+
+    // draw the toggle button once the DOM is complete
+    $(document).ready(setupToggleButton);
+  };
+}(jQuery));
+
 $(document).ready(setupAjaxIndicator);
 $(document).ready(hideOnLoad);
 $(document).ready(addFormObserversForDoubleSubmit);
diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
index 85dbba1..c443dab 100644
--- a/public/stylesheets/application.css
+++ b/public/stylesheets/application.css
@@ -95,8 +95,8 @@ pre, code {font-family: Consolas, Menlo, "Liberation Mono", Courier, monospace;}
 
 #main {background-color:#EEEEEE;}
 
-#sidebar{ float: right; width: 22%; position: relative; z-index: 9; padding: 0; margin: 0;}
-* html #sidebar{ width: 22%; }
+#sidebar{ float: right; width: 23.5%; position: relative; z-index: 9; padding: 0; margin: 0;}
+* html #sidebar{ width: 23.5%; }
 #sidebar h3{ font-size: 14px; margin-top:14px; color: #666;  }
 #sidebar hr{ width: 100%; margin: 0 auto; height: 1px; background: #ccc; border: 0; }
 * html #sidebar hr{ width: 95%; position: relative; left: -6px; color: #ccc; }
@@ -106,13 +106,28 @@ pre, code {font-family: Consolas, Menlo, "Liberation Mono", Courier, monospace;}
 #sidebar div.wiki ul {margin:inherit; padding-left:40px;}
 #sidebar div.wiki ul li {list-style-type:inherit;}
 
-#content { width: 75%; background-color: #fff; margin: 0px; border-right: 1px solid #ddd; padding: 6px 10px 10px 10px; z-index: 10; }
-* html #content{ width: 75%; padding-left: 0; margin-top: 0px; padding: 6px 10px 10px 10px;}
+#content { background-color: #fff; margin: 0 25% 0 0; border-right: 1px solid #ddd; padding: 6px 10px 10px 10px; z-index: 10; }
+* html #content{ margin-right: 25%; padding-left: 0; margin-top: 0px; padding: 6px 10px 10px 10px;}
 html>body #content { min-height: 600px; }
 * html body #content { height: 600px; } /* IE */
 
-#main.nosidebar #sidebar{ display: none; }
-#main.nosidebar #content{ width: auto; border-right: 0; }
+#main.nosidebar #sidebar { display: block; margin-right: -25%; }
+#main.nosidebar #content{ border-right: 0; margin-right: 0; }
+#main.animate { transition: background-position 0.2s ease-in-out; }
+#main.animate #sidebar, #main.animate #content { transition: margin 0.2s ease-in-out; }
+
+#sidebar-switch-panel {
+  background-color: #EEEEEE;
+  border-bottom: 1px solid #DDDDDD;
+  border-left: 1px solid #DDDDDD;
+  border-top: 1px solid #DDDDDD;
+  float: right;
+  left: 10px;
+  top: 2px;
+  position: relative;
+  padding: 2px;
+  margin-left: 5px;
+}
 
 #footer {clear: both; border-top: 1px solid #bbb; font-size: 0.9em; color: #aaa; padding: 5px; text-align:center; background:#fff;}
 
-- 
2.1.4