minsky-kit/js/components/MarqueeItem.js

Kit of components for MINSKY web agency

// imports
import Component from 'minsky-kit/js/components/Component';

// class definition
export default class MarqueeItem extends Component {
    // constructor
    constructor (args, objectName = 'MarqueeItem') {
        args.debug = args.debug || false;

        // call super constructor
        super(args, objectName);

        // set properties
        this._parent = args.parent;
        this._width = args.width;
        this._speed = args.speed || 1.25;

        // add child to parent
        this._parent.$el.appendChild(this.$el);

        // position
        if (this._speed > 0) {
            this._xPos = this._width * this._parent.items.length;
        }
        else {
            this._xPos = this._parent.$el.clientWidth - (this._width * (this._parent.items.length + 1));
        }

        this.startXPos = this._xPos;
    }

    tick (factor = 1) {
        const speed = this._speed * factor;

        if (speed > 0) {
            if (-this._xPos >= this._width) {
                const offset = Math.abs(this._xPos) - this._width;
                this._xPos = this._width * (this._parent.items.length - 1) - offset;
            }

            this._xPos -= speed;
        }
        else {
            if (this._xPos >= this._parent.$el.clientWidth) {
                const offset = this._xPos - this._parent.$el.clientWidth;
                this._xPos = this._parent.$el.clientWidth - (this._width * (this._parent.items.length)) + offset;
            }

            this._xPos -= speed;
        }
    }

    draw () {
        this.$el.setAttribute('style', `transform: translate3d(${this._xPos}px, 0, 0)`);
    }

    resetPosition () {
        this._xPos = this.startXPos;
    }

    // destroy
    destroy () {
        this.$el.remove();

        super.destroy();
    }
}