observer for article divs

vue/src/components/RssFeeds.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, nextTick } from 'vue';
 import axios from 'axios';
 import { Readability } from '@mozilla/readability';
 
@@ -27,16 +27,6 @@ async function getReadable(feed, index) {
     console.error('Error fetching data:', error)
     showMessageForXSeconds(error, 5)
   }
-  // try {
-  //   const response = await fetch(feed.url);
-  //   const html = await response.text();
-  //   const doc = new DOMParser().parseFromString(html, 'text/html');
-  //   const article = new Readability(doc).parse();
-  //   feeds.value[index].content = article.content;
-  // } catch (error) {
-  //   console.error(error);
-  //   showMessageForXSeconds(error, 5);
-  // }
 }
 
 function showMessageForXSeconds(text, seconds) {
@@ -60,10 +50,18 @@ const fetchData = async () => {
       }
     });
     feeds.value = response.data.feeds[0].items;
+    await nextTick();
+    setupIntersectionObserver();
   } catch (error) {
     console.error('Error fetching data:', error)
     showMessageForXSeconds(error, 5)
   }
+  //  const observedDivs = document.querySelectorAll(".observe");
+  //  if (observedDivs.length > 0) {
+  //    observedDivs.forEach(observedDiv => {
+  //      observer.observe(observedDiv);
+  //    });
+  //  }
 };
 
 async function sync() {
@@ -88,20 +86,53 @@ async function sync() {
   }
 }
 
+let observer; // Declare observer outside the setup function
+
+function setupIntersectionObserver() {
+  observer = new IntersectionObserver(handleIntersection, {
+    root: null, // Use the viewport as the root
+    rootMargin: '0px',
+    threshold: 0.5, // Fire the callback when at least 50% of the element is visible
+  });
+
+  const observedDivs = document.querySelectorAll(".observe");
+  if (observedDivs.length > 0) {
+    observedDivs.forEach(observedDiv => {
+      observer.observe(observedDiv);
+    });
+  }
+}
+
+function handleIntersection(entries) {
+  // The callback function for when the target element enters or exits the viewport
+  entries.forEach(entry => {
+    if (entry.isIntersecting) {
+      // Element is in the viewport
+      console.log('Element is in sight');
+    } else {
+      // Element is out of sight
+      console.log('Element is out of sight');
+
+      // You can call your function here
+
+    }
+  });
+}
+
+
 onMounted(() => {
   fetchData();
 });
-
 </script>
 
 <template>
   <div>
     <h1>Feeds</h1> <button @click="sync">{{ buttonText }}</button>
     <div v-if="showMessage" class="message">{{ message }}</div>
-    <div id='aricle'>
+    <div id='article' class='article'>
       <p v-if="feeds.length == 0">No unread articles.</p>
       <template v-for="(feed, index) in feeds">
-        <div v-bind:id="'article_' + index">
+        <div v-bind:id="'article_' + index" class="observe">
           <h2 @click="getReadable(feed, index)">{{ feed.title }}</h2>
           <p v-html='feed.content'></p>
         </div>