Browse Source

:bug: fixed block flag for gallery

tags/0.9.0
J 5 years ago
parent
commit
22edc71a04
3 changed files with 45 additions and 53 deletions
  1. 12
    25
      vue-theme/src/pages/list.vue
  2. 24
    28
      vue-theme/src/pages/single.vue
  3. 9
    0
      vue-theme/src/utils/helpers.js

+ 12
- 25
vue-theme/src/pages/list.vue View File

28
 import { mapGetters } from 'vuex'
28
 import { mapGetters } from 'vuex'
29
 import sidebar from '@/components/sidebars/sidebar'
29
 import sidebar from '@/components/sidebars/sidebar'
30
 
30
 
31
+import { convertTitleCase, typeFromRoute } from '@/utils/helpers'
32
+
31
 export default {
33
 export default {
32
     props: {
34
     props: {
33
         sidebar: {
35
         sidebar: {
37
             type: String
39
             type: String
38
         }
40
         }
39
     },
41
     },
40
-    components: {
41
-        sidebar: sidebar
42
-    },
42
+    components: { sidebar },
43
     computed: {
43
     computed: {
44
         ...mapGetters({
44
         ...mapGetters({
45
             allPages: 'allPages',
45
             allPages: 'allPages',
54
             allEpisodes: 'allEpisodes',
54
             allEpisodes: 'allEpisodes',
55
             allEpisodesLoaded: 'allEpisodesLoaded',
55
             allEpisodesLoaded: 'allEpisodesLoaded',
56
         }),
56
         }),
57
-        allLoaded() {
58
-            const flags = []
59
-            flags.push(this.allPagesLoaded)
60
-            flags.push(this.allPostsLoaded)
61
-            flags.push(this.allArtistsLoaded)
62
-            flags.push(this.allEpisodesLoaded)
63
-            return flags.every(Boolean)
64
-        },
65
         type() { // Checks for type and fixes Episodes route edge case 
57
         type() { // Checks for type and fixes Episodes route edge case 
66
-            return this.$route.params.type ? this.$route.params.type : this.$route.fullPath.slice(1)
58
+            return typeFromRoute(this.$route)
67
         },
59
         },
68
         posts() {
60
         posts() {
69
-            let type = this.convertTitleCase(this.type)
61
+            let type = convertTitleCase(this.type)
70
             
62
             
71
             // We're override the API to sort by date
63
             // We're override the API to sort by date
72
             // because items are returned by ID
64
             // because items are returned by ID
79
             return this.sortBy ? this[`all${type}`] : sortedByRecent
71
             return this.sortBy ? this[`all${type}`] : sortedByRecent
80
         },
72
         },
81
     },
73
     },
82
-    methods: {
83
-        convertTitleCase(type) {
84
-            return type.charAt(0).toUpperCase() + type.slice(1)
85
-        }
86
-    },
87
-    created() {
88
-        let type = this.convertTitleCase(this.type)
89
-        
90
-        this.$store.dispatch(`getAll${type}`, this.sortBy)
91
-        this.$store.commit('SET_HERO', type)
92
-    },
93
     watch: {
74
     watch: {
94
         $route(to, from){
75
         $route(to, from){
95
-            let type = this.convertTitleCase(to.path.slice(1))
76
+            let type = convertTitleCase(to.path.slice(1))
96
 
77
 
97
             // Accounts for the sort-by in URL case 
78
             // Accounts for the sort-by in URL case 
98
             let dispatchName = this.sortBy ? `getAll${type.split('/')[0]}` : `getAll${type}`
79
             let dispatchName = this.sortBy ? `getAll${type.split('/')[0]}` : `getAll${type}`
102
                 this.$store.commit('SET_HERO', type)
83
                 this.$store.commit('SET_HERO', type)
103
             }
84
             }
104
         }
85
         }
86
+    },
87
+    created() {
88
+        let type = convertTitleCase(this.type)
89
+        
90
+        this.$store.dispatch(`getAll${type}`, this.sortBy)
91
+        this.$store.commit('SET_HERO', type)
105
     }
92
     }
106
 }
93
 }
107
 </script>
94
 </script>

+ 24
- 28
vue-theme/src/pages/single.vue View File

19
 import sidebar from '@/components/sidebars/sidebar'
19
 import sidebar from '@/components/sidebars/sidebar'
20
 import gallery from '@/components/gallery/'
20
 import gallery from '@/components/gallery/'
21
 
21
 
