From cd9f822e930c7d4f027c1cad40346f05e42e95ac Mon Sep 17 00:00:00 2001
From: renato <rended83@gmail.com>
Date: Mon, 2 May 2016 17:21:18 +0200
Subject: [PATCH] split 1st step

---
 controllets/select-dataset-controllet/select-dataset-controllet.html          |  94 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++----------------------------
 controllets/select-dataset-controllet/select-dataset-controllet_purelist.html | 728 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 794 insertions(+), 28 deletions(-)
 create mode 100755 controllets/select-dataset-controllet/select-dataset-controllet_purelist.html

diff --git a/controllets/select-dataset-controllet/select-dataset-controllet.html b/controllets/select-dataset-controllet/select-dataset-controllet.html
index 434758f..17e0eae 100755
--- a/controllets/select-dataset-controllet/select-dataset-controllet.html
+++ b/controllets/select-dataset-controllet/select-dataset-controllet.html
@@ -135,6 +135,11 @@
                 background-color: #E0E0E0;
             }
 
+            .item.expanded {
+                /*border: 2px solid #2196F3;*/
+                border-color: #2196F3;
+            }
+
             .pad {
                 @apply(--layout-flex);
                 /*@apply(--layout-vertical);*/
@@ -171,15 +176,37 @@
                 width: calc(100% - 8px);
             }
 
-            #select_dataset_container #list_container {
-                /*height: calc(100% - 244px);*/
-                /*width: calc(100% - 8px);*/
+            #select_dataset_container #list_info {
+                display: flex;
                 height: calc(100% - 48px);
-                width: 100%;
-                border: 4px solid #B6B6B6;
-                border-top: 0px;
-                border-bottom: 0px;
+                width: calc(100% + 8px);/*bad*/
+            }
+
+            #select_dataset_container #list_container {
                 position: relative;
+                height: 100%;
+                width: 50%;
+                border-left: 4px solid #B6B6B6;;
+            }
+
+            #select_dataset_container #info_container {
+                position: relative;
+                height: 100%;
+                width: 50%;
+                border-right: 4px solid #B6B6B6;
+
+                /*background-color: red;*/
+            }
+
+            #select_dataset_container #info {
+                position: relative;
+                height: calc(100% - 56px);
+                width: calc(100% - 56px);
+                padding: 11px;
+                border: 1px solid #B6B6B6;
+                border-radius: 4px;
+                background-color: #E0E0E0;
+                margin: 16px;
             }
 
             #select_dataset_container #treemap_container {
@@ -303,30 +330,32 @@
             <neon-animated-pages id="neon_container" selected="{{selected}}" entry-animation="fade-in-animation" exit-animation="fade-out-animation">
 
                 <neon-animatable>
-                    <div id="list_container">
-                        <iron-list id="list" items="{{shownDatasets}}" selection-enabled><!--multi-selection-->
-                            <template>
-                                <div>
-                                    <div class$="{{getClassForItem(selected)}}" on-tap="_selectDataUrl" style$="background: {{_getColorForItem(item)}};">
-                                    <!--<div class$="{{getClassForItem(selected)}}" on-tap="_selectDataUrl">-->
-                                        <span style="display:none;">{{item.url}}</span>
-                                        <div class="pad">
-                                            <div class="primary">{{item.resource_name}}</div>
-                                            <!--<div class="shortText" style="display:none;">{{item.url}}</div>-->
-                                            <div class="longText">
-                                                <template is="dom-repeat" items="{{_stringToArray(item.metas)}}" as="mata">
-                                                    <b>{{mata.name}}:</b>
-                                                    <span inner-h-t-m-l="{{mata.value}}"></span> <br>
-                                                </template>
+                    <div id="list_info">
+                        <div id="list_container">
+                            <iron-list id="list" items="{{shownDatasets}}" selection-enabled>
+                                <template>
+                                    <div>
+                                        <div class$="{{getClassForItem(selected)}}" on-tap="_selectDataUrl" style$="background: {{_getColorForItem(item)}};">
+                                            <span style="display:none;">{{item.url}}</span>
+                                            <div class="pad">
+                                                <div class="primary">{{item.resource_name}}</div>
+                                                <!--<div class="longText">-->
+                                                    <!--<template is="dom-repeat" items="{{_stringToArray(item.metas)}}" as="mata">-->
+                                                        <!--<b>{{mata.name}}:</b>-->
+                                                        <!--<span inner-h-t-m-l="{{mata.value}}"></span> <br>-->
+                                                    <!--</template>-->
+                                                <!--</div>-->
                                             </div>
