User:高文海/interface/MediaWiki:Gadget-bluedeck-ding.js
外观
注意:保存之后,你必须清除浏览器缓存才能看到做出的更改。Google Chrome、Firefox、Microsoft Edge及Safari:按住⇧ Shift键并单击工具栏的“刷新”按钮。参阅Help:绕过浏览器缓存以获取更多帮助。
// <nowiki>
/**
* Bluedeck ding
*
* 在页面顶端展示的提示框。具体样式可参见维基小工具“确认登出”。
*
* 基本用法:bluedeck.ding("提示信息", "type");
* type可取default、warning、info、success、confusion
*
* @source https://meta.wikimedia.org/wiki/User:Bluedeck/source/confirm-logout.js
* @author Bluedeck
* @author 高文海 (组件化)
*/
(function (window, document) {
var _ding = (function () {
if (!document.getElementById("bluedeck_ding")) {
document.getElementsByTagName("body")[0].insertAdjacentHTML("afterbegin", "<div id='bluedeck_ding'></div>");
}
if (!document.getElementById("bluedeck_ding_history")) {
document.getElementsByTagName("body")[0].insertAdjacentHTML("afterbegin", "<div id='bluedeck_ding_history'></div>");
}
return function (message, type, ttl, history, persist) { // default type="info", ttl=3500, history=true, persist = false.
if (!type) {
type = "info";
}
if (typeof ttl === "number" && ttl < 1) {
ttl = 1;
} else if (!ttl) {
ttl = 3500;
} else if (ttl === "long") {
ttl = "long";
}
if (!history) {
history = true;
}
if (!persist) {
persist = false;
}
var ding_ele = document.getElementById("bluedeck_ding");
var ding_hist_ele = document.getElementById("bluedeck_ding_history");
if (ding_ele.lastChild) {
var previous_ding = ding_ele.lastChild;
previous_ding.style.transform = "translateY(-130%)";
setTimeout(function () {
previous_ding.remove();
}, 500);
}
if (message === false || message === null || message === 0 || typeof message === "undefined") {
return;
}
var color_sets = ['warning', 'info', 'success', 'confusion', 'default'];
if (color_sets.indexOf(type) === -1) {
type = "confusion";
}
var retractant = persist ? "" : "onclick='this.style.transform = \"translateY(-130%)\";setTimeout(function(){this.remove()}.bind(this), 500);' ";
ding_ele.insertAdjacentHTML("beforeend",
"<div " + retractant + "class='ding " + type + "'>" +
message +
"</div>"
);
var notice_ele = ding_ele.lastChild;
setTimeout(function () {
notice_ele.style.transform = "translateY(0%)";
}, 10);
if (ttl !== "long") {
setTimeout(function () {
notice_ele.style.transform = "translateY(-130%)";
}, ttl + 10);
setTimeout(function () {
notice_ele.remove();
}, ttl + 510);
}
};
})();
if (window.bluedeck) {
window.bluedeck.ding = _ding;
} else {
window.bluedeck = {
ding: _ding
};
}
})(window, document);
// <nowiki>