@csedl/hotwire-svelte-helpers 4.2.0 → 4.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -0
- package/package.json +1 -1
- package/src/lib/utils.js +5 -0
package/README.md
CHANGED
|
@@ -59,6 +59,8 @@ If `#overlays-box` does not exist, it is created automatically.
|
|
|
59
59
|
This keeps overlays at the root level to avoid most z-index and clipping issues,
|
|
60
60
|
while keeping the DOM cleaner than mounting panels directly into `body`.
|
|
61
61
|
|
|
62
|
+
This aligns to the behaviour of the [stimulus side](https://gitlab.com/sedl/stimulus-overlay-helpers)
|
|
63
|
+
|
|
62
64
|
## Svelte Dropdowns
|
|
63
65
|
|
|
64
66
|
There are some default components included, which can be used to build Svelte Dropdowns.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@csedl/hotwire-svelte-helpers",
|
|
3
|
-
"version": "4.2.
|
|
3
|
+
"version": "4.2.1",
|
|
4
4
|
"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.",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"scripts": {
|
package/src/lib/utils.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import {positionPanelSelf, positionPanelByButton, positionPanel} from "./floating-ui-functions.js";
|
|
2
2
|
|
|
3
3
|
// Fetch content from server based on panel's data-src attribute and update content
|
|
4
|
+
|
|
4
5
|
export function openDropdownPanel(buttonElement, panelElement, options = {}) {
|
|
5
6
|
|
|
6
7
|
if (buttonElement.classList.contains('has-open-panel')) {
|
|
@@ -69,6 +70,7 @@ export function openDropdownPanel(buttonElement, panelElement, options = {}) {
|
|
|
69
70
|
}
|
|
70
71
|
|
|
71
72
|
// Handle panel closing
|
|
73
|
+
|
|
72
74
|
export function closePanel(button) {
|
|
73
75
|
|
|
74
76
|
const panel = findPanelOrThrow(button);
|
|
@@ -95,6 +97,7 @@ export function closePanel(button) {
|
|
|
95
97
|
}
|
|
96
98
|
|
|
97
99
|
// Close panels when clicking outside
|
|
100
|
+
|
|
98
101
|
export function closeOnOutsideClick(clickedElement) {
|
|
99
102
|
|
|
100
103
|
// set button
|
|
@@ -148,6 +151,7 @@ export function closeOnOutsideClick(clickedElement) {
|
|
|
148
151
|
}
|
|
149
152
|
|
|
150
153
|
// Add panel functionality, including close event listeners
|
|
154
|
+
|
|
151
155
|
export function initializeDropdown(button) {
|
|
152
156
|
|
|
153
157
|
// find panel
|
|
@@ -227,6 +231,7 @@ export function debugLog(message, object) {
|
|
|
227
231
|
}
|
|
228
232
|
|
|
229
233
|
// find or add the data-panel-id attribute of a button and return it
|
|
234
|
+
|
|
230
235
|
export function getOrSetPanelId(buttonTag) {
|
|
231
236
|
let id = buttonTag.getAttribute('data-panel-id')
|
|
232
237
|
if (id) {
|