Procházet zdrojové kódy

:bug: fixed conditional loading issue on single templates

tags/0.9.0
J před 5 roky
rodič
revize
8a14fec5ee

+ 2
- 0
vue-theme/src/pages/index.vue Zobrazit soubor

8
                     h4.t-cap episodes
8
                     h4.t-cap episodes
9
                 router-link(:to="{ path: `/episodes/${Object.values(allEpisodes)[0].slug}` }")
9
                 router-link(:to="{ path: `/episodes/${Object.values(allEpisodes)[0].slug}` }")
10
                     p {{ Object.values(allEpisodes)[0].title }}
10
                     p {{ Object.values(allEpisodes)[0].title }}
11
+
11
             section(v-if="allArtistsLoaded").shadow
12
             section(v-if="allArtistsLoaded").shadow
12
                 router-link(:to="`./artists`")
13
                 router-link(:to="`./artists`")
13
                     h4.t-cap artists
14
                     h4.t-cap artists
14
                 router-link(:to="{ path: `/artists/${Object.values(allArtists)[0].slug}` }")
15
                 router-link(:to="{ path: `/artists/${Object.values(allArtists)[0].slug}` }")
15
                     p {{ Object.values(allArtists)[0].title }}
16
                     p {{ Object.values(allArtists)[0].title }}
17
+                    
16
             section(v-if="allPagesLoaded").shadow
18
             section(v-if="allPagesLoaded").shadow
17
                 h4.t-cap pages
19
                 h4.t-cap pages
18
                 router-link(:to="{ path: `/pages/${Object.values(allPages)[0].slug}` }")
20
                 router-link(:to="{ path: `/pages/${Object.values(allPages)[0].slug}` }")

+ 22
- 13
vue-theme/src/pages/single.vue Zobrazit soubor

1
 <template lang="pug">
1
 <template lang="pug">
2
-.page--single.f-row.between(v-if="allPostsLoaded && allPagesLoaded && allArtistsLoaded && allEpisodesLoaded")
2
+.page--single.f-row.between
3
     gallery(:fullscreengallery="fullscreengallery" v-on:close="fullscreengallery = -1" :images="images")
3
     gallery(:fullscreengallery="fullscreengallery" v-on:close="fullscreengallery = -1" :images="images")
4
     article.f-grow.shadow
4
     article.f-grow.shadow
5
         header
5
         header
49
             allEpisodes: 'allEpisodes',
49
             allEpisodes: 'allEpisodes',
50
             allEpisodesLoaded: 'allEpisodesLoaded',
50
             allEpisodesLoaded: 'allEpisodesLoaded',
51
         }),
51
         }),
52
+        allLoaded() {
53
+            const flags = []
54
+            flags.push(this.allPagesLoaded)
55
+            flags.push(this.allPostsLoaded)
56
+            flags.push(this.allArtistsLoaded)
57
+            flags.push(this.allEpisodesLoaded)
58
+            return flags.every(Boolean)
59
+        },
52
         type() { // Checks for type and fixes Episodes route edge case 
60
         type() { // Checks for type and fixes Episodes route edge case 
53
             return this.$route.params.type ? this.$route.params.type : this.$route.fullPath.slice(1)
61
             return this.$route.params.type ? this.$route.params.type : this.$route.fullPath.slice(1)
54
         },
62
         },
64
     },
72
     },
