From 9a453f2e37cead7737ef962855c63029b3540b1a Mon Sep 17 00:00:00 2001
From: Violet Rose <VioletRose@users.noreply.github.com>
Date: Sat, 3 Oct 2020 13:30:09 -0700
Subject: [PATCH] Creating ft-intersection-observer component (#571)

* Created ft-intersection-observer component.

* Improved first run logic.
---
 .../ft-intersection-observer.js               | 54 +++++++++++++++++++
 .../ft-intersection-observer.vue              |  5 ++
 2 files changed, 59 insertions(+)
 create mode 100644 src/renderer/components/ft-intersection-observer/ft-intersection-observer.js
 create mode 100644 src/renderer/components/ft-intersection-observer/ft-intersection-observer.vue

diff --git a/src/renderer/components/ft-intersection-observer/ft-intersection-observer.js b/src/renderer/components/ft-intersection-observer/ft-intersection-observer.js
new file mode 100644
index 00000000..80183c66
--- /dev/null
+++ b/src/renderer/components/ft-intersection-observer/ft-intersection-observer.js
@@ -0,0 +1,54 @@
+import Vue from 'vue'
+
+export default Vue.extend({
+  name: 'FtIntersectionObserver',
+  props: {
+    checkOnMount: {
+      type: Boolean,
+      default: false
+    },
+    margin: {
+      type: String,
+      default: '0px 0px 0px 0px'
+    },
+    observeParent: {
+      type: Boolean,
+      default: false
+    },
+    threshold: {
+      type: Number,
+      default: 1
+    }
+  },
+  data() {
+    const observer = new IntersectionObserver(this.handleIntersection, {
+      rootMargin: this.margin,
+      threshold: this.threshold
+    })
+    const runOnce = false
+
+    return {
+      observer,
+      runOnce
+    }
+  },
+  mounted() {
+    this.observer.observe(this.observeParent ? this.$refs.elem.parentElement : this.$refs.elem)
+  },
+  beforeDestroy() {
+    this.observer.disconnect()
+  },
+  methods: {
+    handleIntersection(entries) {
+      if (!this.runOnce) {
+        this.runOnce = true
+
+        if (!this.checkOnMount) {
+          return
+        }
+      }
+
+      this.$emit(entries[0].isIntersecting ? 'intersected' : 'unintersected')
+    }
+  }
+})
diff --git a/src/renderer/components/ft-intersection-observer/ft-intersection-observer.vue b/src/renderer/components/ft-intersection-observer/ft-intersection-observer.vue
new file mode 100644
index 00000000..bb02f5a0
--- /dev/null
+++ b/src/renderer/components/ft-intersection-observer/ft-intersection-observer.vue
@@ -0,0 +1,5 @@
+<template>
+  <div ref="elem" />
+</template>
+
+<script src="./ft-intersection-observer.js" />