WebCompDev / COMPONENTS

Commit 4b173166222e0b1532a9fa169510f47d5bd53362

Authored by Andrea Petta
2 parents 498cdf34 c5fa9cdb

Merge branch 'master' of http://service.routetopa.eu:7480/WebCompDev/COMPONENTS

Inline Side-by-side
Showing 3 changed files with 1018 additions and 29 deletions
controllets/document-card-controllet/document-card-controllet.html 0 → 100644
  View file @4b17316
  1 +<link rel="import" href="../../bower_components/polymer/polymer.html"/>
  2 +<link rel="import" href="../../bower_components/paper-material/paper-material.html"/>
  3 +<link rel="import" href="../../bower_components/paper-fab/paper-fab.html"/>
  4 +<link rel="import" href="../../bower_components/iron-icons/iron-icons.html"/>
  5 +<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html"/>
  6 +<link rel="import" href="../../bower_components/neon-animation/neon-animation.html"/>
  7 +
  8 +<script src="../../locales/paper_card_controllet_ln.js"></script>
  9 +
  10 +<dom-module id="document-card-controllet">
  11 +
  12 + <template>
  13 + <link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
  14 + <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
  15 + <style>
  16 +
  17 + #paper_card_container {
  18 + font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  19 + font-size: 16px;
  20 + background-color: white;
  21 + }
  22 +
  23 + #content {
  24 + padding: 4px 4px 0px 4px;
  25 + position:relative;
  26 + width: 98%;
  27 + height: 90%;
  28 + }
  29 +
  30 + .footer {
  31 + height: 16px;
  32 + }
  33 +
  34 + .comment {
  35 + position: relative;
  36 + top: -50px;
  37 + height: 50px;
  38 + background-color: white;
  39 + padding: 8px;
  40 + font-size: small;
  41 + color: #727272;
  42 + word-wrap: break-word;
  43 + overflow: hidden;
  44 + }
  45 +
  46 + paper-fab#fullscreen-button {
  47 + position: absolute;
  48 + /*z-index: 10;*/
  49 + top: 11px;
  50 + right: 15px;
  51 + --paper-fab-background:#FFFFFF;
  52 + padding : 0px;
  53 + margin: 0px;
  54 + height: 24px;
  55 + width: 24px;
  56 + color: #666666;
  57 + }
  58 +
  59 + paper-dialog {
  60 + margin: 0px;
  61 + padding: 0px;
  62 + z-index: 1100;
  63 + }
  64 +
  65 + #fullscreen_container {
  66 + display: inline;
  67 + position: fixed;
  68 + width: 90%;
  69 + height: 80vh;
  70 + right: 0;
  71 + left: 0;
  72 + top: 64px;
  73 + margin-right: auto;
  74 + margin-left: auto;
  75 + padding: 8px;
  76 + background-color: white;
  77 + }
  78 +
  79 + #fullscreen_content {
  80 + margin: 0px;
  81 + }
  82 +
  83 + #resource{
  84 + height: 100%;
  85 + width: 100%;
  86 + }
  87 +
  88 + :host #docs-header{
  89 + display : none;
  90 + }
  91 +
  92 + #info_close_button{
  93 + z-index: 1;
  94 + color: #666666;
  95 + box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
  96 + -webkit-transition: 0.2s ease-out;
  97 + -moz-transition: 0.2s ease-out;
  98 + -o-transition: 0.2s ease-out;
  99 + transition: 0.2s ease-out;
  100 + cursor: pointer;
  101 + background: linear-gradient(#f4f4f4,#e4e4e4);
  102 + float: right;
  103 + top: 11px;
  104 + right: 8px;
  105 + margin: 0px;
  106 + position: absolute;
  107 + height: 29px;
  108 + min-width: 30px;
  109 + padding: 5px;
  110 + }
  111 +
  112 + </style>
  113 +
  114 +
  115 + <paper-material id="paper_card_container" elevation="{{elevation}}">
  116 +
  117 + <div id="content">
  118 + <iframe id="resource" src="{{resourceUrl}}?userName={{userName}}"></iframe>
  119 + <!--<iframe id="resource" src="{{resourceUrl}}"></iframe>-->
  120 + </div>
  121 +
  122 + <paper-fab id="fullscreen-button" class="open" mini icon="fullscreen" on-click="_handleOpenClick"></paper-fab>
  123 +
  124 + <paper-dialog id="fullscreen_container" entry-animation="scale-up-animation" exit-animation="fade-out-animation">
  125 + <!--with-backdrop-->
  126 + <div id="fullscreen_content"></div>
  127 + <paper-button id="info_close_button" dialog-confirm autofocus>x</paper-button>
  128 + </paper-dialog>
  129 +
  130 + </paper-material>
  131 +
  132 + </template>
  133 +
  134 + <script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
  135 +
  136 + <script>
  137 + _this = null;
  138 +
  139 + Polymer({
  140 + is: "document-card-controllet",
  141 + properties: {
  142 +
  143 + width: {
  144 + type: Number,
  145 + observer: "_changeWidth"
  146 + },
  147 +
  148 + height: {
  149 + type: Number,
  150 + observer: "_changeHeight"
  151 + },
  152 +
  153 + elevation:{
  154 + type: Number,
  155 + value: 3
  156 + },
  157 +
  158 + createNewType : {
  159 + type : String,
  160 + value : undefined
  161 + },
  162 +
  163 + comment:{
  164 + cardType: String,
  165 + value: ""
  166 + },
  167 +
  168 + resourceUrl : {
  169 + type : String,
  170 + value : undefined
  171 + },
  172 +
  173 + userName: {
  174 + type: String,
  175 + value: undefined
  176 + },
  177 + lang:{
  178 + type: String,
  179 + value: navigator.language
  180 + }
  181 + },
  182 +
  183 + ready : function(){
  184 + },
  185 +
  186 + attached: function(){
  187 + $(this.$.fullscreen_container).perfectScrollbar();
  188 + },
  189 +
  190 +
  191 + _changeWidth: function(){
  192 + //this.style.width = this.width + "px";
  193 + //this.$.paper_card_container.style.width = this.width + "px";
  194 + //this.$.content.style.width = this.width - 8 + "px";
  195 + },
  196 +
  197 + _changeHeight: function(){
  198 + this.style.height = this.height + "vh";
  199 + //this.$.content.width = this.width - 4 + "vh";
  200 + this.$.paper_card_container.style.height = this.height + "vh";
  201 + this.$.content.style.height = this.height - 1 + "vh";
  202 + $(this.$.content).perfectScrollbar();
  203 + },
  204 +
  205 + _handleOpenClick: function(){
  206 + this.$.fullscreen_content.style.height = "80vh";
  207 + this.$.fullscreen_content.innerHTML = this.$.content.innerHTML;
  208 + this.$.fullscreen_container.style.display = "inline";//datalet res
  209 + this.$.fullscreen_container.open();
  210 + }
  211 +
  212 + })
  213 + </script>
  214 +
  215 +</dom-module>
