controllets/items-vslider-controllet/items-vslider-controllet.html

<link rel="import" href="../../bower_components/polymer/polymer.html" />
<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../bower_components/iron-icons/hardware-icons.html">
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../../bower_components/paper-material/paper-material.html" />
<link rel="import" href="../../bower_components/paper-input/paper-input.html">
<dom-module id="items-vslider-controllet">
    <template>
        <style is="custom-style">
            paper-icon-button{
                color: #FFFFFF;
                height: 32px;/*48*/
                width: 32px;/*48*/
                padding: 0px;
                margin: 0px;
                --paper-icon-button-ink-color: white;
            }
            #items_vslider_container{
                display: flex;
                flex-direction: column;
                height: 100%;
                width: 172px;
                background-color: #E0E0E0;
            }
            #div_datalets_container {
                position: relative;
                margin-bottom: 16px;
            }
            .arrow-up{
                background-color: #2196F3;
                padding-left: 70px;/*62*/
            }
            .arrow-down{
                background-color: #2196F3;
                padding-left: 70px;
            }
            .content-card{
                position: relative;
                float: left;/*firefox*/
                margin : 16px 16px 0px 16px;
                padding: 8px;
                height: 124px;
                width: 124px;
                cursor: pointer;
                background-color: #FFFFFF;
            }
            img{
                width: 100%;
            }
            .legend {
                position: absolute;
                left: 0;
                bottom: 16px;
                padding: 8px;
                width: 124px;
                color: #000000;
                background-color: rgba(158, 158, 158, 0.8);/*9E*/
                /*background-color: rgba(182, 182, 182, 0.9);/!*B&*!/*/
                z-index: 1;
                font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
                font-size: 16px;
                line-height: 16px;
                font-weight: 700;
            }
            .legend.selected {
                background-color: #2196F3;
                /*background-color: rgba(33, 150, 243, 0.8);*/
                color: #FFFFFF;
            }
            #items_vslider_search{
                /*height: 48px;*/
                /*padding: 0px 8px;*/
                padding: 4px 8px 4px 8px;
                background-color: #B6B6B6;
                --paper-input-container-focus-color: #2196F3;
            }
            .search{
                color: #FFFFFF
            }
            .clear {
                width: 24px;
                height: 24px;
                padding: 0px 4px;
                color: #F44336;
                --paper-icon-button-ink-color: #FFFFFF;
            }
        </style>
        <iron-ajax auto handle-as="json" url={{dataletsListUrl}} on-response="_getDatalets"></iron-ajax>
        <paper-material id="items_vslider_container" elevation="5">
            <paper-input id="items_vslider_search" value={{filter}} no-label-float label="">
                <iron-icon class="search" icon="search" prefix></iron-icon>
                <paper-icon-button class="clear" suffix on-click="_clearInput" icon="clear" tabindex="0"></paper-icon-button>
            </paper-input>
            <div class="arrow-up">
                <paper-icon-button on-click="_onPrevClick" icon="hardware:keyboard-arrow-up"></paper-icon-button>
            </div>
            <div id="div_datalets_container" class="flex">
                <template is="dom-repeat" items="{{filteredDatalets}}">
                    <paper-material id={{item.imageName}} elevation="1" class='content-card' on-click="_selectDatalet">
                        <div class="legend">{{_getChartName(item.imageName)}}</div>
                        <div><img src={{item.imageUrl}}></div>
                    </paper-material>
                </template>
            </div>
            <div class="arrow-down">
                <paper-icon-button on-click="_onNextClick" icon="hardware:keyboard-arrow-down"></paper-icon-button>
            </div>
        </paper-material>
    </template>
    <script>
        Polymer({
            is : 'items-vslider-controllet',
            properties : {
                dataletsListUrl : {
                    type : String,
                    value : undefined
                },
                selectedDatalet : {
                    type  : String,
                    value : undefined
                },
                preselectedDatalet : {
                    type  : String,
                    value : undefined
                },
                datalets : {
                    type  : Array,
                    value : []
                },
                filteredDatalets : {
                    type  : Array,
                    value : []
                },
                filter : {
                    type  : String,
                    value : "",
                    observer : '_filterDatalets'
                }
            },
            listeners: {
                'dom-change': '_onDomChange'
            },
            ready : function() {
                $(this.$.div_datalets_container).perfectScrollbar();
            },
            attached : function() {
//                if(this.preselectedDatalet){
//                    this._preselectDatalet();
//                    this.preselectedDatalet = undefined;
//                }
                this._translate();
            },
            _reset : function() {
                if(this.selectedDatalet != undefined && (document.getElementById(this.selectedDatalet) != null)){
                    var dataletCard = document.getElementById(this.selectedDatalet);
                    dataletCard.elevation = "1";
                    dataletCard.getElementsByClassName("legend")[0].className = dataletCard.getElementsByClassName("legend")[0].className.replace(" selected", "");
                }
                this.selectedDatalet = undefined;
                this.filter = "";
                this.fire('items-vslider-controllet_selected-datalet', {datalet: undefined});
            },
            _translate : function(){
                this.$.items_vslider_search.setAttribute("label", ln["search_" + ln["localization"]]);
            },
            _clearInput : function() {
                this.$.items_vslider_search.value = "";
            },
            _getDatalets : function(e){
                var datalets = new Array();
                for(var i=0; i < e.detail.response.length; i++){
                    var datalet = { imageName : e.detail.response[i].name.replace("-datalet", ""), imageUrl : e.detail.response[i].url + e.detail.response[i].name + ".png" };
                    if(e.detail.response[i].type != "hidden")
                        datalets.push(datalet);
                }
                this.datalets = datalets;
                this.filteredDatalets = datalets;
            },
            _filterDatalets : function(){
                var datalets = new Array();
                for(var i=0; i < this.datalets.length; i++){
                    var datalet = this.datalets[i];
                    var imageName = this._getChartName(datalet.imageName).toLowerCase();
//                    console.log(imageName);
//                    console.log(this.filter);
                    if(imageName.indexOf(this.filter.toLowerCase()) > -1)
                        datalets.push(datalet);
                }
                this.filteredDatalets = datalets;
                $("#div_datalets_container").animate({ scrollTop: 0}, 0);
            },
            _onDomChange : function() {
                if(this.selectedDatalet != undefined ){
                    for(var i=0; i < this.filteredDatalets.length; i++){
                        var datalet = this.filteredDatalets[i];
                        var dataletCard = document.getElementById(datalet.imageName);
                        dataletCard.elevation = "1";
                        dataletCard.getElementsByClassName("legend")[0].className = dataletCard.getElementsByClassName("legend")[0].className.replace("selected", "");
                    }
                    if(document.getElementById(this.selectedDatalet) != null){
                        var dataletCard = document.getElementById(this.selectedDatalet);
                        dataletCard.elevation = "5";
                        dataletCard.getElementsByClassName("legend")[0].className = dataletCard.getElementsByClassName("legend")[0].className + " selected";
                    }
                }
            },
            _selectDatalet : function(e){
                if(this.selectedDatalet != undefined && (document.getElementById(this.selectedDatalet) != null)){
                    var dataletCard = document.getElementById(this.selectedDatalet);
                    dataletCard.elevation = "1";
                    dataletCard.getElementsByClassName("legend")[0].className = dataletCard.getElementsByClassName("legend")[0].className.replace(" selected", "");
                }
                if (e.currentTarget.id != this.selectedDatalet) {
                    e.currentTarget.elevation = "5";
                    e.currentTarget.getElementsByClassName("legend")[0].className = e.currentTarget.getElementsByClassName("legend")[0].className + " selected";
                    this.selectedDatalet = e.currentTarget.id;
                }
                else
                    this.selectedDatalet = undefined;
                this.fire('items-vslider-controllet_selected-datalet', {datalet: this.selectedDatalet});
            },
            _preselectDatalet : function(){
//                this.async(function() {
                var dataletCard = document.getElementById(this.preselectedDatalet);
//                console.log(dataletCard);
//                console.log(this.preselectedDatalet);
//                var id = "#"+this.preselectedDatalet;
//                var dataletCard = $(id);
//                var dataletCard = this.$$("#datatable");
//                console.log(dataletCard);
                dataletCard.elevation = "5";
                dataletCard.getElementsByClassName("legend")[0].className = dataletCard.getElementsByClassName("legend")[0].className + " selected";
//                dataletCard.find(".legend")[0].className += " selected";
                this.selectedDatalet = this.preselectedDatalet;
                this.fire('items-vslider-controllet_selected-datalet', {datalet: this.selectedDatalet});
//                }, 500);
            },
            _getImageUrl : function(index){
                return this.datalets[index].imageUrl;
            },
            _onPrevClick : function() {
                var container = $("#div_datalets_container");
                var h = container.height();
                var dataletPerPage = parseInt(h/156);
                var scroll = $("#div_datalets_container").scrollTop()-156*dataletPerPage;
                var diff = scroll % 156;
//                scroll += 156-diff;
                scroll -= diff;
                $("#div_datalets_container").animate({ scrollTop: scroll}, 300);
            },
            _onNextClick : function() {
                var container = $("#div_datalets_container");
                var h = container.height();
                var dataletPerPage = parseInt(h/156);
                var scroll = $("#div_datalets_container").scrollTop()+156*dataletPerPage;
                var diff = scroll % 156;
                scroll -= diff;
                $("#div_datalets_container").animate({ scrollTop: scroll}, 300);
            },
            _getChartName: function(key) {
                return ln[key + "_" +ln["localization"]];
            }
//            _resize : function(){
//                var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 16;
//                h = h - 64 - 8; //height with page scroller
//                $("#items_vslider_container").height(h);
//            }
        });
    </script>
</dom-module>