From 853acfda2c40b9bfd7abcdf3db4ba56cefa91e40 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Tue, 11 May 2021 23:38:47 -0400
Subject: [PATCH] Introduce Intersection component

---
 components/smart/Intersection.vue | 36 +++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 components/smart/Intersection.vue

diff --git a/components/smart/Intersection.vue b/components/smart/Intersection.vue
new file mode 100644
index 00000000..047015bb
--- /dev/null
+++ b/components/smart/Intersection.vue
@@ -0,0 +1,36 @@
+<template>
+  <div ref="container">
+    <slot />
+  </div>
+</template>
+<script lang="ts">
+/* 
+  Implements a wrapper listening to viewport intersections via
+  IntesectionObserver API
+
+  Events
+  ------
+  intersecting (entry: IntersectionObserverEntry) -> When the component is intersecting the viewport
+*/
+import Vue from "vue"
+
+export default Vue.extend({
+  data() {
+    return {
+      observer: null as IntersectionObserver | null,
+    }
+  },
+  mounted() {
+    this.observer = new IntersectionObserver(([entry]) => {
+      if (entry && entry.isIntersecting) {
+        this.$emit("intersecting", entry)
+      }
+    })
+
+    this.observer.observe(this.$refs.container as Element)
+  },
+  beforeDestroy() {
+    this.observer?.disconnect()
+  },
+})
+</script>