WebCompDev / COMPONENTS

Commit adb9f560f3a5e30dfebf9966cb4f16b97b8b4084

Authored by Renato De Donato
2 parents ed1bed76 642c024b

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

Inline Side-by-side
Showing 5 changed files with 216 additions and 38 deletions
controllets/animated-button-container-controllet/animated-button-container-controllet.html
  View file @adb9f56
1   -
2 1 <link rel="import" href="../../bower_components/polymer/polymer.html">
3 2 <link rel="import" href="../../bower_components/paper-styles/paper-styles.html">
4 3 <link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
... ... @@ -145,19 +144,14 @@
145 144 </style>
146 145  
147 146 <template>
148   - <!--<neon-animated-pages id="pages" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">
149   - <neon-animatable><div id="hidden"></div></neon-animatable>
150   - <neon-animatable>-->
151   - <paper-material elevation="5" id="window" class="window">
152   - <div class="transparent"></div>
153   - <paper-toolbar id="toolbar">
154   - <search-panel-controllet id="search_from_animated_button_container" left-direction="true"></search-panel-controllet>
155   - <paper-fab id="close" mini icon="close" on-click="_onCloseClick"></paper-fab>
156   - </paper-toolbar>
157   - <div id="container_content"><content></content></div>
158   - </paper-material>
159   - <!--</neon-animatable>
160   - </neon-animated-pages>-->
  147 + <paper-material elevation="5" id="window" class="window">
  148 + <div class="transparent"></div>
  149 + <paper-toolbar id="toolbar">
  150 + <search-panel-controllet id="search_from_animated_button_container" left-direction="true"></search-panel-controllet>
  151 + <paper-fab id="close" mini icon="close" on-click="_onCloseClick"></paper-fab>
  152 + </paper-toolbar>
  153 + <div id="container_content"><content></content></div>
  154 + </paper-material>
161 155  
162 156 <div id="button_container" class="horizontal layout">
163 157 <span class="button-container" id="open" on-click="_onOpenClick">
... ...
controllets/paper-card-controllet/_paper-card-controllet.html 0 → 100644
  View file @adb9f56
  1 +<link rel="import" href="../../bower_components/paper-material/paper-material.html"/>
  2 +<link rel="import" href="../../bower_components/paper-fab/paper-fab.html"/>
  3 +<link rel="import" href="../../bower_components/iron-icons/iron-icons.html"/>
  4 +
  5 +
  6 +<dom-module id="paper-card-controllet">
  7 +
  8 + <template>
  9 + <style>
  10 + :host {
  11 + color: #333;
  12 + font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  13 + display: inline-block;
  14 + margin: 0 8px 8px ;
  15 + font-size: 14px;
  16 + text-align: justify;
  17 + line-height: 10px;
  18 + --paper-fab-background: var(--accent-color);
  19 + }
  20 +
  21 + paper-material {
  22 + border-radius: 2px;
  23 + background-color: white;
  24 + }
  25 +
  26 + .preview {
  27 + position: relative;
  28 + margin-bottom: 0px;
  29 + /*max-width: 200px;
  30 + max-height: 200px;
  31 + min-width: 200px;
  32 + min-height: 200px;*/
  33 + }
  34 +
  35 + .legend {
  36 + position: absolute;
  37 + background: rgba(0,0,0,0.5);
  38 + bottom: 0;
  39 + color: white;
  40 + height: 40px;
  41 + padding: 0 16px;
  42 + left: 0; right: 0;
  43 + }
  44 +
  45 + paper-fab {
  46 + position: absolute;
  47 + right: 10px;
  48 + bottom: -18px;
  49 + --paper-fab-background:#2196F3;
  50 + }
  51 +
  52 + .content ::content {
  53 + padding: 0 16px 8px;
  54 + font-weight: 300;
  55 + color: var(--secondary-text-color);
  56 + line-height: 24px;
  57 + }
  58 + ::content.buttons {
  59 + margin-top: 8px;
  60 + }
  61 + ::content paper-button, ::content paper-icon-button {
  62 + font-weight: 500;
  63 + color: var(--accent-color);
  64 + }
  65 +
  66 + paper-material{
  67 + max-height: 260px;
  68 + max-width: 200px;
  69 + min-height: 260px;
  70 + min-width: 200px;
  71 + }
  72 +
  73 + #card_content{
  74 + overflow: hidden;
  75 + max-width: 200px;
  76 + max-height: 240px;
  77 + min-width: 200px;
  78 + min-height: 240px;
  79 + }
  80 +
  81 + #datalet_preview{
  82 +
  83 + -ms-transform: scale(0.95);
  84 + -moz-transform: scale(0.95);
  85 + -o-transform: scale(0.95);
  86 + -webkit-transform: scale(0.95);
  87 + transform: scale(0.95);
  88 +
  89 + }
  90 +
  91 + #text_preview{
  92 + font-size: smaller;
  93 + }
  94 +
  95 + </style>
  96 +
  97 + <paper-material elevation="{{elevation}}">
  98 + <div class="vertical layout">
  99 + <div class="preview">
  100 + <div id="card_content">
  101 + <template is="dom-if" if="{{checkType(type,'image')}}">
  102 + <img src="{{imageSrc}}">
  103 + </template>
  104 + <template is="dom-if" if="{{checkType(type,'datalet')}}">
  105 + <div id="datalet_preview"><content></content></div>
  106 + </template>
  107 + <template is="dom-if" if="{{checkType(type,'text')}}">
  108 + <div id="text_preview"><content></content></div>
  109 + </template>
  110 + </div>
  111 + <div class="horizontal layout center legend">
  112 + <span>{{legend}}</span>
  113 + <paper-fab mini icon="{{icon}}"></paper-fab>
  114 + </div>
  115 + </div>
  116 + <div class="content">
  117 + <p>{{text}}</p >
  118 + </div>
  119 + </div>
  120 + </paper-material>
  121 + </template>
  122 +
  123 + <script>
  124 + Polymer({
  125 + is:'paper-card-controllet',
  126 +
  127 + properties: {
  128 + width: {
  129 + type: Number,
  130 + value: 350,
  131 + /*observer: "_changeWidth",*/
  132 + },
  133 + height: {
  134 + type: Number,
  135 + value: 200
  136 + },
  137 +
  138 + legend:{
  139 + type: String,
  140 + value: "Legend"
  141 + },
  142 +
  143 + type:{
  144 + type: String,
  145 + value: "text"
  146 + },
  147 +
  148 + icon:{
  149 + type: String,
  150 + value: "home"
  151 + },
  152 +
  153 + imageSrc: {
  154 + type: String,
  155 + value:""
  156 + }
  157 + },
  158 + _changeWidth: function(data){
  159 + this.style.width = data + "px";
  160 + this.querySelector(".content").width = data + "px";
  161 + },
  162 +
  163 + checkType: function(type, check){
  164 + return (type == check);
  165 + },
  166 +
  167 + ready: function(){
  168 + }
  169 + })
  170 + </script>
  171 +
  172 +
  173 +</dom-module>
