controllets/select-dataset-controllet/select-dataset-controllet.html

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
<!--<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">-->
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../bower_components/paper-styles/color.html">
<link rel="import" href="../../bower_components/paper-styles/typography.html">
<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../../bower_components/iron-image/iron-image.html">
<link rel="import" href="../../bower_components/iron-list/iron-list.html">
<dom-module id="select-dataset-controllet">
    <template>
        <style>
            /*:host {*/
                /*display: block;*/
            /*@apply(--paper-font-common-base);*/
            /*}*/
            /*app-toolbar {*/
                /*background-color: var(--google-green-700);*/
                /*box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);*/
                /*font-weight: bold;*/
                /*color: white;*/
                /*z-index: 1;*/
                /*position: fixed;*/
                /*top: 0;*/
                /*left: 0;*/
                /*right: 0;*/
            /*}*/
            /*app-toolbar paper-icon-button {*/
                /*--paper-icon-button-ink-color: white;*/
            /*}*/
            /*iron-list {*/
                /*padding-top: 64px;*/
            /*--iron-list-items-container: {*/
                 /*max-width: 800px;*/
                 /*margin: auto;*/
                 /*margin-top: 60px;*/
                 /*margin-bottom: 60px;*/
                 /*border-bottom: 1px solid #ddd;*/
             /*};*/
            /*}*/
            .item {
            @apply(--layout-horizontal);
                padding: 16px;
                background-color: #FFFFFF;
                border: 1px solid #B6B6B6;/*2196F3*/
                cursor: pointer;
                margin-bottom: 8px;
                /*border-radius: 8px;*/
            }
            /*.avatar {*/
                /*height: 40px;*/
                /*width: 40px;*/
                /*border-radius: 20px;*/
                /*box-sizing: border-box;*/
                /*background-color: #DDD;*/
            /*}*/
            .pad {
                /*padding: 0 16px;*/
            @apply(--layout-flex);
            @apply(--layout-vertical);
            }
            .primary {
                /*font-size: 16px;*/
                font-weight: bold;
                /*padding-top: 5px;*/
            }
            .shortText/*, .longText*/ {
                font-size: 16px;
            }
            .longText {
                color: gray;
                display: none;
            }
            .item:hover .shortText::after {
                content: ' [+]';
                color: gray;
            }
            .item.expanded:hover .shortText::after {
                content: '';
            }
            .item.expanded .longText {
                display: block;
            }
            .item.expanded:hover .longText::after {
                content: ' [–]';
            }
            /*.spacer {*/
            /*@apply(--layout-flex);*/
            /*}*/
            /*@media (max-width: 460px) {*/
                /*paper-toolbar .bottom.title {*/
                    /*font-size: 14px;*/
                /*}*/
            /*}*/
            /*.item.selected {*/
                /*border: 1px solid #2196F3;/!**!/*/
            /*}*/
            #list_container {
                /*background-color: #ccc;*/
                height: 100%;
                width: calc(100% - 16px);
                /*overflow: scroll;*/
                position: relative;
                font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
                font-size: 16px;
                line-height: 24px;/*???*/
                margin: 8px;
            }
            #select_dataset_container {
               /*padding: 8px;*/
                /*background-color: #B6B6B6;*/
                border: 4px solid #B6B6B6;/*2196F3*/
            }
            #toolbar {
                /*padding: 8px;*/
                /*background-color: #B6B6B6;*/
                width: calc(100% - 12px);
                height: 20px;
                background-color: #B6B6B6;
                font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
                font-size: 16px;
                font-weight: bold;
                /*line-height: 24px;*/
                padding-left: 12px;
                padding-top: 12px;
                padding-bottom: 12px;
            }
            .ssssssssseeeel {
                background-color: red;
            }
        </style>
        <div id="select_dataset_container">
            <div id="toolbar">
                AVAILABLE DATASETS
            </div>
            <div id="list_container">
                <!--<iron-ajax url="data/contacts.json" last-response="{{items}}" auto></iron-ajax>-->
                <!--<app-toolbar>-->
                    <!--<div title>Collapsable items</div>-->
                    <!--<paper-icon-button icon="search" alt="Search"></paper-icon-button>-->
                    <!--<paper-icon-button icon="more-vert" alt="More options"></paper-icon-button>-->
                <!--</app-toolbar>-->
                <iron-list id="list" items="[[items]]" as="item" selection-enabled><!--multi-selection-->
                    <template>
                        <div>
                            <div class$="[[getClassForItem(item, selected)]]" tabindex$="[[tabIndex]]" on-tap="_prova">
                                <!--<iron-image class="avatar" sizing="contain" src="[[item.image]]"></iron-image>-->
                                <div class="pad">
                                    <div class="primary">[[item.name]]</div>
                                    <!--<div class="shortText">[[item.url]]</div>-->
                                    <!--substring description-->
                                    <div class="longText">[[item.description]]</div>
                                </div>
                                <iron-icon icon$="[[iconForItem(item)]]"></iron-icon>
                            </div>
                        </div>
                    </template>
                </iron-list>
            </div>
        </div>
    </template>
    <script>
        HTMLImports.whenReady(function() {
            Polymer({
                is: 'select-dataset-controllet',
                properties: {
                    items: {
                        type: Array,
                        value: [
//                            {"name": "Bob"},
//                            {"name": "Tim"},
//                            {"name": "Mike"}
                        ]
                    }
                },
                ready : function() {
                    $(this.$.list_container).perfectScrollbar();
                },
                _prova : function(e) {
//                   console.log(e.target);
//                    e.target.style.background = "#B6B6B6";
                },
                attached: function() {
                    // Use the document element
                    this.$.list.scrollTarget = this.ownerDocument.documentElement;
                },
                iconForItem: function(item) {
                    return item ? (item.integer < 50 ? 'star-border' : 'info-outline') : '';
                },
                getClassForItem: function(item, selected) {
                    console.log(item);
                    console.log(selected);
                    return selected ? 'item expanded' : 'item';
                }
            });
        });
    </script>
</dom-module>