From efae28acee28dda4cafefc0a38dbbcf069256ab0 Mon Sep 17 00:00:00 2001
From: Kevin Miller <miller.kevin1988@gmail.com>
Date: Wed, 12 Jan 2022 18:19:57 -0500
Subject: [PATCH 1/2] Consolidated files to SFC, improved naming conventions

---
 zoomOnHover.vue | 191 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 191 insertions(+)
 create mode 100644 zoomOnHover.vue

diff --git a/zoomOnHover.vue b/zoomOnHover.vue
new file mode 100644
index 0000000..fb5224e
--- /dev/null
+++ b/zoomOnHover.vue
@@ -0,0 +1,191 @@
+<template>
+    <div :class="['zoom-on-hover', {zoomed}]" @touchstart="touchzoom"
+    @mousemove="move" @mouseenter="zoom" @mouseleave="unzoom">
+        <img class="normal" ref="normal" :src="src" @load="load"/>
+        <img class="zoom" ref="zoom" :src="imgZoom || src" @load="loadZoom"/>
+    </div>
+</template>
+
+<script>
+// this component displays an image with the width of the parent element and on hover shows
+// the full image or a scaled image in the image area.
+// features: activate/deactivate method, active/inactive on load, scale parameter, separate zoom image,
+// event when all images loaded, event when images resized (responsive css, etc)
+// https://github.com/Intera/vue-zoom-on-hover
+
+    export default {
+        props: {
+            src: {
+                type: String,
+                required: true
+            },
+
+            imgZoom: {
+                type: String
+            },
+
+            scale: {
+                type: Number,
+                default: 3
+            },
+
+            disabled: {
+                type: Boolean,
+                default: false,
+            }
+        },
+
+        data() {
+            return {
+                resizeCheckInterval: null,
+                zoomed: false,
+                loaded: false,
+                loadedZoom: false
+            }
+        },
+
+        mounted() {
+            this.initEventResized();
+            this.handleScaleChange();
+        },
+
+        beforeDestroy() {
+            this.resizeCheckInterval && clearInterval(this.resizeCheckInterval);
+        },
+
+        computed: {
+            pageOffset() {
+                // -> {x: number, y: number}
+                // get the left and top offset of a dom block element
+                const rect = this.$el.getBoundingClientRect(),
+                    scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
+                    scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+
+                return {
+                    y: rect.top + scrollTop,
+                    x: rect.left + scrollLeft
+                }
+            }
+        },
+
+        watch: {
+            src() {
+                this.loaded = false;
+            },
+
+            scale: {
+                immediate: true,
+                handler() {
+                    this.handleScaleChange();
+                }
+            }
+        },
+
+        methods: {
+            handleScaleChange() {
+                if (this.$refs?.zoom) {
+                    this.$refs.zoom.style.transform = "scale(" + this.scale + ")"
+                }
+            },
+
+            touchzoom(event) {
+                if (this.disabled) {
+                    return;
+                }
+
+                this.move(event)
+                this.zoomed = !this.zoomed
+            },
+
+            zoom() {
+                if (!this.disabled) {
+                    this.zoomed = true;
+                }
+            },
+
+            unzoom() {
+                if (!this.disabled) {
+                    this.zoomed = false;
+                }
+            },
+
+            move(event) {
+                if (this.disabled || !this.zoomed) {
+                    return;
+                }
+
+                const offset = this.pageOffset;
+                const zoom = this.$refs.zoom;
+                const normal = this.$refs.normal;
+                const relativeX = event.clientX - offset.x + window.pageXOffset;
+                const relativeY = event.clientY - offset.y + window.pageYOffset;
+                const normalFactorX = relativeX / normal.offsetWidth;
+                const normalFactorY = relativeY / normal.offsetHeight;
+                const x = normalFactorX * (zoom.offsetWidth * this.scale - normal.offsetWidth);
+                const y = normalFactorY * (zoom.offsetHeight * this.scale - normal.offsetHeight);
+                zoom.style.left = -x + "px";
+                zoom.style.top = -y + "px";
+            },
+
+            load(e) {
+                this.loaded = true;
+                this.checkLoaded(e);
+            },
+
+            loadZoom(e) {
+                this.loadedZoom = true;
+                this.checkLoaded(e);
+            },
+
+            checkLoaded(e) {
+                if (this.loaded && this.loadedZoom) {
+                    this.$emit("load", e);
+                }
+            },
+
+            initEventResized() {
+                const normal = this.$refs.normal;
+                let previousWidth = normal.offsetWidth;
+                let previousHeight = normal.offsetHeight;
+
+                this.resizeCheckInterval = setInterval(() => {
+                    if ((previousWidth != normal.offsetWidth) || (previousHeight != normal.offsetHeight)) {
+                        previousWidth = normal.offsetWidth
+                        previousHeight = normal.offsetHeight
+                        this.$emit("resized", {
+                            width: normal.width,
+                            height: normal.height,
+                            fullWidth: normal.naturalWidth,
+                            fullHeight: normal.naturalHeight
+                        })
+                    }
+                }, 1000)
+            },
+        },
+    }
+</script>
+
+<style scoped>
+    .zoom-on-hover {
+        position: relative;
+        overflow: hidden;
+    }
+
+    .zoom-on-hover .normal {
+        width: 100%;
+    }
+
+    .zoom-on-hover .zoom {
+        position: absolute;
+        opacity: 0;
+        transform-origin: top left;
+    }
+
+    .zoom-on-hover.zoomed .zoom {
+        opacity: 1;
+    }
+
+    .zoom-on-hover.zoomed .normal {
+        opacity: 0;
+    }
+</style>
\ No newline at end of file

