Refactor(web-twig, demo): Move Tooltip demo scripts to the demo app

apps/web-twig-demo/assets/scripts/tooltip-advanced-usage.ts

@@ -0,0 +1,39 @@
+import { Tooltip } from '@lmc-eu/spirit-web/src/js/index.esm';
+
+const checkboxFlip = document.getElementById('my-advanced-flip') as HTMLInputElement;
+const checkboxFlipCrossAxis = document.getElementById('my-advanced-flip-cross-axis') as HTMLInputElement;
+const checkboxShift = document.getElementById('my-advanced-shift') as HTMLInputElement;
+const checkboxSize = document.getElementById('my-advanced-size') as HTMLInputElement;
+const select = document.getElementById('my-advanced-select') as HTMLSelectElement;
+const selectFallback = document.getElementById('my-advanced-select-fallback') as HTMLSelectElement;
+
+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;

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);

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')

packages/web-twig/src/Resources/components/Tooltip/stories/TooltipFloatingUI.twig

@@ -71,42 +71,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') }}