Nick Berens GridList Component Test

components/gallery/List.vue

@@ -0,0 +1,262 @@
+<template>
+    <div class="gallery-list">
+        <nav class="list-main">
+            <ul
+                v-for="(main) in preparedList"
+                class="list"
+            >
+                <li
+                    v-for="(item) in main.listItems"
+                    :key="item.id"
+                    class="item"
+                >
+                    <h3
+                        class="item-title"
+                        @mouseout="mouseOut()"
+                        @mouseover="mouseOver(item)"
+                    >
+                        <nuxt-link
+                            :to="item.uri"
+                            class="link"
+                        >
+                            {{ item.title }}
+                        </nuxt-link>
+                    </h3>
+                </li>
+            </ul>
+        </nav>
+
+        <transition
+            mode="out-in"
+            name="fade"
+        >
+            <wp-image
+                v-if="image"
+                :key="image.id"
+                :caption="caption"
+                :class="imageClasses"
+                :image="image"
+                mode="fullbleed"
+                @error-video="videoError"
+                @error-image="imageError"
+                @loaded-image="imageLoaded"
+                @loaded-video="videoLoaded"
+            />
+        </transition>
+    </div>
+</template>
+<script>
+
+
+
+import _shapeListData from  "~/utils/_shapeListData"
+
+export default {
+    name: "List",
+    props: {
+        items: {
+            type: Array,
+            default: () => []
+        },
+    },
+    data() {
+        return {
+            isImageLoaded: false,
+            isVideoLoaded: false,
+            isImageError: false,
+            isVideoError: false,
+            caption: '',
+            image: null
+        }
+    },
+    computed: {
+        imageClasses() {
+            return [
+                {
+                    'has-loaded-media': this.isImageLoaded || this.isVideoLoaded,
+                    'has-full-media-error': this.isVideoError && this.isImageError && !this.isImageLoaded && !this.isVideoLoaded,
+                }
+            ]
+
+        },
+        preparedList() {
+            let tempData = this.items
+            let {right, left} = _shapeListData(tempData, 3)
+            let trimmed = _shapeListData(left, 2)
+
+            return [
+                {
+                    listItems: trimmed.left
+                },
+                {
+                    listItems: trimmed.right
+                },
+                {
+                    listItems: right
+                }
+            ]
+        },
+
+    },
+    methods: {
+        videoLoaded() {
+            this.isVideoLoaded = true
+        },
+        imageLoaded() {
+            this.isImageLoaded = true
+        },
+        videoError() {
+            this.isVideoError = true
+        },
+        imageError() {
+            this.isImageError = true
+        },
+
+        mouseOver(item) {
+            this.caption = item.featuredImage.node.caption !== null ? item.featuredImage.node.caption : `Who the fuxt is ${item.title}?`
+            this.image = item.featuredImage.node
+        },
+        mouseOut() {
+            this.isVideoLoaded = false
+            this.isImageLoaded = false
+            this.isVideoError = false
+            this.isImageError = false
+            this.caption = ''
+            this.image = null
+        },
+    }
+
+}
+</script>
+
+
+<style lang="scss" scoped>
+
+.gallery-list {
+    position: relative;
+    z-index: 0;
+
+    max-width: 1280px;
+    min-height: var(--unit-100vh);
+    margin: 0 auto;
+    padding: 0 var(--unit-gap);
+    box-sizing: border-box;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    font-family: var(--font-primary);
+
+    .list {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+
+    .list-main {
+        position: relative;
+        z-index: 20;
+
+        max-width: 1180px;
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        margin: 0 auto;
+
+        display: flex;
+        justify-content: space-between;
+    }
+
+
+    .item-title {
+        display: inline-block;
+
+        margin: 0;
+    }
+
+    .link {
+        padding: 17px 0;
+
+        display: block;
+
+        font-size: 24px;
+        color: var(--color-yellow);
+    }
+
+    .wp-image {
+        position: absolute;
+        z-index: 10;
+
+        max-width: 960px;
+        width: 100%;
+        max-height: 540px;
+        height: 100%;
+        margin: auto;
+        overflow: hidden;
+        box-sizing: border-box;
+
+        &.has-loaded-media {
+            // don't hide media if video has 404 but item still has an image
+            /deep/ .media {
+                opacity: 1;
+            }
+        }
+
+        &.has-full-media-error {
+            // set overflow to visible in case the item name is long
+            overflow: visible;
+            // hide the sizer so the broken image icon isn't visible on 404 images
+            /deep/ .sizer {
+                visibility: hidden;
+            }
+
+            // display the caption
+            /deep/ .caption {
+                opacity: 1;
+            }
+        }
+    }
+
+    /deep/ .caption {
+        height: 100%;
+
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+
+        background: #212121;
+        text-align: right;
+        font-size: 8vw;
+        line-height: 1;
+        text-transform: uppercase;
+        color: #FFFFFFFF;
+        opacity: 0;
+
+        transition: opacity .4s ease-in-out;
+        transition-delay: .4s; // add slight delay so you don't see a flash of the caption on items that have image 404s but still have videos
+    }
+
+
+    @media #{$has-hover} {
+        .link {
+            &:hover {
+                color: var(--color-white);
+            }
+        }
+    }
+
+    @media #{$lt-phone} {
+        .list-main {
+            display: block;
+
+            text-align: center;
+        }
+
+        /deep/ .caption {
+            font-size: 18vw;
+        }
+    }
+}
+</style>