Greasy Fork is available in English.

Notify Library

Very Simple JS Notifications Library

このスクリプトは単体で利用できません。右のようなメタデータを含むスクリプトから、ライブラリとして読み込まれます: // @require https://update.greasyfork.org/scripts/401626/1109786/Notify%20Library.js

このスクリプトの質問や評価の投稿はこちら通報はこちらへお寄せください。
// ==UserScript==
// @version      2.0
// @license      MIT
// ==/UserScript==

/* **************

  Notify Library
  Developed by pizidavi

  Options:
    - text    required
    - type    optional
      - success
      - info/information
      - warn/warning
      - error
    - timeout	optional (default: 5s)

************** */

var Notify = function Notify(options) {
  var _this = this;
  
  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; }';
  const TYPES = {
	  'success': '#2ecc71',
	  'info': '#3498db',
	  'information': '#3498db',
	  'warn': '#f9ca24',
	  'warning': '#f9ca24',
	  'error': '#e74c3c',
  };

  if (!document.querySelectorAll('#notify').length) {
	const style = document.createElement('style');
    style.innerText = CSS;
	const div = document.createElement('div');
	div.id = 'notify';
	div.append(style);

    document.querySelector('body').append(div);
  }
  
  const template = document.createElement('div');
  template.append(document.createElement('span'))

  _this.options = options;
  _this.container = document.querySelector('#notify');
  _this.template = template;

  if (!_this.options || typeof _this.options != 'object') {
    throw 'Options required';
  }
  if (!_this.options.text) {
    throw 'Options TEXT must not be empty';
  }

  if (_this.options.type) {
    const background = TYPES[_this.options.type];
    if (background) {
      _this.template.style.backgroundColor = background;
      _this.template.style.color = 'white';
    } else {
	  throw 'Type not found';
	}
  }

  _this.id = 'noty_' + Math.random().toString(36).substring(2);
  _this.template.setAttribute('id', _this.id);
  _this.template.querySelector('span').textContent = _this.options.text;
  _this.template.style.right = '-110%';
  _this.template.addEventListener('click', function() {
	_this.close();
  });

};

Notify.prototype.show = function () {
  var _this = this;

  if (!_this.container.querySelector('#'+_this.id)) {
    _this.container.prepend(_this.template); }

  _this.template.style.display = 'block';
  setTimeout(function() {
    _this.template.style.right = '0';
  }, 50);

  if (_this.options.timeout !== false) {
	clearTimeout(_this.closeTime);
    _this.closeTime = setTimeout(function() {
      _this.close();
    }, (_this.options.timeout || 5000));
  }

  return _this;
};

Notify.prototype.close = function () {
  var _this = this;

  if (!_this.container.querySelector('#'+_this.id)) return;

  clearTimeout(_this.closeTime);
  _this.template.style.right = '-110%';

  setTimeout(function() {
    _this.template.remove();
  }, 450);

  return _this;
};