@thinkpixellab-public/px-vue 3.0.65 → 3.0.66

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.66",
     "description": "General purpose Vue components and helpers that can be used across projects.",
     "author": "Pixel Lab",
     "license": "MIT",

package/utils/utils.js

@@ -260,4 +260,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)
+        );
+    },
 };