@thinkpixellab-public/px-vue 3.0.54 → 3.0.56

package/components/PxGsapScrubber.vue

@@ -0,0 +1,145 @@
+<!--
+    Describe this component...
+-->
+
+<template>
+    <div :class="bem()">
+        <px-icon-button :class="bem('button')" :src="currentButtonIcon" @click="buttonClick" />
+        <px-scrubber
+            :class="bem('scrubber')"
+            v-model="progress"
+            @seek="seek"
+            @dragstart="dragStart"
+            @dragend="dragEnd"
+        />
+        <span :class="bem('time')">{{ time }}</span>
+    </div>
+</template>
+
+<script>
+// import { mapState } from 'vuex';
+// import Component from '~/components/Component.vue';
+// import Mixin from '~/components/Mixin.vue';
+import PxIconButton from './PxIconButton.vue';
+import PxScrubber from './PxScrubber.vue';
+
+export default {
+    name: 'px-gsap-scrubber',
+    components: { PxIconButton, PxScrubber },
+    // mixins: [ Mixin ],
+    // props: { a: { type: Boolean, default: false } },
+    data() {
+        return { timeline: null, progress: 0, isPlaying: false };
+    },
+    computed: {
+        currentButtonIcon() {
+            return this.isPlaying
+                ? require('../assets/feather/pause-circle.svg')
+                : require('../assets/feather/play-circle.svg');
+        },
+        time() {
+            if (this.timeline) {
+                let t = this.timeline;
+                let seconds = t.duration() * this.progress;
+                let mins = Math.floor(seconds / 60);
+
+                seconds -= mins * 60;
+                seconds = Math.round(seconds * 100);
+                seconds = seconds.toString().padStart(4, '0');
+                seconds = seconds.slice(0, 2) + '.' + seconds.slice(2, 4);
+
+                mins = Math.round(mins || 0)
+                    .toString()
+                    .padStart(2, '0');
+
+                return `${mins}:${seconds}`;
+            }
+            return null;
+        },
+    },
+    // watch: {},
+    // mounted() {},
+    beforeUnmount() {
+        if (this.timeline) {
+            this.timeline.eventCallback('onUpdate', null);
+        }
+    },
+    methods: {
+        buttonClick() {
+            if (this.isPlaying) {
+                this.pause();
+            } else {
+                this.play();
+            }
+        },
+        setTimeline(t) {
+            // TODO: a timeline can only have one handler for onUpdate so if we're using this already
+            // we would need to somehow and capture and proxy the event from within our handler
+
+            if (this.timeline) {
+                this.timeline.eventCallback('onUpdate', null);
+            }
+
+            this.timeline = t;
+            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) {
+                this.isPlaying = false;
+                this.timeline.pause();
+            }
+        },
+        play() {
+            if (this.timeline) {
+                this.isPlaying = true;
+                this.timeline.play();
+            }
+        },
+        dragStart() {
+            this.wasPlaying = this.isPlaying;
+            this.pause();
+        },
+        dragEnd() {
+            if (this.wasPlaying) {
+                this.play();
+            }
+        },
+        seek(e) {
+            this.timeline.progress(e.progress);
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+@use '../styles/px.scss' as *;
+
+.px-gsap-scrubber {
+    width: 100%;
+    padding: 0.25em 1em;
+    display: flex;
+    gap: 0.5em;
+    align-items: center;
+
+    &__button {
+        flex: none;
+    }
+
+    &__scrubber {
+        flex: 1;
+    }
+
+    &__time {
+        font-family: Arial, Helvetica, sans-serif;
+        font-weight: bold;
+        font-size: 12px;
+    }
+    // add styles here
+}
+</style>

package/components/PxMeasureContainer.vue

@@ -0,0 +1,84 @@
+<!--
+    Describe this component...
+-->
+<template>
+    <div :class="bem()">
+        <div v-if="measuring" ref="container" :class="[bem('container'), containerClass]">
+            <div ref="content" :class="bem('content')">
+                <slot />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import BaseDebug from '@thinkpixellab/px-edge-shared/components/common/BaseDebug.vue';
+import PxBaseResize from './PxBaseResize.vue';
+
+export default {
+    name: 'px-measure-container',
+    // components: { Component },
+    mixins: [BaseDebug, PxBaseResize],
+    props: {
+        containerClass: { type: String, default: null },
+        autoUpdate: { type: Boolean, default: true },
+
+        // a delay inserted after the content has been hydrated and before measuring the size, if another update
+        // occurs during the delay, the previous update will be cancelled
+        delay: { type: Number, default: 50 },
+    },
+    data() {
+        return { measuring: false, size: { width: 0, height: 0 } };
+    },
+    methods: {
+        resize() {
+            if (this.autoUpdate) {
+                this.update();
+            }
+        },
+        update(onComplete) {
+            if (this.timeout) {
+                clearTimeout(this.timeout);
+            }
+
+            this.measuring = true;
+
+            this.timeout = setTimeout(() => {
+                this.$emit('measure', this.$refs.content);
+
+                const size = {
+                    width: this.$refs.content.offsetWidth,
+                    height: this.$refs.content.offsetHeight,
+                };
+                this.size = size;
+
+                if (onComplete) {
+                    onComplete(size);
+                }
+
+                this.$emit('update', size);
+
+                this.measuring = false;
+            }, this.delay);
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+@import '@/styles/include.scss';
+.px-measure-container {
+    opacity: 0;
+    pointer-events: none;
+    position: absolute;
+
+    &__container {
+        position: absolute;
+        width: 100%;
+    }
+
+    &__content {
+        position: relative;
+    }
+}
+</style>

package/components/PxScrubber.vue

@@ -0,0 +1,143 @@
+<!--
+    Describe this component...
+-->
+<template>
+    <div
+        :class="bem()"
+        @mouseenter="mouseEnter"
+        @mousemove="mouseMove"
+        @mouseleave="mouseLeave"
+        @mousedown="mouseDown"
+        @mouseup="mouseUp"
+    >
+        <div :class="bem('scrubber')">
+            <div :class="bem('progress')" :style="{ width: cssPcnt(progressValue) }"></div>
+            <div
+                v-if="!dragging"
+                :class="bem('preview')"
+                :style="{ width: cssPcnt(previewProgress) }"
+            ></div>
+        </div>
+    </div>
+</template>
+
+<script>
+// import { mapState } from 'vuex';
+// import Component from '~/components/Component.vue';
+// import Mixin from '~/components/Mixin.vue';
+export default {
+    name: 'px-scrubber',
+    model: {
+        prop: 'progress',
+        event: 'update:progress',
+    },
+
+    props: {
+        progress: { type: Number, default: 0.5 },
+        dragEnabled: { type: Boolean, default: true },
+    },
+    data() {
+        return {
+            dragging: false,
+            previewing: false,
+            previewProgress: 0,
+            progressValue: this.progress,
+        };
+    },
+    watch: {
+        progress(nv) {
+            // update progressValue when progress changes
+            this.progressValue = nv;
+        },
+
+        progressValue(nv) {
+            // emit update when progressValue changes (enables .sync on parent)
+            this.$emit('update:progress', nv);
+        },
+    },
+    methods: {
+        mouseEnter() {
+            this.previewing = true;
+        },
+
+        mouseLeave() {
+            clearTimeout(this.previewingTimeout);
+            this.previewingTimeout = setTimeout(() => {
+                this.previewing = false;
+            }, 20);
+            //this.previewing = false;
+
+            this.previewProgress = 0;
+        },
+        mouseDown(e) {
+            const progress = e.offsetX / this.$el.offsetWidth;
+            this.$emit('seek', { progress });
+
+            if (this.dragEnabled) {
+                this.dragging = true;
+                this.$emit('dragstart');
+            }
+        },
+
+        mouseUp(e) {
+            if (this.dragging) {
+                this.dragging = false;
+                this.$emit('dragend');
+            }
+            e.stopPropagation();
+            e.preventDefault();
+        },
+
+        mouseMove(e) {
+            const progress = e.offsetX / this.$el.offsetWidth;
+            if (this.dragging) {
+                this.$emit('seek', { progress });
+            } else if (this.previewing) {
+                this.previewProgress = progress;
+            }
+            e.stopPropagation();
+            e.preventDefault();
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+@use '../styles/px.scss' as *;
+
+.px-scrubber {
+    @at-root :root {
+        --px-scrubber-height: 4px;
+        --px-scrubber-bg: #{clr(accent, 0, 0.1)};
+        --px-scrubber-padding: 1em 0;
+        --px-scrubber-progress-bg: #{clr(accent, 0, 1)};
+        --px-scrubber-preview-bg: #{clr(accent, 0, 0.5)};
+    }
+    width: 100%;
+    padding: var(--px-scrubber-padding);
+    cursor: pointer;
+
+    &__scrubber {
+        position: relative;
+        width: 100%;
+        height: var(--px-scrubber-height);
+        background: var(--px-scrubber-bg);
+    }
+
+    &__progress,
+    &__preview {
+        position: absolute;
+        left: 0;
+        top: 0;
+        height: 100%;
+    }
+
+    &__preview {
+        background: var(--px-scrubber-preview-bg);
+    }
+
+    &__progress {
+        background: var(--px-scrubber-progress-bg);
+    }
+}
+</style>

package/package.json

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

package/plugins/common.js

@@ -11,6 +11,7 @@ import {
     cssPcnt,
     cssUrl,
     cssVar,
+    cssAspect,
     cssUnitFallback,
     cssEmFallback,
 } from '../utils/cssStr.js';
@@ -30,6 +31,7 @@ export default {
         Vue.prototype.cssPcnt = cssPcnt;
         Vue.prototype.cssUrl = cssUrl;
         Vue.prototype.cssVar = cssVar;
+        Vue.prototype.cssAspect = cssAspect;
         Vue.prototype.cssUnitFallback = cssUnitFallback;
         Vue.prototype.cssEmFallback = cssEmFallback;
 

package/utils/cssStr.js

@@ -93,6 +93,70 @@ function cssNum(val, nanValue = 0) {
     return isNaN(num) ? nanValue : num;
 }
 
+/*
+Attempts to convert multiple input styles into valid aspect-ratio property syntax (the number version)
+
+    cssAspect(1.5) => 1.5
+    cssAspect('1.5') => 1.5
+    cssAspect('3 / 2') => 1.5
+    cssAspect('3:2') => 1.5
+    cssAspect('3 : 2') => 1.5
+    this.cssAspect('3:2:1') => null
+    cssAspect('auto') => auto
+    cssAspect('blah') => null
+    cssAspect('auto', 1.5) => auto
+    cssAspect('blah', 1.5) => 1.5
+    cssAspect(null, 1.5) => 1.5
+
+*/
+function cssAspect(val, fallback = null) {
+    // number
+    if (typeof val == 'number') {
+        return val;
+    }
+
+    // null or empty (return fallback)
+    if (!val) {
+        return fallback;
+    }
+
+    // string
+    if (typeof val == 'string') {
+        val = val.trim();
+
+        // special case 'auto' since it's valid
+        if (val == 'auto') {
+            return val;
+        }
+
+        // look for a delimiter first
+
+        let delimiter = null;
+
+        if (val && val.indexOf(':') > -1) {
+            delimiter = ':';
+        }
+
+        if (val && val.indexOf('/') > -1) {
+            delimiter = '/';
+        }
+
+        if (delimiter) {
+            let parts = val.split(delimiter).map(s => cssNum(s.trim()));
+            if (parts && parts.length == 2) {
+                return parts[0] / parts[1];
+            }
+        }
+
+        // try to just parse the string
+        else {
+            return cssNum(val, fallback);
+        }
+    }
+
+    return fallback;
+}
+
 /*
 Add the specified unit if no other unit is specified.
 
@@ -133,4 +197,15 @@ function cssEmFallback(val, allowNumberless = false) {
     return cssUnitFallback(val, 'em', allowNumberless);
 }
 
-export { cssPx, cssEm, cssPcnt, cssUrl, cssVar, cssNum, cssUnit, cssUnitFallback, cssEmFallback };
+export {
+    cssPx,
+    cssEm,
+    cssPcnt,
+    cssUrl,
+    cssVar,
+    cssAspect,
+    cssNum,
+    cssUnit,
+    cssUnitFallback,
+    cssEmFallback,
+};

package/utils/utils.js

@@ -254,4 +254,10 @@ export default {
             return ((for_bit32_mul ^ (for_bit32_mul >>> 14)) >>> 0) / 4294967296;
         };
     },
+
+    asyncTimeout(ms) {
+        return new Promise(resolve => {
+            setTimeout(resolve, ms);
+        });
+    },
 };