consul/ui-v2/app/components/toggle-button.js

import Component from '@ember/component';
import { inject as service } from '@ember/service';
import { set } from '@ember/object';

export default Component.extend({
  dom: service('dom'),
  // TODO(octane): Remove when we can move to glimmer components
  // so we aren't using ember-test-selectors
  // supportsDataTestProperties: true,
  // the above doesn't seem to do anything so still need to find a way
  // to pass through data-test-properties
  tagName: '',
  // TODO: reserved for the moment but we don't need it yet
  onblur: null,
  checked: false,
  onchange: function() {},
  init: function() {
    this._super(...arguments);
    this.guid = this.dom.guid(this);
    this._listeners = this.dom.listeners();
  },
  didInsertElement: function() {
    this._super(...arguments);
    // TODO(octane): move to ref
    set(this, 'input', this.dom.element(`#toggle-button-${this.guid}`));
    set(this, 'label', this.input.nextElementSibling);
  },
  willDestroyElement: function() {
    this._super(...arguments);
    this._listeners.remove();
  },
  actions: {
    click: function(e) {
      e.preventDefault();
      this.input.checked = !this.input.checked;
      // manually dispatched mouse events have a detail = 0
      // real mouse events have the number of click counts
      if (e.detail !== 0) {
        e.target.blur();
      }
      this.actions.change.apply(this, [e]);
    },
    change: function(e) {
      if (this.input.checked) {
        // default onblur event
        this._listeners.remove();
        this._listeners.add(this.dom.document(), 'click', e => {
          if (this.dom.isOutside(this.label, e.target)) {
            if (this.dom.isOutside(this.label.nextElementSibling, e.target)) {
              if (this.input.checked) {
                this.input.checked = false;
                // TODO: This should be an event
                this.onchange({ target: this.input });
              }
              this._listeners.remove();
            }
          }
        });
      }
      // TODO: This should be an event
      this.onchange({ target: this.input });
    },
  },
});