From d0435215335937b4dec5f2ce586325f4ad7927aa Mon Sep 17 00:00:00 2001
From: Kevin Miller <miller.kevin1988@gmail.com>
Date: Thu, 13 Jan 2022 20:29:27 -0500
Subject: [PATCH 2/2] Fixed disappearing images

---
 zoomOnHover.vue | 381 ++++++++++++++++++++++++++----------------------
 1 file changed, 203 insertions(+), 178 deletions(-)

diff --git a/zoomOnHover.vue b/zoomOnHover.vue
index fb5224e..c86a7af 100644
--- a/zoomOnHover.vue
+++ b/zoomOnHover.vue
@@ -1,9 +1,20 @@
 <template>
-    <div :class="['zoom-on-hover', {zoomed}]" @touchstart="touchzoom"
-    @mousemove="move" @mouseenter="zoom" @mouseleave="unzoom">
-        <img class="normal" ref="normal" :src="src" @load="load"/>
-        <img class="zoom" ref="zoom" :src="imgZoom || src" @load="loadZoom"/>
-    </div>
+  <div
+    :class="['zoom-on-hover', { zoomed }]"
+    @touchstart="touchzoom"
+    @mousemove="move"
+    @mouseenter="zoom"
+    @mouseleave="unzoom"
+  >
+    <img class="normal" ref="normal" :src="src" @load="load" />
+    <img
+      class="zoom"
+      ref="zoom"
+      :src="imgZoom || src"
+      @load="loadZoom"
+      :style="{ left: zoomLeft, top: zoomTop }"
+    />
+  </div>
 </template>
 
 <script>
@@ -13,179 +24,193 @@
 // event when all images loaded, event when images resized (responsive css, etc)
 // https://github.com/Intera/vue-zoom-on-hover
 
