menu button functionality

content/patterns/installation.md

@@ -30,7 +30,7 @@ It is entirely likely you already have Node and NPM installed on your system. If
 
 **Infusion** is hosted on Github. To start using it, you'll need to get the files from there. If you are comfortable with the command line, just fork the [github.com/heydon/inclusive-pattern-library](https://github.com/heydon/inclusive-pattern-library) repository, then do a `git clone` to your local system. Replace `[your username]` in the following:
 
-{{<cmd>}}git clone https://github.com/[your username]/infusion-builder.git{{</cmd>}}
+{{<cmd>}}git clone https://github.com/[your username]/infusion.git{{</cmd>}}
 
 If the command line is not your thing, fork  [github.com/heydon/inclusive-pattern-library](https://github.com/heydon/inclusive-pattern-library) and choose **Open in Desktop** from **Clone or download** (see figure 1, below).
 

public/index.html

@@ -62,7 +62,7 @@
             </a>
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
-          <nav class="patterns" role="navigation">
+          <nav id="patterns-nav" class="patterns" role="navigation">
             
             
               <ul>

public/js/dom-scripts.js

@@ -1,7 +1,5 @@
 /* expandable sections */
 (function () {
-  'use strict'
-
   function toggle (button, target) {
     var expanded = button.getAttribute('aria-expanded') === 'true' || false
     button.setAttribute('aria-expanded', !expanded)
@@ -11,7 +9,6 @@
   var expanders = document.querySelectorAll('[data-expands]')
 
   Array.prototype.forEach.call(expanders, function (expander) {
-    console.log(expander)
     var target = document.getElementById(expander.getAttribute('data-expands'))
 
     expander.addEventListener('click', function () {
@@ -20,3 +17,14 @@
   })
 
 }())
+
+/* persist navigation scroll point */
+window.addEventListener('unload', function() {
+  var scrollPoint = document.getElementById('patterns-nav').scrollTop
+  localStorage.setItem('scrollPoint', scrollPoint)
+  console.log('scrollPoint:', localStorage.getItem('scrollPoint'))
+})
+
+window.addEventListener('load', function() {
+  document.getElementById('patterns-nav').scrollTop = parseInt(localStorage.getItem('scrollPoint'))
+})

public/js/webcomponents.js

@@ -147,3 +147,5 @@ k.prototype.setElementClass=k.prototype.Ja;k.prototype._styleInfoForNode=k.proto
 {ScopingShim:G,prepareTemplate:function(a,b,c){G.f();G.prepareTemplate(a,b,c)},styleSubtree:function(a,b){G.f();G.styleSubtree(a,b)},styleElement:function(a){G.f();G.styleElement(a)},styleDocument:function(a){G.f();G.styleDocument(a)},getComputedStyleValue:function(a,b){return G.getComputedStyleValue(a,b)},nativeCss:v,nativeShadow:u};fb&&(window.ShadyCSS.ApplyShim=fb);gb&&(window.ShadyCSS.CustomStyleInterface=gb);(function(){function a(){requestAnimationFrame(function(){window.WebComponents.ready=
 !0;window.document.dispatchEvent(new CustomEvent("WebComponentsReady",{bubbles:!0}))})}function b(){a();c.removeEventListener("readystatechange",b)}var c=window.document;window.WebComponents=window.WebComponents||{};"loading"!==c.readyState?a():c.addEventListener("readystatechange",b)})()})();
 }).call(self)
+
+//# sourceMappingURL=webcomponents-sd-ce.js.map

public/patterns/code/code-blocks/index.html

@@ -61,7 +61,7 @@
             </a>
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
-          <nav class="patterns" role="navigation">
+          <nav id="patterns-nav" class="patterns" role="navigation">
             
             
               <ul>

public/patterns/code/codepen-embedding/index.html

@@ -61,7 +61,7 @@
             </a>
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
-          <nav class="patterns" role="navigation">
+          <nav id="patterns-nav" class="patterns" role="navigation">
             
             
               <ul>

