toasts.js

toasts.js

// 版型依賴：Bootstrap 4 Toasts：https://getbootstrap.com/docs/4.3/components/toasts/
// 動畫依賴：Animate.css 3.7：https://daneden.github.io/animate.css/
// 觸發時機：頁面載入時，讀取 bake_toasts_* 之 cookies 內容，並產生類 Toasts 之訊息

showToasts();

// 產線
function showToasts() {
    // 基本設定
    const kuki_name = 'bake_toasts_';
    const offset = 1000;
    const default_delay = 7500;
    const default_autohide = true;
    const default_position = "right-top";
    const positions = {
        "right-top": "top: 12%; right: 2%;",
        "right-bottom": "bottom: 2%; right: 2%;",
        "page-center": "top: 25%; left: 50%; transform: translateX(-50%);"
    };
    const styles = {
        "primary": "white",
        "secondary": "white",
        "success": "white",
        "danger": "white",
        "warning": "dark",
        "info": "white",
        "light": "dark",
        "dark": "white",
        "white": "dark",
        "transparent": "dark"
    };
    // 逐一加工
    let n = 0;
    let read_kuki = kuki_name + n;
    const plate = document.createElement('DIV');
    while (getCookie(read_kuki) !== '') {
        // parse
        const t = getToast(getCookie(read_kuki));
        const config_autohide = t.autohide ? t.autohide === "True" : default_autohide;
        const config_position = t.position ? positions[t.position] : positions[default_position];
        const config_style = t.style ? "bg-" + t.style + " text-" + styles[t.style] : "";
        // set plate
        if (n === 0 || t.style === 'danger') {
            plate.style = "position: fixed; z-index: 99999; " + config_position;
            document.body.appendChild(plate);
        }
        // set toast
        const tot = genToast(read_kuki, t.title, t.message, config_style);
        const config_delay = default_delay + n * offset;
        plate.appendChild(tot);
        $(tot).toast({
            autohide: config_autohide,
            delay: config_delay
        });
        $(tot).toast('show');
        // set bomb
        if (t.style !== 'danger') {
            setBomb(read_kuki, config_delay);
        }
        // next
        ++n;
        read_kuki = kuki_name + n;
    }
}

// 製作 Toast DOM (base on Bootstrap 4.3 Toasts syntax)
function genToast(dom_id, title, message, style) {
    let toast = document.createElement('DIV');
    toast.classList.add('toast', 'shadow', 'shadow-lg', 'animated', 'fadeInDown');
    toast.id = dom_id;
    toast.innerHTML = '<div class="toast-header ' + style + '">'
        + '<strong class="mr-auto">' + title + '</strong>'
        + '<small class="ml-2 text-right" style="width: 2em; opacity: 0.2;" id="' + dom_id + '_boom"></small>'
        + '<button type="button" class="ml-2 mb-1 close" data-dismiss="toast"><span aria-hidden="true">&times;</span></button>'
        + '</div>'
        + '<div class="toast-body">'
        + message
        + '</div>';
    return toast;
}

// 倒數標示 DOM
function setBomb(dom_id, count_down) {
    $('#' + dom_id + '_boom').text(Math.floor(count_down / 1000));
    const si = setInterval(function () {
        const tiktok = parseInt($('#' + dom_id + '_boom').text()) - 1;
        if (tiktok < 0) {
            clearInterval(si);
            return;
        }
        $('#' + dom_id + '_boom').text(tiktok);
    }, 1000);
}

// 製作 Toast 內容
// 。style 定義參見：https://getbootstrap.com/docs/4.3/utilities/colors/#background-color
// 。position 區分 right-top、right-bottom、page-center
function doToast(title, message, style, position, autohide) {
    autohide = !autohide ? true : autohide;
    const value = '' +
        'title=' + encodeURIComponent(title) +
        '&message=' + encodeURIComponent(message) +
        '&style=' + (style ? style : 'success') +
        '&position=' + (style === 'danger' ? 'page-center' : position ? position : 'right-top') +
        '&autohide=' + (style === 'danger' ? 'False' : autohide ? 'True' : 'False');
    setCookie('bake_toasts_0', value, 3);
}

// 取得 Toast 內容 (回傳json)
function getToast(cookie_content) {
    var r = {};
    var c = cookie_content.split('&');
    c.forEach(function (v) {
        r[v.split('=')[0]] = v.split('=')[1];
    });
    return r;
}

// 製作 Cookie
function setCookie(cookie_name, cookie_value, alive_second) {
    var d = new Date();
    d.setTime(d.getTime() + alive_second * 1000);
    var expires = "expires=" + d.toUTCString();
    document.cookie = cookie_name + "=" + cookie_value + ";" + expires + ";path=/";
}

// 讀取 Cookie
function getCookie(cookie_name) {
    var name = cookie_name + '=';
    var ca = decodeURIComponent(document.cookie).split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) === ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) === 0) {
            return c.substring(name.length, c.length);
        }
    }
    document.cookie = cookie_name + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
    return '';
}