@thinkpixellab-public/px-vue 3.0.69 → 3.0.70

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,78 @@
+<!--
+    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="currentStateValue">
+            <!-- fallback -->
+        </slot>
+    </div>
+</template>
+
+<script>
+// import { mapState } from 'vuex';
+// import Component from '~/components/Component.vue';
+import { gsap } from 'gsap';
+import { Flip } from 'gsap/Flip';
+
+export default {
+    name: 'px-flip',
+    // components: { Component },
+    // mixins: [ Mixin ],
+    props: {
+        states: { type: Array, default: null },
+        current: { type: String, default: null },
+        otherProps: { type: String, default: 'opacity,color,backgroundColor' },
+        selector: { type: String, default: '[data-flip]' },
+        targets: { default: null },
+    },
+    data() {
+        return { currentStateValue: this.current };
+    },
+    // computed: {},
+    watch: {
+        async current(nv) {
+            const targetElements = this.targets || this.$el.querySelectorAll(this.selector);
+
+            console.log(targetElements);
+
+            // save initial state
+            const state = Flip.getState(targetElements, { props: this.otherProps, absolute: true });
+
+            // make state changes
+            this.currentStateValue = 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: 1,
+                ease: 'power1.inOut',
+                absolute: true,
+            });
+        },
+    },
+    mounted() {
+        gsap.registerPlugin(Flip);
+    },
+    // methods: {},
+};
+</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,87 @@
+<!--
+    Describe this component...
+-->
+<template>
+    <div :class="bem()">
+        <PxFlip :states="['open', 'close']" :current="currentState">
+            <template #default="{ state }">
+                {{ state }}
+                <br />
+                <br />
+                <span :class="bem('container', { state })">
+                    <span data-flip />
+                    <span data-flip />
+                    <span data-flip />
+                </span>
+            </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: 'open',
+        };
+    },
+    // computed: {},
+    // watch: {},
+    // mounted() {},
+    methods: {
+        toggleState() {
+            if (this.currentState == 'open') {
+                this.currentState = 'close';
+            } else {
+                this.currentState = 'open';
+            }
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+@use '../../styles/px.scss' as *;
+.demo-px-flip {
+    padding: 5em;
+    &__container {
+        width: 4em;
+        height: 4em;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        position: relative;
+
+        span {
+            width: 100%;
+            height: 0.5em;
+            background-color: currentColor;
+        }
+
+        &--state-open {
+            span {
+                transform: rotate(0deg) scale(1);
+            }
+        }
+
+        &--state-close {
+            span {
+                transform: scale(0.5);
+                opacity: 0.5;
+            }
+        }
+    }
+}
+</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.70",
     "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;