Buck9195/doesitarm
1
0
Fork 0
mirror of https://github.com/ThatGuySam/doesitarm.git synced 2026-05-18 06:44:46 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Add observer to search rows

Browse source
This commit is contained in:
Sam Carlton 2020-11-21 17:33:18 -06:00
parent f5319bc8d8
commit 4903eb17d3
1 changed files with 54 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

60
components/search.vue
View file

@ -43,6 +43,8 @@
</defs> </defs>
</svg> </svg>
<!-- seenItems: {{ seenItems }} -->
<ul class="results-container rounded-lg border border-gray-700 divide-y divide-gray-700 bg-gradient-to-br from-darker to-dark neumorphic-shadow-outer px-5"> <ul class="results-container rounded-lg border border-gray-700 divide-y divide-gray-700 bg-gradient-to-br from-darker to-dark neumorphic-shadow-outer px-5">
<li <li
v-if="results.length === 0" v-if="results.length === 0"
@ -53,6 +55,8 @@
<li <li
v-for="(app, i) in results" v-for="(app, i) in results"
:key="`${app.slug}-${i}`" :key="`${app.slug}-${i}`"
:ref="`${app.slug}-row`"
:data-app-slug="app.slug"
class="relative" class="relative"
> >
<a <a
@ -75,10 +79,20 @@
<!-- app.lastUpdated: {{ app.lastUpdated }} --> <!-- app.lastUpdated: {{ app.lastUpdated }} -->
<client-only <client-only
v-if="app.lastUpdated" v-if="app.lastUpdated"
placeholder="Loading..."
> >
<small class="text-xs opacity-50"> <small
<RelativeTime :timestamp="app.lastUpdated.timestamp" /> class="text-xs opacity-50"
>
<RelativeTime
:timestamp="app.lastUpdated.timestamp"
class="text-xs opacity-50"
/>
</small>
<small
slot="placeholder"
class="text-xs opacity-50"
>
⏳
</small> </small>
</client-only> </client-only>
</div> </div>
@ -91,7 +105,7 @@
</svg> </svg>
</a> </a>
<client-only> <client-only v-if="seenItems[app.slug]">
<div <div
class="search-item-options relative md:absolute md:inset-0 w-full pointer-events-none" class="search-item-options relative md:absolute md:inset-0 w-full pointer-events-none"
> >
@ -200,6 +214,10 @@ export default {
return { return {
// appList, // appList,
query: '', query: '',
observer: null,
seenItems: Object.fromEntries(this.appList.map(app => {
return [app.slug, false]
})),
// results: [], // results: [],
titleStartsWithResults: [], titleStartsWithResults: [],
titleContainsResults: [], titleContainsResults: [],
@ -223,6 +241,9 @@ export default {
return this.query.length > 0 return this.query.length > 0
}, },
}, },
beforeDestroy() {
this.observer.disconnect()
},
// watch: { // watch: {
// 'store.mode': function (newMode) { // 'store.mode': function (newMode) {
// // If we're showing the search // // If we're showing the search
@ -236,8 +257,20 @@ export default {
// } // }
// } // }
// }, // },
// mounted () { mounted () {
// }, // console.log(this.$el)
this.observer = new IntersectionObserver(this.onElementObserved, {
// root: this.$el,
threshold: 1.0,
})
// Start observing all search rows
this.appList.forEach(app => {
// console.log('this.$refs[`${app.slug}-row`]', this.$refs[`${app.slug}-row`][0])
this.observer.observe(this.$refs[`${app.slug}-row`][0])
})
},
methods: { methods: {
// Search priorities // Search priorities
titleStartsWith (query, app) { titleStartsWith (query, app) {
@ -293,6 +326,21 @@ export default {
behavior: 'smooth' behavior: 'smooth'
}) })
}, },
onElementObserved(entries) {
entries.forEach(({ target, isIntersecting }) => {
if (!isIntersecting) {
return
}
this.observer.unobserve(target)
// console.log('Observed target', target)
const appSlug = target.getAttribute('data-app-slug')
this.seenItems[appSlug] = true
});
},
queryResults (rawQuery) { queryResults (rawQuery) {
// Clear any results from before // Clear any results from before
this.titleStartsWithResults = [] this.titleStartsWithResults = []