Explorar el Código

merge fix gallery changes

tags/0.9.0
J hace 6 años
padre
commit
118d60f27c

+ 3
- 0
plugins/cia-endpoints/includes/class.make-endpoint.php Ver fichero

61
         $filtered[content] = $item->post_content;
61
         $filtered[content] = $item->post_content;
62
         $filtered[blocks] = get_rearrange_blocks($item->blocks);
62
         $filtered[blocks] = get_rearrange_blocks($item->blocks);
63
         
63
         
64
+        // Log the request with PHP Console
65
+        if ( class_exists( 'PC' ) ) PC::debug( $item, 'Blocks' );
66
+        
64
         return $filtered;
67
         return $filtered;
65
         // return $item;
68
         // return $item;
66
     }
69
     }

+ 1
- 0
plugins/cia-endpoints/includes/reformat-blocks.php Ver fichero

1
 <?php
1
 <?php
2
     function get_rearrange_blocks($blocks) {
2
     function get_rearrange_blocks($blocks) {
3
         $parsed_blocks = array();
3
         $parsed_blocks = array();
4
+
4
         foreach( $blocks as $block ) {
5
         foreach( $blocks as $block ) {
5
             if(sizeof($block[innerBlocks]) < 1 && $block[innerHTML] !== "\n\n") {
6
             if(sizeof($block[innerBlocks]) < 1 && $block[innerHTML] !== "\n\n") {
6
                 array_push($parsed_blocks, $block[innerHTML]);
7
                 array_push($parsed_blocks, $block[innerHTML]);

+ 0
- 1
plugins/cia-post-types/cia-post-types.php Ver fichero

65
     $icon = get_icon($type);
65
     $icon = get_icon($type);
66
     add_action( 'init', [ new PostType($type, $icon), 'register_post_type' ] );
66
     add_action( 'init', [ new PostType($type, $icon), 'register_post_type' ] );
67
 endforeach;
67
 endforeach;
68
-

+ 57
- 11
vue-theme/src/components/gallery.vue Ver fichero

1
 <template lang="pug">
1
 <template lang="pug">
2
 .gallery.f-col.center(v-if="fullscreengallery")
2
 .gallery.f-col.center(v-if="fullscreengallery")
3
-    button(@click="hideGallery") hide
3
+    button(@click="hideGallery").hide hide
4
     ul
4
     ul
5
-        li(v-for="image of images")
6
-            div
7
-                h1 {{ image }}
5
+        li(v-for="(image, i) of images" :class="{ active: i === selected }")
6
+            .image-wrapper.f-col.center
7
+                img(:src="image")
8
     .controls.f-row
8
     .controls.f-row
9
-        button(@click="hideGallery") <<<
10
-        button(@click="hideGallery") >>>
9
+        button(@click="prev") <
10
+        .f-grow
11
+        button(@click="next") >
11
 </template>
12
 </template>
12
 
13
 
13
 <script>
14
 <script>
16
         images: { type: Array },
17
         images: { type: Array },
17
         fullscreengallery: { type: Boolean }
18
         fullscreengallery: { type: Boolean }
18
     },
19
     },
20
+    data() { 
21
+        return {
22
+            selected: 0
23
+        }
24
+    },
19
     methods: {
25
     methods: {
26
+        prev() {
27
+            this.selected > 0 ? this.selected-- : this.selected = this.images.length - 1
28
+        },
29
+        next() {
30
+            this.selected < this.images.length - 1 ? this.selected++ : this.selected = 0
31
+        },
20
         hideGallery() {
32
         hideGallery() {
21
             this.$emit('close')
33
             this.$emit('close')
34
+        },
35
+        interpretKeypress(e) {
36
+            switch (e.key) {
37
+                case 'ArrowRight':
38
+                    this.next()
39
+                    break
40
+                case 'ArrowLeft':
41
+                    this.prev()
42
+                    break
43
+                case 'Escape':
44
+                    this.hideGallery()
45
+                    break
46
+            }
22
         }
47
         }
48
+    },
49
+    mounted() {
50
+        window.addEventListener('keydown', this.interpretKeypress)
51
+    },
52
+    destroyed() {
53
+        window.removeEventListener('keydown', this.interpretKeypress)
23
     }
54
     }
24
 }
55
 }
25
 </script>
56
 </script>
30
     top: 0
61
     top: 0
31
     left: 0
62
     left: 0
32
     width: 100%
63
     width: 100%
33
-    height: 100vw
34
-    background-color: blue
35
-    opacity: 75%
64
+    height: 100%
65
+    background-color: black
36
     z-index: 1001
66
     z-index: 1001
37
     > *
67
     > *
38
         opacity: 100%
68
         opacity: 100%
39
         position: relative
69
         position: relative
40
         z-index: 1011
70
         z-index: 1011
71
+    button.hide
72
+        z-index: 1100
41
     ul
73
     ul
42
         list-style: none
74
         list-style: none
43
-        h1
44
-            color: green
75
+        li
76
+            display: none
77
+            &.active
78
+                display: block
79
+            .image-wrapper
80
+                height: 100%
81
+                width: 50vw
82
+                background-color: yellow
83
+            h1
84
+                color: green
85
+    .controls
86
+        position: absolute
87
+        width: 100vw
88
+        button
89
+            height: 100vw
90
+            padding: 1vw
45
 </style>
91
 </style>

+ 27
- 3
vue-theme/src/pages/single.vue Ver fichero

1
 <template lang="pug">
1
 <template lang="pug">
2
-.page--single.f-row.between
2
+.page--single.f-row.between(v-if="$route.params.slug")
3
     gallery(:fullscreengallery="fullscreengallery" v-on:close="fullscreengallery = false" :images="images")
3
     gallery(:fullscreengallery="fullscreengallery" v-on:close="fullscreengallery = false" :images="images")
4
     article.f-grow.shadow
4
     article.f-grow.shadow
5
         header
5
         header
6
             h1 {{ type }}:{{ $route.params.slug }} single
6
             h1 {{ type }}:{{ $route.params.slug }} single
7
             button(@click="fullscreengallery = true") fullscreen
7
             button(@click="fullscreengallery = true") fullscreen
8
-        section
8
+        section(v-if="posts[$route.params.slug]")
9
             h4 {{ posts[$route.params.slug].title }}
9
             h4 {{ posts[$route.params.slug].title }}
10
             .block-wrapper(v-for="block in posts[$route.params.slug].blocks" v-html="block")
10
             .block-wrapper(v-for="block in posts[$route.params.slug].blocks" v-html="block")
11
     sidebar(v-if="sidebar" :type="`${type}`")
11
     sidebar(v-if="sidebar" :type="`${type}`")
32
     },
32
     },
33
     data() {
33
     data() {
34
         return {
34
         return {
35
+            images: [], 
35
             fullscreengallery: false
36
             fullscreengallery: false
36
         }
37
         }
37
     },
38
     },
67
         },
68
         },
68
 
69
 
69
     },
70
     },
71
+    methods: {
72
+        checkForImages(posts) {
73
+            const allBlocks = posts[this.$route.params.slug].blocks.map(block => {
74
+                if(block) return block
75
+            })
76
+            allBlocks.forEach(block => {
77
+                if(!block) return
78
+                const doc = new DOMParser().parseFromString(block, 'text/html')
79
+                const gallery = doc.querySelectorAll('.blocks-gallery-item img')
80
+                if(gallery) {
81
+                    this.images = [].slice.call(gallery).map(item => { 
82
+                        return item.src }
83
+                    )
84
+                }
85
+            })
86
+        }
87
+    },
88
+    watch: {
89
+        posts(newVal, oldVal) { 
90
+            // Loads images from the DOM
91
+            this.checkForImages(newVal)
92
+        }
93
+    },
70
     mounted() {
94
     mounted() {
71
-        // TODO: this should be conditional after checking vuex state
95
+        // TODO: Only makes req if this hasn't been loaded yet
72
         let type = this.$route.params.type
96
         let type = this.$route.params.type
73
         type = type.charAt(0).toUpperCase() + type.slice(1)
97
         type = type.charAt(0).toUpperCase() + type.slice(1)
74
         this.$store.dispatch(`getAll${type}`)
98
         this.$store.dispatch(`getAll${type}`)

+ 0
- 1
vue-theme/src/store/modules/artist.js Ver fichero

17
     artistContent: state => id => {
17
     artistContent: state => id => {
18
         let field = typeof id === 'number' ? 'id' : 'slug'
18
         let field = typeof id === 'number' ? 'id' : 'slug'
19
         let artist = state.all.filter(artist => artist[field] === id)
19
         let artist = state.all.filter(artist => artist[field] === id)
20
-
21
         return (artist[0]) ? artist[0].content.rendered : false
20
         return (artist[0]) ? artist[0].content.rendered : false
22
     },
21
     },
23
     someArtists: state => limit => {
22
     someArtists: state => limit => {

Loading…
Cancelar
Guardar