-    export default {
-        props: {
-            src: {
-                type: String,
-                required: true
-            },
-
-            imgZoom: {
-                type: String
-            },
-
-            scale: {
-                type: Number,
-                default: 3
-            },
-
-            disabled: {
-                type: Boolean,
-                default: false,
-            }
-        },
-
-        data() {
-            return {
-                resizeCheckInterval: null,
-                zoomed: false,
-                loaded: false,
-                loadedZoom: false
-            }
-        },
-
-        mounted() {
-            this.initEventResized();
-            this.handleScaleChange();
-        },
-
-        beforeDestroy() {
-            this.resizeCheckInterval && clearInterval(this.resizeCheckInterval);
-        },
-
-        computed: {
-            pageOffset() {
-                // -> {x: number, y: number}
-                // get the left and top offset of a dom block element
-                const rect = this.$el.getBoundingClientRect(),
-                    scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
-                    scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-
-                return {
-                    y: rect.top + scrollTop,
-                    x: rect.left + scrollLeft
-                }
-            }
-        },
-
-        watch: {
-            src() {
-                this.loaded = false;
-            },
-
-            scale: {
-                immediate: true,
-                handler() {
-                    this.handleScaleChange();
-                }
-            }
-        },
-
-        methods: {
-            handleScaleChange() {
-                if (this.$refs?.zoom) {
-                    this.$refs.zoom.style.transform = "scale(" + this.scale + ")"
-                }
-            },
-
-            touchzoom(event) {
-                if (this.disabled) {
-                    return;
-                }
-
-                this.move(event)
-                this.zoomed = !this.zoomed
-            },
-
-            zoom() {
-                if (!this.disabled) {
-                    this.zoomed = true;
-                }
-            },
-
-            unzoom() {
-                if (!this.disabled) {
-                    this.zoomed = false;
-                }
-            },
-
-            move(event) {
-                if (this.disabled || !this.zoomed) {
-                    return;
-                }
-
-                const offset = this.pageOffset;
-                const zoom = this.$refs.zoom;
-                const normal = this.$refs.normal;
-                const relativeX = event.clientX - offset.x + window.pageXOffset;
-                const relativeY = event.clientY - offset.y + window.pageYOffset;
-                const normalFactorX = relativeX / normal.offsetWidth;
-                const normalFactorY = relativeY / normal.offsetHeight;
-                const x = normalFactorX * (zoom.offsetWidth * this.scale - normal.offsetWidth);
-                const y = normalFactorY * (zoom.offsetHeight * this.scale - normal.offsetHeight);
-                zoom.style.left = -x + "px";
-                zoom.style.top = -y + "px";
-            },
-
-            load(e) {
-                this.loaded = true;
-                this.checkLoaded(e);
-            },
-
-            loadZoom(e) {
-                this.loadedZoom = true;
-                this.checkLoaded(e);
-            },
-
-            checkLoaded(e) {
-                if (this.loaded && this.loadedZoom) {
-                    this.$emit("load", e);
-                }
-            },
-
-            initEventResized() {
-                const normal = this.$refs.normal;
-                let previousWidth = normal.offsetWidth;
-                let previousHeight = normal.offsetHeight;
-
-                this.resizeCheckInterval = setInterval(() => {
-                    if ((previousWidth != normal.offsetWidth) || (previousHeight != normal.offsetHeight)) {
-                        previousWidth = normal.offsetWidth
-                        previousHeight = normal.offsetHeight
-                        this.$emit("resized", {
-                            width: normal.width,
-                            height: normal.height,
-                            fullWidth: normal.naturalWidth,
-                            fullHeight: normal.naturalHeight
-                        })
-                    }
-                }, 1000)
-            },
-        },
-    }
+export default {
+  props: {
+    src: {
+      type: String,
+      required: true,
+    },
+
+    imgZoom: {
+      type: String,
+    },
+
+    scale: {
+      type: Number,
+      default: 3,
+    },
+
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  data() {
+    return {
+      resizeCheckInterval: null,
+      zoomed: false,
+      loaded: false,
+      loadedZoom: false,
+      zoomLeft: "0px",
+      zoomTop: "0px",
+    };
+  },
+
+  mounted() {
+    this.initEventResized();
+    this.handleScaleChange();
+  },
+
+  beforeDestroy() {
+    this.resizeCheckInterval && clearInterval(this.resizeCheckInterval);
+  },
+
+  computed: {
+    pageOffset() {
+      // -> {x: number, y: number}
+      // get the left and top offset of a dom block element
+      const rect = this.$el.getBoundingClientRect(),
+        scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
+        scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+
+      return {
+        y: rect.top + scrollTop,
+        x: rect.left + scrollLeft,
+      };
+    },
+
+    imagesLoaded() {
+      return this.loaded && this.loadedZoom;
+    },
+  },
+
+  watch: {
+    src() {
+      this.loaded = false;
+      this.loadedZoom = false;
+      this.zoomed = false;
+    },
+
+    scale: {
+      immediate: true,
+      handler() {
+        this.handleScaleChange();
+      },
+    },
+  },
+
+  methods: {
+    handleScaleChange() {
+      if (this.$refs?.zoom) {
+        this.$refs.zoom.style.transform = "scale(" + this.scale + ")";
+      }
+    },
+
+    touchzoom(event) {
+      if (!this.imagesLoaded || this.disabled) {
+        return;
+      }
+
+      this.move(event);
+      this.zoomed = !this.zoomed;
+    },
+
+    zoom() {
+      if (this.imagesLoaded && !this.disabled) {
+        this.zoomed = true;
+      }
+    },
+
+    unzoom() {
+      if (this.imagesLoaded && !this.disabled) {
+        this.zoomed = false;
+      }
+    },
+
+    move(event) {
+      const zoom = this.$refs.zoom;
+      const normal = this.$refs.normal;
+
+      if (this.disabled || !this.zoomed || !zoom || !normal) {
+        return;
+      }
+
+      const offset = this.pageOffset;
+      const relativeX = event.clientX - offset.x + window.pageXOffset;
+      const relativeY = event.clientY - offset.y + window.pageYOffset;
+      const normalFactorX = relativeX / normal.offsetWidth;
+      const normalFactorY = relativeY / normal.offsetHeight;
+      const x =
+        normalFactorX * (zoom.offsetWidth * this.scale - normal.offsetWidth);
+      const y =
+        normalFactorY * (zoom.offsetHeight * this.scale - normal.offsetHeight);
+      this.zoomLeft = -x + "px";
+      this.zoomTop = -y + "px";
+    },
+
+    load(e) {
+      this.loaded = true;
+      this.checkLoaded(e);
+    },
+
+    loadZoom(e) {
+      this.loadedZoom = true;
+      this.checkLoaded(e);
+    },
+
+    checkLoaded(e) {
+      if (this.imagesLoaded) {
+        this.$emit("load", e);
+      }
+    },
+
+    initEventResized() {
+      const normal = this.$refs.normal;
+      let previousWidth = normal.offsetWidth;
+      let previousHeight = normal.offsetHeight;
+
+      this.resizeCheckInterval = setInterval(() => {
+        if (
+          previousWidth != normal.offsetWidth ||
+          previousHeight != normal.offsetHeight
+        ) {
+          previousWidth = normal.offsetWidth;
+          previousHeight = normal.offsetHeight;
+          this.$emit("resized", {
+            width: normal.width,
+            height: normal.height,
+            fullWidth: normal.naturalWidth,
+            fullHeight: normal.naturalHeight,
+          });
+        }
+      }, 1000);
+    },
+  },
+};
 </script>
 
 <style scoped>
-    .zoom-on-hover {
-        position: relative;
-        overflow: hidden;
-    }
-
-    .zoom-on-hover .normal {
-        width: 100%;
-    }
-
-    .zoom-on-hover .zoom {
-        position: absolute;
-        opacity: 0;
-        transform-origin: top left;
-    }
-
-    .zoom-on-hover.zoomed .zoom {
-        opacity: 1;
-    }
-
-    .zoom-on-hover.zoomed .normal {
-        opacity: 0;
-    }
-</style>
\ No newline at end of file
+.zoom-on-hover {
+  position: relative;
+  overflow: hidden;
+}
+
+.zoom-on-hover .normal {
+  width: 100%;
+}
+
+.zoom-on-hover .zoom {
+  position: absolute;
+  opacity: 0;
+  transform-origin: top left;
+}
+
+.zoom-on-hover.zoomed .zoom {
+  opacity: 1;
+}
+
+.zoom-on-hover.zoomed .normal {
+  opacity: 0;
+}
+</style>