mathias
/
rss-reader
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

observer for article divs

master
Mathias Rothenhaeusler 2023-10-28 22:43:29 +02:00
parent e4a65416c7
commit b0280b0a41
4 changed files with 67 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
vue/index.html
View File

@ -1,13 +1,16 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="UTF-8"> <head>
<link rel="icon" href="/favicon.ico"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" href="/favicon.ico">
<title>Vite App</title> <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head> <title>RSS-Reader</title>
<body> </head>
<div id="app"></div>
<script type="module" src="/src/main.js"></script> <body>
</body> <div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html> </html>

29
vue/src/App.vue
View File

@ -1,22 +1,17 @@
<script setup> <script setup>
import { RouterLink, RouterView } from 'vue-router' import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
</script> </script>
<template> <template>
<header> <!-- <header> -->
<img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" /> <!-- <div class="wrapper"> -->
<!-- <nav> -->
<div class="wrapper"> <!-- <RouterLink to="/">Home</RouterLink> -->
<HelloWorld msg="You did it!" /> <!-- <RouterLink to="/about">About</RouterLink> -->
<!-- <RouterLink to="/feeds">Feeds</RouterLink> -->
<nav> <!-- </nav> -->
<RouterLink to="/">Home</RouterLink> <!-- </div> -->
<RouterLink to="/about">About</RouterLink> <!-- </header> -->
<RouterLink to="/feeds">Feeds</RouterLink>
</nav>
</div>
</header>
<RouterView /> <RouterView />
</template> </template>
@ -59,7 +54,6 @@ nav a:first-of-type {
@media (min-width: 1024px) { @media (min-width: 1024px) {
header { header {
display: flex;
place-items: center; place-items: center;
padding-right: calc(var(--section-gap) / 2); padding-right: calc(var(--section-gap) / 2);
} }
@ -68,11 +62,6 @@ nav a:first-of-type {
margin: 0 2rem 0 0; margin: 0 2rem 0 0;
} }
header .wrapper {
display: flex;
place-items: flex-start;
flex-wrap: wrap;
}
nav { nav {
text-align: left; text-align: left;

12
vue/src/assets/main.css
View File

@ -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;
}
}

59
vue/src/components/RssFeeds.vue
View File

@ -1,5 +1,5 @@
<script setup> <script setup>
import { ref, onMounted } from 'vue'; import { ref, onMounted, nextTick } from 'vue';
import axios from 'axios'; import axios from 'axios';
import { Readability } from '@mozilla/readability'; import { Readability } from '@mozilla/readability';
@ -27,16 +27,6 @@ async function getReadable(feed, index) {
console.error('Error fetching data:', error) console.error('Error fetching data:', error)
showMessageForXSeconds(error, 5) 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) { function showMessageForXSeconds(text, seconds) {
@ -60,10 +50,18 @@ const fetchData = async () => {
} }
}); });
feeds.value = response.data.feeds[0].items; feeds.value = response.data.feeds[0].items;
await nextTick();
setupIntersectionObserver();
} catch (error) { } catch (error) {
console.error('Error fetching data:', error) console.error('Error fetching data:', error)
showMessageForXSeconds(error, 5) showMessageForXSeconds(error, 5)
} }
// const observedDivs = document.querySelectorAll(".observe");
// if (observedDivs.length > 0) {
// observedDivs.forEach(observedDiv => {
// observer.observe(observedDiv);
// });
// }
}; };
async function sync() { 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(() => { onMounted(() => {
fetchData(); fetchData();
}); });
</script> </script>
<template> <template>
<div> <div>
<h1>Feeds</h1> <button @click="sync">{{ buttonText }}</button> <h1>Feeds</h1> <button @click="sync">{{ buttonText }}</button>
<div v-if="showMessage" class="message">{{ message }}</div> <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> <p v-if="feeds.length == 0">No unread articles.</p>
<template v-for="(feed, index) in feeds"> <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> <h2 @click="getReadable(feed, index)">{{ feed.title }}</h2>
<p v-html='feed.content'></p> <p v-html='feed.content'></p>
</div> </div>