WebCompDev / COMPONENTS

Commit 905ac68dcb4f9aa026ff3c2566b630f4bde9baf9

Authored by lucvic
2 parents fa810463 d2774aae

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

Inline Side-by-side
Showing 11 changed files with 696 additions and 38 deletions
controllets/animated-button-container-controllet/animated-button-container-controllet.html
  View file @905ac68
... ... @@ -242,8 +242,9 @@
242 242 this.$.open.style.height = this.iconHeight + "px";
243 243 this.$.open.style.width = this.iconWidth + "px";
244 244 this.$.open_window_button.style.backgroundColor = this.backgroundButtonColor;
245   - this.$.open_window_button.style.width = this.iconWidth + "px";
246   - this.$.open_window_button.style.height = this.iconHeight + "px";
  245 + this.$.open_window_button.style.width = 24 /*this.iconWidth*/ + "px";
  246 + this.$.open_window_button.style.height = 24 /*this.iconHeight*/ + "px";
  247 + this.$.open_window_button.style.padding = "6px";
247 248 this.$.button_container.style.height = this.iconHeight + "px";
248 249 },
249 250  
... ...
controllets/animated-grid-controllet/animated-grid-controllet.html
  View file @905ac68
... ... @@ -146,6 +146,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
146 146  
147 147 var target = event.target;
148 148  
  149 + if(target.classList[0] != "grid-item")
  150 + return;
  151 +
149 152 // configure the page animation
150 153 this.sharedElements = {
151 154 'hero': target,
... ...
controllets/data-sevc-controllet/data-sevc-controllet.html
  View file @905ac68
... ... @@ -339,7 +339,7 @@ Example:
339 339 <paper-material elevation="2" class="area_container">
340 340 <paper-tabs selected="{{DatasourceTabSelected}}">
341 341 <paper-tab>Select data source</paper-tab>
342   - <paper-tab>Tree Map Search</paper-tab>
  342 + <paper-tab>Tree Map view</paper-tab>
343 343 <paper-tab>Most popular</paper-tab>
344 344 </paper-tabs>
345 345 <iron-pages selected="{{DatasourceTabSelected}}">
... ... @@ -1096,14 +1096,14 @@ Example:
1096 1096 //tree map
1097 1097 _selectDataUrl_treeMap : function(e){
1098 1098 var url = e.detail.url;
1099   - url = url.split('/');
1100   - var index = url.indexOf('resource')
1101   - if (index != -1) { // ckan
1102   - var resourceId = url[index + 1];
1103   - url = "http://ckan.routetopa.eu/api/action/datastore_search?resource_id=" + resourceId;
1104   -
1105   - } else
1106   - url = "sorry, data provider not supported yet";
  1099 +// url = url.split('/');
  1100 +// var index = url.indexOf('resource')
  1101 +// if (index != -1) { // ckan
  1102 +// var resourceId = url[index + 1];
  1103 +// url = "http://ckan.routetopa.eu/api/action/datastore_search?resource_id=" + resourceId;
  1104 +//
  1105 +// } else
  1106 +// url = "sorry, data provider not supported yet";
1107 1107  
1108 1108 this.dataUrl = url;
1109 1109 this.DatasourceTabSelected=0;
... ...
controllets/data-sevc-controllet/demo/index.html
  View file @905ac68
... ... @@ -9,7 +9,7 @@
9 9 <script src="../../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
10 10 <link rel="stylesheet" href="../../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
11 11  
12   - <link rel="import" href="../data-sevc-controllet_ddr.html" />
  12 + <link rel="import" href="../data-sevc-controllet.html" />
13 13 </head>
14 14  
15 15 <body>
... ...
controllets/dataset-selection-controllet/dataset-selection-controllet.html
  View file @905ac68
... ... @@ -26,6 +26,8 @@
26 26  
27 27 <!--<script src="../../datalets/shared_js/d3.js"></script>-->
28 28  
  29 +<link rel="import" href="paper-input-search.html">
  30 +
29 31 <dom-module id="dataset-selection-controllet">
30 32  
31 33 <template>
... ... @@ -65,6 +67,10 @@
65 67 color: #FFFFFF;
66 68 }
67 69  
  70 + paper-menu{
  71 + /*visibility: visible ! important;*/
  72 + }
  73 +
68 74 /*paper-item[focused] {*/
69 75 /*background: #FFFFFF;*/
70 76 /*}*/
... ... @@ -123,13 +129,13 @@
123 129 <neon-animatable>
124 130  
125 131 <div id="div_selection">
126   - <paper-dropdown-menu label="Available datasets">
  132 + <paper-input-search label="Available datasets">
127 133 <paper-menu class="dropdown-content">
128 134 <template is="dom-repeat" items={{datasets}} as="dataset">
129 135 <paper-item id={{index}} on-tap="_selectDataUrl">{{dataset.name}}</paper-item>
130 136 </template>
131 137 </paper-menu>
132   - </paper-dropdown-menu>
  138 + </paper-input-search>
133 139  
134 140 <paper-icon-button id="info_button" disabled on-click="_showInfo" icon="info-outline" title="dataset info"></paper-icon-button>
135 141  
... ...
controllets/dataset-selection-controllet/paper-input-search.html 0 → 100755
  View file @905ac68
  1 +<!--
  2 +@license
  3 +Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
  4 +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  5 +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  6 +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  7 +Code distributed by Google as part of the polymer project is also
  8 +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  9 +-->
  10 +
  11 +<link rel="import" href="../../bower_components/polymer/polymer.html">
  12 +<link rel="import" href="../../bower_components/paper-styles/default-theme.html">
  13 +<link rel="import" href="../../bower_components/paper-input/paper-input.html">
  14 +<link rel="import" href="../../bower_components/paper-menu-button/paper-menu-button.html">
  15 +<link rel="import" href="../../bower_components/paper-ripple/paper-ripple.html">
  16 +<link rel="import" href="../../bower_components/iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
  17 +<link rel="import" href="../../bower_components/iron-behaviors/iron-control-state.html">
  18 +<link rel="import" href="../../bower_components/iron-behaviors/iron-button-state.html">
  19 +<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
  20 +<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
  21 +<link rel="import" href="../../bower_components/iron-selector/iron-selectable.html">
  22 +<link rel="import" href="../../bower_components/iron-form-element-behavior/iron-form-element-behavior.html">
  23 +<link rel="import" href="../../bower_components/iron-validatable-behavior/iron-validatable-behavior.html">
  24 +
  25 +<!--
  26 +Material design: [Dropdown menus](https://www.google.com/design/spec/components/buttons.html#buttons-dropdown-buttons)
  27 +
  28 +`paper-dropdown-menu` is similar to a native browser select element.
  29 +`paper-dropdown-menu` works with selectable content. The currently selected
  30 +item is displayed in the control. If no item is selected, the `label` is
  31 +displayed instead.
  32 +
  33 +The child element with the class `dropdown-content` will be used as the dropdown
  34 +menu. It could be a `paper-menu` or element that triggers `iron-select` when
  35 +selecting its children.
  36 +
  37 +Example:
  38 +
  39 + <paper-dropdown-menu label="Your favourite pastry">
  40 + <paper-menu class="dropdown-content">
  41 + <paper-item>Croissant</paper-item>
  42 + <paper-item>Donut</paper-item>
  43 + <paper-item>Financier</paper-item>
  44 + <paper-item>Madeleine</paper-item>
  45 + </paper-menu>
  46 + </paper-dropdown-menu>
  47 +
  48 +This example renders a dropdown menu with 4 options.
  49 +
  50 +Similarly to using `iron-select`, `iron-deselect` events will cause the
  51 +current selection of the `paper-dropdown-menu` to be cleared.
  52 +
  53 +### Styling
  54 +
  55 +The following custom properties and mixins are also available for styling:
  56 +
  57 +Custom property | Description | Default
  58 +----------------|-------------|----------
  59 +`--paper-dropdown-menu` | A mixin that is applied to the element host | `{}`
  60 +`--paper-dropdown-menu-disabled` | A mixin that is applied to the element host when disabled | `{}`
  61 +`--paper-dropdown-menu-ripple` | A mixin that is applied to the internal ripple | `{}`
  62 +`--paper-dropdown-menu-button` | A mixin that is applied to the internal menu button | `{}`
  63 +`--paper-dropdown-menu-input` | A mixin that is applied to the internal paper input | `{}`
  64 +`--paper-dropdown-menu-icon` | A mixin that is applied to the internal icon | `{}`
  65 +
  66 +You can also use any of the `paper-input-container` and `paper-menu-button`
  67 +style mixins and custom properties to style the internal input and menu button
  68 +respectively.
  69 +
  70 +@group Paper Elements
  71 +@element paper-dropdown-menu
  72 +@hero hero.svg
  73 +@demo demo/index.html
  74 +-->
  75 +
  76 +<dom-module id="paper-input-search">
  77 + <style>
  78 + :host {
  79 + display: inline-block;
  80 + position: relative;
  81 + text-align: left;
  82 + /*cursor: pointer;*/
  83 +
  84 + /* NOTE(cdata): Both values are needed, since some phones require the
  85 + * value to be `transparent`.
  86 + */
  87 + -webkit-tap-highlight-color: rgba(0,0,0,0);
  88 + -webkit-tap-highlight-color: transparent;
  89 +
  90 + --paper-input-container-input: {
  91 + overflow: hidden;
  92 + white-space: nowrap;
  93 + text-overflow: ellipsis;
  94 + max-width: 100%;
  95 + box-sizing: border-box;
  96 + /*cursor: pointer;*/
  97 + };
  98 +
  99 + @apply(--paper-dropdown-menu);
  100 + }
  101 +
  102 + :host([disabled]) {
  103 + @apply(--paper-dropdown-menu-disabled);
  104 + }
  105 +
  106 + :host([noink]) paper-ripple {
  107 + display: none;
  108 + }
  109 +
  110 + :host([no-label-float]) paper-ripple {
  111 + top: 8px;
  112 + }
  113 +
  114 + paper-ripple {
  115 + top: 12px;
  116 + left: 0px;
  117 + bottom: 8px;
  118 + right: 0px;
  119 +
  120 + @apply(--paper-dropdown-menu-ripple);
  121 + }
  122 +
  123 + paper-menu-button {
  124 + display: block;
  125 + padding: 0;
  126 + @apply(--paper-dropdown-menu-button);
  127 + }
  128 +
  129 + paper-input {
  130 + @apply(--paper-dropdown-menu-input);
  131 + }
  132 +
  133 + iron-icon {
  134 + color: var(--disabled-text-color);
  135 +
  136 + @apply(--paper-dropdown-menu-icon);
  137 + }
  138 +
  139 + </style>
  140 + <template>
  141 + <paper-menu-button
  142 + id="menuButton"
  143 + vertical-align="top"
  144 + horizontal-align="right"
  145 + vertical-offset="[[_computeMenuVerticalOffset(noLabelFloat)]]"
  146 + disabled="[[disabled]]"
  147 + no-animations="[[noAnimations]]"
  148 + on-iron-select="_onIronSelect"
  149 + on-iron-deselect="_onIronDeselect"
  150 + opened="{{opened}}">
  151 + <div class="dropdown-trigger">
  152 + <paper-ripple></paper-ripple>
  153 + <paper-input
  154 + invalid="[[invalid]]"
  155 + value="[[selectedItemLabel]]"
  156 + placeholder="[[placeholder]]"
  157 + always-float-label="[[alwaysFloatLabel]]"
  158 + no-label-float="[[noLabelFloat]]"
  159 + label="[[label]]">
  160 + <iron-icon icon="arrow-drop-down" suffix></iron-icon>
  161 + </paper-input>
  162 + </div>
  163 + <content id="content" select=".dropdown-content"></content>
  164 + </paper-menu-button>
  165 + </template>
  166 +</dom-module>
  167 +<script>
  168 + (function() {
  169 + 'use strict';
  170 +
  171 + Polymer({
  172 + is: 'paper-input-search',
  173 +
  174 + /**
  175 + * Fired when the dropdown opens.
  176 + *
  177 + * @event paper-dropdown-open
  178 + */
  179 +
  180 + /**
  181 + * Fired when the dropdown closes.
  182 + *
  183 + * @event paper-dropdown-close
  184 + */
  185 +
  186 + behaviors: [
  187 + Polymer.IronControlState,
  188 + Polymer.IronButtonState,
  189 + Polymer.IronFormElementBehavior,
  190 + Polymer.IronValidatableBehavior
  191 + ],
  192 +
  193 + properties: {
  194 + /**
  195 + * The derived "label" of the currently selected item. This value
  196 + * is the `label` property on the selected item if set, or else the
  197 + * trimmed text content of the selected item.
  198 + */
  199 + selectedItemLabel: {
  200 + type: String,
  201 + notify: true,
  202 + readOnly: true,
  203 + },
  204 +
  205 + /**
  206 + * The last selected item. An item is selected if the dropdown menu has
  207 + * a child with class `dropdown-content`, and that child triggers an
  208 + * `iron-select` event with the selected `item` in the `detail`.
  209 + *
  210 + * @type {?Object}
  211 + */
  212 + selectedItem: {
  213 + type: Object,
  214 + notify: true,
  215 + readOnly: true
  216 + },
  217 +
  218 + /**
  219 + * The value for this element that will be used when submitting in
  220 + * a form. It is read only, and will always have the same value
  221 + * as `selectedItemLabel`.
  222 + */
  223 + value: {
  224 + type: String,
  225 + notify: true,
  226 + readOnly: true
  227 + },
  228 +
  229 + /**
  230 + * The label for the dropdown.
  231 + */
  232 + label: {
  233 + type: String
  234 + },
  235 +
  236 + /**
  237 + * The placeholder for the dropdown.
  238 + */
  239 + placeholder: {
  240 + type: String
  241 + },
  242 +
  243 + /**
  244 + * True if the dropdown is open. Otherwise, false.
  245 + */
  246 + opened: {
  247 + type: Boolean,
  248 + notify: true,
  249 + value: false
  250 + },
  251 +
  252 + /**
  253 + * Set to true to disable the floating label. Bind this to the
  254 + * `<paper-input-container>`'s `noLabelFloat` property.
  255 + */
  256 + noLabelFloat: {
  257 + type: Boolean,
  258 + value: false,
  259 + reflectToAttribute: true
  260 + },
  261 +
  262 + /**
  263 + * Set to true to always float the label. Bind this to the
  264 + * `<paper-input-container>`'s `alwaysFloatLabel` property.
  265 + */
  266 + alwaysFloatLabel: {
  267 + type: Boolean,
  268 + value: false
  269 + },
  270 +
  271 + /**
  272 + * Set to true to disable animations when opening and closing the
  273 + * dropdown.
  274 + */
  275 + noAnimations: {
  276 + type: Boolean,
  277 + value: false
  278 + }
  279 + },
  280 +
  281 + listeners: {
  282 + 'tap': '_onTap'
  283 + },
  284 +
  285 + keyBindings: {
  286 + 'up down': 'open',
  287 + 'esc': 'close'
  288 + },
  289 +
  290 + hostAttributes: {
  291 + role: 'group',
  292 + 'aria-haspopup': 'true'
  293 + },
  294 +
  295 + observers: [
  296 + '_selectedItemChanged(selectedItem)'
  297 + ],
  298 +
  299 + attached: function() {
  300 + // NOTE(cdata): Due to timing, a preselected value in a `IronSelectable`
  301 + // child will cause an `iron-select` event to fire while the element is
  302 + // still in a `DocumentFragment`. This has the effect of causing
  303 + // handlers not to fire. So, we double check this value on attached:
  304 + var contentElement = this.contentElement;
  305 + if (contentElement && contentElement.selectedItem) {
  306 + this._setSelectedItem(contentElement.selectedItem);
  307 + }
  308 + },
  309 +
  310 + /**
  311 + * The content element that is contained by the dropdown menu, if any.
  312 + */
  313 + get contentElement() {
  314 + return Polymer.dom(this.$.content).getDistributedNodes()[0];
  315 + },
  316 +
  317 + /**
  318 + * Show the dropdown content.
  319 + */
  320 + open: function() {
  321 + this.$.menuButton.open();
  322 + },
  323 +
  324 + /**
  325 + * Hide the dropdown content.
  326 + */
  327 + close: function() {
  328 + this.$.menuButton.close();
  329 + },
  330 +
  331 + /**
  332 + * A handler that is called when `iron-select` is fired.
  333 + *
  334 + * @param {CustomEvent} event An `iron-select` event.
  335 + */
  336 + _onIronSelect: function(event) {
  337 + this._setSelectedItem(event.detail.item);
  338 + },
  339 +
  340 + /**
  341 + * A handler that is called when `iron-deselect` is fired.
  342 + *
  343 + * @param {CustomEvent} event An `iron-deselect` event.
  344 + */
  345 + _onIronDeselect: function(event) {
  346 + this._setSelectedItem(null);
  347 + },
  348 +
  349 + /**
  350 + * A handler that is called when the dropdown is tapped.
  351 + *
  352 + * @param {CustomEvent} event A tap event.
  353 + */
  354 + _onTap: function(event) {
  355 + if (Polymer.Gestures.findOriginalTarget(event) === this) {
  356 + this.open();
  357 + }
  358 + },
  359 +
  360 + /**
  361 + * Compute the label for the dropdown given a selected item.
  362 + *
  363 + * @param {Element} selectedItem A selected Element item, with an
  364 + * optional `label` property.
  365 + */
  366 + _selectedItemChanged: function(selectedItem) {
  367 + var value = '';
  368 + if (!selectedItem) {
  369 + value = '';
  370 + } else {
  371 + value = selectedItem.label || selectedItem.textContent.trim();
  372 + }
  373 +
  374 + this._setValue(value);
  375 + this._setSelectedItemLabel(value);
  376 + },
  377 +
  378 + /**
  379 + * Compute the vertical offset of the menu based on the value of
  380 + * `noLabelFloat`.
  381 + *
  382 + * @param {boolean} noLabelFloat True if the label should not float
  383 + * above the input, otherwise false.
  384 + */
  385 + _computeMenuVerticalOffset: function(noLabelFloat) {
  386 + // NOTE(cdata): These numbers are somewhat magical because they are
  387 + // derived from the metrics of elements internal to `paper-input`'s
  388 + // template. The metrics will change depending on whether or not the
  389 + // input has a floating label.
  390 +// return noLabelFloat ? -4 : 8;
  391 + return 64;
  392 + },
  393 +
  394 + /**
  395 + * Returns false if the element is required and does not have a selection,
  396 + * and true otherwise.
  397 + * @return {Boolean} true if `required` is false, or if `required` is true
  398 + * and the element has a valid selection.
  399 + */
  400 + _getValidity: function() {
  401 + return this.disabled || !this.required || (this.required && this.value);
  402 + }
  403 + });
  404 + })();
  405 +</script>
  406 +
  407 +
  408 +
  409 +
  410 +<!--<link rel="import" href="../../bower_components/polymer/polymer.html">-->
  411 +
  412 +<!--<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">-->
  413 +<!--<link rel="import" href="../../bower_components/paper-tabs/paper-tab.html">-->
  414 +
  415 +<!--<link rel="import" href="../../bower_components/neon-animation/neon-animation.html">-->
  416 +<!--<link rel="import" href="../../bower_components/neon-animation/neon-animatable.html">-->
  417 +<!--<link rel="import" href="../../bower_components/neon-animation/neon-animations.html">-->
  418 +
  419 +<!--<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">-->
  420 +<!--<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">-->
  421 +<!--<link rel="import" href="../../bower_components/paper-item/paper-item.html">-->
  422 +
  423 +<!--<link rel="import" href="../../bower_components/paper-input/paper-textarea.html">-->
  424 +
  425 +<!--<link rel="import" href="../../bower_components/paper-material/paper-material.html" />-->
  426 +
  427 +<!--<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">-->
  428 +<!--<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">-->
  429 +<!--<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">-->
  430 +
  431 +<!--<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">-->
  432 +<!--<link rel="import" href="../../bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html">-->
  433 +
  434 +<!--<link rel="import" href="../../datalets/datasetexplorer-datalet/datasetexplorer-datalet.html">-->
  435 +
  436 +<!--&lt;!&ndash;<script src="../../datalets/shared_js/d3.js"></script>&ndash;&gt;-->
  437 +
  438 +<!--<link rel="import" href="../../bower_components/paper-input/paper-input.html">-->
  439 +<!--<link rel="import" href="demo/paper-autocomplete.html">-->
  440 +
  441 +<!--<dom-module id="paper-input-search">-->
  442 +
  443 + <!--<template>-->
  444 +
  445 + <!--&lt;!&ndash;<paper-dropdown-menu label="Available datasets">&ndash;&gt;-->
  446 + <!--&lt;!&ndash;<paper-menu class="dropdown-content">&ndash;&gt;-->
  447 + <!--&lt;!&ndash;<template is="dom-repeat" items={{datasets}} as="dataset">&ndash;&gt;-->
  448 + <!--&lt;!&ndash;<paper-item id={{index}} on-tap="_selectDataUrl">{{dataset.name}}</paper-item>&ndash;&gt;-->
  449 + <!--&lt;!&ndash;</template>&ndash;&gt;-->
  450 + <!--&lt;!&ndash;</paper-menu>&ndash;&gt;-->
  451 + <!--&lt;!&ndash;</paper-dropdown-menu>&ndash;&gt;-->
  452 +
  453 + <!--&lt;!&ndash;<paper-icon-button id="info_button" disabled on-click="_showInfo" icon="info-outline" title="dataset info"></paper-icon-button>&ndash;&gt;-->
  454 +
  455 + <!--&lt;!&ndash;<paper-textarea id="selected_url" label="Selected url" value={{dataUrl}}></paper-textarea>&ndash;&gt;-->
  456 +
  457 + <!--&lt;!&ndash;<paper-dialog id="dialog_info">&ndash;&gt;-->
  458 + <!--&lt;!&ndash;<h2 id="dialog_name"></h2>&ndash;&gt;-->
  459 + <!--&lt;!&ndash;<p id="dialog_description"></p>&ndash;&gt;-->
  460 + <!--&lt;!&ndash;</paper-dialog>&ndash;&gt;-->
  461 +
  462 + <!--<style is="custom-style">-->
  463 + <!--paper-input {-->
  464 + <!--width: 200px;-->
  465 + <!--}-->
  466 + <!--</style>-->
  467 +
  468 + <!--<paper-input list="filtered_datasets" bind-value="{{filter::input}}"></paper-input>&lt;!&ndash; is="iron-input" type="search"&ndash;&gt;-->
  469 +
  470 + <!--<datalist id="filtered_datasets">-->
  471 + <!--<template is="dom-repeat" items={{_filteredDatasets}}>-->
  472 + <!--<option value={{item.name}}></option>-->
  473 + <!--</template>-->
  474 + <!--</datalist>-->
  475 +
  476 + <!--</template>-->
  477 +
  478 + <!--<script>-->
  479 +
  480 + <!--Polymer({-->
  481 +
  482 + <!--is : 'paper-input-search',-->
  483 +
  484 + <!--properties : {-->
  485 +
  486 + <!--datasets : {-->
  487 + <!--type : Array,-->
  488 + <!--value : undefined,-->
  489 +<!--// observer : '_ciao'-->
  490 + <!--},-->
  491 +
  492 + <!--_filteredDatasets : {-->
  493 + <!--type : Array,-->
  494 + <!--value: undefined-->
  495 + <!--},-->
  496 +
  497 + <!--filter: {-->
  498 + <!--type: String,-->
  499 + <!--value: "",-->
  500 + <!--observer: "_filterChanged"-->
  501 + <!--}-->
  502 + <!--},-->
  503 +
  504 + <!--attached : function(){-->
  505 + <!--this._filteredDatasets = this.datasets;-->
  506 + <!--console.log(this._filteredDatasets);-->
  507 + <!--},-->
  508 +
  509 + <!--_filterChanged : function(){-->
  510 +<!--// this.filteredDatalist = this.datalist;-->
  511 + <!--console.log(this.filter);-->
  512 + <!--},-->
  513 +
  514 + <!--});-->
  515 +
  516 + <!--</script>-->
  517 +
  518 +<!--</dom-module>-->
  519 +
  520 +
  521 +<!--paper-autocomplete!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!-->
  522 +<!--//http://stackoverflow.com/questions/31030583/polymer-paper-input-html-datalist-autocomplete-suggestions-list-->
  523 +
  524 +<!--<link rel="import" href="../../../bower_components/paper-input/paper-input.html">-->
  525 +<!--<link rel="import" href="../../../bower_components/paper-input/paper-input-container.html">-->
  526 +<!--<link rel="import" href="../../../bower_components/iron-collapse/iron-collapse.html">-->
  527 +<!--<link rel="import" href="../../../bower_components/paper-material/paper-material.html">-->
  528 +<!--<link rel="import" href="../../../bower_components/paper-button/paper-button.html">-->
  529 +
  530 +<!--&lt;!&ndash;<link rel="import" href="../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">&ndash;&gt;-->
  531 +<!--&lt;!&ndash;<link rel="import" href="../../../bower_components/paper-menu/paper-menu.html">&ndash;&gt;-->
  532 +<!--&lt;!&ndash;<link rel="import" href="../../../bower_components/paper-item/paper-item.html">&ndash;&gt;-->
  533 +
  534 +
  535 +<!--<dom-module id="paper-autocomplete">-->
  536 + <!--<style>-->
  537 + <!--iron-collapse {-->
  538 + <!--box-shadow: 6px;-->
  539 + <!--}-->
  540 +
  541 + <!--paper-button {-->
  542 + <!--width: 100%;-->
  543 + <!--text-transform: none;-->
  544 + <!--}-->
  545 +
  546 + <!--paper-input-container {-->
  547 + <!--width: 200px;-->
  548 + <!--}-->
  549 + <!--</style>-->
  550 + <!--<template>-->
  551 + <!--<paper-input-container>-->
  552 + <!--<label>{{label}}</label>-->
  553 + <!--<content select=".content"></content>-->
  554 + <!--<input id="searchBox" class="paper-input-input" is="iron-input" bind-value="{{searchValue::input}}"></input>-->
  555 + <!--</paper-input-container>-->
  556 +
  557 + <!--<iron-collapse id="collapse">-->
  558 +
  559 + <!--<paper-material>-->
  560 + <!--<div>-->
  561 + <!--<template id="resultList" is="dom-repeat" items="{{choices}}" filter="_listFilter">-->
  562 + <!--<paper-item>-->
  563 + <!--<paper-button on-tap="_selectItem">{{item.name}}</paper-button>-->
  564 + <!--</paper-item>-->
  565 + <!--</template>-->
  566 + <!--</div>-->
  567 + <!--</paper-material>-->
  568 + <!--</iron-collapse>-->
  569 +
  570 + <!--&lt;!&ndash;<iron-collapse id="collapse">&ndash;&gt;-->
  571 + <!--&lt;!&ndash;<paper-menu>&ndash;&gt;-->
  572 + <!--&lt;!&ndash;<template id="resultList" is="dom-repeat" items="{{choices}}" filter="_listFilter">&ndash;&gt;-->
  573 + <!--&lt;!&ndash;<paper-item>&ndash;&gt;-->
  574 + <!--&lt;!&ndash;&lt;!&ndash;<paper-button on-tap="_selectItem">{{item.name}}</paper-button>&ndash;&gt;&ndash;&gt;-->
  575 + <!--&lt;!&ndash;<paper-item on-tap="_selectItem">{{item.name}}</paper-item>&ndash;&gt;-->
  576 + <!--&lt;!&ndash;</paper-item>&ndash;&gt;-->
  577 + <!--&lt;!&ndash;</template>&ndash;&gt;-->
  578 + <!--&lt;!&ndash;</paper-menu>&ndash;&gt;-->
  579 + <!--&lt;!&ndash;</iron-collapse>&ndash;&gt;-->
  580 +
  581 + <!--</template>-->
  582 +<!--</dom-module>-->
  583 +<!--<script>-->
  584 + <!--(function() {-->
  585 + <!--Polymer({-->
  586 + <!--is: "paper-autocomplete",-->
  587 + <!--properties: {-->
  588 +<!--// choices: Array,-->
  589 + <!--label: String,-->
  590 + <!--value: {-->
  591 + <!--type: Object,-->
  592 + <!--},-->
  593 +
  594 + <!--choices: {-->
  595 + <!--type: Array,-->
  596 + <!--value: undefined-->
  597 + <!--},-->
  598 +
  599 + <!--searchValue: {-->
  600 + <!--type: String,-->
  601 + <!--value: '',-->
  602 + <!--observer: "_valueChanged"-->
  603 + <!--}-->
  604 + <!--},-->
  605 + <!--ready: function() {-->
  606 + <!--this.$.resultList.render();-->
  607 + <!--},-->
  608 +
  609 + <!--attached: function() {-->
  610 + <!--this.$.resultList.render();-->
  611 + <!--console.log(this.choices);-->
  612 + <!--},-->
  613 +
  614 + <!--_valueChanged: function(e) {console.log("we");-->
  615 + <!--var collapse = this.$.collapse-->
  616 + <!--if (e != '' && !collapse.opened) {-->
  617 + <!--this.$.resultList.render()-->
  618 + <!--collapse.toggle()-->
  619 + <!--} else-->
  620 + <!--if (e == '' && collapse.opened) {-->
  621 + <!--collapse.toggle()-->
  622 + <!--}-->
  623 + <!--},-->
  624 + <!--_listFilter: function(item) {-->
  625 + <!--return item.name.toLowerCase().includes(-->
  626 + <!--this.searchValue.toLowerCase()-->
  627 + <!--)-->
  628 + <!--},-->
  629 + <!--_selectItem: function(event) {-->
  630 + <!--this.set('searchValue', event.model.item.name)-->
  631 + <!--this.set('value', event.model.item)-->
  632 + <!--collapse.toggle()-->
  633 + <!--}-->
  634 + <!--})-->
  635 + <!--})()-->
  636 +<!--</script>-->
  637 +
... ...
controllets/tree-view-multi-table-controllet/demo/index.html
  View file @905ac68
... ... @@ -14,7 +14,7 @@
14 14 <body>
15 15  
16 16 <tree-view-multi-table-controllet id="tvmt" root-name="data" opened-path="records,geometry" preselected-fields='["nhits", "records,datasetid", "records,recordid"]' data-url="https://data.issy.com/api/records/1.0/search?dataset=liste-des-restaurants-a-issy-les-moulineaux&sort=type&facet=type&facet=terrasse"></tree-view-multi-table-controllet>
17   - <!--<tree-view-multi-table-controllet root-name="Data" opened-path="records,geometry" data-url="https://data.issy.com/api/records/1.0/search?dataset=liste-des-restaurants-a-issy-les-moulineaux&sort=type&facet=type&facet=terrasse"></tree-view-multi-table-controllet>-->
  17 + <!--<tree-view-multi-table-controllet id="tvmt" root-name="data" data-url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=73e02092-85a1-434e-85fe-0c9a43aa9a52&limit=5"></tree-view-multi-table-controllet>-->
18 18  
19 19 <script>
20 20 var tvmt = document.getElementById('tvmt');
... ...
controllets/tree-view-multi-table-controllet/tree-view-multi-table-controllet.html
  View file @905ac68
... ... @@ -98,18 +98,33 @@
98 98  
99 99 _init : function() {
100 100 var tree = document.getElementById('tree_view');
101   - var t = this;
  101 + var that = this;
102 102  
103 103 $.ajax({
104 104 url: this.dataUrl,
105 105 dataType: "json",
106 106 success: function(data){
  107 + data = that._filterJson(data);
107 108 tree.setAttribute("json-data", JSON.stringify(data));
108 109 tree.selectedFields = [];
109   - t._updateSelectedFields();
  110 + that._updateSelectedFields();
110 111 tree.ready();
111 112 }
112 113 });
  114 +
  115 +
  116 + },
  117 +
  118 + _filterJson : function(data){
  119 + console.log(data);
  120 + console.log(this.dataUrl);
  121 +// if(this.dataUrl.indexOf("ckan") != -1)
  122 + if(data.result != undefined && data.result.resource_id != undefined) {
  123 + this.rootName = "ckan"
  124 + this.openedPath = "result,records";
  125 + return {result: {records: data.result.records}};
  126 + }
  127 + return data;
113 128 },
114 129  
115 130 _updateSelectedFields : function() {
... ...
datalets/base-datalet/base-datalet.html
  View file @905ac68
... ... @@ -80,16 +80,17 @@ Example :
80 80 width: 100%;
81 81 }
82 82  
  83 +
83 84 </style>
84 85  
85 86 <div id="base_datalet_imgWaitDatalet">
86 87 <img id="image_spin" src="static/images/spin.svg">
87 88  
88 89 </div>
89   -
90 90 <div id="base_datalet_container">
91   - <b>Source: </b><span id="domain"></span>
92   - <b> </b><span id="domainPage"></span>
  91 + <b> Source:</b><span id="domain"></span>
  92 + <b> </b><span id="domainPage">
  93 + </span>
93 94 <div id="base_datalet_rtp">
94 95 <div id="rtp">Powered by ROUTE-TO-PA</div>
95 96 <div><a href="http://www.routetopa.eu/"><img id="rtpalogo" src="static/images/rtpalogo.png" ></a></div>
... ... @@ -134,8 +135,6 @@ Example :
134 135 var urlDatalet;
135 136 if(this.dataUrl != undefined){
136 137  
137   - urlSource = this.dataUrl.split("/")[0] + "//" + this.dataUrl.split("/")[2];
138   -
139 138 var apiIdResource = "resource_show?id=";
140 139  
141 140 //Resourceid of a datalet
... ... @@ -148,10 +147,10 @@ Example :
148 147 queryFinal = this.dataUrl.substring(this.dataUrl.indexOf("api"), this.dataUrl.indexOf("datastore_search"));
149 148  
150 149 urlDatalet = queryInitial + queryFinal + apiIdResource + resultIdDatalet;
  150 + urlSource = this.dataUrl.split("/")[0] + "//" + this.dataUrl.split("/")[2];
151 151  
  152 + this.$.domainPage.innerHTML = '<a href=' + urlSource + ' target=' + "_blank>" + urlSource + '</a>'+ "." ;
152 153 this.requestDataletData(urlDatalet);
153   - //String source to define for Issy
154   - this.$.domain.textContent = this.dataUrl.split("/")[0] + "//" + this.dataUrl.split("/")[2];
155 154 }
156 155 },
157 156 /**
... ... @@ -214,10 +213,9 @@ Example :
214 213 urlDatalet = urlDatasetDownload.replace(/\/download\/.*/, '');
215 214 urlSource = this.dataUrl.split("/")[0] + "//" + this.dataUrl.split("/")[2];
216 215  
217   - //this.$.domain.textContent = this.dataUrl.split("/")[0] + "//" + this.dataUrl.split("/")[2];
218 216  
219   - //this.$.domainPage.innerHTML = '<a href=' + urlSource + ' target=' + "_blank>" + " urlSource" + '</a>';
220   - this.$.domainPage.innerHTML = '<a href=' + urlDatalet + ' target=' + "_blank>" + " Dataset's page" + '</a>';
  217 + this.$.domainPage.innerHTML += " (" + ' <a href=' + urlDatalet + ' target=' + "_blank>" + "Dataset's page" + '</a>' + " )";
  218 +
