☰

Notify Library

Very Simple JS Notifications Library

当前为 2022-10-26 提交的版本，查看 最新版本。

此脚本不应直接安装。它是供其他脚本使用的外部库，要使用该库请加入元指令 // @require https://update.cn-greasyfork.org/scripts/401626/1109786/Notify%20Library.js 

  1. // ==UserScript==
  2. // @version      2.0
  3. // @license      MIT
  4. // ==/UserScript==
  5.  
  6. /* **************
  7.  
  8.   Notify Library
  9.   Developed by pizidavi
  10.  
  11.   Options:
  12.     - text    required
  13.     - type    optional
  14.       - success
  15.       - info/information
  16.       - warn/warning
  17.       - error
  18.     - timeout	optional (default: 5s)
  19.  
  20. ************** */
  21.  
  22. var Notify = function Notify(options) {
  23.   var _this = this;
  24.   
  25.   const CSS = '#notify { position: fixed; top: 0; right: 0; z-index: 9999; } #notify > div { display: none; position: relative; width: 300px; padding: .5em .8em; margin: 1em 1em 0 0; border-radius: 2px; background-color: white; color: #2c3e50; font-size: 17px; cursor: pointer; transition: .4s ease-in; }';
  26.   const TYPES = {
  27. 	  'success': '#2ecc71',
  28. 	  'info': '#3498db',
  29. 	  'information': '#3498db',
  30. 	  'warn': '#f9ca24',
  31. 	  'warning': '#f9ca24',
  32. 	  'error': '#e74c3c',
  33.   };
  34.  
  35.   if (!document.querySelectorAll('#notify').length) {
  36. 	const style = document.createElement('style');
  37.     style.innerText = CSS;
  38. 	const div = document.createElement('div');
  39. 	div.id = 'notify';
  40. 	div.append(style);
  41.  
  42.     document.querySelector('body').append(div);
  43.   }
  44.   
  45.   const template = document.createElement('div');
  46.   template.append(document.createElement('span'))
  47.  
  48.   _this.options = options;
  49.   _this.container = document.querySelector('#notify');
  50.   _this.template = template;
  51.  
  52.   if (!_this.options || typeof _this.options != 'object') {
  53.     throw 'Options required';
  54.   }
  55.   if (!_this.options.text) {
  56.     throw 'Options TEXT must not be empty';
  57.   }
  58.  
  59.   if (_this.options.type) {
  60.     const background = TYPES[_this.options.type];
  61.     if (background) {
  62.       _this.template.style.backgroundColor = background;
  63.       _this.template.style.color = 'white';
  64.     } else {
  65. 	  throw 'Type not found';
  66. 	}
  67.   }
  68.  
  69.   _this.id = 'noty_' + Math.random().toString(36).substring(2);
  70.   _this.template.setAttribute('id', _this.id);
  71.   _this.template.querySelector('span').textContent = _this.options.text;
  72.   _this.template.style.right = '-110%';
  73.   _this.template.addEventListener('click', function() {
  74. 	_this.close();
  75.   });
  76.  
  77. };
  78.  
  79. Notify.prototype.show = function () {
  80.   var _this = this;
  81.  
  82.   if (!_this.container.querySelector('#'+_this.id)) {
  83.     _this.container.prepend(_this.template); }
  84.  
  85.   _this.template.style.display = 'block';
  86.   setTimeout(function() {
  87.     _this.template.style.right = '0';
  88.   }, 50);
  89.  
  90.   if (_this.options.timeout !== false) {
  91. 	clearTimeout(_this.closeTime);
  92.     _this.closeTime = setTimeout(function() {
  93.       _this.close();
  94.     }, (_this.options.timeout || 5000));
  95.   }
  96.  
  97.   return _this;
  98. };
  99.  
  100. Notify.prototype.close = function () {
  101.   var _this = this;
  102.  
  103.   if (!_this.container.querySelector('#'+_this.id)) return;
  104.  
  105.   clearTimeout(_this.closeTime);
  106.   _this.template.style.right = '-110%';
  107.  
  108.   setTimeout(function() {
  109.     _this.template.remove();
  110.   }, 450);
  111.  
  112.   return _this;
  113. };