@thinkpixellab-public/px-vue 3.0.69 → 3.0.71

package/components/PxBalancedText.vue

@@ -111,10 +111,16 @@ export default {
                 this.resize();
             });
         },
+        html() {
+            this.balance();
+        },
     },
 
     methods: {
         resize() {
+            this.balance();
+        },
+        balance() {
             if (isServer()) {
                 return;
             }
@@ -126,11 +132,13 @@ export default {
 
             if (this.enabled) {
                 try {
+                    this.$emit('start');
                     this.balanceFailed = false;
                     if (this.$refs.text && this.$refs.text.offsetWidth > 0) {
                         balanceText(this.$refs.text);
                     }
                     this.balanced = true;
+                    this.$emit('complete');
                 } catch (error) {
                     console.error('balanceText failed');
                     console.error(error);

package/components/PxBaseActiveTab.vue

@@ -0,0 +1,50 @@
+<!--
+
+    Usage:
+
+    To perform an action the first time the browser tab becomes active, override the browserTabFirstActive() method.
+
+    To watch for changes to the browser tab's active state, watch the isBrowserTabActive property.
+
+-->
+<script>
+export default {
+    data() {
+        return { isBrowserTabActive: false, browserTabActivationCount: 0 };
+    },
+    mounted() {
+        if (typeof document == undefined) {
+            console.warn('Unable to create visibility change listener.  No document object.');
+            return;
+        }
+
+        document.addEventListener('visibilitychange', this.onTabVisibilityChange);
+        this.onTabVisibilityChange();
+    },
+    beforeDestroy() {
+        document.removeEventListener('visibilitychange', this.onTabVisibilityChange);
+    },
+    methods: {
+        onTabVisibilityChange() {
+            if (document.visibilityState === 'visible') {
+                this.isBrowserTabActive = true;
+                this.browserTabActivationCount++;
+
+                if (this.browserTabActivationCount == 1) {
+                    if (this.browserTabFirstActive) {
+                        this.browserTabFirstActive();
+                    }
+                }
+            } else {
+                this.isBrowserTabActive = false;
+            }
+        },
+
+        // OVERRIDE this method to perform an action the first time the browser tab becomes active
+        //
+        // browserTabFirstActive() {
+        //     console.log('browser tab first active');}
+        // }
+    },
+};
+</script>

package/components/PxFlip.vue

@@ -0,0 +1,95 @@
+<!--
+    Usage:
+
+    <px-flip :states="['select', 'interact']" :current="'select'">
+        <template :state="state">
+            <div :class="bem('container', { state })">
+                <div data-pxflip>...</div>
+                <div data-pxflip>...</div>
+            </div>
+        </template>
+    </px-flip>
+-->
+
+<template>
+    <div :class="bem()">
+        <!-- in the component -->
+        <slot name="default" :state="currentValue">
+            <!-- fallback -->
+        </slot>
+    </div>
+</template>
+
+<script>
+import { gsap } from 'gsap';
+import { Flip } from 'gsap/Flip';
+
+export default {
+    name: 'px-flip',
+    props: {
+        states: { type: Array, default: null },
+        current: { type: String, default: null },
+        autoSelectFirstState: { type: Boolean, default: true },
+        otherProps: { type: String, default: 'opacity,color,backgroundColor' },
+        selector: { type: String, default: '[data-flip]' },
+        targets: { default: null },
+        duration: { type: Number, default: 0.5 },
+        ease: { type: String, default: 'circ.out' },
+        absolute: { type: Boolean, default: false },
+    },
+    data() {
+        return { currentValue: this.current };
+    },
+    watch: {
+        currentValue(nv) {
+            this.$emit('update:current', nv);
+        },
+
+        async current(nv) {
+            const targetElements = this.targets || this.$el.querySelectorAll(this.selector);
+
+            // save initial state
+            const state = Flip.getState(targetElements, { props: this.otherProps, absolute: true });
+
+            // make state changes
+            this.currentValue = nv;
+
+            await this.$nextTick();
+            // animate from the old state to the new one
+            // animate from the previous state to the current one:
+
+            Flip.from(state, {
+                duration: this.duration,
+                ease: this.ease,
+                absolute: this.absolute,
+            });
+        },
+    },
+    mounted() {
+        gsap.registerPlugin(Flip);
+
+        if (!this.currentValue && this.autoSelectFirstState && this.states.length) {
+            this.currentValue = this.states[0];
+        }
+    },
+    methods: {
+        nextState() {
+            if (this.states) {
+                const index = this.states.indexOf(this.currentValue);
+                if (index >= 0) {
+                    this.currentValue = this.states[(index + 1) % this.states.length];
+                }
+            }
+        },
+        toggle() {
+            this.nextState();
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+.px-flip {
+    // add styles here
+}
+</style>

package/components/PxGsapScrubber.vue

@@ -81,13 +81,16 @@ export default {
             }
 
             this.timeline = t;
-            this.progress = this.timeline.progress();
-            this.isPlaying = !this.timeline.paused();
 
-            this.timeline.eventCallback('onUpdate', () => {
+            if (this.timeline) {
                 this.progress = this.timeline.progress();
                 this.isPlaying = !this.timeline.paused();
-            });
+
+                this.timeline.eventCallback('onUpdate', () => {
+                    this.progress = this.timeline.progress();
+                    this.isPlaying = !this.timeline.paused();
+                });
+            }
         },
         pause() {
             if (this.timeline) {

package/dev/demos/Demo-PxFlip.vue

@@ -0,0 +1,108 @@
+'one | two | 50%'
+<!--
+    Describe this component...
+-->
+<template>
+    <div :class="bem()">
+        <PxFlip ref="flip" :states="['one', 'two']" :current="currentState">
+            <template #default="{ state }">
+                {{ state }}
+                <br />
+                <br />
+                <div :class="bem('container', { state })">
+                    <div :class="bem('red')" data-flip />
+                    <div :class="bem('gold')" data-flip />
+                    <div :class="bem('blue')" data-flip />
+                </div>
+            </template>
+        </PxFlip>
+        <button @click="toggleState">Toggle</button>
+    </div>
+</template>
+
+<script>
+// import { mapState } from 'vuex';
+// import Component from '~/components/Component.vue';
+// import Mixin from '~/components/Mixin.vue';
+
+import PxFlip from '../../components/PxFlip.vue';
+
+export default {
+    name: 'demo-px-flip',
+    components: { PxFlip },
+
+    // mixins: [ Mixin ],
+    // props: { a: { type: Boolean, default: false } },
+    data() {
+        return {
+            currentState: 'one',
+        };
+    },
+    // computed: {},
+    // watch: {},
+    // mounted() {},
+    methods: {
+        toggleState() {
+            if (this.currentState == 'one') {
+                this.currentState = 'two';
+            } else {
+                this.currentState = 'one';
+            }
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+@use '../../styles/px.scss' as *;
+.demo-px-flip {
+    padding: 5em;
+    &__container {
+        width: 200px;
+        height: 200px;
+        border: 1px solid black;
+
+        // prettier-ignore
+        @include grid-art(
+            (
+                '50%  | 50%  | ',
+                'red  | gold | 50%',
+                'blue | blue | 50%'
+            )
+        );
+
+        span {
+            width: 100%;
+            height: 0.5em;
+            background-color: currentColor;
+        }
+
+        &--state-one {
+        }
+
+        &--state-two {
+            // prettier-ignore
+            @include grid-art(
+                (
+                    '33%  | 67%  | ',
+                    'blue | red  | 50%',
+                    'gold | gold | 50%'
+                )
+            );
+        }
+    }
+
+    &__red {
+        background-color: tomato;
+        grid-area: red;
+    }
+    &__gold {
+        background-color: gold;
+        grid-area: gold;
+    }
+    &__blue {
+        background-color: lightblue;
+        grid-area: blue;
+    }
+}
+</style>

package/dev/dev.vue

@@ -19,6 +19,7 @@ import DemoPxPivot from './demos/Demo-PxPivot.vue';
 import DemoPxFloat from './demos/Demo-PxFloat.vue';
 import DemoPxContain from './demos/Demo-PxContain.vue';
 import DemoPxMenu from './demos/Demo-PxMenu.vue';
+import DemoPxFlip from './demos/Demo-PxFlip.vue';
 
 export default Vue.extend({
     components: {
@@ -34,6 +35,7 @@ export default Vue.extend({
         DemoPxFloat,
         DemoPxContain,
         DemoPxMenu,
+        DemoPxFlip,
     },
     name: 'ServeDev',
     data() {
@@ -46,7 +48,7 @@ export default Vue.extend({
         const params = new Proxy(new URLSearchParams(window.location.search), {
             get: (searchParams, prop) => searchParams.get(prop),
         });
-        this.componentToRender = params.component || 'DemoPxMenu';
+        this.componentToRender = params.component || 'DemoPxFlip';
         console.log(`this.componentToRender: ${this.componentToRender}`);
     },
 });

package/package.json

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

package/utils/balanceText.js

@@ -110,8 +110,8 @@ function textElementIsMultipleLines(element) {
     // Update the first word variable in the dom
     firstWord = document.getElementById('element-first-word');
 
-    firstWordHeight = firstWord.offsetHeight;
-    elementHeight = element.offsetHeight;
+    firstWordHeight = firstWord?.offsetHeight;
+    elementHeight = element?.offsetHeight;
 
     // Restore the original element text
     element.innerHTML = ORIGINAL_ELEMENT_TEXT;