<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>