@splendidlabz/styles 4.4.0 → 4.4.1

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@splendidlabz/styles",
-  "version": "4.4.0",
+  "version": "4.4.1",
   "description": "",
   "type": "module",
   "author": "Zell Liew <zellwk@gmail.com>",
   "files": [
     "src",
-    "dist"
+    "dist",
+    "scripts"
   ],
   "exports": {
     ".": "./src/styles.css",

package/scripts/all.js

@@ -0,0 +1,14 @@
+import { masonry, scrollableHorizontal, sticky } from './index.js'
+
+const defaultOptions = {
+  masonry: true,
+  sticky: true,
+  scrollable: true,
+}
+
+export function all(options = {}) {
+  options = { ...defaultOptions, ...options }
+  if (options.masonry) masonry(options.element)
+  if (options.sticky) sticky(options.element)
+  if (options.scrollable) scrollableHorizontal(options.element)
+}

package/scripts/index.js

@@ -0,0 +1,3 @@
+export * from './masonry.js'
+export * from './scrollable.js'
+export * from './sticky.js'

package/scripts/masonry.js

@@ -0,0 +1,7 @@
+import { getElement, masonry as Masonry } from '@splendidlabz/utils/dom'
+
+export function masonry(selector) {
+  const container = getElement(selector) || document
+  const elements = Array.from(container.querySelectorAll("[class*='masonry']"))
+  elements.forEach(Masonry)
+}

package/scripts/scrollable.js

@@ -0,0 +1,14 @@
+import { getElement, preferHorizontalScroll } from '@splendidlabz/utils/dom'
+
+export function scrollableHorizontal(selector) {
+  const container = getElement(selector) || document
+
+  const elements = Array.from(
+    container.querySelectorAll('.scrollable-prefer-horizontal'),
+  )
+
+  if (container.classList?.contains('scrollable-prefer-horizontal'))
+    elements.push(container)
+
+  elements.forEach(preferHorizontalScroll)
+}

package/scripts/sticky.js

@@ -0,0 +1,35 @@
+import {
+  getElement,
+  mutationObserver,
+  sticky as Sticky,
+} from '@splendidlabz/utils/dom'
+
+/**
+ * Initializes sticky behavior for elements within a container.
+ * @param {string|HTMLElement} selector - The selector or element to initialize sticky behavior within.
+ * @param {Object} [options] - Optional settings.
+ * @param {number} [options.observeTimeout=0] - The timeout in milliseconds to observe DOM mutations.
+ */
+export function sticky(selector, { observerTimeout = 1000 } = {}) {
+  const container = getElement(selector) || document.body
+  const elements = Array.from(container.querySelectorAll('.sticky-check'))
+  if (container.classList.contains('sticky-check')) elements.push(container)
+
+  elements.forEach(Sticky)
+
+  if (observerTimeout) {
+    const obs = mutationObserver(container, {
+      childList: true,
+      subtree: true,
+      callback: function ({ entry, observer }) {
+        // Nodes seem to be added one by one, so getting the first one is enough
+        const node = entry.addedNodes[0]
+        const klass = node?.className
+        if (!klass || typeof klass !== 'string') return
+        if (!klass.includes('sticky-check')) return
+        Sticky(node)
+      },
+    })
+    if (observerTimeout) setTimeout(_ => obs.disconnect(), observerTimeout)
+  }
+}