Add persistant expand/contract state for nav

diff --git a/docs/assets/js/docs.js b/docs/assets/js/docs.js
index 63cf2204c14d2709bdbe7064f091e07cb256a778..ab1f3f0e1f7e4eedd24967bab648a507f4c428fa 100644 (file)
--- a/docs/assets/js/docs.js
+++ b/docs/assets/js/docs.js
@@ -17,48 +17,30 @@ $(function() {
   $('[data-docs-version]').text('v' + Foundation.version);
 });
 
+var ACCORDION_KEY = 'docs-accordion-expandall';
+var expandAccordion = function($a) {
+  $a.parent('.accordion').find('.accordion-item, .accordion-content').addClass('is-active');
+  $a.text('(Contract All)');
+  $a.data('expandAll', false);
+  if(localStorage) { localStorage.setItem(ACCORDION_KEY, 'true'); }
+};
 
-// COUNTDOWN TIMER for Events banner
-// function getTimeRemaining(endtime){
-//  var t = Date.parse(endtime) - Date.parse(new Date());
-//  var minutes = Math.floor( (t/1000/60) % 60 );
-//  var days = Math.floor( (t/(1000*60*60)/24) );
-//  var hours = Math.floor( (t/(1000*60*60)) % 24 );
-//  var seconds = Math.floor( (t/1000) % 60 );
-//
-//  return {
-//    'total': t,
-//    'hours': hours,
-//    'days': days,
-//    'minutes': minutes,
-//    'seconds': seconds
-//  };
-// }
-//
-// function initializeClock(id, endtime){
-//  var clock = document.getElementById(id);
-//  var daysSpan = clock.querySelector('.days');
-//  var hoursSpan = clock.querySelector('.hours');
-//  var minutesSpan = clock.querySelector('.minutes');
-//  var secondsSpan = clock.querySelector('.seconds');
-//
-//  function updateClock(){
-//    var t = getTimeRemaining(endtime);
-//
-//    daysSpan.innerHTML = ('0' + t.days).slice(-2);
-//    hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
-//    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
-//    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
-//
-//    if(t.total<=0){
-//      clearInterval(timeinterval);
-//    }
-//  }
-//
-//  updateClock();
-//  var timeinterval = setInterval(updateClock,1000);
-// }
-//
-// var deadline = 'Thurs, 25 Aug 2016 8:00:00 PDT';
-// initializeClock('clockdiv', deadline);
-// COUNTDOWN TIMER END
+var contractAccordion = function($a) {
+  $a.parent('.accordion').find('.accordion-item, .accordion-content').removeClass('is-active');
+  $a.text('(Expand All)');
+  $a.data('expandAll', true);
+  if(localStorage) { localStorage.setItem(ACCORDION_KEY, 'false'); }
+};
+
+$('[data-expand-all]').on('click', function() {
+  var $a = $(this);
+  if ($a.data().expandAll === true) {
+    expandAccordion($a);
+  } else {
+    contractAccordion($a);
+  }
+});
+
+if(localStorage.getItem(ACCORDION_KEY) === 'true') {
+  expandAccordion($('[data-expand-all]'));
+}

diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss
index 5108978e61058f215c5dfd4da3ea4e89a1516e77..fb9dc0016680960b05cf7df5661d6d02886f5186 100644 (file)
--- a/docs/assets/scss/docs.scss
+++ b/docs/assets/scss/docs.scss
@@ -243,3 +243,17 @@ a[data-open-video] {
 .mb1 {
   margin-bottom: 1rem;
 }
+
+.docs-nav-category {
+  position: relative;
+}
+
+.docs-nav.menu {
+  .docs-expand-all {
+    font-size: 0.5rem;
+    position: absolute;
+    right: 10px;
+    top: 0px;
+    z-index: 1;
+  }
+}

diff --git a/docs/partials/component-list.html b/docs/partials/component-list.html
index 3ad853aac852dee4edc6b3bf993d12a9776ad174..42c57f5bd923f3673e334c48f531e8def8f124a5 100644 (file)
--- a/docs/partials/component-list.html
+++ b/docs/partials/component-list.html
@@ -8,8 +8,8 @@
     </ul>
   -->
 
-
-    <ul class="accordion docs-nav-category" data-accordion data-allow-all-closed="true">
+    <ul class="accordion docs-nav-category" data-accordion data-allow-all-closed="true" data-multi-expand="true">
+      <a class="docs-expand-all" data-expand-all="true">(Expand All)</a>
       <li class="accordion-item {{#ifpage 'index' 'installation' 'starter-projects' 'compatibility' 'accessibility' 'kitchen-sink'}}is-active{{/ifpage}}" data-accordion-item>
         <a href="#" class="accordion-title">Getting Started</a>
         <div class="accordion-content {{#ifpage 'index' 'installation' 'starter-projects' 'compatibility' 'accessibility' 'kitchen-sink'}}is-active{{/ifpage}}" data-tab-content>