☰

H2P: notify util

通知栏

目前为 2020-09-13 提交的版本。查看 最新版本。

此脚本不应直接安装，它是一个供其他脚本使用的外部库。如果您需要使用该库，请在脚本元属性加入：// @require https://update.cn-greasyfork.org/scripts/411280/847393/H2P%3A%20notify%20util.js 

  1. // ==UserScript==
  2. // @name        H2P: notify util
  3. // @namespace   http://tampermonkey.net/
  4. // @version     0.0.1
  5. // @icon        http://www.douyutv.com/favicon.ico
  6. // @description 通知栏
  7. // @author      H2P
  8. // @compatible  chrome
  9. // ==/UserScript==
  10.  
  11. ((w) => {
  12.   'use strict';
  13.  
  14.   const notifyType = {
  15.     default: {
  16.       bgColor: '#e6ffff',
  17.       bdColor: '#23bdd9'
  18.     },
  19.     success: {
  20.       bgColor: '#f6ffec',
  21.       bdColor: '#53752d'
  22.     },
  23.     warn: {
  24.       bgColor: '#fefbe6',
  25.       bdColor: '#fdc446'
  26.     },
  27.     error: {
  28.       bgColor: '#fff0ef',
  29.       bdColor: '#e75252'
  30.     }
  31.   }
  32.  
  33.   w.$notifyMgr = (() => {
  34.     const style_notify = document.createElement('style');
  35.     style_notify.id = 'h2p-style-notify';
  36.     style_notify.innerHTML = `
  37.       #h2p-div-notify-container {
  38.         position: fixed;
  39.         width: 280px;
  40.         bottom: 20px;
  41.         left: 20px;
  42.         overflow: hidden;
  43.         z-index: 9999;
  44.       }
  45.  
  46.       .h2p-div-notify-item {
  47.         position: relative;
  48.         width: 250px;
  49.         height: 25px;
  50.         right: -280px;
  51.         padding: 9px 13px;
  52.         margin: 6px 0;
  53.         border: 1px solid;
  54.         border-radius: 5px;
  55.         display: flex;
  56.         align-items: center;
  57.         transition: left 1.5s, right 1.5s;
  58.       }
  59.  
  60.       .h2p-div-notify-item-in {
  61.         right: 0;
  62.       }
  63.  
  64.       .h2p-div-notify-close {
  65.         position: absolute;
  66.         top: 15px;
  67.         right: 20px;
  68.         cursor: pointer;
  69.       }
  70.  
  71.       .h2p-div-notify-close::before, .h2p-div-notify-close::after {
  72.         position: absolute;
  73.         content: '';
  74.         width: 12px;
  75.         height: 2px;
  76.         background: chocolate;
  77.       }
  78.  
  79.       .h2p-div-notify-close::before {
  80.         transform: rotate(45deg);
  81.       }
  82.       .h2p-div-notify-close::after {
  83.         transform: rotate(-45deg);
  84.       }
  85.     `;
  86.     document.body.appendChild(style_notify);
  87.  
  88.     const div_notify = document.createElement('div');
  89.     div_notify.id = 'h2p-div-notify-container';
  90.     document.body.appendChild(div_notify);
  91.  
  92.     const Notify = function() {
  93.       this.createNotify = ({ msg = '', type = notifyType.default, autoClose = true }) => {
  94.         const ran = Math.floor(Math.random() * 100000000);
  95.         const div_notify_item = document.createElement('div');
  96.         div_notify_item.id = `h2p-div-notify-${ran}`;
  97.         div_notify_item.classList.add('h2p-div-notify-item');
  98.         div_notify_item.style.backgroundColor = type.bgColor;
  99.         div_notify_item.style.borderColor = type.bdColor;
  100.         div_notify_item.innerHTML = msg;
  101.         $H2P('div#h2p-div-notify-container').appendChild(div_notify_item);
  102.  
  103.         const div_notify_item_close = document.createElement('div');
  104.         div_notify_item_close.id = `h2p-div-notify-close-${ran}`;
  105.         div_notify_item_close.classList.add('h2p-div-notify-close');
  106.         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]}`); })
  107.         $H2P('div#h2p-div-notify-container').appendChild(div_notify_item_close);
  108.  
  109.         setTimeout((id) => {
  110.           // 显示通知栏
  111.           $H2P(`#${id}`).classList.add('h2p-div-notify-item-in');
  112.           autoClose && setTimeout(this.closeNotify, 4000, id);
  113.         }, 100, div_notify_item.id);
  114.       }
  115.  
  116.       this.closeNotify = (id = '') => {
  117.         $H2P(`#${id}`).classList.remove('h2p-div-notify-item-in');
  118.         setTimeout(() => {
  119.           $H2P('div#h2p-div-notify-container').removeChild($H2P(`#${id}`));
  120.         }, 1500);
  121.       }
  122.     }
  123.     return new Notify();
  124.   })();
  125. })(window)