diff --git a/assets/js/theme/components/lightbox/container.js b/assets/js/theme/components/lightbox/container.js index fe44ef37c..6b23c7f8e 100644 --- a/assets/js/theme/components/lightbox/container.js +++ b/assets/js/theme/components/lightbox/container.js @@ -4,28 +4,19 @@ 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); @@ -33,7 +24,7 @@ window.osuny.lightbox.LightboxContainer.prototype = { }, close () { this._removeImageContent(); - this._enablePageElement(); + this._setPageElementsEnabled(true); this.bodyElement.style.overflow = 'visible'; this.element.style.display = 'none'; this._closePopup(); @@ -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); @@ -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(); } }, @@ -126,6 +119,6 @@ window.osuny.lightbox.LightboxContainer.prototype = { event.preventDefault(); } this.popupDetails.close(); - this.controlRack.closePopup(); + this.controlRack.reset(); } }; diff --git a/assets/js/theme/components/lightbox/controls.js b/assets/js/theme/components/lightbox/controls.js index ad035fe42..136597c9c 100644 --- a/assets/js/theme/components/lightbox/controls.js +++ b/assets/js/theme/components/lightbox/controls.js @@ -6,9 +6,9 @@ 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(); @@ -16,31 +16,24 @@ window.osuny.lightbox.ControlRack = function (element) { 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); }, @@ -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); @@ -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'); } }; diff --git a/assets/js/theme/components/lightbox/manager.js b/assets/js/theme/components/lightbox/manager.js index e6fb2fdd6..4b210a23e 100644 --- a/assets/js/theme/components/lightbox/manager.js +++ b/assets/js/theme/components/lightbox/manager.js @@ -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: [], @@ -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); } diff --git a/assets/js/theme/components/lightbox/popupDetail.js b/assets/js/theme/components/lightbox/popupDetail.js index d907966f1..01f371302 100644 --- a/assets/js/theme/components/lightbox/popupDetail.js +++ b/assets/js/theme/components/lightbox/popupDetail.js @@ -4,56 +4,58 @@ window.osuny.lightbox = window.osuny.lightbox || {}; window.osuny.lightbox.Popup = function (element) { this.element = element; - this.content = this.element.getElementsByClassName(window.osuny.lightbox.classes.detailWindowContent).item(0); + this.titles = {}; this.title = null; - this.informationTitle = this.element.getElementsByClassName(window.osuny.lightbox.classes.detailWindowTitleInformation).item(0); - this.creditTitle = this.element.getElementsByClassName(window.osuny.lightbox.classes.detailWindowTitleCredit).item(0); - this.currentDescription = ''; - this.currentCredit = ''; - this.closeButton = this.element.getElementsByClassName(window.osuny.lightbox.classes.detailWindowClose).item(0); + this.currentContent = {}; + this.currentContent.description = ''; + this.currentContent.credit = ''; + this.current = null; this.opened = false; + + this.content = this.element.getElementsByClassName(window.osuny.lightbox.classes.detailWindowContent).item(0); + this.titles.description = this.element.getElementsByClassName(window.osuny.lightbox.classes.detailWindowTitleInformation).item(0); + this.titles.credit = this.element.getElementsByClassName(window.osuny.lightbox.classes.detailWindowTitleCredit).item(0); + this.closeButton = this.element.getElementsByClassName(window.osuny.lightbox.classes.detailWindowClose).item(0); + this.closeButton.addEventListener('click', function (e) { + var event = new Event('closePopup'); + this.element.dispatchEvent(event); + e.preventDefault(); + }.bind(this)); this.close(); }; window.osuny.lightbox.Popup.prototype = { - _show (content) { + close () { this._resetTitle(); - if (content === 'description') { - this.title = this.informationTitle; - this.content.innerHTML = this.currentDescription; - } else if (content === 'credit') { - this.title = this.creditTitle; - this.content.innerHTML = this.currentCredit; + this.current = null; + this.content.innerHTML = ''; + this.element.style.display = 'none'; + this.opened = false; + }, + open () { + this.element.style.display = 'block'; + this.opened = true; + }, + load (lightbox) { + this.currentContent.description = lightbox.description; + this.currentContent.credit = lightbox.credit; + }, + show (content) { + if (Object.keys(this.currentContent).includes(content)) { + this._resetTitle(); + this.current = content; + this.title = this.titles[content]; + this.content.innerHTML = this.currentContent[content]; } this.title.style.display = 'block'; if (!this.opened) { this.open(); } }, - showDescription() { - this._show('description'); - }, - showCredit () { - this._show('credit'); - }, - close () { - this._resetTitle(); - this.content.innerHTML = ''; - this.element.style.display = 'none'; - this.opened = false; - }, _resetTitle () { if (this.title) { this.title.style.display = 'none'; this.title = null; } - }, - open () { - this.element.style.display = 'block'; - this.opened = true; - }, - load (lightbox) { - this.currentDescription = lightbox.description; - this.currentCredit = lightbox.credit; } };