Created
December 28, 2019 16:43
-
-
Save ricealexander/de1845074c89ec442a391033ec6f8d97 to your computer and use it in GitHub Desktop.
/exercises/58 - Gallery/gallery.js Refactor of Gallery to use Class syntax
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| class Gallery { | |
| constructor(gallery) { | |
| if (!gallery) { | |
| throw new Error('No Gallery Found!'); | |
| } | |
| this.gallery = gallery; | |
| // select the elements we need | |
| this.images = Array.from(gallery.querySelectorAll('img')); | |
| this.modal = document.querySelector('.modal'); | |
| this.prevButton = this.modal.querySelector('.prev'); | |
| this.nextButton = this.modal.querySelector('.next'); | |
| // bind our methods to the instance when we need them | |
| this.showNextImage = this.showNextImage.bind(this); | |
| this.showPrevImage = this.showPrevImage.bind(this); | |
| this.handleKeyUp = this.handleKeyUp.bind(this); | |
| this.handleClickOutside = this.handleClickOutside.bind(this); | |
| // These are our Event Listeners! | |
| this.images.forEach(image => | |
| image.addEventListener('click', e => this.showImage(e.currentTarget)) | |
| ); | |
| // loop over each image | |
| this.images.forEach(image => { | |
| // attach an event listener for each image | |
| image.addEventListener('keyup', e => { | |
| // when that is keyup'd, check if it was enter | |
| if (e.key === 'Enter') { | |
| // if it was, show that image | |
| this.showImage(e.currentTarget); | |
| } | |
| }); | |
| }); | |
| this.modal.addEventListener('click', this.handleClickOutside); | |
| } | |
| openModal() { | |
| console.info('Opening Modal...'); | |
| // First check if the modal is already open | |
| if (this.modal.matches('.open')) { | |
| console.info('Madal already open'); | |
| return; // stop the function from running | |
| } | |
| this.modal.classList.add('open'); | |
| // Event listeners to be bound when we open the modal: | |
| window.addEventListener('keyup', this.handleKeyUp); | |
| this.nextButton.addEventListener('click', this.showNextImage); | |
| this.prevButton.addEventListener('click', this.showPrevImage); | |
| } | |
| closeModal() { | |
| this.modal.classList.remove('open'); | |
| // TODO: add event listeners for clicks and keyboard.. | |
| window.removeEventListener('keyup', this.handleKeyUp); | |
| this.nextButton.removeEventListener('click', this.showNextImage); | |
| this.prevButton.removeEventListener('click', this.showPrevImage); | |
| } | |
| handleClickOutside(e) { | |
| if (e.target === e.currentTarget) { | |
| this.closeModal(); | |
| } | |
| } | |
| handleKeyUp(event) { | |
| if (event.key === 'Escape') return this.closeModal(); | |
| if (event.key === 'ArrowRight') return this.showNextImage(); | |
| if (event.key === 'ArrowLeft') return this.showPrevImage(); | |
| } | |
| showNextImage() { | |
| console.log('SHOWING NEXT IMAGE!!!'); | |
| this.showImage( | |
| this.currentImage.nextElementSibling || this.gallery.firstElementChild | |
| ); | |
| } | |
| showPrevImage() { | |
| this.showImage( | |
| this.currentImage.previousElementSibling || this.gallery.lastElementChild | |
| ); | |
| } | |
| showImage(el) { | |
| if (!el) { | |
| console.info('no image to show'); | |
| return; | |
| } | |
| // update the modal with this info | |
| console.log(el); | |
| this.modal.querySelector('img').src = el.src; | |
| this.modal.querySelector('h2').textContent = el.title; | |
| this.modal.querySelector('figure p').textContent = el.dataset.description; | |
| this.currentImage = el; | |
| this.openModal(); | |
| } | |
| } | |
| // Use it on the page | |
| const gallery1 = new Gallery(document.querySelector('.gallery1')); | |
| const gallery2 = new Gallery(document.querySelector('.gallery2')); | |
| console.log(gallery1, gallery2); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment