multi-select-menu.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-icon/iron-icon.html">
<link rel="import" href="../paper-menu-button/paper-menu-button.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../paper-menu/paper-menu.html">
<link rel="import" href="../paper-item/paper-item.html">

<!--
Paper card with a collapse/expand button in the header.
Collapsing will hide the content but keep the header
-->
<dom-module id="multi-select-menu">
    <template>
        <style>
            :host {
                --paper-item: {
                    padding: 0 0.5em;
                };
            }
            :host iron-icon {
                color: var(--secondary-text-color);
            }
            :host paper-menu-button {
                padding: 0;
                width: 100%;
            }
            :host .list-item {
                cursor: pointer;
            }
            :host .list-item iron-icon {
                margin-right: 0.5em;
            }
            :host .list-item:not(.iron-selected) iron-icon {
                visibility: hidden;
            }
            :host #trigger {
                --paper-input-container-input: {
                    cursor: pointer;
                };
            }
            :host #filter {
                --paper-input-container-label: {
                    padding: 0 1em;
                };
                --paper-input-container-input: {
                    padding: 0 1em;
                };
            }
            :host .check-icon {
                min-width: 1.7em;
                min-height: 1.7em;
            }
        </style>

        <paper-menu-button ignore-select vertical-offset="50"
            on-paper-dropdown-close="_clearFilter"
            on-paper-dropdown-open="_focusFilter">
            <div class="dropdown-trigger">
                <!-- Mimic paper-dropdown-menu trigger -->
                <paper-input id="trigger" type="text" readonly label="[[label]]"
                    value="[[selectedText]]" invalid="{{invalid}}">
                    <iron-icon icon="arrow-drop-down" suffix></iron-icon>
                </paper-input>
            </div>
            <div class="dropdown-content">
                <paper-input id="filter" label="Filter the [[itemType]]"
                    value="{{filter}}" tabindex="0"></paper-input>
                <paper-menu id="items" multi
                    on-iron-select="_updateSelectedValues"
                    on-iron-deselect="_updateSelectedValues">
                    <template is="dom-repeat" items="{{filteredItems}}" as="item">
                        <paper-item class="list-item" data-index$="{{item.index}}">
                            <iron-icon class="check-icon" icon="check"></iron-icon>
                            <span>[[item.value]]</span>
                        </paper-item>
                    </template>
                </paper-menu>
            </div>
        </paper-menu-button>
    </template>
    <script>
    (function() {
        'use strict';
        Polymer({
            is: 'multi-select-menu',
            properties: {
                // items to select
                items: {
                    type: Array,
                    value: function() {
                        return [];
                    }
                },
                // store original item indices so filtered selection works
                itemIndices: {
                    type: Array,
                    computed: '_computeItemIndices(items)'
                },
                // type of items, used when selecting more than 1 item,
                //      e.g. "3 items" or "3 carrots"
                itemType: {
                    type: String,
                    value: 'items'
                },
                // list filter text
                filter: {
                    type: String,
                    value: '',
                    notify: true
                },
                // items filtered by the filter property
                filteredItems: {
                    type: Array,
                    computed: '_computeFilteredItems(filter, itemIndices)'
                },
                // set the invalid state
                invalid: {
                    type: Boolean,
                    value: false
                },
                // input label
                label: {
                    type: String,
                    value: 'multi-select'
                },
                // gets and sets the selected values
                selected: {
                    type: Array,
                    value: function() {
                        return [];
                    },
                    notify: true
                },
                // selected text is value if 1 item selected, else is count
                selectedText: {
                    type: String,
                    value: '',
                    readOnly: true
                }
            },
            observers: [
                '_updateSelection(selected.*,items.*)'
            ],
            _updateSelection: function() {
                // set selected items
                if (!this._noUpdate) {
                    var currentlySelectedIndices = [].concat(this.$.items.selectedValues || []);
                    var selectedIndices = (this.selected || []).map(function(item) {
                        return this.items.indexOf(item);
                    }, this);

                    // deselect currently selected indices that are not selected
                    var selectedIndicesThatStaySelected =
                        currentlySelectedIndices.filter(function(i) {
                            if (selectedIndices.indexOf(i) < 0) {
                                this.$.items.selectIndex(i);
                            } else {
                                return true;
                            }
                        }, this);

                    // select selected indices that aren't currently selected
                    selectedIndices.forEach(function(i) {
                        if (selectedIndicesThatStaySelected.indexOf(i) < 0) {
                            this.$.items.selectIndex(i);
                        }
                    }, this);
                }
            },
            _clearFilter: function() {
                // use timeout so it's cleared after menu hide animation
                window.setTimeout(function() {
                    this.filter = '';
                }.bind(this), 250);
            },
            _computeFilteredItems: function(filter, itemIndices) {
                if (filter) {
                    // non-adjacent regex
                    var regex = new RegExp('.*' + filter.split('').join('.*') + '.*');
                    return itemIndices.filter(function(item) {
                        return regex.test(item.value);
                    });
                } else {
                    return itemIndices;
                }
            },
            _computeItemIndices: function(items) {
                return items.map(function(item, i) {
                    return { value: item, index: i };
                });
            },
            _focusFilter: function() {
                // use timeout so menu is open and filter input can be focused
                window.setTimeout(function() {
                    this.$.filter.focus();
                }.bind(this), 250);
            },
            _updateSelectedValues: function() {
                // get menu item selection indices
                var filteredIndices = this.$.items.selectedValues || [];

                // menu items could be filtered, so map to real indices
                var selectedIndices = filteredIndices.map(function(i) {
                    return this.$.items.items[i].dataset.index;
                }, this);

                // map item indices to values
                var selectedValues = selectedIndices.map(function(index) {
                    return this.items[index];
                }, this);

                // set selected items without triggering the observer
                this._noUpdate = true;
                this.set('selected', selectedValues);
                this._noUpdate = false;

                // set selection label based on how many items are selected
                if (this.selected.length === 0) {
                    this._setSelectedText('');
                } else if (this.selected.length === 1) {
                    this._setSelectedText(this.selected[0]);
                } else {
                    this._setSelectedText(this.selected.length + ' ' + this.itemType);
                }
            }
        });
    })();
    </script>
</dom-module>