☰

H2P: notify util

通知栏

Version vom 13.09.2020. Aktuellste Version

Dieses Skript sollte nicht direkt installiert werden. Es handelt sich hier um eine Bibliothek für andere Skripte, welche über folgenden Befehl in den Metadaten eines Skriptes eingebunden wird // @require https://update.greatest.deepsurf.us/scripts/411280/847393/H2P%3A%20notify%20util.js 

// ==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)