0 \ No newline at end of file 216 \ No newline at end of file
controllets/select-dataset-controllet/select-dataset-controllet.html
  View file @4b17316
@@ -135,6 +135,11 @@ @@ -135,6 +135,11 @@
135 background-color: #E0E0E0; 135 background-color: #E0E0E0;
136 } 136 }
137 137
  138 + .item.expanded {
  139 + /*border: 2px solid #2196F3;*/
  140 + border-color: #2196F3;
  141 + }
  142 +
138 .pad { 143 .pad {
139 @apply(--layout-flex); 144 @apply(--layout-flex);
140 /*@apply(--layout-vertical);*/ 145 /*@apply(--layout-vertical);*/
@@ -171,15 +176,37 @@ @@ -171,15 +176,37 @@
171 width: calc(100% - 8px); 176 width: calc(100% - 8px);
172 } 177 }
173 178
174 - #select_dataset_container #list_container {  
175 - /*height: calc(100% - 244px);*/  
176 - /*width: calc(100% - 8px);*/ 179 + #select_dataset_container #list_info {
  180 + display: flex;
177 height: calc(100% - 48px); 181 height: calc(100% - 48px);
178 - width: 100%;  
179 - border: 4px solid #B6B6B6;  
180 - border-top: 0px;  
181 - border-bottom: 0px; 182 + width: calc(100% + 8px);/*bad*/
  183 + }
  184 +
  185 + #select_dataset_container #list_container {
182 position: relative; 186 position: relative;
  187 + height: 100%;
  188 + width: 50%;
  189 + border-left: 4px solid #B6B6B6;;
  190 + }
  191 +
  192 + #select_dataset_container #info_container {
  193 + position: relative;
  194 + height: 100%;
  195 + width: 50%;
  196 + border-right: 4px solid #B6B6B6;
  197 +
  198 + /*background-color: red;*/
  199 + }
  200 +
  201 + #select_dataset_container #info {
  202 + position: relative;
  203 + height: calc(100% - 56px);
  204 + width: calc(100% - 56px);
  205 + padding: 11px;
  206 + border: 1px solid #B6B6B6;
  207 + border-radius: 4px;
  208 + background-color: #E0E0E0;
  209 + margin: 16px;
183 } 210 }
184 211
185 #select_dataset_container #treemap_container { 212 #select_dataset_container #treemap_container {
@@ -264,6 +291,12 @@ @@ -264,6 +291,12 @@
264 #suggested_div { 291 #suggested_div {
265 visibility: hidden; 292 visibility: hidden;
266 } 293 }
  294 +
  295 + /*.info_resource_name {*/
  296 + /*color: #2196F3;*/
  297 + /*font-weight: bold;*/
  298 + /*line-height: 48px;*/
  299 + /*}*/
