|
1 |
| -import { Controller } from '@hotwired/stimulus' |
| 1 | +import { Controller } from "@hotwired/stimulus"; |
2 | 2 |
|
3 | 3 | export default class extends Controller {
|
4 |
| - static targets = [ |
5 |
| - "carousel", "carouselTimer", "template" |
6 |
| - ] |
| 4 | + static targets = ["carousel", "carouselTimer", "template"]; |
7 | 5 |
|
8 | 6 | initialize() {
|
9 |
| - this.paused = false |
10 |
| - this.runtime = 0 |
| 7 | + this.paused = false; |
| 8 | + this.runtime = 0; |
11 | 9 | this.times = 1;
|
12 | 10 | }
|
13 | 11 |
|
14 | 12 | connect() {
|
15 |
| - // dont cycle carousel if it only hase one item. |
16 |
| - if ( this.templateTargets.length > 1 ) { |
17 |
| - this.cycle() |
| 13 | + // dont cycle carousel if it only hase one item. |
| 14 | + if (this.templateTargets.length > 1) { |
| 15 | + this.cycle(); |
18 | 16 | }
|
19 | 17 | }
|
20 | 18 |
|
21 | 19 | changeFeatured(next) {
|
22 |
| - let current = this.carouselTarget.children[0] |
23 |
| - let nextItem = next.content.cloneNode(true) |
24 |
| - |
25 |
| - this.carouselTarget.appendChild(nextItem) |
| 20 | + let current = this.carouselTarget.children[0]; |
| 21 | + let nextItem = next.content.cloneNode(true); |
26 | 22 |
|
27 |
| - if( current ) { |
| 23 | + this.carouselTarget.appendChild(nextItem); |
| 24 | + |
| 25 | + if (current) { |
28 | 26 | current.style.marginLeft = "-100%";
|
29 |
| - setTimeout( () => { |
30 |
| - this.carouselTarget.removeChild(current) |
31 |
| - }, 700) |
| 27 | + setTimeout(() => { |
| 28 | + this.carouselTarget.removeChild(current); |
| 29 | + }, 700); |
32 | 30 | }
|
33 | 31 | }
|
34 | 32 |
|
35 | 33 | changeIndicator(current, next) {
|
36 | 34 | let timers = this.carouselTimerTargets;
|
37 | 35 | let currentTimer = timers[current];
|
38 |
| - let nextTimer = timers[next] |
| 36 | + let nextTimer = timers[next]; |
39 | 37 |
|
40 |
| - if ( currentTimer ) { |
41 |
| - currentTimer.classList.remove("timer-active") |
42 |
| - currentTimer.style.width = "1rem" |
| 38 | + if (currentTimer) { |
| 39 | + currentTimer.classList.remove("timer-active"); |
| 40 | + currentTimer.style.width = "1rem"; |
| 41 | + } |
| 42 | + if (nextTimer) { |
| 43 | + nextTimer.style.width = "4rem"; |
| 44 | + nextTimer.classList.add("timer-active"); |
43 | 45 | }
|
44 |
| - if( nextTimer) { |
45 |
| - nextTimer.style.width = "4rem" |
46 |
| - nextTimer.classList.add("timer-active") |
47 |
| - } |
48 | 46 | }
|
49 | 47 |
|
50 | 48 | Pause() {
|
51 |
| - this.paused = true |
| 49 | + this.paused = true; |
52 | 50 | }
|
53 | 51 |
|
54 | 52 | Resume() {
|
55 |
| - this.paused = false |
| 53 | + this.paused = false; |
56 | 54 | }
|
57 | 55 |
|
58 | 56 | cycle() {
|
59 | 57 | this.interval = setInterval(() => {
|
60 | 58 | // maintain paused state through entire loop
|
61 |
| - let paused = this.paused |
| 59 | + let paused = this.paused; |
62 | 60 |
|
63 |
| - let activeTimer = document.getElementsByClassName("timer-active")[0] |
64 |
| - if( paused ) { |
65 |
| - if( activeTimer ) { |
66 |
| - activeTimer.classList.add("timer-pause") |
| 61 | + let activeTimer = document.getElementsByClassName("timer-active")[0]; |
| 62 | + if (paused) { |
| 63 | + if (activeTimer) { |
| 64 | + activeTimer.classList.add("timer-pause"); |
67 | 65 | }
|
68 | 66 | } else {
|
69 |
| - if( activeTimer && activeTimer.classList.contains("timer-pause")) { |
70 |
| - activeTimer.classList.remove("timer-pause") |
| 67 | + if (activeTimer && activeTimer.classList.contains("timer-pause")) { |
| 68 | + activeTimer.classList.remove("timer-pause"); |
71 | 69 | }
|
72 | 70 | }
|
73 | 71 |
|
74 |
| - if( !paused && this.runtime % 5 == 0 ) { |
75 |
| - let currentIndex = this.times % this.templateTargets.length |
76 |
| - let nextIndex = (this.times + 1) % this.templateTargets.length |
77 |
| - |
78 |
| - this.changeIndicator(currentIndex, nextIndex) |
79 |
| - this.changeFeatured( |
80 |
| - this.templateTargets[nextIndex] |
81 |
| - ) |
82 |
| - this.times ++ |
| 72 | + if (!paused && this.runtime % 5 == 0) { |
| 73 | + let currentIndex = this.times % this.templateTargets.length; |
| 74 | + let nextIndex = (this.times + 1) % this.templateTargets.length; |
| 75 | + |
| 76 | + this.changeIndicator(currentIndex, nextIndex); |
| 77 | + this.changeFeatured(this.templateTargets[nextIndex]); |
| 78 | + this.times++; |
83 | 79 | }
|
84 | 80 |
|
85 |
| - if( !paused ) { |
86 |
| - this.runtime++ |
| 81 | + if (!paused) { |
| 82 | + this.runtime++; |
87 | 83 | }
|
88 |
| - }, 1000) |
| 84 | + }, 1000); |
89 | 85 | }
|
90 | 86 |
|
91 | 87 | disconnect() {
|
|
0 commit comments