@thinkpixellab-public/px-vue 3.0.108 → 3.0.110

package/components/PxBaseMobileAware.vue

@@ -17,8 +17,67 @@ export default {
             return this.mediaQuery.currentBreakpoint;
         },
     },
-
     methods: {
+        /**
+         * Returns a value from a map that matches the current breakpoint or the nearest breakpoint.
+         * Nearest is determined by the searchDirection parameter.
+         *
+         * Usage:
+         *
+         * // returns 240 if mobile or smaller, 320 otherwise
+         * <Card :width="responsiveValue({mobile: 240}, 320)" />
+         *
+         * // returns 240 if mobile or smaller, 300 until lg, 320 otherwise
+         * <Card :width="responsiveValue({mobile: 240, lg: 300}, 320)" />
+         *
+         * // returns 200 if smaller than mobile, 240 if smaller than lg and 300 if bigger than lg
+         * <Card :width="responsiveValue({mobile: 240, lg: 300}, 200, 'down')" />
+         *
+         * // could also be used in a computed property....
+         * responsiveColor() {
+         *     return this.responsiveValue({mobile: 'red', lg: 'blue'}, 'green');
+         * }
+         */
+
+        responsiveValue(lookup, fallback, searchDirection = 'up') {
+            const breakpoints = this.mediaQuery.breakpoints || {};
+            const current = this.currentBreakpoint;
+
+            if (!lookup || !Object.keys(lookup).length || current == null) {
+                return fallback;
+            }
+
+            // if the current breakpoint is in the lookup, just return the value
+            if (current in lookup) {
+                return lookup[current];
+            }
+
+            // convert keys to numbers so we can sort and find the nearest
+            lookup = Object.keys(lookup).reduce((acc, key) => {
+                if (key in breakpoints) {
+                    acc[breakpoints[key]] = lookup[key];
+                }
+                return acc;
+            }, {});
+
+            const currentNum = breakpoints[current];
+
+            const keys = Object.keys(lookup)
+                .map(Number)
+                .sort((a, b) => (searchDirection == 'up' ? a - b : b - a));
+
+            // find the first key that is smaller than current
+            const match = keys.find(key => {
+                return searchDirection == 'up' ? key >= currentNum : key <= currentNum;
+            });
+
+            if (match) {
+                return lookup[match];
+            } else {
+                return fallback;
+            }
+        },
+
         isBreakpointOrSmaller(breakpoint) {
             if (this.currentBreakpoint === null) {
                 return false;

package/components/PxPivot.vue

@@ -123,7 +123,13 @@ export default {
                 return;
             }
 
-            const selected = this.$refs[this.getTabContentRefName(this.selectedItem)][0];
+            const refName = this.getTabContentRefName(this.selectedItem);
+
+            if (!this.$refs[refName]) {
+                return;
+            }
+
+            const selected = this.$refs[refName][0];
             const selectedRect = utils.getClientRect(selected, this.$refs.tabs);
 
             if (selected) {

package/components/PxSlideTransition.vue

@@ -1,40 +1,23 @@
 <!--
-    Handle transitions between slides in PxSlide. Uses a hybrid css/javascript transition where
-    fades are in css and the drag movement is done with gsap.
+    Describe this component...
 -->
 <template>
-    <!--
-before-enter
-before-leave
-before-appear
-enter
-leave
-appear
-after-enter
-after-leave
-after-appear
-enter-cancelled
-leave-cancelled (v-show only)
-appear-cancelled
--->
-
-    <transition
-        @before-enter="beforeEnter"
-        @enter="enter"
-        @leave="leave"
-        v-on="$listeners"
-        name="px-slide-transition-fade"
-    >
+    <div :class="bem({ active: active })">
         <slot />
-    </transition>
+    </div>
 </template>
 
 <script>
 import gsap from 'gsap';
 
 export default {
-    name: 'px-slide-transition',
+    name: 'px-slides-transition',
+    // components: { Component },
+    // mixins: [ Mixin ],
+
     props: {
+        active: { type: Boolean, default: true },
+
         // selector used to find children of the element that should slide during the transition
         dragSelector: { type: String, default: '[data-drag]' },
 
@@ -50,28 +33,53 @@ export default {
         // vertical or horizontal
         orientation: { type: String, default: 'horizontal' },
 
+        disableAnimations: { type: Boolean, default: false },
+
         // TODO rtlAdjust: {type: Boolean, default: false }
 
         duration: { type: Number, default: 1 },
         ease: { type: String, default: 'power3.out' },
         slideAmount: { default: '40vw' },
+    },
 
-        disableAnimations: { type: Boolean, default: false },
+    data() {
+        return { initialized: false };
     },
     computed: {
+        currentDuration() {
+            if (this.disableAnimations || !this.initialized) {
+                return 0;
+            }
+            return this.duration;
+        },
         tweenShared() {
             return {
-                duration: this.duration,
+                duration: this.currentDuration,
                 ease: this.ease,
             };
         },
     },
+    watch: {
+        active(isActive, wasActive) {
+            this.updateActive(isActive, wasActive);
+        },
+    },
     mounted() {
-        if (this.disableAnimations) {
-            gsap.globalTimeline.timeScale(Number.MAX_VALUE);
-        }
+        this.updateActive(this.active, false);
+        setTimeout(() => {
+            this.initialized = true;
+        }, 0);
     },
     methods: {
+        updateActive(isActive, wasActive) {
+            if (isActive && !wasActive) {
+                this.enter(this.$el);
+            }
+
+            if (!isActive && wasActive) {
+                this.leave(this.$el);
+            }
+        },
         directionAmount(direction, addEquals = false) {
             let dir;
             if (addEquals) {
@@ -96,14 +104,14 @@ export default {
             return element.querySelectorAll(this.dragReverseSelector);
         },
 
-        beforeEnter() {},
-
-        enter(element, done) {
+        enter(element) {
             const slideElements = this.slideElements(element);
 
             if (slideElements?.length) {
                 const from = {};
-                const to = { ...this.tweenShared, onComplete: done };
+                const to = {
+                    ...this.tweenShared,
+                };
 
                 if (this.orientation === 'vertical') {
                     from.y = this.directionAmount(this.direction * -1);
@@ -126,13 +134,25 @@ export default {
                     );
                 }
             }
+
+            // fade
+            gsap.to(element, {
+                opacity: 1,
+                duration: this.currentDuration,
+                ease: this.ease,
+                onStart: () => {
+                    this.$emit('before-enter');
+                },
+                onComplete: () => {
+                    this.$emit('after-enter');
+                },
+            });
         },
-        leave(element, done) {
+        leave(element) {
             const slideElements = this.slideElements(element);
 
             const to = {
                 ...this.tweenShared,
-                onComplete: done,
             };
 
             if (this.orientation === 'vertical') {
@@ -159,18 +179,28 @@ export default {
                     gsap.to(slideElementsReverse, toReverse);
                 }
             }
+
+            gsap.to(element, {
+                opacity: 0,
+                duration: this.currentDuration,
+                ease: this.ease,
+                onStart: () => {
+                    this.$emit('before-leave');
+                },
+                onComplete: () => {
+                    this.$emit('after-leave');
+                },
+            });
         },
     },
 };
 </script>
 
 <style lang="scss">
-@use '../styles/helpers.scss' as *;
 @use '../styles/px.scss' as *;
-
-@include vue-transition-fade(px-slide-transition-fade, $dur: 1s);
-
-.slide-transition {
-    // add styles here
+.px-slides-transition {
+    opacity: 0;
+    width: 100%;
+    height: 100%;
 }
 </style>

package/components/PxSlides.vue

@@ -1,8 +1,9 @@
 <!--
-    Describe this component...
+    #VUE3 Todo
 -->
+
 <template>
-    <div :class="bem(variantsMap)">
+    <div :class="bem({ hasOffset, orientation, ...variantsMap })">
         <div
             v-for="(item, index) in items"
             :key="getItemKey(item)"
@@ -10,14 +11,15 @@
             :class="bem('slide-wrapper', { selected: isItemSelected(item) })"
         >
             <px-slide-transition
+                :class="bem('transitioner')"
                 :disable-animations="disableAnimations"
                 :direction="direction"
                 :orientation="orientation"
+                :active="isItemSelected(item)"
                 @before-leave="transitionStart"
                 @after-leave="transitionEnd"
-                @leave-cancelled="transitionEnd"
             >
-                <div :class="bem('slide')" v-show="isItemSelected(item)">
+                <div :class="bem('slide')">
                     <slot
                         name="slide"
                         :selected="isItemSelected(item)"
@@ -128,7 +130,6 @@ export default {
                 navigator.userAgent.indexOf('Win') != -1 ||
                 this.$route.query?.scroll == 'windows'
             ) {
-                //console.log('[Windows scroll values enabled.]');
                 return {
                     stability: stability || 8,
                     sensitivity: sensitivity || 20,
@@ -176,6 +177,11 @@ export default {
                 this.drag.enable();
             }
         },
+        orientation(nv) {
+            if (this.drag) {
+                this.drag.updateOptions({ lock: nv === 'horizontal' ? 'x' : 'y' });
+            }
+        },
     },
     mounted() {
         if (this.scrollEnabled) {
@@ -254,8 +260,10 @@ export default {
                 }
 
                 if (this.orientation === 'vertical') {
-                    gsap.set(this.dragElements, { y: ev.startDelta.y });
-                    gsap.set(this.dragElementsReverse, { y: -1 * ev.startDelta.y });
+                    gsap.set(this.dragElements || [], { y: ev.startDelta.y });
+                    if (this.dragElementsReverse?.length) {
+                        gsap.set(this.dragElementsReverse, { y: -1 * ev.startDelta.y });
+                    }
                 } else {
                     gsap.set(this.dragElements, { x: ev.startDelta.x });
                 }
@@ -309,6 +317,7 @@ export default {
 
             if (this.scrollExcludeSelector) {
                 const excludeElements = this.$el.querySelectorAll(this.scrollExcludeSelector);
+
                 for (let i = 0; i < excludeElements.length; i++) {
                     if (excludeElements[i].contains(e.target)) return;
                 }
@@ -328,7 +337,6 @@ export default {
                     }
 
                     e.stopPropagation();
-                    e.preventDefault();
                 }
             }
 
@@ -371,16 +379,22 @@ export default {
 </script>
 
 <style lang="scss">
-@use '../styles/helpers.scss' as *;
 @use '../styles/px.scss' as *;
 
 .px-slides {
     display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr;
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: minmax(0, 1fr);
     grid-template-areas: 'content';
+    @include no-select();
+
     -webkit-transform-style: preserve-3d;
 
+    video,
+    img {
+        -webkit-user-drag: none;
+    }
+
     &__slide-wrapper {
         grid-area: content;
         width: 100%;

package/package.json

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

package/utils/SharedHeightManager.js

@@ -74,6 +74,9 @@ class HeightGroup {
 
                 if (this.ops.varsParent) {
                     this.ops.varsParent.style.setProperty(this.getVariableName(), max + 'px');
+                    if (this.ops.debug) {
+                        console.log(` ${this.getVariableName()}: ${max}px`);
+                    }
                 }
 
                 if (this.ops.changeCallback) {

package/utils/drag.js

@@ -341,7 +341,8 @@ function Drag(element, options) {
     };
 
     this.updateOptions = options => {
-        this.ops = { ...this.ops, options };
+        this.ops = { ...this.ops, ...options };
+        this.reset();
     };
 
     this.disable = () => {

package/utils/textWidth.js

@@ -36,4 +36,4 @@ const getFontFromElement = element => {
 };
 
 export default textWidth;
-export { getFontFromElement };
+export { textWidth, getFontFromElement };

package/utils/utils.js

@@ -412,4 +412,28 @@ export default {
             ('000' + ((Math.random() * 46656) | 0).toString(36)).slice(-3)
         );
     },
+
+    findScrollParent(node) {
+        const isScrolling = node => {
+            let overflow = getComputedStyle(node, null).getPropertyValue('overflow');
+
+            return overflow.indexOf('scroll') > -1 || overflow.indexOf('auto') > -1;
+        };
+
+        if (!(node instanceof HTMLElement || node instanceof SVGElement)) {
+            return undefined;
+        }
+
+        let current = node.parentNode;
+
+        while (current?.parentNode) {
+            if (isScrolling(current)) {
+                return current;
+            }
+
+            current = current.parentNode;
+        }
+
+        return document.scrollingElement || document.documentElement;
+    },
 };