☰

Notify Library

Very Simple JS Notifications Library

目前為 2020-04-21 提交的版本，檢視 最新版本。

此腳本不應該直接安裝，它是一個供其他腳本使用的函式庫。欲使用本函式庫，請在腳本 metadata 寫上： // @require https://update.cn-greasyfork.org/scripts/401626/795716/Notify%20Library.js 

  1. /* **************
  2.  
  3.   Notify Library 1.1.2
  4.   Developed by pizidavi
  5.  
  6.   Options:
  7.     - text    required
  8.     - type    optional
  9.       - success
  10.       - info/information
  11.       - warn/warning
  12.       - error
  13.     - delay   optional
  14.  
  15. ************** */
  16.  
  17. var Notify = function Notify(options) {
  18.   var _this = this;
  19.  
  20.   if (!$('#notify').length) {
  21.     $('body').append('<div id="notify"><style media="screen"> #notify { position: fixed; top: 20px; right: 25px; z-index: 9999; } #notify > div { display: none; position: relative; width: 300px; padding: .4em .8em; margin-bottom: .6em; border-radius: 2px; background-color: white; color: #2c3e50; font-size: 17px; cursor: pointer; transition: .4s; } </style></div>');
  22.   }
  23.  
  24.   _this.options = options;
  25.   _this.container = $('#notify');
  26.   _this.template = $('<div><span></span></div>');
  27.  
  28.   if (!_this.options || typeof _this.options != 'object') {
  29.     throw 'Options required';
  30.   }
  31.   if (!_this.options.text) {
  32.     throw 'Options TEXT must not be empty';
  33.   }
  34.  
  35.   if (_this.options.type) {
  36.     var background = '';
  37.     switch (_this.options.type) {
  38.       case 'success':
  39.         background = '#2ecc71';
  40.       break;
  41.       case 'info':
  42.       case 'information':
  43.         background = '#3498db';
  44.       break;
  45.       case 'warn':
  46.       case 'warning':
  47.         background = '#f9ca24';
  48.       break;
  49.       case 'error':
  50.         background = '#e74c3c';
  51.       break;
  52.       default:
  53.         throw 'Type not found';
  54.     }
  55.     if (background) {
  56.       _this.template.css('background-color', background);
  57.       _this.template.css('color', 'white');
  58.     }
  59.   }
  60.  
  61.   _this.id = 'noty_'+Math.random().toString(36).substring(2);
  62.   _this.template.attr('id', _this.id);
  63.   _this.template.find('span').text(_this.options.text);
  64.   _this.template.css('right', -(300+parseInt(_this.container.css('right')))+'px');
  65.  
  66. };
  67.  
  68. Notify.prototype.show = function () {
  69.   var _this = this;
  70.  
  71.   if (!_this.container.find('#'+_this.id).length) {
  72.     _this.container.append(_this.template);
  73.   }
  74.  
  75.   _this.template.css('display', 'block');
  76.   _this.template.off('click').on('click', function() {
  77.     _this.close();
  78.   });
  79.   setTimeout(function() {
  80.     _this.template.css('right', '0');
  81.   }, 100);
  82.  
  83.   if (_this.options.delay !== 0) {
  84.     _this.closeTime = setTimeout(function() {
  85.       _this.close();
  86.     }, (_this.options.delay || 4500));
  87.   }
  88.  
  89.   return _this;
  90. };
  91.  
  92. Notify.prototype.close = function () {
  93.   var _this = this;
  94.   if (!_this.container.find('#'+_this.id).length) return;
  95.  
  96.   clearTimeout(_this.closeTime);
  97.   _this.template.css('right', -(300+parseInt(_this.container.css('right')))+'px');
  98.  
  99.   setTimeout(function() {
  100.     _this.template.remove();
  101.   }, 500);
  102.  
  103.   return _this;
  104. };