public/patterns/code/index.html

@@ -61,7 +61,7 @@
             </a>
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
-          <nav class="patterns" role="navigation">
+          <nav id="patterns-nav" class="patterns" role="navigation">
             
             
               <ul>

public/patterns/code/writing-inline-demos/index.html

@@ -61,7 +61,7 @@
             </a>
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
-          <nav class="patterns" role="navigation">
+          <nav id="patterns-nav" class="patterns" role="navigation">
             
             
               <ul>

public/patterns/index.html

@@ -61,7 +61,7 @@
             </a>
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
-          <nav class="patterns" role="navigation">
+          <nav id="patterns-nav" class="patterns" role="navigation">
             
             
               <ul>

public/patterns/installation/index.html

@@ -61,7 +61,7 @@
             </a>
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
-          <nav class="patterns" role="navigation">
+          <nav id="patterns-nav" class="patterns" role="navigation">
             
             
               <ul>

public/patterns/library-setup/index.html

@@ -61,7 +61,7 @@
             </a>
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
-          <nav class="patterns" role="navigation">
+          <nav id="patterns-nav" class="patterns" role="navigation">
             
             
               <ul>

public/patterns/serving/index.html

@@ -61,7 +61,7 @@
             </a>
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
-          <nav class="patterns" role="navigation">
+          <nav id="patterns-nav" class="patterns" role="navigation">
             
             
               <ul>

public/patterns/writing/expandable-sections/index.html

@@ -61,7 +61,7 @@
             </a>
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
-          <nav class="patterns" role="navigation">
+          <nav id="patterns-nav" class="patterns" role="navigation">
             
             
               <ul>

public/patterns/writing/including-images/index.html

@@ -61,7 +61,7 @@
             </a>
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
-          <nav class="patterns" role="navigation">
+          <nav id="patterns-nav" class="patterns" role="navigation">
             
             
               <ul>

public/patterns/writing/index.html

@@ -61,7 +61,7 @@
             </a>
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
-          <nav class="patterns" role="navigation">
+          <nav id="patterns-nav" class="patterns" role="navigation">
             
             
               <ul>

public/patterns/writing/library-structure/index.html

@@ -61,7 +61,7 @@
             </a>
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
-          <nav class="patterns" role="navigation">
+          <nav id="patterns-nav" class="patterns" role="navigation">
             
             
               <ul>

public/patterns/writing/markdown-and-metadata/index.html

@@ -61,7 +61,7 @@
             </a>
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
-          <nav class="patterns" role="navigation">
+          <nav id="patterns-nav" class="patterns" role="navigation">
             
             
               <ul>

public/patterns/writing/notes-and-warnings/index.html

@@ -61,7 +61,7 @@
             </a>
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
-          <nav class="patterns" role="navigation">
+          <nav id="patterns-nav" class="patterns" role="navigation">
             
             
               <ul>

public/patterns/writing/references/index.html

@@ -61,7 +61,7 @@
             </a>
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
-          <nav class="patterns" role="navigation">
+          <nav id="patterns-nav" class="patterns" role="navigation">
             
             
               <ul>

themes/infusion/layouts/_default/baseof.html

@@ -27,17 +27,17 @@
             <p class="library-desc">{{ .Site.Params.Description | safeHTML }}</p>
           </div>
           <nav id="patterns-nav" class="patterns" role="navigation">
+            <button id="menu-button" aria-expanded="false">Menu</button>
             {{ $current := . }}
             {{ range $.Site.Home.Sections }}
-              <ul>
+              <ul id="patterns-list">
                 {{ range .Pages.ByWeight }}
                   <li class="pattern">
                     <a href="{{ .RelPermalink }}" {{ if eq $current.Title .Title  }}aria-current="page"{{ end }}>
                       <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                      <span>{{ .Title }}</span>
+                      <span class="text">{{ .Title }}</span>
                     </a>
                   </li>
