ms1inscription-v5/js/ms1-loader.js

/**
 * MS1 — Loader coureur (overlay + inline).
 * Usage : Ms1Loader.show() / Ms1Loader.hide() / Ms1Loader.inlineHtml(message)
 * Norme MS1 : tout message d'attente AJAX/panel doit utiliser Ms1Loader.inlineHtml().
 */
(function (global, $) {
    'use strict';

    var config = {
        src: '/images/ms1-runner-loader.gif',
        labelWait: 'Chargement...'
    };

    function escHtml(str) {
        return String(str == null ? '' : str)
            .replace(/&/g, '&')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;');
    }

    function runnerImg() {
        return '<img class="ms1-loader__runner" src="' + escHtml(config.src) + '" alt="" role="presentation" decoding="async">';
    }

    function init(options) {
        if (options) {
            $.extend(config, options);
        }
    }

    function inlineHtml(message) {
        var msg = message == null || message === '' ? config.labelWait : message;
        return '<div class="ms1-loader ms1-loader--inline" role="status" aria-live="polite" aria-busy="true">'
            + runnerImg()
            + '<span class="ms1-loader__label">' + escHtml(msg) + '</span>'
            + '</div>';
    }

    function show(message) {
        var $preloader = $('#preloader');
        if (!$preloader.length) {
            return;
        }
        clearProgress();
        if (message != null && message !== '') {
            var $text = $('#preloader_text');
            if ($text.length) {
                $text.html(message);
            }
        }
        $preloader.show();
    }

    function clearProgress() {
        $('#spinner .ms1-loader__progress').remove();
    }

    /**
     * MSIN-4433 — Overlay avec coureur + barre de progression (% réel).
     * @param {number} current
     * @param {number} total
     * @param {string} [message]
     */
    function showProgress(current, total, message) {
        var $preloader = $('#preloader');
        if (!$preloader.length) {
            return;
        }

        var intCurrent = Math.max(0, parseInt(current, 10) || 0);
        var intTotal = Math.max(1, parseInt(total, 10) || 1);
        var intPct = Math.min(100, Math.round((intCurrent / intTotal) * 100));

        var $spinner = $('#spinner');
        var $bar = $spinner.find('.ms1-loader__progress');
        if (!$bar.length) {
            $bar = $('<div class="ms1-loader__progress" role="progressbar" aria-valuemin="0" aria-valuemax="100">'
                + '<div class="ms1-loader__progress-track">'
                + '<div class="ms1-loader__progress-fill"></div>'
                + '</div>'
                + '<span class="ms1-loader__progress-pct"></span>'
                + '</div>');
            $('#preloader_text').after($bar);
        }

        $bar.attr('aria-valuenow', intPct);
        $bar.find('.ms1-loader__progress-fill').css('width', intPct + '%');
        $bar.find('.ms1-loader__progress-pct').text(intPct + '%');

        if (message != null && message !== '') {
            var $text = $('#preloader_text');
            if ($text.length) {
                $text.html(message);
            }
        }

        $preloader.show();
    }

    function hide() {
        clearProgress();
        $('#preloader').fadeOut('slow');
    }

    global.Ms1Loader = {
        init: init,
        inlineHtml: inlineHtml,
        show: show,
        showProgress: showProgress,
        hide: hide
    };
}(window, jQuery));