Skip to content

Commit

Permalink
clean
Browse files Browse the repository at this point in the history
  • Loading branch information
@Clararigaud
Clararigaud committed Sep 21, 2024
1 parent ab6946e commit e473c61
Show file tree
Hide file tree
Showing 4 changed files with 107 additions and 125 deletions.
97 changes: 45 additions & 52 deletions assets/js/theme/components/lightbox/container.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,36 +4,27 @@ window.osuny.lightbox = window.osuny.lightbox || {};

window.osuny.lightbox.LightboxContainer = function (element) {
this.element = element;
this.pageFocusableElements = ['main', 'header', 'footer'];
this.bodyElement = document.querySelector('body');
this.mainElement = document.querySelector('main');
this.headerElement = document.querySelector('header');
this.footerElement = document.querySelector('footer');
this.opened = false;
this.controlRack = null;
this.popupDetails = null;
this.listeners = {};
this.content = this.element.getElementsByClassName(window.osuny.lightbox.classes.content).item(0);
this._initialize();
this._initializeListeners();
};

window.osuny.lightbox.LightboxContainer.prototype = {
_initialize () {
var controlRackElement = document.getElementsByClassName(window.osuny.lightbox.classes.controls).item(0),
popupDetailsElement = this.element.getElementsByClassName(window.osuny.lightbox.classes.detailWindow).item(0);
this.controlRack = new window.osuny.lightbox.ControlRack(controlRackElement);
this.popupDetails = new window.osuny.lightbox.Popup(popupDetailsElement);
},
open () {
this._disablePageElement();
this._setPageElementsEnabled(false);
this.bodyElement.style.overflow = 'hidden';
this.element.style.display = 'block';
document.addEventListener('keydown', this.listeners.keyDown);
this.opened = true;
},
close () {
this._removeImageContent();
this._enablePageElement();
this._setPageElementsEnabled(true);
this.bodyElement.style.overflow = 'visible';
this.element.style.display = 'none';
this._closePopup();
Expand All @@ -44,40 +35,48 @@ window.osuny.lightbox.LightboxContainer.prototype = {
this.popupDetails.close();
this._removeImageContent();
this._setImageContent(lightbox);
// maybe add description ou alt
this.content.focus();
this.controlRack.load(lightbox);
this.popupDetails.load(lightbox);
},
_dispachEvent(eventname) {
var event = new Event(eventname);
this.element.dispatchEvent(event);
_initialize () {
var controlRackElement = document.getElementsByClassName(window.osuny.lightbox.classes.controls).item(0),
popupDetailsElement = this.element.getElementsByClassName(window.osuny.lightbox.classes.detailWindow).item(0);
this.controlRack = new window.osuny.lightbox.ControlRack(controlRackElement);
this.popupDetails = new window.osuny.lightbox.Popup(popupDetailsElement);
this._initializeListeners();
},
_initializeListeners () {
var buttonEvents = Object.keys(this.controlRack.buttons);
// Dispaching to manager
this.listeners.close = this._dispachEvent.bind(this, window.osuny.lightbox.events.close);
this.listeners.next = this._dispachEvent.bind(this, window.osuny.lightbox.events.next);
this.listeners.previous = this._dispachEvent.bind(this, window.osuny.lightbox.events.previous);
//this.listeners.keyDown = this._onKeydown.bind(this);
this.listeners.showDescription = this._showDescription.bind(this);
this.listeners.showCredit = this._showCredit.bind(this);

// handling local event
this.listeners.keyDown = this._onKeydown.bind(this);
this.listeners.description = this._showDescription.bind(this);
this.listeners.credit = this._showCredit.bind(this);
this.listeners.closePopup = this._closePopup.bind(this);

this.controlRack.element.addEventListener('close', this.listeners.close);
this.controlRack.element.addEventListener('next', this.listeners.next);
this.controlRack.element.addEventListener('previous', this.listeners.previous);
this.controlRack.element.addEventListener('showDescription', this.listeners.showDescription);
this.controlRack.element.addEventListener('showCredit', this.listeners.showCredit);
buttonEvents.forEach(function (eventname) {
this.controlRack.element.addEventListener(eventname, this.listeners[eventname]);
}.bind(this));
this.popupDetails.element.addEventListener('closePopup', this.listeners.closePopup);
},
// _onKeydown (event) {
// if (event.key === 'Escape') {
// this.listeners.close();
// } else if (event.key === 'ArrowLeft') {
// this.listeners.previous();
// } else if (event.key === 'ArrowRight') {
// this.listeners.next();
// }
// },
_dispachEvent (eventname) {
var event = new Event(eventname);
this.element.dispatchEvent(event);
},
_onKeydown (event) {
if (event.key === 'Escape') {
this.listeners.close();
} else if (event.key === 'ArrowLeft') {
this.listeners.previous();
} else if (event.key === 'ArrowRight') {
this.listeners.next();
}
},
_setImageContent (lightbox) {
var image = document.createElement('img');
image.setAttribute('src', lightbox.url);
Expand All @@ -89,35 +88,29 @@ window.osuny.lightbox.LightboxContainer.prototype = {
_removeImageContent () {
this.content.innerHTML = '';
},
_disablePageElement () {
this.mainElement.inert = true;
this.mainElement.setAttribute('aria-hidden', 'true');
this.headerElement.inert = true;
this.headerElement.setAttribute('aria-hidden', 'true');
this.footerElement.inert = true;
this.footerElement.setAttribute('aria-hidden', 'true');
_setPageElementsEnabled (enabled) {
this.pageFocusableElements.forEach(function (elem) {
this._setPageElementEnabled(elem, enabled);
}.bind(this));
},
_enablePageElement () {
this.mainElement.inert = false;
this.mainElement.setAttribute('aria-hidden', 'false');
this.headerElement.inert = false;
this.headerElement.setAttribute('aria-hidden', 'false');
this.footerElement.inert = false;
this.footerElement.setAttribute('aria-hidden', 'false');
_setPageElementEnabled (elem, enabled) {
var element = document.querySelector(elem);
element.setAttribute('aria-hidden', String(!enabled));
element.inert = !enabled;
},
_showDescription () {
if (this.controlRack.infoOpened()) {
if (this.popupDetails.opened && this.popupDetails.current === 'description') {
this._closePopup();
} else {
this.popupDetails.showDescription();
this.popupDetails.show('description');
this.controlRack.showDescription();
}
},
_showCredit () {
if (this.controlRack.creditOpened()) {
if (this.popupDetails.opened && this.popupDetails.current === 'credit') {
this._closePopup();
} else {
this.popupDetails.showCredit();
this.popupDetails.show('credit');
this.controlRack.showCredit();
}
},
Expand All @@ -126,6 +119,6 @@ window.osuny.lightbox.LightboxContainer.prototype = {
event.preventDefault();
}
this.popupDetails.close();
this.controlRack.closePopup();
this.controlRack.reset();
}
};
49 changes: 18 additions & 31 deletions assets/js/theme/components/lightbox/controls.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,41 +6,34 @@ window.osuny.lightbox.ControlRack = function (element) {
this.element = element;
this.buttons = {
close: this.element.getElementsByClassName(window.osuny.lightbox.classes.closeButton).item(0),
prev: this.element.getElementsByClassName(window.osuny.lightbox.classes.prevButton).item(0),
previous: this.element.getElementsByClassName(window.osuny.lightbox.classes.prevButton).item(0),
next: this.element.getElementsByClassName(window.osuny.lightbox.classes.nextButton).item(0),
info: this.element.getElementsByClassName(window.osuny.lightbox.classes.infoButton).item(0),
description: this.element.getElementsByClassName(window.osuny.lightbox.classes.infoButton).item(0),
credit: this.element.getElementsByClassName(window.osuny.lightbox.classes.creditButton).item(0)
};
this._initializeEvents();
};

window.osuny.lightbox.ControlRack.prototype = {
_initializeEvents () {
var i = 0;
for(i=0; i< Object.keys(this.buttons).length; i++) {
var key = Object.keys(this.buttons)[i];
var action = this._dispachEvent.bind(this, key);
var i = 0,
key = 0,
action = null;
for (i=0; i< Object.keys(this.buttons).length; i+=1) {
key = Object.keys(this.buttons)[i];
action = this._dispachEvent.bind(this, key);
this.buttons[key].addEventListener('click', action);
}
},
// _onKeydown (event) {
// if (event.key === 'Escape') {
// this.listeners.close();
// } else if (event.key === 'ArrowLeft') {
// this.listeners.previous();
// } else if (event.key === 'ArrowRight') {
// this.listeners.next();
// }
// },
_showArrows () {
this._showButton(this.buttons.prev);
this._showButton(this.buttons.previous);
this._showButton(this.buttons.next);
},
_hideArrows () {
this._hideButton(this.buttons.prev);
this._hideButton(this.buttons.previous);
this._hideButton(this.buttons.next);
},
_dispachEvent(eventname) {
_dispachEvent (eventname) {
var event = new Event(eventname);
this.element.dispatchEvent(event);
},
Expand All @@ -57,7 +50,7 @@ window.osuny.lightbox.ControlRack.prototype = {
this._hideArrows();
}
this.buttons.next.disabled = lightbox.next === null;
this.buttons.prev.disabled = lightbox.previous === null;
this.buttons.previous.disabled = lightbox.previous === null;

if (lightbox.credit) {
this._showButton(this.buttons.credit);
Expand All @@ -66,27 +59,21 @@ window.osuny.lightbox.ControlRack.prototype = {
}

if (lightbox.description) {
this._showButton(this.buttons.info);
this._showButton(this.buttons.description);
} else {
this._hideButton(this.buttons.info);
this._hideButton(this.buttons.description);
}
},
showDescription () {
this.buttons.info.classList.add('active');
this.buttons.description.classList.add('active');
this.buttons.credit.classList.remove('active');
},
showCredit () {
this.buttons.credit.classList.add('active');
this.buttons.info.classList.remove('active');
this.buttons.description.classList.remove('active');
},
closePopup () {
this.buttons.info.classList.remove('active');
reset () {
this.buttons.description.classList.remove('active');
this.buttons.credit.classList.remove('active');
},
infoOpened () {
return this.buttons.info.classList.contains('active');
},
creditOpened () {
return this.buttons.credit.classList.contains('active');
}
};
18 changes: 9 additions & 9 deletions assets/js/theme/components/lightbox/manager.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
/* eslint-disable no-underscore-dangle */
window.osuny = window.osuny || {};
window.osuny.lightbox = window.osuny.lightbox || {};

window.osuny.lightbox.manager = {
initialized: false,
lightboxes: [],
Expand Down Expand Up @@ -37,35 +38,34 @@ window.osuny.lightbox.manager = {
_initializeContainer () {
var containerElement = document.getElementsByClassName(window.osuny.lightbox.classes.container).item(0);
this.container = new window.osuny.lightbox.LightboxContainer(containerElement);
this.container.element.addEventListener(window.osuny.lightbox.events.close, this.onClose.bind(this));
this.container.element.addEventListener(window.osuny.lightbox.events.next, this.onNext.bind(this));
this.container.element.addEventListener(window.osuny.lightbox.events.previous, this.onPrevious.bind(this));
this.container.element.addEventListener(window.osuny.lightbox.events.close, this._onClose.bind(this));
this.container.element.addEventListener(window.osuny.lightbox.events.next, this._onNext.bind(this));
this.container.element.addEventListener(window.osuny.lightbox.events.previous, this._onPrevious.bind(this));
},
_onLauncherClick (event) {
var index = event.target.getAttribute('value');
this._setLightboxContent(index);
this.open();
this._open();
},
_setLightboxContent (index) {
this.currentLightbox = this.lightboxes[index];
this.container.show(this.currentLightbox);
},
open () {
_open () {
if (!this.container.opened) {
this.container.open();
}
},
onClose () {
console.log('çlose')
_onClose () {
this.container.close();
this.currentLightbox.launcher.focus();
},
onNext () {
_onNext () {
if (this.currentLightbox.next) {
this._setLightboxContent(this.currentLightbox.next);
}
},
onPrevious () {
_onPrevious () {
if (this.currentLightbox.previous) {
this._setLightboxContent(this.currentLightbox.previous);
}
Expand Down
Loading

0 comments on commit e473c61

Please sign in to comment.