+                                            <iron-icon icon$="{{_getIconForItem(item)}}" style$="color: {{_getColorForIcon(item)}};"></iron-icon>
                                         </div>
-                                        <!--<iron-icon icon$="[[iconForItem(item)]]"></iron-icon>-->
-                                        <!--<iron-icon icon="bookmark" style$="color: {{_getColorForItem(item)}};"></iron-icon>-->
-                                        <iron-icon icon$="{{_getIconForItem(item)}}" style$="color: {{_getColorForIcon(item)}};"></iron-icon>
                                     </div>
-                                </div>
-                            </template>
-                        </iron-list>
+                                </template>
+                            </iron-list>
+                        </div>
+                        <div id="info_container">
+                            <div id="info">
+                            </div>
+                        </div>
                     </div>
 
                     <div id="footer_list">
@@ -422,6 +451,7 @@
 
                 ready : function() {
                     $(this.$.list_container).perfectScrollbar();
+                    $(this.$.info).perfectScrollbar();
 
 //                    this.$.selected_url.invalid = true;
                 },
@@ -667,6 +697,13 @@
                 _selectDataUrl : function(){
                     this.async(function () {
                         if(this.$.list.selectedItem) {
+
+                            var metas = JSON.parse(this.$.list.selectedItem.metas);
+                            var html = "";
+                            for(var i in metas)
+                                html += "<b>" + i + ":</b> " + metas[i] + "<br>";
+                            this.$.info.innerHTML = html;
+
                             var url = this.$.list.selectedItem.url;
 
                             // Check if CKAN
@@ -692,6 +729,7 @@
                         }
                         else {
                             this.dataUrl = "";
+                            this.$.info.innerHTML = "";
                         }
                     }, 0);
                 },
