controllets/select-fields-controllet/select-fields-controllet.html

<link rel="import" href="../../bower_components/polymer/polymer.html" />
<link rel="import" href="../../bower_components/paper-material/paper-material.html" />
<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">
<link rel="import" href="../../bower_components/paper-item/paper-item.html">
<dom-module id="select-fields-controllet">
    <style is="custom-style">
        #select_fields_controllet_container {
            height: 100%;
            width: 100%;
        }
        #select_fields_controllet_container * {
            font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
            font-size: 16px;
            line-height: 24px;
        }
        #select_fields_controllet_container #header {
            background: #B6B6B6;
            height: 24px;
            padding: 12px;
            text-align: center;
            font-weight: 700;
            cursor: pointer;
        }
        #select_fields_controllet_container #header:hover {
            color: #2196F3;
        }
        #select_fields_controllet_container #menu_container {
            position: relative;
            height: calc(100% - 48px);
            width: 100%;
        }
        paper-menu {
            padding: 0px;
        }
        paper-item {
            cursor: pointer;
            color: #000000;
            background: #FFFFFF;
            margin: 4px;
            padding: 0 12px;
            /*background: rgba(0, 0, 0, 0.12);*/
            border-radius: 2px;
            border: 1px solid #B6B6B6;
            /*background: #E0E0E0;*/
        }
        paper-item span {
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        paper-item.iron-selected {
            background: #2196F3;
            color: #FFFFFF;
        }
        paper-item:focus:before {
            opacity: 0 !important;
            background: white;
        }
        paper-item:focus:after {
            opacity: 0 !important;
            background: white;
        }
        paper-item:hover:not(.iron-selected) {
            background-color: #BBDEFB;
        }
        #menu, #menu_container {
            background-color: #E0E0E0;
        }
    </style>
    <template>
        <paper-material id="select_fields_controllet_container" elevation="5">
            <div id="header" on-click="_invertSelection"><span id="fields"></span></div>
            <div id="menu_container">
                <paper-menu id="menu" multi>
                    <template is="dom-repeat" items="{{fields}}">
                        <paper-item title="{{item}}"><span>{{item}}</span></paper-item>
                    </template>
                </paper-menu>
            </div>
        </paper-material>
    </template>
    <script>
        Polymer({
            is : 'select-fields-controllet',
            properties : {
                fields : {
                    type  : Array,
                    value : []
                }
            },
            listeners: {
                'iron-activate': '_fireSelectedFields'
            },
            ready : function() {
                $(this.$.menu_container).perfectScrollbar();
            },
            attached : function() {
                this._translate();
            },
            setFields : function(fields) {
                var index = fields.indexOf("_id");
                if(index > -1)
                    fields.splice(index, 1);//providers_utility _copy
                this.fields = fields.sort();
            },
            setSelectFields : function(selectFields) {
                for(var i=0; i<selectFields.length; i++)
                    this.$.menu.select(selectFields[i]);
                this._fireSelectedFields();
            },
            reset: function() {
                this.$.menu.selectedValues = [];
                this.setFields([]);
            },
            _translate : function() {
                this.$.fields.innerHTML = ln["fields_" + ln["localization"]];
            },
            _fireSelectedFields : function() {
                this.debounce('_fireSelectedFields', function () {
                    this.fire('select-fields-controllet_selected-fields', {selectedFields: this.$.menu.selectedValues});
                }, 300);
            },
            _invertSelection : function() {
//                for(var i=this.fields.length-1; i>=0; i--)
                for(var i=0; i<this.fields.length; i++)
                    this.$.menu.select(i);
                $(this.$.menu_container).animate({ scrollTop: 0}, 0);
                this._fireSelectedFields();
            }
        });
    </script>
</dom-module>