hugopoi/cupper-hugo-theme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ES5ed the demo :-(

Browse Source
This commit is contained in:
Heydon Pickering 2017-08-25 11:57:33 +01:00
parent ded88c34fd
commit 45c1f7ea5d
4 changed files with 26 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
content/patterns/coding/writing-inline-demos.md
View File

@ -67,9 +67,9 @@ button {
<script> <script>
var toggle = demo.querySelector('[aria-pressed]'); var toggle = demo.querySelector('[aria-pressed]');
toggle.addEventListener('click', (e) => { toggle.addEventListener('click', function () {
let pressed = e.target.getAttribute('aria-pressed') === 'true'; var pressed = this.getAttribute('aria-pressed') === 'true';
e.target.setAttribute('aria-pressed', !pressed); this.setAttribute('aria-pressed', !pressed);
}); });
</script> </script>
{{</demo>}} {{</demo>}}

22
docs/patterns/coding/writing-inline-demos/index.html
View File

@ -466,12 +466,12 @@ toggle.addEventListener('click', (e) => {
<div class="demo-container"> <div class="demo-container">
<div class="demo-inner" > <div class="demo-inner" >
<div class="demo" id="js-demo-414e06a48e755bf9e43e5e2596f9ea7a"></div> <div class="demo" id="js-demo-285170a1c0812ad34ac4b853a052c8bd"></div>
<button data-launch="js-demo-414e06a48e755bf9e43e5e2596f9ea7a">Launch in separate window</button> <button data-launch="js-demo-285170a1c0812ad34ac4b853a052c8bd">Launch in separate window</button>
</div> </div>
<template id="template-414e06a48e755bf9e43e5e2596f9ea7a"> <template id="template-285170a1c0812ad34ac4b853a052c8bd">
<button aria-pressed="false">Toggle Me</button> <button aria-pressed="false">Toggle Me</button>
<style> <style>
@ -495,17 +495,17 @@ button {
<script> <script>
var toggle = demo.querySelector('[aria-pressed]'); var toggle = demo.querySelector('[aria-pressed]');
toggle.addEventListener('click', (e) => { toggle.addEventListener('click', function () {
let pressed = e.target.getAttribute('aria-pressed') === 'true'; var pressed = this.getAttribute('aria-pressed') === 'true';
e.target.setAttribute('aria-pressed', !pressed); this.setAttribute('aria-pressed', !pressed);
}); });
</script> </script>
</template> </template>
<script> <script>
(function() { (function() {
var root = document.getElementById('js-demo-414e06a48e755bf9e43e5e2596f9ea7a'); var root = document.getElementById('js-demo-285170a1c0812ad34ac4b853a052c8bd');
var template = document.getElementById('template-414e06a48e755bf9e43e5e2596f9ea7a'); var template = document.getElementById('template-285170a1c0812ad34ac4b853a052c8bd');
var demoDiv = document.createElement('div'); var demoDiv = document.createElement('div');
demoDiv.innerHTML = template.innerHTML; demoDiv.innerHTML = template.innerHTML;
var standaloneScript = demoDiv.querySelector('script'); var standaloneScript = demoDiv.querySelector('script');
@ -514,7 +514,7 @@ toggle.addEventListener('click', (e) => {
if (document.head.attachShadow) { if (document.head.attachShadow) {
var templateScript = template.content.querySelector('script'); var templateScript = template.content.querySelector('script');
if (templateScript) { if (templateScript) {
var wrappedScript = '(function() { var demo = document.getElementById(\'js-demo-414e06a48e755bf9e43e5e2596f9ea7a\').shadowRoot;' + templateScript.textContent + '})();'; var wrappedScript = '(function() { var demo = document.getElementById(\'js-demo-285170a1c0812ad34ac4b853a052c8bd\').shadowRoot;' + templateScript.textContent + '})();';
templateScript.textContent = wrappedScript; templateScript.textContent = wrappedScript;
} }
root.attachShadow({mode: 'open'}); root.attachShadow({mode: 'open'});
@ -523,7 +523,7 @@ toggle.addEventListener('click', (e) => {
root.innerHTML = '<p class="site-error"><strong style="font-weight:bold">Site error:</strong> A browser supporting Shadow DOM is needed to run encapsulated demos. You can launch the demo in a separate window ↓</p>'; root.innerHTML = '<p class="site-error"><strong style="font-weight:bold">Site error:</strong> A browser supporting Shadow DOM is needed to run encapsulated demos. You can launch the demo in a separate window ↓</p>';
} }
var launchButton = document.querySelector('[data-launch="js-demo-414e06a48e755bf9e43e5e2596f9ea7a"]'); var launchButton = document.querySelector('[data-launch="js-demo-285170a1c0812ad34ac4b853a052c8bd"]');
launchButton.addEventListener('click', function () { launchButton.addEventListener('click', function () {
var standalone = window.open(); var standalone = window.open();
standalone.document.body.innerHTML = demoDiv.innerHTML; standalone.document.body.innerHTML = demoDiv.innerHTML;
@ -537,7 +537,7 @@ toggle.addEventListener('click', (e) => {
standalone.document.title = 'demo ' + "414e06a48e755bf9e43e5e2596f9ea7a"; standalone.document.title = 'demo ' + "285170a1c0812ad34ac4b853a052c8bd";
}); });
})(); })();

22
docs/print-version/index.html
View File

@ -1840,12 +1840,12 @@ toggle.addEventListener('click', (e) => {
<div class="demo-container"> <div class="demo-container">
<div class="demo-inner" > <div class="demo-inner" >
<div class="demo" id="js-demo-414e06a48e755bf9e43e5e2596f9ea7a"></div> <div class="demo" id="js-demo-285170a1c0812ad34ac4b853a052c8bd"></div>
<button data-launch="js-demo-414e06a48e755bf9e43e5e2596f9ea7a">Launch in separate window</button> <button data-launch="js-demo-285170a1c0812ad34ac4b853a052c8bd">Launch in separate window</button>
</div> </div>
<template id="template-414e06a48e755bf9e43e5e2596f9ea7a"> <template id="template-285170a1c0812ad34ac4b853a052c8bd">
<button aria-pressed="false">Toggle Me</button> <button aria-pressed="false">Toggle Me</button>
<style> <style>
@ -1869,17 +1869,17 @@ button {
<script> <script>
var toggle = demo.querySelector('[aria-pressed]'); var toggle = demo.querySelector('[aria-pressed]');
toggle.addEventListener('click', (e) => { toggle.addEventListener('click', function () {
let pressed = e.target.getAttribute('aria-pressed') === 'true'; var pressed = this.getAttribute('aria-pressed') === 'true';
e.target.setAttribute('aria-pressed', !pressed); this.setAttribute('aria-pressed', !pressed);
}); });
</script> </script>
</template> </template>
<script> <script>
(function() { (function() {
var root = document.getElementById('js-demo-414e06a48e755bf9e43e5e2596f9ea7a'); var root = document.getElementById('js-demo-285170a1c0812ad34ac4b853a052c8bd');
var template = document.getElementById('template-414e06a48e755bf9e43e5e2596f9ea7a'); var template = document.getElementById('template-285170a1c0812ad34ac4b853a052c8bd');
var demoDiv = document.createElement('div'); var demoDiv = document.createElement('div');
demoDiv.innerHTML = template.innerHTML; demoDiv.innerHTML = template.innerHTML;
var standaloneScript = demoDiv.querySelector('script'); var standaloneScript = demoDiv.querySelector('script');
@ -1888,7 +1888,7 @@ toggle.addEventListener('click', (e) => {
if (document.head.attachShadow) { if (document.head.attachShadow) {
var templateScript = template.content.querySelector('script'); var templateScript = template.content.querySelector('script');
if (templateScript) { if (templateScript) {
var wrappedScript = '(function() { var demo = document.getElementById(\'js-demo-414e06a48e755bf9e43e5e2596f9ea7a\').shadowRoot;' + templateScript.textContent + '})();'; var wrappedScript = '(function() { var demo = document.getElementById(\'js-demo-285170a1c0812ad34ac4b853a052c8bd\').shadowRoot;' + templateScript.textContent + '})();';
templateScript.textContent = wrappedScript; templateScript.textContent = wrappedScript;
} }
root.attachShadow({mode: 'open'}); root.attachShadow({mode: 'open'});
@ -1897,7 +1897,7 @@ toggle.addEventListener('click', (e) => {
root.innerHTML = '<p class="site-error"><strong style="font-weight:bold">Site error:</strong> A browser supporting Shadow DOM is needed to run encapsulated demos. You can launch the demo in a separate window ↓</p>'; root.innerHTML = '<p class="site-error"><strong style="font-weight:bold">Site error:</strong> A browser supporting Shadow DOM is needed to run encapsulated demos. You can launch the demo in a separate window ↓</p>';
} }
var launchButton = document.querySelector('[data-launch="js-demo-414e06a48e755bf9e43e5e2596f9ea7a"]'); var launchButton = document.querySelector('[data-launch="js-demo-285170a1c0812ad34ac4b853a052c8bd"]');
launchButton.addEventListener('click', function () { launchButton.addEventListener('click', function () {
var standalone = window.open(); var standalone = window.open();
standalone.document.body.innerHTML = demoDiv.innerHTML; standalone.document.body.innerHTML = demoDiv.innerHTML;
@ -1911,7 +1911,7 @@ toggle.addEventListener('click', (e) => {
standalone.document.title = 'demo ' + "414e06a48e755bf9e43e5e2596f9ea7a"; standalone.document.title = 'demo ' + "285170a1c0812ad34ac4b853a052c8bd";
}); });
})(); })();

2
docs/service-worker.js
View File

File diff suppressed because one or more lines are too long