persist nav scroll position

This commit is contained in:
Heydon Pickering 2017-06-30 17:14:15 +01:00
parent 534f793526
commit aba81a27e5
5 changed files with 22 additions and 4 deletions

View File

@ -4,6 +4,7 @@
"description": "An inclusive pattern library builder for documenting inclusive interface design", "description": "An inclusive pattern library builder for documenting inclusive interface design",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {
"getURL": "git remote -v | sed -n '/push/p' | awk '{print $2}' | sed 's/.*:\\(.*\\).git/\\1/' | awk -F\"/\" '{print $1\".github.io/\"$2}'",
"test": "echo \"Error: no test specified\" && exit 1", "test": "echo \"Error: no test specified\" && exit 1",
"serve": "hugo server", "serve": "hugo server",
"clean": "rm -rf content && mkdir content && mkdir content/patterns && hugo new patterns/pattern.md && hugo new _index.md", "clean": "rm -rf content && mkdir content && mkdir content/patterns && hugo new patterns/pattern.md && hugo new _index.md",

View File

@ -273,6 +273,13 @@ Here is some markdown including [a link](https://twitter.com/heydonworks). Donec
<p>Unfortunately, it is not currently possible to include shortcodes inside other shortcodes, using the &ldquo;<code>%</code>&rdquo; notation (which is designated for markdown content). If you use the angle brackets notation (illustrated below) it is possible, but markdown will no longer be permitted. You will have to code HTML inside such a section manually.</p> <p>Unfortunately, it is not currently possible to include shortcodes inside other shortcodes, using the &ldquo;<code>%</code>&rdquo; notation (which is designated for markdown content). If you use the angle brackets notation (illustrated below) it is possible, but markdown will no longer be permitted. You will have to code HTML inside such a section manually.</p>
<pre class=" "><code data-codeblock-shortcode>
&#x7b;{&lt;expandable label="A section of dummy text" level="2">}}
&lt;p>Here is a pattern reference shortcode: &#x7b;{% pattern "Writing inline demos" %}}.&lt;/p>
&#x7b;{&lt;/expandable>}}
</code></pre>
</main> </main>
<footer role="contentinfo"> <footer role="contentinfo">

View File

@ -26,7 +26,7 @@
</a> </a>
<p class="library-desc">{{ .Site.Params.Description | safeHTML }}</p> <p class="library-desc">{{ .Site.Params.Description | safeHTML }}</p>
</div> </div>
<nav class="patterns" role="navigation"> <nav id="patterns-nav" class="patterns" role="navigation">
{{ $current := . }} {{ $current := . }}
{{ range $.Site.Home.Sections }} {{ range $.Site.Home.Sections }}
<ul> <ul>

View File

@ -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'))
})

View File

@ -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