diff --git a/controllets/select-dataset-controllet/select-dataset-controllet_purelist.html b/controllets/select-dataset-controllet/select-dataset-controllet_purelist.html
new file mode 100755
index 0000000..434758f
--- /dev/null
+++ b/controllets/select-dataset-controllet/select-dataset-controllet_purelist.html
@@ -0,0 +1,728 @@
+<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/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">
+
+<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-input.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/hardware-icons.html">
+<!--<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">-->
+
+<link rel="import" href="../../bower_components/paper-checkbox/paper-checkbox.html">
+
+<link rel="import" href="../../datalets/datasetexplorer-datalet/datasetexplorer-datalet.html">
+
+<dom-module id="select-dataset-controllet">
+    <template>
+        <style>
+            :host {
+            --paper-dropdown-menu-icon: {
+                 color: #000000;
+             };
+            --paper-dropdown-menu-ripple: {
+                 color: #FFFFFF;
+             };
+            /*--paper-tab-ink: {*/
+                 /*color: #FFFFFF;*/
+             /*};*/
+            }
+
+            iron-list {
+            --iron-list-items-container: {
+                margin:16px 16px 8px 16px;
+             };
+            }
+
+            paper-textarea {
+                width: 100%;
+                --paper-input-container-focus-color: #2196F3;
+            }
+
+            paper-input {
+                --paper-input-container-focus-color: #2196F3;
+            }
+            paper-dropdown-menu {
+                width: 100%;
+                --paper-input-container-focus-color: #2196F3;
+            }
+
+            paper-item.iron-selected {
+                background-color: #2196F3;
+                color: #FFFFFF;
+            }
+
+            paper-checkbox {
+                height: 24px;
+                /*margin-top: 8px*/
+                --paper-checkbox-checked-color: #2196F3;
+                --paper-checkbox-checked-ink-color: #FFFFFF;
+                --paper-checkbox-unchecked-color: #000000;
+                --paper-checkbox-unchecked-ink-color: #FFFFFF;
+                --paper-checkbox-label-color: #000000;
+            }
+
+            paper-icon-button{
+                height: 48px;
+                width: 48px;
+                padding: 0px;
+                --paper-icon-button-ink-color: #FFFFFF;
+            }
+
+            paper-icon-button:hover{
+                color: #2196F3;
+            }
+
+            paper-icon-button[disabled]{
+                color: #B6B6B6;
+            }
+
+            paper-icon-button.clear {
+                width: 24px;
+                height: 24px;
+                padding: 0px 4px;
+                color: #F44336;
+                --paper-icon-button-ink-color: #FFFFFF;
+            }
+
+            paper-tabs {
+                font-weight: bold;
+            }
+
+            paper-tab {
+                transition: all 1.0s;
+            }
+
+            paper-tab.iron-selected {
+                background-color: #2196F3;
+                color: #FFFFFF;
+            }
+
+            paper-tab:not(.iron-selected):hover {
+                color: #2196F3;
+            }
+
+            .item {
+                /*@apply(--layout-horizontal);*/
+                display: flex;
+                padding: 11px;
+                border: 1px solid #B6B6B6;
+                border-radius: 4px;
+                cursor: pointer;
+                margin-bottom: 8px;
+                background-color: #E0E0E0;
+            }
+
+            .pad {
+                @apply(--layout-flex);
+                /*@apply(--layout-vertical);*/
+            }
+
+            .primary {
+                font-weight: bold;
+            }
+
+            .item.expanded .primary {
+                color: #2196F3;
+            }
+
+            .longText {
+                display: none;
+            }
+
+            .item.expanded .longText {
+                display: block;
+            }
+
+            #select_dataset_container {
+                margin-top: 8px;
+            }
+
+            #select_dataset_container * {
+                font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+                font-size: 16px;
+                line-height: 24px;
+            }
+
+            #select_dataset_container #neon_container {
+                height: calc(100% - 172px);
+                width: calc(100% - 8px);
+            }
+
+            #select_dataset_container #list_container {
+                /*height: calc(100% - 244px);*/
+                /*width: calc(100% - 8px);*/
+                height: calc(100% - 48px);
+                width: 100%;
+                border: 4px solid #B6B6B6;
+                border-top: 0px;
+                border-bottom: 0px;
+                position: relative;
+            }
+
+            #select_dataset_container #treemap_container {
+                /*height: calc(100% - 244px);*/
+                /*width: calc(100% - 8px);*/
+                height: calc(100% - 48px);
+                width: 100%;
+                border: 4px solid #B6B6B6;
+                border-top: 0px;
+                border-bottom: 0px;
+                position: relative;
+            }
+
+            #select_dataset_container #header {
+                position: relative;
+                z-index: 1;
+                -webkit-box-shadow: 0 30px 24px -12px rgba(0, 0, 0, 0.14), 0 20px 30px -9px rgba(0, 0, 0, 0.12), 0 20px 10px -19px rgba(0, 0, 0, 0.4);
+                -moz-box-shadow: 0 30px 24px -12px rgba(0, 0, 0, 0.14), 0 20px 30px -9px rgba(0, 0, 0, 0.12), 0 20px 10px -19px rgba(0, 0, 0, 0.4);
+                box-shadow: 0 30px 24px -12px rgba(0, 0, 0, 0.14), 0 20px 30px -9px rgba(0, 0, 0, 0.12), 0 20px 10px -19px rgba(0, 0, 0, 0.4);
+
+                background-color: #B6B6B6;
+                display: flex;
+                padding: 0px 4px;
+            }
+
+            #select_dataset_container #footer_list {
+                position: relative;
+                z-index: 1;
+                -webkit-box-shadow: 0 -30px 24px -12px rgba(0, 0, 0, 0.14), 0 -20px 30px -9px rgba(0, 0, 0, 0.12), 0 -20px 10px -19px rgba(0, 0, 0, 0.4);
+                -moz-box-shadow: 0 -30px 24px -12px rgba(0, 0, 0, 0.14), 0 -20px 30px -9px rgba(0, 0, 0, 0.12), 0 -20px 10px -19px rgba(0, 0, 0, 0.4);
+                box-shadow: 0 -30px 24px -12px rgba(0, 0, 0, 0.14), 0 -20px 30px -9px rgba(0, 0, 0, 0.12), 0 -20px 10px -19px rgba(0, 0, 0, 0.4);
+            }
+
+            .noshadow {
+                -webkit-box-shadow: none !important;
+                -moz-box-shadow: none !important;
+                box-shadow: none !important;
+            }
+
+            #select_dataset_container #footer_list,
+            #select_dataset_container #footer_treemap {
+                width: 100%;
+                background-color: #B6B6B6;
+                display: flex;
+                padding: 0px 4px;
+            }
+
+            #select_dataset_container #url {
+                height: 76px;/*100*/
+                border: 4px solid #B6B6B6;
+                border-top: 0px;
+                padding: 0px 16px;
+                margin-top: -4px;
+            }
+
+            #header .header_block {
+                width: 20%;
+                height: 40px;
+                padding: 4px 16px 4px 16px;
+            }
+
+            /*.header_block:nth-child(2), .header_block:nth-child(3), .header_block:nth-child(3), .header_block:nth-child(4){*/
+                /*visibility: hidden;*/
+            /*}*/
+
+            #header .header_block:nth-child(4) {
+                text-align: center;
+            }
+
+            .footer_block {
+                width: calc((100% - 0px) / 3);
+                height: 24px;
+                padding: 12px 8px 12px 8px;
+                text-align: center;
+            }
+
+            .footer_block:nth-child(2) {
+                height: 48px;
+                padding: 0px 8px;
+            }
+
+            #suggested_div {
+                visibility: hidden;
+            }
+        </style>
+
+        <paper-material id="select_dataset_container" elevation="5">
+
+            <paper-tabs selected="{{selected}}" no-bar>
+                <paper-tab noink on-tap="_refreshList"><span id="listView"></span></paper-tab>
+                <!--<paper-tab noink ><span id="listView"></span></paper-tab>-->
+                <paper-tab on-tap="_noShadow" noink><span id="treeMapView"></span></paper-tab>
+            </paper-tabs>
+
+            <div id="header">
+                <div class="header_block">
+                    <paper-dropdown-menu id="ddl_provider" label="" no-label-float>
+                        <paper-menu class="dropdown-content" selected="0">
+                            <paper-item id="0" on-tap="_filter"></paper-item>
+                            <template is="dom-repeat" items={{_toArray(providers)}} as="provider">
+                                <!--<paper-item id={{provider.value.id}} style$="background: {{_getProviderColor(provider.value.id)}};">{{provider.value.title}}</paper-item>-->
+                                <paper-item id={{provider.value.id}} on-tap="_filter">{{provider.value.title}}</paper-item>
+                            </template>
+                        </paper-menu>
+                    </paper-dropdown-menu>
+                </div>
+                <div class="header_block">
+                </div>
+                <div class="header_block">
+                </div>
+                <div class="header_block">
+                </div>
+                <div class="header_block">
+                    <paper-input id="datasets_filter" 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>
+            </div>
+
+            <neon-animated-pages id="neon_container" selected="{{selected}}" entry-animation="fade-in-animation" exit-animation="fade-out-animation">
+
+                <neon-animatable>
+                    <div id="list_container">
+                        <iron-list id="list" items="{{shownDatasets}}" selection-enabled><!--multi-selection-->
+                            <template>
+                                <div>
+                                    <div class$="{{getClassForItem(selected)}}" on-tap="_selectDataUrl" style$="background: {{_getColorForItem(item)}};">
+                                    <!--<div class$="{{getClassForItem(selected)}}" on-tap="_selectDataUrl">-->
+                                        <span style="display:none;">{{item.url}}</span>
+                                        <div class="pad">
+                                            <div class="primary">{{item.resource_name}}</div>
+                                            <!--<div class="shortText" style="display:none;">{{item.url}}</div>-->
+                                            <div class="longText">
+                                                <template is="dom-repeat" items="{{_stringToArray(item.metas)}}" as="mata">
+                                                    <b>{{mata.name}}:</b>
+                                                    <span inner-h-t-m-l="{{mata.value}}"></span> <br>
+                                                </template>
+                                            </div>
+                                        </div>
+                                        <!--<iron-icon icon$="[[iconForItem(item)]]"></iron-icon>-->
+                                        <!--<iron-icon icon="bookmark" style$="color: {{_getColorForItem(item)}};"></iron-icon>-->
+                                        <iron-icon icon$="{{_getIconForItem(item)}}" style$="color: {{_getColorForIcon(item)}};"></iron-icon>
+                                    </div>
+                                </div>
+                            </template>
+                        </iron-list>
+                    </div>
+
+                    <div id="footer_list">
+                        <div class="footer_block"><span id="showing"></span> {{shownPrev}} <span id="to"></span> {{shownNext}} <span id="of"></span> {{length}} <span id="datasets"></span></div>
+                        <div class="footer_block">
+                            <paper-icon-button id="slider_chevron_left" class="chevron-left" on-click="_onPrevClick" icon="chevron-left"></paper-icon-button>
+                            <paper-icon-button id="slider_chevron_right" class="chevron-right" on-click="_onNextClick" icon="chevron-right"></paper-icon-button>
+                        </div>
+                        <div id="suggested_div" class="footer_block">
+                            <!--<template is="dom-if" if={{suggestedDatasets}}>-->
+                                <paper-checkbox checked on-change="showSuggested"><span id="suggested_datasets"></span></paper-checkbox>
+                            <!--</template>-->
+                        </div>
+                    </div>
+                </neon-animatable>
+
+                <neon-animatable>
+                    <div id="treemap_container"></div>
+
+                    <div id="footer_treemap">
+                        <div class="footer_block"><span id="showing2"></span> {{tLength}} <span id="datasets2"></span></div>
+                        <div class="footer_block"></div>
+                        <div class="footer_block"></div>
+                    </div>
+                </neon-animatable>
+
+            </neon-animated-pages>
+
+            <div id="url">
+                <paper-textarea id="selected_url" label="" value={{dataUrl}} error-message={{errorMessage}}></paper-textarea>
+            </div>
+
+        </paper-material>
+
+    </template>
+
+    <script>
+        HTMLImports.whenReady(function() {
+            Polymer({
+                is: 'select-dataset-controllet',
+                properties: {
+                    datasets: {
+                        type: Object,
+                        value: undefined
+                    },
+                    filteredDatasets : {
+                        type : Array,
+                        value : undefined
+                    },
+                    shownDatasets : {
+                        type : Array,
+                        value : undefined
+                    },
+                    suggestedDatasets : {
+                        type : Array,
+                        value : undefined
+                    },
+
+                    providers : {
+                        type : Array,
+                        value : undefined
+                    },
+                    dataUrl : {
+                        type  : String,
+                        value : undefined,
+                        observer : '_fireDataUrl'
+                    },
+                    filter : {
+                        type  : String,
+                        value : "",
+                        observer : '_filter'
+                    },
+                    selected : {
+                        type  : Number,
+                        value : 0
+                    },
+                    prev : {type  : Number, value : undefined},
+                    next : {type  : Number, value : undefined},
+                    shownPrev : {type  : Number, value : undefined},
+                    shownNext : {type  : Number, value : undefined},
+                    length : {type  : Number, value : undefined},
+                    tLength : {type  : Number, computed : 'treemapLength(length)'},
+                    step : {type  : Number, value : 20},
+                    colors : {
+                        type : Array,
+                        value : ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5","#d9d9d9","#bc80bd","#ccebc5","#ffed6f"]
+                    }
+                },
+
+                listeners: {
+                    'datasetexplorer-datalet_data-url': '_selectDataUrl_treeMap'
+                },
+
+                ready : function() {
+                    $(this.$.list_container).perfectScrollbar();
+
+//                    this.$.selected_url.invalid = true;
+                },
+
+                attached: function() {
+                    this._resize();
+                    var that = this;
+                    window.addEventListener("resize", function() { that._resize(); that._loadTreeMap();});
+
+                    this.providers = this.datasets["result"]["providers"];
+                    this.datasets = this.datasets["result"]["datasets"];
+
+                    if(this.suggestedDatasets) {
+                        this.tempDatasets = this.datasets;
+                        this.datasets = this.suggestedDatasets.concat(this.datasets);
+                        this.$.suggested_div.style.visibility = "visible";
+                    }
+
+                    this.filteredDatasets = this.datasets;
+
+                    this.prev = 1;
+                    this.next = this.step;
+                    this.length = this.filteredDatasets.length;
+
+                    this.shownPrev = Math.min(this.prev, this.length);
+                    this.shownNext = Math.min(this.next, this.length);
+                    this.shownDatasets = this.filteredDatasets.slice(this.prev-1, this.next);
+
+                    this.$.list.scrollTarget = this.ownerDocument.documentElement;
+
+                    this._translate();
+
+                    this._loadTreeMap();
+                },
+
+                _translate : function(){
+                    this.$.listView.innerHTML    = ln["listView_" + ln["localization"]];
+                    this.$.treeMapView.innerHTML = ln["treeMapView_" + ln["localization"]];
+
+                    this.$.ddl_provider.setAttribute("label", ln["provider_" + ln["localization"]]);
+                    this.$.datasets_filter.setAttribute("label", ln["search_" + ln["localization"]]);
+
+                    this.$.suggested_datasets.innerHTML = ln["suggestedDatasets_" + ln["localization"]];
+
+                    this.$.showing.innerHTML = ln["showing_" + ln["localization"]];
+                    this.$.showing2.innerHTML = ln["showing_" + ln["localization"]];
+                    this.$.to.innerHTML = ln["to_" + ln["localization"]];
+                    this.$.of.innerHTML = ln["of_" + ln["localization"]];
+                    this.$.datasets.innerHTML = ln["datasets_" + ln["localization"]];
+                    this.$.datasets2.innerHTML = ln["datasets_" + ln["localization"]];
+
+                    this.$.selected_url.setAttribute("label", ln["selectedUrl_" + ln["localization"]]);
+                    this.errorMessage = ln["wrongUrl_" + ln["localization"]];
+                },
+
+                showSuggested : function(e) {
+                    if(e.target.checked)
+                        this.datasets = this.suggestedDatasets.concat(this.tempDatasets);
+                    else
+                        this.datasets = this.tempDatasets;
+                    this._filter();
+                },
+
+                _loadTreeMap : function(){
+                    var h = $("#neon_container").height() - 48;
+                    var w = $("#neon_container").width();
+
+                    var data = JSON.stringify({result : {providers: this.providers, datasets: this.filteredDatasets}}).replace(/'/g, "");
+
+                    if(this.filteredDatasets.length > 0)
+                        this.$.treemap_container.innerHTML = "<datasetexplorer-datalet data='"+data+"' width=\""+w+"\" height=\""+h+"\" fields='[\"result,datasets,provider_name\",\"result,datasets,organization_name\",\"result,datasets,package_name\",\"result,datasets,resource_name\",\"result,datasets,url\",\"result,datasets,w\",\"result,datasets,metas\"]'></datasetexplorer-datalet>";
+                    else
+                        this.$.treemap_container.innerHTML = "";
+                },
+
+                _filter : function() {
+                    if(this.filteredDatasets) {
+                        this.async(function () {
+                            var ddl_provider = $(this.$.ddl_provider).find("paper-menu")[0].selectedItem;
+                            var name = ddl_provider.innerHTML.trim();
+                            var id = this._getIdByProviderName(name);
+                            this.prev = 1;
+                            this.next = this.step;
+                            if (id) {
+                                //filtered by provider name
+                                this.filteredDatasets = this.datasets.filter(function (el) {
+                                    return el.provider_name == "p:" + id;
+                                });
+                            }
+                            else {
+                                this.filteredDatasets = this.datasets;
+                            }
+
+                            //filtered by filter
+                            var filter = this.filter;
+                            this.filteredDatasets = this.filteredDatasets.filter(function (el) {
+                                return el.resource_name.toLowerCase().indexOf(filter.toLowerCase()) > -1;
+                            });
+
+                            this.length = this.filteredDatasets.length;
+
+                            this.shownPrev = Math.min(this.prev, this.length);
+                            this.shownNext = Math.min(this.next, this.length);
+                            this.shownDatasets = this.filteredDatasets.slice(this.prev - 1, this.next);
+
+                            $("#list_container").animate({scrollTop: 0}, 0);
+
+                            this._loadTreeMap();
+                        }, 0);
+                    }
+                },
+
+                _refreshList : function() {
+                    this.shownDatasets = this.filteredDatasets.slice(this.prev - 1, this.next);
+                    this.$.header.className = this.$.header.className.replace(" noshadow", "");
+                },
+
+                _noShadow : function() {
+                    console.log(this.$.header);
+                    this.$.header.className += " noshadow";
+                },
+
+                _clearInput : function() {
+                    this.$.datasets_filter.value = "";
+                },
+
+                _getIdByProviderName : function(name) {
+                    for(var id in this.providers) {
+                        if (this.providers[id].title == name)
+                            return this.providers[id].id;
+                    }
+                },
+
+//                iconForItem: function(item) {
+//                    return item ? (item.integer < 50 ? 'star-border' : 'info-outline') : '';
+//                },
+
+                treemapLength : function(length) {
+                    var ddl_provider = $(this.$.ddl_provider).find("paper-menu")[0].selectedItem;
+                    var name = ddl_provider.innerHTML.trim();
+                    var id = this._getIdByProviderName(name);
+
+                    if(this.suggestedDatasets && !id)
+                        return Math.max(length - this.suggestedDatasets.length, 0);
+                    return length;
+                },
+
+                _getColorForIcon : function(item) {
+                    var ddl_provider = $(this.$.ddl_provider).find("paper-menu")[0].selectedItem;
+                    var name = ddl_provider.innerHTML.trim();
+                    var id = this._getIdByProviderName(name);
+                    if (id) {
+                        return this.colors[0];
+                    }
+                    if(!item.provider_name) {
+                        return "#00BCD4";
+                    }
+                    var id = item.provider_name.substring(2, item.provider_name.length);
+                    var i = this.getProviderById(id) % this.colors.length;
+                    return this.colors[i];
+                },
+
+                _getColorForItem : function(item) {
+//                    var ddl_provider = $(this.$.ddl_provider).find("paper-menu")[0].selectedItem;
+//                    var name = ddl_provider.innerHTML.trim();
+//                    var id = this._getIdByProviderName(name);
+//                    if (id) {
+//                        return this.colors[0];
+//                    }
+                    if(!item.provider_name) {
+                        return "#FFEB3B";
+                    }
+//                    var id = item.provider_name.substring(2, item.provider_name.length);
+//                    var i = this.getProviderById(id) % this.colors.length;
+//                    return this.colors[i];
+                },
+
+                _getIconForItem : function(item) {
+                    return item.provider_name ? 'bookmark' : 'star';
+                },
+
+//                _getProviderColor: function(id) {
+//                    var i = this.getProviderById(id) % this.colors.length;
+//                    return this.colors[i];
+//                },
+
+                getClassForItem: function(selected) {
+                    return selected ? 'item expanded' : 'item';
+                },
+
+                getProviderById: function(providerId) {
+                    var i = 0;
+                    for(var id in this.providers){
+                        if(this.providers[id].id == providerId)
+                            return i;
+                        i++;
+                    }
+                },
+
+                _onPrevClick : function(){
+                    if(this.prev != 1) {
+                        this.prev -= this.step;
+                        this.next -= this.step;
+
+                        this.shownPrev = Math.min(this.prev, this.length);
+                        this.shownNext = Math.min(this.next, this.length);
+                        this.shownDatasets = this.filteredDatasets.slice(this.prev - 1, this.next);
+                    }
+                    $("#list_container").animate({ scrollTop: 0}, 0);
+                },
+
+                _onNextClick : function(){
+                    if(this.next < this.length) {
+                        this.prev += this.step;
+                        this.next += this.step;
+
+                        this.shownPrev = Math.min(this.prev, this.length);
+                        this.shownNext = Math.min(this.next, this.length);
+                        this.shownDatasets = this.filteredDatasets.slice(this.prev - 1, this.next);
+                    }
+                    $("#list_container").animate({ scrollTop: 0}, 0);
+                },
+
+                _stringToArray: function(obj) {
+                    obj = JSON.parse(obj);
+                    return Object.keys(obj).map(function(key) {
+                        return {
+                            name: key,
+                            value: obj[key]
+                        };
+                    });
+                },
+
+                _toArray: function(obj) {
+                    return Object.keys(obj).map(function(key) {
+                        return {
+                            name: key,
+                            value: obj[key]
+                        };
+                    });
+                },
+
+                _selectDataUrl : function(){
+                    this.async(function () {
+                        if(this.$.list.selectedItem) {
+                            var url = this.$.list.selectedItem.url;
+
+                            // Check if CKAN
+                            var strDatasetPos = url.indexOf('/dataset/');
+                            var strResourcePos = (strDatasetPos >= 0) ? url.indexOf('/resource/') : -1;
+                            if (strDatasetPos >= 0 && strResourcePos > strDatasetPos) {
+                                var urlSegment1 = url.substring(0, strDatasetPos);
+                                var urlResourceEnd = url.indexOf('/', strResourcePos + 10);
+                                var resourceId = url.substring(strResourcePos + 10, urlResourceEnd);
+                                url = urlSegment1 + "/api/action/datastore_search?resource_id=" + resourceId;
+                            }
+
+                            // Check if OPENDATASOFT
+                            var strExploreDatasetPos = url.indexOf('/explore/dataset/');
+                            if (strExploreDatasetPos >= 0) {
+                                var urlSegment1 = url.substring(0, strExploreDatasetPos);
+                                var datasetEnd = url.indexOf(strExploreDatasetPos + 17, '/');
+                                var datasetId = url.substring(strExploreDatasetPos + 17, datasetEnd >= 0 ? datasetEnd : url.length);
+                                url = urlSegment1 + '/api/records/1.0/search?dataset=' + datasetId;
+                            }
+
+                            this.dataUrl = this._addlimitUrl(url);
+                        }
+                        else {
+                            this.dataUrl = "";
+                        }
+                    }, 0);
+                },
+
+                _selectDataUrl_treeMap : function(e) {
+                    this.dataUrl = this._addlimitUrl(e.detail.url);
+                },
+
+                _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
+                    $("#select_dataset_container").height(h);
+                }
+            });
+        });
+    </script>
+</dom-module>
\ No newline at end of file
--
libgit2 0.21.4