wpa-events-single.js
110 lines
| 1 | (function () { |
| 2 | 'use strict'; |
| 3 | |
| 4 | function rafThrottle(fn) { |
| 5 | var id = 0; |
| 6 | return function () { |
| 7 | if (id) { |
| 8 | return; |
| 9 | } |
| 10 | id = requestAnimationFrame(function () { |
| 11 | id = 0; |
| 12 | fn(); |
| 13 | }); |
| 14 | }; |
| 15 | } |
| 16 | |
| 17 | /** One window resize listener; handlers run on the next animation frame. */ |
| 18 | function createResizeBus() { |
| 19 | var handlers = []; |
| 20 | var run = rafThrottle(function () { |
| 21 | for (var i = 0; i < handlers.length; i += 1) { |
| 22 | handlers[i](); |
| 23 | } |
| 24 | }); |
| 25 | |
| 26 | return { |
| 27 | add: function (handler) { |
| 28 | handlers.push(handler); |
| 29 | }, |
| 30 | attach: function () { |
| 31 | if (handlers.length) { |
| 32 | window.addEventListener('resize', run); |
| 33 | } |
| 34 | } |
| 35 | }; |
| 36 | } |
| 37 | |
| 38 | function initCarousel(root, resizeBus) { |
| 39 | var carousel = root.querySelector('[data-amelia-wpa-carousel]'); |
| 40 | if (!carousel) { |
| 41 | return; |
| 42 | } |
| 43 | |
| 44 | var viewport = carousel.querySelector('.wpa-events__carousel-viewport'); |
| 45 | var track = carousel.querySelector('[data-carousel-track]'); |
| 46 | var slides = carousel.querySelectorAll('[data-carousel-slide]'); |
| 47 | var dots = carousel.querySelectorAll('[data-carousel-dot]'); |
| 48 | var prev = carousel.querySelector('[data-carousel-prev]'); |
| 49 | var next = carousel.querySelector('[data-carousel-next]'); |
| 50 | |
| 51 | if (!viewport || !track || slides.length < 2) { |
| 52 | return; |
| 53 | } |
| 54 | |
| 55 | var index = 0; |
| 56 | var slideCount = slides.length; |
| 57 | |
| 58 | function applyTransform() { |
| 59 | var w = viewport.offsetWidth || 0; |
| 60 | if (w > 0) { |
| 61 | track.style.transform = 'translate3d(' + (-index * w) + 'px,0,0)'; |
| 62 | } |
| 63 | } |
| 64 | |
| 65 | function syncDots() { |
| 66 | for (var d = 0; d < dots.length; d += 1) { |
| 67 | var dot = dots[d]; |
| 68 | var dotIndex = parseInt(dot.getAttribute('data-carousel-dot'), 10); |
| 69 | dot.classList.toggle('is-active', dotIndex === index); |
| 70 | } |
| 71 | } |
| 72 | |
| 73 | function go(target) { |
| 74 | index = (target % slideCount + slideCount) % slideCount; |
| 75 | applyTransform(); |
| 76 | syncDots(); |
| 77 | } |
| 78 | |
| 79 | if (prev) { |
| 80 | prev.addEventListener('click', function () { |
| 81 | go(index - 1); |
| 82 | }); |
| 83 | } |
| 84 | if (next) { |
| 85 | next.addEventListener('click', function () { |
| 86 | go(index + 1); |
| 87 | }); |
| 88 | } |
| 89 | |
| 90 | for (var i = 0; i < dots.length; i += 1) { |
| 91 | dots[i].addEventListener('click', function (ev) { |
| 92 | var el = ev.currentTarget; |
| 93 | go(parseInt(el.getAttribute('data-carousel-dot'), 10)); |
| 94 | }); |
| 95 | } |
| 96 | |
| 97 | applyTransform(); |
| 98 | resizeBus.add(applyTransform); |
| 99 | } |
| 100 | |
| 101 | var root = document.getElementById('wpa-events-landing'); |
| 102 | if (!root) { |
| 103 | return; |
| 104 | } |
| 105 | |
| 106 | var resizeBus = createResizeBus(); |
| 107 | initCarousel(root, resizeBus); |
| 108 | resizeBus.attach(); |
| 109 | })(); |
| 110 |