@csedl/hotwire-svelte-helpers 1.1.0 → 2.1.0

package/README.md

@@ -9,7 +9,7 @@ Dropdown with stimulus, based on floating-UI.
 - [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
+## Setup
 
 ```javascript
 import {HotwireSvelteHelpers} from "@csedl/hotwire-svelte-helpers/init"
@@ -17,11 +17,10 @@ HotwireSvelteHelpers.debug = true
 HotwireSvelteHelpers.initializeOverlays()
 ```
 
-Options are:
+You MUST add the file `<vite-sourcee-code-dir>/config/hotwire-svelte-helpers.js`, with content like:
 
 ```javascript
-HotwireSvelteHelpers.initializeOverlays({
-    debug: false,
+export default {
     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
@@ -29,12 +28,22 @@ HotwireSvelteHelpers.initializeOverlays({
     // same as dropdownContentSelector
     addArrow: true,
     // add element with id #arrow within the panel, on opening
-    persistTooltipOnClick: false
+    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
+    closeButtonSvg: '',
 })
 ```
 
+But, at least with content: 
+
+```javascript
+export default {
+}
+```
+
+The reason for this is that we need to have ssr safe configs.
+
 ## Example
 
 There is a [online example app](https://hotwire-svelte-helpers.sedlmair.ch/)
@@ -48,6 +57,11 @@ There is a [online example app](https://hotwire-svelte-helpers.sedlmair.ch/)
 </div>
 ```
 
+## Svelte Dropdowns
+
+There are some default components included, which can be used to build Svelte Dropdowns.
+The
+
 ## What it does
 
 - When the button is clicked, it toggles the `hide` class on the panel and places the panel using floating-ui.

package/index.js

@@ -1,8 +1,8 @@
 
-import { cleanMount, unmountAllDetached } from './src/svelte/cleanMount';
-import {initializeDropdown, openDropdownPanel, getOrSetPanelId, debugLog} from './src/lib/utils.js'
+import { cleanMount, unmountAllDetached } from './src/svelte/cleanMount.js';
+import { initializeDropdown, openDropdownPanel, getOrSetPanelId, debugLog, hotwireSvelteConfig } from './src/lib/utils.js'
 
 export {
-    cleanMount, unmountAllDetached,
+    cleanMount, unmountAllDetached, hotwireSvelteConfig,
     initializeDropdown, openDropdownPanel, getOrSetPanelId, debugLog
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@csedl/hotwire-svelte-helpers",
-  "version": "1.1.0",
+  "version": "2.1.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": {
@@ -8,7 +8,15 @@
   },
   "exports": {
     ".": "./index.js",
-    "./init": "./src/lib/config.js"
+    "./init": "./src/lib/initializers.js",
+    "./DropdownPanel.svelte": {
+      "svelte": "./src/svelte/templates/DropdownPanel.svelte",
+      "default": "./src/svelte/templates/DropdownPanel.svelte"
+    },
+    "./Modal.svelte": {
+      "svelte": "./src/svelte/templates/Modal.svelte",
+      "default": "./src/svelte/templates/Modal.svelte"
+    }
   },
   "repository": {
     "type": "git",

package/src/lib/initializers.js

@@ -0,0 +1,45 @@
+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'
+
+
+// DEFAULTS
+let _debug = 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')
+    },
+
+    initializeOverlays() {
+
+        const 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')
+
+    }
+
+};
+
+window.HotwireSvelteHelpers = HotwireSvelteHelpers;
+
+export {HotwireSvelteHelpers};

package/src/lib/utils.js

@@ -1,10 +1,13 @@
 import {positionPanelSelf, positionPanelByButton, positionPanel} from "./floating-ui-functions.js";
+import customConfigs from '@frontend/config/hotwire-svelte-helpers.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}
+    if (buttonElement.classList.contains('has-open-panel')) {
+        return
+    }
 
     //validateOptions(options, {clickedElement: 'object'})
     //const clickedElement = options.clickedElement || buttonElement;
@@ -17,7 +20,7 @@ export function openDropdownPanel(buttonElement, panelElement, options = {}) {
     panelElement.style.display = 'block';
 
     // add arrow
-    if (window.HotwireSvelteHelpers.overlays.addArrow) {
+    if (hotwireSvelteConfig('addArrow')) {
         if (!panelElement.querySelector(':scope > #arrow')) {
             const arrowTag = document.createElement('div');
             arrowTag.id = 'arrow';
@@ -58,8 +61,7 @@ export function openDropdownPanel(buttonElement, panelElement, options = {}) {
             } 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;
+                const contentSelector = hotwireSvelteConfig('dropdownContentSelector');
 
                 if (ctrl === 'csedl-dropdown' && contentSelector) {
                     debugLog(`dropdown / contentSelector: «${contentSelector}»`);
@@ -67,7 +69,7 @@ export function openDropdownPanel(buttonElement, panelElement, options = {}) {
                     wrapper.innerHTML = xhr.response;
                 } else if (ctrl === 'csedl-tooltip' && contentSelector) {
                     debugLog(`tooltip / contentSelector: «${contentSelector}»`);
-                    const wrapper = panelElement.querySelector(config.tooltipContentSelector);
+                    const wrapper = panelElement.querySelector(hotwireSvelteConfig('tooltipContentSelector'));
                     wrapper.innerHTML = xhr.response;
                 } else {
                     debugLog(`? / contentSelector: «${contentSelector}»`);
@@ -99,8 +101,8 @@ export function closePanel(button) {
     // 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;
+    if (window.HotwireSvelteHelpers_closeOnClickOutsideListenerAdded && openPanels.length === 0) {
+        window.HotwireSvelteHelpers_closeOnClickOutsideListenerAdded = false;
         window.removeEventListener('click', closeOnOutsideClick);
         debugLog('Listener for close panels on click outside removed');
     }
@@ -183,7 +185,8 @@ export function initializeDropdown(button) {
         panel.setAttribute('data-hsh-initialized', 'true');
 
         // Add close button functionality
-        const selector = window.HotwireSvelteHelpers.overlays.closeButtonSelector;
+
+        const selector = hotwireSvelteConfig('closeButtonSelector');
         const closeButtons = panel.querySelectorAll(selector);
         for (const btn of closeButtons) {
             btn.addEventListener('click', () => {
@@ -207,9 +210,8 @@ export function initializeDropdown(button) {
     }
 
     // Add listener for closing on outside click
-    let overlays = window.HotwireSvelteHelpers.overlays
-    if (!overlays.closeOnClickOutsideListenerAdded) {
-        overlays.closeOnClickOutsideListenerAdded = true;
+    if (!window.HotwireSvelteHelpers_closeOnClickOutsideListenerAdded) {
+        window.HotwireSvelteHelpers_closeOnClickOutsideListenerAdded = true;
         setTimeout(() => {
             window.addEventListener('click', closeOnOutsideClick)
         }, 100)
@@ -265,6 +267,29 @@ export function getOrSetPanelId(buttonTag) {
     }
 }
 
+export function hotwireSvelteConfig(key) {
+
+    const defaultConfig = {
+        closeButtonSelector: '.close-button',
+        dropdownContentSelector: '.content',
+        tooltipContentSelector: '.content',
+        addArrow: true,
+        persistTooltipOnClick: false,
+        closeButtonSvg: '',
+    }
+
+    const validations = {
+        closeButtonSelector: 'string',
+        dropdownContentSelector: 'string',
+        tooltipContentSelector: 'string',
+        addArrow: 'boolean',
+        persistTooltipOnClick: 'boolean',
+        closeButtonSvg: 'string',
+    }
+    validateOptions(customConfigs, validations)
+
+    return customConfigs[key] || defaultConfig[key] || null
+}
 
 function generateRandomHex(n) {
     if (n <= 0) return '';

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, findPanelOrThrow, openDropdownPanel} from "../lib/utils.js";
+import {hotwireSvelteConfig, 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.HotwireSvelteHelpers.persistTooltipOnClick) {
+        if (hotwireSvelteConfig('persistTooltipOnClick')) {
             this.element.addEventListener('click', (e) => this.toggleByClick(e, panel_id))
         }
     }

package/src/svelte/templates/DropdownPanel.svelte

@@ -0,0 +1,43 @@
+<script>
+    import {openDropdownPanel} from "@csedl/hotwire-svelte-helpers";
+
+    import {onMount} from "svelte";
+
+    let {
+        title,
+        panelClass,
+        closeFunction,
+        closeButtonSvg,
+        buttonElement,
+        content,
+    } = $props()
+    let panelElement
+
+    onMount(() => {
+        openDropdownPanel(buttonElement, panelElement);
+    });
+
+    function closeFunc() {
+        setTimeout(() => {
+            closeFunction()
+        }, 0)
+    }
+
+</script>
+
+<div class="dropdown-panel {panelClass}" bind:this={panelElement} onclose={closeFunc}>
+
+
+    <div class="header">
+            <span class="title">
+                {title || 'missing title'}
+            </span>
+        <button class="close-btn"
+                onclick={closeFunction}>{@html window.HotwireSvelteHelpers.overlays.closeButtonSvg}</button>
+    </div>
+
+    <div class="content">
+        {@render content()}
+    </div>
+
+</div>

package/src/svelte/templates/Modal.svelte

@@ -0,0 +1,72 @@
+<script>
+    import {openDropdownPanel} from "@csedl/hotwire-svelte-helpers";
+    import {onMount} from "svelte";
+
+    let {
+        title,
+        panelClass,
+        SvelteComponent,
+        svelteComponentProps,
+        closeFunction,
+        closeButtonSvg,
+        content,
+        text,
+        actionButtonLabel,
+        actionButtonFunction,
+    } = $props()
+    let panelElement
+
+    onMount(() => {
+        //openDropdownPanel(buttonElement, panelElement);
+    });
+
+    function closeFunc() {
+        setTimeout(() => {
+            closeFunction()
+        }, 0)
+    }
+
+</script>
+
+<div class="modal-overlay">
+    <div class="modal-panel {panelClass}" bind:this={panelElement} onclose={closeFunc}>
+
+
+        <div class="header">
+            <span class="title">
+                {title || 'missing title'}
+            </span>
+            <button class="close-btn"
+                    onclick={closeFunction}>{@html window.HotwireSvelteHelpers.overlays.closeButtonSvg}</button>
+        </div>
+
+        <div class="content">
+
+            {#if content}
+                {@render content()}
+            {/if}
+
+            {#if SvelteComponent}
+                <SvelteComponent {...svelteComponentProps}/>
+            {/if}
+
+            {#if text}
+                {#each text as paragraph}
+                    <p>{paragraph}</p>
+                {/each}
+            {/if}
+        </div>
+        <div class="footer">
+            {#if actionButtonLabel}
+                <span
+                        role="button"
+                        tabindex="0"
+                        onkeydown={(e) => {}}
+                        class="action button"
+                        onclick={actionButtonFunction}>
+                    {actionButtonLabel}
+                </span>
+            {/if}
+        </div>
+    </div>
+</div>

package/src/lib/config.js

@@ -1,85 +0,0 @@
-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 {HotwireSvelteHelpers};