22
+import { convertTitleCase, typeFromRoute } from '@/utils/helpers'
23
+
22
 export default {
24
 export default {
23
     props: {
25
     props: {
24
         sidebar: {
26
         sidebar: {
25
             type: Boolean
27
             type: Boolean
26
         }
28
         }
27
     },
29
     },
28
-    components: {
29
-        sidebar: sidebar,
30
-        gallery: gallery
31
-    },
30
+    components: { sidebar, gallery },
32
     data() {
31
     data() {
33
         return {
32
         return {
34
             images: [], 
33
             images: [], 
58
             return flags.every(Boolean)
57
             return flags.every(Boolean)
59
         },
58
         },
60
         type() { // Checks for type and fixes Episodes route edge case 
59
         type() { // Checks for type and fixes Episodes route edge case 
61
-            return this.$route.params.type ? this.$route.params.type : this.$route.fullPath.slice(1)
60
+            return typeFromRoute(this.$route)
62
         },
61
         },
63
         posts() {
62
         posts() {
64
-            let type = this.convertTitleCase(this.type)
63
+            let type = convertTitleCase(this.type)
65
             
64
             
66
             if(!type) return []
65
             if(!type) return []
67
             
66
             
73
         }
72
         }
74
     },
73
     },
75
     methods: {
74
     methods: {
76
-        convertTitleCase(type) {
77
-            return type.charAt(0).toUpperCase() + type.slice(1)
78
-        },
79
         pageBlocks(posts) {
75
         pageBlocks(posts) {
80
-            if(this.images.length < 1) return []
76
+            if(!posts) return []
81
             return posts[this.$route.params.slug].blocks.map(block => {
77
             return posts[this.$route.params.slug].blocks.map(block => {
82
                 if(block) return block
78
                 if(block) return block
83
             })
79
             })
84
         },
80
         },
85
         checkForImages(posts) {
81
         checkForImages(posts) {
86
             if(Object.keys(posts).length == 0) return
82
             if(Object.keys(posts).length == 0) return
87
-
83
+            console.log(posts)
88
             this.pageBlocks(posts).forEach(block => {
84
             this.pageBlocks(posts).forEach(block => {
89
-                if(!block) return
90
-
85
+                console.log(block)
91
                 const doc = new DOMParser().parseFromString(block, 'text/html')
86
                 const doc = new DOMParser().parseFromString(block, 'text/html')
92
                 const gallery = doc.querySelectorAll('.blocks-gallery-item img')
87
                 const gallery = doc.querySelectorAll('.blocks-gallery-item img')
93
-                
94
-                // add captions
95
-                if(gallery.length) {
96
-                    this.images = [].slice.call(gallery).map(
97
-                        item => { return item.src }
98
-                    )
99
-                }
88
+
89
+                if(!gallery || gallery.length < 1) return
90
+
91
+                this.images = [].slice.call(gallery).map(item => { 
92
+                    return item.src
93
+                })
100
             })
94
             })
101
         },
95
         },
102
         checkAndSetHero(posts) {
96
         checkAndSetHero(posts) {
103
             const post = posts[this.$route.params.slug]
97
             const post = posts[this.$route.params.slug]
104
-            if(post && post.hero){
105
-                const json = JSON.parse(post.hero)
106
-                this.$store.commit('SET_HERO', json)
107
-            }
98
+            if(!post || ! post.hero) return
99
+
100
+            const json = JSON.parse(post.hero)
101
+            this.$store.commit('SET_HERO', json)
108
         }
102
         }
109
     },
103
     },
110
     watch: {
104
     watch: {
116
             
110
             
117
             // Gottas be on the next render tick
111
             // Gottas be on the next render tick
118
             this.$nextTick(() => {
112
             this.$nextTick(() => {
119
-                const blocks = this.pageBlocks(newVal)
120
                 let gallery
113
                 let gallery
121
-                blocks.forEach(block => {
114
+                this.pageBlocks(newVal).forEach(block => {
115
+                    if(!block) return
122
                     gallery = document.querySelectorAll('.blocks-gallery-item figure')
116
                     gallery = document.querySelectorAll('.blocks-gallery-item figure')
123
                 })
117
                 })
124
                 
118
                 
125
                 if(!gallery || gallery.length < 1) return
119
                 if(!gallery || gallery.length < 1) return
126
 
120
 
127
                 gallery.forEach((item, i) => {
121
                 gallery.forEach((item, i) => {
128
-                    item.addEventListener('mouseup', event => { this.fullscreengallery = i })
122
+                    item.addEventListener('mouseup', event => { 
123
+                        this.fullscreengallery = i
124
+                    })
129
                 })
125
                 })
130
             })
126
             })
131
             
127
             
133
     },
129
     },
134
     created() {
130
     created() {
135
         if(!this.allLoaded) {
131
         if(!this.allLoaded) {
136
-            let type = this.convertTitleCase(this.$route.params.type)
132
+            let type = convertTitleCase(this.$route.params.type)
137
             console.log('Retrieving...', type)
133
             console.log('Retrieving...', type)
138
             this.$store.dispatch(`getAll${type}`)
134
             this.$store.dispatch(`getAll${type}`)
139
         }
135
         }

+ 9
- 0
vue-theme/src/utils/helpers.js View File

1
+const convertTitleCase = (type) => {
2
+    return type.charAt(0).toUpperCase() + type.slice(1)
3
+}
4
+
5
+const typeFromRoute = (route) => {
6
+    return route.params.type ? route.params.type : route.fullPath.slice(1)
7
+}
8
+
9
+export { convertTitleCase, typeFromRoute }

Loading…
Cancel
Save