@splendidlabz/utils 1.4.0 → 1.5.0-alpha.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @splendidlabz/utils
 
+## 1.5.0-alpha.0
+
+### Minor Changes
+
+- Just bumping
+
 ## 1.4.0
 
 ### Minor Changes

package/actions/intersection-observer.js

@@ -0,0 +1,37 @@
+// See https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#options for options
+const options = {}
+
+export function intersectionObserver(node, options) {
+  const { callback, opts } = options
+  const observer = new IntersectionObserver(observerFn, opts)
+
+  function observerFn(entries, observer) {
+    entries.forEach(entry => {
+      for (const entry of entries) {
+        // Needs testing to see what's in entry
+        if (callback) callback({ node, entry, observer })
+        else {
+          node.dispatchEvent(
+            new CustomEvent('intersect', {
+              detail: { node, entry, observer },
+            }),
+          )
+        }
+      }
+    })
+  }
+
+  observer.observe(node)
+
+  return {
+    observer,
+    disconnect() {
+      observer.disconnect()
+    },
+
+    // Destroy is used for Svelte actions
+    destroy() {
+      observer.disconnect()
+    },
+  }
+}

package/actions/masonry.js

@@ -1,28 +1,32 @@
-import { getChildrenElements, mediaLoaded } from '../dom/index.js'
-import { resizeObserver } from './resize-observer.js'
+import { getChildrenElements, mediaLoaded } from '../dom'
+
+import { resizeObserver } from './resize-observer'
 
 export async function masonry(node) {
   if (nativeMasonrySupport(node)) return
 
-  let items
-  let gap
+  const colGap = parseFloat(getComputedStyle(node).columnGap)
+  const items = getChildrenElements(node)
 
   node.style.setProperty('row-gap', '1px', 'important')
   node.style.gridAutoRows = '0px'
-  await mediaLoaded(node)
+
+  try {
+    await mediaLoaded(node)
+  } catch (e) {}
+
+  layout({ colGap, items })
 
   const obs = resizeObserver(node, {
     async callback(opts) {
-      items = getChildrenElements(node)
-      gap = parseFloat(getComputedStyle(node).columnGap)
-      layout(node)
+      layout({ colGap, items })
     },
   })
 
-  async function layout() {
+  async function layout({ colGap, items }) {
     items.forEach(item => {
-      const itemBox = item.getBoundingClientRect()
-      item.style.gridRowEnd = `span ${Math.round(itemBox.height + gap)}`
+      const ib = item.getBoundingClientRect()
+      item.style.gridRowEnd = `span ${Math.round(ib.height + colGap)}`
     })
   }
 
@@ -33,6 +37,39 @@ export async function masonry(node) {
   }
 }
 
+// export async function masonry(node) {
+//   if (typeof window === 'undefined') return
+//   if (nativeMasonrySupport(node)) return
+
+//   let items
+//   let gap
+
+//   node.style.setProperty('row-gap', '1px', 'important')
+//   node.style.gridAutoRows = '0px'
+//   // await mediaLoaded(node)
+
+//   const obs = resizeObserver(node, {
+//     async callback(opts) {
+//       items = getChildrenElements(node)
+//       gap = parseFloat(getComputedStyle(node).columnGap)
+//       layout(node)
+//     },
+//   })
+
+//   async function layout() {
+//     items.forEach(item => {
+//       const itemBox = item.getBoundingClientRect()
+//       // item.style.gridRowEnd = `span ${Math.round(itemBox.height + gap)}`
+//     })
+//   }
+
+//   return {
+//     destroy() {
+//       obs.disconnect()
+//     },
+//   }
+// }
+
 function nativeMasonrySupport(node) {
   return getComputedStyle(node).gridTemplateRows === 'masonry'
 }

package/actions/mutation-observer.js

@@ -1,5 +1,4 @@
 /* eslint-env browser */
-
 // https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe
 
 // These are simply options that will often be used. Check the docs for other options.

package/actions/prefer-horizontal-scroll.js

@@ -4,6 +4,7 @@ import {
   removeListeners,
   setCSSVar,
 } from '../dom/index.js'
+
 import { omitEmpty } from '../lib/index.js'
 
 const DEFAULT_OPTIONS = {
@@ -11,7 +12,7 @@ const DEFAULT_OPTIONS = {
 }
 
 export function preferHorizontalScroll(node, props = {}) {
-  if (!node.classList.contains('Scrollable-preferHorizontalScroll')) return
+  if (!node.classList.contains('scrollable-prefer-horizontal-scroll')) return
 
   const state = {
     origSnapType: null,

package/actions/resize-observer.js

@@ -1,23 +1,18 @@
 /* eslint-env browser */
-
-const DEFAULT_OBSERVER_OPTIONS = {
-  observe: true,
-}
-
 export function resizeObserver(node, options) {
   // We set the option here to prevent observer from being created unless necessary.
-  options = { ...DEFAULT_OBSERVER_OPTIONS, ...options }
+  options = { observe: true, ...options }
   if (!options.observe) return
 
   const observer = new ResizeObserver(observerFn)
 
   function observerFn(entries) {
     for (const entry of entries) {
-      if (options.callback) options.callback({ node, entry, observer })
+      if (options.callback) options.callback({ node, entry, entries, observer })
       else {
         node.dispatchEvent(
-          new CustomEvent('resize', {
-            detail: { node, entry, observer },
+          new CustomEvent('resize-obs', {
+            detail: { node, entry, entries, observer },
           }),
         )
       }

package/dom/accessibility.js

@@ -0,0 +1,25 @@
+export function stopBodyScroll() {
+  const top = document.documentElement.scrollTop
+
+  element.style.top = -1 * top + 'px'
+  element.style.overflow = 'hidden'
+}
+
+export function allowBodyScroll() {
+  const top = parseFloat(document.body.style.top) * -1
+  document.body.style.top = null
+  document.body.style.overflow = null
+  document.documentElement.scrollTop = top
+}
+
+export function inertOthers() {}
+
+export function hasLabel(label, labelledBy) {
+  if (label || labelledBy) return true
+}
+
+export function isInvalidAriaPopup(value) {
+  const allowedPopoupValues = ['dialog', 'menu', 'listbox', 'grid', 'tree']
+  if (!allowedPopoupValues.includes(value)) return true
+  return false
+}

package/dom/index.js

@@ -1,3 +1,4 @@
+export * from './accessibility.js'
 export * from './bounding-box.js'
 export * from './clipboard.js'
 export * from './cookie.js'

package/dom/media.js

@@ -4,7 +4,9 @@ export async function imagesLoaded(node) {
     return new Promise((resolve, reject) => {
       if (img.complete) return resolve()
       img.onload = resolve
-      img.onerror = reject
+      img.onerror = e => {
+        reject('Image failed to load')
+      }
     })
   })
   return Promise.all(promises)

package/lib/strings/markdown.js

@@ -8,6 +8,7 @@ export function treatMarkdownWhitespace(
   content,
   { inline, isSlot = false } = {},
 ) {
+  if (!content) return { content: '', inline }
   const lines = content.split('\n')
 
   // Check for inline content

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splendidlabz/utils",
-  "version": "1.4.0",
+  "version": "1.5.0-alpha.0",
   "description": "",
   "type": "module",
   "sideEffects": false,
@@ -21,15 +21,15 @@
   },
   "author": "Zell Liew <zellwk@gmail.com>",
   "dependencies": {
-    "dompurify": "^3.1.6",
-    "glob-promise": "^6.0.5",
+    "dompurify": "^3.2.4",
+    "glob-promise": "^6.0.7",
     "pluralize": "^8.0.0",
     "statuses": "^2.0.1"
   },
   "devDependencies": {
     "@splendidlabz/eslint-config": "*",
-    "jsdom": "^24.0.0",
-    "np": "^8.0.4",
-    "vitest": "^1.4.0"
+    "jsdom": "^26.0.0",
+    "np": "^10.2.0",
+    "vitest": "^3.0.7"
   }
 }