From 4bad6f1f35411d8be68b6aa68a4926aae01d1691 Mon Sep 17 00:00:00 2001
From: literat <tomas@litera.me>
Date: Mon, 22 Jan 2024 14:23:13 +0100
Subject: [PATCH] Refactor(web-twig, demo): Move Tooltip demo scripts to the
 demo app

---
 .../assets/scripts/tooltip-adanced-usage.ts   | 39 ++++++++++++++++++
 .../scripts/tooltip-dismissible-via-js.ts     |  2 +-
 apps/web-twig-demo/webpack.config.js          |  1 +
 .../Tooltip/stories/TooltipFloatingUI.twig    | 40 +------------------
 4 files changed, 42 insertions(+), 40 deletions(-)
 create mode 100644 apps/web-twig-demo/assets/scripts/tooltip-adanced-usage.ts

diff --git a/apps/web-twig-demo/assets/scripts/tooltip-adanced-usage.ts b/apps/web-twig-demo/assets/scripts/tooltip-adanced-usage.ts
new file mode 100644
index 0000000000..20358735b4
--- /dev/null
+++ b/apps/web-twig-demo/assets/scripts/tooltip-adanced-usage.ts
@@ -0,0 +1,39 @@
+import { Tooltip } from '@lmc-eu/spirit-web/src/js/index.esm';
+
+const checkboxFlip = document.getElementById('my-advanced-flip');
+const checkboxFlipCrossAxis = document.getElementById('my-advanced-flipCrossAxis');
+const checkboxShift = document.getElementById('my-advanced-shift');
+const checkboxSize = document.getElementById('my-advanced-size');
+const select = document.getElementById('my-advanced-select');
+const selectFallback = document.getElementById('my-advanced-select-fallback');
+
+const tooltip = Tooltip.getOrCreateInstance(document.getElementById('my-advanced-tooltip'));
+
+tooltip.show();
+
+checkboxFlip.addEventListener('change', () => tooltip.updateConfig({ enableFlipping: checkboxFlip.checked }));
+
+checkboxFlipCrossAxis.addEventListener('change', () => {
+  tooltip.updateConfig({ enableFlippingCrossAxis: checkboxFlipCrossAxis.checked });
+});
+
+checkboxShift.addEventListener('change', () => {
+  tooltip.updateConfig({ enableShifting: checkboxShift.checked });
+});
+
+checkboxSize.addEventListener('change', () => {
+  tooltip.updateConfig({ enableSizing: checkboxSize.checked });
+});
+
+select.addEventListener('change', () => {
+  tooltip.updateConfig({ placement: select.value });
+});
+
+selectFallback.addEventListener('change', () => {
+  tooltip.updateConfig({ flipFallbackPlacements: selectFallback.value });
+});
+
+// const viewport = document.getElementById('my-advanced-viewport');
+// const content = document.getElementById('my-advanced-content');
+// viewport.scrollLeft = (content.offsetWidth - viewport.offsetWidth) / 2;
+// viewport.scrollTop = (content.offsetHeight - viewport.offsetHeight) / 2;
diff --git a/apps/web-twig-demo/assets/scripts/tooltip-dismissible-via-js.ts b/apps/web-twig-demo/assets/scripts/tooltip-dismissible-via-js.ts
index c2f8014bc5..879d13cb58 100644
--- a/apps/web-twig-demo/assets/scripts/tooltip-dismissible-via-js.ts
+++ b/apps/web-twig-demo/assets/scripts/tooltip-dismissible-via-js.ts
@@ -1,4 +1,4 @@
-import Tooltip from '@lmc-eu/spirit-web/src/js/Tooltip';
+import { Tooltip } from '@lmc-eu/spirit-web/src/js/index.esm';
 
 const myTooltipEl = document.getElementById('my-dismissible-tooltip2');
 const myTooltip = new Tooltip(myTooltipEl);
diff --git a/apps/web-twig-demo/webpack.config.js b/apps/web-twig-demo/webpack.config.js
index 5ddfa8d266..7cc9dc1197 100644
--- a/apps/web-twig-demo/webpack.config.js
+++ b/apps/web-twig-demo/webpack.config.js
@@ -29,6 +29,7 @@ Encore
     .addEntry('fileUploaderMetaData', './assets/scripts/file-uploader-meta-data.ts')
     .addEntry('formValidations', './assets/scripts/form-validations.ts')
     .addEntry('tooltipDismissibleViaJS', './assets/scripts/tooltip-dismissible-via-js.ts')
+    .addEntry('tooltipAdvancedUsage', './assets/scripts/tooltip-advanced-usage.ts')
 
     // enables the Symfony UX Stimulus bridge (used in assets/bootstrap.js)
     // .enableStimulusBridge('./assets/controllers.json')
diff --git a/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipFloatingUI.twig b/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipFloatingUI.twig
index 0383e8860e..08b9acfe94 100644
--- a/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipFloatingUI.twig
+++ b/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipFloatingUI.twig
@@ -67,42 +67,4 @@
     </div>
 </div>
 
-<script type="module">
-    const checkboxFlip = document.getElementById('my-advanced-flip');
-    const checkboxFlipCrossAxis = document.getElementById('my-advanced-flipCrossAxis');
-    const checkboxShift = document.getElementById('my-advanced-shift');
-    const checkboxSize = document.getElementById('my-advanced-size');
-    const select = document.getElementById('my-advanced-select');
-    const selectFallback = document.getElementById('my-advanced-select-fallback');
-
-    const tooltip = Tooltip.getOrCreateInstance(document.getElementById('my-advanced-tooltip'));
-
-    tooltip.show();
-
-    checkboxFlip.addEventListener('change', () => tooltip.updateConfig({enableFlipping: checkboxFlip.checked}));
-
-    checkboxFlipCrossAxis.addEventListener('change', () => {
-    tooltip.updateConfig({enableFlippingCrossAxis: checkboxFlipCrossAxis.checked});
-    });
-
-    checkboxShift.addEventListener('change', () => {
-    tooltip.updateConfig({enableShifting: checkboxShift.checked});
-    });
-
-    checkboxSize.addEventListener('change', () => {
-    tooltip.updateConfig({enableSizing: checkboxSize.checked});
-    });
-
-    select.addEventListener('change', () => {
-    tooltip.updateConfig({placement: select.value});
-    });
-
-    selectFallback.addEventListener('change', () => {
-    tooltip.updateConfig({flipFallbackPlacements: selectFallback.value});
-    });
-
-    // const viewport = document.getElementById('my-advanced-viewport');
-    // const content = document.getElementById('my-advanced-content');
-    // viewport.scrollLeft = (content.offsetWidth - viewport.offsetWidth) / 2;
-    // viewport.scrollTop = (content.offsetHeight - viewport.offsetHeight) / 2;
-</script>
+{{ encore_entry_script_tags('tooltipAdvancedUsage') }}