65
     methods: {
73
     methods: {
66
         pageBlocks(posts) {
74
         pageBlocks(posts) {
67
-            console.log('block for: ', this.posts)
68
-            console.log(this.$route.params.slug)
75
+            if(this.images.length < 1) return []
69
             return posts[this.$route.params.slug].blocks.map(block => {
76
             return posts[this.$route.params.slug].blocks.map(block => {
70
                 if(block) return block
77
                 if(block) return block
71
             })
78
             })
72
         },
79
         },
73
         checkForImages(posts) {
80
         checkForImages(posts) {
74
-            if(Object.keys(posts).length === 0) return
75
-            console.log(posts)
81
+            if(Object.keys(posts).length == 0) return
82
+
76
             this.pageBlocks(posts).forEach(block => {
83
             this.pageBlocks(posts).forEach(block => {
77
                 if(!block) return
84
                 if(!block) return
78
 
85
 
96
         }
103
         }
97
     },
104
     },
98
     watch: {
105
     watch: {
99
-        posts(newVal, oldVal) { 
106
+        posts(newVal, oldVal) {
100
             // Loads images from the DOM
107
             // Loads images from the DOM
101
             this.checkForImages(newVal)
108
             this.checkForImages(newVal)
102
             
109
             
104
             
111
             
105
             // Gottas be on the next render tick
112
             // Gottas be on the next render tick
106
             this.$nextTick(() => {
113
             this.$nextTick(() => {
114
+                const blocks = this.pageBlocks(newVal)
107
                 let gallery
115
                 let gallery
108
-                this.pageBlocks(newVal).forEach(block => {
109
-                    if(!block) return
116
+                blocks.forEach(block => {
110
                     gallery = document.querySelectorAll('.blocks-gallery-item figure')
117
                     gallery = document.querySelectorAll('.blocks-gallery-item figure')
111
                 })
118
                 })
112
                 
119
                 
113
-                if(gallery.length < 1) return
120
+                if(!gallery || gallery.length < 1) return
114
 
121
 
115
                 gallery.forEach((item, i) => {
122
                 gallery.forEach((item, i) => {
116
                     item.addEventListener('mouseup', event => { this.fullscreengallery = i })
123
                     item.addEventListener('mouseup', event => { this.fullscreengallery = i })
120
         }
127
         }
121
     },
128
     },
122
     created() {
129
     created() {
123
-        // TODO: Only makes req if this hasn't been loaded yet
124
-        let type = this.$route.params.type
125
-        type = type.charAt(0).toUpperCase() + type.slice(1)
126
-        this.$store.dispatch(`getAll${type}`)
130
+        if(!this.allLoaded) {
131
+            let type = this.$route.params.type
132
+            type = type.charAt(0).toUpperCase() + type.slice(1)
133
+            console.log('retrieving...', type)
134
+            this.$store.dispatch(`getAll${type}`)
135
+        }
127
     }
136
     }
128
 }
137
 }
129
 </script>
138
 </script>

+ 1
- 1
vue-theme/src/store/modules/artist.js Zobrazit soubor

31
 const actions = {
31
 const actions = {
32
     getAllArtists({ commit }, sortType) {
32
     getAllArtists({ commit }, sortType) {
33
         commit('CLEAR_ARTISTS')
33
         commit('CLEAR_ARTISTS')
34
-        
34
+        commit('ARTISTS_LOADED', false)
35
         api.getByType('artists', sortType, artists => {
35
         api.getByType('artists', sortType, artists => {
36
             commit('STORE_FETCHED_ARTISTS', { artists })
36
             commit('STORE_FETCHED_ARTISTS', { artists })
37
             commit('ARTISTS_LOADED', true)
37
             commit('ARTISTS_LOADED', true)

+ 1
- 0
vue-theme/src/store/modules/episode.js Zobrazit soubor

31
 
31
 
32
 const actions = {
32
 const actions = {
33
     getAllEpisodes({ commit }, sortType) {
33
     getAllEpisodes({ commit }, sortType) {
34
+        commit('EPISODES_LOADED', false)
34
         api.getByType('episodes', sortType, episodes => {
35
         api.getByType('episodes', sortType, episodes => {
35
             commit('STORE_FETCHED_EPISODES', { episodes })
36
             commit('STORE_FETCHED_EPISODES', { episodes })
36
             commit('EPISODES_LOADED', true)
37
             commit('EPISODES_LOADED', true)

+ 1
- 0
vue-theme/src/store/modules/page.js Zobrazit soubor

34
 // actions
34
 // actions
35
 const actions = {
35
 const actions = {
36
     getAllPages({ commit }, sortType) {
36
     getAllPages({ commit }, sortType) {
37
+        commit('PAGES_LOADED', false)
37
         api.getByType('pages', sortType, pages => {
38
         api.getByType('pages', sortType, pages => {
38
             commit('STORE_FETCHED_PAGES', { pages })
39
             commit('STORE_FETCHED_PAGES', { pages })
39
             commit('PAGES_LOADED', true)
40
             commit('PAGES_LOADED', true)

+ 1
- 0
vue-theme/src/store/modules/post.js Zobrazit soubor

31
 
31
 
32
 const actions = {
32
 const actions = {
33
     getAllPosts({ commit }, sortType) {
33
     getAllPosts({ commit }, sortType) {
34
+        commit('POSTS_LOADED', false)
34
         api.getByType('posts', sortType, posts => {
35
         api.getByType('posts', sortType, posts => {
35
             commit('STORE_FETCHED_POSTS', { posts })
36
             commit('STORE_FETCHED_POSTS', { posts })
36
             commit('POSTS_LOADED', true)
37
             commit('POSTS_LOADED', true)

Načítá se…
Zrušit
Uložit