-                  </li>
                 {{ end }}
                 {{ range .Sections.ByWeight }}
                   <li>
@@ -47,7 +47,7 @@
                         <li class="pattern">
                           <a href="{{ .RelPermalink }}" {{ if eq $current.Title .Title  }}aria-current="page"{{ end }}>
                             <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span>{{ .Title }}</span>
+                            <span class="text">{{ .Title }}</span>
                           </a>
                         </li>
                       {{ end }}

themes/infusion/static/css/styles.css

@@ -53,7 +53,7 @@ figure p img {
 
 :focus:not([tabindex="-1"]),
 [data-expands]:focus svg,
-.patterns a:focus span {
+.patterns a:focus .text {
   outline: 3px solid #ccc;
   outline-offset: 2px;
 }
@@ -148,9 +148,13 @@ main ul ul {
 /* Buttons */
 
 button {
-  font-size: inherit;
+  font-size: 1.25rem;
   font-family: inherit;
   font-weight: inherit;
+  background: #111;
+  color: #fff;
+  padding: 0.75rem;
+  border: 0;
 }
 
 /* Tables */
@@ -210,6 +214,9 @@ th:empty {
 .library-desc {
   font-style: italic;
   margin-top: 0.25rem;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 30rem;
 }
 
 .main-and-footer {
@@ -279,6 +286,19 @@ th:empty {
   text-decoration-skip: ink;
 }
 
+/* menu button */
+
+#menu-button {
+  display: none;
+  width: 100%;
+  text-align: center;
+}
+
+#menu-button:focus {
+  outline: none;
+  box-shadow: inset 0 0 0 0.25rem #ccc;
+}
+
 /* Pattern lists */
 
 .patterns-list {
@@ -629,10 +649,41 @@ a .balloon {
 
   .patterns h3 {
     font-size: 1.125rem;
+    border-top: 4px solid;
+    border-bottom: 4px solid;
+    padding: 0.75rem 0;
+  }
+
+  .patterns ul ul {
+    margin: 0;
+  }
+
+  .patterns li {
+    margin-top: 0;
   }
 
   .pattern {
     font-size: 1rem;
   }
 
+  .pattern a {
+    padding: 0.75rem 0;
+  }
+
+  .pattern + .pattern {
+    border-top: 1px solid;
+  }
+
+  #menu-button {
+    display: block;
+  }
+
+  #patterns-list {
+    display: none;
+  }
+
+  [aria-expanded="true"] + #patterns-list {
+    display: block;
+  }
+
 }

themes/infusion/static/js/dom-scripts.js

@@ -1,7 +1,7 @@
 /* expandable sections */
 (function () {
   function toggle (button, target) {
-    var expanded = button.getAttribute('aria-expanded') === 'true' || false
+    var expanded = button.getAttribute('aria-expanded') === 'true'
     button.setAttribute('aria-expanded', !expanded)
     target.hidden = !target.hidden
   }
@@ -15,16 +15,26 @@
       toggle(expander, target)
     })
   })
+}());
 
-}())
+/* menu button */
+(function () {
+  var button = document.getElementById('menu-button')
+  var menu = document.getElementById('patterns-list')
+  button.addEventListener('click', function() {
+    var expanded = this.getAttribute('aria-expanded') === 'true'
+    this.setAttribute('aria-expanded', !expanded)
+  })
+}());
 
 /* persist navigation scroll point */
-window.addEventListener('unload', function() {
+(function () {
+  window.addEventListener('unload', function() {
     var scrollPoint = document.getElementById('patterns-nav').scrollTop
     localStorage.setItem('scrollPoint', scrollPoint)
-  console.log('scrollPoint:', localStorage.getItem('scrollPoint'))
+  })
-})
 
-window.addEventListener('load', function() {
+  window.addEventListener('load', function() {
     document.getElementById('patterns-nav').scrollTop = parseInt(localStorage.getItem('scrollPoint'))
-})
+  })
+}());