@thinkpixellab-public/px-vue 3.0.65 → 3.0.67

package/components/PxBaseMobileAware.vue

@@ -49,11 +49,18 @@
 -->
 
 <script>
+import utils from '../utils/utils.js';
+
 export default {
     data() {
         return { isMobile: null };
     },
     mounted() {
+        if (utils.getQueryBool('alwaysMobile')) {
+            this.isMobile = true;
+            return;
+        }
+
         if (this.$globalOn) {
             this.$globalOn('mobile-changed', isMobile => {
                 this.isMobile = isMobile;

package/components/PxSticky.vue

@@ -0,0 +1,113 @@
+<!--
+    A simple position:stickky container that adds stuck / unstuck events and classes as the item
+    becomes stuck / unstuck.
+-->
+<template>
+    <div
+        :class="[bem({ disabled: !enabled }), stuck ? stuckClass : unstuckClass]"
+        :style="enabled ? { top: cssPx(top), position: 'sticky', zIndex: z } : null"
+    >
+        <div
+            v-show="enabled"
+            ref="sentinel"
+            :class="bem('sentinel')"
+            :style="enabled ? { top: cssPx(-(top + overlap)), height: cssPx(top + overlap) } : null"
+        ></div>
+        <slot :stuck="stuck" />
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'px-sticky',
+    props: {
+        enabled: { type: Boolean, default: true },
+        top: { type: Number, default: 0 },
+        overlap: { type: Number, default: 1 },
+        z: { type: Number, default: 1 },
+        stuckClass: { type: String, default: '' },
+        unstuckClass: { type: String, default: '' },
+    },
+    data() {
+        return {
+            stuck: false,
+            stuckScrollY: null,
+        };
+    },
+    watch: {
+        enabled() {
+            this.updateConnections();
+        },
+        stuck(nv) {
+            if (nv) {
+                this.$emit('stuck');
+            } else {
+                this.$emit('unstuck');
+            }
+        },
+    },
+    mounted() {
+        this.updateConnections();
+    },
+    beforeDestroy() {
+        this.tryDisconnect();
+    },
+    methods: {
+        updateConnections() {
+            if (this.enabled) {
+                this.tryConnect();
+            } else {
+                this.tryDisconnect();
+            }
+        },
+        tryConnect() {
+            if (!this.observer) {
+                try {
+                    this.observer = new IntersectionObserver(
+                        ([e]) => {
+                            this.stuck = e.intersectionRatio < 1;
+                        },
+                        { threshold: [1] }
+                    );
+                    this.observer.observe(this.$refs.sentinel);
+                } catch (e) {
+                    console.warn('Cound not create css sticky detector.');
+                    console.warn(e);
+                }
+            }
+        },
+        tryDisconnect() {
+            this.stuck = false;
+            if (this.observer) {
+                this.observer.disconnect();
+                this.observer = null;
+            }
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+@import '@/styles/include.scss';
+.px-sticky {
+    position: relative;
+
+    &:not(.px-sticky--disabled) {
+        position: sticky !important;
+    }
+
+    &__sentinel {
+        position: absolute;
+        left: 0;
+        right: 0; /* needs dimensions */
+        visibility: hidden;
+        opacity: 0;
+
+        // DEBUG
+        // visibility: visible;
+        // opacity: 0.9;
+        // background-color: lime;
+        // z-index: 10000000;
+    }
+}
+</style>

package/package.json

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

package/utils/cssStr.js

@@ -190,6 +190,13 @@ function cssEmFallback(val, allowNumberless = false) {
     return cssUnitFallback(val, 'em', allowNumberless);
 }
 
+/*
+Px version of cssUnitFallback
+*/
+function cssPxFallback(val, allowNumberless = false) {
+    return cssUnitFallback(val, 'px', allowNumberless);
+}
+
 export {
     cssPx,
     cssEm,
@@ -201,4 +208,5 @@ export {
     cssUnit,
     cssUnitFallback,
     cssEmFallback,
+    cssPxFallback,
 };

package/utils/drag.js

@@ -60,7 +60,6 @@ function Drag(element, options) {
 
     this.onStart = nativeEvent => {
         if (this.disabled) {
-            debugger;
             return;
         }
 

package/utils/utils.js

@@ -116,6 +116,38 @@ export default {
         return chunks;
     },
 
+    /**
+     * Returns an array containing any elements that are in arrA not in arrB (e.g. arrA - arrB)
+     * @param  {} arrA The source array
+     * @param  {} arrB The comparison array
+     *
+     * @expample arrMinus([1,2,3], [3,4,5]) ==> [1,2]
+     */
+    arrMinus: function (arrA, arrB) {
+        return arrA.filter(item => !arrB.includes(item));
+    },
+
+    /**
+     * Returns an object like {added: [...], removed: [...]} containing the delta between arrOld and
+     * arrNew such that removed are elements in arrOld but not in arrNew and added are elements in
+     * arrNew but not in arrOld.
+     * @param  {} arrOld The source array
+     * @param  {} arrNew The comparison array
+     */
+    arrDelta: function (arrOld, arrNew) {
+        return {
+            added: this.arrMinus(arrNew, arrOld),
+            removed: this.arrMinus(arrOld, arrNew),
+        };
+    },
+
+    /**
+     * Returns an array of all elements found in both arrA and arrB.
+     */
+    arrIntersect: function (arrA, arrB) {
+        return arrA.filter(value => arrB.includes(value));
+    },
+
     /**
      * Returns an object representing the current query string parameters.
      */
@@ -260,4 +292,16 @@ export default {
             setTimeout(resolve, ms);
         });
     },
+
+    /**
+     * Generate a 6 letter random sequence of letters and numbers, based on this:
+     * https://stackoverflow.com/questions/6248666/how-to-generate-short-uid-like-ax4j9z-in-js
+     */
+
+    uniqueId() {
+        return (
+            ('000' + ((Math.random() * 46656) | 0).toString(36)).slice(-3) +
+            ('000' + ((Math.random() * 46656) | 0).toString(36)).slice(-3)
+        );
+    },
 };