User:Huawei251/MediaWiki:Gadget-bluedeck-ding.js: Difference between revisions
Content added Content deleted
(test (may last for a few days)) |
m (Huawei251 moved page User:User:Huawei251/MediaWiki:Gadget-bluedeck-ding.js to User:Huawei251/MediaWiki:Gadget-bluedeck-ding.js without leaving a redirect) |
||
(4 intermediate revisions by the same user not shown) | |||
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 Bluedeck |
|||
* @author 高文海 (组件化) |
|||
*/ |
*/ |
||
Line 13: | Line 17: | ||
if (!document.getElementById("bluedeck_ding")) { |
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>"); |
document.getElementsByTagName("body")[0].insertAdjacentHTML("afterbegin", "<div id='bluedeck_ding'></div>"); |
||
} |
} |
||
Line 21: | Line 24: | ||
} |
} |
||
return function (message, type, ttl, history, persist) // default type="info", ttl=3500, history=true, persist = false. |
return function (message, type, ttl, history, persist) { // default type="info", ttl=3500, history=true, persist = false. |
||
{ |
if (!type) { |
||
⚫ | |||
type = "info"; |
type = "info"; |
||
⚫ | |||
if (typeof ttl === "number" && ttl < 1) |
if (typeof ttl === "number" && ttl < 1) { |
||
ttl = 1; |
ttl = 1; |
||
⚫ | |||
⚫ | |||
ttl = 3500; |
ttl = 3500; |
||
⚫ | |||
⚫ | |||
ttl = "long"; |
ttl = "long"; |
||
⚫ | |||
if (!history) |
if (!history) { |
||
history = true; |
history = true; |
||
} |
|||
if (!persist) |
if (!persist) { |
||
persist = false; |
persist = false; |
||
} |
|||
var ding_ele = document.getElementById("bluedeck_ding"); |
var ding_ele = document.getElementById("bluedeck_ding"); |
||
Line 47: | Line 51: | ||
var previous_ding = ding_ele.lastChild; |
var previous_ding = ding_ele.lastChild; |
||
previous_ding.style.transform = "translateY(-130%)"; |
previous_ding.style.transform = "translateY(-130%)"; |
||
setTimeout(function () { |
setTimeout(function () { |
||
previous_ding.remove(); |
|||
⚫ | |||
} |
} |
||
if (message === false || message === null || message === 0 || typeof message === "undefined") |
if (message === false || message === null || message === 0 || typeof message === "undefined") { |
||
return; |
return; |
||
} |
|||
var color_sets = |
var color_sets = ['warning', 'info', 'success', 'confusion', 'default']; |
||
⚫ | |||
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)" } |
|||
⚫ | |||
⚫ | |||
type = "confusion"; |
type = "confusion"; |
||
} |
|||
var retractant = persist ? "" : "onclick='this.style.transform = \"translateY(-130%)\";setTimeout(function(){this.remove()}.bind(this), 500);' "; |
var retractant = persist ? "" : "onclick='this.style.transform = \"translateY(-130%)\";setTimeout(function(){this.remove()}.bind(this), 500);' "; |
||
ding_ele.insertAdjacentHTML("beforeend", |
ding_ele.insertAdjacentHTML("beforeend", |
||
"<div " + |
"<div " + retractant + "class='ding " + type + "'>" + |
||
⚫ | |||
⚫ | |||
"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 + |
message + |
||
"</div>" |
"</div>" |
||
Line 81: | Line 75: | ||
var notice_ele = ding_ele.lastChild; |
var notice_ele = ding_ele.lastChild; |
||
setTimeout(function () { |
setTimeout(function () { |
||
notice_ele.style.transform = "translateY(0%)"; |
|||
⚫ | |||
if (ttl !== "long") { |
if (ttl !== "long") { |
||
setTimeout(function () { |
setTimeout(function () { |
||
notice_ele.style.transform = "translateY(-130%)"; |
|||
⚫ | |||
setTimeout(function () { |
|||
notice_ele.remove(); |
|||
}, ttl + 510); |
|||
} |
} |
||
Latest revision as of 14:27, 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 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>