template extraction

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

@@ -506,31 +506,26 @@ toggle.addEventListener('click', (e) => {
     (function() {
       var root = document.getElementById('js-demo-414e06a48e755bf9e43e5e2596f9ea7a');
       var template = document.getElementById('template-414e06a48e755bf9e43e5e2596f9ea7a');
-      var script = template.content.querySelector('script');
+      var demoDiv = document.createElement('div');
-
+      demoDiv.innerHTML = template.innerHTML;
-      if (script) {
+      var standaloneScript = demoDiv.querySelector('script');
-        var standaloneScript = '(function() { document.getElementsByTagName(\'html\')[0].setAttribute(\'lang\', \'en\'); var demo = document; ' + script.textContent + ' })();';
+      standaloneScript.textContent = '(function() { document.getElementsByTagName(\'html\')[0].setAttribute(\'lang\', \'en\'); var demo = document; ' + standaloneScript.textContent + ' })();';
-        var wrappedScript = '(function() { var demo = document.getElementById(\'js-demo-414e06a48e755bf9e43e5e2596f9ea7a\').shadowRoot;' + script.textContent + '})();';
-        script.textContent = wrappedScript;
-      }
 
       if (document.head.attachShadow) {
+        var templateScript = template.content.querySelector('script');
+        if (templateScript) {
+          var wrappedScript = '(function() { var demo = document.getElementById(\'js-demo-414e06a48e755bf9e43e5e2596f9ea7a\').shadowRoot;' + templateScript.textContent + '})();';
+          templateScript.textContent = wrappedScript;
+        }
         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. You can launch the demo in a separate window ↓</p>';
       }
 
-       
-
-
-
       var launchButton = document.querySelector('[data-launch="js-demo-414e06a48e755bf9e43e5e2596f9ea7a"]');
       launchButton.addEventListener('click', function () {
         var standalone = window.open();
-        script.innerHTML = standaloneScript;
-        var demoDiv = document.createElement('div');
-        demoDiv.innerHTML = template.innerHTML;
         standalone.document.body.appendChild(demoDiv);
 
         
@@ -545,6 +540,14 @@ toggle.addEventListener('click', (e) => {
         standalone.document.title = 'demo ' + "414e06a48e755bf9e43e5e2596f9ea7a";
       });
     })();
+    
+
+
+
+
+
+
+
   </script>
 </div>
 

docs/print-version/index.html

@@ -1880,31 +1880,26 @@ toggle.addEventListener('click', (e) => {
     (function() {
       var root = document.getElementById('js-demo-414e06a48e755bf9e43e5e2596f9ea7a');
       var template = document.getElementById('template-414e06a48e755bf9e43e5e2596f9ea7a');
-      var script = template.content.querySelector('script');
+      var demoDiv = document.createElement('div');
-
+      demoDiv.innerHTML = template.innerHTML;
-      if (script) {
+      var standaloneScript = demoDiv.querySelector('script');
-        var standaloneScript = '(function() { document.getElementsByTagName(\'html\')[0].setAttribute(\'lang\', \'en\'); var demo = document; ' + script.textContent + ' })();';
+      standaloneScript.textContent = '(function() { document.getElementsByTagName(\'html\')[0].setAttribute(\'lang\', \'en\'); var demo = document; ' + standaloneScript.textContent + ' })();';
-        var wrappedScript = '(function() { var demo = document.getElementById(\'js-demo-414e06a48e755bf9e43e5e2596f9ea7a\').shadowRoot;' + script.textContent + '})();';
-        script.textContent = wrappedScript;
-      }
 
       if (document.head.attachShadow) {
+        var templateScript = template.content.querySelector('script');
+        if (templateScript) {
+          var wrappedScript = '(function() { var demo = document.getElementById(\'js-demo-414e06a48e755bf9e43e5e2596f9ea7a\').shadowRoot;' + templateScript.textContent + '})();';
+          templateScript.textContent = wrappedScript;
+        }
         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. You can launch the demo in a separate window ↓</p>';
       }
 
-       
-
-
-
       var launchButton = document.querySelector('[data-launch="js-demo-414e06a48e755bf9e43e5e2596f9ea7a"]');
       launchButton.addEventListener('click', function () {
         var standalone = window.open();
-        script.innerHTML = standaloneScript;
-        var demoDiv = document.createElement('div');
-        demoDiv.innerHTML = template.innerHTML;
         standalone.document.body.appendChild(demoDiv);
 
         
@@ -1919,6 +1914,14 @@ toggle.addEventListener('click', (e) => {
         standalone.document.title = 'demo ' + "414e06a48e755bf9e43e5e2596f9ea7a";
       });
     })();
+    
+
+
+
+
+
+
+
   </script>
 </div>
 

themes/infusion/layouts/shortcodes/demo.html

@@ -18,6 +18,45 @@
   </template>
   <script>
     (function() {
+      var root = document.getElementById('js-demo-{{ $uniq }}');
+      var template = document.getElementById('template-{{ $uniq }}');
+      var demoDiv = document.createElement('div');
+      demoDiv.innerHTML = template.innerHTML;
+      var standaloneScript = demoDiv.querySelector('script');
+      standaloneScript.textContent = '(function() { document.getElementsByTagName(\'html\')[0].setAttribute(\'lang\', \'en\'); var demo = document; ' + standaloneScript.textContent + ' })();';
+
+      if (document.head.attachShadow) {
+        var templateScript = template.content.querySelector('script');
+        if (templateScript) {
+          var wrappedScript = '(function() { var demo = document.getElementById(\'js-demo-{{ $uniq }}\').shadowRoot;' + templateScript.textContent + '})();';
+          templateScript.textContent = wrappedScript;
+        }
+        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. You can launch the demo in a separate window ↓</p>';
+      }
+
+      var launchButton = document.querySelector('[data-launch="js-demo-{{ $uniq }}"]');
+      launchButton.addEventListener('click', function () {
+        var standalone = window.open();
+        standalone.document.body.appendChild(demoDiv);
+
+        // For activating the script :-(
+        var newScript = standalone.document.createElement('script');
+        var oldScript = standalone.document.querySelector('script');
+        newScript.textContent = oldScript.textContent;
+        oldScript.parentNode.removeChild(oldScript);
+        standalone.document.body.appendChild(newScript);
+
+        {{ if .Get "backgroundColor" }}
+          standalone.document.body.style.backgroundColor = {{ .Get "backgroundColor" | safeCSS }};
+        {{ end }}
+
+        standalone.document.title = 'demo ' + {{ $uniq }};
+      });
+    })();
+    /*(function() {
       var root = document.getElementById('js-demo-{{ $uniq }}');
       var template = document.getElementById('template-{{ $uniq }}');
       var script = template.content.querySelector('script');
@@ -35,16 +74,6 @@
         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 standalone = window.open();
-        script.textContent = standaloneScript;
-        standalone.document.body.appendChild(template.content.cloneNode(true));
-        {{ if .Get "backgroundColor" }}
-          standalone.document.body.style.backgroundColor = {{ .Get "backgroundColor" | safeCSS }};
-        {{ end }}
-        standalone.document.title = 'demo ' + {{ $uniq }};
-      });*/
       var launchButton = document.querySelector('[data-launch="js-demo-{{ $uniq }}"]');
       launchButton.addEventListener('click', function () {
         var standalone = window.open();
@@ -66,6 +95,6 @@
 
         standalone.document.title = 'demo ' + {{ $uniq }};
       });
-    })();
+    })();*/
   </script>
 </div>