Review autoInit and destroy on rtl CSS resource change

ec-europa · Apr 13, 2022 · 086d6df · 086d6df
1 parent 71fbd72
commit 086d6df
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 2 deletions.
diff --git a/src/playground/ec/.storybook/manager-head.html b/src/playground/ec/.storybook/manager-head.html
@@ -26,6 +26,22 @@
       );
     }
   }
+
+  // Re-initialize component in the preview frame when changing #ecl-rtl CSS resource checkbox.
+  window.onload = function (event) {
+    var inputRtlCss = document.getElementById('ecl-rtl');
+    inputRtlCss.addEventListener('change', function (event) {
+      setTimeout(() => {
+        const iframePreview = document.getElementById(
+          'storybook-preview-iframe'
+        ).contentWindow;
+        if (iframePreview) {
+          iframePreview.ECL.autoInit().destroy();
+          iframePreview.ECL.autoInit();
+        }
+      }, 100);
+    });
+  };
 </script>
 <script
   src="https://ec.europa.eu/wel/cookie-consent/consent.js"

diff --git a/src/playground/ec/.storybook/preview.js b/src/playground/ec/.storybook/preview.js
@@ -40,7 +40,7 @@ addParameters({
     },
     {
       id: 'ecl-rtl',
-      code: `<link rel="stylesheet" type="text/css" href="./styles/optional/ecl-rtl.css" onload="ECL.autoInit().destroy(); ECL.autoInit();" />`,
+      code: `<link rel="stylesheet" type="text/css" href="./styles/optional/ecl-rtl.css" />`,
       picked: false,
       hideCode: true,
     },

diff --git a/src/playground/eu/.storybook/preview.js b/src/playground/eu/.storybook/preview.js
@@ -40,7 +40,7 @@ addParameters({
     },
     {
       id: 'ecl-rtl',
-      code: `<link rel="stylesheet" type="text/css" href="./styles/optional/ecl-rtl.css" onload="ECL.autoInit().destroy(); ECL.autoInit();" />`,
+      code: `<link rel="stylesheet" type="text/css" href="./styles/optional/ecl-rtl.css" />`,
       picked: false,
       hideCode: true,
     },