@thinkpixellab-public/px-vue 4.0.0 → 4.0.1

package/components/PxSlides.vue

@@ -26,24 +26,43 @@
                 </div>
             </px-slide-transition>
         </div>
+
+        <slot name="scrollpreview" :direction="scrollPreview">
+            <div :class="bem('scroll-preview', { prev: true, visible: scrollPreview == -1 })">
+                <px-icon :src="require('../assets/feather/arrow-left.svg')" :size="2" />
+            </div>
+
+            <div :class="bem('scroll-preview', { next: true, visible: scrollPreview == 1 })">
+                <px-icon :src="require('../assets/feather/arrow-right.svg')" :size="2" />
+            </div>
+        </slot>
     </div>
 </template>
 
 <script>
 import PxBaseItemsSelect from './PxBaseItemsSelect.vue';
 import PxSlideTransition from './PxSlideTransition.vue';
+import PxIcon from './PxIcon.vue';
+
 import gsap from 'gsap';
 import Drag from '../utils/drag.js';
+import Lethargy from '../utils/lethargy.js';
 
 export default {
     name: 'px-slides',
     mixins: [PxBaseItemsSelect],
-    components: { PxSlideTransition },
+    components: { PxSlideTransition, PxIcon },
 
     props: {
         // whether drag interaction is enabled
         dragEnabled: { type: Boolean, default: true },
 
+        // whether scroll interaction is enabled
+        scrollEnabled: { type: Boolean, default: false },
+
+        // whether to show an icon or other indicator that scrolling has started
+        scrollPreviewEnabled: { type: Boolean, default: false },
+
         // if true, slides loop to the first slide once last slide is reached
         loop: { type: Boolean, default: true },
 
@@ -61,6 +80,7 @@ export default {
         return {
             direction: 1,
             activeTransitions: 0,
+            scrollPreview: 0,
         };
     },
     computed: {},
@@ -101,11 +121,17 @@ export default {
             excludeSelector: this.dragExcludeSelector,
             disabled: !this.dragEnabled,
         });
+
+        if (this.scrollEnabled) {
+            this.$el.addEventListener('wheel', this.onWheel);
+        }
     },
     beforeDestroy() {
         if (this.drag) {
             this.drag.destroy();
         }
+
+        this.$el.removeEventListener('wheel', this.onWheel);
     },
     methods: {
         transitionStart() {
@@ -154,6 +180,39 @@ export default {
             }
         },
 
+        onWheel(e) {
+            if (typeof this.lethargy == 'undefined') {
+                this.lethargy = new Lethargy();
+                this.lethargyPrevCheck = false;
+            }
+
+            if (this.scrollPreviewEnabled) {
+                const delta = (e.deltaY + e.deltaX) / 2;
+                if (Math.abs(delta) > 5) {
+                    this.scrollPreview = Math.max(Math.min(delta, 1), -1);
+                }
+
+                clearTimeout(this.scrollPreviewTimeout);
+                this.scrollPreviewTimeout = setTimeout(() => {
+                    this.scrollPreview = 0;
+                }, 200);
+            }
+
+            const check = this.lethargy.check(e);
+
+            if (check !== this.lethargyPrevCheck) {
+                if (check) {
+                    if (check > 0) {
+                        this.previous();
+                    } else {
+                        this.next();
+                    }
+                }
+            }
+
+            this.lethargyPrevCheck = check;
+        },
+
         next() {
             this.selectOffsetSafe(1, this.loop);
         },
@@ -214,5 +273,40 @@ export default {
         width: 100%;
         height: 100%;
     }
+
+    &__scroll-preview {
+        position: absolute;
+        top: 50%;
+        width: 5em;
+        height: 5em;
+        border-radius: 50%;
+        background-color: rgba(black, 0.07);
+        background-color: #f2f2f2;
+        backdrop-filter: blur(6px);
+        z-index: 100;
+        pointer-events: none;
+        opacity: 0;
+        transform: translate(0, -50%);
+
+        @include transition(opacity transform, $dur: 500ms);
+        @include depth-shadow(55, 0.05);
+
+        svg {
+            @include center();
+            color: currentColor;
+        }
+
+        &--prev {
+            left: 2.5em;
+        }
+
+        &--next {
+            right: 2.5em;
+        }
+
+        &--visible {
+            opacity: 1;
+        }
+    }
 }
 </style>

