127 lines
5.5 KiB
JavaScript
127 lines
5.5 KiB
JavaScript
|
|
alertIdArray = [];
|
|
window.YT = typeof YT == "undefined" ? {} : YT;
|
|
window.YT.Alert = { Success: null, Error: null, Tip: null };
|
|
|
|
|
|
YT.Alert.Success = function (text) {
|
|
let ranId = Math.floor(Math.random() * 100000);
|
|
$("body").append(`<div id='success-alert-${ranId}' class='alert alert-dismissible yt-alert shadow-lg fade show' role = 'alert' style='display:none;'>
|
|
<span class="material-icons fs-3">check_circle</span><strong>${text}</strong></div>`)
|
|
|
|
//紀錄上一筆出現的alert
|
|
alertIdArray.push("success-alert-" + ranId)
|
|
alertIdArray.length > 2 ? alertIdArray.shift() : ""
|
|
$("#success-alert-" + ranId).fadeIn(300);
|
|
//判斷上一筆是否還存在頁面中
|
|
if (typeof ($("#" + alertIdArray[0]).css("bottom")) != "undefined" && $("#" + alertIdArray[0]).css("display") != "none" && (alertIdArray[1] != "" || alertIdArray[1] != null)) {
|
|
//存在的話下一個alert出現在前一個alert上面
|
|
let newAlertWidth = parseInt($("#" + alertIdArray[0]).css("bottom").split('px')[0]) + parseInt($("#" + alertIdArray[0]).css("height")) + 10 + "px"
|
|
$("#" + alertIdArray[1]).css("bottom", newAlertWidth);
|
|
}
|
|
$("#success-alert-" + ranId).click(function () {
|
|
$("#success-alert-" + ranId).fadeOut(300);
|
|
})
|
|
|
|
setTimeout(function () { $("#success-alert-" + ranId).fadeOut(300); }, 6000);
|
|
setTimeout(function () {
|
|
$("#success-alert-" + ranId).remove();
|
|
alertIdArray.splice($.inArray("#success-alert-" + ranId, alertIdArray), 1);
|
|
}, 7000);
|
|
|
|
}
|
|
|
|
YT.Alert.Error = function (text) {
|
|
let ranId = Math.floor(Math.random() * 100000);
|
|
$("body").append(`<div id='danger-alert-${ranId}' class='alert alert-dismissible yt-alert shadow-lg fade show' role = 'alert' style='display:none;'>
|
|
<span class="material-icons fs-3">error</span><strong>${text}</strong></div>`)
|
|
|
|
alertIdArray.push("danger-alert-" + ranId);
|
|
alertIdArray.length > 2 ? alertIdArray.shift() : ""
|
|
$("#danger-alert-" + ranId).fadeIn(300);
|
|
if (typeof ($("#" + alertIdArray[0]).css("bottom")) != "undefined" && $("#" + alertIdArray[0]).css("display") != "none" && (alertIdArray[1] != "" || alertIdArray[1] != null)) {
|
|
let newAlertWidth = parseInt($("#" + alertIdArray[0]).css("bottom").split('px')[0]) + parseInt($("#" + alertIdArray[0]).css("height")) + 10 + "px"
|
|
$("#" + alertIdArray[1]).css("bottom", newAlertWidth);
|
|
}
|
|
$("#danger-alert-" + ranId).click(function () {
|
|
$("#danger-alert-" + ranId).fadeOut(300);
|
|
})
|
|
|
|
setTimeout(function () {
|
|
$("#danger-alert-" + ranId).fadeOut(300);
|
|
alertIdArray.splice($.inArray("#danger-alert-" + ranId, alertIdArray), 1);
|
|
}, 6000);
|
|
setTimeout(function () { $("#danger-alert-" + ranId).remove(); }, 7000);
|
|
|
|
}
|
|
|
|
YT.Alert.Tip = function (text, type = null,isLoading = true, color = null) {
|
|
let ranId = Math.floor(Math.random() * 100000);
|
|
let iconHtml = "";
|
|
if (isLoading) {
|
|
iconHtml = `<div class="lds-ring"><div></div><div></div><div></div><div></div></div>`;
|
|
} else {
|
|
iconHtml = `<span class="material-icons fs-3">error</span>`;
|
|
}
|
|
$("body").append(`<div id='tip-alert-${ranId}' class='alert alert-dismissible yt-alert shadow-lg fade show' role = 'alert' style='display:none;'>
|
|
${iconHtml}<strong id="alert-text-${ranId}">${text}</strong></div>`)
|
|
|
|
alertIdArray.push("tip-alert-" + ranId);
|
|
alertIdArray.length > 2 ? alertIdArray.shift() : ""
|
|
if (color != null) {
|
|
$("#tip-alert-" + ranId).css("background-color", color);
|
|
}
|
|
|
|
if (type == null) {
|
|
$("#tip-alert-" + ranId).fadeIn(300);
|
|
if (typeof ($("#" + alertIdArray[0]).css("bottom")) != "undefined" && $("#" + alertIdArray[0]).css("display") != "none" && (alertIdArray[1] != "" || alertIdArray[1] != null)) {
|
|
let newAlertWidth = parseInt($("#" + alertIdArray[0]).css("bottom").split('px')[0]) + parseInt($("#" + alertIdArray[0]).css("height")) + 10 + "px"
|
|
$("#" + alertIdArray[1]).css("bottom", newAlertWidth);
|
|
}
|
|
$("#tip-alert-" + ranId).click(function () {
|
|
$("#tip-alert-" + ranId).fadeOut(300);
|
|
})
|
|
setTimeout(function () {
|
|
$("#tip-alert-" + ranId).fadeOut(300);
|
|
alertIdArray.splice($.inArray("#tip-alert-" + ranId, alertIdArray), 1);
|
|
}, 6000);
|
|
|
|
setTimeout(function () { $("#tip-alert-" + ranId).remove(); }, 7000);
|
|
} else if (type == "show") {
|
|
$("#tip-alert-" + ranId).fadeIn(300);
|
|
} else if (type == "hide") {
|
|
$("#tip-alert-" + ranId).fadeOut(300);
|
|
alertIdArray.splice($.inArray("#tip-alert-" + ranId, alertIdArray), 1);
|
|
setTimeout(function () {
|
|
$("#tip-alert-" + ranId).remove();
|
|
}, 1000);
|
|
}
|
|
return { id: "#tip-alert-" + ranId, ele: $("#tip-alert-" + ranId) };
|
|
|
|
}
|
|
|
|
|
|
//因非使用 Require 引用，$.fn 被二次引用 jquery.js 吃掉，則移至 site.js
|
|
|
|
//$.fn.YTAlert = function () {
|
|
// let th = { element: this };
|
|
// th.hide = function (delay = 0) {
|
|
// let obj = this;
|
|
// setTimeout(function () {
|
|
// $(obj.element).fadeOut(300);
|
|
// alertIdArray.splice($.inArray($(obj.element).prop("id"), alertIdArray), 1);
|
|
// setTimeout(function () {
|
|
// $(obj.element).remove();
|
|
// }, 1000);
|
|
// }, delay);
|
|
// }
|
|
|
|
// th.text = function (text) {
|
|
// let obj = this;
|
|
// let id = $(obj.element).prop("id").split("tip-alert-")[1];
|
|
// $(`#alert-text-${id}`).text(text);
|
|
// }
|
|
// return th;
|
|
//}
|
|
|