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.

console.log("trying to growl 1");

var appStart =()=>{

window.µ = function (id, elem) {
  var ret;
  var root = ((elem) ? elem : document);
  switch (id.charAt(0)) {
    case '|':
      ret = root;
      break;
    case '+':
      ret = document.createElement(id.substring(1));
      if (elem) elem.appendChild(ret);
      break;
    case '#':
      ret = root.querySelector(id);
      break;
    default:
      ret = Array.prototype.slice.call(root.querySelectorAll(id));
      break;
  }

  return ret;
};

console.log("trying to growl");
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.display = µ('+div', _this.root);
        }

        _this.onAlert = ()=> {
          clearTimeout(_this.alertTO);
        if (!_this.persist) {
            _this.alertTO = setTimeout(()=> {
              _this.alert = false;
            }, _this.displayTime);
          }
        };
      };
    }
    console.log("growls");
    customElements.define('muse-growl', MuseGrowl);
  }

var Growls=customElements.get('muse-growl')
var grwl = new Growls();
grwl.id = "Growl";
document.body.appendChild(grwl);

grwl.displayTime = 10000;
grwl.message("test", "warn");

};

//if(!window.widgets) window.widgets = [];
//window.widgets.push(appStart);
appStart()

console.log('user script');