Merge pull request #73 from adobe-rnd/mystique-plugin

head.html

@@ -1,4 +1,4 @@
 <meta name="viewport" content="width=device-width, initial-scale=1"/>
 <script src="/scripts/scripts.js" type="module"></script>
 <link rel="stylesheet" href="/styles/styles.css"/>
-<link rel="icon" href="data:,">
+<script src="./tools/mystique/mystique.js" defer></script>

toggleStyles.js

@@ -0,0 +1,108 @@
+document.addEventListener('DOMContentLoaded', () => {
+  // Check query parameters
+  const urlParams = new URLSearchParams(window.location.search);
+  const useGeneratedStyles = urlParams.has('generatedStyles');
+
+  // Create stylesheets and buttons
+  const stylesheets = [];
+  const buttons = [];
+
+  if (useGeneratedStyles) {
+    // Create and add the generatedStyles.css stylesheet
+    const stylesheet = document.createElement('link');
+    stylesheet.id = 'generatedStyles';
+    stylesheet.rel = 'stylesheet';
+    stylesheet.href = '/generatedStyles.css';
+    stylesheet.disabled = false;
+    document.head.appendChild(stylesheet);
+  } else {
+    // Add stylesheets and buttons for files in the /generated folder
+    for (let i = 0; i <= 5; i++) { // Assuming there are 5 stylesheets for this example
+      (function (i) {
+        const stylesheet = document.createElement('link');
+        stylesheet.id = `style${i}`;
+        stylesheet.rel = 'stylesheet';
+        stylesheet.href = `/generated/styles${i}.css`;
+        stylesheet.disabled = true;
+        document.head.appendChild(stylesheet);
+        stylesheets.push(stylesheet);
+
+        const button = document.createElement('button');
+        button.className = 'toggle-button';
+        button.innerHTML = `Enable Variation ${i}`;
+        button.style.bottom = `${20 + (i + 1) * 50}px`; // Adjust vertical position
+        button.onclick = function () {
+          toggleStyle(i);
+        };
+        document.body.appendChild(button);
+        buttons.push(button);
+      }(i));
+    }
+
+    // Add the disable all styles button
+    const disableAllButton = document.createElement('button');
+    disableAllButton.className = 'toggle-button';
+    disableAllButton.innerHTML = 'Original Styles';
+    disableAllButton.style.bottom = '20px'; // Position at the bottom
+    disableAllButton.onclick = disableAllStyles;
+    document.body.appendChild(disableAllButton);
+  }
+
+  // Define the toggle function for each stylesheet
+  function toggleStyle(index) {
+    stylesheets.forEach((stylesheet, i) => {
+      stylesheet.disabled = true;
+      buttons[i].innerHTML = `Enable Variation ${i}`;
+      buttons[i].style.backgroundColor = '#007BFF';
+    });
+
+    const stylesheet = document.getElementById(`style${index}`);
+    stylesheet.disabled = false;
+    updateButtonState(index);
+  }
+
+  // Define the function to disable all stylesheets
+  function disableAllStyles() {
+    stylesheets.forEach((stylesheet, i) => {
+      stylesheet.disabled = true;
+      buttons[i].innerHTML = `Enable Variation ${i}`;
+      buttons[i].style.backgroundColor = '#007BFF';
+    });
+  }
+
+  // Define the function to update the button state
+  function updateButtonState(index) {
+    const button = buttons[index];
+    button.innerHTML = `Disable Variation ${index}`;
+    button.style.backgroundColor = '#FF0000';
+  }
+
+  // Hide buttons if using generatedStyles.css
+  if (useGeneratedStyles) {
+    console.log('Hiding buttons');
+    buttons.forEach((button) => {
+      button.style.display = 'none';
+    });
+  }
+
+  // Add styles for the buttons
+  const style = document.createElement('style');
+  style.innerHTML = `
+        .toggle-button {
+            position: fixed;
+            right: 20px;
+            padding: 10px 20px;
+            background-color: #007BFF;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            z-index: 1000;
+        }
+
+        .toggle-button:hover {
+            opacity: 0.8;
+        }
+    `;
+  document.head.appendChild(style);
+});

tools/mystique/mystique.js

@@ -0,0 +1,21 @@
+const EVENT_NAME = 'mystique-playground';
+
+const mystique = async ({ detail }) => {
+  const sk = detail.data;
+  const script = document.createElement('script');
+  script.src = 'https://localhost:4010/assistant.js';
+  script.type = 'text/javascript';
+  script.async = true;
+  document.head.appendChild(script);
+  console.log('Load Mystique here...', sk);
+};
+
+const sk = document.querySelector('helix-sidekick');
+if (sk) {
+  sk.addEventListener(`custom:${EVENT_NAME}`, mystique);
+} else {
+  document.addEventListener('sidekick-ready', () => {
+    document.querySelector('helix-sidekick')
+      .addEventListener(`custom:${EVENT_NAME}`, mystique);
+  }, { once: true });
+}

tools/sidekick/config.json

@@ -24,6 +24,12 @@
       "passConfig": true,
       "environments": [ "preview", "live", "edit" ],
       "includePaths": ["**.docx**"]
+    },
+    {
+      "id": "mystique-playground",
+      "title": "Mystique Playground",
+      "event": "mystique-playground",
+      "environments": [ "dev", "preview" ]
     }
   ]
 }