selectable-group-behavior.html

<link rel="import" href="../polymer/polymer-element.html">

<script>

window.SelectableGroupBehavior = subclass => class extends Polymer.Element {

  static get properties() {
    return {

      /**
        * The list of selectable-item
        */
      items: {
        type: Array,
        readOnly: true,
        notify: true,
        value: function() {
          return [];
        }
      },
      
      selection: {
        type: Array,
        notify: true,
        value: _ => []
      }

    };
  }

  static get observers() {
    return [
      '_selectionChanged(selection.*)'
    ];
  }

  get getSelection() {
    return this.items.filter(item => item.selected);
  }

  constructor() {
    super();

    this._observer = null;
    this._onItemSelectedChange = this._onItemSelectedChange.bind(this);
    this._onKeydown = this._onKeydown.bind(this);
  }

  connectedCallback() {
    super.connectedCallback();

    requestAnimationFrame(_ => {
      this._updateItems();
      this._observer = this._observeItems(this);
      this._toggleListeners({enable: true});
    });
  }

  disconnectedCallback() {
    super.disconnectedCallback();

    this._toggleListeners({enable: false});
    this._observer.disconnect();
    this._observer = null;
  }

  _onItemSelectedChange() {
    this._updateSelection();
  }

  _updateSelection() {
    this.selection = this.items.filter(item => item.selected);
  }

  _selectionChanged() {
    const activeSelection = !!this.selection.length;

    this.items.forEach(item => {
      item.selectOnDown = activeSelection;
    });
  }

  _onKeydown(event) {
    const escKey = 27;

    if (event.keyCode === escKey) {
      this.selection.forEach(item => {
        item.selected = false;
      });
    }
  }

  _toggleListeners({enable}) {
    const m = enable ? 'addEventListener' : 'removeEventListener';

    this[m]('item-selected-change', this._onItemSelectedChange);
    document.body[m]('keydown', this._onKeydown);
  }

  _observeItems(node) {
    const observer = new MutationObserver(mutations => {
      this._updateItems();
    })
    observer.observe(this, {subtree: true, childList: true});
    return observer;
  }

  _updateItems() {
    const nodes = Array.from(this.querySelectorAll('selectable-item'));
    this._setItems(nodes);
  }

}

</script>