221 219 }
222 220 }
223 221 });
... ...
datalets/graph-datalet/graph-datalet.html
  View file @905ac68
... ... @@ -248,13 +248,6 @@ Example:
248 248 _this.$.dialog.open();*/
249 249 },
250 250  
251   - openModal : function(t) {
252   - var e = t.split(" ").join("_").toLowerCase();
253   - $(".modal-content").hide();
254   - $("." + e).fadeIn();
255   - $("#modal").modal()
256   - },
257   -
258 251 /**
259 252 * It is called after the element’s template has been stamped and all elements inside the element’s local
260 253 * DOM have been configured (with values bound from parents, deserialized attributes, or else default values)
... ... @@ -281,7 +274,12 @@ Example:
281 274 height: "100%"
282 275 }).attr("viewBox", "0 0 " + this.width + " " + this.height).attr("pointer-events", "all").style("position", "absolute").attr("style", "transform:translate(0px)");
283 276  
284   - var g = JSON.parse(this.data);
  277 + /*var g = JSON.parse(this.data);
  278 + g.nodes[0].x = this.width / 2;
  279 + g.nodes[0].y = this.height / 2;
  280 + this.buildGraph(g);*/
  281 +
  282 + var g = this.data;
285 283 g.nodes[0].x = this.width / 2;
286 284 g.nodes[0].y = this.height / 2;
287 285 this.buildGraph(g);
... ...
demo.html
  View file @905ac68
... ... @@ -264,8 +264,8 @@
264 264  
265 265 //DEEP.deepUrl = "http://deep.routetopa.eu/DEEP/";
266 266 //DEEP.datasetsList = "http://deep.routetopa.eu/DEEP/datalets-list";
267   - DEEP.deepUrl = "http://192.168.164.128/DatalEts-Ecosystem-Provider/DEEP/";
268   - DEEP.datasetsList = "http://192.168.164.128/DatalEts-Ecosystem-Provider/DEEP/datalets-list";
  267 + DEEP.deepUrl = "http://deep.routetopa.eu/DEEP/";
  268 + DEEP.datasetsList = "http://deep.routetopa.eu/DEEP/datalets-list";
269 269  
270 270 DEEP.Datasets = {
271 271 names:[
... ... @@ -551,4 +551,4 @@
551 551 </script>
552 552  
553 553 </body>
554   -</html>
555 554 \ No newline at end of file
  555 +</html>
... ...