User:Huawei251/MediaWiki:Gadget-bluedeck-ding.js: Difference between revisions
Content added Content deleted
(test (may last for a few days)) |
No edit summary |
||
Line 1: | Line 1: | ||
// <nowiki> |
// <nowiki> |
||
/** |
/** |
||
* Bluedeck ding |
* Bluedeck ding |
||
* |
* |
||
* 在页面顶端展示的提示框。具体样式可参见维基小工具“确认登出”。 |
|||
⚫ | |||
* |
* |
||
* 基本用法:bluedeck.ding("提示信息", "type"); |
* 基本用法:bluedeck.ding("提示信息", "type"); |
||
* type可取default、warning、info、success、confusion |
* type可取default、warning、info、success、confusion |
||
* |
|||
⚫ | |||
* @author User:Bluedeck |
|||
* @author User:高文海 (组件化) |
|||
*/ |
*/ |
||
Revision as of 13:23, 14 April 2020
// <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 User:Bluedeck
* @author User:高文海 (组件化)
*/
(function (window, document) {
var _ding = (function () {
if (!document.getElementById("bluedeck_ding")) {
document.getElementsByTagName("body")[0].insertAdjacentHTML("afterbegin", "<style>#bluedeck_ding button{margin: 0 0.2em; background:transparent; border:0.2em solid white; border-radius: 9em; padding: 0 0.7em; box-sizing: border-box; color: inherit; font-weight: inherit;}#bluedeck_ding button:active{background:rgba(255,255,255,0.6)}</style>");
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;
if (!ttl)
ttl = 3500;
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: { text: "rgba(255, 255, 255, 1)", background: "rgba(221, 51, 51, 1)" },
info: { text: "rgba(255, 255, 255, 1)", background: "rgba(51, 102, 204, 1)" },
success: { text: "rgba(255, 255, 255, 1)", background: "rgba(0, 175, 137, 1)" },
confusion: { text: "rgba(0, 0, 0, 1)", background: "rgba(234, 236, 240, 1)" },
default: { text: "rgba(0, 0, 0, 1)", background: "rgba(234, 236, 240, 1)" }
};
if (!color_sets[type])
type = "confusion";
var retractant = persist ? "" : "onclick='this.style.transform = \"translateY(-130%)\";setTimeout(function(){this.remove()}.bind(this), 500);' ";
ding_ele.insertAdjacentHTML("beforeend",
"<div " +
retractant +
"style='" +
"position:fixed; top:0; left:0; right:0; margin: 0 0 auto 0; height: auto; line-height: 1.4em; " +
"padding: 0.6em 2em; opacity: 1; text-align: center; z-index: 9999; font-size: 86%; box-shadow: 0 2px 5px rgba(0,0,0,0.2); " +
"font-weight: bold; transform: translateY(-130%); transition: all 0.2s;" +
"background: " + color_sets[type].background + "; color:" + color_sets[type].text + "; ' " +
">" +
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>