@csedl/hotwire-svelte-helpers 0.1.1 → 1.0.0

package/index.js

@@ -1,12 +1,12 @@
 
 import HotwireSvelteHelpers from "./src/lib/config.js";
 import { cleanMount, unmountAllDetached } from './src/svelte/cleanMount';
-import {initializeDropdown, onPanelOpen, getOrSetPanelId, debugLog} from './src/lib/utils.js'
+import {initializeDropdown, openDropdownPanel, getOrSetPanelId, debugLog} from './src/lib/utils.js'
 
 
 
 export {
     HotwireSvelteHelpers,
     cleanMount, unmountAllDetached,
-    initializeDropdown, onPanelOpen, getOrSetPanelId, debugLog
+    initializeDropdown, openDropdownPanel, getOrSetPanelId, debugLog
 }

package/package.json

@@ -1,25 +1,23 @@
 {
   "name": "@csedl/hotwire-svelte-helpers",
-  "version": "0.1.1",
-  "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",
-      "./src/utils.js"
-    ]
+    ".": "./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",

package/src/lib/config.js

@@ -3,6 +3,7 @@ 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;
@@ -34,6 +35,16 @@ const HotwireSvelteHelpers = {
     },
 
     initializeOverlays(options = {}) {
+
+        validateOptions(options, {
+            closeButtonSelector: 'string',
+            dropdownContentSelector: 'string',
+            tooltipContentSelector: 'string',
+            addArrow: 'boolean',
+            persistTooltipOnClick: 'boolean',
+            closeOnClickOutsideListenerAdded: 'boolean',
+        })
+
         const overlays = this.overlays;
 
         if (options.closeButtonSelector !== undefined) {

package/src/lib/floating-ui-functions.js

@@ -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

@@ -1,52 +1,52 @@
-import {positionPanelSelf, positionPanelByButton} from "./floating-ui-functions.js";
+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 onPanelOpen(event, button) {
+export function openDropdownPanel(buttonElement, panelElement, options = {}) {
 
-    const panel = findPanel(button);
+    if (buttonElement.classList.contains('has-open-panel')) {return}
 
-    debugLog('ON-PANEL-OPEN FUNCTIONS')
+    //validateOptions(options, {clickedElement: 'object'})
+    //const clickedElement = options.clickedElement || buttonElement;
 
-    closeOnOutsideClick(event)
+
+    // 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 (!panel.querySelector(':scope > #arrow')) {
+        if (!panelElement.querySelector(':scope > #arrow')) {
             const arrowTag = document.createElement('div');
             arrowTag.id = 'arrow';
-            panel.appendChild(arrowTag)
+            panelElement.appendChild(arrowTag)
         }
     }
 
-    positionPanelByButton(button);
+    positionPanel(buttonElement, panelElement);
 
     // Set focus to input element
-    if (panel.hasAttribute('data-set-focus')) {
-        let dataFocus = panel.getAttribute('data-set-focus');
-        let focusElement = panel.querySelector(dataFocus);
+    if (panelElement.hasAttribute('data-set-focus')) {
+        let dataFocus = panelElement.getAttribute('data-set-focus');
+        let focusElement = panelElement.querySelector(dataFocus);
         focusElement.focus();
     }
 
     // Set status attribute
-    panel.setAttribute('data-stimulus-overlay-panel-status', 'open');
-    button.classList.add('has-open-panel');
+    panelElement.setAttribute('data-hsh-panel-status', 'open');
+    buttonElement.classList.add('has-open-panel');
 
     // Dispatch events
     const panelOpenEvent = new CustomEvent('before-open');
-    panel.dispatchEvent(panelOpenEvent);
+    panelElement.dispatchEvent(panelOpenEvent);
 
     const buttonOpenEvent = new CustomEvent('before-open-panel');
-    button.dispatchEvent(buttonOpenEvent);
-
-    // Add listener for closing on outside click
-    if (!window.HotwireSvelteHelpers.overlays.closeOnClickOutsideListenerAdded) {
-        window.HotwireSvelteHelpers.overlays.closeOnClickOutsideListenerAdded = true;
-        window.addEventListener('click', closeOnOutsideClick);
-        debugLog('Listener for close panels on click outside added');
-    }
+    buttonElement.dispatchEvent(buttonOpenEvent);
 
     // fetch content from server
-    const src = panel.getAttribute('data-src');
+    const src = panelElement.getAttribute('data-src');
     if (src) {
         let xhr = new XMLHttpRequest();
         debugLog(`Panel / data-src: «${src}»`);
@@ -56,46 +56,48 @@ export function onPanelOpen(event, button) {
             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 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 = panel.querySelector(contentSelector);
+                    const wrapper = panelElement.querySelector(contentSelector);
                     wrapper.innerHTML = xhr.response;
                 } else if (ctrl === 'csedl-tooltip' && contentSelector) {
                     debugLog(`tooltip / contentSelector: «${contentSelector}»`);
-                    const wrapper = panel.querySelector(config.tooltipContentSelector);
+                    const wrapper = panelElement.querySelector(config.tooltipContentSelector);
                     wrapper.innerHTML = xhr.response;
                 } else {
                     debugLog(`? / contentSelector: «${contentSelector}»`);
-                    panel.innerHTML = xhr.response;
+                    panelElement.innerHTML = xhr.response;
                     console.error('fallback to replace whole panel');
                 }
 
-                positionPanelByButton(button, `after http-request "${ctrl}"`);
+                positionPanelByButton(buttonElement, `after http-request "${ctrl}"`);
             }
         };
     } else {
         debugLog('no data-src attribute provided on panel');
     }
+
 }
 
 // Handle panel closing
-export function onPanelClose(button) {
+export function closePanel(button) {
 
-    const panel = findPanel(button);
+    const panel = findPanelOrThrow(button);
 
-    debugLog('ON-PANEL-CLOSE FUNCTIONS')
+    debugLog(`closing panel ${panel.id.split('-').pop()}`)
 
     // Update status attributes
     button.classList.remove('has-open-panel');
-    panel.setAttribute('data-stimulus-overlay-panel-status', 'closed');
+    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-stimulus-overlay-panel-status='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;
@@ -109,12 +111,27 @@ export function onPanelClose(button) {
 }
 
 // Close panels when clicking outside
-export function closeOnOutsideClick(ev) {
+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 btn = ev.target;
     let parentPanelIds = [];
 
-    const persistElement = ev.target.closest('[data-overlay-persist]');
+    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"');
@@ -122,10 +139,10 @@ export function closeOnOutsideClick(ev) {
         }
     }
 
-    debugLog('closeOnOutsideClick called, event.target:', ev.target);
+    debugLog('closeOnOutsideClick called, clicked on:', btn);
 
     while (true) {
-        const parentPanel = btn.closest("[data-stimulus-overlay-panel-status='open']");
+        const parentPanel = btn.closest("[data-hsh-panel-status='open']");
         if (parentPanel) {
             parentPanelIds.push(parentPanel.id);
             btn = document.querySelector(`[data-panel-id="${parentPanel.id}"]`);
@@ -134,11 +151,14 @@ export function closeOnOutsideClick(ev) {
         }
     }
 
-    const openPanels = document.querySelectorAll("[data-stimulus-overlay-panel-status='open']");
+    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);
         }
     }
 }
