From 93b83d7e57100dd96991b243d94868f22d42a6c7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9ctor?= Date: Wed, 18 Apr 2018 13:11:08 +0200 Subject: [PATCH 1/5] add disableScroll property to avoid scrolling views behind lightbox --- src/components/script.js | 87 ++++++++++++++++++++++------------------ src/components/style.css | 4 ++ 2 files changed, 52 insertions(+), 39 deletions(-) diff --git a/src/components/script.js b/src/components/script.js index dacc456..450dcd9 100644 --- a/src/components/script.js +++ b/src/components/script.js @@ -6,94 +6,98 @@ export default { type: Boolean, default: false }, - + images: { type: Array, - required: true, + required: true + }, + + disableScroll: { + type: Boolean, + default: false }, showLightBox: { type: Boolean, - default: true, + default: true }, startAt: { type: Number, - default: 0, + default: 0 }, nThumbs: { type: Number, - default: 7, + default: 7 }, showThumbs: { type: Boolean, - default: true, + default: true }, // Mode autoPlay: { - type: Boolean, - default: false, + type: Boolean, + default: false }, autoPlayTime: { type: Number, - default: 3000, + default: 3000 }, siteLoading: { - default: null, + default: null }, showCaption: { type: Boolean, - default: false, + default: false } }, - data() { + data () { return { select: this.startAt, thumbSelect: this.startAt, lightBoxOn: this.showLightBox, displayThumbs: this.images.slice(0, this.nThumbs), timer: null, - beginThumbIndex: 0, } }, computed: { - countImages() { + countImages () { return this.images.length }, - imagesThumb() { + imagesThumb () { if (this.siteLoading) { - return this.displayThumbs.map(({ thumb }) => ({ + return this.displayThumbs.map(({thumb}) => ({ src: thumb, loading: this.siteLoading, - error: this.siteLoading, + error: this.siteLoading })) } - return this.displayThumbs.map(({ thumb }) => thumb) + return this.displayThumbs.map(({thumb}) => thumb) }, }, watch: { - startAt() { + startAt () { this.$set(this, 'select', this.startAt) this.$set(this, 'thumbSelect', this.startAt) }, - images() { + images () { this.$set(this, 'displayThumbs', this.images.slice(0, this.nThumbs)) }, - select() { + select () { let halfDown = Math.floor(this.nThumbs / 2) let mod = 1 - (this.nThumbs % 2) @@ -116,7 +120,7 @@ export default { this.$set(this, 'displayThumbs', this.images.slice(this.select - halfDown + mod, this.select + halfDown + 1)) }, - lightBoxOn(value) { + lightBoxOn (value) { if (document != null) { if (value) { document.getElementsByTagName('body')[0].classList.add('vue-lb-open') @@ -125,18 +129,18 @@ export default { document.getElementsByTagName('body')[0].classList.remove('vue-lb-open') this.$emit('lightBoxOn', false) } - } + } }, - - open(value) { + + open (value) { if (value) { - this.openLightBox(); - this.$emit('opened'); + this.openLightBox() + this.$emit('opened') } }, }, - mounted() { + mounted () { if (this.autoPlay) { this.timer = setInterval(() => { this.nextImage() @@ -145,39 +149,44 @@ export default { }, methods: { - showImage(index) { + showImage (index) { document.addEventListener('keydown', this.addKeyEvent) - + if (this.disableScroll) { + document.getElementsByTagName('html')[0].classList.add('no-scroll') + } + this.$set(this, 'lightBoxOn', true) this.$set(this, 'select', index) }, - addKeyEvent(event) { + addKeyEvent (event) { if (event.keyCode === 37) this.previousImage() if (event.keyCode === 39) this.nextImage() if (event.keyCode === 27) this.closeLightBox() }, - closeLightBox() { + closeLightBox () { this.$set(this, 'lightBoxOn', false) document.removeEventListener('keydown', this.addKeyEvent) + if (this.disableScroll) { + document.removeEventListener('keydown', this.addKeyEvent) + } }, - - openLightBox() { - this.showImage(this.beginThumbIndex); + + openLightBox () { + this.showImage(this.beginThumbIndex) }, - nextImage() { + nextImage () { this.$set(this, 'select', (this.select + 1) % this.countImages) }, - previousImage() { + previousImage () { this.$set(this, 'select', ((this.select - 1) + this.countImages) % this.countImages) }, }, - - beforeDestroy() { + beforeDestroy () { document.removeEventListener('keydown', this.addKeyEvent) if (this.autoPlay) { diff --git a/src/components/style.css b/src/components/style.css index cd2ee2d..4431b6d 100644 --- a/src/components/style.css +++ b/src/components/style.css @@ -256,3 +256,7 @@ img.vue-lb-modal-image { .fade-enter, .fade-leave-to { opacity: 0; } + +.no-scroll { + overflow-y: hidden; +} \ No newline at end of file From 856013d544096d7b1380bdd5bec5e6dac0f7db1c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9ctor?= Date: Wed, 18 Apr 2018 13:17:49 +0200 Subject: [PATCH 2/5] refactor disableScroll --- src/components/script.js | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/src/components/script.js b/src/components/script.js index 450dcd9..09d0ef3 100644 --- a/src/components/script.js +++ b/src/components/script.js @@ -123,9 +123,15 @@ export default { lightBoxOn (value) { if (document != null) { if (value) { + if (this.disableScroll) { + document.getElementsByTagName('html')[0].classList.add('no-scroll') + } document.getElementsByTagName('body')[0].classList.add('vue-lb-open') this.$emit('lightBoxOn', true) } else { + if (this.disableScroll) { + document.getElementsByTagName('html')[0].classList.remove('no-scroll') + } document.getElementsByTagName('body')[0].classList.remove('vue-lb-open') this.$emit('lightBoxOn', false) } @@ -151,10 +157,6 @@ export default { methods: { showImage (index) { document.addEventListener('keydown', this.addKeyEvent) - if (this.disableScroll) { - document.getElementsByTagName('html')[0].classList.add('no-scroll') - } - this.$set(this, 'lightBoxOn', true) this.$set(this, 'select', index) }, @@ -168,9 +170,6 @@ export default { closeLightBox () { this.$set(this, 'lightBoxOn', false) document.removeEventListener('keydown', this.addKeyEvent) - if (this.disableScroll) { - document.removeEventListener('keydown', this.addKeyEvent) - } }, openLightBox () { From 87ebce06831324f9618ad08d555b0ceb5f556469 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9ctor?= Date: Thu, 19 Apr 2018 09:20:40 +0200 Subject: [PATCH 3/5] refactor using Airbnb Javascript Style Guide --- src/components/script.js | 50 ++++++++++++++++++++-------------------- 1 file changed, 25 insertions(+), 25 deletions(-) diff --git a/src/components/script.js b/src/components/script.js index 09d0ef3..2f6bdf2 100644 --- a/src/components/script.js +++ b/src/components/script.js @@ -4,61 +4,61 @@ export default { props: { open: { type: Boolean, - default: false + default: false, }, images: { type: Array, - required: true + required: true, }, disableScroll: { type: Boolean, - default: false + default: false, }, showLightBox: { type: Boolean, - default: true + default: true, }, startAt: { type: Number, - default: 0 + default: 0, }, nThumbs: { type: Number, - default: 7 + default: 7, }, showThumbs: { type: Boolean, - default: true + default: true, }, // Mode autoPlay: { type: Boolean, - default: false + default: false, }, autoPlayTime: { type: Number, - default: 3000 + default: 3000, }, siteLoading: { - default: null + default: null, }, showCaption: { type: Boolean, - default: false + default: false, } }, - data () { + data() { return { select: this.startAt, thumbSelect: this.startAt, @@ -88,16 +88,16 @@ export default { }, watch: { - startAt () { + startAt() { this.$set(this, 'select', this.startAt) this.$set(this, 'thumbSelect', this.startAt) }, - images () { + images() { this.$set(this, 'displayThumbs', this.images.slice(0, this.nThumbs)) }, - select () { + select() { let halfDown = Math.floor(this.nThumbs / 2) let mod = 1 - (this.nThumbs % 2) @@ -120,7 +120,7 @@ export default { this.$set(this, 'displayThumbs', this.images.slice(this.select - halfDown + mod, this.select + halfDown + 1)) }, - lightBoxOn (value) { + lightBoxOn(value) { if (document != null) { if (value) { if (this.disableScroll) { @@ -138,7 +138,7 @@ export default { } }, - open (value) { + open(value) { if (value) { this.openLightBox() this.$emit('opened') @@ -146,7 +146,7 @@ export default { }, }, - mounted () { + mounted() { if (this.autoPlay) { this.timer = setInterval(() => { this.nextImage() @@ -155,37 +155,37 @@ export default { }, methods: { - showImage (index) { + showImage(index) { document.addEventListener('keydown', this.addKeyEvent) this.$set(this, 'lightBoxOn', true) this.$set(this, 'select', index) }, - addKeyEvent (event) { + addKeyEvent(event) { if (event.keyCode === 37) this.previousImage() if (event.keyCode === 39) this.nextImage() if (event.keyCode === 27) this.closeLightBox() }, - closeLightBox () { + closeLightBox() { this.$set(this, 'lightBoxOn', false) document.removeEventListener('keydown', this.addKeyEvent) }, - openLightBox () { + openLightBox() { this.showImage(this.beginThumbIndex) }, - nextImage () { + nextImage() { this.$set(this, 'select', (this.select + 1) % this.countImages) }, - previousImage () { + previousImage() { this.$set(this, 'select', ((this.select - 1) + this.countImages) % this.countImages) }, }, - beforeDestroy () { + beforeDestroy() { document.removeEventListener('keydown', this.addKeyEvent) if (this.autoPlay) { From d9939dae1c645034db1692fb376908ecde2bff43 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9ctor?= Date: Fri, 20 Apr 2018 09:16:05 +0200 Subject: [PATCH 4/5] set default value of disableScroll property to true --- src/components/script.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/script.js b/src/components/script.js index 2f6bdf2..be947dc 100644 --- a/src/components/script.js +++ b/src/components/script.js @@ -14,7 +14,7 @@ export default { disableScroll: { type: Boolean, - default: false, + default: true, }, showLightBox: { From 1d49816c642cd0499b2898c2c46c4f17d244dbe0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9ctor?= Date: Mon, 23 Apr 2018 09:09:56 +0200 Subject: [PATCH 5/5] add new line to the end of style file --- src/components/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/style.css b/src/components/style.css index 4431b6d..65cd10a 100644 --- a/src/components/style.css +++ b/src/components/style.css @@ -259,4 +259,4 @@ img.vue-lb-modal-image { .no-scroll { overflow-y: hidden; -} \ No newline at end of file +}