menu button functionality
This commit is contained in:
parent
aba81a27e5
commit
aa6c7f075d
|
@ -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:
|
**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).
|
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).
|
||||||
|
|
||||||
|
|
|
@ -62,7 +62,7 @@
|
||||||
</a>
|
</a>
|
||||||
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
||||||
</div>
|
</div>
|
||||||
<nav class="patterns" role="navigation">
|
<nav id="patterns-nav" class="patterns" role="navigation">
|
||||||
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
|
|
|
@ -1,7 +1,5 @@
|
||||||
/* expandable sections */
|
/* expandable sections */
|
||||||
(function () {
|
(function () {
|
||||||
'use strict'
|
|
||||||
|
|
||||||
function toggle (button, target) {
|
function toggle (button, target) {
|
||||||
var expanded = button.getAttribute('aria-expanded') === 'true' || false
|
var expanded = button.getAttribute('aria-expanded') === 'true' || false
|
||||||
button.setAttribute('aria-expanded', !expanded)
|
button.setAttribute('aria-expanded', !expanded)
|
||||||
|
@ -11,7 +9,6 @@
|
||||||
var expanders = document.querySelectorAll('[data-expands]')
|
var expanders = document.querySelectorAll('[data-expands]')
|
||||||
|
|
||||||
Array.prototype.forEach.call(expanders, function (expander) {
|
Array.prototype.forEach.call(expanders, function (expander) {
|
||||||
console.log(expander)
|
|
||||||
var target = document.getElementById(expander.getAttribute('data-expands'))
|
var target = document.getElementById(expander.getAttribute('data-expands'))
|
||||||
|
|
||||||
expander.addEventListener('click', function () {
|
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'))
|
||||||
|
})
|
||||||
|
|
|
@ -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=
|
{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)})()})();
|
!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)
|
}).call(self)
|
||||||
|
|
||||||
|
//# sourceMappingURL=webcomponents-sd-ce.js.map
|
||||||
|
|
|
@ -61,7 +61,7 @@
|
||||||
</a>
|
</a>
|
||||||
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
||||||
</div>
|
</div>
|
||||||
<nav class="patterns" role="navigation">
|
<nav id="patterns-nav" class="patterns" role="navigation">
|
||||||
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
|
|
|
@ -61,7 +61,7 @@
|
||||||
</a>
|
</a>
|
||||||
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
||||||
</div>
|
</div>
|
||||||
<nav class="patterns" role="navigation">
|
<nav id="patterns-nav" class="patterns" role="navigation">
|
||||||
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
|
|
|
@ -61,7 +61,7 @@
|
||||||
</a>
|
</a>
|
||||||
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
||||||
</div>
|
</div>
|
||||||
<nav class="patterns" role="navigation">
|
<nav id="patterns-nav" class="patterns" role="navigation">
|
||||||
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
|
|
|
@ -61,7 +61,7 @@
|
||||||
</a>
|
</a>
|
||||||
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
||||||
</div>
|
</div>
|
||||||
<nav class="patterns" role="navigation">
|
<nav id="patterns-nav" class="patterns" role="navigation">
|
||||||
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
|
|
|
@ -61,7 +61,7 @@
|
||||||
</a>
|
</a>
|
||||||
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
||||||
</div>
|
</div>
|
||||||
<nav class="patterns" role="navigation">
|
<nav id="patterns-nav" class="patterns" role="navigation">
|
||||||
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
|
|
|
@ -61,7 +61,7 @@
|
||||||
</a>
|
</a>
|
||||||
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
||||||
</div>
|
</div>
|
||||||
<nav class="patterns" role="navigation">
|
<nav id="patterns-nav" class="patterns" role="navigation">
|
||||||
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
|
|
|
@ -61,7 +61,7 @@
|
||||||
</a>
|
</a>
|
||||||
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
||||||
</div>
|
</div>
|
||||||
<nav class="patterns" role="navigation">
|
<nav id="patterns-nav" class="patterns" role="navigation">
|
||||||
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
|
|
|
@ -61,7 +61,7 @@
|
||||||
</a>
|
</a>
|
||||||
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
||||||
</div>
|
</div>
|
||||||
<nav class="patterns" role="navigation">
|
<nav id="patterns-nav" class="patterns" role="navigation">
|
||||||
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
|
|
|
@ -61,7 +61,7 @@
|
||||||
</a>
|
</a>
|
||||||
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
||||||
</div>
|
</div>
|
||||||
<nav class="patterns" role="navigation">
|
<nav id="patterns-nav" class="patterns" role="navigation">
|
||||||
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
|
|
|
@ -61,7 +61,7 @@
|
||||||
</a>
|
</a>
|
||||||
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
||||||
</div>
|
</div>
|
||||||
<nav class="patterns" role="navigation">
|
<nav id="patterns-nav" class="patterns" role="navigation">
|
||||||
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
|
|
|
@ -61,7 +61,7 @@
|
||||||
</a>
|
</a>
|
||||||
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
||||||
</div>
|
</div>
|
||||||
<nav class="patterns" role="navigation">
|
<nav id="patterns-nav" class="patterns" role="navigation">
|
||||||
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
|
|
|
@ -61,7 +61,7 @@
|
||||||
</a>
|
</a>
|
||||||
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
||||||
</div>
|
</div>
|
||||||
<nav class="patterns" role="navigation">
|
<nav id="patterns-nav" class="patterns" role="navigation">
|
||||||
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
|
|
|
@ -61,7 +61,7 @@
|
||||||
</a>
|
</a>
|
||||||
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
||||||
</div>
|
</div>
|
||||||
<nav class="patterns" role="navigation">
|
<nav id="patterns-nav" class="patterns" role="navigation">
|
||||||
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
|
|
|
@ -61,7 +61,7 @@
|
||||||
</a>
|
</a>
|
||||||
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
||||||
</div>
|
</div>
|
||||||
<nav class="patterns" role="navigation">
|
<nav id="patterns-nav" class="patterns" role="navigation">
|
||||||
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
|
|
|
@ -61,7 +61,7 @@
|
||||||
</a>
|
</a>
|
||||||
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
<p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
||||||
</div>
|
</div>
|
||||||
<nav class="patterns" role="navigation">
|
<nav id="patterns-nav" class="patterns" role="navigation">
|
||||||
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
|
|
|
@ -27,17 +27,17 @@
|
||||||
<p class="library-desc">{{ .Site.Params.Description | safeHTML }}</p>
|
<p class="library-desc">{{ .Site.Params.Description | safeHTML }}</p>
|
||||||
</div>
|
</div>
|
||||||
<nav id="patterns-nav" class="patterns" role="navigation">
|
<nav id="patterns-nav" class="patterns" role="navigation">
|
||||||
|
<button id="menu-button" aria-expanded="false">Menu</button>
|
||||||
{{ $current := . }}
|
{{ $current := . }}
|
||||||
{{ range $.Site.Home.Sections }}
|
{{ range $.Site.Home.Sections }}
|
||||||
<ul>
|
<ul id="patterns-list">
|
||||||
{{ range .Pages.ByWeight }}
|
{{ range .Pages.ByWeight }}
|
||||||
<li class="pattern">
|
<li class="pattern">
|
||||||
<a href="{{ .RelPermalink }}" {{ if eq $current.Title .Title }}aria-current="page"{{ end }}>
|
<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>
|
<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>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</li>
|
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ range .Sections.ByWeight }}
|
{{ range .Sections.ByWeight }}
|
||||||
<li>
|
<li>
|
||||||
|
@ -47,7 +47,7 @@
|
||||||
<li class="pattern">
|
<li class="pattern">
|
||||||
<a href="{{ .RelPermalink }}" {{ if eq $current.Title .Title }}aria-current="page"{{ end }}>
|
<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>
|
<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>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
|
@ -53,7 +53,7 @@ figure p img {
|
||||||
|
|
||||||
:focus:not([tabindex="-1"]),
|
:focus:not([tabindex="-1"]),
|
||||||
[data-expands]:focus svg,
|
[data-expands]:focus svg,
|
||||||
.patterns a:focus span {
|
.patterns a:focus .text {
|
||||||
outline: 3px solid #ccc;
|
outline: 3px solid #ccc;
|
||||||
outline-offset: 2px;
|
outline-offset: 2px;
|
||||||
}
|
}
|
||||||
|
@ -148,9 +148,13 @@ main ul ul {
|
||||||
/* Buttons */
|
/* Buttons */
|
||||||
|
|
||||||
button {
|
button {
|
||||||
font-size: inherit;
|
font-size: 1.25rem;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
font-weight: inherit;
|
font-weight: inherit;
|
||||||
|
background: #111;
|
||||||
|
color: #fff;
|
||||||
|
padding: 0.75rem;
|
||||||
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Tables */
|
/* Tables */
|
||||||
|
@ -210,6 +214,9 @@ th:empty {
|
||||||
.library-desc {
|
.library-desc {
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
margin-top: 0.25rem;
|
margin-top: 0.25rem;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
max-width: 30rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-and-footer {
|
.main-and-footer {
|
||||||
|
@ -279,6 +286,19 @@ th:empty {
|
||||||
text-decoration-skip: ink;
|
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 */
|
/* Pattern lists */
|
||||||
|
|
||||||
.patterns-list {
|
.patterns-list {
|
||||||
|
@ -629,10 +649,41 @@ a .balloon {
|
||||||
|
|
||||||
.patterns h3 {
|
.patterns h3 {
|
||||||
font-size: 1.125rem;
|
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 {
|
.pattern {
|
||||||
font-size: 1rem;
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
/* expandable sections */
|
/* expandable sections */
|
||||||
(function () {
|
(function () {
|
||||||
function toggle (button, target) {
|
function toggle (button, target) {
|
||||||
var expanded = button.getAttribute('aria-expanded') === 'true' || false
|
var expanded = button.getAttribute('aria-expanded') === 'true'
|
||||||
button.setAttribute('aria-expanded', !expanded)
|
button.setAttribute('aria-expanded', !expanded)
|
||||||
target.hidden = !target.hidden
|
target.hidden = !target.hidden
|
||||||
}
|
}
|
||||||
|
@ -15,16 +15,26 @@
|
||||||
toggle(expander, target)
|
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 */
|
/* persist navigation scroll point */
|
||||||
window.addEventListener('unload', function() {
|
(function () {
|
||||||
var scrollPoint = document.getElementById('patterns-nav').scrollTop
|
window.addEventListener('unload', function() {
|
||||||
localStorage.setItem('scrollPoint', scrollPoint)
|
var scrollPoint = document.getElementById('patterns-nav').scrollTop
|
||||||
console.log('scrollPoint:', localStorage.getItem('scrollPoint'))
|
localStorage.setItem('scrollPoint', scrollPoint)
|
||||||
})
|
})
|
||||||
|
|
||||||
window.addEventListener('load', function() {
|
window.addEventListener('load', function() {
|
||||||
document.getElementById('patterns-nav').scrollTop = parseInt(localStorage.getItem('scrollPoint'))
|
document.getElementById('patterns-nav').scrollTop = parseInt(localStorage.getItem('scrollPoint'))
|
||||||
})
|
})
|
||||||
|
}());
|
||||||
|
|
Loading…
Reference in New Issue
Block a user