☰

H2P: notify util

通知栏

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

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

  1. // ==UserScript==
  2. // @name        H2P: notify util
  3. // @namespace   http://tampermonkey.net/
  4. // @version     0.1.0
  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-container {
  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-container-in {
  42.       right: 0;
  43.     }
  44.  
  45.     .h2p-div-notify-item {
  46.       width: 235px;
  47.       height: 25px;
  48.       margin-right: 5px;
  49.       display: flex;
  50.       align-items: center;
  51.     }
  52.  
  53.     .h2p-div-notify-close {
  54.       cursor: pointer;
  55.     }
  56.     .h2p-div-notify-close::before, .h2p-div-notify-close::after {
  57.       position: absolute;
  58.       content: '';
  59.       width: 12px;
  60.       height: 2px;
  61.       background: chocolate;
  62.     }
  63.     .h2p-div-notify-close::before {
  64.       transform: rotate(45deg);
  65.     }
  66.     .h2p-div-notify-close::after {
  67.       transform: rotate(-45deg);
  68.     }
  69.   `;
  70.   document.body.appendChild(style_notify);
  71.   const div_notify = document.createElement('div');
  72.   div_notify.id = 'h2p-div-notify-container';
  73.   document.body.appendChild(div_notify);
  74.  
  75.   w.$notifyMgr = (() => {
  76.     const Notify = function() {
  77.       this.type = {
  78.         default: {
  79.           bgColor: '#e6ffff',
  80.           bdColor: '#23bdd9'
  81.         },
  82.         success: {
  83.           bgColor: '#f6ffec',
  84.           bdColor: '#53752d'
  85.         },
  86.         warn: {
  87.           bgColor: '#fefbe6',
  88.           bdColor: '#fdc446'
  89.         },
  90.         error: {
  91.           bgColor: '#fff0ef',
  92.           bdColor: '#e75252'
  93.         }
  94.       }
  95.  
  96.       /**
  97.        * 创建弹窗
  98.        * @param {String} msg 显示的信息
  99.        * @param {Object} type 弹窗类型，通过 $notifyMgr.type 设置
  100.        * @param {Boolean} autoClose 弹窗是否自动关闭
  101.        * @returns {String} id 返回弹窗 id
  102.        */
  103.       this.createNotify = ({ msg = '', type = notifyType.default, autoClose = true }) => {
  104.         const ran = Math.floor(Math.random() * 100000000);
  105.         const div_notify_item_container = document.createElement('div');
  106.         div_notify_item_container.id = `h2p-div-notify-${ran}`;
  107.         div_notify_item_container.classList.add('h2p-div-notify-item-container');
  108.         div_notify_item_container.style.backgroundColor = type.bgColor;
  109.         div_notify_item_container.style.borderColor = type.bdColor;
  110.         div_notify_item_container.innerHTML = `
  111.           <div class="h2p-div-notify-item">${msg}</div>
  112.         `;
  113.  
  114.         const div_notify_item_close = document.createElement('div');
  115.         div_notify_item_close.id = `h2p-div-notify-close-${ran}`;
  116.         div_notify_item_close.classList.add('h2p-div-notify-close');
  117.         div_notify_item_close.addEventListener('click', (e) => { this.closeNotify(`h2p-div-notify-${e.currentTarget.id.match(/[a-zA-Z\-]*(\d+)[a-zA-Z\-]*/g)[1]}`); });
  118.         div_notify_item_container.appendChild(div_notify_item_close);
  119.  
  120.         $H2P('div#h2p-div-notify-container').appendChild(div_notify_item_container);
  121.  
  122.         setTimeout((id) => {
  123.           // 显示通知栏
  124.           $H2P(`#${id}`).classList.add('h2p-div-notify-item-container-in');
  125.           autoClose && setTimeout(this.closeNotify, 4000, id);
  126.         }, 100, div_notify_item_container.id);
  127.         
  128.         return div_notify_item_container.id;
  129.       }
  130.  
  131.       /**
  132.        * 关闭弹窗
  133.        * @param {String} id 
  134.        */
  135.       this.closeNotify = (id = '') => {
  136.         $H2P(`#${id}`).classList.remove('h2p-div-notify-item-container-in');
  137.         setTimeout(() => {
  138.           $H2P('div#h2p-div-notify-container').removeChild($H2P(`#${id}`));
  139.         }, 1500);
  140.       }
  141.     }
  142.     return new Notify();
  143.   })();
  144. })(window);