@csedl/hotwire-svelte-helpers 0.1.0 → 1.0.0

package/.idea/dictionaries/project.xml

@@ -0,0 +1,7 @@
+<component name="ProjectDictionaryState">
+  <dictionary name="project">
+    <words>
+      <w>Hotwire</w>
+    </words>
+  </dictionary>
+</component>

package/README.md

@@ -1,44 +1,49 @@
-# Stimulus Dropdown
+# Hotwire Svelte Helpers
+
+is the successor of the `@csedl/stimulus-dropdown` package
 
 Dropdown with stimulus, based on floating-UI.
 
 **Links:**
-- [Online Demo App](https://stimulus-dropdown.sedlmair.ch/)
-- [Ruby Gem: csedl-stimulus-dropdown](https://gitlab.com/sedl/csedl-stimulus-dropdown)
+- [Online Demo App](https://hotwire-svelte-helpers.sedlmair.ch/)
+- [Ruby Gem: csedl-stimulus-dropdownSvelte](https://gitlab.com/sedl/csedl-stimulus-dropdown)
 - [How we are building a Rails App](https://dev.to/chmich/setup-vite-svelte-inertia-stimulus-bootstrap-foundation-on-rails-7-overview-1bk1)
 
 ## Import and config
 
 ```javascript
-import {StimulusDropdown} from "@csedl/stimulus-dropdown"
-StimulusDropdown.debug = false
+import {HotwireSvelteHelpers} from "@csedl/hotwire-svelte-helpers"
+HotwireSvelteHelpers.debug = true
+HotwireSvelteHelpers.initializeOverlays()
 ```
 
 All configurations and their defaults are as follows:
 
 ```javascript
-debug: false
-closeButtonSelector: '.close-button'
-dropdownContentSelector: '.content'
-  // when a data-src attribute is added to the panel, the content-tag is replaced by the result of the xhr-response
-tooltipContentSelector: '.content'
-  // same as dropdownContentSelector
-addArrow: true
-  // add element with id #arrow within the panel, on opening
-persistTooltipOnClick: false
-  // clicking on the tooltip-label causes the tooltip-panel to persist open
-  // this may mostly be helpful for development, so you may make it environment-dependent
+HotwireSvelteHelpers.initializeOverlays({
+    debug: false,
+    closeButtonSelector: '.close-button',
+    dropdownContentSelector: '.content',
+    // when a data-src attribute is added to the panel, the content-tag is replaced by the result of the xhr-response
+    tooltipContentSelector: '.content',
+    // same as dropdownContentSelector
+    addArrow: true,
+    // add element with id #arrow within the panel, on opening
+    persistTooltipOnClick: false
+    // clicking on the tooltip-label causes the tooltip-panel to persist open
+    // this may mostly be helpful for development, so you may make it environment-dependent
+})
 ```
 
 ## Example
 
-There is a [online example app](https://stimulus-dropdown.sedlmair.ch/)
+There is a [online example app](https://hotwire-svelte-helpers.sedlmair.ch/)
 
 ```html
 <div data-controller="csedl-dropdown" data-panel-id="dropdown-panel-3h5k7l4">
     Button
 </div>
-<div id="dropdown-panel-3h5k7l4" class="hide dropdown-panel-example-class">
+<div id="dropdown-panel-3h5k7l4" class="hide dropdownSvelte-panel-example-class">
     ... any content
 </div>
 ```
@@ -53,35 +58,35 @@ There is a [online example app](https://stimulus-dropdown.sedlmair.ch/)
 
 ## Close on click outside
 
-When a dropdown is open, it closes when clicking outside a panel.
+When a dropdownSvelte is open, it closes when clicking outside a panel.
 
 This behaviour can be stopped on:
 
-- The clicked element or its parent elements has the `data-dropdown-persist` (not: `data-dropdown-persist="false"`) attribute.
+- The clicked element or its parent elements has the `data-dropdownSvelte-persist` (not: `data-dropdownSvelte-persist="false"`) attribute.
 - the event has the attribute `event.detail.dataDropdownPersist` set to true.
 
 ## Flexibility
 
-The functions of this package are intended to give flexibility on various ways building a dropdown.
+The functions of this package are intended to give flexibility on various ways building a dropdownSvelte.
 
 - Stimulus Controller with Rails Helper
   - Example: [Stimulus controller within this package](https://gitlab.com/sedl/csedl-stimulus-dropdown-js/-/blob/main/src/dropdown-controller.js?ref_type=heads)
 - Stimulus with Svelte component
   - Example: [Stimulus controller on example app](https://gitlab.com/sedl/stimulusfloatingdropdown/-/blob/main/app/frontend/javascript/svelte-dropdown-controller.js?ref_type=heads)
 
-**Important:** When creating or initializing the dropdown, 
+**Important:** When creating or initializing the dropdownSvelte, 
 always call the initialize function before attaching a listener to the panel's close event. 
 The initialize function adds a `close` event listener to the panel that executes the `onPanelClose` function. 
 If your custom close function destroys the panel, this has to be done after the `onPanelClose` is fired by the `close` event.
 
 ## Requirements
 
-- The class `dropdown-panel-example-class` must be set to `position: absolute;`.
+- The class `dropdownSvelte-panel-example-class` must be set to `position: absolute;`.
 - The class `hide` must be set to `display: none;`.
 
 ## Options
 
-- If there is an element with ID `arrow` inside the dropdown panel, it is treated as described on [floating-ui](https://floating-ui.com/docs/arrow).
+- If there is an element with ID `arrow` inside the dropdownSvelte panel, it is treated as described on [floating-ui](https://floating-ui.com/docs/arrow).
 - The `data-placement` attribute on the panel can be used to control positioning, see [floating-ui/placements](https://floating-ui.com/docs/tutorial#placements).
 
 ## Events
@@ -109,12 +114,12 @@ Event Triggers on the panel element:
 If the panels are rendered to a different location than the button (see z-index on [rails-app](https://gitlab.com/sedl/stimulusfloatingdropdown)), within a scrollable (e.g.) container, the button would scroll away from the panel. For such cases, add this both data-attributes to the scrollable element:
 
 ```html
-<div data-controller="csedl-place-dropdown-panels" data-on="scroll" data-run-after="500" style="overflow: scroll;">
+<div data-controller="csedl-place-dropdownSvelte-panels" data-on="scroll" data-run-after="500" style="overflow: scroll;">
     ...
 </div>
 ```
 
-Now, on scrolling, it searches for all dropdown-buttons (by class-name `has-open-panel`) and triggers the `place-panel` event there.
+Now, on scrolling, it searches for all dropdownSvelte-buttons (by class-name `has-open-panel`) and triggers the `place-panel` event there.
 
 **Options**
 
@@ -151,15 +156,15 @@ makes a tooltip.
 
 It adds the class `tooltip-is-visible` to the tooltip label while the tooltip is visible.
 
-`data-src` attribute is working similar to dropdown
+`data-src` attribute is working similar to dropdownSvelte
 
 ## Rails Helpers
 
 There is a corresponding rails gem, on [GitLab](https://gitlab.com/sedl/csedl-stimulus-dropdown)
 
-## Stimulus Usage in stimulus-dropdown
+## Stimulus Usage in stimulus-dropdownSvelte
 
-This package uses Stimulus unconventionally to initialize and toggle external dropdown or tooltip panels 
+This package uses Stimulus unconventionally to initialize and toggle external dropdownSvelte or tooltip panels 
 (via data-panel-id) rather than managing child elements within the controller’s scope, 
 as is typical in Stimulus documentation. 
 

package/index.js

@@ -1,19 +1,12 @@
 
-import StimulusDropdown from "./src/config.js";
+import HotwireSvelteHelpers from "./src/lib/config.js";
+import { cleanMount, unmountAllDetached } from './src/svelte/cleanMount';
+import {initializeDropdown, openDropdownPanel, getOrSetPanelId, debugLog} from './src/lib/utils.js'
 
-import { Application } from "@hotwired/stimulus"
-window.Stimulus = Application.start()
 
-// initialize dropdowns
-import dc from './src/dropdown-controller'
-Stimulus.register('csedl-dropdown', dc)
 
-// initialize tooltips
-import ttc from './src/tooltip-controller'
-Stimulus.register('csedl-tooltip', ttc)
-
-// initialize place-panel controller
-import ppc from './src/move-panels-controller'
-Stimulus.register('csedl-move-panels', ppc)
-
-export { StimulusDropdown }
+export {
+    HotwireSvelteHelpers,
+    cleanMount, unmountAllDetached,
+    initializeDropdown, openDropdownPanel, getOrSetPanelId, debugLog
+}

package/package.json

@@ -1,26 +1,30 @@
 {
   "name": "@csedl/hotwire-svelte-helpers",
-  "version": "0.1.0",
-  "description": "Hotwire + Svelte helpers for Rails: Stimulus floating dropdowns/toolips + Svelte global panels/modals + Rails form error mapping + Turbo-friendly utilities. Build together with the rubygem svelte-on-rails and its npm-package.",
+  "version": "1.0.0",
+  "description": "Hotwire + Svelte helpers for Rails: Stimulus floating dropdowns/toolips + Svelte global panels/modals + RTurbo-friendly utilities. Build together with the rubygem svelte-on-rails and its npm-package.",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
+  "exports": {
+    ".": "./index.js"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://gitlab.com/sedl/csedl-hotwire-svelte-helpers"
   },
   "keywords": [
-    "Stimulus",
+    "Hotwire",
     "Dropdown",
-    "Rails"
+    "Rails",
+    "Svelte"
   ],
   "author": "Christian Sedlmair",
   "license": "MIT",
   "bugs": {
     "url": "https://gitlab.com/sedl/csedl-stimulus-dropdown-js/-/issues"
   },
-  "homepage": "https://gitlab.com/sedl/csedl-stimulus-dropdown-js",
+  "homepage": "https://gitlab.com/sedl/csedl-hotwire-svelte-helpers",
   "dependencies": {
     "@floating-ui/dom": ">=1.5.1",
     "@hotwired/stimulus": ">=3.2.1"

package/src/lib/config.js

@@ -0,0 +1,85 @@
+import {debugLog} from "./utils.js";
+import { Application } from "@hotwired/stimulus"
+import dc from '../stimulus/dropdown-controller'
+import ttc from '../stimulus/tooltip-controller'
+import ppc from '../stimulus/move-panels-controller'
+import { validateOptions } from "./type-validators";
+
+// DEFAULTS
+let _debug = false;
+
+let _close_on_click_outside_listener_added = false;
+
+const HotwireSvelteHelpers = {
+
+    // debug
+
+    get debug() {
+        return _debug;
+    },
+    set debug(value) {
+        if (typeof value !== "boolean") {
+            throw new Error("Debug value must be true or false");
+        }
+        _debug = value;
+        debugLog('debugging active')
+    },
+
+    overlays: {
+        closeButtonSelector: '.close-button',
+        dropdownContentSelector: '.content',
+        tooltipContentSelector: '.content',
+        addArrow: true,
+        persistTooltipOnClick: false,
+        closeOnClickOutsideListenerAdded: false,
+    },
+
+    initializeOverlays(options = {}) {
+
+        validateOptions(options, {
+            closeButtonSelector: 'string',
+            dropdownContentSelector: 'string',
+            tooltipContentSelector: 'string',
+            addArrow: 'boolean',
+            persistTooltipOnClick: 'boolean',
+            closeOnClickOutsideListenerAdded: 'boolean',
+        })
+
+        const overlays = this.overlays;
+
+        if (options.closeButtonSelector !== undefined) {
+            overlays.closeButtonSelector = options.closeButtonSelector;
+        }
+
+        if (options.dropdownContentSelector !== undefined) {
+            overlays.dropdownContentSelector = options.dropdownContentSelector;
+        }
+
+        if (options.tooltipContentSelector !== undefined) {
+            overlays.tooltipContentSelector = options.tooltipContentSelector;
+        }
+
+        if (options.addArrow !== undefined) {
+            overlays.addArrow = options.addArrow;
+        }
+
+        if (options.persistTooltipOnClick !== undefined) {
+            overlays.persistTooltipOnClick = options.persistTooltipOnClick;
+        }
+
+        window.Stimulus = Application.start()
+
+        Stimulus.register('csedl-dropdown', dc)
+        Stimulus.register('csedl-tooltip', ttc)
+        Stimulus.register('csedl-move-panels', ppc)
+
+        debugLog('Overlays active, driven by Stimulus')
+
+        return overlays;
+    }
+
+};
+
+window.HotwireSvelteHelpers = HotwireSvelteHelpers;
+
+export default HotwireSvelteHelpers;

package/src/{floating-ui-functions.js → lib/floating-ui-functions.js}

@@ -28,7 +28,7 @@ export function getAllOpenPanels(scopeElement) {
         }
     }
 
-    debugLog(`FOUND ${elements.length} OPEN DROPDOWNS`)
+    debugLog(`FOUND ${elements.length} OPEN DROPDOWNS for ${buttons.length} buttons`)
 
     return (elements)
 }
@@ -42,6 +42,7 @@ export function positionAllPanels(elements) {
 
 // Positions a single panel relative to its button
 export function positionPanel(button, panel) {
+
     let arrowElement = panel.querySelector('#arrow')
     panel.style.removeProperty('height')
     panel.style.removeProperty('left')
@@ -75,9 +76,9 @@ export function positionPanel(button, panel) {
                 bottom: '',
                 [staticSide]: '-4px',
             });
-            debugLog(`panel + arrow positioned`)
+            debugLog(`panel + arrow positioned: ${Math.round(x)}/${Math.round(y)}`)
         } else {
-            debugLog(`panel positioned`)
+            debugLog(`panel positioned: ${Math.round(x)}/${Math.round(y)}`)
         }
 
         adjustToWindowBounds(button, panel)

package/src/lib/type-validators.js

@@ -0,0 +1,34 @@
+/**
+ * Validates that all options in `givenOptions` are valid keys
+ * and have the correct runtime type as defined in `validations`.
+ *
+ * @param {Object} givenOptions - The options object to validate
+ * @param {Object} validations  - Map of option name → expected typeof string
+ *                                e.g. { timeout: 'number', debug: 'boolean' }
+ * @throws {Error} If an invalid option is found or type doesn't match
+ */
+export function validateOptions(givenOptions, validations) {
+    const validKeys = Object.keys(validations);
+
+    for (const option of Object.keys(givenOptions)) {
+        // Check if the option is allowed
+        if (!validKeys.includes(option)) {
+            throw new Error(
+                `Invalid option: "${option}". ` +
+                `Available options are:\n • ${validKeys.map(k => `"${k}"`).join("\n • ")}`
+            );
+        }
+
+        // Check the type
+        const expectedType = validations[option];
+        const actualType = typeof givenOptions[option];
+
+        if (actualType !== expectedType) {
+            throw new Error(
+                `Option «${option}»: expected type «${expectedType}», ` +
+                `but received «${actualType}» ` +
+                `(value: ${JSON.stringify(givenOptions[option])})`
+            );
+        }
+    }
+}

package/src/lib/utils.js

@@ -0,0 +1,277 @@
+import {positionPanelSelf, positionPanelByButton, positionPanel} from "./floating-ui-functions.js";
+import {validateOptions} from "./type-validators";
+
+// Fetch content from server based on panel's data-src attribute and update content
+export function openDropdownPanel(buttonElement, panelElement, options = {}) {
+
+    if (buttonElement.classList.contains('has-open-panel')) {return}
+
+    //validateOptions(options, {clickedElement: 'object'})
+    //const clickedElement = options.clickedElement || buttonElement;
+
+
+    // link button and panel, initialize
+    panelElement.id = getOrSetPanelId(buttonElement);
+    initializeDropdown(buttonElement)
+    debugLog(`opening panel ${panelElement.id.split('-').pop()}`)
+    panelElement.style.display = 'block';
+
+    // add arrow
+    if (window.HotwireSvelteHelpers.overlays.addArrow) {
+        if (!panelElement.querySelector(':scope > #arrow')) {
+            const arrowTag = document.createElement('div');
+            arrowTag.id = 'arrow';
+            panelElement.appendChild(arrowTag)
+        }
+    }
+
+    positionPanel(buttonElement, panelElement);
+
+    // Set focus to input element
+    if (panelElement.hasAttribute('data-set-focus')) {
+        let dataFocus = panelElement.getAttribute('data-set-focus');
+        let focusElement = panelElement.querySelector(dataFocus);
+        focusElement.focus();
+    }
+
+    // Set status attribute
+    panelElement.setAttribute('data-hsh-panel-status', 'open');
+    buttonElement.classList.add('has-open-panel');
+
+    // Dispatch events
+    const panelOpenEvent = new CustomEvent('before-open');
+    panelElement.dispatchEvent(panelOpenEvent);
+
+    const buttonOpenEvent = new CustomEvent('before-open-panel');
+    buttonElement.dispatchEvent(buttonOpenEvent);
+
+    // fetch content from server
+    const src = panelElement.getAttribute('data-src');
+    if (src) {
+        let xhr = new XMLHttpRequest();
+        debugLog(`Panel / data-src: «${src}»`);
+        xhr.open('GET', src);
+        xhr.send();
+        xhr.onload = function () {
+            if (xhr.status !== 200) {
+                alert(`Dropdown Controller, GET «${src}», Error ${xhr.status}: ${xhr.statusText}`);
+            } else {
+                const buttonElement = document.querySelector(`[data-panel-id="${panelElement.id}"]`);
+                const ctrl = buttonElement.getAttribute('data-controller');
+                const config = window.HotwireSvelteHelpers.overlays;
+                const contentSelector = config.dropdownContentSelector;
+
+                if (ctrl === 'csedl-dropdown' && contentSelector) {
+                    debugLog(`dropdown / contentSelector: «${contentSelector}»`);
+                    const wrapper = panelElement.querySelector(contentSelector);
+                    wrapper.innerHTML = xhr.response;
+                } else if (ctrl === 'csedl-tooltip' && contentSelector) {
+                    debugLog(`tooltip / contentSelector: «${contentSelector}»`);
+                    const wrapper = panelElement.querySelector(config.tooltipContentSelector);
+                    wrapper.innerHTML = xhr.response;
+                } else {
+                    debugLog(`? / contentSelector: «${contentSelector}»`);
+                    panelElement.innerHTML = xhr.response;
+                    console.error('fallback to replace whole panel');
+                }
+
+                positionPanelByButton(buttonElement, `after http-request "${ctrl}"`);
+            }
+        };
+    } else {
+        debugLog('no data-src attribute provided on panel');
+    }
+
+}
+
+// Handle panel closing
+export function closePanel(button) {
+
+    const panel = findPanelOrThrow(button);
+
+    debugLog(`closing panel ${panel.id.split('-').pop()}`)
+
+    // Update status attributes
+    button.classList.remove('has-open-panel');
+    panel.setAttribute('data-hsh-panel-status', 'closed');
+    panel.style.display = 'none';
+
+    // Remove outside click listener if no panels are open
+    const openPanels = document.querySelectorAll("[data-hsh-panel-status='open']");
+    debugLog(`panel closed, still open: ${openPanels.length}`);
+    if (window.HotwireSvelteHelpers.closeOnClickOutsideListenerAdded && openPanels.length === 0) {
+        window.HotwireSvelteHelpers.closeOnClickOutsideListenerAdded = false;
+        window.removeEventListener('click', closeOnOutsideClick);
+        debugLog('Listener for close panels on click outside removed');
+    }
+
+    // Dispatch close event
+    let buttonCloseEvent = new CustomEvent('after-close-panel');
+    button.dispatchEvent(buttonCloseEvent);
+}
+
+// Close panels when clicking outside
+export function closeOnOutsideClick(clickedElement) {
+
+    // set button
+    let btn
+    if (clickedElement instanceof HTMLElement) {
+        btn = clickedElement;
+    } else if (clickedElement instanceof Event) {
+        btn = clickedElement.target;
+    } else {
+        console.error('closeOnOutsideClick: invalid argument', clickedElement);
+        return false;
+    }
+
+    // do nothing if clicked within button or panel
+    const in_btn = btn.closest(".dropdown-button");
+    const in_panel = btn.closest(".dropdown-panel");
+    if (in_btn || in_panel) return;
+
+    let parentPanelIds = [];
+
+    const persistElement = btn.closest('[data-overlay-persist]');
+    if (persistElement) {
+        if (persistElement.getAttribute('data-overlay-persist') !== 'false') {
+            debugLog('closing panel prevented because the target element has attribute "data-overlay-persist"');
+            return false;
+        }
+    }
+
+    debugLog('closeOnOutsideClick called, clicked on:', btn);
+
+    while (true) {
+        const parentPanel = btn.closest("[data-hsh-panel-status='open']");
+        if (parentPanel) {
+            parentPanelIds.push(parentPanel.id);
+            btn = document.querySelector(`[data-panel-id="${parentPanel.id}"]`);
+        } else {
+            break;
+        }
+    }
+
+    const openPanels = document.querySelectorAll("[data-hsh-panel-status='open']");
+    for (const panel of openPanels) {
+        if (!parentPanelIds.includes(panel.id)) {
+            debugLog(`closeOnOutsideClick: dispatching close event for panel ${panel.id.split('-').pop()}`);
+            const ev = new Event('close');
+            panel.dispatchEvent(ev);
+        } else {
+            debugLog('closeOnOutsideClick: panel is still open:', panel);
+        }
+    }
+}
+
+// Add panel functionality, including close event listeners
+export function initializeDropdown(button) {
+
+    // find panel
+    const panel_id = button.getAttribute('data-panel-id');
+    if (!panel_id) {
+        throw new Error(`data-panel-id attribute is not defined for given dropdown button`);
+    }
+    const panel = document.getElementById(panel_id);
+    if (!panel) {
+        throw new Error(`panel element not found by ID: «${panel_id}»`);
+    }
+
+    let msg = []
+
+    // initialize panel
+    if (!panel.hasAttribute('data-hsh-initialized')) {
+        panel.setAttribute('data-hsh-initialized', 'true');
+
+        // Add close button functionality
+        const selector = window.HotwireSvelteHelpers.overlays.closeButtonSelector;
+        const closeButtons = panel.querySelectorAll(selector);
+        for (const btn of closeButtons) {
+            btn.addEventListener('click', () => {
+                const ev = new Event('close');
+                panel.dispatchEvent(ev);
+            });
+        }
+        // Add event listeners to panel
+        panel.addEventListener('place-me', () => positionPanelSelf(panel));
+        panel.addEventListener('close', () => closePanel(button))
+        msg.push('panel')
+    } else {
+        debugLog('initializeDropdown: panel already initialized:', panel.id.split('-').pop())
+    }
+
+    // initialize the button
+    if (!button.hasAttribute('data-hsh-initialized')) {
+        button.setAttribute('data-hsh-initialized', 'true');
+        button.addEventListener('place-panel', () => positionPanelByButton(button))
+        msg.push('button')
+    }
+
+    // Add listener for closing on outside click
+    let overlays = window.HotwireSvelteHelpers.overlays
+    if (!overlays.closeOnClickOutsideListenerAdded) {
+        overlays.closeOnClickOutsideListenerAdded = true;
+        setTimeout(() => {
+            window.addEventListener('click', closeOnOutsideClick)
+        }, 100)
+        msg.push('close-on-outside-click')
+    }
+
+
+    if (msg.length > 0) {
+        debugLog(`Initialized «${panel_id}»: ${msg.join(' + ')}`);
+    }
+}
+
+export function findPanelOrThrow(button) {
+    const panel = document.getElementById(button.getAttribute('data-panel-id'))
+    if (!panel) {
+        throw new Error(`dropdown button not found by attribute data-panel-id: «${button.getAttribute('data-panel-id')}»`)
+    }
+    return (panel)
+}
+
+// xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+// LOGGER
+// xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+
+export function debugLog(message, object) {
+    if (window.HotwireSvelteHelpers.debug) {
+
+        if (object) {
+            console.log(`[HSH] ${message}`, object);
+
+        } else {
+            console.log(`[HSH] ${message}`);
+        }
+
+    }
+}
+
+// xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+// ADDITIONAL FUNCTIONS
+// utils that are not used for the primary functions of this package itself, but helpful for building associated functions
+// xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+
+
+// find or add the data-panel-id attribute of a button and return it
+export function getOrSetPanelId(buttonTag) {
+    let id = buttonTag.getAttribute('data-panel-id')
+    if (id) {
+        return (id)
+    } else {
+        id = `dropdown-panel-${generateRandomHex(8)}`
+        buttonTag.setAttribute('data-panel-id', id)
+        return id
+    }
+}
+
+
+function generateRandomHex(n) {
+    if (n <= 0) return '';
+    return Array.from({length: n}, () =>
+        Math.floor(Math.random() * 16).toString(16)
+    ).join('');
+}
+
+
+

package/src/stimulus/dropdown-controller.js

@@ -0,0 +1,34 @@
+import { Controller } from "@hotwired/stimulus"
+import { openDropdownPanel, closePanel, findPanelOrThrow } from "../lib/utils.js";
+import { debugLog } from "../lib/utils.js";
+
+export default class extends Controller {
+
+    connect() {
+
+        this.element.addEventListener('click', (e) => this.toggle(e))
+
+    }
+
+
+    toggle(e) {
+        if (this.element.getAttribute('data-prevent-default')) {
+            e.preventDefault()
+        }
+        e.stopPropagation()
+        debugLog('toggle panel', e)
+
+        const panel = findPanelOrThrow(this.element)
+        if (panel.style.display === 'block') {
+            closePanel(this.element)
+        } else {
+            openDropdownPanel(this.element, panel)
+        }
+    }
+
+
+
+}
+
+
+

package/src/{move-panels-controller.js → stimulus/move-panels-controller.js}

@@ -1,6 +1,6 @@
 import {Controller} from "@hotwired/stimulus"
-import {positionAllPanels, getAllOpenPanels} from "./floating-ui-functions";
-import {debugLog} from "./utils.js";
+import {positionAllPanels, getAllOpenPanels} from "../lib/floating-ui-functions";
+import {debugLog} from "../lib/utils.js";
 
 export default class extends Controller {
 

package/src/{tooltip-controller.js → stimulus/tooltip-controller.js}

@@ -1,6 +1,6 @@
 import {Controller} from "@hotwired/stimulus"
-import {positionPanelByButton} from "./floating-ui-functions.js";
-import {debugLog, onPanelOpen} from "./utils.js";
+import {positionPanelByButton} from "../lib/floating-ui-functions.js";
+import {debugLog, findPanelOrThrow, openDropdownPanel} from "../lib/utils.js";
 
 export default class extends Controller {
 
@@ -17,7 +17,7 @@ export default class extends Controller {
         }
         this.element.addEventListener('mouseenter', (e) => this.start_opening(e, panel_id, delay_sec * 1000))
         this.element.addEventListener('mouseleave', (e) => this.close(e, panel_id))
-        if (window.StimulusDropdown.persistTooltipOnClick) {
+        if (window.HotwireSvelteHelpers.persistTooltipOnClick) {
             this.element.addEventListener('click', (e) => this.toggleByClick(e, panel_id))
         }
     }
@@ -42,7 +42,7 @@ export default class extends Controller {
 
     open(e, panel_id) {
         this.element.classList.add('tooltip-is-visible')
-        onPanelOpen(e, this.element)
+        openDropdownPanel(this.element, findPanelOrThrow(this.element))
         this.opening_timer_id = null
         let panel = document.getElementById(panel_id)
         panel.style.display = 'block';

package/src/svelte/cleanMount.js

@@ -0,0 +1,80 @@
+import { mount, unmount } from 'svelte';
+import { debugLog } from '../lib/utils.js';
+
+const mountedByTarget = new WeakMap();
+const trackedTargets = new Set();
+
+function getTargetRecordList(target) {
+    let records = mountedByTarget.get(target);
+
+    if (!records) {
+        records = [];
+        mountedByTarget.set(target, records);
+        trackedTargets.add(target);
+    }
+
+    return records;
+}
+
+export function cleanMount(component, options = {}) {
+
+    if (!options.target) {
+        throw new Error('[HSH] cleanMount: target is required');
+    }
+
+    if (!component) {
+        throw new Error('[HSH] cleanMount: component is required');
+    }
+
+    const instance = mount(component, options);
+
+    const records = getTargetRecordList(options.target);
+    records.push({
+        target: options.target,
+        component: component,
+        instance: instance
+    });
+
+    debugLog(`cleanMount: mounted, stored: ${records.length} components`, instance)
+
+    return instance;
+}
+
+export function unmountAllDetached() {
+    let unmountedCount = 0;
+
+    for (const target of Array.from(trackedTargets)) {
+        const records = mountedByTarget.get(target);
+
+        if (!records || records.length === 0) {
+            trackedTargets.delete(target);
+            mountedByTarget.delete(target);
+            continue;
+        }
+
+        if (target.isConnected) {
+            continue;
+        }
+
+        for (const record of records) {
+            try {
+                unmount(record.instance);
+                unmountedCount++;
+            } catch (error) {
+                console.error('[HSH] unmountAllDetached: failed to unmount component', error);
+            }
+        }
+
+        records.length = 0;
+        trackedTargets.delete(target);
+        mountedByTarget.delete(target);
+    }
+
+    if (unmountedCount === 0) {
+        debugLog('unmountAllDetached: nothing to unmount')
+    } else {
+        debugLog(`unmountAllDetached: unmounted ${unmountedCount} components`)
+    }
+
+    return unmountedCount;
+}

package/src/config.js

@@ -1,114 +0,0 @@
-import {debugLog} from "./utils.js";
-
-// DEFAULTS
-let _debug = false;
-let _close_button_selector = '.close-button';
-let _dropdown_content_selector = '.content';
-let _tooltip_content_selector = '.content';
-let _add_arrow = true;
-let _persist_tooltip_on_click = false;
-
-let _close_on_click_outside_listener_added = false;
-
-const StimulusDropdown = {
-
-    // debug
-
-    get debug() {
-        return _debug;
-    },
-    set debug(value) {
-        if (typeof value !== "boolean") {
-            throw new Error("Debug value must be true or false");
-        }
-        _debug = value;
-        debugLog('debugging active')
-    },
-
-    // close button selector
-
-    get closeButtonSelector() {
-        return _close_button_selector;
-    },
-    set closeButtonSelector(string) {
-        if (typeof string !== "string") {
-            throw new Error("Close Button Selector must be a string");
-        }
-        _close_button_selector = string;
-        debugLog(`close button selector is: «${string}»`);
-    },
-
-    // content selector
-
-    get dropdownContentSelector() {
-        return _dropdown_content_selector;
-    },
-    set dropdownContentSelector(string) {
-        if (typeof string !== "string") {
-            throw new Error("Content Selector must be a string");
-        }
-        _dropdown_content_selector = string;
-        debugLog(`dropdown content selector is: «${string}»`);
-    },
-
-    // tooltip content selector
-
-    get tooltipContentSelector() {
-        return _tooltip_content_selector;
-    },
-    set tooltipContentSelector(string) {
-        if (typeof string !== "string") {
-            throw new Error("Tooltip Content Selector must be a string");
-        }
-        _tooltip_content_selector = string;
-        debugLog(`tooltip content selector is: «${string}»`);
-    },
-
-    // add arrow
-
-    get addArrow() {
-        return _add_arrow;
-    },
-    set addArrow(boolean) {
-        if (typeof boolean !== "boolean") {
-            throw new Error("Tooltip Content Selector must be a string");
-        }
-        _add_arrow = boolean;
-        debugLog(`add-arrow is set to: «${boolean}»`);
-    },
-
-    // add arrow
-
-    get persistTooltipOnClick() {
-        return _persist_tooltip_on_click;
-    },
-    set persistTooltipOnClick(boolean) {
-        if (typeof boolean !== "boolean") {
-            throw new Error("Tooltip Content Selector must be a string");
-        }
-        _persist_tooltip_on_click = boolean;
-        debugLog(`Persist tooltip on click is set to: «${boolean}»`);
-    },
-
-    // ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
-    // INTERNAL USE
-    // ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
-
-    // closeOnClickOutsideListenerAdded
-
-    get closeOnClickOutsideListenerAdded() {
-        return _close_on_click_outside_listener_added;
-    },
-    set closeOnClickOutsideListenerAdded(bool) {
-        if (typeof bool !== "boolean") {
-            throw new Error("closeOnClickOutsideListenerAdded must be a boolean");
-        }
-        _close_on_click_outside_listener_added = bool;
-        debugLog(`closeOnClickOutsideListenerAdded is: «${bool}»`);
-    },
-
-};
-
-window.StimulusDropdown = StimulusDropdown;
-
-export default StimulusDropdown;

package/src/dropdown-controller.js

@@ -1,59 +0,0 @@
-import {Controller} from "@hotwired/stimulus"
-import {initializeDropdown, onPanelOpen} from "./utils.js";
-import {debugLog} from "./utils.js";
-
-export default class extends Controller {
-
-    connect() {
-
-        initializeDropdown(this.element)
-
-        this.element.addEventListener('click', (e) => this.toggle(e))
-
-    }
-
-
-    toggle(e) {
-        if (this.element.getAttribute('data-prevent-default')) {
-            e.preventDefault()
-        }
-        e.stopPropagation()
-        debugLog('toggle panel', e)
-        const target_id = this.element.getAttribute('data-panel-id')
-        const panel = document.getElementById(target_id)
-        if (!panel) {
-            console.error(`Panel-element with ID ${target_id} not found`)
-        } else if (panel.style.display === 'block') {
-            this.close(panel)
-        } else {
-            this.open(e, panel)
-        }
-    }
-
-    open(e, panel) {
-
-        // open the panel
-
-        panel.style.display = 'block';
-        debugLog('opened panel:', panel)
-
-        onPanelOpen(e, this.element)
-
-        panel.addEventListener('close', () => this.close(panel))
-
-    }
-
-    close(panel) {
-
-        // Close actions
-
-        panel.style.display = 'none';
-        debugLog('panel closed:', panel)
-
-    }
-
-
-}
-
-
-

package/src/utils.js

@@ -1,226 +0,0 @@
-import {positionPanelSelf, positionPanelByButton} from "./floating-ui-functions.js";
-
-// Fetch content from server based on panel's data-src attribute and update content
-export function onPanelOpen(event, button) {
-
-    const panel = findPanel(button);
-
-    debugLog('ON-PANEL-OPEN FUNCTIONS')
-
-    closeOnOutsideClick(event)
-
-    // add arrow
-    if (window.StimulusDropdown.addArrow) {
-        if (!panel.querySelector(':scope > #arrow')) {
-            const arrowTag = document.createElement('div');
-            arrowTag.id = 'arrow';
-            panel.appendChild(arrowTag)
-        }
-    }
-
-    positionPanelByButton(button);
-
-    // Set focus to input element
-    if (panel.hasAttribute('data-set-focus')) {
-        let dataFocus = panel.getAttribute('data-set-focus');
-        let focusElement = panel.querySelector(dataFocus);
-        focusElement.focus();
-    }
-
-    // Set status attribute
-    panel.setAttribute('data-stimulus-dropdown-panel-status', 'open');
-    button.classList.add('has-open-panel');
-
-    // Dispatch events
-    const panelOpenEvent = new CustomEvent('before-open');
-    panel.dispatchEvent(panelOpenEvent);
-
-    const buttonOpenEvent = new CustomEvent('before-open-panel');
-    button.dispatchEvent(buttonOpenEvent);
-
-    // Add listener for closing on outside click
-    if (!window.StimulusDropdown.closeOnClickOutsideListenerAdded) {
-        window.StimulusDropdown.closeOnClickOutsideListenerAdded = true;
-        window.addEventListener('click', closeOnOutsideClick);
-        debugLog('Listener for close panels on click outside added');
-    }
-
-    // fetch content from server
-    const src = panel.getAttribute('data-src');
-    if (src) {
-        let xhr = new XMLHttpRequest();
-        debugLog(`Panel / data-src: «${src}»`);
-        xhr.open('GET', src);
-        xhr.send();
-        xhr.onload = function () {
-            if (xhr.status !== 200) {
-                alert(`Dropdown Controller, GET «${src}», Error ${xhr.status}: ${xhr.statusText}`);
-            } else {
-                const button = document.querySelector(`[data-panel-id="${panel.id}"]`);
-                const ctrl = button.getAttribute('data-controller');
-                const config = window.StimulusDropdown;
-                const contentSelector = config.dropdownContentSelector;
-
-                if (ctrl === 'csedl-dropdown' && contentSelector) {
-                    debugLog(`dropdown / contentSelector: «${contentSelector}»`);
-                    const wrapper = panel.querySelector(contentSelector);
-                    wrapper.innerHTML = xhr.response;
-                } else if (ctrl === 'csedl-tooltip' && contentSelector) {
-                    debugLog(`tooltip / contentSelector: «${contentSelector}»`);
-                    const wrapper = panel.querySelector(config.tooltipContentSelector);
-                    wrapper.innerHTML = xhr.response;
-                } else {
-                    debugLog(`? / contentSelector: «${contentSelector}»`);
-                    panel.innerHTML = xhr.response;
-                    console.error('fallback to replace whole panel');
-                }
-
-                positionPanelByButton(button, `after http-request "${ctrl}"`);
-            }
-        };
-    } else {
-        debugLog('no data-src attribute provided on panel');
-    }
-}
-
-// Handle panel closing
-export function onPanelClose(button) {
-
-    const panel = findPanel(button);
-
-    debugLog('ON-PANEL-CLOSE FUNCTIONS')
-
-    // Update status attributes
-    button.classList.remove('has-open-panel');
-    panel.setAttribute('data-stimulus-dropdown-panel-status', 'closed');
-
-    // Remove outside click listener if no panels are open
-    const openPanels = document.querySelectorAll("[data-stimulus-dropdown-panel-status='open']");
-    debugLog(`panel closed, still open: ${openPanels.length}`);
-    if (window.StimulusDropdown.closeOnClickOutsideListenerAdded && openPanels.length === 0) {
-        window.StimulusDropdown.closeOnClickOutsideListenerAdded = false;
-        window.removeEventListener('click', closeOnOutsideClick);
-        debugLog('Listener for close panels on click outside removed');
-    }
-
-    // Dispatch close event
-    let buttonCloseEvent = new CustomEvent('after-close-panel');
-    button.dispatchEvent(buttonCloseEvent);
-}
-
-// Close panels when clicking outside
-export function closeOnOutsideClick(ev) {
-
-    let btn = ev.target;
-    let parentPanelIds = [];
-
-    const persistElement = ev.target.closest('[data-dropdown-persist]');
-    if (persistElement) {
-        if (persistElement.getAttribute('data-dropdown-persist') !== 'false') {
-            debugLog('closing panel prevented because the target element has attribute "data-dropdown-persist"');
-            return false;
-        }
-    }
-
-    debugLog('closeOnOutsideClick called, event.target:', ev.target);
-
-    while (true) {
-        const parentPanel = btn.closest("[data-stimulus-dropdown-panel-status='open']");
-        if (parentPanel) {
-            parentPanelIds.push(parentPanel.id);
-            btn = document.querySelector(`[data-panel-id="${parentPanel.id}"]`);
-        } else {
-            break;
-        }
-    }
-
-    const openPanels = document.querySelectorAll("[data-stimulus-dropdown-panel-status='open']");
-    for (const panel of openPanels) {
-        if (!parentPanelIds.includes(panel.id)) {
-            const ev = new Event('close');
-            panel.dispatchEvent(ev);
-        }
-    }
-}
-
-// Add panel functionality, including close event listeners
-export function initializeDropdown(button) {
-
-    // find panel
-    const panel_id = button.getAttribute('data-panel-id');
-    if (!panel_id) {
-        throw new Error(`data-panel-id attribute is not defined for given dropdown button`);
-    }
-    const panel = document.getElementById(panel_id);
-    if (!panel) {
-        throw new Error(`panel element not found by ID: «${panel_id}»`);
-    }
-
-    // Add close button functionality
-    const selector = window.StimulusDropdown.closeButtonSelector;
-    const closeButtons = panel.querySelectorAll(selector);
-    for (const btn of closeButtons) {
-        btn.addEventListener('click', () => {
-            const ev = new Event('close');
-            panel.dispatchEvent(ev);
-        });
-    }
-
-    // Add event listeners to panel
-    panel.addEventListener('place-me', () => positionPanelSelf(panel));
-    button.addEventListener('place-panel', () => positionPanelByButton(button))
-    panel.addEventListener('close', () => onPanelClose(button))
-
-    debugLog(`Initialized dropdown, panel-ID: «${panel_id}»`);
-}
-
-// xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
-// LOGGER
-// xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
-
-export function debugLog(message, object) {
-    if (window.StimulusDropdown.debug) {
-
-        if (object) {
-            console.log(`[stimulus-dropdown] ${message}`, object);
-
-        } else {
-            console.log(`[stimulus-dropdown] ${message}`);
-        }
-
-    }
-}
-
-// xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
-// ADDITIONAL FUNCTIONS
-// utils that are not used for the primary functions of this package itself, but helpful for building associated functions
-// xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
-
-
-// find or add the data-panel-id attribute of a button and return it
-export function getOrSetPanelId(buttonTag) {
-    let id = buttonTag.getAttribute('data-panel-id')
-    if (id) {
-        return (id)
-    } else {
-        id = `dropdown-panel-${generateRandomHex(8)}`
-        buttonTag.setAttribute('data-panel-id', id)
-        return id
-    }
-}
-
-
-function generateRandomHex(n) {
-    if (n <= 0) return '';
-    return Array.from({length: n}, () =>
-        Math.floor(Math.random() * 16).toString(16)
-    ).join('');
-}
-
-function findPanel(button) {
-    const panel = document.getElementById(button.getAttribute('data-panel-id'))
-    if (!panel) {
-        throw new Error(`dropdown button not found by attribute data-panel-id: «${button.getAttribute('data-panel-id')}»`)
-    }
-    return(panel)
-}