@csedl/hotwire-svelte-helpers 4.2.0 → 4.3.0

package/README.md

@@ -45,7 +45,7 @@ to your application.js. This will check for detached instances and unmount them.
 ## Dropdown Example
 
 ```html
-<div data-controller="csedl-dropdown" data-panel-id="dropdown-panel-3h5k7l4">
+<div data-controller="hotwire-svelte-helpers-dropdown" data-panel-id="dropdown-panel-3h5k7l4">
     Button
 </div>
 <div id="dropdown-panel-3h5k7l4" class="dropdownSvelte-panel-example-class" style="display: none;">
@@ -59,6 +59,8 @@ If `#overlays-box` does not exist, it is created automatically.
 This keeps overlays at the root level to avoid most z-index and clipping issues, 
 while keeping the DOM cleaner than mounting panels directly into `body`.
 
+This aligns to the behaviour of the [stimulus side](https://gitlab.com/sedl/stimulus-overlay-helpers)
+
 ## Svelte Dropdowns
 
 There are some default components included, which can be used to build Svelte Dropdowns.
@@ -147,7 +149,7 @@ What these helpers mainly do is to find all the dropdowns by the `has-open-panel
 ## Tooltip
 
 ```html
-<span data-controller="csedl-tooltip" data-panel-id="tooltip-123" data-delay="0.2">
+<span data-controller="hotwire-svelte-helpers-tooltip" data-panel-id="tooltip-123" data-delay="0.2">
     Text-with-tooltip
 </span>
 <div id="tooltip-123" class="tooltip-panel" style="display: none;">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@csedl/hotwire-svelte-helpers",
-  "version": "4.2.0",
+  "version": "4.3.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": {

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

@@ -21,7 +21,7 @@ export function getAllOpenPanels(scopeElement) {
     const elements = []
 
     for (const button of buttons) {
-        if (button.getAttribute('data-controller') === 'csedl-dropdown') {
+        if (button.getAttribute('data-controller') === 'hotwire-svelte-helpers-dropdown') {
             const getOrSetPanelId = button.getAttribute('data-panel-id')
             const panel = document.getElementById(getOrSetPanelId)
             elements.push([button, panel])

package/src/lib/initializers.js

@@ -2,6 +2,7 @@ import {debugLog} from "./utils.js";
 import {Application} from "@hotwired/stimulus"
 import dc from '../stimulus/dropdown-controller'
 import ttc from '../stimulus/tooltip-controller'
+import mod from '../stimulus/modal-controller'
 import ppc from '../stimulus/move-panels-controller'
 
 
@@ -30,9 +31,10 @@ const HotwireSvelteHelpers = {
 
         const Stimulus = Application.start()
 
-        Stimulus.register('csedl-dropdown', dc)
-        Stimulus.register('csedl-tooltip', ttc)
-        Stimulus.register('csedl-move-panels', ppc)
+        Stimulus.register('hotwire-svelte-helpers-modal', mod)
+        Stimulus.register('hotwire-svelte-helpers-dropdown', dc)
+        Stimulus.register('hotwire-svelte-helpers-tooltip', ttc)
+        Stimulus.register('hotwire-svelte-helpers-move-panels', ppc)
 
         debugLog('Overlays active, driven by Stimulus')
 

package/src/lib/utils.js

@@ -1,6 +1,7 @@
 import {positionPanelSelf, positionPanelByButton, positionPanel} from "./floating-ui-functions.js";
 
 // 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')) {
@@ -10,11 +11,13 @@ export function openDropdownPanel(buttonElement, panelElement, options = {}) {
 
     // link button and panel, initialize
     panelElement.id = getOrSetPanelId(buttonElement);
-    initializeDropdown(buttonElement)
-    debugLog(`opening panel ${panelElement.id.split('-').pop()}`)
-    panelElement.style.display = 'block';
+    initializeDropdown(buttonElement, options)
+    debugLog(`opening panel ${panelElement.id.split('-').pop()}`, options)
+    panelElement.style.display = (options.isModal ? 'flex' : 'block');
 
-    positionPanel(buttonElement, panelElement);
+    if (!options.isModal) {
+        positionPanel(buttonElement, panelElement);
+    }
 
     // Set focus to input element
     if (panelElement.hasAttribute('data-set-focus')) {
@@ -48,10 +51,10 @@ export function openDropdownPanel(buttonElement, panelElement, options = {}) {
                 const buttonElement = document.querySelector(`[data-panel-id="${panelElement.id}"]`);
                 const ctrl = buttonElement.getAttribute('data-controller');
 
-                if (ctrl === 'csedl-dropdown' ) {
+                if (ctrl === 'hotwire-svelte-helpers-dropdown') {
                     const wrapper = panelElement.querySelector('.content');
                     wrapper.innerHTML = xhr.response;
-                } else if (ctrl === 'csedl-tooltip') {
+                } else if (ctrl === 'hotwire-svelte-helpers-tooltip') {
                     const wrapper = panelElement.querySelector('.content');
                     wrapper.innerHTML = xhr.response;
                 } else {
@@ -69,6 +72,7 @@ export function openDropdownPanel(buttonElement, panelElement, options = {}) {
 }
 
 // Handle panel closing
+
 export function closePanel(button) {
 
     const panel = findPanelOrThrow(button);
@@ -95,6 +99,7 @@ export function closePanel(button) {
 }
 
 // Close panels when clicking outside
+
 export function closeOnOutsideClick(clickedElement) {
 
     // set button
@@ -148,7 +153,8 @@ export function closeOnOutsideClick(clickedElement) {
 }
 
 // Add panel functionality, including close event listeners
-export function initializeDropdown(button) {
+
+export function initializeDropdown(button, options = {}) {
 
     // find panel
     const panel_id = button.getAttribute('data-panel-id');
@@ -183,6 +189,12 @@ export function initializeDropdown(button) {
         debugLog('initializeDropdown: panel already initialized:', panel.id.split('-').pop())
     }
 
+    // return if isModal
+
+    if (options.isModal) {
+        return
+    }
+
     // initialize the button
     if (!button.hasAttribute('data-hsh-initialized')) {
         button.setAttribute('data-hsh-initialized', 'true');
@@ -227,6 +239,7 @@ export function debugLog(message, object) {
 }
 
 // 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) {

package/src/stimulus/modal-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, {isModal: true})
+        }
+    }
+
+
+
+}
+
+
+