☰

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;
};