bg-manager.js

///  參看文件: https://felgo.com/doc/felgo-different-screen-sizes

/**
 *    Bg Manager
 *
 *    PROPS
 *    =====
 *
 *    speed {number}
 *
 *    METHODS
 *    =======
 *
 *    init(opts)
 *        @param {object}   opts
 *        @param {number}   opts.scale
 *        @param {[string]} opts.urls
 *        @param {number}   opts.zIndex = 0
 *
 *    resize(scale)
 *        @param {number}  scale
 *
 *    resize(urls)
 *        @param {[string]} urls
 *
 *    clear()
 *
 *    update(urls)
 *         @param {[string]} urls
 *
 *    moveDown()
 */

const MOVABLE_CNT = 2;

const _new = () => {
    let _root;
    let _speed = 10;
    let _threshold;
    let _pause = false;

    /// !!! 處理跟 top 有關的計算
    ///     統一用 int 好像比較不會產生誤差
    const _n = s => parseInt(s, 10);

    const _placeFirstToLast = () => {
        if(_root.firstChild) {
            const newNode = _root.firstChild.cloneNode(false);

            _root.removeChild(_root.firstChild);

            _root.appendChild(newNode);

            newNode.style.top = parseInt(_root.firstChild.style.top, 10) +  -1 * (_root.childNodes.length - 1) * _n(_root.style.height) + 'px';
        }
    };

    const _append = urls => {
        const len = urls.length;

        urls.forEach((url, idx) => {
            const elBg = document.createElement('div');
            elBg.style.width = '100%';
            elBg.style.height = '100%';
            elBg.style.position = 'absolute';

            if(len >= MOVABLE_CNT) {
                elBg.style.top = -1 * idx * _n(_root.style.height) + 'px';
            } else {
                elBg.style.top = 0;
            }

            elBg.style.left = 0;
            elBg.style.backgroundPosition = 'center';
            elBg.style.backgroundRepeat = 'no-repeat';
            elBg.style.backgroundSize = 'contain';
            elBg.style.backgroundImage = `url('${url}')`; /// https://i.imgur.com/Day1XAT.png
            _root.appendChild(elBg);
        });
    };

    const moveDown = () => {
        if(_pause === true) {
            return;
        }
        const nodes = _root.childNodes;
        const len = _root.childNodes.length;
        if(len < MOVABLE_CNT) {
            return;
        }

        if(_n(_root.firstChild.style.top) >= _threshold) {
            return _placeFirstToLast();
        }

        nodes.forEach(n => n.style.top = parseFloat(n.style.top) + _speed + 'px');
    };

     const clear = () => {
        while(_root.firstChild) {
            _root.removeChild(_root.firstChild);
        }
    };

    const reset = urls => {
        clear();
        _append(urls);
    };

    const update = urls => {
        if (_root.hasChildNodes()) {
            _root.childNodes.forEach((elBg, idx) => {
                const url = urls[idx];
                elBg.style.backgroundImage = `url('${url}')`;
            });
        }
    };

    const resize = scale => {
        const BG_W = 844 * scale;  /// raw: 843.75
        const BG_H = 1627 * scale; /// 1626.5625
        const WIN_W =  window.innerWidth;
        const WIN_H = window.innerHeight;

        _root.style.width = BG_W + 'px';
        _root.style.height = BG_H + 'px';
        _root.style.top = -0.5 * (BG_H - WIN_H) + 'px';
        _root.style.left =  -0.5 * (BG_W - WIN_W) + 'px';

        _threshold = _n(_root.style.height);

        const len = _root.childNodes.length;
        if(len >= MOVABLE_CNT) {
            _pause = true;
            _root.childNodes.forEach((c, idx) => {
                c.style.top = -1 * idx * _n(BG_H) + 'px';
            });
            setTimeout(() => _pause = false, 1000/60);
        }
    };

    const init = ({scale, urls, zIndex}) => {
        _root = document.createElement('div');
        _root.style.position = 'fixed';
        _root.style.zIndex = typeof zIndex !== 'number' ? 0 : zIndex;
        _root.style,overflow = 'hidden';

        resize(scale);

        document.body.insertBefore(_root, document.body.firstChild);

        _append(urls);
    };

    return {
        init,
        resize,
        reset,
        clear,
        update,
        moveDown,
        get speed() { return _speed },
        set speed(s) { _speed = s },
    }
};

module.exports = {
    new: _new,
};