observer for article divs
parent
e4a65416c7
commit
b0280b0a41
|
|
@ -1,13 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Vite App</title>
|
||||
<title>RSS-Reader</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,22 +1,17 @@
|
|||
<script setup>
|
||||
import { RouterLink, RouterView } from 'vue-router'
|
||||
import HelloWorld from './components/HelloWorld.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header>
|
||||
<img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
|
||||
|
||||
<div class="wrapper">
|
||||
<HelloWorld msg="You did it!" />
|
||||
|
||||
<nav>
|
||||
<RouterLink to="/">Home</RouterLink>
|
||||
<RouterLink to="/about">About</RouterLink>
|
||||
<RouterLink to="/feeds">Feeds</RouterLink>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<!-- <header> -->
|
||||
<!-- <div class="wrapper"> -->
|
||||
<!-- <nav> -->
|
||||
<!-- <RouterLink to="/">Home</RouterLink> -->
|
||||
<!-- <RouterLink to="/about">About</RouterLink> -->
|
||||
<!-- <RouterLink to="/feeds">Feeds</RouterLink> -->
|
||||
<!-- </nav> -->
|
||||
<!-- </div> -->
|
||||
<!-- </header> -->
|
||||
|
||||
<RouterView />
|
||||
</template>
|
||||
|
|
@ -59,7 +54,6 @@ nav a:first-of-type {
|
|||
|
||||
@media (min-width: 1024px) {
|
||||
header {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
padding-right: calc(var(--section-gap) / 2);
|
||||
}
|
||||
|
|
@ -68,11 +62,6 @@ nav a:first-of-type {
|
|||
margin: 0 2rem 0 0;
|
||||
}
|
||||
|
||||
header .wrapper {
|
||||
display: flex;
|
||||
place-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
nav {
|
||||
text-align: left;
|
||||
|
|
|
|||
|
|
@ -31,15 +31,3 @@ a,
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
body {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
#app {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue