gistfile1.js

var Button = document.registerElement("x-button", { prototype: {
  __proto__: HTMLElement.prototype,

  // @info
  //   Fired immediately after the host element is created
  createdCallback: function() {
    this.createShadowRoot();

    this.shadowRoot.innerHTML =
      '<div id="button">                                                 ' +
      '  <style>                                                         ' +
      '    @import url("reset.css");                                     ' +
      '    @import url("widgets/Button.css");                            ' +
      '  </style>                                                        ' +
      '                                                                  ' +
      '  <svg id="icon" preserveAspectRatio="none" viewBox="0 0 100 100">' +
      '    <use width="100" height="100"></use>                          ' +
      '  </svg>                                                          ' +
      '                                                                  ' +
      '  <div id="label"></div>                                          ' +
      '</div>                                                            ';

    this._buttonElement = this.shadowRoot.querySelector("#button");
    this._iconElement = this.shadowRoot.querySelector("#icon");
    this._labelElement = this.shadowRoot.querySelector("#label");

    this._mouseDownCallback = this._mouseDownCallback.bind(this);

    bindAttribute("label", "label", "String", this, this._labelChangedCallback);
    bindAttribute("icon", "icon", "String", this, this._iconChangedCallback);
    bindAttribute("iconsize", "iconSize", "Number", this, this._iconSizeChangedCallback);
    bindAttribute("skin", "skin", "String", this);
    bindAttribute("disabled", "disabled", "Boolean", this, this._disabledChangedCallback)
    bindAttribute("pressed", "pressed", "Tristate", this);

    if (this.icon === null) {
      this.icon = "stub";
    }

    if (this.label === null) {
      this.label = "Button";
    }

    if (this.skin === null) {
      this.skin = "alpha";
    }
  },

  // @info
  //   Fired when host element is inserted into the DOM tree
  attachedCallback: function() {
    this.addEventListener("mousedown", this._mouseDownCallback);
  },

  // @info
  //   Fired when host element is removed from the DOM tree
  detachedCallback: function() {
    this.removeEventListener("mousedown", this._mouseDownCallback);
  },

  // @info
  //   Fired when any element in the light DOM tree is added, removed or changed
  _lightDOMChangedCallback: function(changes) {
  },

  // @info
  //   Fired when host element "label" attribute or property is changed
  _labelChangedCallback: function() {
    console.log("label changed", this.label);

    if (this.label === null) {
      this._labelElement.textContent = "";
    }
    else {
      this._labelElement.textContent = this.label;
    }
  },

  // @info
  //   Fired when host element "icon" attribute or property is changed
  _iconChangedCallback: function() {
    var useElement = this.shadowRoot.querySelector("#icon use");

    if (this.icon === null) {
      useElement.href.baseVal = null;
    }
    else {
      useElement.href.baseVal = "assets/images/icons.svg#" + this.icon;
    }
  },

  // @info
  //   Fired when user presses the host element with mouse or trackpad
  _mouseDownCallback: function(event) {
    var that = this;

    if (this.disabled || event.button !== 0) {
      return;
    }

    this._buttonElement.classList.add("down");

    var mouseUpOrLeaveCallback = function(event) {
      window.removeEventListener("mouseup", mouseUpOrLeaveCallback);
      that.removeEventListener("mouseleave", mouseUpOrLeaveCallback);

      that._buttonElement.classList.remove("down");

      if (that.pressed !== null && event.toElement === that) {
        that.pressed = !that.pressed;

        if (that.pressed === true) {
          that.dispatchEvent(new CustomEvent("press")); 
        }
        else {
          that.dispatchEvent(new CustomEvent("release")); 
        }
      }
    };

    window.addEventListener("mouseup", mouseUpOrLeaveCallback);
    this.addEventListener("mouseleave", mouseUpOrLeaveCallback);
  },
}});