Page MenuHomeSealhub

autoscrolling-images.stimulus.ts
No OneTemporary

autoscrolling-images.stimulus.ts

import { Controller } from "stimulus";
export default class AutoscrollingImages extends Controller {
currentIndex = 0;
interval_id: number;
getInterval(): number {
return parseInt(
this.element.getAttribute("data-autoscrolling-images-interval") || "5"
);
}
getRadioButtons(): Array<HTMLInputElement> {
return Array.from(this.element.querySelectorAll(".autoscrolling-images__radio"));
}
handleRadioChange() {
const selectedRadio = this.getRadioButtons().findIndex(
(radio: HTMLInputElement) => radio.checked
);
this.currentIndex = selectedRadio !== -1 ? selectedRadio : 0;
}
async connect() {
this.currentIndex = 0;
let intervalTime: number;
const interval = this.getInterval();
if (!interval) {
intervalTime = interval * 1000;
} else {
intervalTime = 5000;
}
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
this.interval_id = setInterval(
() => this.next_slide(),
intervalTime
) as unknown as number;
}
async disconnect() {
clearInterval(this.interval_id);
}
next_slide() {
const carouselPages = this.element.querySelectorAll(
".autoscrolling-images__carousel-page"
);
const radioButtonIdPrefix = this.element
.querySelector(".autoscrolling-images-wrapper")
.getAttribute("data-carousel-id-prefix");
const nextIndex = (this.currentIndex + 1) % carouselPages.length;
const nextButton =
radioButtonIdPrefix + "-autoscrolling-images__radio-" + nextIndex;
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
(document.getElementById(nextButton) as HTMLInputElement).checked = true;
this.currentIndex = nextIndex;
// this.handleRadioChange();
}
}

File Metadata

Mime Type
text/x-java
Expires
Fri, Jul 4, 06:01 (1 d, 2 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
798331
Default Alt Text
autoscrolling-images.stimulus.ts (1 KB)

Event Timeline