Bubble Message

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

(function() {
  'use strict'
  function getStyle (config) {
    let style = document.createElement('style')
    style.id = 'bubble-message-style'
    style.innerHTML = `
      .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-info {
        width: ${config.width}px;
        background-color: ${config.backgroundColor};
        z-index: 9999;
        padding: 10px;
        color: black;
        font-size: 14px;
        border-radius: 5px;
        position: fixed;
        top: 20px;
        left: 0;
        right: 0;
        margin: auto;
        box-shadow: 2px 2px 6px #eeeeee;
      }
      .bm-info-enter-active {
        animation: fade-in ${config.fadeInTime / 1000}s forwards;
      }
      .bm-info-leave-active {
        animation: fade-out ${config.fadeOutTime / 1000}s forwards;
      }
      .bm-icon {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        color: white;
        font-size: 14px;
        font-weight: bold;
      }
      @keyframes fade-in {
        from {
          opacity: 0;
          scale: 0;
          transform: translateY(-20px);
        }
        to {
          opacity: 1;
          scale: 1;
          transform: translateY(0px);
        }
      }
      @keyframes fade-out {
        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.message = options.message || ''
      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 info = document.createElement('div')
      info.className = 'bm-info bm-row-container bm-info-enter-active'
      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)
      document.body.appendChild(style)
      document.body.appendChild(info)
      setTimeout(() => {
        info.className = 'bm-info bm-row-container bm-info-leave-active'
        setTimeout(() => {
          document.body.removeChild(info)
          document.body.removeChild(style)
        }, this.config.fadeOutTime)
      }, this.config.fadeInTime + options.duration)
    }
  }
  window.BubbleMessage = BubbleMessage
  console.info('Bubble Message version: 0.2.0')
})();
欢迎访问Greasy Fork镜像