267 </style> 300 </style>
268 301
269 <paper-material id="select_dataset_container" elevation="5"> 302 <paper-material id="select_dataset_container" elevation="5">
@@ -303,30 +336,32 @@ @@ -303,30 +336,32 @@
303 <neon-animated-pages id="neon_container" selected="{{selected}}" entry-animation="fade-in-animation" exit-animation="fade-out-animation"> 336 <neon-animated-pages id="neon_container" selected="{{selected}}" entry-animation="fade-in-animation" exit-animation="fade-out-animation">
304 337
305 <neon-animatable> 338 <neon-animatable>
306 - <div id="list_container">  
307 - <iron-list id="list" items="{{shownDatasets}}" selection-enabled><!--multi-selection-->  
308 - <template>  
309 - <div>  
310 - <div class$="{{getClassForItem(selected)}}" on-tap="_selectDataUrl" style$="background: {{_getColorForItem(item)}};">  
311 - <!--<div class$="{{getClassForItem(selected)}}" on-tap="_selectDataUrl">-->  
312 - <span style="display:none;">{{item.url}}</span>  
313 - <div class="pad">  
314 - <div class="primary">{{item.resource_name}}</div>  
315 - <!--<div class="shortText" style="display:none;">{{item.url}}</div>-->  
316 - <div class="longText">  
317 - <template is="dom-repeat" items="{{_stringToArray(item.metas)}}" as="mata">  
318 - <b>{{mata.name}}:</b>  
319 - <span inner-h-t-m-l="{{mata.value}}"></span> <br>  
320 - </template> 339 + <div id="list_info">
  340 + <div id="list_container">
  341 + <iron-list id="list" items="{{shownDatasets}}" selection-enabled>
  342 + <template>
  343 + <div>
  344 + <div class$="{{getClassForItem(selected)}}" on-tap="_selectDataUrl" style$="background: {{_getColorForItem(item)}};">
  345 + <span style="display:none;">{{item.url}}</span>
  346 + <div class="pad">
  347 + <div class="primary">{{item.resource_name}}</div>
  348 + <!--<div class="longText">-->
  349 + <!--<template is="dom-repeat" items="{{_stringToArray(item.metas)}}" as="mata">-->
  350 + <!--<b>{{mata.name}}:</b>-->
  351 + <!--<span inner-h-t-m-l="{{mata.value}}"></span> <br>-->
  352 + <!--</template>-->
  353 + <!--</div>-->
321 </div> 354 </div>
  355 + <iron-icon icon$="{{_getIconForItem(item)}}" style$="color: {{_getColorForIcon(item)}};"></iron-icon>
322 </div> 356 </div>
323 - <!--<iron-icon icon$="[[iconForItem(item)]]"></iron-icon>-->  
324 - <!--<iron-icon icon="bookmark" style$="color: {{_getColorForItem(item)}};"></iron-icon>-->  
325 - <iron-icon icon$="{{_getIconForItem(item)}}" style$="color: {{_getColorForIcon(item)}};"></iron-icon>  
326 </div> 357 </div>
327 - </div>  
328 - </template>  
329 - </iron-list> 358 + </template>
  359 + </iron-list>
  360 + </div>
  361 + <div id="info_container">
  362 + <div id="info">
  363 + </div>
  364 + </div>
