From 52451f187e33064b9b34d6ddb5d0b669c79052be Mon Sep 17 00:00:00 2001 From: Jonathan Treffler Date: Sun, 20 Sep 2020 09:12:33 +0000 Subject: [PATCH 01/20] rebase --- demo/pages/index.vue | 21 ++++++++------ src/package-lock.json | 4 +-- src/src/Gallery.vue | 62 ++++++++++++++++++++-------------------- src/src/GalleryImage.vue | 14 +-------- 4 files changed, 46 insertions(+), 55 deletions(-) diff --git a/demo/pages/index.vue b/demo/pages/index.vue index 706b786..f69f024 100644 --- a/demo/pages/index.vue +++ b/demo/pages/index.vue @@ -3,23 +3,26 @@

Nuxt Gallery Demo

- - - - - - + diff --git a/src/package-lock.json b/src/package-lock.json index 51f3d03..73efa17 100644 --- a/src/package-lock.json +++ b/src/package-lock.json @@ -1,6 +1,6 @@ { - "name": "modern-vue-gallery", - "version": "2.0.0", + "name": "nuxt-gallery", + "version": "1.1.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/src/src/Gallery.vue b/src/src/Gallery.vue index bc7661a..383290b 100644 --- a/src/src/Gallery.vue +++ b/src/src/Gallery.vue @@ -1,16 +1,24 @@ From 7c3a03a95808d62e8af1de7376b642d6521aeac1 Mon Sep 17 00:00:00 2001 From: Jonathan Treffler Date: Sun, 20 Sep 2020 09:26:02 +0000 Subject: [PATCH 02/20] scrolling works again, with much less DOM operations --- src/src/Gallery.vue | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/src/src/Gallery.vue b/src/src/Gallery.vue index 383290b..b397e1f 100644 --- a/src/src/Gallery.vue +++ b/src/src/Gallery.vue @@ -14,6 +14,7 @@ class="picture" v-for="(image, index) in images" :key="image.src + index" + ref="image" > @@ -32,8 +33,8 @@ export default { }, data() { return { + focusedId: 0, zoomedId: false, - }; }, mounted() { @@ -144,11 +145,18 @@ export default { .then(extendPC) .then(activateClosing(this.$el)); }); + let self = this; + setInterval(function() { + console.log(self.$refs); + }, 1000); }, methods: { + getPictureElementById(id) { + return this.$refs.image[id]; + }, scroll(direction) { const pictureContainer = this.$el.querySelector(".pictureContainer"); - const newCurrentId = this.activeId + direction; + const newCurrentId = this.focusedId + direction; let newCurrentPicture = this.getPictureElementById(newCurrentId); @@ -159,7 +167,7 @@ export default { duration: 500, }); - this.activeId = newCurrentId; + this.focusedId = newCurrentId; } }, closeZoom() { From 473f92ad62ea2ce80206b029c5c84067ef401ac8 Mon Sep 17 00:00:00 2001 From: Jonathan Treffler Date: Sun, 20 Sep 2020 14:03:05 +0000 Subject: [PATCH 03/20] continued developemnt --- src/src/Gallery.vue | 178 ++++++++++------------------------------- src/src/mixins/zoom.js | 142 ++++++++++++++++++++++++++++++++ 2 files changed, 186 insertions(+), 134 deletions(-) create mode 100644 src/src/mixins/zoom.js diff --git a/src/src/Gallery.vue b/src/src/Gallery.vue index b397e1f..d69e1df 100644 --- a/src/src/Gallery.vue +++ b/src/src/Gallery.vue @@ -1,11 +1,11 @@