From 5896373979efcbdaab9d0b9ffe27840a3807d0f3 Mon Sep 17 00:00:00 2001
From: dChiamp <derek.chiampas@gmail.com>
Date: Tue, 4 Aug 2020 13:38:27 -0700
Subject: [PATCH 1/2] adds basic component

---
 src/assets/svgs/icon-arrow.svg                |   3 +
 .../SlideshowWork/SlideshowWork.stories.js    |  16 ++
 .../SlideshowWork/SlideshowWork.vue           | 137 ++++++++++++
 src/components/global/Slideshow.vue           | 204 ++++++++++++++++++
 4 files changed, 360 insertions(+)
 create mode 100644 src/assets/svgs/icon-arrow.svg
 create mode 100644 src/components/SlideshowWork/SlideshowWork.stories.js
 create mode 100644 src/components/SlideshowWork/SlideshowWork.vue
 create mode 100644 src/components/global/Slideshow.vue

diff --git a/src/assets/svgs/icon-arrow.svg b/src/assets/svgs/icon-arrow.svg
new file mode 100644
index 0000000..fab27ee
--- /dev/null
+++ b/src/assets/svgs/icon-arrow.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="31.334" height="16.159" viewBox="0 0 31.334 16.159">
+  <path d="M10.052 1.974L5.343 6.683h25.991v2.791H5.343l4.709 4.709-1.973 1.975L0 8.077 8.079-.001z"/>
+</svg>
diff --git a/src/components/SlideshowWork/SlideshowWork.stories.js b/src/components/SlideshowWork/SlideshowWork.stories.js
new file mode 100644
index 0000000..581693e
--- /dev/null
+++ b/src/components/SlideshowWork/SlideshowWork.stories.js
@@ -0,0 +1,16 @@
+import SlideshowWork from "./SlideshowWork"
+import API from "@/static/db.json"
+
+export default {
+    title: "@dchiamp / SlideshowWork"
+}
+
+export const Default = () => ({
+    components: { SlideshowWork },
+    data() {
+        return {
+            images: API.images
+        }
+    },
+    template: `<slideshow-work  :images="images"/>`
+})
diff --git a/src/components/SlideshowWork/SlideshowWork.vue b/src/components/SlideshowWork/SlideshowWork.vue
new file mode 100644
index 0000000..a20acf5
--- /dev/null
+++ b/src/components/SlideshowWork/SlideshowWork.vue
@@ -0,0 +1,137 @@
+<template lang="html">
+    <slideshow
+        ref="slideshow"
+        class="slideshow-work"
+        :slides="images"
+        next-transition-name="fade"
+        @update:activeIndex="updateIndex"
+    >
+        <wp-image
+            v-if="slide.sourceUrl"
+            slot="slide"
+            slot-scope="{ slide }"
+            class="slide-image"
+            :image="slide"
+        />
+
+        <icon-arrow slot="nav-next" />
+        <icon-arrow slot="nav-prev" />
+
+        <div slot="after" class="dots">
+            <div
+                v-for="(dot, i) in images"
+                :class="['dot', { active: i == activeIndex }]"
+                @click="goTo(i)"
+            />
+        </div>
+    </slideshow>
+</template>
+
+<script>
+// Components
+import Slideshow from "@/components/global/Slideshow"
+import WpImage from "@/components/global/WpImage"
+import IconArrow from "@/assets/svgs/icon-arrow.svg"
+
+export default {
+    components: { Slideshow, WpImage, IconArrow },
+    props: {
+        images: {
+            type: Array,
+            default: () => []
+        }
+    },
+    data() {
+        return {
+            activeIndex: 0
+        }
+    },
+    computed: {},
+    methods: {
+        updateIndex(i) {
+            this.activeIndex = i
+        },
+        goTo(i) {
+            this.$refs.slideshow.goToSlide(i)
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.slideshow-work {
+    min-height: 300px;
+    height: var(--unit-100vh);
+    padding: 50px;
+    box-sizing: border-box;
+
+    /deep/ .nav {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        z-index: 100;
+        cursor: pointer;
+        background: none;
+        &:focus {
+            outline: none;
+        }
+
+        &.prev {
+            left: 40px;
+        }
+        &.next {
+            right: 40px;
+            svg {
+                transform: rotate(180deg);
+            }
+        }
+
+        svg path {
+            fill: var(--color-grey);
+            transition: fill 0.4s ease-in-out;
+        }
+    }
+
+    /deep/ .slide .slide-image {
+        top: 50%;
+        left: 50%;
+        padding: 100px;
+        box-sizing: border-box;
+        transform: translate(-50%, -50%);
+    }
+
+    .dots {
+        position: absolute;
+        bottom: 90px;
+        left: 50%;
+        z-index: 100;
+        transform: translateX(-50%);
+
+        .dot {
+            display: inline-block;
+            height: 8px;
+            width: 8px;
+            border-radius: 50%;
+            background-color: var(--color-orange);
+            opacity: 0.25;
+            margin: 5px;
+            transition: opacity 0.4s ease-in-out;
+            cursor: pointer;
+
+            &.active {
+                opacity: 1;
+            }
+        }
+    }
+
+    // Hovers
+    @media #{$has-hover} {
+        /deep/ .nav:hover svg path {
+            fill: var(--color-orange);
+        }
+        .dot:hover {
+            background-color: var(--color-orange);
+        }
+    }
+}
+</style>
diff --git a/src/components/global/Slideshow.vue b/src/components/global/Slideshow.vue
new file mode 100644
index 0000000..6a99bcd
--- /dev/null
+++ b/src/components/global/Slideshow.vue
@@ -0,0 +1,204 @@
+<template>
+    <div
+        class="slideshow"
+        tabindex="0"
+        @keyup.right="goToNext(true)"
+        @keyup.left="goToPrev(true)"
+        @swipe-right="goToPrev(true)"
+        @swipe-left="goToNext(true)"
+    >
+        <slot name="before" />
+
+        <transition
+            v-for="(slide, i) in slides"
+            :key="slide.id"
+            :name="transitionName"
+            :mode="transitionMode"
+        >
+            <div v-show="activeSlideLogic(i, internalIdx)" class="slide">
+                <slot :slide="slide" name="slide" />
+            </div>
+        </transition>
+
+        <button
+            v-if="$slots['nav-next']"
+            class="nav next"
+            @click="goToNext(true)"
+        >
+            <slot name="nav-next" />
+        </button>
+        <button
+            v-if="$slots['nav-prev']"
+            class="nav prev"
+            @click="goToPrev(true)"
+        >
+            <slot name="nav-prev" />
+        </button>
+
+        <slot name="after" :index="internalIdx" />
+    </div>
+</template>
+
+<script>
+// import Vue from "vue"
+import _clamp from "lodash/clamp"
+
+// When used in a project update path for import
+import { initSwipeEvents } from "@/utils/tools"
+
+export default {
+    props: {
+        slides: {
+            type: Array,
+            required: true
+        },
+        // Determines if slideshow autoprogresses or not
+        paused: {
+            type: Boolean,
+            default: false
+        },
+        // Sets the time before slideshow autoprogresses
+        timeout: {
+            type: Number,
+            default: 4000
+        },
+        // Sets Vue transition on incomming/outgoing slides. If not set slide-right/left is used
+        nextTransitionName: {
+            type: String,
+            default: "slide-left"
+        },
+        prevTransitionName: {
+            type: String,
+            default: "slide-right"
+        },
+        transitionMode: {
+            type: String,
+            default: ""
+        },
+        // Determines if slideshow should loop from last to first slide and vice-versa
+        wrap: {
+            type: Boolean,
+            default: true
+        },
+        // Determines active slide by array index
+        // Use .sync on prop to sync changes in variable with parent component
+        activeIndex: {
+            type: Number,
+            default: 0
+        },
+        // Function for determining which slides are visible
+        // Can be used to show next and prev slides along with the current slide
+        activeSlideLogic: {
+            type: Function,
+            default: (idx, internalIdx) => idx == internalIdx
+        },
+        swipeEvents: {
+            type: Boolean,
+            default: false
+        }
+    },
+    data() {
+        return {
+            timer: null,
+            transitionName: "",
+            internalIdx: 0
+        }
+    },
+    watch: {
+        internalIdx(newIdx) {
+            // Emit event to update activeIndex prop
+            this.$emit("update:activeIndex", newIdx)
+            // Emit slide change event
+            this.$emit("slide-change", newIdx)
+        }
+    },
+    created() {
+        this.internalIdx = this.activeIndex
+    },
+    mounted() {
+        // Pause slideshow when in a different tab
+        document.addEventListener(
+            "visibilitychange",
+            this.handleVisibilityChange
+        )
+
+        if (!this.paused) this.play()
+        if (this.swipeEvents) initSwipeEvents(this.$el)
+    },
+    destroyed() {
+        document.removeEventListener(
+            "visibilitychange",
+            this.handleVisibilityChange
+        )
+    },
+    methods: {
+        handleVisibilityChange() {
+            if (document.visibilityState === "hidden") {
+                this.pause()
+            } else {
+                this.play()
+            }
+        },
+        getLoopedIdx(idx) {
+            if (this.wrap)
+                return (idx + this.slides.length) % this.slides.length
+            else return _clamp(idx, 0, this.slides.length - 1)
+        },
+        goToNext(clearTimer = true) {
+            if (clearTimer) this.pause()
+            this.transitionName = this.nextTransitionName
+            this.$nextTick(
+                () =>
+                    (this.internalIdx = this.getLoopedIdx(this.internalIdx + 1))
+            )
+        },
+        goToPrev(clearTimer = true) {
+            if (clearTimer) this.pause()
+            this.transitionName = this.prevTransitionName
+            this.$nextTick(
+                () =>
+                    (this.internalIdx = this.getLoopedIdx(this.internalIdx - 1))
+            )
+        },
+        pause() {
+            clearInterval(this.timer)
+        },
+        play() {
+            clearInterval(this.timer)
+            this.timer = setInterval(() => this.goToNext(false), this.timeout)
+        },
+        goToSlide(slideIdx, clearTimer = true) {
+            if (clearTimer) this.pause()
+            if (slideIdx > this.internalIdx)
+                this.transitionName = this.nextTransitionName
+            else this.transitionName = this.prevTransitionName
+            this.$nextTick(
+                () => (this.internalIdx = this.getLoopedIdx(slideIdx))
+            )
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.slideshow {
+    position: relative;
+    overflow: hidden;
+    z-index: 0;
+    outline: none;
+
+    > .slide {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
+    .nav {
+        border: none;
+        padding: 0;
+        appearance: none;
+        z-index: 10;
+    }
+}
+</style>

From 8a1ccf730daa0b3440bf5fecae90b2152adb23ea Mon Sep 17 00:00:00 2001
From: dChiamp <derek.chiampas@gmail.com>
Date: Tue, 4 Aug 2020 16:03:51 -0700
Subject: [PATCH 2/2] adds responsive styles

---
 .../SlideshowWork/SlideshowWork.vue           | 48 ++++++++++++-------
 1 file changed, 32 insertions(+), 16 deletions(-)

diff --git a/src/components/SlideshowWork/SlideshowWork.vue b/src/components/SlideshowWork/SlideshowWork.vue
index a20acf5..7c02954 100644
--- a/src/components/SlideshowWork/SlideshowWork.vue
+++ b/src/components/SlideshowWork/SlideshowWork.vue
@@ -3,7 +3,7 @@
         ref="slideshow"
         class="slideshow-work"
         :slides="images"
-        next-transition-name="fade"
+        :swipe-events="true"
         @update:activeIndex="updateIndex"
     >
         <wp-image
@@ -12,6 +12,7 @@
             slot-scope="{ slide }"
             class="slide-image"
             :image="slide"
+            mode="fullbleed"
         />
 
         <icon-arrow slot="nav-next" />
@@ -62,8 +63,6 @@ export default {
 .slideshow-work {
     min-height: 300px;
     height: var(--unit-100vh);
-    padding: 50px;
-    box-sizing: border-box;
 
     /deep/ .nav {
         position: absolute;
@@ -77,35 +76,42 @@ export default {
         }
 
         &.prev {
-            left: 40px;
+            left: 30px;
         }
         &.next {
-            right: 40px;
+            right: 30px;
             svg {
                 transform: rotate(180deg);
             }
         }
 
-        svg path {
-            fill: var(--color-grey);
-            transition: fill 0.4s ease-in-out;
+        svg {
+            width: 30px;
+            height: auto;
+            path {
+                fill: var(--color-grey);
+                transition: fill 0.4s ease-in-out;
+            }
         }
     }
 
-    /deep/ .slide .slide-image {
-        top: 50%;
-        left: 50%;
-        padding: 100px;
-        box-sizing: border-box;
-        transform: translate(-50%, -50%);
+    /deep/ .slide {
+        width: unset;
+        height: unset;
+        top: 100px;
+        left: 100px;
+        right: 100px;
+        bottom: 100px;
     }
 
     .dots {
         position: absolute;
-        bottom: 90px;
+        bottom: 70px;
         left: 50%;
         z-index: 100;
         transform: translateX(-50%);
+        width: 100%;
+        text-align: center;
 
         .dot {
             display: inline-block;
@@ -130,7 +136,17 @@ export default {
             fill: var(--color-orange);
         }
         .dot:hover {
-            background-color: var(--color-orange);
+            opacity: 1;
+        }
+    }
+    // Breakpoints
+    @media #{$lt-phone} {
+        /deep/ .slide {
+            left: 20px;
+            right: 20px;
+        }
+        /deep/ .nav {
+            display: none;
         }
     }
 }