@@ -200,6 +214,10 @@ export default {
return {
// appList,
query: '',
+ observer: null,
+ seenItems: Object.fromEntries(this.appList.map(app => {
+ return [app.slug, false]
+ })),
// results: [],
titleStartsWithResults: [],
titleContainsResults: [],
@@ -223,6 +241,9 @@ export default {
return this.query.length > 0
},
},
+ beforeDestroy() {
+ this.observer.disconnect()
+ },
// watch: {
// 'store.mode': function (newMode) {
// // 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: {
// Search priorities
titleStartsWith (query, app) {
@@ -293,6 +326,21 @@ export default {
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) {
// Clear any results from before
this.titleStartsWithResults = []