Bubble Message

【使用前先看介绍/有问题可反馈】气泡信息 (Bubble Message)：能够生成悬浮气泡通知，支持自定义：文字信息、默认文字/气泡/icon颜色、默认淡入/淡出/显示时间，默认气泡宽度。
当前为 2021-04-18 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         Bubble Message
// @namespace    http://tampermonkey.net/
// @version      0.2.1
// @description  【使用前先看介绍/有问题可反馈】气泡信息 (Bubble Message)：能够生成悬浮气泡通知，支持自定义：文字信息、默认文字/气泡/icon颜色、默认淡入/淡出/显示时间，默认气泡宽度。
// @author       cc
// @include      *
// @grant        none
// @noframes
// ==/UserScript==

(function() {
  'use strict'
  var info_queue = []
  function getStyle (config, ts) {
    let style = document.createElement('style')
    style.id = `bubble-message-style-${ts}`
    style.innerHTML = `
      .bm-info-${ts} {
        width: ${config.width}px;
        background-color: ${config.backgroundColor};
        padding: 10px;
        color: black;
        font-size: 14px;
        border-radius: 5px;
        margin-top: 10px;
        box-shadow: 2px 2px 6px #eeeeee;
      }
      .bm-info-enter-active-${ts} {
        animation: fade-in-${ts} ${config.fadeInTime / 1000}s forwards;
      }
      .bm-info-leave-active-${ts} {
        animation: fade-out-${ts} ${config.fadeOutTime / 1000}s forwards;
      }
      @keyframes fade-in-${ts} {
        from {
          opacity: 0;
          scale: 0;
          transform: translateY(-20px);
        }
        to {
          opacity: 1;
          scale: 1;
          transform: translateY(0px);
        }
      }
      @keyframes fade-out-${ts} {
        from {
          opacity: 1;
          transform: translateY(0px);
        }
        to {
          opacity: 1;
          transform: translateY(-20px);
        }
      }
    `
    return style
  }
  function BubbleMessage () {
    this.config = {
      cmap: {
        info: '#909399',
        warning: '#e6a23c',
        error: '#f56c6c',
        success: '#67c23a'
      },
      fadeInTime: 400,
      fadeOutTime: 600,
      duration: 1500,
      width: 300,
      backgroundColor: '#ffffff',
      color: '#000000'
    }
    this.message = function (options) {
      options = options || {}
      options.type = options.type || 'info'
      options.message = options.message || ''
      options.duration = options.duration || this.config.duration
      if (Object.keys(this.config.cmap).indexOf(options.type) < 0) options.type = 'info'
      if (typeof options.message !== 'string') options.message = String(options.message)
      if (typeof options.duration !== 'number' || options.duration < 1000) options.duration = 1000
      let ts = Date.now()
      let info = document.createElement('div')
      info.className = `bm-row-container bm-info-${ts} bm-info-enter-active-${ts}`
      info.innerHTML = `
        <div class="bm-container bm-icon" style="background-color: ${this.config.cmap[options.type]};"> <div> ! </div> </div>
        <div class="bm-text-container" style="margin-left: 10px; width: ${this.config.width - 30 - 16}px; color: ${this.config.color};"> ${options.message} </div>
      `
      let style = getStyle(this.config, ts)
      document.body.appendChild(style)
      document.getElementById('')
      document.body.appendChild(info)
      info_queue.push(info)
      let list = document.getElementById('bubble-message-list')
      list.appendChild(info)
      list.style.display = ''
      setTimeout(() => {
        info.className = `bm-row-container bm-info-${ts} bm-info-leave-active-${ts}`
        setTimeout(() => {
          info.remove()
          style.remove()
          info_queue.shift()
          if (info_queue.length == 0) list.style.display = 'none'
        }, this.config.fadeOutTime)
      }, this.config.fadeInTime + options.duration)
    }
  }
  function initialize () {
    let style = document.createElement('style')
    style.id = 'bubble-message-basic-style'
    style.innerHTML = `
      .bm-list {
        z-index: 9999;
        position: fixed;
        top: 10px;
        left: 0;
        right: 0;
        margin: auto;
      }
      .bm-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
      .bm-row-container {
        display: flex;
        flex-direction: row;
        align-items: center;
      }
      .bm-text-container {
        display: flex;
        flex-direction: row;
        word-break: break-all;
      }
      .bm-icon {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        color: white;
        font-size: 14px;
        font-weight: bold;
      }
    `
    document.body.appendChild(style)
    let list = document.createElement('div')
    list.id = 'bubble-message-list'
    list.className = 'bm-container bm-list'
    list.style.display = 'none'
    document.body.appendChild(list)
  }
  initialize()
  window.BubbleMessage = BubbleMessage
  console.info('Bubble Message version: 0.2.1')
})();
欢迎访问Greasy Fork镜像