330 </div> 365 </div>
331 366
332 <div id="footer_list"> 367 <div id="footer_list">
@@ -422,6 +457,7 @@ @@ -422,6 +457,7 @@
422 457
423 ready : function() { 458 ready : function() {
424 $(this.$.list_container).perfectScrollbar(); 459 $(this.$.list_container).perfectScrollbar();
  460 + $(this.$.info).perfectScrollbar();
425 461
426 // this.$.selected_url.invalid = true; 462 // this.$.selected_url.invalid = true;
427 }, 463 },
@@ -429,7 +465,7 @@ @@ -429,7 +465,7 @@
429 attached: function() { 465 attached: function() {
430 this._resize(); 466 this._resize();
431 var that = this; 467 var that = this;
432 - window.addEventListener("resize", function() { that._resize(); }); 468 + window.addEventListener("resize", function() { that._resize(); that._loadTreeMap();});
433 469
434 this.providers = this.datasets["result"]["providers"]; 470 this.providers = this.datasets["result"]["providers"];
435 this.datasets = this.datasets["result"]["datasets"]; 471 this.datasets = this.datasets["result"]["datasets"];
@@ -667,6 +703,15 @@ @@ -667,6 +703,15 @@
667 _selectDataUrl : function(){ 703 _selectDataUrl : function(){
668 this.async(function () { 704 this.async(function () {
669 if(this.$.list.selectedItem) { 705 if(this.$.list.selectedItem) {
  706 +
  707 + var metas = JSON.parse(this.$.list.selectedItem.metas);
  708 + var html = "<span style=\"color: #2196F3; font-weight: bold;\">" + this.$.list.selectedItem.resource_name + "</span><br><br>";
  709 + /*font-weight: bold;*/
  710 + /*line-height: 48px;*/
  711 + for(var i in metas)
  712 + html += "<b>" + i + ":</b> " + metas[i] + "<br>";
  713 + this.$.info.innerHTML = html;
  714 +
670 var url = this.$.list.selectedItem.url; 715 var url = this.$.list.selectedItem.url;
671 716
672 // Check if CKAN 717 // Check if CKAN
@@ -692,6 +737,7 @@ @@ -692,6 +737,7 @@
692 } 737 }
693 else { 738 else {
694 this.dataUrl = ""; 739 this.dataUrl = "";
  740 + this.$.info.innerHTML = "";
695 } 741 }
696 }, 0); 742 }, 0);
697 }, 743 },
controllets/select-dataset-controllet/select-dataset-controllet_purelist.html 0 → 100755
  View file @4b17316
  1 +<link rel="import" href="../../bower_components/polymer/polymer.html">
  2 +
  3 +<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">
  4 +<link rel="import" href="../../bower_components/paper-tabs/paper-tab.html">
  5 +
  6 +<link rel="import" href="../../bower_components/neon-animation/neon-animation.html">
  7 +<link rel="import" href="../../bower_components/neon-animation/neon-animatable.html">
  8 +<link rel="import" href="../../bower_components/neon-animation/neon-animations.html">
  9 +
  10 +<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
  11 +<!--<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">-->
  12 +<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
  13 +<link rel="import" href="../../bower_components/paper-styles/color.html">
  14 +<link rel="import" href="../../bower_components/paper-styles/typography.html">
  15 +<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
  16 +<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
  17 +<link rel="import" href="../../bower_components/iron-image/iron-image.html">
  18 +<link rel="import" href="../../bower_components/iron-list/iron-list.html">
  19 +
  20 +<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
  21 +<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">
  22 +<link rel="import" href="../../bower_components/paper-item/paper-item.html">
  23 +
  24 +<link rel="import" href="../../bower_components/paper-input/paper-input.html">
  25 +
  26 +<link rel="import" href="../../bower_components/paper-input/paper-textarea.html">
  27 +
  28 +<link rel="import" href="../../bower_components/paper-material/paper-material.html" />
  29 +
  30 +<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
  31 +<link rel="import" href="../../bower_components/iron-icons/hardware-icons.html">
  32 +<!--<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">-->
  33 +
  34 +<link rel="import" href="../../bower_components/paper-checkbox/paper-checkbox.html">
  35 +
  36 +<link rel="import" href="../../datalets/datasetexplorer-datalet/datasetexplorer-datalet.html">
  37 +
  38 +<dom-module id="select-dataset-controllet">
  39 + <template>
  40 + <style>
  41 + :host {
  42 + --paper-dropdown-menu-icon: {
  43 + color: #000000;
  44 + };
  45 + --paper-dropdown-menu-ripple: {
  46 + color: #FFFFFF;
  47 + };
  48 + /*--paper-tab-ink: {*/
  49 + /*color: #FFFFFF;*/
  50 + /*};*/
  51 + }
  52 +
  53 + iron-list {
  54 + --iron-list-items-container: {
  55 + margin:16px 16px 8px 16px;
  56 + };
  57 + }
  58 +
  59 + paper-textarea {
  60 + width: 100%;
  61 + --paper-input-container-focus-color: #2196F3;
  62 + }
  63 +
  64 + paper-input {
  65 + --paper-input-container-focus-color: #2196F3;
  66 + }
  67 + paper-dropdown-menu {
  68 + width: 100%;
  69 + --paper-input-container-focus-color: #2196F3;
  70 + }
  71 +
  72 + paper-item.iron-selected {
  73 + background-color: #2196F3;
  74 + color: #FFFFFF;
  75 + }
  76 +
  77 + paper-checkbox {
  78 + height: 24px;
  79 + /*margin-top: 8px*/
  80 + --paper-checkbox-checked-color: #2196F3;
  81 + --paper-checkbox-checked-ink-color: #FFFFFF;
  82 + --paper-checkbox-unchecked-color: #000000;
  83 + --paper-checkbox-unchecked-ink-color: #FFFFFF;
  84 + --paper-checkbox-label-color: #000000;
  85 + }
  86 +
  87 + paper-icon-button{
  88 + height: 48px;
  89 + width: 48px;
  90 + padding: 0px;
  91 + --paper-icon-button-ink-color: #FFFFFF;
  92 + }
  93 +
  94 + paper-icon-button:hover{
  95 + color: #2196F3;
  96 + }
  97 +
  98 + paper-icon-button[disabled]{
  99 + color: #B6B6B6;
  100 + }
  101 +
  102 + paper-icon-button.clear {
  103 + width: 24px;
  104 + height: 24px;
  105 + padding: 0px 4px;
  106 + color: #F44336;
  107 + --paper-icon-button-ink-color: #FFFFFF;
  108 + }
  109 +
  110 + paper-tabs {
  111 + font-weight: bold;
  112 + }
  113 +
  114 + paper-tab {
  115 + transition: all 1.0s;
  116 + }
  117 +
  118 + paper-tab.iron-selected {
  119 + background-color: #2196F3;
  120 + color: #FFFFFF;
  121 + }
  122 +
  123 + paper-tab:not(.iron-selected):hover {
  124 + color: #2196F3;
  125 + }
  126 +
  127 + .item {
  128 + /*@apply(--layout-horizontal);*/
  129 + display: flex;
  130 + padding: 11px;
  131 + border: 1px solid #B6B6B6;
  132 + border-radius: 4px;
  133 + cursor: pointer;
  134 + margin-bottom: 8px;
  135 + background-color: #E0E0E0;
  136 + }
  137 +
  138 + .pad {
  139 + @apply(--layout-flex);
  140 + /*@apply(--layout-vertical);*/
  141 + }
  142 +
  143 + .primary {
  144 + font-weight: bold;
  145 + }
  146 +
  147 + .item.expanded .primary {
  148 + color: #2196F3;
  149 + }
  150 +
  151 + .longText {
  152 + display: none;
  153 + }
  154 +
  155 + .item.expanded .longText {
  156 + display: block;
  157 + }
  158 +
  159 + #select_dataset_container {
  160 + margin-top: 8px;
  161 + }
  162 +
  163 + #select_dataset_container * {
  164 + font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  165 + font-size: 16px;
  166 + line-height: 24px;
  167 + }
  168 +
  169 + #select_dataset_container #neon_container {
  170 + height: calc(100% - 172px);
  171 + width: calc(100% - 8px);
  172 + }
  173 +
  174 + #select_dataset_container #list_container {
  175 + /*height: calc(100% - 244px);*/
  176 + /*width: calc(100% - 8px);*/
  177 + height: calc(100% - 48px);
  178 + width: 100%;
  179 + border: 4px solid #B6B6B6;
  180 + border-top: 0px;
  181 + border-bottom: 0px;
  182 + position: relative;
  183 + }
  184 +
  185 + #select_dataset_container #treemap_container {
  186 + /*height: calc(100% - 244px);*/
  187 + /*width: calc(100% - 8px);*/
  188 + height: calc(100% - 48px);
  189 + width: 100%;
  190 + border: 4px solid #B6B6B6;
  191 + border-top: 0px;
  192 + border-bottom: 0px;
  193 + position: relative;
  194 + }
  195 +
  196 + #select_dataset_container #header {
  197 + position: relative;
  198 + z-index: 1;
  199 + -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);
  200 + -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);
  201 + 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);
  202 +
  203 + background-color: #B6B6B6;
  204 + display: flex;
  205 + padding: 0px 4px;
  206 + }
  207 +
  208 + #select_dataset_container #footer_list {
  209 + position: relative;
  210 + z-index: 1;
  211 + -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);
  212 + -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);
  213 + 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);
  214 + }
  215 +
  216 + .noshadow {
  217 + -webkit-box-shadow: none !important;
  218 + -moz-box-shadow: none !important;
  219 + box-shadow: none !important;
  220 + }
  221 +
  222 + #select_dataset_container #footer_list,
  223 + #select_dataset_container #footer_treemap {
  224 + width: 100%;
  225 + background-color: #B6B6B6;
  226 + display: flex;
  227 + padding: 0px 4px;
  228 + }
  229 +
  230 + #select_dataset_container #url {
  231 + height: 76px;/*100*/
  232 + border: 4px solid #B6B6B6;
  233 + border-top: 0px;
  234 + padding: 0px 16px;
  235 + margin-top: -4px;
  236 + }
  237 +
  238 + #header .header_block {
  239 + width: 20%;
  240 + height: 40px;
  241 + padding: 4px 16px 4px 16px;
  242 + }
  243 +
  244 + /*.header_block:nth-child(2), .header_block:nth-child(3), .header_block:nth-child(3), .header_block:nth-child(4){*/
  245 + /*visibility: hidden;*/
  246 + /*}*/
  247 +
  248 + #header .header_block:nth-child(4) {
  249 + text-align: center;
  250 + }
  251 +
  252 + .footer_block {
  253 + width: calc((100% - 0px) / 3);
  254 + height: 24px;
  255 + padding: 12px 8px 12px 8px;
  256 + text-align: center;
  257 + }
  258 +
  259 + .footer_block:nth-child(2) {
  260 + height: 48px;
  261 + padding: 0px 8px;
  262 + }
  263 +
  264 + #suggested_div {
  265 + visibility: hidden;
  266 + }
  267 + </style>
  268 +
  269 + <paper-material id="select_dataset_container" elevation="5">
  270 +
  271 + <paper-tabs selected="{{selected}}" no-bar>
  272 + <paper-tab noink on-tap="_refreshList"><span id="listView"></span></paper-tab>
  273 + <!--<paper-tab noink ><span id="listView"></span></paper-tab>-->
  274 + <paper-tab on-tap="_noShadow" noink><span id="treeMapView"></span></paper-tab>
  275 + </paper-tabs>
  276 +
  277 + <div id="header">
  278 + <div class="header_block">
  279 + <paper-dropdown-menu id="ddl_provider" label="" no-label-float>
  280 + <paper-menu class="dropdown-content" selected="0">
  281 + <paper-item id="0" on-tap="_filter"></paper-item>
  282 + <template is="dom-repeat" items={{_toArray(providers)}} as="provider">
  283 + <!--<paper-item id={{provider.value.id}} style$="background: {{_getProviderColor(provider.value.id)}};">{{provider.value.title}}</paper-item>-->
  284 + <paper-item id={{provider.value.id}} on-tap="_filter">{{provider.value.title}}</paper-item>
  285 + </template>
  286 + </paper-menu>
  287 + </paper-dropdown-menu>
  288 + </div>
  289 + <div class="header_block">
  290 + </div>
  291 + <div class="header_block">
  292 + </div>
  293 + <div class="header_block">
  294 + </div>
  295 + <div class="header_block">
  296 + <paper-input id="datasets_filter" value={{filter}} no-label-float label="">
  297 + <iron-icon class="search" icon="search" prefix></iron-icon>
  298 + <paper-icon-button class="clear" suffix on-click="_clearInput" icon="clear" tabindex="0"></paper-icon-button>
  299 + </paper-input>
  300 + </div>
  301 + </div>
  302 +
  303 + <neon-animated-pages id="neon_container" selected="{{selected}}" entry-animation="fade-in-animation" exit-animation="fade-out-animation">
  304 +
  305 + <neon-animatable>
  306 + <div id="list_container">
  307 + <iron-list id="list" items="{{shownDatasets}}" selection-enabled><!--multi-selection-->
  308 + <template>
  309 + <div>
  310 + <div class$="{{getClassForItem(selected)}}" on-tap="_selectDataUrl" style$="background: {{_getColorForItem(item)}};">
  311 + <!--<div class$="{{getClassForItem(selected)}}" on-tap="_selectDataUrl">-->
  312 + <span style="display:none;">{{item.url}}</span>
  313 + <div class="pad">
  314 + <div class="primary">{{item.resource_name}}</div>
  315 + <!--<div class="shortText" style="display:none;">{{item.url}}</div>-->
  316 + <div class="longText">
  317 + <template is="dom-repeat" items="{{_stringToArray(item.metas)}}" as="mata">
  318 + <b>{{mata.name}}:</b>
  319 + <span inner-h-t-m-l="{{mata.value}}"></span> <br>
  320 + </template>
  321 + </div>
  322 + </div>
  323 + <!--<iron-icon icon$="[[iconForItem(item)]]"></iron-icon>-->
  324 + <!--<iron-icon icon="bookmark" style$="color: {{_getColorForItem(item)}};"></iron-icon>-->
  325 + <iron-icon icon$="{{_getIconForItem(item)}}" style$="color: {{_getColorForIcon(item)}};"></iron-icon>
  326 + </div>
  327 + </div>
  328 + </template>
  329 + </iron-list>
  330 + </div>
  331 +
  332 + <div id="footer_list">
  333 + <div class="footer_block"><span id="showing"></span> {{shownPrev}} <span id="to"></span> {{shownNext}} <span id="of"></span> {{length}} <span id="datasets"></span></div>
  334 + <div class="footer_block">
  335 + <paper-icon-button id="slider_chevron_left" class="chevron-left" on-click="_onPrevClick" icon="chevron-left"></paper-icon-button>
  336 + <paper-icon-button id="slider_chevron_right" class="chevron-right" on-click="_onNextClick" icon="chevron-right"></paper-icon-button>
  337 + </div>
  338 + <div id="suggested_div" class="footer_block">
  339 + <!--<template is="dom-if" if={{suggestedDatasets}}>-->
  340 + <paper-checkbox checked on-change="showSuggested"><span id="suggested_datasets"></span></paper-checkbox>
  341 + <!--</template>-->
  342 + </div>
  343 + </div>
  344 + </neon-animatable>
  345 +
  346 + <neon-animatable>
  347 + <div id="treemap_container"></div>
  348 +
  349 + <div id="footer_treemap">
  350 + <div class="footer_block"><span id="showing2"></span> {{tLength}} <span id="datasets2"></span></div>
  351 + <div class="footer_block"></div>
  352 + <div class="footer_block"></div>
  353 + </div>
  354 + </neon-animatable>
  355 +
  356 + </neon-animated-pages>
  357 +
  358 + <div id="url">
  359 + <paper-textarea id="selected_url" label="" value={{dataUrl}} error-message={{errorMessage}}></paper-textarea>
  360 + </div>
  361 +
  362 + </paper-material>
  363 +
  364 + </template>
  365 +
  366 + <script>
  367 + HTMLImports.whenReady(function() {
  368 + Polymer({
  369 + is: 'select-dataset-controllet',
  370 + properties: {
  371 + datasets: {
  372 + type: Object,
  373 + value: undefined
  374 + },
  375 + filteredDatasets : {
  376 + type : Array,
  377 + value : undefined
  378 + },
  379 + shownDatasets : {
  380 + type : Array,
  381 + value : undefined
  382 + },
  383 + suggestedDatasets : {
  384 + type : Array,
  385 + value : undefined
  386 + },
  387 +
  388 + providers : {
  389 + type : Array,
  390 + value : undefined
  391 + },
  392 + dataUrl : {
  393 + type : String,
  394 + value : undefined,
  395 + observer : '_fireDataUrl'
  396 + },
  397 + filter : {
  398 + type : String,
  399 + value : "",
  400 + observer : '_filter'
  401 + },
  402 + selected : {
  403 + type : Number,
  404 + value : 0
  405 + },
  406 + prev : {type : Number, value : undefined},
  407 + next : {type : Number, value : undefined},
  408 + shownPrev : {type : Number, value : undefined},
  409 + shownNext : {type : Number, value : undefined},
  410 + length : {type : Number, value : undefined},
  411 + tLength : {type : Number, computed : 'treemapLength(length)'},
  412 + step : {type : Number, value : 20},
  413 + colors : {
  414 + type : Array,
  415 + value : ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5","#d9d9d9","#bc80bd","#ccebc5","#ffed6f"]
  416 + }
  417 + },
  418 +
  419 + listeners: {
  420 + 'datasetexplorer-datalet_data-url': '_selectDataUrl_treeMap'
  421 + },
  422 +
  423 + ready : function() {
  424 + $(this.$.list_container).perfectScrollbar();
  425 +
  426 +// this.$.selected_url.invalid = true;
  427 + },
  428 +
  429 + attached: function() {
  430 + this._resize();
  431 + var that = this;
  432 + window.addEventListener("resize", function() { that._resize(); that._loadTreeMap();});
  433 +
  434 + this.providers = this.datasets["result"]["providers"];
  435 + this.datasets = this.datasets["result"]["datasets"];
  436 +
  437 + if(this.suggestedDatasets) {
  438 + this.tempDatasets = this.datasets;
  439 + this.datasets = this.suggestedDatasets.concat(this.datasets);
  440 + this.$.suggested_div.style.visibility = "visible";
  441 + }
  442 +
  443 + this.filteredDatasets = this.datasets;
  444 +
  445 + this.prev = 1;
  446 + this.next = this.step;
  447 + this.length = this.filteredDatasets.length;
  448 +
  449 + this.shownPrev = Math.min(this.prev, this.length);
  450 + this.shownNext = Math.min(this.next, this.length);
  451 + this.shownDatasets = this.filteredDatasets.slice(this.prev-1, this.next);
  452 +
  453 + this.$.list.scrollTarget = this.ownerDocument.documentElement;
  454 +
  455 + this._translate();
  456 +
  457 + this._loadTreeMap();
  458 + },
  459 +
  460 + _translate : function(){
  461 + this.$.listView.innerHTML = ln["listView_" + ln["localization"]];
  462 + this.$.treeMapView.innerHTML = ln["treeMapView_" + ln["localization"]];
  463 +
  464 + this.$.ddl_provider.setAttribute("label", ln["provider_" + ln["localization"]]);
  465 + this.$.datasets_filter.setAttribute("label", ln["search_" + ln["localization"]]);
  466 +
  467 + this.$.suggested_datasets.innerHTML = ln["suggestedDatasets_" + ln["localization"]];
  468 +
  469 + this.$.showing.innerHTML = ln["showing_" + ln["localization"]];
  470 + this.$.showing2.innerHTML = ln["showing_" + ln["localization"]];
  471 + this.$.to.innerHTML = ln["to_" + ln["localization"]];
  472 + this.$.of.innerHTML = ln["of_" + ln["localization"]];
  473 + this.$.datasets.innerHTML = ln["datasets_" + ln["localization"]];
  474 + this.$.datasets2.innerHTML = ln["datasets_" + ln["localization"]];
  475 +
  476 + this.$.selected_url.setAttribute("label", ln["selectedUrl_" + ln["localization"]]);
  477 + this.errorMessage = ln["wrongUrl_" + ln["localization"]];
  478 + },
  479 +
  480 + showSuggested : function(e) {
  481 + if(e.target.checked)
  482 + this.datasets = this.suggestedDatasets.concat(this.tempDatasets);
  483 + else
  484 + this.datasets = this.tempDatasets;
  485 + this._filter();
  486 + },
  487 +
  488 + _loadTreeMap : function(){
  489 + var h = $("#neon_container").height() - 48;
  490 + var w = $("#neon_container").width();
  491 +
  492 + var data = JSON.stringify({result : {providers: this.providers, datasets: this.filteredDatasets}}).replace(/'/g, "");
  493 +
  494 + if(this.filteredDatasets.length > 0)
  495 + 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>";
  496 + else
  497 + this.$.treemap_container.innerHTML = "";
  498 + },
  499 +
  500 + _filter : function() {
  501 + if(this.filteredDatasets) {
  502 + this.async(function () {
  503 + var ddl_provider = $(this.$.ddl_provider).find("paper-menu")[0].selectedItem;
  504 + var name = ddl_provider.innerHTML.trim();
  505 + var id = this._getIdByProviderName(name);
  506 + this.prev = 1;
  507 + this.next = this.step;
  508 + if (id) {
  509 + //filtered by provider name
  510 + this.filteredDatasets = this.datasets.filter(function (el) {
  511 + return el.provider_name == "p:" + id;
  512 + });
  513 + }
  514 + else {
  515 + this.filteredDatasets = this.datasets;
  516 + }
  517 +
  518 + //filtered by filter
  519 + var filter = this.filter;
  520 + this.filteredDatasets = this.filteredDatasets.filter(function (el) {
  521 + return el.resource_name.toLowerCase().indexOf(filter.toLowerCase()) > -1;
  522 + });
  523 +
  524 + this.length = this.filteredDatasets.length;
  525 +
  526 + this.shownPrev = Math.min(this.prev, this.length);
  527 + this.shownNext = Math.min(this.next, this.length);
  528 + this.shownDatasets = this.filteredDatasets.slice(this.prev - 1, this.next);
  529 +
  530 + $("#list_container").animate({scrollTop: 0}, 0);
  531 +
  532 + this._loadTreeMap();
  533 + }, 0);
  534 + }
  535 + },
  536 +
  537 + _refreshList : function() {
  538 + this.shownDatasets = this.filteredDatasets.slice(this.prev - 1, this.next);
  539 + this.$.header.className = this.$.header.className.replace(" noshadow", "");
  540 + },
  541 +
  542 + _noShadow : function() {
  543 + console.log(this.$.header);
  544 + this.$.header.className += " noshadow";
  545 + },
  546 +
  547 + _clearInput : function() {
  548 + this.$.datasets_filter.value = "";
  549 + },
  550 +
  551 + _getIdByProviderName : function(name) {
  552 + for(var id in this.providers) {
  553 + if (this.providers[id].title == name)
  554 + return this.providers[id].id;
  555 + }
  556 + },
  557 +
  558 +// iconForItem: function(item) {
  559 +// return item ? (item.integer < 50 ? 'star-border' : 'info-outline') : '';
  560 +// },
  561 +
  562 + treemapLength : function(length) {
  563 + var ddl_provider = $(this.$.ddl_provider).find("paper-menu")[0].selectedItem;
  564 + var name = ddl_provider.innerHTML.trim();
  565 + var id = this._getIdByProviderName(name);
  566 +
  567 + if(this.suggestedDatasets && !id)
  568 + return Math.max(length - this.suggestedDatasets.length, 0);
  569 + return length;
  570 + },
  571 +
  572 + _getColorForIcon : function(item) {
  573 + var ddl_provider = $(this.$.ddl_provider).find("paper-menu")[0].selectedItem;
  574 + var name = ddl_provider.innerHTML.trim();
  575 + var id = this._getIdByProviderName(name);
  576 + if (id) {
  577 + return this.colors[0];
  578 + }
  579 + if(!item.provider_name) {
  580 + return "#00BCD4";
  581 + }
  582 + var id = item.provider_name.substring(2, item.provider_name.length);
  583 + var i = this.getProviderById(id) % this.colors.length;
  584 + return this.colors[i];
  585 + },
  586 +
  587 + _getColorForItem : function(item) {
  588 +// var ddl_provider = $(this.$.ddl_provider).find("paper-menu")[0].selectedItem;
  589 +// var name = ddl_provider.innerHTML.trim();
  590 +// var id = this._getIdByProviderName(name);
  591 +// if (id) {
  592 +// return this.colors[0];
  593 +// }
  594 + if(!item.provider_name) {
  595 + return "#FFEB3B";
  596 + }
  597 +// var id = item.provider_name.substring(2, item.provider_name.length);
  598 +// var i = this.getProviderById(id) % this.colors.length;
  599 +// return this.colors[i];
  600 + },
  601 +
  602 + _getIconForItem : function(item) {
  603 + return item.provider_name ? 'bookmark' : 'star';
  604 + },
  605 +
  606 +// _getProviderColor: function(id) {
  607 +// var i = this.getProviderById(id) % this.colors.length;
  608 +// return this.colors[i];
  609 +// },
  610 +
  611 + getClassForItem: function(selected) {
  612 + return selected ? 'item expanded' : 'item';
  613 + },
  614 +
  615 + getProviderById: function(providerId) {
  616 + var i = 0;
  617 + for(var id in this.providers){
  618 + if(this.providers[id].id == providerId)
  619 + return i;
  620 + i++;
  621 + }
  622 + },
  623 +
  624 + _onPrevClick : function(){
  625 + if(this.prev != 1) {
  626 + this.prev -= this.step;
  627 + this.next -= this.step;
  628 +
  629 + this.shownPrev = Math.min(this.prev, this.length);
  630 + this.shownNext = Math.min(this.next, this.length);
  631 + this.shownDatasets = this.filteredDatasets.slice(this.prev - 1, this.next);
  632 + }
  633 + $("#list_container").animate({ scrollTop: 0}, 0);
  634 + },
  635 +
  636 + _onNextClick : function(){
  637 + if(this.next < this.length) {
  638 + this.prev += this.step;
  639 + this.next += this.step;
  640 +
  641 + this.shownPrev = Math.min(this.prev, this.length);
  642 + this.shownNext = Math.min(this.next, this.length);
  643 + this.shownDatasets = this.filteredDatasets.slice(this.prev - 1, this.next);
  644 + }
  645 + $("#list_container").animate({ scrollTop: 0}, 0);
  646 + },
  647 +
  648 + _stringToArray: function(obj) {
  649 + obj = JSON.parse(obj);
  650 + return Object.keys(obj).map(function(key) {
  651 + return {
  652 + name: key,
  653 + value: obj[key]
  654 + };
  655 + });
  656 + },
  657 +
  658 + _toArray: function(obj) {
  659 + return Object.keys(obj).map(function(key) {
  660 + return {
  661 + name: key,
  662 + value: obj[key]
  663 + };
  664 + });
  665 + },
  666 +
  667 + _selectDataUrl : function(){
  668 + this.async(function () {
  669 + if(this.$.list.selectedItem) {
  670 + var url = this.$.list.selectedItem.url;
  671 +
  672 + // Check if CKAN
  673 + var strDatasetPos = url.indexOf('/dataset/');
  674 + var strResourcePos = (strDatasetPos >= 0) ? url.indexOf('/resource/') : -1;
  675 + if (strDatasetPos >= 0 && strResourcePos > strDatasetPos) {
  676 + var urlSegment1 = url.substring(0, strDatasetPos);
  677 + var urlResourceEnd = url.indexOf('/', strResourcePos + 10);
  678 + var resourceId = url.substring(strResourcePos + 10, urlResourceEnd);
  679 + url = urlSegment1 + "/api/action/datastore_search?resource_id=" + resourceId;
  680 + }
  681 +
  682 + // Check if OPENDATASOFT
  683 + var strExploreDatasetPos = url.indexOf('/explore/dataset/');
  684 + if (strExploreDatasetPos >= 0) {
  685 + var urlSegment1 = url.substring(0, strExploreDatasetPos);
  686 + var datasetEnd = url.indexOf(strExploreDatasetPos + 17, '/');
  687 + var datasetId = url.substring(strExploreDatasetPos + 17, datasetEnd >= 0 ? datasetEnd : url.length);
  688 + url = urlSegment1 + '/api/records/1.0/search?dataset=' + datasetId;
  689 + }
  690 +
  691 + this.dataUrl = this._addlimitUrl(url);
  692 + }
  693 + else {
  694 + this.dataUrl = "";
  695 + }
  696 + }, 0);
  697 + },
  698 +
  699 + _selectDataUrl_treeMap : function(e) {
  700 + this.dataUrl = this._addlimitUrl(e.detail.url);
  701 + },
  702 +
  703 + _fireDataUrl : function(){
  704 + this.fire('dataset-selection-controllet_data-url', {url: this.dataUrl});
  705 + },
  706 +
  707 + _addlimitUrl : function(url){
  708 + //CKAN --> action no limit
  709 + if((url.indexOf("api/action") > -1) && !(url.indexOf("limit") > -1))
  710 + {
  711 + url += "&limit=99999";
  712 + }
  713 + //OpenDataSoft --> action no limit
  714 + if((url.indexOf("api/records") > -1) && !(url.indexOf("rows") > -1)){
  715 + url += "&rows=10000";
  716 + }
  717 + return url;
  718 + },
  719 +
  720 + _resize : function(){
  721 + var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 16;
  722 + h = h - 64 - 8; //height with page scroller
  723 + $("#select_dataset_container").height(h);
  724 + }
  725 + });
  726 + });
  727 + </script>
  728 +</dom-module>
0 \ No newline at end of file 729 \ No newline at end of file