Progress bar component js code

Примечание:

Эта страница - компонент, используемый на данной вики. Он предназначен для включения в другие страницы.

function getBar(progress) {
    var bar = BAR_TEXT + ' [';
    var stage = Math.ceil(progress * STAGE_RATIO);
    for (var i = 1; i <= BAR_WIDTH; i++) {
        if (stage >= i) {
            bar += '=';
        } else {
            bar += '&nbsp;';
        }
    }
    bar += ']&nbsp;';
    if (progress === 100) {
        bar += COMPLETE_TEXT;
    } else {
        if (progress < 10) {
            bar += '&nbsp;'
        }
        bar += progress + '%';
    }
    return bar;
}

document.addEventListener('DOMContentLoaded', function () {
    var barElem = document.querySelector('.bar');
    var contentElem = document.querySelector('.content');
    var initButton = document.querySelector('.init-button');
    var loadingText = document.querySelector('.loading-text');
    initButton.innerHTML = BUTTON_TEXT;

    function onFinish() {
        contentElem.style.display = 'block';
        if (HIDE_BAR_AFTER_FINISH) {
            barElem.style.display = 'none';
        }
    }

    var initialTick = true;

    var onClickInit = function () {
        if (HIDE_BUTTON_AFTER_INIT) {
            initButton.style.display = 'none';
        } else {
            initButton.innerHTML = BUTTON_TEXT_AFTER_INIT;
            initButton.removeEventListener('click', onClickInit);
            initButton.style.color = '#000';
        }

        if (LOADING_TEXT) {
            loadingText.style.display = 'block';
            loadingText.innerHTML = LOADING_TEXT;
        }

        var progress = 0;

        var tick = function () {
            barElem.innerHTML = getBar(progress);
            progress += PROGRESS_STEP;
            requestAnimationFrame(function () {
                if (progress <= 100) {
                    setTimeout(tick, initialTick ? INITIAL_TICK_TIMEOUT  : TICK_INTERVAL);
                    initialTick = false;
                } else {
                    barElem.innerHTML = getBar(100);
                    onFinish();
                }
            });
        };
        tick();
    };

    initButton.addEventListener('click', onClickInit);
});
Структурные: визуальный_элемент
версия страницы: 1, Последняя правка: 11 Фев. 2020, 19:11 (1731 день назад)
Пока не указано иное, содержимое этой страницы распространяется по лицензии Creative Commons Attribution-ShareAlike 3.0 License.