diff options
author | Matthew Kosarek <mattkae@protonmail.com> | 2022-09-06 19:45:41 -0400 |
---|---|---|
committer | Matthew Kosarek <mattkae@protonmail.com> | 2022-09-06 19:45:41 -0400 |
commit | cbc3f9b5449d68ebe1bafa4af31a7369a7b15dbe (patch) | |
tree | d9c62fffe505651164111d73ffe62f4d7ab28e73 /index.js | |
parent | f3fe389d50f47466b10f8a80336b142a0cb69741 (diff) | |
parent | 8be7ee0d06d0aa6b8f7ae9ccf78a51b601b05e4f (diff) |
Merge branch 'master' of matthewkosarek.xyz:/srv/git/matthew_kosarek_xyz
Diffstat (limited to 'index.js')
-rw-r--r-- | index.js | 67 |
1 files changed, 6 insertions, 61 deletions
@@ -3,39 +3,15 @@ function main() { var themeSelector = document.getElementById('theme_selector'); themeSelector.classList.remove('hidden'); - runCarousel(); + imageCallbacks(); } -function runCarousel() { - var carouselContainer = document.getElementById("carousel"), - imageContainer = document.getElementById('image_container'), - leftButton = document.getElementById('carousel_left'), - rightButton = document.getElementById('carousel_right'); - - // Carousel logic - var carouselPosition = 0, - numImages = imageContainer.children.length; - - function onCarouselRight() { - carouselPosition = (carouselPosition + 1); - - if (carouselPosition === numImages) { - carouselPosition = 0; - } - updateCarousel(); - } - - function onCarouselLeft() { - carouselPosition = (carouselPosition - 1); - if (carouselPosition < 0) { - carouselPosition = numImages - 1; - } - updateCarousel(); - } - +function imageCallbacks() { + const imageContainer = document.getElementById('image_container'); + function onImageClicked() { var background = document.createElement('div'); // - background.classList.add('carousel_image_expanded_container'); + background.classList.add('image_item_expanded_container'); var clone = this.cloneNode(true); clone.classList.add('expanded'); background.append(clone); @@ -50,44 +26,13 @@ function runCarousel() { var image = imageList[i]; image.addEventListener('click', onImageClicked); } - } - - function updateCarousel() { - var selectedChildPosition = -(carouselPosition * 240); - imageContainer.style.transform = 'translate(' + selectedChildPosition + 'px, 0)'; - for (var i = 0; i < numImages; i++) { - var image = imageList[i]; - if (i !== carouselPosition) { - if (i === (carouselPosition - 1) % numImages) { - image.style.opacity = 0.3; - } else if (i !== 0 && i === (carouselPosition + 1) % numImages) { - image.style.opacity = 0.3; - } else { - image.style.opacity = 0; - } - } else { - image.style.opacity = 1; - } - - image.style.pointerEvents = image.style.opacity > 0 ? 'all' : 'none'; - } - - rightButton.style.visibility = (carouselPosition === numImages - 1) ? 'hidden' : 'visible'; - leftButton.style.visibility = (carouselPosition === 0) ? 'hidden' : 'visible'; - } + } // -- Set up on image clicked var imageList = imageContainer.children, numImages = imageContainer.children.length; setImageClicked(); - updateCarousel(); - - leftButton.addEventListener('click', onCarouselLeft); - rightButton.addEventListener('click', onCarouselRight); - - // -- Fade in the container - imageContainer.style.opacity = '1'; } main(); |