Просмотр исходного кода

click handler on gallery images

tags/0.9.0
J 6 лет назад
Родитель
Сommit
9b2eb72af8
2 измененных файлов: 22 добавлений и 6 удалений
  1. 6
    3
      vue-theme/src/components/gallery.vue
  2. 16
    3
      vue-theme/src/pages/single.vue

+ 6
- 3
vue-theme/src/components/gallery.vue Просмотреть файл

4
     ul
4
     ul
5
         li(v-for="(image, i) of images" :class="{ active: i === selected }")
5
         li(v-for="(image, i) of images" :class="{ active: i === selected }")
6
             .image-wrapper.f-col.center
6
             .image-wrapper.f-col.center
7
-                h1 {{ i }}
8
-                //- img(:src="image")
7
+                img(:src="image")
9
     .controls.f-row
8
     .controls.f-row
10
         button(@click="prev") <
9
         button(@click="prev") <
11
         .f-grow
10
         .f-grow
16
 export default {
15
 export default {
17
     props: {
16
     props: {
18
         images: { type: Array },
17
         images: { type: Array },
19
-        fullscreengallery: { type: Boolean }
18
+        fullscreengallery: { type: Boolean },
19
+        startwith: { type: Number }
20
     },
20
     },
21
     data() { 
21
     data() { 
22
         return {
22
         return {
47
             }
47
             }
48
         }
48
         }
49
     },
49
     },
50
+    created() {
51
+        this.selected = this.startwith
52
+    },
50
     mounted() {
53
     mounted() {
51
         window.addEventListener('keydown', this.interpretKeypress)
54
         window.addEventListener('keydown', this.interpretKeypress)
52
     },
55
     },

+ 16
- 3
vue-theme/src/pages/single.vue Просмотреть файл

1
 <template lang="pug">
1
 <template lang="pug">
2
 .page--single.f-row.between(v-if="$route.params.slug")
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" :startwith="lastImageClicked")
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
33
     data() {
33
     data() {
34
         return {
34
         return {
35
             images: [], 
35
             images: [], 
36
-            fullscreengallery: false
36
+            fullscreengallery: false,
37
+            lastImageClicked: 0
37
         }
38
         }
38
     },
39
     },
39
     computed: {
40
     computed: {
72
                 if(!block) return
73
                 if(!block) return
73
                 const doc = new DOMParser().parseFromString(block, 'text/html')
74
                 const doc = new DOMParser().parseFromString(block, 'text/html')
74
                 const gallery = doc.querySelectorAll('.blocks-gallery-item img')
75
                 const gallery = doc.querySelectorAll('.blocks-gallery-item img')
76
+                // add captions
75
                 if(gallery) {
77
                 if(gallery) {
76
                     this.images = [].slice.call(gallery).map(
78
                     this.images = [].slice.call(gallery).map(
77
-                        item => {  return item.src }
79
+                        item => { return item.src }
78
                     )
80
                     )
79
                 }
81
                 }
80
             })
82
             })
83
+        },
84
+        wrapImagesWithLink() {
85
+            const gallery = document.querySelectorAll('.blocks-gallery-item figure, figure.wp-block-image')
86
+            gallery.forEach((item, i) => {
87
+                item.addEventListener('click', () => {
88
+                    this.lastImageClicked = i
89
+                    console.log('yeah!', this.lastImageClicked)
90
+                    this.fullscreengallery = true
91
+                })
92
+            })
81
         }
93
         }
82
     },
94
     },
83
     watch: {
95
     watch: {
84
         posts(newVal, oldVal) { 
96
         posts(newVal, oldVal) { 
85
             // Loads images from the DOM
97
             // Loads images from the DOM
86
             this.checkForImages(newVal)
98
             this.checkForImages(newVal)
99
+            this.wrapImagesWithLink()
87
         }
100
         }
88
     },
101
     },
89
     mounted() {
102
     mounted() {

Загрузка…
Отмена
Сохранить