@thinkpixellab-public/px-vue 3.0.107 → 3.0.108

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@thinkpixellab-public/px-vue",
-    "version": "3.0.107",
+    "version": "3.0.108",
     "description": "General purpose Vue components and helpers that can be used across projects.",
     "author": "Pixel Lab",
     "license": "MIT",

package/utils/SharedHeightManager.js

@@ -0,0 +1,213 @@
+class HeightGroup {
+    constructor(id, ops = {}) {
+        this.id = id;
+
+        this.ops = {
+            // set to null to disable css variables
+            varsParent: window.document.body,
+
+            // debounce time in ms
+            debounce: 0,
+
+            // css variable prefix (e.g. --hg-groupId-h)
+            prefix: 'hg',
+
+            // ignore heights that are larger than this value in pixels
+            ignoreMax: null,
+
+            // ignore heights that are larger than this value as a standard deviation of the mean height
+            ignoreVariance: null,
+
+            // debug mode (adds some loging that can help with debugging)
+            debug: false,
+
+            changeCallback: null,
+
+            ...ops,
+        };
+
+        this.max = null;
+        this.elements = [];
+        this.currentMaxElements = [];
+    }
+
+    updateOptions(ops) {
+        this.ops = { ...this.ops, ...ops };
+    }
+
+    getVariableName() {
+        return '--' + (this.ops.prefix ? this.ops.prefix + '-' : '') + this.id + '-h';
+    }
+
+    trySync() {
+        clearTimeout(this.lastTimeout);
+
+        this.lastTimeout = setTimeout(() => {
+            let heights = this.elements.map(el => el.height);
+            let ignore = Number.MAX_VALUE;
+
+            if (this.ops.ignoreVariance) {
+                const mean = heights.reduce((sum, height) => sum + height, 0) / heights.length;
+                const variance =
+                    heights.reduce((sum, height) => sum + Math.pow(height - mean, 2), 0) /
+                    heights.length;
+                const stdDev = Math.sqrt(variance);
+
+                if (this.ops.debug) {
+                    console.log(`stdDev: ${stdDev}`);
+                }
+
+                ignore = this.ops.ignoreVariance * stdDev + mean;
+            }
+
+            if (this.ops.ignoreMax) {
+                ignore = Math.min(ignore, this.ops.ignoreMax);
+            }
+
+            const max = Math.max(...heights.filter(height => height <= ignore));
+
+            if (this.max !== max) {
+                this.max = max;
+
+                // store the elements that have the max height
+                this.currentMaxElements = this.elements.filter(el => el.height === max);
+
+                if (this.ops.varsParent) {
+                    this.ops.varsParent.style.setProperty(this.getVariableName(), max + 'px');
+                }
+
+                if (this.ops.changeCallback) {
+                    this.ops.changeCallback(this.id, this.max);
+                }
+            }
+
+            if (this.ops.debug) {
+                console.log(`ignore: ${ignore}`);
+                console.log(
+                    'valid heights:',
+                    heights.filter(height => height <= ignore)
+                );
+                console.log(
+                    'invalid heights:',
+                    heights.filter(height => height > ignore)
+                );
+            }
+        }, this.ops.debounce);
+    }
+
+    updateElement(element, height) {
+        if (!element) {
+            return;
+        }
+
+        let el = this.elements.find(el => el.element == element);
+
+        if (!el) {
+            el = { element, height: null };
+            this.elements.push(el);
+        }
+
+        if (el.height !== height) {
+            el.height = height;
+
+            if (this.currentMaxElements.includes(el)) {
+                // this element was the max height, so we need to recalculate the max height even if smaller
+                this.max = null;
+            }
+
+            this.trySync();
+        }
+    }
+
+    removeElement(element) {
+        const el = this.elements.find(el => el.element === element);
+        if (el) {
+            this.elements = this.elements.filter(el => el.element !== element);
+
+            if (this.currentMaxElements.includes(el.element)) {
+                this.currentMaxElements = [];
+                this.max = null;
+            }
+
+            this.trySync();
+        }
+    }
+}
+
+export default {
+    getGroups() {
+        if (!window.$heightGroups) {
+            window.$heightGroups = {};
+        }
+
+        return window.$heightGroups;
+    },
+
+    getGroup(id) {
+        if (!id) {
+            return null;
+        }
+
+        const groups = this.getGroups();
+
+        if (id in groups) {
+            return groups[id];
+        }
+
+        return null;
+    },
+
+    addGroup(group) {
+        const groups = this.getGroups();
+        groups[group.id] = group;
+    },
+
+    createGroup(id, ops) {
+        if (!id) {
+            return null;
+        }
+
+        const group = new HeightGroup(id, ops);
+        this.addGroup(group);
+
+        return group;
+    },
+};
+
+export class SharedHeightScopeManager {
+    constructor(scopeElement, changeCallback) {
+        this.groups = {};
+        this.scopeElement = scopeElement;
+        this.groupMaxChanged = changeCallback;
+    }
+
+    getGroup(id) {
+        if (!id) {
+            return null;
+        }
+
+        if (id in this.groups) {
+            return this.groups[id];
+        }
+
+        return null;
+    }
+
+    addGroup(group) {
+        this.groups[group.id] = group;
+    }
+
+    createGroup(id, ops = {}) {
+        if (!id) {
+            return null;
+        }
+
+        ops.varsParent = this.scopeElement;
+        ops.changeCallback = this.groupMaxChanged;
+
+        const group = new HeightGroup(id, ops);
+        this.addGroup(group);
+
+        return group;
+    }
+}