☰

Greasy Fork is available in English.

Notify Library

Very Simple JS Notifications Library

بۇ قوليازمىنى بىۋاسىتە قاچىلاشقا بولمايدۇ. بۇ باشقا قوليازمىلارنىڭ ئىشلىتىشى ئۈچۈن تەمىنلەنگەن ئامبار بولۇپ، ئىشلىتىش ئۈچۈن مېتا كۆرسەتمىسىگە قىستۇرىدىغان كود: // @require https://update.greatest.deepsurf.us/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. };