observer frontend

vue/src/components/RssFeeds.vue

@@ -56,12 +56,6 @@ const fetchData = async () => {
     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() {
@@ -107,14 +101,14 @@ 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
+      console.log('Element is out of sight ' + entry.intersectionRect.y);
+      if (entry.intersectionRect.y == 0) {
+        console.log(feeds.value[entry.target.id]);
 
+      }
     }
   });
 }
@@ -132,9 +126,9 @@ onMounted(() => {
     <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" class="observe">
-          <h2 @click="getReadable(feed, index)">{{ feed.title }}</h2>
-          <p v-html='feed.content'></p>
+        <div v-bind:id="index" class="observe">
+          <h2 @click="getReadable(feed, index)" class="feed-title">{{ feed.title }}</h2>
+          <p class="feed-content" v-html='feed.content'></p>
         </div>
       </template>
     </div>