@@ -156,22 +176,58 @@ export function initializeDropdown(button) {
         throw new Error(`panel element not found by ID: «${panel_id}»`);
     }
 
-    // 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);
-        });
+    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())
     }
 
-    // Add event listeners to panel
-    panel.addEventListener('place-me', () => positionPanelSelf(panel));
-    button.addEventListener('place-panel', () => positionPanelByButton(button))
-    panel.addEventListener('close', () => onPanelClose(button))
+    // initialize the button
+    if (!button.hasAttribute('data-hsh-initialized')) {
+        button.setAttribute('data-hsh-initialized', 'true');
+        button.addEventListener('place-panel', () => positionPanelByButton(button))
+        msg.push('button')
+    }
 
-    debugLog(`Initialized dropdown, panel-ID: «${panel_id}»`);
+    // 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
@@ -217,10 +273,5 @@ function generateRandomHex(n) {
     ).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)
-}
+
+

package/src/stimulus/dropdown-controller.js

@@ -1,17 +1,13 @@
-import {Controller} from "@hotwired/stimulus"
-import {initializeDropdown, onPanelOpen} from "../lib/utils.js";
-import {debugLog} from "../lib/utils.js";
+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() {
 
-        initializeDropdown(this.element)
-
         this.element.addEventListener('click', (e) => this.toggle(e))
 
-        debugLog('dropdown connected')
-
     }
 
 
@@ -21,38 +17,15 @@ export default class extends Controller {
         }
         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)
+
+        const panel = findPanelOrThrow(this.element)
+        if (panel.style.display === 'block') {
+            closePanel(this.element)
         } else {
-            this.open(e, panel)
+            openDropdownPanel(this.element, 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/stimulus/tooltip-controller.js

@@ -1,6 +1,6 @@
 import {Controller} from "@hotwired/stimulus"
 import {positionPanelByButton} from "../lib/floating-ui-functions.js";
-import {debugLog, onPanelOpen} from "../lib/utils.js";
+import {debugLog, findPanelOrThrow, openDropdownPanel} from "../lib/utils.js";
 
 export default class extends Controller {
 
@@ -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';