请注意:更新本页面后,您可能需要清除浏览器缓存才能看到所作变更的影响。
Google Chrome、Microsoft Edge、Mozilla Firefox、Safari:按住⇧ Shift,同时单击“刷新”。
Google Chrome、Microsoft Edge、Mozilla Firefox、Safari:按住⇧ Shift,同时单击“刷新”。
本文件采用知识共享署名-相同方式共享 4.0 国际(CC BY-SA 4.0)许可协议授权。
- 您可以自由地:
- 分享 – 在任何媒介以任何形式复制、发行本作品
- 演绎 – 修改、转换或以本作品为基础进行创作
- 惟须遵守下列条件:
- 署名 – 您必须给出适当的署名(标明原作者),提供指向本许可协议的链接,同时标明是否(对原始作品)作了修改。您可以用任何合理的方式来署名,但是不得以任何方式暗示许可人为您或您的使用背书(即诱导原作者在不了解协议情况下给你授权)。
- 相同方式共享 – 如果您再混合、转换或者基于本作品进行创作,您必须基于与原先许可协议相同或相兼容的许可协议分发您贡献的作品。
"use strict";
/* <nowiki> */
/**
* SPDX-License-Identifier: CC-BY-SA-4.0
* _addText: '{{Gadget Header|license=CC-BY-SA-4.0}}'
*
* @source <zh.wikipedia.org/wiki/Special:Permalink/59753812>
*/
/* ding ("message here should be safe html, beacuse you can write <button>Buttons</button>", "info" | "warning" | "success" | "default", "long" | 10000 <-- expiry time in ms ) */
window.DingExposedInterface = function () {
/**
*
* @param {string} message message here should be safe html, beacuse you can write <button>Buttons</button> in this
* @param {string} type "info": dark blue/black, "warning": red/white, "success": green/white, "default": light blue/black (background/text)
* @param {number|"long"} ttl number of microseconds before ding element disappears, "long" if the ding should not disappear after a timeout
* @param {boolean} history does nothing currently
* @param {boolean} persist If the element should go away when user clicks anywhere on it. If persist= true && ttl= long, make sure to include a button to allow the user to remove the banner
*/
var ding = function ding(message, type, ttl, history, persist) {
if (type === undefined) {
type = "info";
}
if (ttl === undefined) {
ttl = 3500;
}
if (history === undefined) {
history = true;
}
if (persist === undefined) {
persist = false;
}
if (!document.querySelector("#ding")) {
document.body.insertAdjacentHTML("afterbegin", "<style>#ding button{box-sizing:border-box;margin:0 .2em;padding:0 .7em;border:.2em solid #fff;border-radius:9em;background:0 0;color:inherit;font-weight:inherit}#ding button:active{background:hsla(0deg 0% 100%/60%)}</style>");
document.body.insertAdjacentHTML("afterbegin", '<div id="ding"></div>');
}
if (!document.querySelector("#ding_history")) {
document.body.insertAdjacentHTML("afterbegin", '<div id="ding_history"></div>');
}
var dingEle = document.querySelector("#ding");
var previousMessage = dingEle.lastChild;
if (previousMessage) {
previousMessage.style.transform = "translateY(-130%)";
setTimeout(function () {
previousMessage.remove();
}, 500);
}
var color_sets = {
warning: {
text: "rgb(255, 255, 255)",
background: "rgb(221, 51, 51)"
},
info: {
text: "rgb(255, 255, 255)",
background: "rgb(51, 102, 204)"
},
success: {
text: "rgb(255, 255, 255)",
background: "rgb(0, 175, 137)"
},
confusion: {
text: "rgb(0, 0, 0)",
background: "rgb(234, 236, 240)"
},
"default": {
text: "rgb(0, 0, 0)",
background: "rgb(234, 236, 240)"
}
};
var retractant = persist ? "" : "onclick='this.style.transform=\"translateY(-130%)\";setTimeout(function(){this.remove()}.bind(this),500);' ";
dingEle.insertAdjacentHTML("beforeend", "<div ".concat(retractant, "style=\"position:fixed;right:0;bottom:0;left:0;z-index:9999;margin:0 0 auto;padding:.6em 2em;height:auto;box-shadow:0 2px 5px rgb(0,0,0,.2);text-align:center;font-weight:700;font-size:86%;line-height:1.4em;opacity:1;transition:all .2s;transform:translateY(-130%);background:").concat(color_sets[type].background, ";color:").concat(color_sets[type].text, ";\">").concat(message, "</div>"));
var noticeEle = dingEle.lastChild;
setTimeout(function () {
noticeEle.style.transform = "translateY(0%)";
}, 10);
if (ttl !== "long") {
setTimeout(function () {
noticeEle.style.transform = "translateY(-130%)";
}, ttl + 10);
setTimeout(function () {
noticeEle.remove();
}, ttl + 510);
}
};
return ding;
}();
/* </nowiki> */