From 5600e75e2197cb1c138ca01e2c5ac0ea2e5946a7 Mon Sep 17 00:00:00 2001 From: Jonah Lawrence Date: Wed, 20 Dec 2023 15:27:07 +0000 Subject: [PATCH 1/6] feat: Support for ordering images right to left --- README.md | 1 + src/js/core/drag.js | 14 ++++++++------ src/js/core/keyboard-navigation.js | 4 ++-- src/js/core/touch-navigation.js | 7 +++++-- src/js/glightbox.js | 16 +++++++++++++--- 5 files changed, 29 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index c18539e..0b9bbf2 100644 --- a/README.md +++ b/README.md @@ -233,6 +233,7 @@ myGallery.setElements([...]); | autoplayVideos | boolean | `true` | Autoplay videos on open. | | autofocusVideos | boolean | `false` | If true video will be focused on play to allow keyboard sortcuts for the player, this will deactivate prev and next arrows to change slide so use it only if you know what you are doing. | | plyr | object | `{}` | [View video player options.](#video-player) | +| direction | string | `ltr` | Direction of the lightbox slide order (`ltr` for left to right or `rtl` for right to left). | ## Events diff --git a/src/js/core/drag.js b/src/js/core/drag.js index fa6dde7..0823502 100644 --- a/src/js/core/drag.js +++ b/src/js/core/drag.js @@ -29,6 +29,8 @@ export default class DragSlides { this.dragContainer = this.el; this.slide = slide; this.instance = instance; + this.prevSlideDirection = instance.settings.direction === 'rtl' ? 'left' : 'right'; + this.nextSlideDirection = instance.settings.direction === 'rtl' ? 'right' : 'left'; this.el.addEventListener('mousedown', (e) => this.dragStart(e), false); this.el.addEventListener('mouseup', (e) => this.dragEnd(e), false); @@ -81,8 +83,8 @@ export default class DragSlides { if (this.doSlideChange) { this.instance.preventOutsideClick = true; - this.doSlideChange == 'right' && this.instance.prevSlide(); - this.doSlideChange == 'left' && this.instance.nextSlide(); + this.doSlideChange == this.prevSlideDirection && this.instance.prevSlide(); + this.doSlideChange == this.nextSlideDirection && this.instance.nextSlide(); } if (this.doSlideClose) { @@ -151,8 +153,8 @@ export default class DragSlides { this.active = false; this.instance.preventOutsideClick = true; this.dragEnd(null); - doChange == 'right' && this.instance.prevSlide(); - doChange == 'left' && this.instance.nextSlide(); + doChange == this.prevSlideDirection && this.instance.prevSlide(); + doChange == this.nextSlideDirection && this.instance.nextSlide(); return; } } @@ -189,8 +191,8 @@ export default class DragSlides { let dragDir = this.currentX > 0 ? 'right' : 'left'; if ( - (dragDir == 'left' && this.slide !== this.slide.parentNode.lastChild) || - (dragDir == 'right' && this.slide !== this.slide.parentNode.firstChild) + (dragDir == this.nextSlideDirection && this.slide !== this.slide.parentNode.lastChild) || + (dragDir == this.prevSlideDirection && this.slide !== this.slide.parentNode.firstChild) ) { doChange = dragDir; } diff --git a/src/js/core/keyboard-navigation.js b/src/js/core/keyboard-navigation.js index 4c7ae06..2d4e689 100644 --- a/src/js/core/keyboard-navigation.js +++ b/src/js/core/keyboard-navigation.js @@ -85,10 +85,10 @@ export default function keyboardNavigation(instance) { } } if (key == 39) { - instance.nextSlide(); + instance.settings.direction === 'rtl' ? instance.prevSlide() : instance.nextSlide(); } if (key == 37) { - instance.prevSlide(); + instance.settings.direction === 'rtl' ? instance.nextSlide() : instance.prevSlide(); } if (key == 27) { instance.close(); diff --git a/src/js/core/touch-navigation.js b/src/js/core/touch-navigation.js index 1964cb1..2922051 100644 --- a/src/js/core/touch-navigation.js +++ b/src/js/core/touch-navigation.js @@ -73,6 +73,9 @@ export default function touchNavigation(instance) { const sliderWrapper = document.getElementById('glightbox-slider'); const overlay = document.querySelector('.goverlay'); + const prevSlideDirection = instance.settings.direction === 'rtl' ? 'Right' : 'Left'; + const nextSlideDirection = instance.settings.direction === 'rtl' ? 'Left' : 'Right'; + const touchInstance = new TouchEvents(sliderWrapper, { touchStart: (e) => { process = true; @@ -268,13 +271,13 @@ export default function touchNavigation(instance) { doingZoom = false; return; } - if (evt.direction == 'Left') { + if (evt.direction == nextSlideDirection) { if (instance.index == instance.elements.length - 1) { return resetSlideMove(media); } instance.nextSlide(); } - if (evt.direction == 'Right') { + if (evt.direction == prevSlideDirection) { if (instance.index == 0) { return resetSlideMove(media); } diff --git a/src/js/glightbox.js b/src/js/glightbox.js index 4e6ab78..de053af 100644 --- a/src/js/glightbox.js +++ b/src/js/glightbox.js @@ -86,7 +86,8 @@ const defaults = { close: '', next: ' ', prev: '' - } + }, + direction: 'ltr' }; // You can pass your own slide structure @@ -128,6 +129,13 @@ defaults.lightboxHTML = `
Date: Wed, 20 Dec 2023 15:52:15 +0000 Subject: [PATCH 2/6] refactor: Use CSS instead of JS to swap buttons to keep class names semantic --- src/js/glightbox.js | 10 ++++++---- src/postcss/glightbox.css | 11 +++++++++-- 2 files changed, 15 insertions(+), 6 deletions(-) diff --git a/src/js/glightbox.js b/src/js/glightbox.js index de053af..bc03c08 100644 --- a/src/js/glightbox.js +++ b/src/js/glightbox.js @@ -974,10 +974,12 @@ class GlightboxInit { const modal = document.getElementById('glightbox-body'); this.modal = modal; let closeButton = modal.querySelector('.gclose'); - const leftButton = modal.querySelector('.gprev'); - const rightButton = modal.querySelector('.gnext'); - this.prevButton = this.settings.direction !== 'rtl' ? leftButton : rightButton; - this.nextButton = this.settings.direction === 'rtl' ? leftButton : rightButton; + this.prevButton = modal.querySelector('.gprev'); + this.nextButton = modal.querySelector('.gnext'); + if (this.settings.direction === 'rtl') { + this.prevButton.classList.add('gprev-rtl'); + this.nextButton.classList.add('gnext-rtl'); + } this.overlay = modal.querySelector('.goverlay'); this.loader = modal.querySelector('.gloader'); this.slidesContainer = document.getElementById('glightbox-slider'); diff --git a/src/postcss/glightbox.css b/src/postcss/glightbox.css index e646d01..00d3b82 100644 --- a/src/postcss/glightbox.css +++ b/src/postcss/glightbox.css @@ -560,7 +560,8 @@ iframe.wait-autoplay { } } - .gprev { + .gprev:not(.gprev-rtl), + .gnext.gnext-rtl { position: absolute; top: -100%; left: 30px; @@ -572,7 +573,8 @@ iframe.wait-autoplay { } } - .gnext { + .gnext:not(.gnext-rtl), + .gprev.gprev-rtl { position: absolute; top: -100%; right: 30px; @@ -584,6 +586,11 @@ iframe.wait-autoplay { } } + .gprev-rtl, + .gnext-rtl { + transform: scale(-1, 1); + } + .gclose { width: 35px; height: 35px; From 63dc28ec79bda34f1d01b0fc40651ea53452288e Mon Sep 17 00:00:00 2001 From: Jonah Lawrence Date: Wed, 20 Dec 2023 16:24:06 +0000 Subject: [PATCH 3/6] fix touch navigation --- src/js/core/touch-navigation.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/js/core/touch-navigation.js b/src/js/core/touch-navigation.js index 2922051..afc3a20 100644 --- a/src/js/core/touch-navigation.js +++ b/src/js/core/touch-navigation.js @@ -73,8 +73,8 @@ export default function touchNavigation(instance) { const sliderWrapper = document.getElementById('glightbox-slider'); const overlay = document.querySelector('.goverlay'); - const prevSlideDirection = instance.settings.direction === 'rtl' ? 'Right' : 'Left'; - const nextSlideDirection = instance.settings.direction === 'rtl' ? 'Left' : 'Right'; + const prevSlideDirection = instance.settings.direction === 'rtl' ? 'Left' : 'Right'; + const nextSlideDirection = instance.settings.direction === 'rtl' ? 'Right' : 'Left'; const touchInstance = new TouchEvents(sliderWrapper, { touchStart: (e) => { From b63bf7f89eebef5a54a3a590315c55942f8a14e6 Mon Sep 17 00:00:00 2001 From: Jonah Lawrence Date: Wed, 20 Dec 2023 19:13:50 +0000 Subject: [PATCH 4/6] refactor: Swap slide direction without overriding defaults --- src/js/glightbox.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/js/glightbox.js b/src/js/glightbox.js index bc03c08..bd1cd84 100644 --- a/src/js/glightbox.js +++ b/src/js/glightbox.js @@ -129,13 +129,6 @@ defaults.lightboxHTML = `
Date: Sat, 23 Dec 2023 22:36:54 +0000 Subject: [PATCH 5/6] Swap css effects in getAnimationClasses so it only happens once --- src/js/glightbox.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/js/glightbox.js b/src/js/glightbox.js index bd1cd84..e79aac0 100644 --- a/src/js/glightbox.js +++ b/src/js/glightbox.js @@ -184,13 +184,6 @@ class GlightboxInit { this.build(); - if (this.settings.direction === 'rtl') { - // swap the slide and slideBack effects - const slideEffect = this.settings.cssEfects.slide; - this.settings.cssEfects.slide = this.settings.cssEfects.slideBack; - this.settings.cssEfects.slideBack = slideEffect; - } - _.animateElement(this.overlay, this.settings.openEffect === 'none' ? 'none' : this.settings.cssEfects.fade.in); const body = document.body; @@ -928,6 +921,13 @@ class GlightboxInit { */ getAnimationClasses() { let effects = []; + if (this.settings.direction === 'rtl') { + console.log('Swapping settings.direction from rtl to ltr'); + // swap the slide and slideBack effects + const slideEffect = this.settings.cssEfects.slide; + this.settings.cssEfects.slide = this.settings.cssEfects.slideBack; + this.settings.cssEfects.slideBack = slideEffect; + } for (let key in this.settings.cssEfects) { if (this.settings.cssEfects.hasOwnProperty(key)) { let effect = this.settings.cssEfects[key]; From 6dd1a4ea2603797030a2f16ab4bcca400da92d54 Mon Sep 17 00:00:00 2001 From: Jonah Lawrence Date: Sat, 23 Dec 2023 22:40:31 +0000 Subject: [PATCH 6/6] remove log statement --- src/js/glightbox.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/js/glightbox.js b/src/js/glightbox.js index e79aac0..fe7be0b 100644 --- a/src/js/glightbox.js +++ b/src/js/glightbox.js @@ -922,7 +922,6 @@ class GlightboxInit { getAnimationClasses() { let effects = []; if (this.settings.direction === 'rtl') { - console.log('Swapping settings.direction from rtl to ltr'); // swap the slide and slideBack effects const slideEffect = this.settings.cssEfects.slide; this.settings.cssEfects.slide = this.settings.cssEfects.slideBack;