H2P: notify util

通知栏

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

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

提问、发表评价，或者举报这个脚本。

Wrap lines

// ==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 notifyType = {
    default: {
      bgColor: '#e6ffff',
      bdColor: '#23bdd9'
    },
    success: {
      bgColor: '#f6ffec',
      bdColor: '#53752d'
    },
    warn: {
      bgColor: '#fefbe6',
      bdColor: '#fdc446'
    },
    error: {
      bgColor: '#fff0ef',
      bdColor: '#e75252'
    }
  }

  w.$notifyMgr = (() => {
    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);

    const Notify = function() {
      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)