Merge pull request #324 from budziq/store_js

Move from localStorage to store.js (v2.0.3) - also hide sidebar on mobile

src/renderer/html_handlebars/hbs_renderer.rs

@@ -179,6 +179,7 @@ impl Renderer for HtmlHandlebars {
         book.write_file("tomorrow-night.css", &theme.tomorrow_night_css)?;
         book.write_file("highlight.js", &theme.highlight_js)?;
         book.write_file("clipboard.min.js", &theme.clipboard_js)?;
+        book.write_file("store.js", &theme.store_js)?;
         book.write_file("_FontAwesome/css/font-awesome.css", theme::FONT_AWESOME)?;
         book.write_file("_FontAwesome/fonts/fontawesome-webfont.eot", theme::FONT_AWESOME_EOT)?;
         book.write_file("_FontAwesome/fonts/fontawesome-webfont.svg", theme::FONT_AWESOME_SVG)?;

src/theme/book.js

@@ -7,8 +7,8 @@ $( document ).ready(function() {
     window.onunload = function(){};
 
     // Set theme
-    var theme = localStorage.getItem('theme');
-    if (theme === null) { theme = 'light'; }
+    var theme = store.get('theme');
+    if (theme === null || theme === undefined) { theme = 'light'; }
 
     set_theme(theme);
 
@@ -51,31 +51,21 @@ $( document ).ready(function() {
     });
 
     // Interesting DOM Elements
-    var html = $("html");
     var sidebar = $("#sidebar");
     var page_wrapper = $("#page-wrapper");
     var content = $("#content");
 
     // Toggle sidebar
-    $("#sidebar-toggle").click(function(event){
-        if ( html.hasClass("sidebar-hidden") ) {
-            html.removeClass("sidebar-hidden").addClass("sidebar-visible");
-            localStorage.setItem('sidebar', 'visible');
-        } else if ( html.hasClass("sidebar-visible") ) {
-            html.removeClass("sidebar-visible").addClass("sidebar-hidden");
-            localStorage.setItem('sidebar', 'hidden');
-        } else {
-            if(sidebar.position().left === 0){
-                html.addClass("sidebar-hidden");
-                localStorage.setItem('sidebar', 'hidden');
-            } else {
-                html.addClass("sidebar-visible");
-                localStorage.setItem('sidebar', 'visible');
-            }
+    $("#sidebar-toggle").click(sidebarToggle);
+
+    // Hide sidebar on section link click if it occupies large space
+    // in relation to the whole screen (phone in portrait)
+    $("#sidebar a").click(function(event){
+        if (sidebar.width() > window.screen.width * 0.4) {
+            sidebarToggle();
         }
     });
 
-
     // Scroll sidebar to current active section
     var activeSection = sidebar.find(".active");
     if(activeSection.length) {
@@ -125,7 +115,7 @@ $( document ).ready(function() {
             $("[href='highlight.css']").prop('disabled', false);
         }
 
-        localStorage.setItem('theme', theme);
+        store.set('theme', theme);
 
         $('body').removeClass().addClass(theme);
     }
@@ -227,6 +217,25 @@ function showTooltip(elem, msg) {
     elem.setAttribute('class', 'fa fa-copy tooltipped');
 }
 
+function sidebarToggle() {
+    var html = $("html");
+    if ( html.hasClass("sidebar-hidden") ) {
+        html.removeClass("sidebar-hidden").addClass("sidebar-visible");
+        store.set('sidebar', 'visible');
+    } else if ( html.hasClass("sidebar-visible") ) {
+        html.removeClass("sidebar-visible").addClass("sidebar-hidden");
+        store.set('sidebar', 'hidden');
+    } else {
+        if($("#sidebar").position().left === 0){
+            html.addClass("sidebar-hidden");
+            store.set('sidebar', 'hidden');
+        } else {
+            html.addClass("sidebar-visible");
+            store.set('sidebar', 'visible');
+        }
+    }
+}
+
 function run_rust_code(code_block) {
     var result_block = code_block.find(".result");
     if(result_block.length === 0) {

src/theme/index.hbs

@@ -44,18 +44,20 @@
                 document.write(unescape("%3Cscript src='jquery.js'%3E%3C/script%3E"));
             }
         </script>
+        <!-- Fetch store.js from local - TODO add CDN when 2.x.x is available on cdnjs -->
+        <script src="store.js"></script>
     </head>
     <body class="light">
         <!-- Set the theme before any content is loaded, prevents flash -->
         <script type="text/javascript">
-            var theme = localStorage.getItem('theme');
-            if (theme == null) { theme = 'light'; }
+            var theme = store.get('theme');
+            if (theme === null || theme === undefined) { theme = 'light'; }
             $('body').removeClass().addClass(theme);
         </script>
 
         <!-- Hide / unhide sidebar before it is displayed -->
         <script type="text/javascript">
-            var sidebar = localStorage.getItem('sidebar');
+            var sidebar = store.get('sidebar');
             if (sidebar === "hidden") { $("html").addClass("sidebar-hidden") }
             else if (sidebar === "visible") { $("html").addClass("sidebar-visible") }
         </script>

src/theme/mod.rs

@@ -12,6 +12,7 @@ pub static TOMORROW_NIGHT_CSS: &'static [u8] = include_bytes!("tomorrow-night.cs
 pub static HIGHLIGHT_CSS: &'static [u8] = include_bytes!("highlight.css");
 pub static JQUERY: &'static [u8] = include_bytes!("jquery-2.1.4.min.js");
 pub static CLIPBOARD_JS: &'static [u8] = include_bytes!("clipboard.min.js");
+pub static STORE_JS: &'static [u8] = include_bytes!("store.js");
 pub static FONT_AWESOME: &'static [u8] = include_bytes!("_FontAwesome/css/font-awesome.min.css");
 pub static FONT_AWESOME_EOT: &'static [u8] = include_bytes!("_FontAwesome/fonts/fontawesome-webfont.eot");
 pub static FONT_AWESOME_SVG: &'static [u8] = include_bytes!("_FontAwesome/fonts/fontawesome-webfont.svg");
@@ -38,6 +39,7 @@ pub struct Theme {
     pub tomorrow_night_css: Vec<u8>,
     pub highlight_js: Vec<u8>,
     pub clipboard_js: Vec<u8>,
+    pub store_js: Vec<u8>,
     pub jquery: Vec<u8>,
 }
 
@@ -54,6 +56,7 @@ impl Theme {
             tomorrow_night_css: TOMORROW_NIGHT_CSS.to_owned(),
             highlight_js: HIGHLIGHT_JS.to_owned(),
             clipboard_js: CLIPBOARD_JS.to_owned(),
+            store_js: STORE_JS.to_owned(),
             jquery: JQUERY.to_owned(),
         };
 
@@ -102,6 +105,12 @@ impl Theme {
             let _ = f.read_to_end(&mut theme.clipboard_js);
         }
 
+        // store.js
+        if let Ok(mut f) = File::open(&src.join("store.js")) {
+            theme.store_js.clear();
+            let _ = f.read_to_end(&mut theme.store_js);
+        }
+
         // highlight.css
         if let Ok(mut f) = File::open(&src.join("highlight.css")) {
             theme.highlight_css.clear();