From f3eea2db7ef5cc575d4d03455929f8544dea6106 Mon Sep 17 00:00:00 2001
From: Andrew Bridge <andrew@andrewhbridge.co.uk>
Date: Tue, 20 Apr 2021 09:02:03 +0100
Subject: [PATCH 1/3] Rework HTML event capture to allow for mouseover capture
 too

---
 components/PostContent.vue   | 103 +++++++++++++++++++++++++----------
 components/ReviewPreview.vue |  28 ++++++++++
 layouts/default.vue          |   1 +
 nuxt.config.js               |   6 +-
 package.json                 |   1 +
 plugins/closest-polyfill.js  |  21 +++++++
 yarn.lock                    |   5 ++
 7 files changed, 135 insertions(+), 30 deletions(-)
 create mode 100644 components/ReviewPreview.vue
 create mode 100644 plugins/closest-polyfill.js

diff --git a/components/PostContent.vue b/components/PostContent.vue
index eb0ad64d..9d972cf8 100644
--- a/components/PostContent.vue
+++ b/components/PostContent.vue
@@ -1,60 +1,107 @@
 <template>
-    <span class="content" :class="{ decorate }" v-html="content" ref="contentParent" />
+    <span>
+        <span class="content"
+            :class="{ decorate }"
+            v-html="content"
+            ref="contentParent" />
+        <review-preview v-for="(preview, key) in previews" :key="key" :top="preview.top" :left="preview.left" :slug="preview.slug" />
+    </span>
 </template>
 
 <script lang="ts">
 import Vue, { PropType } from 'vue';
+import ReviewPreview from './ReviewPreview.vue';
 
 type PartialEvent = { preventDefault: Event['preventDefault'], target: Event['target'] };
 
