Merge pull request #46 from carpentries/use-local-storage

use localstorage for sidebar
carpentries · Jun 13, 2022 · 45d26ed · 45d26ed
2 parents d63d7e1 + bee8b43
commit 45d26ed
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 22 deletions.
diff --git a/DESCRIPTION b/DESCRIPTION
@@ -1,6 +1,6 @@
 Package: varnish
 Title: Front-end for The Carpentries Lesson Template
-Version: 0.1.16
+Version: 0.2.0
 Authors@R: c(
     person(given = "Zhian N.",
            family = "Kamvar",

diff --git a/NEWS.md b/NEWS.md
@@ -1,3 +1,10 @@
+# varnish 0.2.0
+
+* The sidebar state (expanded or collapsed) will now persist during navigation
+  to another page in the same window/tab. Opening the site in a new window/tab
+  will reset the sidebar state to expanded. (reported: #43 by @anenadic, fixed
+  #46, @zkamvar). This fix uses the `sessionStorage` API. 
+
 # varnish 0.1.16
 
 * CHAPTERS has been temporarily renamed to EPISODES to reduce cognative load

diff --git a/inst/pkgdown/assets/assets/scripts.js b/inst/pkgdown/assets/assets/scripts.js
diff --git a/source/javascripts/custom/menu.js b/source/javascripts/custom/menu.js
@@ -5,6 +5,14 @@ var windowSize = 0;
 $( document ).ready(function() {
 
     windowSize = window.innerWidth;
+    // load the boolean from sessionStorage
+    sidebarVisible = sidebarIsVisible();
+    // only show the sidebar if we have determined that it is visible
+    if (! sidebarVisible ) {
+        if(window.innerWidth > 1200) {
+           hideSidebarDesktop();
+        }
+    }
     //change collapse icons depending on context
     if(window.innerWidth > 1024) {
         $(".collapse-toggle").html("Collapse " + feather.icons['chevron-left'].toSvg());
@@ -19,8 +27,7 @@ $( document ).ready(function() {
     //showing and hiding sidebar
     $(".collapse-toggle").click(function(){
         if(window.innerWidth > 1200) {
-            if(! sidebarVisible) {
-              //show the sidebar
+            if(! sidebarIsVisible() ) {
               showSidebarDesktop();
             } else {
               hideSidebarDesktop();
@@ -30,26 +37,21 @@ $( document ).ready(function() {
         }
     });
 
-    // var codeLabel = "<h3 class='code-label'>CODE<i aria-hidden='true' data-feather='chevron-left'></i><i aria-hidden='true' data-feather='chevron-right'></i></h3>"
-    // $("div.sourceCode > pre.sourceCode").attr("tabindex", "0");
-    // $("div.sourceCode").addClass("codewrapper");
-    // $(codeLabel).prependTo(".sourceCode .codewrapper");
-    // feather.replace();
     //attempt to smoothly handle resizing windows
     $(window).on('resize', function(){
         //nav is shown by default on desktop only
         if(window.innerWidth > 1200) {
-            //reset css to desktop
-            showSidebarDesktop();
-
-            if(windowSize > 1200 && ! sidebarVisible) {
+            //reset css to desktop only if it's visible
+            if ( sidebarIsVisible() ) {
+                showSidebarDesktop();
+            } else {
                 hideSidebarDesktop();
             }
-        }/* else { // this is redundant and triggers menu instability on mobile resize
-            showSidebarDesktop();
-            hideSidebarMobile();
-        }*/
 
+            if(windowSize > 1200 && ! sidebarIsVisible()) {
+                hideSidebarDesktop();
+            }
+        }
         checkForExtraPadding();
 
         windowSize = window.innerWidth;
@@ -105,11 +107,60 @@ $( document ).ready(function() {
     });
 });
 
+// determine if the user has the sidebar showing
+function sidebarIsVisible() {
+    if (storageAvailable('sessionStorage')) {
+        if (sessionStorage.getItem('sidebarVisible') === null) {
+            sessionStorage.setItem('sidebarVisible', sidebarVisible);
+        } 
+        return sessionStorage.getItem('sidebarVisible') == 'true';
+    } else {
+        return sidebarVisible
+    }
+}
+
+
+function setSidebarVisible(value) {
+    if (storageAvailable('sessionStorage')) {
+        sessionStorage.setItem('sidebarVisible', value);
+    } else {
+        sidebarVisible = value;
+    }
+    return null
+}
+
+// check if we have local storage
+function storageAvailable(type) {
+    var storage;
+    try {
+        storage = window[type];
+        var x = '__storage_test__';
+        storage.setItem(x, x);
+        storage.removeItem(x);
+        return true;
+    }
+    catch(e) {
+        return e instanceof DOMException && (
+            // everything except Firefox
+            e.code === 22 ||
+            // Firefox
+            e.code === 1014 ||
+            // test name field too, because code might not be present
+            // everything except Firefox
+            e.name === 'QuotaExceededError' ||
+            // Firefox
+            e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
+            // acknowledge QuotaExceededError only if there's something already stored
+            (storage && storage.length !== 0);
+    }
+}
+
+
 //needed to avoid the collapsed navbar overlapping main content
 function checkForExtraPadding(){
     if(window.innerWidth > 1200 && window.innerWidth < 1352)
         {
-            if(sidebarVisible == false) {
+            if(! sidebarIsVisible()) {
                 $('.primary-content').css({
                 'padding-left': '90px'
                  });
@@ -128,7 +179,7 @@ function showSidebarMobile(){
     var $sidebarInner   = $('.sidebar-inner');
     var $collapseToggle = $('.collapse-toggle');
     $collapseToggle.html(feather.icons['x'].toSvg());
-    sidebarVisible = true;
+    setSidebarVisible(true);
     if(window.innerWidth < 768) {
         $sidebar.css({
             position: 'absolute',
@@ -151,7 +202,7 @@ function showSidebarMobile(){
 
 function hideSidebarMobile(){
     // console.log('hideSidebarMobile');
-    sidebarVisible = false;
+    setSidebarVisible(false);
     var $sidebar = $('#sidebar');
     $sidebar.hide();
     $sidebar.attr('tabindex', '-1'); // remove from tab order
@@ -160,7 +211,7 @@ function hideSidebarMobile(){
 
 function showSidebarDesktop(){
     // console.log('showSidebarDesktop');
-    sidebarVisible = true;
+    setSidebarVisible(true);
     var $sidebar        = $('#sidebar');
     var $sidebarCol     = $('#sidebar-col');
     var $primaryContent = $('.primary-content');
@@ -188,7 +239,7 @@ function showSidebarDesktop(){
 
 function hideSidebarDesktop(){
     // console.log('hideSidebarDesktop');
-    sidebarVisible = false;
+    setSidebarVisible(false);
     var $sidebar        = $('#sidebar');
     var $sidebarCol     = $('#sidebar-col');
     var $primaryContent = $('.primary-content');