☰

H2P: notify util

通知栏

Tính đến 13-09-2020. Xem phiên bản mới nhất.

Script này sẽ không được không được cài đặt trực tiếp. Nó là một thư viện cho các script khác để bao gồm các chỉ thị meta // @require https://update.greasyfork.org/scripts/411280/847405/H2P%3A%20notify%20util.js 

// ==UserScript==
// @name        H2P: notify util
// @namespace   http://tampermonkey.net/
// @version     0.0.1
// @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;
      right: 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);