package/package.json

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

package/utils/lethargy.js

@@ -0,0 +1,111 @@
+// Adapted from here: https://github.com/d4nyll/lethargy
+// MIT License
+
+function Lethargy(stability, sensitivity, tolerance, delay) {
+    this.stability = stability != null ? Math.abs(stability) : 8;
+    this.sensitivity = sensitivity != null ? 1 + Math.abs(sensitivity) : 100;
+    this.tolerance = tolerance != null ? 1 + Math.abs(tolerance) : 1.1;
+    this.delay = delay != null ? delay : 150;
+    this.lastUpDeltas = function () {
+        var i, ref, results;
+        results = [];
+        for (
+            i = 1, ref = this.stability * 2;
+            1 <= ref ? i <= ref : i >= ref;
+            1 <= ref ? i++ : i--
+        ) {
+            results.push(null);
+        }
+        return results;
+    }.call(this);
+    this.lastDownDeltas = function () {
+        var i, ref, results;
+        results = [];
+        for (
+            i = 1, ref = this.stability * 2;
+            1 <= ref ? i <= ref : i >= ref;
+            1 <= ref ? i++ : i--
+        ) {
+            results.push(null);
+        }
+        return results;
+    }.call(this);
+    this.deltasTimestamp = function () {
+        var i, ref, results;
+        results = [];
+        for (
+            i = 1, ref = this.stability * 2;
+            1 <= ref ? i <= ref : i >= ref;
+            1 <= ref ? i++ : i--
+        ) {
+            results.push(null);
+        }
+        return results;
+    }.call(this);
+}
+
+Lethargy.prototype.check = function (e) {
+    var lastDelta;
+    e = e.originalEvent || e;
+    if (e.wheelDelta != null) {
+        lastDelta = e.wheelDelta;
+    } else if (e.deltaY != null) {
+        lastDelta = e.deltaY * -40;
+    } else if (e.detail != null || e.detail === 0) {
+        lastDelta = e.detail * -40;
+    }
+    this.deltasTimestamp.push(Date.now());
+    this.deltasTimestamp.shift();
+    if (lastDelta > 0) {
+        this.lastUpDeltas.push(lastDelta);
+        this.lastUpDeltas.shift();
+        return this.isInertia(1);
+    } else {
+        this.lastDownDeltas.push(lastDelta);
+        this.lastDownDeltas.shift();
+        return this.isInertia(-1);
+    }
+    return false;
+};
+
+Lethargy.prototype.isInertia = function (direction) {
+    var lastDeltas, lastDeltasNew, lastDeltasOld, newAverage, newSum, oldAverage, oldSum;
+    lastDeltas = direction === -1 ? this.lastDownDeltas : this.lastUpDeltas;
+    if (lastDeltas[0] === null) {
+        return direction;
+    }
+    if (
+        this.deltasTimestamp[this.stability * 2 - 2] + this.delay > Date.now() &&
+        lastDeltas[0] === lastDeltas[this.stability * 2 - 1]
+    ) {
+        return false;
+    }
+    lastDeltasOld = lastDeltas.slice(0, this.stability);
+    lastDeltasNew = lastDeltas.slice(this.stability, this.stability * 2);
+    oldSum = lastDeltasOld.reduce(function (t, s) {
+        return t + s;
+    });
+    newSum = lastDeltasNew.reduce(function (t, s) {
+        return t + s;
+    });
+    oldAverage = oldSum / lastDeltasOld.length;
+    newAverage = newSum / lastDeltasNew.length;
+    if (
+        Math.abs(oldAverage) < Math.abs(newAverage * this.tolerance) &&
+        this.sensitivity < Math.abs(newAverage)
+    ) {
+        return direction;
+    } else {
+        return false;
+    }
+};
+
+Lethargy.prototype.showLastUpDeltas = function () {
+    return this.lastUpDeltas;
+};
+
+Lethargy.prototype.showLastDownDeltas = function () {
+    return this.lastDownDeltas;
+};
+
+export default Lethargy;