0 174 \ No newline at end of file
... ...
controllets/paper-card-controllet/paper-card-controllet.html
  View file @adb9f56
... ... @@ -210,11 +210,11 @@
210 210 properties: {
211 211 width: {
212 212 type: Number,
213   - observer: "_changeWidth",
  213 + observer: "_changeWidth"
214 214 },
215 215 height: {
216 216 type: Number,
217   - observer: "_changeHeight",
  217 + observer: "_changeHeight"
218 218 },
219 219 cardType:{
220 220 type: String,
... ...
controllets/search-panel-controllet/search-panel-controllet.html
  View file @adb9f56
... ... @@ -68,10 +68,10 @@ Example:
68 68 position: absolute;
69 69 top: -12px;
70 70 width: 20vw;
71   -
72 71 }
73 72  
74   - neon-animated-pages{
  73 + neon-animated-pages
  74 + {
75 75 /*width: 20vw;*/
76 76 }
77 77  
... ... @@ -143,7 +143,7 @@ Example:
143 143  
144 144 ready: function(){
145 145  
146   - if(this.leftDirection != undefined){
  146 + if(this.leftDirection != undefined){
147 147 this.$.search_text.style.left = '5px';
148 148 }else if(this.rightDirection != undefined){
149 149 this.$.search_text.style.right = '5px';
... ... @@ -169,8 +169,9 @@ Example:
169 169 * @param {Event} e
170 170 */
171 171 _valueChanged : function(oldvalue, newValue){
172   - clearTimeout (this.timer);
173   - this.timer = setTimeout(this.fire('search-panel-controllet_content-changed', {searchKey: this.searchKey, id : this.id}), 500);
  172 + var t = this;
  173 + clearTimeout(this.timer);
  174 + this.timer = setTimeout(function(){t.fire('search-panel-controllet_content-changed', {searchKey: t.searchKey, id : t.id})}, 500);
174 175 },
175 176 /**
176 177 * It returns the value in text area
... ...
datalets/base-datalet/base-datalet.html
  View file @adb9f56
... ... @@ -97,7 +97,7 @@ Example :
97 97 <!--<b>Source:</b><span id="domain"></span>-->
98 98 <!--<b></b><span id="domainPage"></span>-->
99 99  
100   - <b>Source:</b> <a id="base_datalet_source" target="_blank"></a> ( <a id="base_datalet_link" target="_blank">dataset</a> )
  100 + <b>Source:</b> <a id="base_datalet_source" target="_blank"></a> (<a id="base_datalet_link" target="_blank">dataset</a>)
101 101  
102 102 <div id="base_datalet_rtp">
103 103 <div id="rtp">Powered by ROUTE-TO-PA</div>
... ... @@ -140,33 +140,46 @@ Example :
140 140 * @method ready
141 141 */
142 142 ready: function(){
  143 + //cKan organized with or not catalog
  144 + queryInitial = this.dataUrl.substring(0, this.dataUrl.indexOf("api")); //SOURCE
143 145  
  146 + urlSource = this.dataUrl.split("/")[0] + "//" + this.dataUrl.split("/")[2];
  147 + this.$.base_datalet_source.innerHTML = urlSource;
  148 + this.$.base_datalet_source.setAttribute("href", urlSource);
144 149  
145 150  
146   - var urlDatalet;
147   - if(this.dataUrl != undefined){
  151 + //OpenDataSoft check
  152 + if(this.dataUrl.indexOf("/records/") > -1 )
  153 + {
  154 + //Resourceid of a datalet
  155 + var query = this.dataUrl.substring(this.dataUrl.indexOf("?"), this.dataUrl.length);
  156 + var params = this.decomponeQueryString(query);
  157 + resultIssyIdDatalet = params["dataset"];
  158 + resultIssyAPI = "explore/dataset/";
  159 + urlPageDatasetIssy = queryInitial + resultIssyAPI + resultIssyIdDatalet + "/";
148 160  
  161 + this.$.base_datalet_link.setAttribute("href", urlPageDatasetIssy);
  162 + }
  163 + else
  164 + {
  165 + //CKAN portal
  166 + var urlDatalet;
  167 + if(this.dataUrl != undefined) {
149 168 var apiIdResource = "resource_show?id=";
150 169  
151 170 //Resourceid of a datalet
152 171 var query = this.dataUrl.substring(this.dataUrl.indexOf("?"), this.dataUrl.length);
153   - var params = this.decomponeQueryString(query);
  172 + var params = this.decomponeQueryString(query);
  173 + //CKAN
154 174 resultIdDatalet = params["resource_id"];
155 175  
156 176 //cKan organized with or not catalog
157   - queryInitial = this.dataUrl.substring(0, this.dataUrl.indexOf("api"));
158   - queryFinal = this.dataUrl.substring(this.dataUrl.indexOf("api"), this.dataUrl.indexOf("datastore_search"));
159   -
160   - urlDatalet = queryInitial + queryFinal + apiIdResource + resultIdDatalet;
161   - urlSource = this.dataUrl.split("/")[0] + "//" + this.dataUrl.split("/")[2];
162   -
163   -// this.$.domainPage.innerHTML = '<a href=' + urlSource + ' target=' + "_blank>" + urlSource + '</a>'+ "." ;
164   -
165   - this.$.base_datalet_source.innerHTML = urlSource;
166   - this.$.base_datalet_source.setAttribute("href", urlSource);
  177 + queryFinal = this.dataUrl.substring(this.dataUrl.indexOf("api"), this.dataUrl.indexOf("datastore_search"));
167 178  
  179 + urlDatalet = queryInitial + queryFinal + apiIdResource + resultIdDatalet;
168 180 this.requestDataletData(urlDatalet);
169 181 }
  182 + }
170 183 },
171 184 /**
172 185 * Set the domain url to show in the footer
... ... @@ -210,7 +223,6 @@ Example :
210 223 */
211 224 handleDataletResponse: function(e) {
212 225 this.objectDatalet.json_resultDatalet.value = e;
213   -
214 226 //packageId of a give datalet
215 227 packageIdDatalet = this.objectDatalet.json_resultDatalet.value.result.package_id;
216 228 resourceId = this.objectDatalet.json_resultDatalet.value.result.id;
... ... @@ -228,8 +240,6 @@ Example :
228 240 urlSource = this.dataUrl.split("/")[0] + "//" + this.dataUrl.split("/")[2];
229 241  
230 242 this.$.base_datalet_link.setAttribute("href", urlDatalet);
231   -// this.$.domainPage.innerHTML += " (" + ' <a href=' + urlDatalet + ' target=' + "_blank>" + "Dataset's page" + '</a>' + " )";
232   -
233 243 }
234 244 }
235 245 });
... ...