image-carousel.js

"use strict";
const translator = require("ks-cheap-translator")
class ImageCarousel {
    constructor(props) {
        this.props = props;
        this.id = this.props.images.join("").replace(/[\s\./]/g, "");
        this.state = {
            showImageIndex: 0,
        };
        this.RUN_INTERVAL = 5000;
        this.props.images.length > 1 && this.run();
    }

    run() {
        const runningInterval = setInterval(() => {
            let { showImageIndex } = this.state;
            const { images } = this.props;
            this.state.showImageIndex = showImageIndex < images.length - 1 ? ++showImageIndex : 0;
            this.refresh();
        }, this.RUN_INTERVAL);

        obj2htm.registerAsyncSubscription(this.id, function () {
            clearInterval(runningInterval);
        });

        this.runningInterval = runningInterval;
    }

    set_image_index(i) {
        clearInterval(this.runningInterval);
        this.state.showImageIndex = i;
        this.refresh();
    }

    refresh() {
        obj2htm.subRender(this.render_image(), document.getElementById(this.id + "-img-element"), {
            mode: "replace",
        });
        obj2htm.subRender(this.render_bullets(), document.getElementById(this.id + "-bullets"), {
            mode: "replace",
        });
    }


    render_image() {
        return {
            tag: "img",
            id: this.id + "-img-element",
            property: "image",
            alt: `image carousel ${this.props.images[this.state.showImageIndex].replace(/\.[A-Za-z]+/, "")}`,
            src: this.props.images[this.state.showImageIndex],
        };
    }

    render_bullets() {
        return this.props.images.length > 1 ? {
            tag: "div",
            id: this.id + "-bullets",
            class: "carousel-bullets",
            contents: this.props.images.map((_, i) => {
                const active = this.state.showImageIndex === i;
                return {
                    tag: "span",
                    class: `bullet ${active ? "active" : ""}`,
                    onclick: this.set_image_index.bind(this, i),
                };
            }),
        } : { tag: "span" };
    }

    render() {
        return {
            tag: "div",
            id: this.id,
            class: "image-carousel",
            contents: [
                this.render_image(),
                this.render_bullets(),
            ],
        };
    }
}

module.exports = ImageCarousel;