浏览代码

feat: added gallery keyboard event listen

tags/0.9.0
John Maeda 6 年前
父节点
当前提交
806c4e1eb9
共有 3 个文件被更改,包括 35 次插入14 次删除
  1. 28
    5
      vue-theme/src/components/gallery.vue
  2. 7
    8
      vue-theme/src/pages/single.vue
  3. 0
    1
      vue-theme/src/store/modules/artist.js

+ 28
- 5
vue-theme/src/components/gallery.vue 查看文件

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, i) of images" :class="{ active: i === selected }")
5
         li(v-for="(image, i) of images" :class="{ active: i === selected }")
6
-            .image-wrapper.f-row.center
6
+            .image-wrapper.f-col.center
7
                 img(:src="image")
7
                 img(:src="image")
8
     .controls.f-row
8
     .controls.f-row
9
         button(@click="prev") <
9
         button(@click="prev") <
31
         },
31
         },
32
         hideGallery() {
32
         hideGallery() {
33
             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
+            }
34
         }
47
         }
48
+    },
49
+    mounted() {
50
+        window.addEventListener('keydown', this.interpretKeypress)
51
+    },
52
+    destroyed() {
53
+        window.removeEventListener('keydown', this.interpretKeypress)
35
     }
54
     }
36
 }
55
 }
37
 </script>
56
 </script>
43
     left: 0
62
     left: 0
44
     width: 100%
63
     width: 100%
45
     height: 100%
64
     height: 100%
46
-    background-color: blue
47
-    opacity: 75%
65
+    background-color: black
48
     z-index: 1001
66
     z-index: 1001
49
     > *
67
     > *
50
         opacity: 100%
68
         opacity: 100%
51
         position: relative
69
         position: relative
52
         z-index: 1011
70
         z-index: 1011
71
+    button.hide
72
+        z-index: 1100
53
     ul
73
     ul
54
         list-style: none
74
         list-style: none
55
         li
75
         li
64
                 color: green
84
                 color: green
65
     .controls
85
     .controls
66
         position: absolute
86
         position: absolute
67
-        bottom: 5em
87
+        width: 100vw
88
+        button
89
+            height: 100vw
90
+            padding: 1vw
68
 </style>
91
 </style>

+ 7
- 8
vue-theme/src/pages/single.vue 查看文件

64
         },
64
         },
65
     },
65
     },
66
     methods: {
66
     methods: {
67
-        checkForImages(post) {
68
-            const allBlocks = post[this.$route.params.slug].blocks.map(block => {
67
+        checkForImages(posts) {
68
+            const allBlocks = posts[this.$route.params.slug].blocks.map(block => {
69
                 if(block) return block
69
                 if(block) return block
70
             })
70
             })
71
             allBlocks.forEach(block => {
71
             allBlocks.forEach(block => {
87
         }
87
         }
88
     },
88
     },
89
     mounted() {
89
     mounted() {
90
-        // TODO: this should be conditional after checking vuex state
91
-        let type = this.$route.params.type
92
-        type = type.charAt(0).toUpperCase() + type.slice(1)
93
-        this.$store.dispatch(`getAll${type}`)
94
-        
95
-        console.log(this.images)
90
+        if(!this.posts[this.$route.params.slug]) {
91
+            let type = this.$route.params.type
92
+            type = type.charAt(0).toUpperCase() + type.slice(1)
93
+            this.$store.dispatch(`getAll${type}`)
94
+        }
96
     }
95
     }
97
 }
96
 }
98
 </script>
97
 </script>

+ 0
- 1
vue-theme/src/store/modules/artist.js 查看文件

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 => {

正在加载...
取消
保存