User:Ajhg/common.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Press Ctrl-F5.

class MuseElement extends HTMLElement {
  constructor() {
    super();
  }

  makeTransitionState (stateName, loseName) {
    var _this = this;

    var capFirst = (string)=>string.charAt(0).toUpperCase() + string.slice(1);

    var capped = capFirst(stateName);

    if (typeof _this[stateName] != 'undefined') var oldState = _this[stateName];

    var lost = `${capped}_state_lost`;
    var lose = (loseName) ? `on${capFirst(loseName)}` : `onLose${capped}`;
    var got = `${capped}_state_acquired`;
    var onget = `on${capped}`;

    this[lost] = ()=> {

      if (_this.classList.contains(`${stateName}_running`)) {
        _this[lose]();
      }

      _this.removeEventListener('transitionend', this[lost]);
      this.classList.remove(`${stateName}_running`);
    };

    this[lose] = ()=> {
      //console.log('lost ' + stateName);
    };

    this[got] = ()=> {
      if (_this.classList.contains(`${stateName}_running`)) {
        _this[onget]();
      }

      _this.removeEventListener('transitionend', this[got]);
      this.classList.remove(`${stateName}_running`);
    };

    this[onget] = ()=> {
      //console.log('gained ' + stateName);
    };

    this[`stop${capped}Transition`] = ()=> {
      _this.removeEventListener('transitionend', this[got]);
      _this.removeEventListener('transitionend', this[lost]);
      this.classList.remove(`${stateName}_running`);
    };

    Object.defineProperty(_this, stateName, {
      get: function () {
        return (µ(`|>${stateName}`, _this) == '');
      },

      set: function (val) {
        if (val != _this[stateName]) {
          _this.classList.add(`${stateName}_running`);
          if (val) {
            _this.removeEventListener('transitionend', _this[lost]);
            _this.addEventListener('transitionend', _this[got]);
            _this.setAttribute(stateName, '');
          } else {
            _this.removeEventListener('transitionend', _this[got]);
            _this.addEventListener('transitionend', _this[lost]);
            _this.removeAttribute(stateName);
          }
        }
      },
    });

    if (typeof oldState != 'undefined')_this[stateName] = oldState;
  }

}

if (!customElements.get('muse-growl')) {

    //window.loadCSS(__dirname + '/button.css');

    class MuseGrowl extends MuseElement {
      constructor() {
        super();

        this.displayTime = 3000;
      }

      message(text, type, persist) {
        var _this = this;
        this.display.textContent = text;
        this.className = type;
        this.persist = persist;
        if (this.alert && !this.classList.contains('alert_running') && !persist) {
          clearTimeout(_this.alertTO);
          _this.alertTO = setTimeout(()=> {
            _this.alert = false;
          }, _this.displayTime);
        }

        this.alert = true;
      }

      dismiss() {
        this.persist = false;
        this.alert = false;
      }

      connectedCallback() {
        //register events, check contents, etc.
        var _this = this;

        if (!_this.root) {

          this.makeTransitionState('alert');
          this.root = _this.attachShadow({ mode: 'open' });
          this.root.innerHTML = `<style> @import "${µdir}/components/css/growl.css";</style>`;

          _this.display = µ('+div', _this.root);
        }

        _this.onAlert = ()=> {
          clearTimeout(_this.alertTO);
          if (!_this.persist) {
            _this.alertTO = setTimeout(()=> {
              _this.alert = false;
            }, _this.displayTime);
          }
        };
      };
    }

    customElements.define('muse-growl', MuseGrowl);
  }

document.body.appendChild(document.createElement('muse-growl');