通知栏
Version vom
Dieses Skript sollte nicht direkt installiert werden. Es handelt sich hier um eine Bibliothek für andere Skripte, welche über folgenden Befehl in den Metadaten eines Skriptes eingebunden wird // @require https://update.greatest.deepsurf.us/scripts/411280/847401/H2P%3A%20notify%20util.js
// ==UserScript==
// @name H2P: notify util
// @namespace http://tampermonkey.net/
// @version 0.0.1
// @icon http://www.douyutv.com/favicon.ico
// @description 通知栏
// @author H2P
// @compatible chrome
// ==/UserScript==
((w) => {
'use strict';
const style_notify = document.createElement('style');
style_notify.id = 'h2p-style-notify';
style_notify.innerHTML = `
#h2p-div-notify-container {
position: fixed;
width: 280px;
bottom: 20px;
left: 20px;
overflow: hidden;
z-index: 9999;
}
.h2p-div-notify-item {
position: relative;
width: 250px;
height: 25px;
right: -280px;
padding: 9px 13px;
margin: 6px 0;
border: 1px solid;
border-radius: 5px;
display: flex;
align-items: center;
transition: left 1.5s, right 1.5s;
}
.h2p-div-notify-item-in {
right: 0;
}
.h2p-div-notify-close {
position: absolute;
top: 15px;
right: 20px;
cursor: pointer;
}
.h2p-div-notify-close::before, .h2p-div-notify-close::after {
position: absolute;
content: '';
width: 12px;
height: 2px;
background: chocolate;
}
.h2p-div-notify-close::before {
transform: rotate(45deg);
}
.h2p-div-notify-close::after {
transform: rotate(-45deg);
}
`;
document.body.appendChild(style_notify);
const div_notify = document.createElement('div');
div_notify.id = 'h2p-div-notify-container';
document.body.appendChild(div_notify);
w.$notifyMgr = (() => {
const Notify = function() {
this.type = {
default: {
bgColor: '#e6ffff',
bdColor: '#23bdd9'
},
success: {
bgColor: '#f6ffec',
bdColor: '#53752d'
},
warn: {
bgColor: '#fefbe6',
bdColor: '#fdc446'
},
error: {
bgColor: '#fff0ef',
bdColor: '#e75252'
}
}
this.createNotify = ({ msg = '', type = notifyType.default, autoClose = true }) => {
const ran = Math.floor(Math.random() * 100000000);
const div_notify_item = document.createElement('div');
div_notify_item.id = `h2p-div-notify-${ran}`;
div_notify_item.classList.add('h2p-div-notify-item');
div_notify_item.style.backgroundColor = type.bgColor;
div_notify_item.style.borderColor = type.bdColor;
div_notify_item.innerHTML = msg;
$H2P('div#h2p-div-notify-container').appendChild(div_notify_item);
const div_notify_item_close = document.createElement('div');
div_notify_item_close.id = `h2p-div-notify-close-${ran}`;
div_notify_item_close.classList.add('h2p-div-notify-close');
div_notify_item_close.addEventListener('click', (e) => { this.closeNotify(`h2p-div-notify-${e.target.id.match(/[a-zA-Z\-]*(\d+)[a-zA-Z\-]*/g)[1]}`); })
$H2P('div#h2p-div-notify-container').appendChild(div_notify_item_close);
setTimeout((id) => {
// 显示通知栏
$H2P(`#${id}`).classList.add('h2p-div-notify-item-in');
autoClose && setTimeout(this.closeNotify, 4000, id);
}, 100, div_notify_item.id);
}
this.closeNotify = (id = '') => {
$H2P(`#${id}`).classList.remove('h2p-div-notify-item-in');
setTimeout(() => {
$H2P('div#h2p-div-notify-container').removeChild($H2P(`#${id}`));
}, 1500);
}
}
return new Notify();
})();
})(window);