☰

H2P: notify util

通知栏

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

此脚本不应直接安装。它是供其他脚本使用的外部库，要使用该库请加入元指令 // @require https://update.cn-greasyfork.org/scripts/411280/847415/H2P%3A%20notify%20util.js 

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