Merge branch 'next-1.x' into '1.x'

fix: rework snippet decoding

See merge request !25

bin/backend/Snippets.js

@@ -110,7 +110,7 @@ define('package/quiqqer/html-snippets/bin/backend/Snippets', [
                     buttons: [
                         {
                             name: 'addSnippet',
-                            text: QUILocale.get('quiqqer/core', 'add'),
+                            text: QUILocale.get('quiqqer/quiqqer', 'add'),
                             position: 'left',
                             events: {
                                 click: this.add
@@ -118,7 +118,7 @@ define('package/quiqqer/html-snippets/bin/backend/Snippets', [
                         }, {
                             name: 'remove',
                             icon: 'fa fa-trash',
-                            title: QUILocale.get('quiqqer/core', 'remove'),
+                            title: QUILocale.get('quiqqer/quiqqer', 'remove'),
                             disabled: true,
                             styles: {
                                 'float': 'right'

bin/frontend/gdprReader.js

 (function() {
     'use strict';
 
-    const loadNode = function(Node) {
-        if (Node.getAttribute('data-qui-html-snippet-gdpr-loaded')) {
-            return;
-        }
+    const processSnippetNodes = function(nodes) {
+        // Gather all HTML snippet nodes ("template" elements with a specific "data-" attribute)
+        const SnippetsNodeList = document.querySelectorAll('template[data-qui-html-snippet="gdpr"]');
 
-        Node.innerHTML = atob(Node.innerHTML);
-        const scripts = Array.from(Node.getElementsByTagName('script'));
+        SnippetsNodeList.forEach((SnippetNode) => {
+            const gdprCategory = SnippetNode.getAttribute('data-qui-html-snippet-gdpr-category');
 
-        scripts.forEach((script) => {
-            const newScript = document.createElement('script');
-            newScript.textContent = script.textContent;
+            // Only decode (and execute) the snippet node, if the corresponding gdpr category was accepted
+            window.GDPR.waitForCookieCategoryAcceptance(gdprCategory).then(() => {
+                decodeSnippetNode(SnippetNode);
+            });
+        });
+    };
+
+    const decodeSnippetNode = function(SnippetNode) {
+        // The node's inner HTML is base64 encoded, turn it back to normal HTML
+        SnippetNode.innerHTML = atob(SnippetNode.innerHTML);
+
+        // The snippet code is in a wrapping <template> node and thus isn't interpreted
+        // Therefore we have to move all nodes inside this template snippet node into the document
+        // We do that by iterating over all direct children of the template element and...
+        Array.from(SnippetNode.content.children).forEach(ChildNode => {
+            let NodeToInsert = ChildNode;
 
-            let i, len, attribute;
+            // ...if it is a script tag it needs special treatment
+            if (ChildNode.tagName === 'SCRIPT') {
+                // "script" tags are not executed when moved from the snippet node to the document
+                // Therefore a new element has to be created instead
+                // The new element is executed when added to the document
+                NodeToInsert = createExecutableCopyOfScriptNode(ChildNode);
 
-            for (i = 0, len = script.attributes.length; i < len; i++) {
-                attribute = script.attributes[i];
-                newScript.setAttribute(attribute.name, attribute.value);
+                // Remove the original script node as we are using the copy now
+                ChildNode.remove();
             }
 
-            script.parentNode.replaceChild(newScript, script);
+            // ...moving the child node from inside the template snippet node in front of the snippet node
+            SnippetNode.insertAdjacentElement('beforebegin', NodeToInsert);
         });
 
-        Node.setAttribute('data-qui-html-snippet-gdpr-loaded', 1);
-        Node.style.display = '';
+        // ...and deleting the now empty snippet node
+        SnippetNode.remove();
     };
 
-    const fetchNodes = function(nodes) {
-        nodes.forEach((Node) => {
-            const gdprCategory = Node.getAttribute('data-qui-html-snippet-gdpr-category');
+    const createExecutableCopyOfScriptNode = function (ScriptNode) {
+        const ExecutableScriptNode = document.createElement('script');
 
-            if (window.GDPR.isCookieCategoryAccepted(gdprCategory)) {
-                loadNode(Node);
-            } else {
-                window.GDPR.waitForCookieCategoryAcceptance(gdprCategory).then(() => {
-                    loadNode(Node);
-                });
-            }
+        // Copy the script's text content (the JavaScript code)
+        ExecutableScriptNode.textContent = ScriptNode.textContent;
+
+        // Copy all the script's attributes
+        Array.from(ScriptNode.attributes).forEach(ScriptAttribute => {
+            ExecutableScriptNode.setAttribute(ScriptAttribute.name, ScriptAttribute.value);
         });
+
+        return ExecutableScriptNode;
     };
 
-    fetchNodes(document.querySelectorAll('[data-qui-html-snippet="gdpr"]'));
+    processSnippetNodes();
 
-    window.whenQuiLoaded().then(() => {
-        fetchNodes(document.querySelectorAll('[data-qui-html-snippet="gdpr"]'));
-    });
+    window.whenQuiLoaded().then(processSnippetNodes);
 })();

src/QUI/HtmlSnippets/SnippetTemplateEvent.php

@@ -67,17 +67,19 @@ class SnippetTemplateEvent
                 continue;
             }
 
-            // consider gdpr status
-            $div = '<script ';
-            $div .= ' data-qui-html-snippet="gdpr"';
-            $div .= ' data-qui-html-snippet-gdpr-category="' . $snippet['gdpr'] . '"';
-            $div .= ' style="display: none"';
-            $div .= ' type="text/plain"';
-            $div .= '>';
-            $div .= base64_encode($snippet['snippet']);
-            $div .= '</script>';
-
-            $Collector->append($div);
+            $snippetGdprCategory = $snippet['gdpr'];
+            $snippetContentEncoded = base64_encode($snippet['snippet']);
+
+            $snippetHtml = <<<EOF
+<template
+    data-qui-html-snippet="gdpr"
+    data-qui-html-snippet-gdpr-category="$snippetGdprCategory"
+>
+$snippetContentEncoded
+</template>
+EOF;
+
+            $Collector->append($snippetHtml);
         }
     }
 }