<link rel="import" href="../../bower_components/polymer/polymer.html"> <link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html"> <link rel="import" href="../../bower_components/paper-tabs/paper-tab.html"> <link rel="import" href="../../bower_components/neon-animation/neon-animation.html"> <link rel="import" href="../../bower_components/neon-animation/neon-animatable.html"> <link rel="import" href="../../bower_components/neon-animation/neon-animations.html"> <link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html"> <link rel="import" href="../../bower_components/paper-menu/paper-menu.html"> <link rel="import" href="../../bower_components/paper-item/paper-item.html"> <link rel="import" href="../../bower_components/paper-input/paper-textarea.html"> <link rel="import" href="../../bower_components/paper-material/paper-material.html" /> <link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html"> <link rel="import" href="../../bower_components/iron-icons/iron-icons.html"> <link rel="import" href="../../bower_components/iron-icon/iron-icon.html"> <link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html"> <link rel="import" href="../../datalets/datasetexplorer-datalet/datasetexplorer-datalet.html"> <link rel="import" href="paper-input-search.html"> <dom-module id="dataset-selection-controllet"> <template> <style is="custom-style"> :host { --paper-dropdown-menu-icon: { color: #2196F3; }; } paper-tabs { font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; font-weight: bold; --paper-tabs-selection-bar-color: #2196F3; } paper-tab { transition: all 1.0s; } paper-tab.iron-selected { background-color: #B6B6B6; } paper-tab:hover { color: #2196F3; } paper-tab[disabled] { color: #B6B6B6; } paper-dropdown-menu { width: 45%; margin-bottom: 32px; --paper-input-container-focus-color: #2196F3; } paper-dropdown-menu paper-item { white-space: nowrap; } paper-input-search { width: 45%; margin-bottom: 32px; --paper-input-container-focus-color: #2196F3; } paper-input-search paper-item { white-space: nowrap; } paper-item.iron-selected { background-color: #2196F3; color: #FFFFFF; } .ddl_container { position: relative; } .info_button { position: absolute; top: 18px; left: 45%; } paper-textarea { width: 90%; margin-bottom: 32px; --paper-input-container-focus-color: #2196F3; } paper-icon-button { color: #2196F3; --paper-icon-button-ink-color: #2196F3; } paper-icon-button[disabled] { color: #B6B6B6; } #material_container { margin-top: 8px; } #div_selection { padding-left: 10%; padding-top: 64px; } #dialog_info { border: 2px solid #2196F3; background-color: #E0E0E0; } </style> <paper-material id="material_container" elevation="5"> <paper-tabs selected="{{selected}}"> <paper-tab noink><span id="listView"></span></paper-tab> <paper-tab noink><span id="treeMapView"></span></paper-tab> <!--<paper-tab noink disabled><span data-l10n-id="mostPopular"></span></paper-tab>--> </paper-tabs> <neon-animated-pages selected="{{selected}}" entry-animation="fade-in-animation" exit-animation="fade-out-animation"> <neon-animatable> <div id="div_selection"> <div class="ddl_container"> <paper-input-search id="_datasets" label="Available datasets"> <paper-menu class="dropdown-content"> <template is="dom-repeat" items={{filteredDatasets}} as="dataset"> <paper-item id={{index}} on-tap="_selectDataUrl">{{dataset.name}}</paper-item> </template> </paper-menu> </paper-input-search> <div class="info_button"> <paper-icon-button id="info_dataset" disabled on-click="_showInfo" icon="info-outline" title="dataset info"></paper-icon-button> </div> </div> <template is="dom-if" if={{isSuggested}}> <div class="ddl_container"> <paper-dropdown-menu id="s_datasets" label="Suggested datasets"> <paper-menu class="dropdown-content"> <template is="dom-repeat" items={{suggestedDatasets}} as="dataset"> <paper-item id={{index}} on-tap="_selectSuggestedDataUrl">{{dataset.name}}</paper-item> </template> </paper-menu> </paper-dropdown-menu> <div class="info_button"> <paper-icon-button id="info_s_dataset" disabled on-click="_showInfo" icon="info-outline" title="dataset info"></paper-icon-button> </div> </div> </template> <paper-textarea id="selected_url" label="Selected url" value={{dataUrl}} error-message={{errorMessage}}></paper-textarea> <paper-dialog id="dialog_info"> <h2 id="dialog_name"></h2> <p id="dialog_description"></p> </paper-dialog> </div> </neon-animatable> <neon-animatable> <div id="div_datasetexplorer"></div> </neon-animatable> <neon-animatable> <!--popular--> </neon-animatable> </neon-animated-pages> </paper-material> </template> <script> Polymer({ is : 'dataset-selection-controllet', properties : { selected : { type : Number, value : 0 }, datasets : { type : Array, value : undefined }, filteredDatasets : { type : Array, value : [] }, suggestedDatasets : { type : Array, value : undefined }, isSuggested : { type : Boolean, value : false }, dataUrl : { type : String, value : undefined, observer : '_fireDataUrl' }, errorMessage : { type : String, value : "", } }, listeners: { 'datasetexplorer-datalet_data-url': '_selectDataUrl_treeMap', 'paper-input-search_input-value' : '_filterDatasets' }, ready : function(){ $(this.$.material_container).perfectScrollbar(); $(this.$.dialog_info).perfectScrollbar(); this.errorMessage = ln["wrongUrl_" + ln["localization"]]; }, attached : function(){ this._resize(); var that = this; window.addEventListener("resize", function() { that._resize(); }); this.filteredDatasets = this.datasets; if(this.suggestedDatasets) this.isSuggested = true; this._loadTreeMap(); this.async(function(){this._translate();},100); }, _translate : function(){ this.$._datasets.setAttribute("label", ln["availableDatasets_" + ln["localization"]]); this.$.listView.innerHTML = ln["listView_" + ln["localization"]]; this.$.treeMapView.innerHTML = ln["treeMapView_" + ln["localization"]]; if(this.isSuggested) this.$$("#s_datasets").setAttribute("label", ln["suggestedDatasets_" + ln["localization"]]); this.$.selected_url.setAttribute("label", ln["selectedUrl_" + ln["localization"]]); }, _filterDatasets : function(e){ var filter = e.detail.inputValue; var filteredDatasets = []; for (var i in this.datasets){ if(this.datasets[i].name.toLowerCase().indexOf(filter.toLowerCase()) != -1) filteredDatasets.push(this.datasets[i]); } this.filteredDatasets = filteredDatasets; }, _loadTreeMap : function(){ var h = $("#material_container").height() - 48; var w = $("#material_container").width(); this.$.div_datasetexplorer.innerHTML = "<datasetexplorer-datalet data='"+this.data+"' width=\""+w+"\" height=\""+h+"\" data-url=\"/openwall/api/datasetTree\" fields='[\"result,datasets,provider_name\",\"result,datasets,organization_name\",\"result,datasets,package_name\",\"result,datasets,resource_name\",\"result,datasets,url\",\"result,datasets,w\"]'></datasetexplorer-datalet>"; }, _selectDataUrl_treeMap : function(e) { $("#_datasets")[0]._setSelectedItem(null); $("#_datasets")[0].inputValue = ""; $("#info_dataset")[0].setAttribute("disabled", "true"); if (this.isSuggested) { $("#s_datasets")[0]._setSelectedItem(null); $("#s_datasets")[0].contentElement.select(-1); $("#info_s_dataset")[0].setAttribute("disabled", "true"); } this.dataUrl = this._addlimitUrl(e.detail.url); this.selected=0; }, _selectDataUrl : function(e){this._translate(); if (this.isSuggested) { $("#s_datasets")[0]._setSelectedItem(null); $("#s_datasets")[0].contentElement.select(-1); $("#info_s_dataset")[0].setAttribute("disabled", "true"); } var dataset = this.filteredDatasets[parseInt(e.target.id)] this.dataUrl = this._addlimitUrl(dataset.url); if(dataset.description != ""){ $("#info_dataset")[0].removeAttribute("disabled"); this.$.dialog_name.innerHTML = dataset.name; this.$.dialog_description.innerHTML = dataset.description; } else $("#info_dataset")[0].setAttribute("disabled", "true"); }, _selectSuggestedDataUrl : function(e){ $("#_datasets")[0]._setSelectedItem(null); $("#_datasets")[0].inputValue = ""; $("#info_dataset")[0].setAttribute("disabled", "true"); var dataset = this.suggestedDatasets[parseInt(e.target.id)] this.dataUrl = this._addlimitUrl(dataset.url); if(dataset.description != ""){ $("#info_s_dataset")[0].removeAttribute("disabled"); this.$.dialog_name.innerHTML = dataset.name; this.$.dialog_description.innerHTML = dataset.description; } else $("#info_s_dataset")[0].setAttribute("disabled", "true"); }, _showInfo : function(e){ var t = e.target; if(t.tagName.indexOf("IRON-ICON") != -1) t = $(e.target).parents("paper-icon-button")[0]; this.$.dialog_info.open(); var pos = t.getBoundingClientRect(); $("#dialog_info").css("top", pos.top - 4); $("#dialog_info").css("left", pos.left - 4); }, _fireDataUrl : function(){ this.fire('dataset-selection-controllet_data-url', {url: this.dataUrl}); }, _addlimitUrl : function(url){ //CKAN --> action no limit if((url.indexOf("api/action") > -1) && !(url.indexOf("limit") > -1)) { url += "&limit=99999"; } //OpenDataSoft --> action no limit if((url.indexOf("api/records") > -1) && !(url.indexOf("rows") > -1)){ url += "&rows=10000"; } return url; }, _resize : function(){ var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 16; h = h - 64 - 8; //height with page scroller $("#material_container").height(h); } }); </script> </dom-module>