storm-toggler
Version:
Accessible UI state toggling
226 lines (225 loc) • 12.4 kB
HTML
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<title>Storm Toggler</title>
<script>document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/,'');</script>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="cleartype" content="on">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-touch-fullscreen" content="YES">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/themes/prism-okaidia.min.css">
<style>
* {
margin:0;
padding:0;
box-sizing:border-box;
font-family: sans-serif;
}
html,
body {
height:100%;
}
hr {
height:1px;
width:100%;
display:block;
background:#ddd;
margin:24px 0;
border:0 none;
}
h1 {
font: 1.25rem/1.2 sans-serif;
margin-bottom:1.5rem;
}
h2 {
font: 1.1rem/1.2 sans-serif;
margin-bottom:12px;
padding-top:12px;
}
h3 {
font: 1rem/1.2 sans-serif;
margin-bottom:12px;
padding-top:12px;
}
p {
margin-bottom:1.5rem;
}
header {
width:100%;
padding:20px;
margin-bottom:40px;
}
.container {
clear:both;
overflow:hidden;
margin:0 auto;
width:80%;
max-width:1200px;
}
.row {
margin-left:-30px;
overflow:hidden
}
section {
margin-bottom:30px;
}
button {
background-color:transparent;
padding:0;
border:0 none;
cursor:pointer;
font-size:.85rem;
}
button svg {
fill:blue;
position: relative;
top:.4rem;
}
.eg__local a {
margin-bottom:1rem;
color:blue;
}
.eg__local-target {
max-height:0;
overflow:hidden;
transition: maxHeight 100ms ease;
}
.eg__local.active .eg__local-target {
max-height:1000px;
}
.eg__local.active .toggle__local {
visibility:hidden;
}
.eg__nav {
position: fixed;
top:0;
right:0;
bottom:0;
transform:translateX(100%);
transition: transform 120ms;
background:#191919;
width:50%;
padding:50px 5%;
}
.eg__nav-item {
display: block;
color:#fff;;
}
.on--nav .eg__nav {
transform: translateX(0);
}
.eg__nav-close {
position: fixed;
top:20px;
right:20px;
}
.eg__nav-close svg {
fill: #fff;
}
</style>
</head>
<body>
<a href="https://github.com/mjbp/storm-toggler" target="_blank" class="github-corner" aria-label="View source on Github">
<svg width="80" height="80" viewBox="0 0 250 250" style="fill:#000; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
</svg>
</a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
<header>
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="43" viewBox="0 685.8 240.8 51.2"><path d="M2.2 724.2c1.4 3.9 3 6.5 4.8 8s4 2.2 6.7 2.2c2.4 0 4.3-.5 5.7-1.6 1.3-1.1 1.9-2.4 1.9-4 0-.9-.2-1.8-.7-2.4-.5-.7-1.1-1.2-2-1.6-.9-.4-3.1-.9-6.7-1.5-3.4-.6-5.8-1.4-7.2-2.1s-2.4-1.8-3.2-3.1c-.7-1.3-1.1-2.7-1.1-4.2 0-2.3.8-4.4 2.3-6.3 2-2.4 4.8-3.6 8.4-3.6 2.7 0 5.3.9 7.6 2.6l2.2-2.4h1.4l.9 11.2H21c-1-3.2-2.3-5.4-4-6.9-1.6-1.4-3.7-2.1-6.2-2.1-2.1 0-3.8.5-5 1.6-1.2 1.1-1.8 2.3-1.8 3.8 0 1.3.6 2.4 1.6 3.3 1.1.9 3.2 1.6 6.4 2.1 3.7.6 6.2 1.1 7.2 1.6 1.9.6 3.3 1.7 4.3 3.1 1 1.4 1.5 3.1 1.5 5.1 0 2.8-1.1 5.2-3.3 7-2.2 1.9-4.9 2.9-8.3 2.9-3.1 0-6-1-8.7-3.1l-2.4 2.8H.6L0 724.2h2.2zM38.6 691.8h2.2v12.8H51v3.1H40.8v20.2c0 1.7.4 3.1 1.2 4 .9.9 1.9 1.4 3.2 1.4 1.5 0 2.8-.7 3.9-2.1 1.1-1.4 1.7-3.7 1.9-6.9h2.2c-.1 4.2-1.1 7.3-2.9 9.3s-4.1 3-6.9 3c-2.6 0-4.7-.7-6.1-2.1s-2.2-3.3-2.2-5.6v-21.1h-5.4v-2.4c2.5-.4 4.4-1.4 5.7-3.2 2-2.5 3-6 3.2-10.4zM71.9 703.7c4.2 0 7.8 1.5 10.7 4.6s4.3 7.1 4.3 12.1c0 3.4-.6 6.4-1.9 8.8s-3.2 4.4-5.5 5.7c-2.4 1.4-4.9 2.1-7.7 2.1-4.1 0-7.5-1.6-10.4-4.7-2.9-3.1-4.2-7.1-4.2-12s1.4-9 4.3-12c2.8-3.1 6.2-4.6 10.4-4.6zm0 2.3c-2.5 0-4.6 1.1-6.2 3.4-1.6 2.3-2.4 5.9-2.4 10.7 0 5 .8 8.7 2.4 11 1.6 2.3 3.7 3.4 6.2 3.4 2.7 0 4.7-1.1 6.4-3.4 1.6-2.3 2.4-6.1 2.4-11.3 0-4.9-.8-8.4-2.4-10.5-1.6-2.2-3.7-3.3-6.4-3.3zM90.9 704.6l11.3-.6v12.8c1.2-4.2 2.7-7.4 4.4-9.5 1.7-2.1 3.8-3.2 6.3-3.2 1.7 0 3.1.5 4.1 1.6 1 1.1 1.5 2.4 1.5 4.2 0 1.4-.4 2.5-1 3.3-.7.8-1.5 1.1-2.6 1.1-1 0-1.8-.4-2.4-1s-.9-1.6-.9-2.7c0-.7.1-1.4.6-2.1.4-.6.5-.9.5-1.1 0-.4-.2-.5-.6-.5-.9 0-1.9.5-3.2 1.6-1.6 1.5-2.9 3.6-3.7 6.2-1.4 4.1-2 7.3-2 9.7v6.7c0 .8.3 1.4.8 1.7.5.3 1.4.6 2.7.6h4v2.5H91.1v-2.5h3.2c1.1 0 1.9-.2 2.4-.6.6-.4.8-.9.8-1.5v-20.1c0-1.5-.4-2.7-1-3.4s-1.6-1.1-2.8-1.1H91l-.1-2.1zM123.9 704.6l9-.6c.5 2.4.8 4.6 1 6.7 1.7-2.4 3.4-4.2 5.1-5.2 1.7-1 3.6-1.5 5.6-1.5 2.1 0 3.9.6 5.4 1.7 1.4 1.1 2.5 3 3.3 5.5 1.5-2.4 3.2-4.2 5-5.4 1.9-1.2 3.9-1.8 6-1.8 2.9 0 5 .9 6.4 2.6 1.9 2.2 2.7 5.2 2.7 8.7v15.6c0 .9.2 1.6.7 1.9.6.5 1.6.8 2.8.8h1.6v2.5h-15.8v-2.5h1.6c1.4 0 2.3-.2 2.8-.6.6-.4.8-1.1.8-2v-15.8c0-2.4-.6-4.2-1.7-5.4-1.1-1.3-2.7-1.9-4.5-1.9-1.4 0-2.7.4-3.8 1.1s-2 1.8-2.7 3.2c-.9 2-1.4 3.7-1.4 5.1v13.5c0 .9.2 1.6.7 2 .5.4 1.3.6 2.3.6h2.1v2.5h-16v-2.5h1.8c1.1 0 2-.2 2.6-.6.6-.4.9-1 .9-1.7v-14.5c0-3.1-.6-5.3-1.6-6.7-1.1-1.4-2.6-2.1-4.4-2.1-2.4 0-4.2.8-5.4 2.4-1.8 2.3-2.7 4.9-2.7 8v12.7c0 .9.2 1.6.6 2 .6.5 1.6.7 2.8.7h1.6v2.5h-15.8v-2.5h2.4c.9 0 1.6-.2 2.1-.6.5-.4.7-1 .7-1.7v-20.7c0-1.1-.3-2-.9-2.6s-1.7-.9-3.5-1.1l-.2-2.3zM182.5 704.6l12.5-.4v27.1c0 .7.1 1.3.6 1.6.5.4 1.1.6 1.9.6h3.6v2.5h-17.9v-2.5h3.3c1 0 1.7-.2 2.1-.7.4-.5.7-1.1.7-2.1v-19.8c0-1.3-.4-2.2-1.1-2.9-.7-.7-1.8-.9-3.2-.9h-2.6v-2.5h.1zm8.8-18.8c1 0 1.9.4 2.7 1.1.8.7 1.1 1.6 1.1 2.7 0 1-.4 1.9-1.1 2.7-.7.7-1.6 1.1-2.7 1.1-1 0-1.9-.4-2.7-1.1-.7-.7-1.1-1.6-1.1-2.7s.4-1.9 1.1-2.7c.8-.7 1.7-1.1 2.7-1.1z"/><path fill="gray" d="M222.6 686.4l12.3-.6v43.1c0 1.6.3 2.9.9 3.6.6.7 1.6 1.1 2.9 1.1h2.1v2.5h-10.7l-.8-6.4c-1.3 2.3-2.8 4-4.5 5.2-1.7 1.1-3.7 1.7-5.7 1.7-3.6 0-6.7-1.5-9.2-4.5-2.5-3-3.8-6.9-3.8-11.9 0-5.3 1.6-9.6 4.9-12.8 2.5-2.5 5.4-3.7 8.7-3.7 2 0 3.8.5 5.4 1.5 1.6 1 3 2.5 4.2 4.6v-17.7c0-.9-.4-1.7-1.1-2.2-.7-.6-1.9-.8-3.4-.8h-2.2v-2.7zm-1.9 20.1c-2.4 0-4.4 1-5.7 3-1.4 2-2.1 5.4-2.1 10.1 0 5.2.7 8.7 2.1 10.8 1.4 2.1 3.3 3.2 5.6 3.2 2.4 0 4.5-1.1 6.2-3.5 1.7-2.4 2.6-5.7 2.6-10.2 0-4.2-.9-7.6-2.8-10-1.6-2.4-3.6-3.4-5.9-3.4z"/></svg>
</header>
<div class="container">
<h1>Toggler</h1>
<h2>Examples</h2>
<h2>1. Global toggle - off-canvas menu</h2>
<button data-target="#nav" class="js-toggle">
<svg fill="#191919" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
</svg> Menu
</button>
<nav id="nav" class="eg__nav">
<a class="eg__nav-item" href="#">Home</a>
<a class="eg__nav-item" href="#">About</a>
<a class="eg__nav-item" href="#">Contact</a>
<button class="js-toggle eg__nav-close" data-target="#nav">
<svg fill="#191919" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
</button>
</nav>
<hr>
<h2>2. Local toggle</h2>
<div class="eg__local">
<a href="#more-1" class="js-toggle__local toggle__local">About local toggling</a>
<div id="more-1" class="eg__local-target">
<p>Local toggles change the className of the parentNode rather than the documentElement for isolating state to part of the DOM</p>
<p><a href="#more-1" class="js-toggle__local">Close</a></p>
</div>
</div>
<hr>
<h2>Installation</h2>
<pre class="language-markup"><code>$ npm i -S storm-toggler</code></pre>
<h2>Usage</h2>
<h2>1. Global toggle</h2>
<h3>HTML</h3>
<pre><code class="language-html"><script type="prism-html-markup"><a href="#nav" class="js-toggle"></a>
<div id="nav" class="nav"></div></script></code></pre>
<h3>CSS</h3>
<p>Sample minimum CSS as an indication how the global toggle works</p>
<pre><code class="language-css"><script type="prism-html-markup">.nav {
position:fixed;
transform:translateX(100%);
transition: transform 160ms ease;
}
.on--nav .nav {
transform:translateX(0);
}</script></code></pre>
<h3>JS</h3>
<p>Either import and initialise using a named import:</p>
<pre><code class="language-js">import Toggler from 'storm-toggler';
Toggler.init('.js-toggler');</code></pre>
<p>Or async using storm-load.js, add the .standalone file to your project, then initialise using the global name:</p>
<pre><code class="language-js">Load('/content/js/async/storm-toggler.standalone.js')
.then(() => {
StormToggler.init('.js-toggler');
});</code></pre>
<hr>
<h2>2. Local toggle</h2>
<h3>HTML</h3>
<pre><code class="language-html"><script type="prism-html-markup"><div class="parent">
<a href="#child-target" class="js-toggle__local parent"></a>
<div id="child-target" class="child"></div>
</div></script></code></pre>
<h3>CSS</h3>
<p>Sample minimum CSS as an indication how the local toggle works</p>
<pre><code class="language-css"><script type="prism-html-markup">.child {
max-height:0;
overflow:hidden;
transition: max-width 160ms ease;
}
.parent.active .child {
max-height:1000px;
}</script></code></pre>
<h3>JS</h3>
<p>Either import and initialise using a named import:</p>
<pre><code class="language-js">import Toggler from 'storm-toggler';
Toggler.init('.js-toggle__local', {
local: true
});</code></pre>
<p>Or async using storm-load.js, add the .standalone file to your project, then initialise using the global name:</p>
<pre><code class="language-js">Load('/content/js/async/storm-toggler.standalone.js')
.then(() => {
StormToggler.init('.js-toggle__local', {
local: true
});
});</code></pre>
</div>
<script src="./js/app.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>
</body>
</html>