Merge pull request #2 from Heydon/standalone

Standalone windows

content/patterns/coding/writing-inline-demos.md

@@ -74,6 +74,13 @@ toggle.addEventListener('click', (e) => {
 </script>
 {{</demo>}}
 
+## Launch in a separate window
+
+The "Launch in separate window" takes the demo code and pushes it to a new browser window. This serves two purposes:
+
+* It provides a fallback for browsers that do not support Shadow DOM encapsulation (a warning message will replace the inline demo).
+* It creates an isolated test case for the demo, allowing you to run browser extensions and bookmarklets on the the demo code and _just_ the demo code.
+
 ## Captioned demos
 
 It's possible to give your demo a caption using an accessible `<figure>` and `<figcaption>` structure. All _you_ need to do is supply a `caption` attribute. For example:

docs/css/styles.css

@@ -162,12 +162,16 @@ main ul ul {
 button {
     font-size: 1.25rem;
     font-family: inherit;
-    font-weight: inherit;
     background: #111;
     color: #fff;
     padding: 0.75rem;
     border: 0;
 }
+[data-launch] {
+  font-size: 0.75rem;
+  margin-top: 0.75rem;
+  padding: 0.5rem;
+}
 /* Tables */
 
 table {
@@ -683,6 +687,13 @@ h1 svg {
 }
 /* inline demos */
 
+.demo-container {
+  border-top: 1px solid;
+  border-bottom: 1px solid;
+  padding: 1.5rem 0 0;
+  text-align: right;
+}
+
 [id^="js-demo-"] {
     all: initial;
     display: block;

docs/patterns/coding/writing-inline-demos/index.html

@@ -357,6 +357,25 @@
     
       
 
+  <nav class="toc" aria-labelledby="toc-heading">
+    <h2 id="toc-heading">Table of contents</h2>
+    <ol>
+      
+        <li>
+          <a href="#launch-in-a-separate-window">
+            Launch in a separate window
+          </a>
+        </li>
+      
+        <li>
+          <a href="#captioned-demos">
+            Captioned demos
+          </a>
+        </li>
+      
+    </ol>
+  </nav>
+
 
     
     
@@ -406,7 +425,7 @@ toggle.addEventListener('click', (e) => {
 
 <div class="demo-container">
   
-      <div class="demo" id="demo-414e06a48e755bf9e43e5e2596f9ea7a"></div>
+      <div class="demo" id="js-demo-414e06a48e755bf9e43e5e2596f9ea7a"></div>
       
   
   <template id="template-414e06a48e755bf9e43e5e2596f9ea7a">
@@ -440,25 +459,48 @@ toggle.addEventListener('click', (e) => {
 </script>
 
   </template>
+  <button data-launch="js-demo-414e06a48e755bf9e43e5e2596f9ea7a">Launch in separate window</button>
   <script>
     (function() {
-      var root = document.getElementById('demo-414e06a48e755bf9e43e5e2596f9ea7a');
+      var root = document.getElementById('js-demo-414e06a48e755bf9e43e5e2596f9ea7a');
-      if (document.head.attachShadow) {
-        root.attachShadow({mode: 'open'});
       var template = document.getElementById('template-414e06a48e755bf9e43e5e2596f9ea7a');
       var script = template.content.querySelector('script');
+
       if (script) {
-          script.textContent = `(function() { var demo = document.getElementById(\'demo-414e06a48e755bf9e43e5e2596f9ea7a\').shadowRoot; ${script.textContent} })()`
+        var standaloneScript = '(function() { document.getElementsByTagName(\'html\')[0].setAttribute(\'lang\', \'en\'); var demo = document; ' + script.textContent + ' })()';
+        var wrappedScript = '(function() { var demo = document.getElementById(\'js-demo-414e06a48e755bf9e43e5e2596f9ea7a\').shadowRoot;' + script.textContent + '})()';
+        script.textContent = wrappedScript;
       }
+
+      if (document.head.attachShadow) {
+        root.attachShadow({mode: 'open'});
         root.shadowRoot.appendChild(document.importNode(template.content, true));
       } else {
-        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. The browser does not have an issue with the demo code itself.</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"]');
+      launchButton.addEventListener('click', function () {
+        var demoContent = template.content;
+        var standalone = window.open();
+        script.textContent = standaloneScript;
+        standalone.document.body.appendChild(document.importNode(template.content, true));
+        standalone.document.title = 'demo ' + "414e06a48e755bf9e43e5e2596f9ea7a"
+      });
     })();
   </script>
 </div>
 
 
+<h2 id="launch-in-a-separate-window">Launch in a separate window</h2>
+
+<p>The &ldquo;Launch in separate window&rdquo; takes the demo code and pushes it to a new browser window. This serves two purposes:</p>
+
+<ul>
+<li>It provides a fallback for browsers that do not support Shadow DOM encapsulation (a warning message will replace the inline demo).</li>
+<li>It creates an isolated test case for the demo, allowing you to run browser extensions and bookmarklets on the the demo code and <em>just</em> the demo code.</li>
+</ul>
+
 <h2 id="captioned-demos">Captioned demos</h2>
 
 <p>It&rsquo;s possible to give your demo a caption using an accessible <code>&lt;figure&gt;</code> and <code>&lt;figcaption&gt;</code> structure. All <em>you</em> need to do is supply a <code>caption</code> attribute. For example:</p>

docs/print-version/index.html

@@ -1665,7 +1665,7 @@ toggle.addEventListener('click', (e) => {
 
 <div class="demo-container">
   
-      <div class="demo" id="demo-414e06a48e755bf9e43e5e2596f9ea7a"></div>
+      <div class="demo" id="js-demo-414e06a48e755bf9e43e5e2596f9ea7a"></div>
       
   
   <template id="template-414e06a48e755bf9e43e5e2596f9ea7a">
@@ -1699,25 +1699,48 @@ toggle.addEventListener('click', (e) => {
 </script>
 
   </template>
+  <button data-launch="js-demo-414e06a48e755bf9e43e5e2596f9ea7a">Launch in separate window</button>
   <script>
     (function() {
-      var root = document.getElementById('demo-414e06a48e755bf9e43e5e2596f9ea7a');
+      var root = document.getElementById('js-demo-414e06a48e755bf9e43e5e2596f9ea7a');
-      if (document.head.attachShadow) {
-        root.attachShadow({mode: 'open'});
       var template = document.getElementById('template-414e06a48e755bf9e43e5e2596f9ea7a');
       var script = template.content.querySelector('script');
+
       if (script) {
-          script.textContent = `(function() { var demo = document.getElementById(\'demo-414e06a48e755bf9e43e5e2596f9ea7a\').shadowRoot; ${script.textContent} })()`
+        var standaloneScript = '(function() { document.getElementsByTagName(\'html\')[0].setAttribute(\'lang\', \'en\'); var demo = document; ' + script.textContent + ' })()';
+        var wrappedScript = '(function() { var demo = document.getElementById(\'js-demo-414e06a48e755bf9e43e5e2596f9ea7a\').shadowRoot;' + script.textContent + '})()';
+        script.textContent = wrappedScript;
       }
+
+      if (document.head.attachShadow) {
+        root.attachShadow({mode: 'open'});
         root.shadowRoot.appendChild(document.importNode(template.content, true));
       } else {
-        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. The browser does not have an issue with the demo code itself.</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"]');
+      launchButton.addEventListener('click', function () {
+        var demoContent = template.content;
+        var standalone = window.open();
+        script.textContent = standaloneScript;
+        standalone.document.body.appendChild(document.importNode(template.content, true));
+        standalone.document.title = 'demo ' + "414e06a48e755bf9e43e5e2596f9ea7a"
+      });
     })();
   </script>
 </div>
 
 
+<h2 id="launch-in-a-separate-window">Launch in a separate window</h2>
+
+<p>The &ldquo;Launch in separate window&rdquo; takes the demo code and pushes it to a new browser window. This serves two purposes:</p>
+
+<ul>
+<li>It provides a fallback for browsers that do not support Shadow DOM encapsulation (a warning message will replace the inline demo).</li>
+<li>It creates an isolated test case for the demo, allowing you to run browser extensions and bookmarklets on the the demo code and <em>just</em> the demo code.</li>
+</ul>
+
 <h2 id="captioned-demos">Captioned demos</h2>
 
 <p>It&rsquo;s possible to give your demo a caption using an accessible <code>&lt;figure&gt;</code> and <code>&lt;figcaption&gt;</code> structure. All <em>you</em> need to do is supply a <code>caption</code> attribute. For example:</p>

themes/infusion/layouts/shortcodes/demo.html

@@ -3,7 +3,7 @@
   {{ if .Get "caption" }}
   <figure role="group" aria-labelledby="caption-{{ $uniq }}">
   {{ end }}
-      <div class="demo" id="demo-{{ $uniq }}"></div>
+      <div class="demo" id="js-demo-{{ $uniq }}"></div>
       {{ if .Get "caption" }}
           <figcaption id="caption-{{ $uniq }}">{{ .Get "caption" | markdownify }}</figcaption>
       {{ end }}
@@ -13,20 +13,34 @@
   <template id="template-{{ $uniq }}">
       {{ .Inner }}
   </template>
+  <button data-launch="js-demo-{{ $uniq }}">Launch in separate window</button>
   <script>
     (function() {
-      var root = document.getElementById('demo-{{ $uniq }}');
+      var root = document.getElementById('js-demo-{{ $uniq }}');
-      if (document.head.attachShadow) {
-        root.attachShadow({mode: 'open'});
       var template = document.getElementById('template-{{ $uniq }}');
       var script = template.content.querySelector('script');
+
       if (script) {
-          script.textContent = `(function() { var demo = document.getElementById(\'demo-{{ $uniq }}\').shadowRoot; ${script.textContent} })()`
+        var standaloneScript = '(function() { document.getElementsByTagName(\'html\')[0].setAttribute(\'lang\', \'en\'); var demo = document; ' + script.textContent + ' })()';
+        var wrappedScript = '(function() { var demo = document.getElementById(\'js-demo-{{ $uniq }}\').shadowRoot;' + script.textContent + '})()';
+        script.textContent = wrappedScript;
       }
+
+      if (document.head.attachShadow) {
+        root.attachShadow({mode: 'open'});
         root.shadowRoot.appendChild(document.importNode(template.content, true));
       } else {
-        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. The browser does not have an issue with the demo code itself.</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-{{ $uniq }}"]');
+      launchButton.addEventListener('click', function () {
+        var demoContent = template.content;
+        var standalone = window.open();
+        script.textContent = standaloneScript;
+        standalone.document.body.appendChild(document.importNode(template.content, true));
+        standalone.document.title = 'demo ' + {{ $uniq }}
+      });
     })();
   </script>
 </div>

themes/infusion/static/css/styles.css

@@ -162,12 +162,16 @@ main ul ul {
 button {
     font-size: 1.25rem;
     font-family: inherit;
-    font-weight: inherit;
     background: #111;
     color: #fff;
     padding: 0.75rem;
     border: 0;
 }
+[data-launch] {
+  font-size: 0.75rem;
+  margin-top: 0.75rem;
+  padding: 0.5rem;
+}
 /* Tables */
 
 table {
@@ -683,6 +687,13 @@ h1 svg {
 }
 /* inline demos */
 
+.demo-container {
+  border-top: 1px solid;
+  border-bottom: 1px solid;
+  padding: 1.5rem 0 0;
+  text-align: right;
+}
+
 [id^="js-demo-"] {
     all: initial;
     display: block;