+const getLink = (elm: unknown) => {
+    if (!(elm instanceof Element)) return null;
+    if (elm.nodeName !== 'A') {
+        elm = elm.closest('a');
+        if (elm === null) return null;
+    }
+    return elm as HTMLAnchorElement;
+};
+
+const getUrl = (url: string) => {
+    let host: string, pathname: string;
+    if (window.URL && window.URL.prototype && ('href' in window.URL.prototype)) {
+        ({host, pathname} = new URL(url));
+    } else {
+        // No version of IE supports an instance of URL
+        const uriRegex = /^(([^:\/?#]+):)?(\/\/([^\/?#]*))?([^?#]*)(\?([^#]*))?(#(.*))?/;
+        const result = url.match(uriRegex);
+        if (!result) throw Error(`${url} is not a valid URL.`);
+        host = result[4];
+        pathname = result[5];
+    }
+    const isInternal = host === window.location.host
+        || host.endsWith('.audioxide.com')
+        || url.startsWith('https://audioxide.com');
+    return { host, pathname, isInternal };
+}
+
 export default Vue.extend({
     name: 'PostContent',
+    components: { ReviewPreview },
     props: {
         content: { type: String, required: true },
         decorate: { type: Boolean, default: false },
     },
     data: () => ({
+        // TODO: Add handlers array that can be passed to removeEventListener
         handler: null as ((evt: PartialEvent) => void) | null,
+        // TODO: This might be the wrong approach as PostContent now controls display
+        previews: [] as ({ slug: string, top: number, left: number })[]
     }),
-    mounted() {
-        const parent = this.$refs.contentParent;
-        let preventDefault: PartialEvent['preventDefault'];
-        this.handler = (evt: PartialEvent) => {
-            preventDefault = preventDefault || evt.preventDefault.bind(evt);
-            const elm = evt.target;
-            if (!(elm instanceof Element)) return;
-            if (elm.nodeName !== 'A') {
-                if (parent === elm.parentNode || !this.handler) return;
-                this.handler({ preventDefault, target: elm.parentNode });
-                return;
-            }
+    methods: {
+        handleClick(evt: Event) {
+            const elm = getLink(evt.target);
+            if (elm === null) return;
             const anchorElement = elm as HTMLAnchorElement;
             const rawHref = anchorElement.getAttribute('href');
             const url = anchorElement.href;
-            let host: string, pathname: string;
-            if (window.URL && window.URL.prototype && ('href' in window.URL.prototype)) {
-                ({host, pathname} = new URL(url));
-            } else {
-                // No version of IE supports an instance of URL
-                const uriRegex = /^(([^:\/?#]+):)?(\/\/([^\/?#]*))?([^?#]*)(\?([^#]*))?(#(.*))?/;
-                const result = url.match(uriRegex);
-                if (!result) return;
-                host = result[4];
-                pathname = result[5];
-            }
+            const { pathname, isInternal } = getUrl(url);
             // Ensure anything on the current or audioxide domain passes except anchor
-            const isInternal = host === window.location.host
-                || host.endsWith('.audioxide.com')
-                || url.startsWith('https://audioxide.com');
             const isAnchor = rawHref && rawHref.startsWith('#');
             if (isInternal && !isAnchor) {
                 evt.preventDefault();
                 this.$router.push(pathname);
             }
+        },
+        handleHover(evt: Event) {
+            const elm = getLink(evt.target);
+            if (elm === null) return;
+            const anchorElement = elm as HTMLAnchorElement;
+            const rawHref = anchorElement.getAttribute('href');
+            const url = anchorElement.href;
+            const { pathname, isInternal } = getUrl(url);
+            // Ensure anything on the current or audioxide domain passes except current page
+            const isReview = pathname.startsWith('/reviews');
+            const isCurrent = pathname === window.location.pathname;
+            if (!isCurrent && isInternal && isReview) {
+                const { route } = this.$router.resolve(pathname);
+                if ('slug' in route.params) {
+                    console.log('gonna show a preview for ', route.params.slug);
+                    const { slug } = route.params;
+                    const { top, left } = elm.getBoundingClientRect();
+                    this.previews.push({ slug, top, left });
+                }
+            }
+        }
+    },
+    mounted() {
+        const parent = this.$refs.contentParent;
+        console.log(this.$router);
+        this.handler = (evt: PartialEvent) => {
+            // TODO: Test this change works
+            // TODO: Maybe don't need the portal vue? If we do, how does it work?
+            
         };
 
         if (parent instanceof Element) {
-            parent.addEventListener('click', this.handler, false);
+            parent.addEventListener('click', this.handleClick, false);
+            parent.addEventListener('mouseover', this.handleHover, false);
         }
     },
     beforeDestroy() {
diff --git a/components/ReviewPreview.vue b/components/ReviewPreview.vue
new file mode 100644
index 00000000..fa036ab0
--- /dev/null
+++ b/components/ReviewPreview.vue
@@ -0,0 +1,28 @@
+<template>
+    <portal to="global">
+        <div :style="{ top: top, top: left }">
+            This is a popup for {{slug}}
+        </div>
+    </portal>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+export default Vue.extend({
+    name: "ReviewPreview",
+    props: {
+        slug: String,
+        top: Number,
+        left: Number
+    },
+    created() {
+        console.log(this.slug, this.top, this.left);
+    }
+});
+</script>
+
+<style scoped>
+div {
+    position: absolute;
+}
+</style>
\ No newline at end of file
diff --git a/layouts/default.vue b/layouts/default.vue
index 447512fd..98169f3f 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -3,6 +3,7 @@
     <audioxide-header />
     <nuxt />
     <audioxide-footer />
+    <portal-target name="global" multiple />
   </div>
 </template>
 
diff --git a/nuxt.config.js b/nuxt.config.js
index 648dd75b..e3713453 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -129,7 +129,8 @@ export default {
    ** Plugins to load before mounting the App
    */
   plugins: [
-    { src: '~plugins/goatcounter.js', mode: 'client' }
+    { src: '~plugins/goatcounter.js', mode: 'client' },
+    { src: '~plugins/closest-polyfill.js', mode: 'client' }
   ],
   /*
    ** Nuxt.js dev-modules
@@ -145,7 +146,8 @@ export default {
   modules: [
     '@nuxtjs/pwa',
     // Doc: https://github.com/nuxt-community/dotenv-module
-    '@nuxtjs/dotenv'
+    '@nuxtjs/dotenv',
+    'portal-vue/nuxt'
   ],
   /*
    ** Build configuration
diff --git a/package.json b/package.json
index 2ddd3ad2..0f453e2b 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "fetch-ponyfill": "^7.0.0",
     "he": "^1.2.0",
     "nuxt": "^2.0.0",
+    "portal-vue": "^2.1.7",
     "sitemap-webpack-plugin": "^1.0.0",
     "wpapi": "^1.2.1"
   },
diff --git a/plugins/closest-polyfill.js b/plugins/closest-polyfill.js
new file mode 100644
index 00000000..996ab323
--- /dev/null
+++ b/plugins/closest-polyfill.js
@@ -0,0 +1,21 @@
+export default () => {
+    if (!Element.prototype.matches) {
+        Element.prototype.matches =
+        Element.prototype.msMatchesSelector ||
+        Element.prototype.webkitMatchesSelector;
+    }
+
+    if (!Element.prototype.closest) {
+        Element.prototype.closest = function(s) {
+            var el = this;
+
+            do {
+                if (Element.prototype.matches.call(el, s)) return el;
+                el = el.parentElement || el.parentNode;
+            } while (el !== null && el.nodeType === 1);
+            return null;
+        };
+    }
+
+    
+}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 95499dde..61ff3b79 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8297,6 +8297,11 @@ pn@^1.1.0:
   resolved "https://registry.yarnpkg.com/pn/-/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb"
   integrity sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==
 
+portal-vue@^2.1.7:
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/portal-vue/-/portal-vue-2.1.7.tgz#ea08069b25b640ca08a5b86f67c612f15f4e4ad4"
+  integrity sha512-+yCno2oB3xA7irTt0EU5Ezw22L2J51uKAacE/6hMPMoO/mx3h4rXFkkBkT4GFsMDv/vEe8TNKC3ujJJ0PTwb6g==
+
 posix-character-classes@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"

From 20ab8b1152108c312ccdf65194314c5c348db9d1 Mon Sep 17 00:00:00 2001
From: Andrew Bridge <andrew@andrewhbridge.co.uk>
Date: Mon, 26 Apr 2021 22:25:34 +0100
Subject: [PATCH 2/3] Further styling for preview card

---
 components/PostContent.vue   |  4 +--
 components/ReviewPreview.vue | 50 ++++++++++++++++++++++++++++++++----
 2 files changed, 47 insertions(+), 7 deletions(-)

diff --git a/components/PostContent.vue b/components/PostContent.vue
index 9d972cf8..b6b8485e 100644
--- a/components/PostContent.vue
+++ b/components/PostContent.vue
@@ -84,8 +84,8 @@ export default Vue.extend({
                 if ('slug' in route.params) {
                     console.log('gonna show a preview for ', route.params.slug);
                     const { slug } = route.params;
-                    const { top, left } = elm.getBoundingClientRect();
-                    this.previews.push({ slug, top, left });
+                    const { top, left, height } = elm.getBoundingClientRect();
+                    this.previews.push({ slug, top: top + height + window.scrollY, left: left + window.scrollX });
                 }
             }
         }
diff --git a/components/ReviewPreview.vue b/components/ReviewPreview.vue
index fa036ab0..5639e35b 100644
--- a/components/ReviewPreview.vue
+++ b/components/ReviewPreview.vue
@@ -1,7 +1,18 @@
 <template>
     <portal to="global">
-        <div :style="{ top: top, top: left }">
-            This is a popup for {{slug}}
+        <div class="wrapper" :style="{ top: `${top}px`, left: `${left}px`}">
+            <div class="info">
+                <h3>
+                    <span class="album">Debut</span>
+                    <span class="artist">Bjork</span>
+                </h3>
+                <p>‘Björk creates her own identity by combining seemingly contrasting genres and forming something entirely unique. This was the first sign of innovation in her career, breaking the mould of what it means to be a new, exciting artist.’</p>
+                <p class="score">
+                    <span class="given">25</span>
+                    <span class="total">30</span>
+                </p>
+            </div>
+            <img src="https://picsum.photos/300/300" />
         </div>
     </portal>
 </template>
@@ -17,12 +28,41 @@ export default Vue.extend({
     },
     created() {
         console.log(this.slug, this.top, this.left);
-    }
+    },
 });
 </script>
 
-<style scoped>
-div {
+<style lang="scss" scoped>
+@import "~assets/styles/variables";
+
+.wrapper {
     position: absolute;
+    background: white;
+    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.6);
+    border-radius: 0.5em;
+    display: flex;
+    max-width: 625px;
+    overflow: hidden;
+}
+
+.info {
+    @include site-content__body-text;
+    padding: 20px 37px;
+    font-family: $base-fontstack;
+    margin: 0;
+    h3, .score {
+        font-family: $heading-fontstack;
+        font-weight: 500;
+        font-size: 1.4em;
+    }
+    h3 {
+        margin-bottom: $site-content__spacer--large;
+        span {
+            display: block;
+            &.album  {
+                font-style: italic;
+            }
+        }
+    }
 }
 </style>
\ No newline at end of file

From 96d3345b20b09e4499401833df97e02d4efa2e05 Mon Sep 17 00:00:00 2001
From: Andrew Bridge <andrew@andrewhbridge.co.uk>
Date: Wed, 5 May 2021 19:31:53 +0100
Subject: [PATCH 3/3] Rework structure

---
 components/ReviewPreview.vue | 45 +++++++++++++++++++++++-------------
 1 file changed, 29 insertions(+), 16 deletions(-)

diff --git a/components/ReviewPreview.vue b/components/ReviewPreview.vue
index 5639e35b..0c7306ca 100644
--- a/components/ReviewPreview.vue
+++ b/components/ReviewPreview.vue
@@ -1,18 +1,18 @@
 <template>
     <portal to="global">
         <div class="wrapper" :style="{ top: `${top}px`, left: `${left}px`}">
-            <div class="info">
-                <h3>
-                    <span class="album">Debut</span>
-                    <span class="artist">Bjork</span>
-                </h3>
-                <p>‘Björk creates her own identity by combining seemingly contrasting genres and forming something entirely unique. This was the first sign of innovation in her career, breaking the mould of what it means to be a new, exciting artist.’</p>
-                <p class="score">
-                    <span class="given">25</span>
-                    <span class="total">30</span>
-                </p>
+            <h3>
+                <span class="album">Debut</span>
+                <span class="artist">Bjork</span>
+            </h3>
+            <p>‘Björk creates her own identity by combining seemingly contrasting genres and forming something entirely unique. This was the first sign of innovation in her career, breaking the mould of what it means to be a new, exciting artist.’</p>
+            <p class="score">
+                <span class="given">25</span>
+                <span class="total">30</span>
+            </p>
+            <div class="img">
+                <img src="https://picsum.photos/300/300" />
             </div>
-            <img src="https://picsum.photos/300/300" />
         </div>
     </portal>
 </template>
@@ -40,16 +40,13 @@ export default Vue.extend({
     background: white;
     box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.6);
     border-radius: 0.5em;
-    display: flex;
+    display: grid;
     max-width: 625px;
     overflow: hidden;
-}
-
-.info {
-    @include site-content__body-text;
     padding: 20px 37px;
     font-family: $base-fontstack;
     margin: 0;
+    flex-shrink: 1;
     h3, .score {
         font-family: $heading-fontstack;
         font-weight: 500;
@@ -64,5 +61,21 @@ export default Vue.extend({
             }
         }
     }
+    p {
+        @include site-content__body-text;
+    }
+}
+
+.img {
+    flex-shrink: 0;
+    width: 300px;
+    img {
+        width: 70%;
+    }
+    &::before {
+        content: '';
+        background-image: 'https://picsum.photos/300/300';
+        filter: blur(10px) contrast(1.5);
+    }
 }
 </style>
\ No newline at end of file