@txstate-mws/svelte-components 1.1.3 → 1.2.2

package/actions/elementqueries.d.ts

@@ -0,0 +1,21 @@
+import type { WritableSubject } from '@txstate-mws/svelte-store';
+declare class ElementQueries {
+    #private;
+    refresh(): void;
+    fullresync(): void;
+    activate(): void;
+    subscribe(el: HTMLElement, store?: WritableSubject<{
+        width: number;
+    }>): () => void;
+}
+export declare const elementqueries: ElementQueries;
+interface EqOpts {
+    store: WritableSubject<{
+        width: number;
+    }>;
+}
+export declare function eq(el: HTMLElement, opts?: EqOpts): {
+    update(opts?: EqOpts): void;
+    destroy(): void;
+};
+export {};

package/actions/elementqueries.js

@@ -0,0 +1,151 @@
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _ElementQueries_instances, _ElementQueries_watchlist, _ElementQueries_busy, _ElementQueries_hasInit, _ElementQueries_mutationobserver, _ElementQueries_boundRefresh, _ElementQueries_subscribers, _ElementQueries_stores, _ElementQueries_processwidths, _ElementQueries_finddepth, _ElementQueries_collecttargets, _ElementQueries_gotoanchor, _ElementQueries_activate, _ElementQueries_activateRaw, _ElementQueries_deactivate;
+class ElementQueries {
+    constructor() {
+        _ElementQueries_instances.add(this);
+        _ElementQueries_watchlist.set(this, []);
+        _ElementQueries_busy.set(this, false);
+        _ElementQueries_hasInit.set(this, false);
+        _ElementQueries_mutationobserver.set(this, void 0);
+        _ElementQueries_boundRefresh.set(this, this.refresh.bind(this));
+        _ElementQueries_subscribers.set(this, 0);
+        _ElementQueries_stores.set(this, new Map());
+    }
+    refresh() {
+        if (!__classPrivateFieldGet(this, _ElementQueries_busy, "f") && __classPrivateFieldGet(this, _ElementQueries_watchlist, "f").length > 0) {
+            __classPrivateFieldSet(this, _ElementQueries_busy, true, "f");
+            requestAnimationFrame(__classPrivateFieldGet(this, _ElementQueries_instances, "m", _ElementQueries_processwidths).bind(this));
+        }
+    }
+    fullresync() {
+        __classPrivateFieldGet(this, _ElementQueries_instances, "m", _ElementQueries_collecttargets).call(this);
+        this.refresh();
+    }
+    // if someone uses the library without svelte, they may just activate it once
+    // instead of faithfully subscribing and unsubscribing, so we'll add a subscriber that can't be
+    // decremented and it will stay activated forever
+    activate() {
+        var _a;
+        __classPrivateFieldSet(this, _ElementQueries_subscribers, (_a = __classPrivateFieldGet(this, _ElementQueries_subscribers, "f"), _a++, _a), "f");
+        __classPrivateFieldGet(this, _ElementQueries_instances, "m", _ElementQueries_activateRaw).call(this);
+    }
+    subscribe(el, store) {
+        var _a;
+        __classPrivateFieldSet(this, _ElementQueries_subscribers, (_a = __classPrivateFieldGet(this, _ElementQueries_subscribers, "f"), _a++, _a), "f");
+        if (store)
+            __classPrivateFieldGet(this, _ElementQueries_stores, "f").set(el, store);
+        else
+            __classPrivateFieldGet(this, _ElementQueries_stores, "f").delete(el);
+        __classPrivateFieldGet(this, _ElementQueries_instances, "m", _ElementQueries_activateRaw).call(this);
+        return () => {
+            var _a;
+            if (__classPrivateFieldSet(this, _ElementQueries_subscribers, (_a = __classPrivateFieldGet(this, _ElementQueries_subscribers, "f"), --_a), "f") === 0)
+                __classPrivateFieldGet(this, _ElementQueries_instances, "m", _ElementQueries_deactivate).call(this);
+        };
+    }
+}
+_ElementQueries_watchlist = new WeakMap(), _ElementQueries_busy = new WeakMap(), _ElementQueries_hasInit = new WeakMap(), _ElementQueries_mutationobserver = new WeakMap(), _ElementQueries_boundRefresh = new WeakMap(), _ElementQueries_subscribers = new WeakMap(), _ElementQueries_stores = new WeakMap(), _ElementQueries_instances = new WeakSet(), _ElementQueries_processwidths = function _ElementQueries_processwidths() {
+    for (let i = 0; i < __classPrivateFieldGet(this, _ElementQueries_watchlist, "f").length; i++) {
+        const widths = [];
+        const attrs = [];
+        for (let j = 0; j < __classPrivateFieldGet(this, _ElementQueries_watchlist, "f")[i].length; j++) {
+            widths.push(__classPrivateFieldGet(this, _ElementQueries_watchlist, "f")[i][j].offsetWidth);
+            attrs.push(__classPrivateFieldGet(this, _ElementQueries_watchlist, "f")[i][j].getAttribute('data-eq'));
+        }
+        for (let j = 0; j < __classPrivateFieldGet(this, _ElementQueries_watchlist, "f")[i].length; j++) {
+            const el = __classPrivateFieldGet(this, _ElementQueries_watchlist, "f")[i][j];
+            const w = widths[j];
+            let attrstr = '';
+            let finalw = 1600;
+            for (let k = 1600; k >= w && k > 700; k -= 100) {
+                attrstr += `${k}px `;
+                finalw = k;
+            }
+            for (let k = 700; k >= w; k -= 50) {
+                attrstr += `${k}px `;
+                finalw = k;
+            }
+            if (attrstr !== attrs[j])
+                el.setAttribute('data-eq', attrstr);
+            if (__classPrivateFieldGet(this, _ElementQueries_stores, "f").has(el)) {
+                __classPrivateFieldGet(this, _ElementQueries_stores, "f").get(el).update(v => v.width === finalw ? v : { ...v, width: finalw });
+            }
+        }
+    }
+    __classPrivateFieldSet(this, _ElementQueries_busy, false, "f");
+}, _ElementQueries_finddepth = function _ElementQueries_finddepth(target, currentdepth = 0) {
+    const closest = target.parentElement?.closest('.eq-parent');
+    if (!closest)
+        return currentdepth;
+    return __classPrivateFieldGet(this, _ElementQueries_instances, "m", _ElementQueries_finddepth).call(this, closest, currentdepth + 1);
+}, _ElementQueries_collecttargets = function _ElementQueries_collecttargets() {
+    __classPrivateFieldSet(this, _ElementQueries_watchlist, [], "f");
+    const targets = Array.from(document.querySelectorAll('.eq-parent'));
+    for (const target of targets) {
+        const depth = __classPrivateFieldGet(this, _ElementQueries_instances, "m", _ElementQueries_finddepth).call(this, target);
+        if (!__classPrivateFieldGet(this, _ElementQueries_watchlist, "f")[depth])
+            __classPrivateFieldGet(this, _ElementQueries_watchlist, "f")[depth] = [target];
+        else
+            __classPrivateFieldGet(this, _ElementQueries_watchlist, "f")[depth].push(target);
+    }
+}, _ElementQueries_gotoanchor = function _ElementQueries_gotoanchor() {
+    // since we are dramatically resizing, we need to scroll to the proper place for an
+    // anchor tag
+    const m = document.location.hash.match(/^#([a-z][\w:.-]*)$/i);
+    if (m) {
+        const id = m[1];
+        requestAnimationFrame(() => document.getElementById(id) || document.querySelector(`[name="${id}"]`).scrollIntoView(true));
+    }
+}, _ElementQueries_activate = function _ElementQueries_activate() {
+    this.fullresync();
+    window.addEventListener('resize', __classPrivateFieldGet(this, _ElementQueries_boundRefresh, "f"));
+    __classPrivateFieldSet(this, _ElementQueries_mutationobserver, new MutationObserver(() => this.fullresync()), "f");
+    __classPrivateFieldGet(this, _ElementQueries_mutationobserver, "f").observe(document.body, {
+        subtree: true,
+        childList: true,
+        attributeFilter: ['class', 'style']
+    });
+}, _ElementQueries_activateRaw = function _ElementQueries_activateRaw() {
+    if (typeof window === 'undefined' || __classPrivateFieldGet(this, _ElementQueries_hasInit, "f"))
+        return;
+    __classPrivateFieldSet(this, _ElementQueries_hasInit, true, "f");
+    if (['interactive', 'complete'].includes(document.readyState)) {
+        __classPrivateFieldGet(this, _ElementQueries_instances, "m", _ElementQueries_activate).call(this);
+    }
+    else {
+        window.addEventListener('DOMContentLoaded', () => {
+            __classPrivateFieldGet(this, _ElementQueries_instances, "m", _ElementQueries_activate).call(this);
+            __classPrivateFieldGet(this, _ElementQueries_instances, "m", _ElementQueries_gotoanchor).call(this);
+        });
+    }
+}, _ElementQueries_deactivate = function _ElementQueries_deactivate() {
+    if (__classPrivateFieldGet(this, _ElementQueries_subscribers, "f") > 0 || typeof window === 'undefined')
+        return;
+    window.removeEventListener('resize', __classPrivateFieldGet(this, _ElementQueries_boundRefresh, "f"));
+    __classPrivateFieldGet(this, _ElementQueries_mutationobserver, "f")?.disconnect();
+    __classPrivateFieldSet(this, _ElementQueries_hasInit, false, "f");
+};
+export const elementqueries = new ElementQueries();
+export function eq(el, opts) {
+    el.classList.add('eq-parent');
+    let unsubscribe = elementqueries.subscribe(el, opts?.store);
+    return {
+        update(opts) {
+            unsubscribe();
+            unsubscribe = elementqueries.subscribe(el, opts?.store);
+        },
+        destroy() {
+            unsubscribe();
+        }
+    };
+}

package/actions/index.d.ts

@@ -1,4 +1,5 @@
 export * from './buttonify.js';
+export * from './elementqueries.js';
 export * from './glue.js';
 export * from './offset.js';
 export * from './portal.js';

package/actions/index.js

@@ -1,4 +1,5 @@
 export * from './buttonify.js';
+export * from './elementqueries.js';
 export * from './glue.js';
 export * from './offset.js';
 export * from './portal.js';

package/components/CardLayout.svelte

@@ -1,12 +1,12 @@
 <script >import { onDestroy, tick, setContext, onMount } from 'svelte';
 import { writable } from 'svelte/store';
-import { browser } from '$app/env';
 import { resize } from '../actions';
 import { CARDLAYOUT } from '../types';
 export let maxwidth = 500;
 export let preserveorder = false;
 export let gutter = 10;
 export let className = '';
+const ssr = navigator.userAgent.includes('jsdom');
 const blocks = [];
 const gutterstore = writable(gutter);
 let defaultOrder = 0;
@@ -177,7 +177,7 @@ function onResize(e) {
 onMount(() => triggerrecalc(layoutelement.clientWidth));
 </script>
 
-<ul class="cardlayout {className}" class:ssr={!browser} style:height={browser ? `${fullheight + gutter}px` : undefined} bind:this={layoutelement} use:resize on:resize={onResize}>
+<ul class="cardlayout {className}" class:ssr style:height={ssr ? undefined : `${fullheight + gutter}px`} bind:this={layoutelement} use:resize on:resize={onResize}>
   <slot></slot>
 </ul>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@txstate-mws/svelte-components",
-  "version": "1.1.3",
+  "version": "1.2.2",
   "description": "Svelte components that are generically useful.",
   "dependencies": {
     "@txstate-mws/svelte-store": "^1.0.3",
@@ -31,6 +31,7 @@
   "exports": {
     "./package.json": "./package.json",
     "./actions/buttonify": "./actions/buttonify.js",
+    "./actions/elementqueries": "./actions/elementqueries.js",
     "./actions/glue": "./actions/glue.js",
     "./actions": "./actions/index.js",
     "./actions/offset": "./actions/offset.js",