component-list.html

<link rel="import" href="../polymer/polymer.html" />
<link rel="import" href="../component-info/component-info.html">
<link rel="import" href="../component-item/component-item.html">
<link rel="import" href="../paper-item/paper-item.html" >
<link rel="import" href="../paper-listbox/paper-listbox.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">

<dom-module id="component-list">
    <template>
        <style>
            :host {
                height: var(--component-list--height, 500px);
                display: block;
                @apply(--layout-horizontal);
            }

            paper-item {
                --paper-item: {
                    padding: 0;
                    border-bottom: 1px solid rgba(0,0,0,0.1);
                    margin-top: 1px;
                }
            }

            paper-listbox {
                @apply(--layout-flex);
                background: none;
            }

            .expand{
                overflow-y: scroll;
                @apply(--layout-flex-8);
                padding: 20px;
            }
            .withComponentInfo {
                @apply(--layout-flex-2);
            }

        </style>

        <paper-listbox
            selected="{{selectedComponent}}"
            class$="[[_componentInfoDivClass(showcomponentinfo)]]">
            <template is="dom-repeat" items="{{components}}">
                <paper-item on-iron-selected="something()" draggable="true">
                    <component-item
                        name$="[[item.name]]"
                        homepage$="[[item.homepage]]"
                        version$="[[item.version]]"
                        data$="[[item]]">
                    </component-item>
                </paper-item>
            </template>
        </paper-listbox>
        <template is="dom-if" if="[[showcomponentinfo]]">
            <div class="expand">
                <component-info
                    homepage$="[[arrayItem(components.*, selectedComponent, 'homepage')]]">
                </component-info>
            </div>
        </template>
    </template>
    <script>
        Polymer({
            is: 'component-list',

            properties: {
                selectedComponent: {
                    type: Number,
                    value: 0,
                    notify: true
                },

                components: {
                    type: Array,
                    reflectToAttribute: false,
                    notify: true
                },

                showcomponentinfo: {
                    type: Boolean,
                    reflectToAttribute: true,
                    notify: true,
                    value: false
                }
            },

            attached: function() {
                this.async(() => {
                    if(!this.components) {
                        console.warn('component-list : No components added to attribute. Please refer the documentation.');
                    }
                    this.handleDOMChanged();
                });

            },

            handleDOMChanged: function() {
                this.$$('paper-listbox').addEventListener('dom-change', () => {
                    this.attachListeners();
                });
            },

            attachListeners: function() {
                var draggableEl = this.$$('paper-listbox').queryAllEffectiveChildren('paper-item');
                for(i = 0; i < draggableEl.length; i++) {
                    draggableEl[i].addEventListener('dragstart', (e)=>{
                        var data = JSON.stringify(e.srcElement.querySelector('component-item').getAttribute('data'));
                        e.dataTransfer.setData('text', data);
                    });
                }
            },

            // first argument is the change record for the array change,
            // change.base is the array specified in the binding
            arrayItem: function(change, index, path) {
                // this.get(path, root) returns a value for a path
                // relative to a root object.
                return this.get(path, change.base[index]);
            },

            /*
             * computes whether a section needs to be divided into two or not
             * @param showcomponentinfo The value of showcomponentinfo
             * @returns String classname of the divider class
             */
            _componentInfoDivClass: function(showcomponentinfo) {
                return showcomponentinfo ? 'withComponentInfo' : '';
            }
        });
    </script>
</dom-module>