Quellcode durchsuchen

:poop: trying really really old intersecton handler

tags/0.9.0
J vor 4 Jahren
Ursprung
Commit
aac1aff00a
1 geänderte Dateien mit 17 neuen und 19 gelöschten Zeilen
  1. 17
    19
      vue-theme/src/pages/list.vue

+ 17
- 19
vue-theme/src/pages/list.vue Datei anzeigen

18
             section(v-for="(post, i) in posts" :key="post.slug").shadow.post
18
             section(v-for="(post, i) in posts" :key="post.slug").shadow.post
19
                 card(:content="post" :type="type" :wide="type == 'exhibition' && i > 1 || type == 'event' && i > 1 ")
19
                 card(:content="post" :type="type" :wide="type == 'exhibition' && i > 1 || type == 'event' && i > 1 ")
20
 
20
 
21
-        footer(v-if="loadingFetched || showMeta")
22
-            p(v-if="loadingFetched") loading more {{ type }} ...
21
+        footer
22
+            p(v-if="loadingFetched") loading more {{ type }}...
23
             p {{ `${type} count: ${Object.values(posts).length}` }}
23
             p {{ `${type} count: ${Object.values(posts).length}` }}
24
             p {{ `show sidebar: ${sidebar}` }}
24
             p {{ `show sidebar: ${sidebar}` }}
25
 
25
 
26
-    sidebar(v-if="sidebar" :type="`${type}`" layout="list")
26
+    //- sidebar(v-if="sidebar" :type="`${type}`" layout="list")
27
 </template>
27
 </template>
28
 
28
 
29
 <script>
29
 <script>
46
     mixins: [postTypeGetters, scrollTop, heroUtils],
46
     mixins: [postTypeGetters, scrollTop, heroUtils],
47
     data() {
47
     data() {
48
         return {
48
         return {
49
-            showMeta: false,
50
             page: 0,
49
             page: 0,
51
-            perPage: 21,
50
+            perPage: 15,
52
             keepFetching: true,
51
             keepFetching: true,
53
             loadingFetched: false,
52
             loadingFetched: false,
54
             observer: null
53
             observer: null
79
             this.$store.commit(`${uppercaseType}_LOADED`)
78
             this.$store.commit(`${uppercaseType}_LOADED`)
80
         },
79
         },
81
         async loadMorePosts() {
80
         async loadMorePosts() {
82
-            // console.log('trying to load for: ', this.$route)
81
+            console.log('trying to load for: ', this.$route)
83
             const type = typeFromRoute(this.$route)
82
             const type = typeFromRoute(this.$route)
84
-            if(!type) return console.error(`type: ${type} not found...`)
83
+            if(!type) return console.warn(`type: ${type} not found...`)
85
             if(!this.keepFetching) return console.warn('nothing left to fetch...')
84
             if(!this.keepFetching) return console.warn('nothing left to fetch...')
86
 
85
 
86
+            console.warn(`loading more ${type} posts...`)
87
             this.loadingFetched = true
87
             this.loadingFetched = true
88
-            console.warn(
89
-                `loading page ${this.page} of ${type} posts: 
90
-                    ${this.page * this.perPage + 1} through 
91
-                        ${(this.page + 1) * this.perPage}`
92
-            )
93
             this.page++
88
             this.page++
94
             await this.getPosts()
89
             await this.getPosts()
95
         },
90
         },
125
 
120
 
126
             // Stop trying to load more posts
121
             // Stop trying to load more posts
127
             if(res && !res.length) {
122
             if(res && !res.length) {
128
-                console.warn('did not receive response...', res, this.type)
123
+                console.warn('nothing left to get...')
129
                 this.keepFetching = false
124
                 this.keepFetching = false
130
             }
125
             }
131
             this.loadingFetched = false
126
             this.loadingFetched = false
149
             this.$store.commit('SET_HERO', this._setHeroInfo(page))
144
             this.$store.commit('SET_HERO', this._setHeroInfo(page))
150
         },
145
         },
151
         setIntersectionLoader() {
146
         setIntersectionLoader() {
152
-            if(!this.type) return console.error('cannot setup intersection handler for undefined type')
153
-            if(this.type == 'episode') return console.warn('intersection handler not setup for episode')
147
+            if(!this.type) return console.error('cannot setup interseciton handler for undefined type')
154
 
148
 
155
-            // console.warn('setting up intersection handler for:', this.type)
149
+            console.warn('setting up intersection handler for:', this.type)
156
             const footerEl = document.querySelector(INTERSECT_SELECTION)
150
             const footerEl = document.querySelector(INTERSECT_SELECTION)
151
+            // console.warn('found el: ',footerEl)
157
             if(!footerEl) return
152
             if(!footerEl) return
153
+            // console.warn('attach to: ',footerEl)
158
 
154
 
159
             const onIntersect = (entries, observer) => {
155
             const onIntersect = (entries, observer) => {
160
                 console.log('intersection handler fired...')
156
                 console.log('intersection handler fired...')
163
                     console.log("intersected:", entry)
159
                     console.log("intersected:", entry)
164
                     setTimeout(() => {
160
                     setTimeout(() => {
165
                         this.loadMorePosts()
161
                         this.loadMorePosts()
166
-                    }, 1000)
162
+                    }, TIMEOUT)
167
                 })
163
                 })
168
             }
164
             }
169
             this.observer = new IntersectionObserver(onIntersect, {
165
             this.observer = new IntersectionObserver(onIntersect, {
171
             })
167
             })
172
             this.observer['_for_type'] = this.type
168
             this.observer['_for_type'] = this.type
173
             this.observer.observe(footerEl)
169
             this.observer.observe(footerEl)
174
-
175
         },
170
         },
176
         unsetIntersectionLoader() {
171
         unsetIntersectionLoader() {
177
             const footerEl = document.querySelector(INTERSECT_SELECTION)
172
             const footerEl = document.querySelector(INTERSECT_SELECTION)
195
         // This only fires navigating from
190
         // This only fires navigating from
196
         // a list page, to another list page
191
         // a list page, to another list page
197
         type(newType, oldType){
192
         type(newType, oldType){
193
+            console.log('old:', oldType)
194
+            console.log('new:', newType)
195
+            
198
             if(!postTypes.includes(newType)) return console.warn('type not found...')
196
             if(!postTypes.includes(newType)) return console.warn('type not found...')
199
-            this.clearAndInitPostList()
200
             this.setIntersectionLoader()
197
             this.setIntersectionLoader()
198
+            this.clearAndInitPostList()
201
         },
199
         },
202
     },
200
     },
203
     mounted() {
201
     mounted() {

Laden…
Abbrechen
Speichern