gistfile1.js

// @events
//   press
//   release
var Button = registerElement("x-button", {
  // @pragma mark model -----------------------------------------------------------------------

  // Leading "&" means that the property is bound to attribute and that it will fire
  // <propertyName>ChangedCallback() each time when either attribute or property is changed
  // and the callback exists.
  "&label": "String",
  "&icon": "String",
  "&iconSize": "Number",
  "&disabled": "Boolean",
  "&pressed": "Tristate",
  "&viewBox": "Array<Number>",

  // Leading "@" means that the property is observable and that it will fire
  // <propertyName>ChangedCallback() each time when property is changed and
  // callback exists.
  "@color": null,
  "@fontSize": 13,

  // @pragma mark view ------------------------------------------------------------------------

  shadowHTML: 
    '<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>                                                            ',

  lightHTML: '',

  // @pragma mark controller ------------------------------------------------------------------

  // @info
  //   Fired immediately after the host element is created
  createdCallback: function() {
    this._buttonElement = this.shadowRoot.querySelector("#button");
    this._iconElement = this.shadowRoot.querySelector("#icon");
    this._labelElement = this.shadowRoot.querySelector("#label");
    this._mouseDownCallback = this._mouseDownCallback.bind(this);

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

  // @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 light DOM is added, removed or changed
  lightDOMChangedCallback: function(changes) {
  },

  // @info
  //   Fired when "label" HTML attribute or DOM property is changed
  labelChangedCallback: function() {
    if (this.label === null) {
      this._labelElement.textContent = "";
    }
    else {
      this._labelElement.textContent = this.label;
    }
  },

  // @info
  //   Fired when "icon" HTML attribute or DOM 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);
  },
});