Commit 325c348ab6d97f03d9d56a93afcb742bc38648c0
1 parent
dbc787cf
Cross browser bug fix
Showing
29 changed files
with
106 additions
and
4359 deletions
controllets/data-sevc-controllet/data-sevc-controllet.html
| 1 | <link rel="import" href="../../bower_components/polymer/polymer.html"> | 1 | <link rel="import" href="../../bower_components/polymer/polymer.html"> |
| 2 | -<link rel="import" href="../../bower_components/paper-styles/color.html"> | 2 | + <link rel="import" href="../../bower_components/paper-styles/color.html"> |
| 3 | 3 | ||
| 4 | -<link rel="import" href="../../bower_components/neon-animation/neon-animated-pages.html"> | ||
| 5 | -<link rel="import" href="../../bower_components/neon-animation/neon-animatable.html"> | ||
| 6 | -<link rel="import" href="../../bower_components/neon-animation/neon-animations.html"> | 4 | + <link rel="import" href="../../bower_components/neon-animation/neon-animated-pages.html"> |
| 5 | + <link rel="import" href="../../bower_components/neon-animation/neon-animatable.html"> | ||
| 6 | + <link rel="import" href="../../bower_components/neon-animation/neon-animations.html"> | ||
| 7 | 7 | ||
| 8 | -<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html"> | ||
| 9 | -<link rel="import" href="../../bower_components/paper-input/paper-input.html"> | ||
| 10 | -<link rel="import" href="../../bower_components/paper-input/paper-textarea.html"> | ||
| 11 | -<link rel="import" href="../../bower_components/paper-button/paper-button.html"> | ||
| 12 | -<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html"> | ||
| 13 | -<link rel="import" href="../../bower_components/paper-tabs/paper-tab.html"> | ||
| 14 | -<link rel="import" href="../../bower_components/iron-pages/iron-pages.html"> | ||
| 15 | -<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html"> | ||
| 16 | -<link rel="import" href="../../bower_components/paper-menu/paper-menu.html"> | ||
| 17 | -<link rel="import" href="../../bower_components/paper-item/paper-item.html"> | ||
| 18 | -<link rel="import" href="../../bower_components/paper-toast/paper-toast.html"> | 8 | + <link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html"> |
| 9 | + <link rel="import" href="../../bower_components/paper-input/paper-input.html"> | ||
| 10 | + <link rel="import" href="../../bower_components/paper-input/paper-textarea.html"> | ||
| 11 | + <link rel="import" href="../../bower_components/paper-button/paper-button.html"> | ||
| 12 | + <link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html"> | ||
| 13 | + <link rel="import" href="../../bower_components/paper-tabs/paper-tab.html"> | ||
| 14 | + <link rel="import" href="../../bower_components/iron-pages/iron-pages.html"> | ||
| 15 | + <link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html"> | ||
| 16 | + <link rel="import" href="../../bower_components/paper-menu/paper-menu.html"> | ||
| 17 | + <link rel="import" href="../../bower_components/paper-item/paper-item.html"> | ||
| 18 | + <link rel="import" href="../../bower_components/paper-toast/paper-toast.html"> | ||
| 19 | 19 | ||
| 20 | 20 | ||
| 21 | -<link rel="import" href="../items-slider-controllet/items-slider-controllet.html"> | ||
| 22 | -<link rel="import" href="../draggable-element-controllet/draggable-element-controllet.html"> | ||
| 23 | -<link rel="import" href="../treeview-controllet/treeview-controllet.html"> | 21 | + <link rel="import" href="../items-slider-controllet/items-slider-controllet.html"> |
| 22 | + <link rel="import" href="../draggable-element-controllet/draggable-element-controllet.html"> | ||
| 23 | + <link rel="import" href="../treeview-controllet/treeview-controllet.html"> | ||
| 24 | 24 | ||
| 25 | 25 | ||
| 26 | -<dom-module id="data-sevc-controllet"> | ||
| 27 | - <template> | ||
| 28 | - <link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css"> | 26 | + <dom-module id="data-sevc-controllet"> |
| 27 | + <template> | ||
| 28 | + <link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css"> | ||
| 29 | + <link rel="stylesheet" href="static/css/reset.css"> | ||
| 29 | 30 | ||
| 30 | - <style is="custom-style"> | 31 | + <style is="custom-style"> |
| 31 | 32 | ||
| 32 | - /*TEST FOR CROSS BROWSER FLEX LAYOUT BUG FIXING --- PEZZOTS */ | ||
| 33 | - .layout.horizontal.data-sevc-controllet, .layout.horizontal-reverse.data-sevc-controllet, .layout.vertical.data-sevc-controllet, .layout.vertical-reverse.data-sevc-controllet { | ||
| 34 | - display: flex; | ||
| 35 | - } | ||
| 36 | - .layout.vertical.data-sevc-controllet { | ||
| 37 | - flex-direction: column; | ||
| 38 | - } | ||
| 39 | - .layout.justified { | ||
| 40 | - justify-content: space-between; | ||
| 41 | - } | ||
| 42 | - .layout.vertical { | ||
| 43 | - flex-direction: column; | ||
| 44 | - } | ||
| 45 | - .layout.horizontal, .layout.horizontal-reverse, .layout.vertical, .layout.vertical-reverse { | ||
| 46 | - display: flex; | 33 | + ::content body { |
| 34 | + font-family: 'Roboto', sans-serif; | ||
| 47 | } | 35 | } |
| 48 | 36 | ||
| 49 | - .layout.horizontal.data-sevc-controllet.data-sevc-controllet, .layout.horizontal-reverse.data-sevc-controllet.data-sevc-controllet, .layout.vertical.data-sevc-controllet.data-sevc-controllet, .layout.vertical-reverse.data-sevc-controllet.data-sevc-controllet { | ||
| 50 | - display: flex; | ||
| 51 | - } | ||
| 52 | - .layout.horizontal.data-sevc-controllet, .layout.horizontal-reverse.data-sevc-controllet, .layout.vertical.data-sevc-controllet, .layout.vertical-reverse.data-sevc-controllet { | ||
| 53 | - display: flex; | ||
| 54 | - } | ||
| 55 | - .layout.horizontal { | ||
| 56 | - flex-direction: row; | ||
| 57 | - } | ||
| 58 | - .layout.horizontal, .layout.horizontal-reverse, .layout.vertical, .layout.vertical-reverse { | ||
| 59 | - display: flex; | ||
| 60 | - } | ||
| 61 | - /*END TEST*/ | ||
| 62 | - | ||
| 63 | .flexchild | 37 | .flexchild |
| 64 | { | 38 | { |
| 65 | @apply(--layout-flex); | 39 | @apply(--layout-flex); |
| @@ -185,14 +159,14 @@ | @@ -185,14 +159,14 @@ | ||
| 185 | 159 | ||
| 186 | #fields_placeholder{ | 160 | #fields_placeholder{ |
| 187 | width: 40%; | 161 | width: 40%; |
| 188 | - height: 50vh; | 162 | + height: 75vh; |
| 189 | position: relative; | 163 | position: relative; |
| 190 | float: left; | 164 | float: left; |
| 191 | overflow: auto; | 165 | overflow: auto; |
| 192 | } | 166 | } |
| 193 | 167 | ||
| 194 | #table_fields_container{ | 168 | #table_fields_container{ |
| 195 | - height: 50vh; | 169 | + height: 75vh; |
| 196 | width: 55%; | 170 | width: 55%; |
| 197 | position: relative; | 171 | position: relative; |
| 198 | float: left; | 172 | float: left; |
controllets/data-sevc-controllet/data-sevc-controllet_.html deleted
| 1 | -<link rel="import" href="../../bower_components/polymer/polymer.html"> | ||
| 2 | -<link rel="import" href="../../bower_components/paper-styles/color.html"> | ||
| 3 | - | ||
| 4 | -<link rel="import" href="../../bower_components/neon-animation/neon-animated-pages.html"> | ||
| 5 | -<link rel="import" href="../../bower_components/neon-animation/neon-animatable.html"> | ||
| 6 | -<link rel="import" href="../../bower_components/neon-animation/neon-animations.html"> | ||
| 7 | - | ||
| 8 | -<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html"> | ||
| 9 | -<link rel="import" href="../../bower_components/paper-input/paper-input.html"> | ||
| 10 | -<link rel="import" href="../../bower_components/paper-input/paper-textarea.html"> | ||
| 11 | -<link rel="import" href="../../bower_components/paper-button/paper-button.html"> | ||
| 12 | -<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html"> | ||
| 13 | -<link rel="import" href="../../bower_components/paper-tabs/paper-tab.html"> | ||
| 14 | -<link rel="import" href="../../bower_components/iron-pages/iron-pages.html"> | ||
| 15 | -<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html"> | ||
| 16 | -<link rel="import" href="../../bower_components/paper-menu/paper-menu.html"> | ||
| 17 | -<link rel="import" href="../../bower_components/paper-item/paper-item.html"> | ||
| 18 | - | ||
| 19 | -<link rel="import" href="../items-slider-controllet/items-slider-controllet.html"> | ||
| 20 | -<link rel="import" href="../draggable-element-controllet/draggable-element-controllet.html"> | ||
| 21 | -<link rel="import" href="../treeview-controllet/treeview-controllet.html"> | ||
| 22 | - | ||
| 23 | - | ||
| 24 | -<dom-module id="data-sevc-controllet"> | ||
| 25 | - <template> | ||
| 26 | - <link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css"> | ||
| 27 | - | ||
| 28 | - <style is="custom-style"> | ||
| 29 | - body { | ||
| 30 | - font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial; | ||
| 31 | - font-size: 1em; | ||
| 32 | - margin: 0; | ||
| 33 | - padding: 1.5em; | ||
| 34 | - -webkit-tap-highlight-color: rgba(0,0,0,0); | ||
| 35 | - -webkit-touch-callout: none; | ||
| 36 | - overflow: hidden; | ||
| 37 | - } | ||
| 38 | - | ||
| 39 | - #pages{ | ||
| 40 | - min-width: 1336px; | ||
| 41 | - max-width: 1634px; | ||
| 42 | - } | ||
| 43 | - | ||
| 44 | - .fields-card-content { | ||
| 45 | - padding-left: 1.5em; | ||
| 46 | - } | ||
| 47 | - | ||
| 48 | - .fancy .fields-title { | ||
| 49 | - /*position: absolute; | ||
| 50 | - top: 30px; | ||
| 51 | - left: 100px; | ||
| 52 | - display: inline-block;*/ | ||
| 53 | - color: var(--paper-indigo-500); | ||
| 54 | - } | ||
| 55 | - | ||
| 56 | - .fancy-content { | ||
| 57 | - /*padding: 25px;*/ | ||
| 58 | - } | ||
| 59 | - | ||
| 60 | - .avatar { | ||
| 61 | - display: inline-block; | ||
| 62 | - height: 2em; | ||
| 63 | - width: 2em; | ||
| 64 | - border-radius: 50%; | ||
| 65 | - /*background: var(--paper-pink-500);*/ | ||
| 66 | - background: var(--paper-blue-500); | ||
| 67 | - color: white; | ||
| 68 | - line-height: 2em; | ||
| 69 | - font-size: 1.87em; | ||
| 70 | - text-align: center; | ||
| 71 | - } | ||
| 72 | - | ||
| 73 | - .fancy .title { | ||
| 74 | - /*position: absolute; | ||
| 75 | - top: 30px; | ||
| 76 | - left: 100px;*/ | ||
| 77 | - display: inline-block; | ||
| 78 | - position: relative; | ||
| 79 | - top: .75em; | ||
| 80 | - left: .625em; | ||
| 81 | - color: var(--paper-indigo-500); | ||
| 82 | - } | ||
| 83 | - | ||
| 84 | - .fancy .big { | ||
| 85 | - font-size: 1.37em; | ||
| 86 | - padding: 0.5em 0 1em; | ||
| 87 | - color: var(--google-grey-500); | ||
| 88 | - } | ||
| 89 | - | ||
| 90 | - .fancy .medium { | ||
| 91 | - font-size: 1em; | ||
| 92 | - padding-bottom: 0.5em; | ||
| 93 | - color : #000000; | ||
| 94 | - font-weight: bold; | ||
| 95 | - } | ||
| 96 | - | ||
| 97 | - paper-input { | ||
| 98 | - width: 80%; | ||
| 99 | - } | ||
| 100 | - | ||
| 101 | - paper-dropdown-menu { | ||
| 102 | - text-align: left; | ||
| 103 | - margin: auto; | ||
| 104 | - width: 100%; | ||
| 105 | - } | ||
| 106 | - | ||
| 107 | - :host ::content paper-menu-button{ | ||
| 108 | - display: block; | ||
| 109 | - width: 100%; | ||
| 110 | - } | ||
| 111 | - | ||
| 112 | - #visualization_slider_area{ | ||
| 113 | - position:relative; | ||
| 114 | - float:left; | ||
| 115 | - height: 22vh; | ||
| 116 | - /*width: 50%;*/ | ||
| 117 | - min-width: 670px; | ||
| 118 | - min-height: 180px; | ||
| 119 | - } | ||
| 120 | - | ||
| 121 | - #datalet_area{ | ||
| 122 | - position:relative; | ||
| 123 | - /*height: 30em;*/ | ||
| 124 | - width: 46%; | ||
| 125 | - min-height: 500px; | ||
| 126 | - min-width: 600px; | ||
| 127 | - float: right; | ||
| 128 | - } | ||
| 129 | - | ||
| 130 | - #fields_mapping_area{ | ||
| 131 | - position:relative; | ||
| 132 | - height: auto;/*70%;*/ | ||
| 133 | - /*width: 50%;*/ | ||
| 134 | - float:left; | ||
| 135 | - min-width: 670px; | ||
| 136 | - } | ||
| 137 | - | ||
| 138 | - #visualization_customization_area{ | ||
| 139 | - position:relative; | ||
| 140 | - /*height:auto;*/ | ||
| 141 | - width: 46%; | ||
| 142 | - float:right; | ||
| 143 | - background-color: white; | ||
| 144 | - } | ||
| 145 | - | ||
| 146 | - .field-mapping-card{ | ||
| 147 | - width: 50%; | ||
| 148 | - height: 50vh; | ||
| 149 | - overflow: auto; | ||
| 150 | - position: relative; | ||
| 151 | - float: left; | ||
| 152 | - } | ||
| 153 | - | ||
| 154 | - .horizontal-section-container .vertical-section { | ||
| 155 | - /*max-width: 130px;*/ | ||
| 156 | - diplay:block; | ||
| 157 | - float: left; | ||
| 158 | - } | ||
| 159 | - | ||
| 160 | - | ||
| 161 | - .colorful { | ||
| 162 | - background: #4285f4; | ||
| 163 | - color: #fff; | ||
| 164 | - } | ||
| 165 | - | ||
| 166 | - .toolbar_button{ | ||
| 167 | - /*height: 100%; | ||
| 168 | - display: inline-block;*/ | ||
| 169 | - float: left; | ||
| 170 | - margin-top: 2em; | ||
| 171 | - --iron-icon-height: 32px; | ||
| 172 | - --iron-icon-width: 32px; | ||
| 173 | - } | ||
| 174 | - | ||
| 175 | - /*paper-iron-button.toolbar_button{ | ||
| 176 | - height: 34px; | ||
| 177 | - width: 34px; | ||
| 178 | - }*/ | ||
| 179 | - | ||
| 180 | - .toolbar-center{ | ||
| 181 | - display: inline-block; | ||
| 182 | - position: relative; | ||
| 183 | - float: left; | ||
| 184 | - width: 90%; | ||
| 185 | - } | ||
| 186 | - | ||
| 187 | - .toolbar{ | ||
| 188 | - width: 100%; | ||
| 189 | - height : 8em; | ||
| 190 | - vertical-align: middle; | ||
| 191 | - min-width: 975px; | ||
| 192 | - } | ||
| 193 | - | ||
| 194 | - | ||
| 195 | - | ||
| 196 | - #datalet_created_idm_fields_container{ | ||
| 197 | - position: relative; | ||
| 198 | - float: left; | ||
| 199 | - width: 100%; | ||
| 200 | - height: 50vh; | ||
| 201 | - overflow: auto; | ||
| 202 | - } | ||
| 203 | - | ||
| 204 | - #finish{ | ||
| 205 | - position: relative; | ||
| 206 | - float: left; | ||
| 207 | - width: 100%; | ||
| 208 | - height : 20%; | ||
| 209 | - align-content: center; | ||
| 210 | - } | ||
| 211 | - | ||
| 212 | - #datalet_created_placehorder { | ||
| 213 | - width: 100%; | ||
| 214 | - } | ||
| 215 | - | ||
| 216 | - #finish_button{ | ||
| 217 | - float: left; | ||
| 218 | - margin-top: 2em; | ||
| 219 | - --iron-icon-height: 64px; | ||
| 220 | - --iron-icon-width: 64px; | ||
| 221 | - color: var(--paper-blue-500); | ||
| 222 | - } | ||
| 223 | - | ||
| 224 | - #finish_button:hover{ | ||
| 225 | - --iron-icon : "add-circle-outline" | ||
| 226 | - } | ||
| 227 | - | ||
| 228 | - /* #finish_button iron-icon:hover{ | ||
| 229 | - icon : "add-circle"; | ||
| 230 | - } | ||
| 231 | - | ||
| 232 | - #finish_button iron-icon{ | ||
| 233 | - height: 4vh; | ||
| 234 | - width: 4vw; | ||
| 235 | - }*/ | ||
| 236 | - | ||
| 237 | - .area_container{ | ||
| 238 | - margin : 0.8em; | ||
| 239 | - padding : 0.8em; | ||
| 240 | - border-width: 1em; | ||
| 241 | - border-radius: 0.125rem; | ||
| 242 | - box-shadow: 0.125em 0.125em 0.1125em 0.125em rgba(0, 0, 0, 0.25); | ||
| 243 | - } | ||
| 244 | - | ||
| 245 | - #fields_placeholder{ | ||
| 246 | - width: 40%; | ||
| 247 | - height: 50vh; | ||
| 248 | - position: relative; | ||
| 249 | - float: left; | ||
| 250 | - overflow: auto; | ||
| 251 | - } | ||
| 252 | - | ||
| 253 | - #table_fields_container{ | ||
| 254 | - height: 50vh; | ||
| 255 | - width: 55%; | ||
| 256 | - /*max-width: 100vw; | ||
| 257 | - max-height: 50vh;*/ | ||
| 258 | - position: relative; | ||
| 259 | - float: left; | ||
| 260 | - overflow: auto; | ||
| 261 | - } | ||
| 262 | - | ||
| 263 | - paper-tabs, paper-toolbar { | ||
| 264 | - background-color: var(--paper-blue-500); | ||
| 265 | - color: #ffffff; | ||
| 266 | - box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2); | ||
| 267 | - } | ||
| 268 | - | ||
| 269 | - paper-toolbar paper-tabs { | ||
| 270 | - box-shadow: none; | ||
| 271 | - --paper-tabs-selection-bar-color : var(--google-gray-500); | ||
| 272 | - } | ||
| 273 | - | ||
| 274 | - paper-tabs[noink][no-bar] paper-tab.iron-selected { | ||
| 275 | - background-color: var(--google-gray-500); | ||
| 276 | - } | ||
| 277 | - | ||
| 278 | - paper-tabs[align-bottom] { | ||
| 279 | - box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.15); | ||
| 280 | - } | ||
| 281 | - | ||
| 282 | - </style> | ||
| 283 | - | ||
| 284 | - <iron-ajax | ||
| 285 | - auto | ||
| 286 | - id="data_request" | ||
| 287 | - url={{dataUrl}} | ||
| 288 | - verbose="true" | ||
| 289 | - on-response="handleResponseData" | ||
| 290 | - debounce-duration="300"> | ||
| 291 | - </iron-ajax> | ||
| 292 | - | ||
| 293 | - <iron-ajax | ||
| 294 | - id="datales_list_request" | ||
| 295 | - auto | ||
| 296 | - url={{dataletsListUrl}} | ||
| 297 | - handle-as="json" | ||
| 298 | - on-response="handleResponseDatalets" | ||
| 299 | - debounce-duration="300"> | ||
| 300 | - </iron-ajax> | ||
| 301 | - | ||
| 302 | - <iron-ajax | ||
| 303 | - id="selected_datalet_request" | ||
| 304 | - url={{deepUrl}} | ||
| 305 | - verbose="true" | ||
| 306 | - on-response="handleSelectedDatalet" | ||
| 307 | - debounce-duration="300"> | ||
| 308 | - </iron-ajax> | ||
| 309 | - | ||
| 310 | - <content> | ||
| 311 | - <div class="toolbar"> | ||
| 312 | - <paper-icon-button id="PrevButton" class="toolbar_button x-scope" on-click="_onPrevClick" icon="chevron-left" alt="arrow-back" title="arrow-back"></paper-icon-button> | ||
| 313 | - <div class="fancy toolbar-center"> | ||
| 314 | - <div class="fancy-content"> | ||
| 315 | - <div id="toolbar_number" class="avatar">1</div> | ||
| 316 | - <div class="title"> | ||
| 317 | - <div id="toolbar_title" class="big">Dataset source</div> | ||
| 318 | - <div id="toolbar_description" class="small">Copy and paste/drag and drop in the textarea the url of datasource</div> | ||
| 319 | - </div> | ||
| 320 | - </div> | ||
| 321 | - </div> | ||
| 322 | - <paper-icon-button id="NextButton" class="toolbar_button x-scope" on-click="_onNextClick" icon="chevron-right" alt="arrow-forward" title="arrow-forward"></paper-icon-button> | ||
| 323 | - </div> | ||
| 324 | - | ||
| 325 | - <neon-animated-pages id="pages" class="flex" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]"> | ||
| 326 | - | ||
| 327 | - <neon-animatable> | ||
| 328 | - | ||
| 329 | - <div class="fancy area_container"> | ||
| 330 | - <paper-tabs selected="{{DatasourceTabSelected}}"> | ||
| 331 | - <paper-tab>Select data source</paper-tab> | ||
| 332 | - <paper-tab>Most popular</paper-tab> | ||
| 333 | - <paper-tab>Search</paper-tab> | ||
| 334 | - </paper-tabs> | ||
| 335 | - <iron-pages selected="{{DatasourceTabSelected}}"> | ||
| 336 | - <div> | ||
| 337 | - <div class="card-content"> | ||
| 338 | - <paper-textarea id="data_url" label="Dataset api data url" floatingLabel value="{{dataUrl}}" on-dragover="_handleDatasourceDragOver"></paper-textarea> | ||
| 339 | - </div> | ||
| 340 | - | ||
| 341 | - <div class="card-content"> | ||
| 342 | - <paper-dropdown-menu id="datasets-sources" label="Available datasets"> | ||
| 343 | - <paper-menu class="dropdown-content"> | ||
| 344 | - <template is="dom-repeat" items="{{datasets}}" as="dataset" index-as="index"> | ||
| 345 | - <paper-item id="{{index}}" on-tap="_datasourceSelected">{{dataset}}</paper-item> | ||
| 346 | - </template> | ||
| 347 | - </paper-menu> | ||
| 348 | - </paper-dropdown-menu> | ||
| 349 | - </div> | ||
| 350 | - | ||
| 351 | - </div> | ||
| 352 | - <div><img src="static/images/UnderConstruction.png" style="position: relative;top: 60%;left: 25%;"></div> | ||
| 353 | - <div><img src="static/images/UnderConstruction.png" style="position: relative;top: 60%;left: 25%;"></div> | ||
| 354 | - </iron-pages> | ||
| 355 | - </div> | ||
| 356 | - | ||
| 357 | - </neon-animatable> | ||
| 358 | - | ||
| 359 | - <neon-animatable> | ||
| 360 | - | ||
| 361 | - <div class="fancy"> | ||
| 362 | - <div class="fancy-content"> | ||
| 363 | - | ||
| 364 | - <div id="fields_placeholder" class="area_container"> | ||
| 365 | - <treeview-controllet id="fields_treeview"></treeview-controllet> | ||
| 366 | - </div> | ||
| 367 | - <div id="table_fields_container" class="area_container"> | ||
| 368 | - <div id="table_component_place_holder"></div> | ||
| 369 | - </div> | ||
| 370 | - </div> | ||
| 371 | - </div> | ||
| 372 | - | ||
| 373 | - </neon-animatable> | ||
| 374 | - | ||
| 375 | - <neon-animatable> | ||
| 376 | - | ||
| 377 | - <div class='fancy'> | ||
| 378 | - <div class="fancy-content"> | ||
| 379 | - <div id="visualization_slider_area" class="area_container"></div> | ||
| 380 | - | ||
| 381 | - <div id="datalet_area" class="area_container"> | ||
| 382 | - <div id="datalet_placeholder"></div> | ||
| 383 | - </div> | ||
| 384 | - | ||
| 385 | - <div id="fields_mapping_area" class="area_container"> | ||
| 386 | - | ||
| 387 | - <div id="selected_fields_main_container" class="field-mapping-card"> | ||
| 388 | - <div class="title"> | ||
| 389 | - <div class="medium">Selected fields</div> | ||
| 390 | - </div> | ||
| 391 | - <div id="selected_fields_container" class="area_container"></div> | ||
| 392 | - </div> | ||
| 393 | - | ||
| 394 | - <div id="idm_fields_main_container" class="field-mapping-card"> | ||
| 395 | - <div class="title"> | ||
| 396 | - <div class="medium">Datalet fields</div> | ||
| 397 | - </div> | ||
| 398 | - <div id="datalet_idm_fields_container" class="area_container"></div> | ||
| 399 | - </div> | ||
| 400 | - </div> | ||
| 401 | - | ||
| 402 | - <div id="visualization_customization_area"> | ||
| 403 | - <paper-icon-button id="finish_button" on-click="_onFinish" icon="add-circle" alt="Conforms the creation" title="finish"></paper-icon-button> | ||
| 404 | - </div> | ||
| 405 | - | ||
| 406 | - </div> | ||
| 407 | - </div> | ||
| 408 | - | ||
| 409 | - </neon-animatable> | ||
| 410 | - | ||
| 411 | - <!--<neon-animatable> | ||
| 412 | - | ||
| 413 | - <div class="fancy"> | ||
| 414 | - <div class="card-content area_container"> | ||
| 415 | - <div id="datalet_created_placehorder"></div> | ||
| 416 | - </div> | ||
| 417 | - <div class="card-content area_container"> | ||
| 418 | - <paper-icon-button id="finish_button" on-click="_onFinish" icon="add-circle-outline" alt="Conforms the creation" title="finish"></paper-icon-button> | ||
| 419 | - </div> | ||
| 420 | - </div> | ||
| 421 | - | ||
| 422 | - </neon-animatable>--> | ||
| 423 | - | ||
| 424 | - </neon-animated-pages> | ||
| 425 | - </content> | ||
| 426 | - </template> | ||
| 427 | - | ||
| 428 | - <script src="../shared_js/bootstrap-3.3.4-dist/js/bootstrap.min.js"></script> | ||
| 429 | - <script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script> | ||
| 430 | - <script src="../../../DEEPCLIENT/js/deepClient.js"></script> | ||
| 431 | - | ||
| 432 | - <script> | ||
| 433 | - | ||
| 434 | - var datasetsPrato = { | ||
| 435 | - names:[ | ||
| 436 | - 'Consuntivo entrate 2009', | ||
| 437 | - 'Consuntivo entrate 2010', | ||
| 438 | - 'Consuntivo entrate 2011', | ||
| 439 | - 'Consuntivo entrate 2012', | ||
| 440 | - 'Consuntivo entrate 2014' | ||
| 441 | - ], | ||
| 442 | - urls: [ | ||
| 443 | - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=07843fc3-07e1-4c66-9be4-fed43ca4a26f&limit=10000', | ||
| 444 | - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=48a4db73-d3d4-4639-bbc2-9c797d0e6cda&limit=10000', | ||
| 445 | - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=a14cc2fb-0c24-48d7-9370-834045797d89&limit=10000', | ||
| 446 | - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=fb32fcb6-5e44-4e52-b132-01c6540ddbee&limit=10000', | ||
| 447 | - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=0cb600fc-19ad-4aaf-9794-1e6ea851840a&limit=10000' | ||
| 448 | - ] | ||
| 449 | - } | ||
| 450 | - | ||
| 451 | - var datasetsGroeningen = { | ||
| 452 | - names:[ | ||
| 453 | - 'Vestigingen register gemeente Groningen', | ||
| 454 | - 'Woonruimte gemeente Groningen' | ||
| 455 | - ], | ||
| 456 | - urls: [ | ||
| 457 | - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=ba554c1f-02a7-4d76-b449-fb9daa1f8bfd&limit=10000', | ||
| 458 | - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=af7b3916-4347-469a-8354-3c2d559bd92f&limit=10000' | ||
| 459 | - ] | ||
| 460 | - } | ||
| 461 | - | ||
| 462 | - var datasetsDublin = { | ||
| 463 | - names:[ | ||
| 464 | - 'SDCC Traffic Cameras', | ||
| 465 | - 'Derelict Site Register', | ||
| 466 | - 'Dublin City Council Commencement Notices', | ||
| 467 | - 'Dublin City Council Planning Applications', | ||
| 468 | - 'Dun Laoghaire-Rathdown County Council Planning Application 2008-2014', | ||
| 469 | - 'Fingal Council Planning Applications for last 7 years', | ||
| 470 | - 'Planning Register', | ||
| 471 | - 'Fingal Development Plan 2011-2017 Record of Protected Structures' | ||
| 472 | - ], | ||
| 473 | - urls: [ | ||
| 474 | - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=73e02092-85a1-434e-85fe-0c9a43aa9a52&limit=10000', | ||
| 475 | - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=fcbee83e-3d3d-4303-a568-24dd33d02adc&limit=10000', | ||
| 476 | - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=ee00de68-f2e4-482f-a003-3c0561351075&limit=10000', | ||
| 477 | - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=2f4a9d44-b52f-4c8b-a5db-d8f4a676d81e&limit=10000', | ||
| 478 | - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=c479f061-9638-489d-ac55-0c68765548ff&limit=10000', | ||
| 479 | - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=d29a477a-4734-43ef-8002-048c8640d441&limit=10000', | ||
| 480 | - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=2b23f32d-e27e-4eef-af1e-27e05103df7d&limit=10000', | ||
| 481 | - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=5ea813bc-fdf9-4edb-b3b1-0142b593d5c6&limit=10000', | ||
| 482 | - ] | ||
| 483 | - } | ||
| 484 | - | ||
| 485 | - var AvailableDatasets = [datasetsPrato, datasetsGroeningen, datasetsDublin] | ||
| 486 | - | ||
| 487 | - | ||
| 488 | - Polymer({ | ||
| 489 | - | ||
| 490 | - is : 'data-sevc-controllet', | ||
| 491 | - | ||
| 492 | - listeners : { | ||
| 493 | - 'items-slider-controllet_item-selected' : '_dataletSelected', | ||
| 494 | - 'draggable-element-controllet_content-dragged' : '_fieldsMapped', | ||
| 495 | - 'treeview-controllet-fileds-selected' : '_fieldsSelected' | ||
| 496 | - }, | ||
| 497 | - | ||
| 498 | - properties : { | ||
| 499 | - | ||
| 500 | - entryAnimation : { | ||
| 501 | - type : String, | ||
| 502 | - value : "" | ||
| 503 | - }, | ||
| 504 | - | ||
| 505 | - exitAnimation : { | ||
| 506 | - type : String, | ||
| 507 | - value : "" | ||
| 508 | - }, | ||
| 509 | - | ||
| 510 | - selected : { | ||
| 511 | - type : Number, | ||
| 512 | - value : 0 | ||
| 513 | - }, | ||
| 514 | - | ||
| 515 | - /** | ||
| 516 | - * It represent the data url from CKAN api | ||
| 517 | - * | ||
| 518 | - * @attribute dataUrl | ||
| 519 | - * @type string | ||
| 520 | - * @default 'null' | ||
| 521 | - */ | ||
| 522 | - dataUrl : { | ||
| 523 | - type : String, | ||
| 524 | - value : "",/*"http://demo.ckan.org/api/action/datastore_search?resource_id=8324a4c9-66d6-47bf-a898-94237cc39b9f&limit=50",*/ | ||
| 525 | - observer : '_dataUrlChanged' | ||
| 526 | - }, | ||
| 527 | - /** | ||
| 528 | - * It represent the DEEP url to get information about the datalets | ||
| 529 | - * | ||
| 530 | - * @attribute deepUrl | ||
| 531 | - * @type string | ||
| 532 | - * @default 'null' | ||
| 533 | - */ | ||
| 534 | - deepUrl : { | ||
| 535 | - type : String, | ||
| 536 | - value : "" | ||
| 537 | - }, | ||
| 538 | - | ||
| 539 | - organization : { | ||
| 540 | - type : Number, | ||
| 541 | - value : 2 | ||
| 542 | - }, | ||
| 543 | - | ||
| 544 | - datalet_query : { | ||
| 545 | - type : String, | ||
| 546 | - value : "" | ||
| 547 | - }, | ||
| 548 | - | ||
| 549 | - datalets_list : { | ||
| 550 | - type : Array , | ||
| 551 | - value : [] | ||
| 552 | - }, | ||
| 553 | - | ||
| 554 | - selected_datalet : { | ||
| 555 | - type : String, | ||
| 556 | - value : "" | ||
| 557 | - }, | ||
| 558 | - | ||
| 559 | - selected_fields : { | ||
| 560 | - type : Array, | ||
| 561 | - value : [] | ||
| 562 | - }, | ||
| 563 | - | ||
| 564 | - DatasourceTabSelected : { | ||
| 565 | - type : Number, | ||
| 566 | - value : 0 | ||
| 567 | - }, | ||
| 568 | - | ||
| 569 | - datasets : | ||
| 570 | - { | ||
| 571 | - type : Array, | ||
| 572 | - value : AvailableDatasets[0].names | ||
| 573 | - }, | ||
| 574 | - | ||
| 575 | - datasets_urls : | ||
| 576 | - { | ||
| 577 | - type : Array, | ||
| 578 | - value :AvailableDatasets[0].urls | ||
| 579 | - } | ||
| 580 | - | ||
| 581 | - }, | ||
| 582 | - | ||
| 583 | - ready : function(){ | ||
| 584 | - | ||
| 585 | - this.datasets = AvailableDatasets[this.organization].names; | ||
| 586 | - this.datasets_urls = AvailableDatasets[this.organization].urls; | ||
| 587 | - | ||
| 588 | - $(this.$.fields_placeholder).perfectScrollbar(); | ||
| 589 | - $(this.$.selected_fields_main_container).perfectScrollbar(); | ||
| 590 | - $(this.$.idm_fields_main_container).perfectScrollbar(); | ||
| 591 | - $(this.$.table_fields_container).perfectScrollbar(); | ||
| 592 | - | ||
| 593 | - }, | ||
| 594 | - | ||
| 595 | - /** | ||
| 596 | - * Callback to parse the data requested when dataUrl change its value | ||
| 597 | - * | ||
| 598 | - * @method handleResponseData | ||
| 599 | - */ | ||
| 600 | - handleResponseData : function(e){ | ||
| 601 | - | ||
| 602 | - this.$.fields_treeview.init(e.detail.response); | ||
| 603 | - | ||
| 604 | - var table_params ={ | ||
| 605 | - component : "datatable-datalet", | ||
| 606 | - params :{ | ||
| 607 | - 'data-url' : this.dataUrl | ||
| 608 | - }, | ||
| 609 | - fields : [], | ||
| 610 | - placeHolder : (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) ? this.$.table_component_place_holder : this.$.table_component_place_holder[Object.keys(this.$.table_component_place_holder)[0]] | ||
| 611 | - }; | ||
| 612 | - | ||
| 613 | - ComponentService.deep_url = this.deepUrl; | ||
| 614 | - ComponentService.getComponent(table_params); | ||
| 615 | - | ||
| 616 | - }, | ||
| 617 | - | ||
| 618 | - /** | ||
| 619 | - * Callback to parse the components response object | ||
| 620 | - * | ||
| 621 | - * @method handleResponseDatalets | ||
| 622 | - */ | ||
| 623 | - handleResponseDatalets : function(e){ | ||
| 624 | - this.datalets_list = new Array(); | ||
| 625 | - for(var i=0;i < e.detail.response.length;i++){ | ||
| 626 | - var datalet_info = { name : e.detail.response[i].name , | ||
| 627 | - image : e.detail.response[i].url + e.detail.response[i].name + ".png" | ||
| 628 | - }; | ||
| 629 | - | ||
| 630 | - this.datalets_list.push(datalet_info); | ||
| 631 | - } | ||
| 632 | - | ||
| 633 | - /*var w = $(this.$.visualization_slider_area).width(); | ||
| 634 | - var pages = 2; | ||
| 635 | - var numItemsPerPage = 3;*/ | ||
| 636 | - | ||
| 637 | - this.$.visualization_slider_area.innerHTML = '<items-slider-controllet items=\'' + JSON.stringify(this.datalets_list) + '\'' + | ||
| 638 | - '\'></items-slider-controllet>'; | ||
| 639 | - }, | ||
| 640 | - | ||
| 641 | - handleSelectedDatalet : function(e){ | ||
| 642 | - | ||
| 643 | - var response = e.detail.response; | ||
| 644 | - //<draggable-element-controllet is-target="true" heading="Field 1" description="This fields is used for ..." number="1"></draggable-element-controllet> | ||
| 645 | - this.$.datalet_idm_fields_container.innerHTML = ""; | ||
| 646 | - for(var i =0; i < response.idm.inputs.input.length; i++){ | ||
| 647 | - var input = response.idm.inputs.input[i]; | ||
| 648 | - this.$.datalet_idm_fields_container.innerHTML += '<draggable-element-controllet is-target="true" id="' + input.name + '" heading="' + input.name + '" description="' + input.description + '" number="' + (i + 1) + '"></draggable-element-controllet><br>'; | ||
| 649 | - } | ||
| 650 | - | ||
| 651 | - if(response.idm.inputs.input.constructor == Object) { | ||
| 652 | - var input = response.idm.inputs.input; | ||
| 653 | - if(input.selection == "*") { | ||
| 654 | - var input_selected_fields = Polymer.dom(this.$.selected_fields_container).querySelectorAll('draggable-element-controllet'); | ||
| 655 | - for (var j = 0; j < input_selected_fields.length; j++) { | ||
| 656 | - this.$.datalet_idm_fields_container.innerHTML += '<draggable-element-controllet is-target="true" heading="Field ' + (j + 1) + '" description="' + input.description + '" number="' + (i + 1) + '"></draggable-element-controllet><br>'; | ||
| 657 | - } | ||
| 658 | - } | ||
| 659 | - } | ||
| 660 | - | ||
| 661 | - }, | ||
| 662 | - | ||
| 663 | - assignToolbar : function(){ | ||
| 664 | - this.$.toolbar_number.innerHTML = (this.selected + 1); | ||
| 665 | - switch(this.selected){ | ||
| 666 | - case 0: | ||
| 667 | - this.$.toolbar_title.innerHTML = "Dataset source"; | ||
| 668 | - this.$.toolbar_description.innerHTML = "Copy and paste/drag and drop in the textarea the url of datasource"; | ||
| 669 | - break; | ||
| 670 | - case 1: | ||
| 671 | - this.$.toolbar_title.innerHTML = "Data fields selection"; | ||
| 672 | - this.$.toolbar_description.innerHTML = "Select the fields you want to visualize"; | ||
| 673 | - break; | ||
| 674 | - case 2: | ||
| 675 | - this.$.toolbar_title.innerHTML = "Data mapping"; | ||
| 676 | - this.$.toolbar_description.innerHTML = "Select the visualization from the slider, drag and drop the selected fields in visualization parameter area, customize the visualization if you need"; | ||
| 677 | - break; | ||
| 678 | - case 3: | ||
| 679 | - this.$.toolbar_title.innerHTML = "Finish"; | ||
| 680 | - this.$.toolbar_description.innerHTML = "Confirms the creation of the datalet"; | ||
| 681 | - | ||
| 682 | - break; | ||
| 683 | - } | ||
| 684 | - }, | ||
| 685 | - | ||
| 686 | - _onPrevClick : function() { | ||
| 687 | - this.entryAnimation = 'slide-from-left-animation'; | ||
| 688 | - this.exitAnimation = 'slide-right-animation'; | ||
| 689 | - this.selected = this.selected === 0 ? 0 : (this.selected - 1); | ||
| 690 | - this.assignToolbar(); | ||
| 691 | - }, | ||
| 692 | - | ||
| 693 | - _onNextClick : function() { | ||
| 694 | - this.entryAnimation = 'slide-from-right-animation'; | ||
| 695 | - this.exitAnimation = 'slide-left-animation'; | ||
| 696 | - this.selected = this.selected === 2 ? 2 : (this.selected + 1); | ||
| 697 | - this.assignToolbar(); | ||
| 698 | - }, | ||
| 699 | - | ||
| 700 | - _datasourceSelected : function(e){ | ||
| 701 | - if(Object.getPrototypeOf(e) !== CustomEvent.prototype) { | ||
| 702 | - e = e[Object.keys(e)[0]]; | ||
| 703 | - } | ||
| 704 | - | ||
| 705 | - this.$.data_url.value = this.datasets_urls[parseInt(e.target.id)]; | ||
| 706 | - }, | ||
| 707 | - | ||
| 708 | - _dataUrlChanged : function(newValue, oldValue){ | ||
| 709 | - this.$.data_request.generateRequest(); | ||
| 710 | - }, | ||
| 711 | - | ||
| 712 | - _dataletSelected : function(e){ | ||
| 713 | - this.selected_datalet = e.detail.datalet; | ||
| 714 | - this.$.selected_datalet_request.url = this.deepUrl + e.detail.datalet; | ||
| 715 | - this.$.selected_datalet_request.generateRequest(); | ||
| 716 | - | ||
| 717 | - }, | ||
| 718 | - | ||
| 719 | - _fieldsSelected : function(e){ | ||
| 720 | - | ||
| 721 | - this.$.selected_fields_container.innerHTML = ""; | ||
| 722 | - for(var i=0;i<e.detail.fields.length;i++) { | ||
| 723 | - this.$.selected_fields_container.innerHTML += '<draggable-element-controllet identifier="' + e.detail.fields[i] + | ||
| 724 | - '" label="' + e.detail.fields[i].split(",")[e.detail.fields[i].split(",").length -1] + | ||
| 725 | - '"></draggable-element-controllet><br>'; | ||
| 726 | - } | ||
| 727 | - | ||
| 728 | - var place_holder = (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) ? this.$.table_component_place_holder : this.$.table_component_place_holder[Object.keys(this.$.table_component_place_holder)[0]]; | ||
| 729 | - | ||
| 730 | - var table_params ={ | ||
| 731 | - component : "datatable-datalet", | ||
| 732 | - params :{ | ||
| 733 | - 'data-url' : this.dataUrl | ||
| 734 | - }, | ||
| 735 | - fields : e.detail.fields, | ||
| 736 | - placeHolder : this.$.table_component_place_holder | ||
| 737 | - }; | ||
| 738 | - | ||
| 739 | - ComponentService.deep_url = this.deepUrl; | ||
| 740 | - ComponentService.getComponent(table_params); | ||
| 741 | - | ||
| 742 | - }, | ||
| 743 | - | ||
| 744 | - _fieldsMapped : function(e){ | ||
| 745 | - | ||
| 746 | - var input_mapped_fields = Polymer.dom(this.$.datalet_idm_fields_container).querySelectorAll('draggable-element-controllet[is-target=true]'); | ||
| 747 | - this.selected_fields = Array(); | ||
| 748 | - | ||
| 749 | - for (var i = 0; i < input_mapped_fields.length; i++) { | ||
| 750 | - if (input_mapped_fields[i].value != "") { | ||
| 751 | - this.selected_fields.push(input_mapped_fields[i].value); | ||
| 752 | - } | ||
| 753 | - } | ||
| 754 | - | ||
| 755 | - var datalet_params ={ | ||
| 756 | - component : this.selected_datalet, | ||
| 757 | - params :{ | ||
| 758 | - 'data-url' : this.dataUrl | ||
| 759 | - }, | ||
| 760 | - fields : this.selected_fields, | ||
| 761 | - placeHolder : this.$.datalet_placeholder | ||
| 762 | - }; | ||
| 763 | - | ||
| 764 | - var datalet_finish_params ={ | ||
| 765 | - component : this.selected_datalet, | ||
| 766 | - params :{ | ||
| 767 | - 'data-url' : this.dataUrl | ||
| 768 | - }, | ||
| 769 | - fields : this.selected_fields, | ||
| 770 | - placeHolder : this.$.datalet_created_placehorder | ||
| 771 | - }; | ||
| 772 | - | ||
| 773 | - ComponentService.deep_url = this.deepUrl; | ||
| 774 | - | ||
| 775 | - ComponentService.getComponent(datalet_params); | ||
| 776 | - ComponentService.getComponent(datalet_finish_params); | ||
| 777 | - | ||
| 778 | - }, | ||
| 779 | - | ||
| 780 | - _handleDatasourceDragOver : function(e){ | ||
| 781 | - this.$.data_url.value = ""; | ||
| 782 | - }, | ||
| 783 | - | ||
| 784 | - _onFinish : function(e){ | ||
| 785 | - | ||
| 786 | - var data = { | ||
| 787 | - dataUrl : this.dataUrl, | ||
| 788 | - fields : this.selected_fields, | ||
| 789 | - datalet : this.selected_datalet | ||
| 790 | - } | ||
| 791 | - | ||
| 792 | - this.fire('data-sevc-controllet.dataletCreated', {data : data}); | ||
| 793 | - | ||
| 794 | - } | ||
| 795 | - | ||
| 796 | - }); | ||
| 797 | - | ||
| 798 | - </script> | ||
| 799 | - | ||
| 800 | -</dom-module> | ||
| 801 | \ No newline at end of file | 0 | \ No newline at end of file |
controllets/data-sevc-controllet/data-sevc-controllet__.html deleted
| 1 | -<link rel="import" href="../../bower_components/polymer/polymer.html"> | ||
| 2 | -<link rel="import" href="../../bower_components/paper-styles/color.html"> | ||
| 3 | - | ||
| 4 | -<link rel="import" href="../../bower_components/neon-animation/neon-animated-pages.html"> | ||
| 5 | -<link rel="import" href="../../bower_components/neon-animation/neon-animatable.html"> | ||
| 6 | -<link rel="import" href="../../bower_components/neon-animation/neon-animations.html"> | ||
| 7 | - | ||
| 8 | -<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html"> | ||
| 9 | -<link rel="import" href="../../bower_components/paper-input/paper-input.html"> | ||
| 10 | -<link rel="import" href="../../bower_components/paper-input/paper-textarea.html"> | ||
| 11 | -<link rel="import" href="../../bower_components/paper-button/paper-button.html"> | ||
| 12 | -<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html"> | ||
| 13 | -<link rel="import" href="../../bower_components/paper-tabs/paper-tab.html"> | ||
| 14 | -<link rel="import" href="../../bower_components/iron-pages/iron-pages.html"> | ||
| 15 | -<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html"> | ||
| 16 | -<link rel="import" href="../../bower_components/paper-menu/paper-menu.html"> | ||
| 17 | -<link rel="import" href="../../bower_components/paper-item/paper-item.html"> | ||
| 18 | -<link rel="import" href="../../bower_components/paper-toast/paper-toast.html"> | ||
| 19 | - | ||
| 20 | -<link rel="import" href="../items-slider-controllet/items-slider-controllet.html"> | ||
| 21 | -<link rel="import" href="../draggable-element-controllet/draggable-element-controllet.html"> | ||
| 22 | -<link rel="import" href="../treeview-controllet/treeview-controllet.html"> | ||
| 23 | - | ||
| 24 | - | ||
| 25 | -<dom-module id="data-sevc-controllet"> | ||
| 26 | - <template> | ||
| 27 | - <link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css"> | ||
| 28 | - | ||
| 29 | - <style is="custom-style"> | ||
| 30 | - body { | ||
| 31 | - font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial; | ||
| 32 | - font-size: 1em; | ||
| 33 | - margin: 0; | ||
| 34 | - padding: 1.5em; | ||
| 35 | - -webkit-tap-highlight-color: rgba(0,0,0,0); | ||
| 36 | - -webkit-touch-callout: none; | ||
| 37 | - overflow: hidden; | ||
| 38 | - } | ||
| 39 | - | ||
| 40 | - #pages{ | ||
| 41 | - } | ||
| 42 | - | ||
| 43 | - .flexchild { | ||
| 44 | - @apply(--layout-flex); | ||
| 45 | - } | ||
| 46 | - .flex2child { | ||
| 47 | - @apply(--layout-flex-2); | ||
| 48 | - } | ||
| 49 | - .flex3child { | ||
| 50 | - @apply(--layout-flex-3); | ||
| 51 | - } | ||
| 52 | - | ||
| 53 | - .fields-card-content { | ||
| 54 | - padding-left: 1.5em; | ||
| 55 | - } | ||
| 56 | - | ||
| 57 | - .fancy .fields-title { | ||
| 58 | - /*position: absolute; | ||
| 59 | - top: 30px; | ||
| 60 | - left: 100px; | ||
| 61 | - display: inline-block;*/ | ||
| 62 | - /*color: var(--paper-indigo-500);*/ | ||
| 63 | - } | ||
| 64 | - | ||
| 65 | - .fancy-content { | ||
| 66 | - /*padding: 25px;*/ | ||
| 67 | - } | ||
| 68 | - | ||
| 69 | - .avatar { | ||
| 70 | - display: inline-block; | ||
| 71 | - height: 2em; | ||
| 72 | - width: 2em; | ||
| 73 | - border-radius: 50%; | ||
| 74 | - /*background: var(--paper-pink-500);*/ | ||
| 75 | - background: var(--paper-blue-500); | ||
| 76 | - color: white; | ||
| 77 | - line-height: 2em; | ||
| 78 | - font-size: 1.87em; | ||
| 79 | - text-align: center; | ||
| 80 | - } | ||
| 81 | - | ||
| 82 | - | ||
| 83 | - .title | ||
| 84 | - { | ||
| 85 | - position: relative; | ||
| 86 | - top: 0.60vh; | ||
| 87 | - margin-left: 20px; | ||
| 88 | - } | ||
| 89 | - | ||
| 90 | - .fancy { | ||
| 91 | - /*position: absolute; | ||
| 92 | - top: 30px; | ||
| 93 | - left: 100px;*/ | ||
| 94 | - display: inline-block; | ||
| 95 | - position: relative; | ||
| 96 | - top: .75em; | ||
| 97 | - left: .625em; | ||
| 98 | - color: var(--paper-indigo-500); | ||
| 99 | - } | ||
| 100 | - | ||
| 101 | - .big { | ||
| 102 | - font-size: 1.37em; | ||
| 103 | - color: var(--google-grey-500); | ||
| 104 | - } | ||
| 105 | - | ||
| 106 | - .medium { | ||
| 107 | - font-size: 1em; | ||
| 108 | - padding-bottom: 0.5em; | ||
| 109 | - color : #000000; | ||
| 110 | - font-weight: bold; | ||
| 111 | - } | ||
| 112 | - | ||
| 113 | - .small { | ||
| 114 | - font-size: 0.8em; | ||
| 115 | - padding-top: 10px; | ||
| 116 | - color: var(--paper-blue-500); | ||
| 117 | - font-weight: bold; | ||
| 118 | - } | ||
| 119 | - | ||
| 120 | - paper-input { | ||
| 121 | - width: 80%; | ||
| 122 | - } | ||
| 123 | - | ||
| 124 | - paper-dropdown-menu { | ||
| 125 | - text-align: left; | ||
| 126 | - margin: auto; | ||
| 127 | - width: 100%; | ||
| 128 | - } | ||
| 129 | - | ||
| 130 | - :host ::content paper-menu-button{ | ||
| 131 | - display: block; | ||
| 132 | - width: 100%; | ||
| 133 | - } | ||
| 134 | - | ||
| 135 | - #visualization_slider_area{ | ||
| 136 | - position:relative; | ||
| 137 | - float:left; | ||
| 138 | - height: 22vh; | ||
| 139 | - /*width: 50%;*/ | ||
| 140 | - min-width: 670px; | ||
| 141 | - min-height: 180px; | ||
| 142 | - } | ||
| 143 | - | ||
| 144 | - #datalet_area{ | ||
| 145 | - /*position:relative; | ||
| 146 | - height: 30em; | ||
| 147 | - width: 46%; | ||
| 148 | - min-height: 500px; | ||
| 149 | - min-width: 600px; | ||
| 150 | - float: right;*/ | ||
| 151 | - } | ||
| 152 | - | ||
| 153 | - #fields_mapping_area{ | ||
| 154 | - position:relative; | ||
| 155 | - height: auto;/*70%;*/ | ||
| 156 | - /*width: 50%;*/ | ||
| 157 | - float:left; | ||
| 158 | - min-width: 670px; | ||
| 159 | - } | ||
| 160 | - | ||
| 161 | - #visualization_customization_area{ | ||
| 162 | - position:relative; | ||
| 163 | - /*height:auto;*/ | ||
| 164 | - width: 46%; | ||
| 165 | - float:right; | ||
| 166 | - background-color: white; | ||
| 167 | - } | ||
| 168 | - | ||
| 169 | - .field-mapping-card{ | ||
| 170 | - width: 50%; | ||
| 171 | - /*height: 50vh;*/ | ||
| 172 | - overflow: auto; | ||
| 173 | - position: relative; | ||
| 174 | - float: left; | ||
| 175 | - } | ||
| 176 | - | ||
| 177 | - .horizontal-section-container .vertical-section { | ||
| 178 | - /*max-width: 130px;*/ | ||
| 179 | - diplay:block; | ||
| 180 | - float: left; | ||
| 181 | - } | ||
| 182 | - | ||
| 183 | - | ||
| 184 | - .colorful { | ||
| 185 | - background: #4285f4; | ||
| 186 | - color: #fff; | ||
| 187 | - } | ||
| 188 | - | ||
| 189 | - .toolbar_button{ | ||
| 190 | - --iron-icon-height: 32px; | ||
| 191 | - --iron-icon-width: 32px; | ||
| 192 | - } | ||
| 193 | - | ||
| 194 | - /*paper-iron-button.toolbar_button{ | ||
| 195 | - height: 34px; | ||
| 196 | - width: 34px; | ||
| 197 | - }*/ | ||
| 198 | - | ||
| 199 | - .toolbar-center{ | ||
| 200 | - display: inline-block; | ||
| 201 | - position: relative; | ||
| 202 | - float: left; | ||
| 203 | - width: 90%; | ||
| 204 | - } | ||
| 205 | - | ||
| 206 | - .toolbar{ | ||
| 207 | - width: 100%; | ||
| 208 | - height : 8em; | ||
| 209 | - vertical-align: middle; | ||
| 210 | - min-width: 975px; | ||
| 211 | - } | ||
| 212 | - | ||
| 213 | - | ||
| 214 | - | ||
| 215 | - #datalet_created_idm_fields_container{ | ||
| 216 | - position: relative; | ||
| 217 | - float: left; | ||
| 218 | - width: 100%; | ||
| 219 | - height: 50vh; | ||
| 220 | - overflow: auto; | ||
| 221 | - } | ||
| 222 | - | ||
| 223 | - #finish{ | ||
| 224 | - position: relative; | ||
| 225 | - float: left; | ||
| 226 | - width: 100%; | ||
| 227 | - height : 20%; | ||
| 228 | - align-content: center; | ||
| 229 | - } | ||
| 230 | - | ||
| 231 | - #datalet_created_placehorder { | ||
| 232 | - width: 100%; | ||
| 233 | - } | ||
| 234 | - | ||
| 235 | - #finish_button{ | ||
| 236 | - float: left; | ||
| 237 | - margin-top: 2em; | ||
| 238 | - --iron-icon-height: 64px; | ||
| 239 | - --iron-icon-width: 64px; | ||
| 240 | - color: var(--paper-blue-500); | ||
| 241 | - } | ||
| 242 | - | ||
| 243 | - #finish_button:hover{ | ||
| 244 | - --iron-icon : "add-circle-outline" | ||
| 245 | - } | ||
| 246 | - | ||
| 247 | - /* #finish_button iron-icon:hover{ | ||
| 248 | - icon : "add-circle"; | ||
| 249 | - } | ||
| 250 | - | ||
| 251 | - #finish_button iron-icon{ | ||
| 252 | - height: 4vh; | ||
| 253 | - width: 4vw; | ||
| 254 | - }*/ | ||
| 255 | - | ||
| 256 | - .area_container{ | ||
| 257 | - margin : 0.8em; | ||
| 258 | - padding : 0.8em; | ||
| 259 | - border-width: 1em; | ||
| 260 | - border-radius: 0.125rem; | ||
| 261 | - box-shadow: 0.125em 0.125em 0.1125em 0.125em rgba(0, 0, 0, 0.25); | ||
| 262 | - } | ||
| 263 | - | ||
| 264 | - #fields_placeholder{ | ||
| 265 | - width: 40%; | ||
| 266 | - height: 50vh; | ||
| 267 | - position: relative; | ||
| 268 | - float: left; | ||
| 269 | - overflow: auto; | ||
| 270 | - } | ||
| 271 | - | ||
| 272 | - #table_fields_container{ | ||
| 273 | - height: 50vh; | ||
| 274 | - width: 55%; | ||
| 275 | - /*max-width: 100vw; | ||
| 276 | - max-height: 50vh;*/ | ||
| 277 | - position: relative; | ||
| 278 | - float: left; | ||
| 279 | - overflow: auto; | ||
| 280 | - } | ||
| 281 | - | ||
| 282 | - paper-tabs, paper-toolbar { | ||
| 283 | - background-color: var(--paper-blue-500); | ||
| 284 | - color: #ffffff; | ||
| 285 | - box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2); | ||
| 286 | - } | ||
| 287 | - | ||
| 288 | - paper-toolbar paper-tabs { | ||
| 289 | - box-shadow: none; | ||
| 290 | - --paper-tabs-selection-bar-color : var(--google-gray-500); | ||
| 291 | - } | ||
| 292 | - | ||
| 293 | - paper-tabs[noink][no-bar] paper-tab.iron-selected { | ||
| 294 | - background-color: var(--google-gray-500); | ||
| 295 | - } | ||
| 296 | - | ||
| 297 | - paper-tabs[align-bottom] { | ||
| 298 | - box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.15); | ||
| 299 | - } | ||
| 300 | - | ||
| 301 | - </style> | ||
| 302 | - | ||
| 303 | - <iron-ajax | ||
| 304 | - auto | ||
| 305 | - id="data_request" | ||
| 306 | - url={{dataUrl}} | ||
| 307 | - verbose="true" | ||
| 308 | - on-response="handleResponseData" | ||
| 309 | - debounce-duration="300"> | ||
| 310 | - </iron-ajax> | ||
| 311 | - | ||
| 312 | - <iron-ajax | ||
| 313 | - id="datales_list_request" | ||
| 314 | - auto | ||
| 315 | - url={{dataletsListUrl}} | ||
| 316 | - handle-as="json" | ||
| 317 | - on-response="handleResponseDatalets" | ||
| 318 | - debounce-duration="300"> | ||
| 319 | - </iron-ajax> | ||
| 320 | - | ||
| 321 | - <iron-ajax | ||
| 322 | - id="selected_datalet_request" | ||
| 323 | - url={{deepUrl}} | ||
| 324 | - verbose="true" | ||
| 325 | - on-response="handleSelectedDatalet" | ||
| 326 | - debounce-duration="300"> | ||
| 327 | - </iron-ajax> | ||
| 328 | - | ||
| 329 | - <content> | ||
| 330 | - | ||
| 331 | - <neon-animated-pages id="pages" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]"> | ||
| 332 | - | ||
| 333 | - <neon-animatable> | ||
| 334 | - | ||
| 335 | - <div class="vertical justified layout"> | ||
| 336 | - | ||
| 337 | - <div class="horizontal layout"> | ||
| 338 | - <div class="avatar" style="margin-left:15px">1</div> | ||
| 339 | - <div class="title flex"> | ||
| 340 | - <div id="toolbar_title" class="big">Dataset source</div> | ||
| 341 | - <div id="toolbar_description" class="small">Copy and paste/drag and drop in the textarea the url of datasource</div> | ||
| 342 | - </div> | ||
| 343 | - <paper-icon-button id="NextButton" class="toolbar_button" on-click="_onNextClick" icon="chevron-right" alt="arrow-forward" title="arrow-forward"></paper-icon-button> | ||
| 344 | - </div> | ||
| 345 | - | ||
| 346 | - <div class="area_container"> | ||
| 347 | - <paper-tabs selected="{{DatasourceTabSelected}}"> | ||
| 348 | - <paper-tab>Select data source</paper-tab> | ||
| 349 | - <paper-tab>Most popular</paper-tab> | ||
| 350 | - <paper-tab>Search</paper-tab> | ||
| 351 | - </paper-tabs> | ||
| 352 | - <iron-pages selected="{{DatasourceTabSelected}}"> | ||
| 353 | - <div> | ||
| 354 | - <div class="card-content"> | ||
| 355 | - <paper-textarea id="data_url" label="Dataset api data url" floatingLabel value="{{dataUrl}}" on-dragover="_handleDatasourceDragOver"></paper-textarea> | ||
| 356 | - </div> | ||
| 357 | - | ||
| 358 | - <div class="card-content"> | ||
| 359 | - <paper-dropdown-menu id="datasets-sources" label="Available datasets"> | ||
| 360 | - <paper-menu class="dropdown-content"> | ||
| 361 | - <template is="dom-repeat" items="{{datasets}}" as="dataset" index-as="index"> | ||
| 362 | - <paper-item id="{{index}}" on-tap="_datasourceSelected">{{dataset}}</paper-item> | ||
| 363 | - </template> | ||
| 364 | - </paper-menu> | ||
| 365 | - </paper-dropdown-menu> | ||
| 366 | - </div> | ||
| 367 | - | ||
| 368 | - </div> | ||
| 369 | - <div><img src="static/images/UnderConstruction.png" style="position: relative;top: 60%;left: 25%;"></div> | ||
| 370 | - <div><img src="static/images/UnderConstruction.png" style="position: relative;top: 60%;left: 25%;"></div> | ||
| 371 | - </iron-pages> | ||
| 372 | - </div> | ||
| 373 | - | ||
| 374 | - </div> | ||
| 375 | - | ||
| 376 | - </neon-animatable> | ||
| 377 | - | ||
| 378 | - <neon-animatable> | ||
| 379 | - | ||
| 380 | - <div class="vertical justified layout"> | ||
| 381 | - | ||
| 382 | - <div class="horizontal layout"> | ||
| 383 | - <paper-icon-button id="PrevButton" class="toolbar_button x-scope" on-click="_onPrevClick" icon="chevron-left" alt="arrow-back" title="arrow-back"></paper-icon-button> | ||
| 384 | - <div class="avatar">2</div> | ||
| 385 | - <div class="title flex"> | ||
| 386 | - <div id="toolbar_title" class="big">Dataset source</div> | ||
| 387 | - <div id="toolbar_description" class="small">Copy and paste/drag and drop in the textarea the url of datasource</div> | ||
| 388 | - </div> | ||
| 389 | - <paper-icon-button id="NextButton" class="toolbar_button" on-click="_onNextClick" icon="chevron-right" alt="arrow-forward" title="arrow-forward"></paper-icon-button> | ||
| 390 | - </div> | ||
| 391 | - | ||
| 392 | - <div class="horizontal layout"> | ||
| 393 | - | ||
| 394 | - <div id="fields_placeholder" class="area_container flexchild" style="min-width:300px"> | ||
| 395 | - <treeview-controllet id="fields_treeview"></treeview-controllet> | ||
| 396 | - </div> | ||
| 397 | - | ||
| 398 | - <div id="table_fields_container" class="area_container flex2child"> | ||
| 399 | - <div id="table_component_place_holder"></div> | ||
| 400 | - </div> | ||
| 401 | - | ||
| 402 | - </div> | ||
| 403 | - | ||
| 404 | - </div> | ||
| 405 | - | ||
| 406 | - </neon-animatable> | ||
| 407 | - | ||
| 408 | - <neon-animatable> | ||
| 409 | - | ||
| 410 | - <div class="vertical justified layout"> | ||
| 411 | - | ||
| 412 | - <div class="horizontal layout"> | ||
| 413 | - <paper-icon-button id="PrevButton" class="toolbar_button x-scope" on-click="_onPrevClick" icon="chevron-left" alt="arrow-back" title="arrow-back"></paper-icon-button> | ||
| 414 | - <div class="avatar">3</div> | ||
| 415 | - <div class="title flex"> | ||
| 416 | - <div id="toolbar_title" class="big">Data mapping</div> | ||
| 417 | - <div id="toolbar_description" class="small">Select the visualization from the slider, drag and drop the selected fields in visualization parameter area, customize the visualization if you need</div> | ||
| 418 | - </div> | ||
| 419 | - </div> | ||
| 420 | - | ||
| 421 | - | ||
| 422 | - <div class="horizontal layout"> | ||
| 423 | - | ||
| 424 | - <div class="flex"> | ||
| 425 | - <!-- | ||
| 426 | - <paper-material style="margin:10px 10px 10px 0">CONTENT 1</paper-material> | ||
| 427 | - <paper-material style="margin:10px 10px 10px 0">CONTENT 2</paper-material> | ||
| 428 | - --> | ||
| 429 | - <div id="visualization_slider_area" class="area_container"></div> | ||
| 430 | - <div id="fields_mapping_area" class="area_container"> | ||
| 431 | - | ||
| 432 | - <div id="selected_fields_main_container" class="field-mapping-card"> | ||
| 433 | - <div class="title"> | ||
| 434 | - <div class="medium">Selected fields</div> | ||
| 435 | - </div> | ||
| 436 | - <div id="selected_fields_container" class="area_container"></div> | ||
| 437 | - </div> | ||
| 438 | - | ||
| 439 | - <div id="idm_fields_main_container" class="field-mapping-card"> | ||
| 440 | - <div class="title"> | ||
| 441 | - <div class="medium">Datalet fields</div> | ||
| 442 | - </div> | ||
| 443 | - <div id="datalet_idm_fields_container" class="area_container"></div> | ||
| 444 | - </div> | ||
| 445 | - </div> | ||
| 446 | - </div> | ||
| 447 | - | ||
| 448 | - <div class="flex"> | ||
| 449 | - <!--<paper-material style="margin:10px 10px 10px 0">CONTENT 3</paper-material>--> | ||
| 450 | - <div id="datalet_placeholder"></div> | ||
| 451 | - <paper-icon-button id="finish_button" on-click="_onFinish" icon="add-circle" alt="Conforms the creation" title="finish"></paper-icon-button> | ||
| 452 | - </div> | ||
| 453 | - | ||
| 454 | - </div> | ||
| 455 | - | ||
| 456 | - </div> | ||
| 457 | - | ||
| 458 | - </neon-animatable> | ||
| 459 | - | ||
| 460 | - </neon-animated-pages> | ||
| 461 | - | ||
| 462 | - <paper-toast id="message" text=""></paper-toast> | ||
| 463 | - | ||
| 464 | - </content> | ||
| 465 | - </template> | ||
| 466 | - | ||
| 467 | - <script src="../shared_js/bootstrap-3.3.4-dist/js/bootstrap.min.js"></script> | ||
| 468 | - <script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script> | ||
| 469 | - <script src="../../../DEEPCLIENT/js/deepClient.js"></script> | ||
| 470 | - | ||
| 471 | - <script> | ||
| 472 | - | ||
| 473 | - var datasetsPrato = { | ||
| 474 | - names:[ | ||
| 475 | - 'Consuntivo entrate 2009', | ||
| 476 | - 'Consuntivo entrate 2010', | ||
| 477 | - 'Consuntivo entrate 2011', | ||
| 478 | - 'Consuntivo entrate 2012', | ||
| 479 | - 'Consuntivo entrate 2014' | ||
| 480 | - ], | ||
| 481 | - urls: [ | ||
| 482 | - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=07843fc3-07e1-4c66-9be4-fed43ca4a26f&limit=10000', | ||
| 483 | - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=48a4db73-d3d4-4639-bbc2-9c797d0e6cda&limit=10000', | ||
| 484 | - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=a14cc2fb-0c24-48d7-9370-834045797d89&limit=10000', | ||
| 485 | - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=fb32fcb6-5e44-4e52-b132-01c6540ddbee&limit=10000', | ||
| 486 | - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=0cb600fc-19ad-4aaf-9794-1e6ea851840a&limit=10000' | ||
| 487 | - ] | ||
| 488 | - } | ||
| 489 | - | ||
| 490 | - var datasetsGroeningen = { | ||
| 491 | - names:[ | ||
| 492 | - 'Vestigingen register gemeente Groningen', | ||
| 493 | - 'Woonruimte gemeente Groningen' | ||
| 494 | - ], | ||
| 495 | - urls: [ | ||
| 496 | - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=ba554c1f-02a7-4d76-b449-fb9daa1f8bfd&limit=10000', | ||
| 497 | - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=af7b3916-4347-469a-8354-3c2d559bd92f&limit=10000' | ||
| 498 | - ] | ||
| 499 | - } | ||
| 500 | - | ||
| 501 | - var datasetsDublin = { | ||
| 502 | - names:[ | ||
| 503 | - 'SDCC Traffic Cameras', | ||
| 504 | - 'Derelict Site Register', | ||
| 505 | - 'Dublin City Council Commencement Notices', | ||
| 506 | - 'Dublin City Council Planning Applications', | ||
| 507 | - 'Dun Laoghaire-Rathdown County Council Planning Application 2008-2014', | ||
| 508 | - 'Fingal Council Planning Applications for last 7 years', | ||
| 509 | - 'Planning Register', | ||
| 510 | - 'Fingal Development Plan 2011-2017 Record of Protected Structures' | ||
| 511 | - ], | ||
| 512 | - urls: [ | ||
| 513 | - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=73e02092-85a1-434e-85fe-0c9a43aa9a52&limit=10000', | ||
| 514 | - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=fcbee83e-3d3d-4303-a568-24dd33d02adc&limit=10000', | ||
| 515 | - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=ee00de68-f2e4-482f-a003-3c0561351075&limit=10000', | ||
| 516 | - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=2f4a9d44-b52f-4c8b-a5db-d8f4a676d81e&limit=10000', | ||
| 517 | - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=c479f061-9638-489d-ac55-0c68765548ff&limit=10000', | ||
| 518 | - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=d29a477a-4734-43ef-8002-048c8640d441&limit=10000', | ||
| 519 | - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=2b23f32d-e27e-4eef-af1e-27e05103df7d&limit=10000', | ||
| 520 | - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=5ea813bc-fdf9-4edb-b3b1-0142b593d5c6&limit=10000', | ||
| 521 | - ] | ||
| 522 | - } | ||
| 523 | - | ||
| 524 | - var AvailableDatasets = [datasetsPrato, datasetsGroeningen, datasetsDublin] | ||
| 525 | - | ||
| 526 | - | ||
| 527 | - Polymer({ | ||
| 528 | - | ||
| 529 | - is : 'data-sevc-controllet', | ||
| 530 | - | ||
| 531 | - listeners : { | ||
| 532 | - 'items-slider-controllet_item-selected' : '_dataletSelected', | ||
| 533 | - 'draggable-element-controllet_content-dragged' : '_fieldsMapped', | ||
| 534 | - 'treeview-controllet-fileds-selected' : '_fieldsSelected' | ||
| 535 | - }, | ||
| 536 | - | ||
| 537 | - properties : { | ||
| 538 | - | ||
| 539 | - entryAnimation : { | ||
| 540 | - type : String, | ||
| 541 | - value : "" | ||
| 542 | - }, | ||
| 543 | - | ||
| 544 | - exitAnimation : { | ||
| 545 | - type : String, | ||
| 546 | - value : "" | ||
| 547 | - }, | ||
| 548 | - | ||
| 549 | - selected : { | ||
| 550 | - type : Number, | ||
| 551 | - value : 0 | ||
| 552 | - }, | ||
| 553 | - | ||
| 554 | - /** | ||
| 555 | - * It represent the data url from CKAN api | ||
| 556 | - * | ||
| 557 | - * @attribute dataUrl | ||
| 558 | - * @type string | ||
| 559 | - * @default 'null' | ||
| 560 | - */ | ||
| 561 | - dataUrl : { | ||
| 562 | - type : String, | ||
| 563 | - value : "",/*"http://demo.ckan.org/api/action/datastore_search?resource_id=8324a4c9-66d6-47bf-a898-94237cc39b9f&limit=50",*/ | ||
| 564 | - observer : '_dataUrlChanged' | ||
| 565 | - }, | ||
| 566 | - /** | ||
| 567 | - * It represent the DEEP url to get information about the datalets | ||
| 568 | - * | ||
| 569 | - * @attribute deepUrl | ||
| 570 | - * @type string | ||
| 571 | - * @default 'null' | ||
| 572 | - */ | ||
| 573 | - deepUrl : { | ||
| 574 | - type : String, | ||
| 575 | - value : "" | ||
| 576 | - }, | ||
| 577 | - | ||
| 578 | - organization : { | ||
| 579 | - type : Number, | ||
| 580 | - value : 2 | ||
| 581 | - }, | ||
| 582 | - | ||
| 583 | - datalet_query : { | ||
| 584 | - type : String, | ||
| 585 | - value : "" | ||
| 586 | - }, | ||
| 587 | - | ||
| 588 | - datalets_list : { | ||
| 589 | - type : Array , | ||
| 590 | - value : [] | ||
| 591 | - }, | ||
| 592 | - | ||
| 593 | - selected_datalet : { | ||
| 594 | - type : String, | ||
| 595 | - value : "" | ||
| 596 | - }, | ||
| 597 | - | ||
| 598 | - selected_fields : { | ||
| 599 | - type : Array, | ||
| 600 | - value : [] | ||
| 601 | - }, | ||
| 602 | - | ||
| 603 | - DatasourceTabSelected : { | ||
| 604 | - type : Number, | ||
| 605 | - value : 0 | ||
| 606 | - }, | ||
| 607 | - | ||
| 608 | - datasets : | ||
| 609 | - { | ||
| 610 | - type : Array, | ||
| 611 | - value : AvailableDatasets[0].names | ||
| 612 | - }, | ||
| 613 | - | ||
| 614 | - datasets_urls : | ||
| 615 | - { | ||
| 616 | - type : Array, | ||
| 617 | - value :AvailableDatasets[0].urls | ||
| 618 | - } | ||
| 619 | - | ||
| 620 | - }, | ||
| 621 | - | ||
| 622 | - ready : function(){ | ||
| 623 | - | ||
| 624 | - this.datasets = AvailableDatasets[this.organization].names; | ||
| 625 | - this.datasets_urls = AvailableDatasets[this.organization].urls; | ||
| 626 | - | ||
| 627 | - $(this.$.fields_placeholder).perfectScrollbar(); | ||
| 628 | - $(this.$.selected_fields_main_container).perfectScrollbar(); | ||
| 629 | - $(this.$.idm_fields_main_container).perfectScrollbar(); | ||
| 630 | - $(this.$.table_fields_container).perfectScrollbar(); | ||
| 631 | - | ||
| 632 | - }, | ||
| 633 | - | ||
| 634 | - /** | ||
| 635 | - * Callback to parse the data requested when dataUrl change its value | ||
| 636 | - * | ||
| 637 | - * @method handleResponseData | ||
| 638 | - */ | ||
| 639 | - handleResponseData : function(e){ | ||
| 640 | - | ||
| 641 | - this.$.fields_treeview.init(e.detail.response); | ||
| 642 | - | ||
| 643 | - var table_params ={ | ||
| 644 | - component : "datatable-datalet", | ||
| 645 | - params :{ | ||
| 646 | - 'data-url' : this.dataUrl | ||
| 647 | - }, | ||
| 648 | - fields : [], | ||
| 649 | - placeHolder : (navigator.userAgent.toLowerCase().indexOf('chrome') > -1 ) ? this.$.table_component_place_holder : this.$.table_component_place_holder[Object.keys(this.$.table_component_place_holder)[0]] | ||
| 650 | - }; | ||
| 651 | - | ||
| 652 | - ComponentService.deep_url = this.deepUrl; | ||
| 653 | - ComponentService.getComponent(table_params); | ||
| 654 | - | ||
| 655 | - }, | ||
| 656 | - | ||
| 657 | - /** | ||
| 658 | - * Callback to parse the components response object | ||
| 659 | - * | ||
| 660 | - * @method handleResponseDatalets | ||
| 661 | - */ | ||
| 662 | - handleResponseDatalets : function(e){ | ||
| 663 | - this.datalets_list = new Array(); | ||
| 664 | - for(var i=0;i < e.detail.response.length;i++){ | ||
| 665 | - var datalet_info = { name : e.detail.response[i].name , | ||
| 666 | - image : e.detail.response[i].url + e.detail.response[i].name + ".png" | ||
| 667 | - }; | ||
| 668 | - | ||
| 669 | - this.datalets_list.push(datalet_info); | ||
| 670 | - } | ||
| 671 | - | ||
| 672 | - /*var w = $(this.$.visualization_slider_area).width(); | ||
| 673 | - var pages = 2; | ||
| 674 | - var numItemsPerPage = 3;*/ | ||
| 675 | - | ||
| 676 | - this.$.visualization_slider_area.innerHTML = '<items-slider-controllet items=\'' + JSON.stringify(this.datalets_list) + '\'' + | ||
| 677 | - '\'></items-slider-controllet>'; | ||
| 678 | - }, | ||
| 679 | - | ||
| 680 | - handleSelectedDatalet : function(e){ | ||
| 681 | - | ||
| 682 | - var response = e.detail.response; | ||
| 683 | - //<draggable-element-controllet is-target="true" heading="Field 1" description="This fields is used for ..." number="1"></draggable-element-controllet> | ||
| 684 | - this.$.datalet_idm_fields_container.innerHTML = ""; | ||
| 685 | - | ||
| 686 | - if(response.idm.inputs.input.constructor == Object) { | ||
| 687 | - var input = response.idm.inputs.input; | ||
| 688 | - if(input.selection == "*") { | ||
| 689 | - var input_selected_fields = Polymer.dom(this.$.selected_fields_container).querySelectorAll('draggable-element-controllet'); | ||
| 690 | - for (var j = 0; j < input_selected_fields.length; j++) { | ||
| 691 | - this.$.datalet_idm_fields_container.innerHTML += '<draggable-element-controllet is-target="true" heading="Field ' + (j + 1) + '" description="' + input.description + '" number="' + (j + 1) + '"></draggable-element-controllet><br>'; | ||
| 692 | - } | ||
| 693 | - } | ||
| 694 | - }else{ | ||
| 695 | - for(var i =0; i < response.idm.inputs.input.length; i++){ | ||
| 696 | - var input = response.idm.inputs.input[i]; | ||
| 697 | - this.$.datalet_idm_fields_container.innerHTML += '<draggable-element-controllet is-target="true" id="' + input.name + '" heading="' + input.name + '" description="' + input.description + '" number="' + (i + 1) + '"></draggable-element-controllet><br>'; | ||
| 698 | - } | ||
| 699 | - } | ||
| 700 | - | ||
| 701 | - }, | ||
| 702 | - | ||
| 703 | - assignToolbar : function(){ | ||
| 704 | - this.$.toolbar_number.innerHTML = (this.selected + 1); | ||
| 705 | - switch(this.selected){ | ||
| 706 | - case 0: | ||
| 707 | - this.$.toolbar_title.innerHTML = "Dataset source"; | ||
| 708 | - this.$.toolbar_description.innerHTML = "Copy and paste/drag and drop in the textarea the url of datasource"; | ||
| 709 | - break; | ||
| 710 | - case 1: | ||
| 711 | - this.$.toolbar_title.innerHTML = "Data fields selection"; | ||
| 712 | - this.$.toolbar_description.innerHTML = "Select the fields you want to visualize"; | ||
| 713 | - break; | ||
| 714 | - case 2: | ||
| 715 | - this.$.toolbar_title.innerHTML = "Data mapping"; | ||
| 716 | - this.$.toolbar_description.innerHTML = "Select the visualization from the slider, drag and drop the selected fields in visualization parameter area, customize the visualization if you need"; | ||
| 717 | - break; | ||
| 718 | - case 3: | ||
| 719 | - this.$.toolbar_title.innerHTML = "Finish"; | ||
| 720 | - this.$.toolbar_description.innerHTML = "Confirms the creation of the datalet"; | ||
| 721 | - | ||
| 722 | - break; | ||
| 723 | - } | ||
| 724 | - }, | ||
| 725 | - | ||
| 726 | - validateCurrentPass : function(next_selected_pass){ | ||
| 727 | - | ||
| 728 | - switch(next_selected_pass){ | ||
| 729 | - case 0: | ||
| 730 | - return true; | ||
| 731 | - case 1: | ||
| 732 | - if(this.$.data_url.value == ""){ | ||
| 733 | - this.$.message.text = "You have to select a dataset to access to pass 2."; | ||
| 734 | - this.$.message.show(); | ||
| 735 | - return false; | ||
| 736 | - }else{ | ||
| 737 | - return true; | ||
| 738 | - } | ||
| 739 | - | ||
| 740 | - case 2: | ||
| 741 | - if(Polymer.dom(this.$.selected_fields_container).querySelectorAll('draggable-element-controllet') == 0){ | ||
| 742 | - this.$.message.text = "You have to select a set of fields to access to pass 3."; | ||
| 743 | - this.$.message.show(); | ||
| 744 | - return false; | ||
| 745 | - }else{ | ||
| 746 | - return true; | ||
| 747 | - } | ||
| 748 | - } | ||
| 749 | - | ||
| 750 | - }, | ||
| 751 | - | ||
| 752 | - _onPrevClick : function() { | ||
| 753 | - if(!this.validateCurrentPass(this.selected === 0 ? 0 : (this.selected - 1))) return; | ||
| 754 | - | ||
| 755 | - this.entryAnimation = 'slide-from-left-animation'; | ||
| 756 | - this.exitAnimation = 'slide-right-animation'; | ||
| 757 | - this.selected = this.selected === 0 ? 0 : (this.selected - 1); | ||
| 758 | - //this.assignToolbar(); | ||
| 759 | - }, | ||
| 760 | - | ||
| 761 | - _onNextClick : function() { | ||
| 762 | - | ||
| 763 | - if(!this.validateCurrentPass(this.selected === 2 ? 2 : (this.selected + 1))) return; | ||
| 764 | - | ||
| 765 | - this.entryAnimation = 'slide-from-right-animation'; | ||
| 766 | - this.exitAnimation = 'slide-left-animation'; | ||
| 767 | - this.selected = this.selected === 2 ? 2 : (this.selected + 1); | ||
| 768 | - //this.assignToolbar(); | ||
| 769 | - }, | ||
| 770 | - | ||
| 771 | - _datasourceSelected : function(e){ | ||
| 772 | - if(Object.getPrototypeOf(e) !== CustomEvent.prototype) { | ||
| 773 | - e = e[Object.keys(e)[0]]; | ||
| 774 | - } | ||
| 775 | - | ||
| 776 | - this.$.data_url.value = this.datasets_urls[parseInt(e.target.id)]; | ||
| 777 | - }, | ||
| 778 | - | ||
| 779 | - _dataUrlChanged : function(newValue, oldValue){ | ||
| 780 | - this.$.data_request.generateRequest(); | ||
| 781 | - }, | ||
| 782 | - | ||
| 783 | - _dataletSelected : function(e){ | ||
| 784 | - this.selected_datalet = e.detail.datalet; | ||
| 785 | - this.$.selected_datalet_request.url = this.deepUrl + e.detail.datalet; | ||
| 786 | - this.$.selected_datalet_request.generateRequest(); | ||
| 787 | - | ||
| 788 | - }, | ||
| 789 | - | ||
| 790 | - _fieldsSelected : function(e){ | ||
| 791 | - | ||
| 792 | - this.$.selected_fields_container.innerHTML = ""; | ||
| 793 | - for(var i=0;i<e.detail.fields.length;i++) { | ||
| 794 | - this.$.selected_fields_container.innerHTML += '<draggable-element-controllet identifier="' + e.detail.fields[i] + | ||
| 795 | - '" label="' + e.detail.fields[i].split(",")[e.detail.fields[i].split(",").length -1] + | ||
| 796 | - '"></draggable-element-controllet><br>'; | ||
| 797 | - } | ||
| 798 | - | ||
| 799 | - //var place_holder = (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) ? this.$.table_component_place_holder : this.$.table_component_place_holder[Object.keys(this.$.table_component_place_holder)[0]]; | ||
| 800 | - | ||
| 801 | - var table_params ={ | ||
| 802 | - component : "datatable-datalet", | ||
| 803 | - params :{ | ||
| 804 | - 'data-url' : this.dataUrl | ||
| 805 | - }, | ||
| 806 | - fields : e.detail.fields, | ||
| 807 | - placeHolder : this.$.table_component_place_holder | ||
| 808 | - }; | ||
| 809 | - | ||
| 810 | - ComponentService.deep_url = this.deepUrl; | ||
| 811 | - ComponentService.getComponent(table_params); | ||
| 812 | - | ||
| 813 | - }, | ||
| 814 | - | ||
| 815 | - _fieldsMapped : function(e){ | ||
| 816 | - | ||
| 817 | - var input_mapped_fields = Polymer.dom(this.$.datalet_idm_fields_container).querySelectorAll('draggable-element-controllet[is-target=true]'); | ||
| 818 | - this.selected_fields = Array(); | ||
| 819 | - | ||
| 820 | - for (var i = 0; i < input_mapped_fields.length; i++) { | ||
| 821 | - if (input_mapped_fields[i].value != "") { | ||
| 822 | - this.selected_fields.push(input_mapped_fields[i].value); | ||
| 823 | - } | ||
| 824 | - } | ||
| 825 | - | ||
| 826 | - var datalet_params ={ | ||
| 827 | - component : this.selected_datalet, | ||
| 828 | - params :{ | ||
| 829 | - 'data-url' : this.dataUrl | ||
| 830 | - }, | ||
| 831 | - fields : this.selected_fields, | ||
| 832 | - placeHolder : this.$.datalet_placeholder | ||
| 833 | - }; | ||
| 834 | - | ||
| 835 | - var datalet_finish_params ={ | ||
| 836 | - component : this.selected_datalet, | ||
| 837 | - params :{ | ||
| 838 | - 'data-url' : this.dataUrl | ||
| 839 | - }, | ||
| 840 | - fields : this.selected_fields, | ||
| 841 | - placeHolder : this.$.datalet_created_placehorder | ||
| 842 | - }; | ||
| 843 | - | ||
| 844 | - ComponentService.deep_url = this.deepUrl; | ||
| 845 | - | ||
| 846 | - ComponentService.getComponent(datalet_params); | ||
| 847 | - ComponentService.getComponent(datalet_finish_params); | ||
| 848 | - | ||
| 849 | - }, | ||
| 850 | - | ||
| 851 | - _handleDatasourceDragOver : function(e){ | ||
| 852 | - this.$.data_url.value = ""; | ||
| 853 | - }, | ||
| 854 | - | ||
| 855 | - _onFinish : function(e){ | ||
| 856 | - | ||
| 857 | - var data = { | ||
| 858 | - dataUrl : this.dataUrl, | ||
| 859 | - fields : this.selected_fields, | ||
| 860 | - datalet : this.selected_datalet | ||
| 861 | - } | ||
| 862 | - | ||
| 863 | - this.fire('data-sevc-controllet.dataletCreated', {data : data}); | ||
| 864 | - | ||
| 865 | - } | ||
| 866 | - | ||
| 867 | - }); | ||
| 868 | - | ||
| 869 | - </script> | ||
| 870 | - | ||
| 871 | -</dom-module> | ||
| 872 | \ No newline at end of file | 0 | \ No newline at end of file |
controllets/data-sevc-controllet/data-sevc-controllet_backup.html deleted
| 1 | -<link rel="import" href="../../bower_components/polymer/polymer.html"> | ||
| 2 | -<link rel="import" href="../../bower_components/paper-styles/color.html"> | ||
| 3 | - | ||
| 4 | -<link rel="import" href="../../bower_components/neon-animation/neon-animated-pages.html"> | ||
| 5 | -<link rel="import" href="../../bower_components/neon-animation/neon-animatable.html"> | ||
| 6 | -<link rel="import" href="../../bower_components/neon-animation/neon-animations.html"> | ||
| 7 | - | ||
| 8 | -<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html"> | ||
| 9 | -<link rel="import" href="../../bower_components/paper-input/paper-input.html"> | ||
| 10 | -<link rel="import" href="../../bower_components/paper-input/paper-textarea.html"> | ||
| 11 | -<link rel="import" href="../../bower_components/paper-button/paper-button.html"> | ||
| 12 | -<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html"> | ||
| 13 | -<link rel="import" href="../../bower_components/paper-tabs/paper-tab.html"> | ||
| 14 | -<link rel="import" href="../../bower_components/iron-pages/iron-pages.html"> | ||
| 15 | -<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html"> | ||
| 16 | -<link rel="import" href="../../bower_components/paper-menu/paper-menu.html"> | ||
| 17 | -<link rel="import" href="../../bower_components/paper-item/paper-item.html"> | ||
| 18 | -<link rel="import" href="../../bower_components/paper-toast/paper-toast.html"> | ||
| 19 | - | ||
| 20 | - | ||
| 21 | -<link rel="import" href="../items-slider-controllet/items-slider-controllet.html"> | ||
| 22 | -<link rel="import" href="../draggable-element-controllet/draggable-element-controllet.html"> | ||
| 23 | -<link rel="import" href="../treeview-controllet/treeview-controllet.html"> | ||
| 24 | - | ||
| 25 | - | ||
| 26 | -<dom-module id="data-sevc-controllet"> | ||
| 27 | - <template> | ||
| 28 | - <link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css"> | ||
| 29 | - | ||
| 30 | - <style is="custom-style"> | ||
| 31 | - /* body | ||
| 32 | - { | ||
| 33 | - font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial; | ||
| 34 | - font-size: 1em; | ||
| 35 | - margin: 0; | ||
| 36 | - padding: 1.5em; | ||
| 37 | - -webkit-tap-highlight-color: rgba(0,0,0,0); | ||
| 38 | - -webkit-touch-callout: none; | ||
| 39 | - overflow: hidden; | ||
| 40 | - }*/ | ||
| 41 | - | ||
| 42 | - .flexchild | ||
| 43 | - { | ||
| 44 | - @apply(--layout-flex); | ||
| 45 | - } | ||
| 46 | - | ||
| 47 | - .flex2child | ||
| 48 | - { | ||
| 49 | - @apply(--layout-flex-2); | ||
| 50 | - } | ||
| 51 | - | ||
| 52 | - .avatar | ||
| 53 | - { | ||
| 54 | - display: inline-block; | ||
| 55 | - height: 2em; | ||
| 56 | - width: 2em; | ||
| 57 | - border-radius: 50%; | ||
| 58 | - background: var(--paper-blue-500); | ||
| 59 | - color: white; | ||
| 60 | - line-height: 2em; | ||
| 61 | - font-size: 1.87em; | ||
| 62 | - text-align: center; | ||
| 63 | - } | ||
| 64 | - | ||
| 65 | - .title | ||
| 66 | - { | ||
| 67 | - position: relative; | ||
| 68 | - top: 0.60vh; | ||
| 69 | - margin-left: 20px; | ||
| 70 | - } | ||
| 71 | - | ||
| 72 | - .big | ||
| 73 | - { | ||
| 74 | - font-size: 1.37em; | ||
| 75 | - color: var(--google-grey-500); | ||
| 76 | - } | ||
| 77 | - | ||
| 78 | - .medium | ||
| 79 | - { | ||
| 80 | - font-size: 1em; | ||
| 81 | - padding-bottom: 0.5em; | ||
| 82 | - color : #000000; | ||
| 83 | - font-weight: bold; | ||
| 84 | - } | ||
| 85 | - | ||
| 86 | - .small | ||
| 87 | - { | ||
| 88 | - font-size: 0.8em; | ||
| 89 | - padding-top: 10px; | ||
| 90 | - color: var(--paper-blue-500); | ||
| 91 | - font-weight: bold; | ||
| 92 | - } | ||
| 93 | - | ||
| 94 | - paper-input | ||
| 95 | - { | ||
| 96 | - width: 80%; | ||
| 97 | - } | ||
| 98 | - | ||
| 99 | - paper-dropdown-menu | ||
| 100 | - { | ||
| 101 | - text-align: left; | ||
| 102 | - margin: auto; | ||
| 103 | - width: 100%; | ||
| 104 | - } | ||
| 105 | - | ||
| 106 | - :host ::content paper-menu-button | ||
| 107 | - { | ||
| 108 | - display: block; | ||
| 109 | - width: 100%; | ||
| 110 | - } | ||
| 111 | - | ||
| 112 | - #visualization_slider_area | ||
| 113 | - { | ||
| 114 | - min-width: 670px; | ||
| 115 | - min-height: 180px; | ||
| 116 | - } | ||
| 117 | - | ||
| 118 | - #fields_mapping_area | ||
| 119 | - { | ||
| 120 | - min-width: 670px; | ||
| 121 | - min-height: 180px; | ||
| 122 | - } | ||
| 123 | - | ||
| 124 | - #datalet_placeholder | ||
| 125 | - { | ||
| 126 | - height: 360px; | ||
| 127 | - min-height: 360px; | ||
| 128 | - | ||
| 129 | - } | ||
| 130 | - | ||
| 131 | - .datalet_right_container | ||
| 132 | - { | ||
| 133 | - width: 100vh; | ||
| 134 | - } | ||
| 135 | - | ||
| 136 | - .field-mapping-card | ||
| 137 | - { | ||
| 138 | - width: 50%; | ||
| 139 | - float: left; | ||
| 140 | - } | ||
| 141 | - | ||
| 142 | - .toolbar_button | ||
| 143 | - { | ||
| 144 | - --iron-icon-height: 32px; | ||
| 145 | - --iron-icon-width: 32px; | ||
| 146 | - } | ||
| 147 | - | ||
| 148 | - #finish_button | ||
| 149 | - { | ||
| 150 | - --iron-icon-height: 32px; | ||
| 151 | - --iron-icon-width: 32px; | ||
| 152 | - color: var(--paper-blue-500); | ||
| 153 | - } | ||
| 154 | - | ||
| 155 | - .area_container | ||
| 156 | - { | ||
| 157 | - overflow: hidden; | ||
| 158 | - margin : 0.8em; | ||
| 159 | - padding : 0.8em; | ||
| 160 | - border-width: 1em; | ||
| 161 | - border-radius: 0.125rem; | ||
| 162 | - box-shadow: 0.125em 0.125em 0.1125em 0.125em rgba(0, 0, 0, 0.25); | ||
| 163 | - } | ||
| 164 | - | ||
| 165 | - #fields_placeholder{ | ||
| 166 | - width: 40%; | ||
| 167 | - height: 50vh; | ||
| 168 | - position: relative; | ||
| 169 | - float: left; | ||
| 170 | - overflow: auto; | ||
| 171 | - } | ||
| 172 | - | ||
| 173 | - #table_fields_container{ | ||
| 174 | - height: 50vh; | ||
| 175 | - width: 55%; | ||
| 176 | - position: relative; | ||
| 177 | - float: left; | ||
| 178 | - overflow: auto; | ||
| 179 | - } | ||
| 180 | - | ||
| 181 | - paper-tabs, paper-toolbar | ||
| 182 | - { | ||
| 183 | - background-color: var(--paper-blue-500); | ||
| 184 | - color: #ffffff; | ||
| 185 | - box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2); | ||
| 186 | - } | ||
| 187 | - | ||
| 188 | - paper-toolbar paper-tabs | ||
| 189 | - { | ||
| 190 | - box-shadow: none; | ||
| 191 | - --paper-tabs-selection-bar-color : var(--google-gray-500); | ||
| 192 | - } | ||
| 193 | - | ||
| 194 | - paper-tabs[noink][no-bar] paper-tab.iron-selected | ||
| 195 | - { | ||
| 196 | - background-color: var(--google-gray-500); | ||
| 197 | - } | ||
| 198 | - | ||
| 199 | - paper-tabs[align-bottom] | ||
| 200 | - { | ||
| 201 | - box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.15); | ||
| 202 | - } | ||
| 203 | - | ||
| 204 | - #idm_fields_main_container{ | ||
| 205 | - position: relative; | ||
| 206 | - height: 50vh; | ||
| 207 | - } | ||
| 208 | - | ||
| 209 | - #selected_fields_main_container{ | ||
| 210 | - position: relative; | ||
| 211 | - height: 50vh; | ||
| 212 | - } | ||
| 213 | - | ||
| 214 | - paper-menu{ | ||
| 215 | - width: 100%; | ||
| 216 | - } | ||
| 217 | - | ||
| 218 | - </style> | ||
| 219 | - | ||
| 220 | - <iron-ajax | ||
| 221 | - auto | ||
| 222 | - id="data_request" | ||
| 223 | - url={{dataUrl}} | ||
| 224 | - verbose="true" | ||
| 225 | - on-response="handleResponseData" | ||
| 226 | - debounce-duration="300"> | ||
| 227 | - </iron-ajax> | ||
| 228 | - | ||
| 229 | - <iron-ajax | ||
| 230 | - id="datales_list_request" | ||
| 231 | - auto | ||
| 232 | - url={{dataletsListUrl}} | ||
| 233 | - handle-as="json" | ||
| 234 | - on-response="handleResponseDatalets" | ||
| 235 | - debounce-duration="300"> | ||
| 236 | - </iron-ajax> | ||
| 237 | - | ||
| 238 | - <iron-ajax | ||
| 239 | - id="selected_datalet_request" | ||
| 240 | - url={{deepUrl}} | ||
| 241 | - verbose="true" | ||
| 242 | - on-response="handleSelectedDatalet" | ||
| 243 | - debounce-duration="300"> | ||
| 244 | - </iron-ajax> | ||
| 245 | - | ||
| 246 | - <content> | ||
| 247 | - | ||
| 248 | - <neon-animated-pages id="pages" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]"> | ||
| 249 | - | ||
| 250 | - <neon-animatable> | ||
| 251 | - | ||
| 252 | - <div class="vertical justified layout"> | ||
| 253 | - | ||
| 254 | - <div class="horizontal layout"> | ||
| 255 | - <div class="avatar" style="margin-left:15px">1</div> | ||
| 256 | - <div class="title flex"> | ||
| 257 | - <div id="toolbar_title" class="big">Dataset source</div> | ||
| 258 | - <div id="toolbar_description" class="small">Copy and paste/drag and drop in the textarea the url of datasource</div> | ||
| 259 | - </div> | ||
| 260 | - <paper-icon-button id="NextButton" class="toolbar_button" on-click="_onNextClick" icon="chevron-right" alt="arrow-forward" title="arrow-forward"></paper-icon-button> | ||
| 261 | - </div> | ||
| 262 | - | ||
| 263 | - <div class="area_container"> | ||
| 264 | - <paper-tabs selected="{{DatasourceTabSelected}}"> | ||
| 265 | - <paper-tab>Select data source</paper-tab> | ||
| 266 | - <paper-tab>Most popular</paper-tab> | ||
| 267 | - <paper-tab>Search</paper-tab> | ||
| 268 | - </paper-tabs> | ||
| 269 | - <iron-pages selected="{{DatasourceTabSelected}}"> | ||
| 270 | - <div> | ||
| 271 | - <div class="card-content"> | ||
| 272 | - <paper-textarea id="data_url" label="Dataset api data url" floatingLabel value="{{dataUrl}}" on-dragover="_handleDatasourceDragOver"></paper-textarea> | ||
| 273 | - </div> | ||
| 274 | - | ||
| 275 | - <div class="card-content"> | ||
| 276 | - <paper-dropdown-menu id="datasets-sources" label="Available datasets"> | ||
| 277 | - <paper-menu class="dropdown-content"> | ||
| 278 | - <template is="dom-repeat" items="{{datasets}}" as="dataset" index-as="index"> | ||
| 279 | - <paper-item id="{{index}}" on-tap="_datasourceSelected">{{dataset}}</paper-item> | ||
| 280 | - </template> | ||
| 281 | - </paper-menu> | ||
| 282 | - </paper-dropdown-menu> | ||
| 283 | - </div> | ||
| 284 | - | ||
| 285 | - </div> | ||
| 286 | - <div><img src="static/images/UnderConstruction.png" style="position: relative;top: 60%;left: 25%;"></div> | ||
| 287 | - <div><img src="static/images/UnderConstruction.png" style="position: relative;top: 60%;left: 25%;"></div> | ||
| 288 | - </iron-pages> | ||
| 289 | - </div> | ||
| 290 | - | ||
| 291 | - </div> | ||
| 292 | - | ||
| 293 | - </neon-animatable> | ||
| 294 | - | ||
| 295 | - <neon-animatable> | ||
| 296 | - | ||
| 297 | - <div class="vertical justified layout"> | ||
| 298 | - | ||
| 299 | - <div class="horizontal layout"> | ||
| 300 | - <paper-icon-button id="PrevButton" class="toolbar_button x-scope" on-click="_onPrevClick" icon="chevron-left" alt="arrow-back" title="arrow-back"></paper-icon-button> | ||
| 301 | - <div class="avatar">2</div> | ||
| 302 | - <div class="title flex"> | ||
| 303 | - <div id="toolbar_title" class="big">Dataset source</div> | ||
| 304 | - <div id="toolbar_description" class="small">Copy and paste/drag and drop in the textarea the url of datasource</div> | ||
| 305 | - </div> | ||
| 306 | - <paper-icon-button id="NextButton" class="toolbar_button" on-click="_onNextClick" icon="chevron-right" alt="arrow-forward" title="arrow-forward"></paper-icon-button> | ||
| 307 | - </div> | ||
| 308 | - | ||
| 309 | - <div class="horizontal layout"> | ||
| 310 | - | ||
| 311 | - <div id="fields_placeholder" class="area_container flexchild" style="min-width:300px"> | ||
| 312 | - <treeview-controllet id="fields_treeview"></treeview-controllet> | ||
| 313 | - </div> | ||
| 314 | - | ||
| 315 | - <div id="table_fields_container" class="area_container flex2child"> | ||
| 316 | - <div id="table_component_place_holder"></div> | ||
| 317 | - </div> | ||
| 318 | - | ||
| 319 | - </div> | ||
| 320 | - | ||
| 321 | - </div> | ||
| 322 | - | ||
| 323 | - </neon-animatable> | ||
| 324 | - | ||
| 325 | - <neon-animatable style="height:100vh"> | ||
| 326 | - | ||
| 327 | - <div class="vertical justified layout"> | ||
| 328 | - | ||
| 329 | - <div class="horizontal layout"> | ||
| 330 | - <paper-icon-button id="PrevButton" class="toolbar_button x-scope" on-click="_onPrevClick" icon="chevron-left" alt="arrow-back" title="arrow-back"></paper-icon-button> | ||
| 331 | - <div class="avatar">3</div> | ||
| 332 | - <div class="title flex"> | ||
| 333 | - <div id="toolbar_title" class="big">Data mapping</div> | ||
| 334 | - <div id="toolbar_description" class="small">Select the visualization from the slider, drag and drop the selected fields in visualization parameter area, customize the visualization if you need</div> | ||
| 335 | - </div> | ||
| 336 | - <paper-icon-button id="finish_button" on-click="_onFinish" icon="add-circle" alt="Conforms the creation" title="finish"></paper-icon-button> | ||
| 337 | - </div> | ||
| 338 | - | ||
| 339 | - | ||
| 340 | - <div class="horizontal layout"> | ||
| 341 | - | ||
| 342 | - <div class=""> | ||
| 343 | - <div id="visualization_slider_area" class="area_container"></div> | ||
| 344 | - <div id="fields_mapping_area" class="area_container"> | ||
| 345 | - | ||
| 346 | - <div id="selected_fields_main_container" class="field-mapping-card"> | ||
| 347 | - <div class="title"> | ||
| 348 | - <div class="medium">Selected fields</div> | ||
| 349 | - </div> | ||
| 350 | - <div id="selected_fields_container" class="area_container"></div> | ||
| 351 | - </div> | ||
| 352 | - | ||
| 353 | - <div id="idm_fields_main_container" class="field-mapping-card"> | ||
| 354 | - <div class="title"> | ||
| 355 | - <div class="medium">Datalet fields</div> | ||
| 356 | - </div> | ||
| 357 | - <div id="datalet_idm_fields_container" class="area_container"></div> | ||
| 358 | - </div> | ||
| 359 | - </div> | ||
| 360 | - </div> | ||
| 361 | - | ||
| 362 | - <div class="datalet_right_container"> | ||
| 363 | - <div class="vertical justified layout"> | ||
| 364 | - <div id="datalet_placeholder" class=""></div> | ||
| 365 | - </div> | ||
| 366 | - </div> | ||
| 367 | - | ||
| 368 | - </div> | ||
| 369 | - | ||
| 370 | - </div> | ||
| 371 | - | ||
| 372 | - </neon-animatable> | ||
| 373 | - | ||
| 374 | - </neon-animated-pages> | ||
| 375 | - | ||
| 376 | - <paper-toast id="message" text=""></paper-toast> | ||
| 377 | - | ||
| 378 | - </content> | ||
| 379 | - </template> | ||
| 380 | - | ||
| 381 | - <script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script> | ||
| 382 | - <script src="../../../DEEPCLIENT/js/deepClient.js"></script> | ||
| 383 | - | ||
| 384 | - <script> | ||
| 385 | - | ||
| 386 | - var datasetsPrato = { | ||
| 387 | - names:[ | ||
| 388 | - 'Consuntivo entrate 2009', | ||
| 389 | - 'Consuntivo entrate 2010', | ||
| 390 | - 'Consuntivo entrate 2011', | ||
| 391 | - 'Consuntivo entrate 2012', | ||
| 392 | - 'Consuntivo entrate 2014' | ||
| 393 | - ], | ||
| 394 | - urls: [ | ||
| 395 | - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=07843fc3-07e1-4c66-9be4-fed43ca4a26f&limit=10000', | ||
| 396 | - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=48a4db73-d3d4-4639-bbc2-9c797d0e6cda&limit=10000', | ||
| 397 | - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=a14cc2fb-0c24-48d7-9370-834045797d89&limit=10000', | ||
| 398 | - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=fb32fcb6-5e44-4e52-b132-01c6540ddbee&limit=10000', | ||
| 399 | - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=0cb600fc-19ad-4aaf-9794-1e6ea851840a&limit=10000' | ||
| 400 | - ] | ||
| 401 | - } | ||
| 402 | - | ||
| 403 | - var datasetsGroeningen = { | ||
| 404 | - names:[ | ||
| 405 | - 'Vestigingen register gemeente Groningen', | ||
| 406 | - 'Woonruimte gemeente Groningen' | ||
| 407 | - ], | ||
| 408 | - urls: [ | ||
| 409 | - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=ba554c1f-02a7-4d76-b449-fb9daa1f8bfd&limit=10000', | ||
| 410 | - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=af7b3916-4347-469a-8354-3c2d559bd92f&limit=10000' | ||
| 411 | - ] | ||
| 412 | - } | ||
| 413 | - | ||
| 414 | - var datasetsDublin = { | ||
| 415 | - names:[ | ||
| 416 | - 'SDCC Traffic Cameras', | ||
| 417 | - 'Derelict Site Register', | ||
| 418 | - 'Dublin City Council Commencement Notices', | ||
| 419 | - 'Dublin City Council Planning Applications', | ||
| 420 | - 'Dun Laoghaire-Rathdown County Council Planning Application 2008-2014', | ||
| 421 | - 'Fingal Council Planning Applications for last 7 years', | ||
| 422 | - 'Planning Register', | ||
| 423 | - 'Fingal Development Plan 2011-2017 Record of Protected Structures' | ||
| 424 | - ], | ||
| 425 | - urls: [ | ||
| 426 | - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=73e02092-85a1-434e-85fe-0c9a43aa9a52&limit=10000', | ||
| 427 | - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=fcbee83e-3d3d-4303-a568-24dd33d02adc&limit=10000', | ||
| 428 | - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=ee00de68-f2e4-482f-a003-3c0561351075&limit=10000', | ||
| 429 | - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=2f4a9d44-b52f-4c8b-a5db-d8f4a676d81e&limit=10000', | ||
| 430 | - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=c479f061-9638-489d-ac55-0c68765548ff&limit=10000', | ||
| 431 | - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=d29a477a-4734-43ef-8002-048c8640d441&limit=10000', | ||
| 432 | - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=2b23f32d-e27e-4eef-af1e-27e05103df7d&limit=10000', | ||
| 433 | - 'http://ckan.routetopa.eu/api/action/datastore_search?resource_id=5ea813bc-fdf9-4edb-b3b1-0142b593d5c6&limit=10000', | ||
| 434 | - ] | ||
| 435 | - } | ||
| 436 | - | ||
| 437 | - var AvailableDatasets = [datasetsPrato, datasetsGroeningen, datasetsDublin] | ||
| 438 | - | ||
| 439 | - | ||
| 440 | - Polymer({ | ||
| 441 | - | ||
| 442 | - is : 'data-sevc-controllet', | ||
| 443 | - | ||
| 444 | - listeners : { | ||
| 445 | - 'items-slider-controllet_item-selected' : '_dataletSelected', | ||
| 446 | - 'draggable-element-controllet_content-dragged' : '_fieldsMapped', | ||
| 447 | - 'treeview-controllet-fileds-selected' : '_fieldsSelected' | ||
| 448 | - }, | ||
| 449 | - | ||
| 450 | - properties : { | ||
| 451 | - | ||
| 452 | - entryAnimation : { | ||
| 453 | - type : String, | ||
| 454 | - value : "" | ||
| 455 | - }, | ||
| 456 | - | ||
| 457 | - exitAnimation : { | ||
| 458 | - type : String, | ||
| 459 | - value : "" | ||
| 460 | - }, | ||
| 461 | - | ||
| 462 | - selected : { | ||
| 463 | - type : Number, | ||
| 464 | - value : 0 | ||
| 465 | - }, | ||
| 466 | - | ||
| 467 | - /** | ||
| 468 | - * It represent the data url from CKAN api | ||
| 469 | - * | ||
| 470 | - * @attribute dataUrl | ||
| 471 | - * @type string | ||
| 472 | - * @default 'null' | ||
| 473 | - */ | ||
| 474 | - dataUrl : { | ||
| 475 | - type : String, | ||
| 476 | - value : "",/*"http://demo.ckan.org/api/action/datastore_search?resource_id=8324a4c9-66d6-47bf-a898-94237cc39b9f&limit=50",*/ | ||
| 477 | - observer : '_dataUrlChanged' | ||
| 478 | - }, | ||
| 479 | - /** | ||
| 480 | - * It represent the DEEP url to get information about the datalets | ||
| 481 | - * | ||
| 482 | - * @attribute deepUrl | ||
| 483 | - * @type string | ||
| 484 | - * @default 'null' | ||
| 485 | - */ | ||
| 486 | - deepUrl : { | ||
| 487 | - type : String, | ||
| 488 | - value : "" | ||
| 489 | - }, | ||
| 490 | - | ||
| 491 | - organization : { | ||
| 492 | - type : Number, | ||
| 493 | - value : 2 | ||
| 494 | - }, | ||
| 495 | - | ||
| 496 | - datalet_query : { | ||
| 497 | - type : String, | ||
| 498 | - value : "" | ||
| 499 | - }, | ||
| 500 | - | ||
| 501 | - datalets_list : { | ||
| 502 | - type : Array , | ||
| 503 | - value : [] | ||
| 504 | - }, | ||
| 505 | - | ||
| 506 | - selected_datalet : { | ||
| 507 | - type : String, | ||
| 508 | - value : "" | ||
| 509 | - }, | ||
| 510 | - | ||
| 511 | - selected_fields : { | ||
| 512 | - type : Array, | ||
| 513 | - value : [] | ||
| 514 | - }, | ||
| 515 | - | ||
| 516 | - DatasourceTabSelected : { | ||
| 517 | - type : Number, | ||
| 518 | - value : 0 | ||
| 519 | - }, | ||
| 520 | - | ||
| 521 | - datasets : | ||
| 522 | - { | ||
| 523 | - type : Array, | ||
| 524 | - value : AvailableDatasets[0].names | ||
| 525 | - }, | ||
| 526 | - | ||
| 527 | - datasets_urls : | ||
| 528 | - { | ||
| 529 | - type : Array, | ||
| 530 | - value :AvailableDatasets[0].urls | ||
| 531 | - } | ||
| 532 | - | ||
| 533 | - }, | ||
| 534 | - | ||
| 535 | - ready : function(){ | ||
| 536 | - | ||
| 537 | - this.datasets = AvailableDatasets[this.organization].names; | ||
| 538 | - this.datasets_urls = AvailableDatasets[this.organization].urls; | ||
| 539 | - | ||
| 540 | - $(this.$.fields_placeholder).perfectScrollbar(); | ||
| 541 | - $(this.$.selected_fields_main_container).perfectScrollbar(); | ||
| 542 | - $(this.$.idm_fields_main_container).perfectScrollbar(); | ||
| 543 | - $(this.$.table_fields_container).perfectScrollbar(); | ||
| 544 | - | ||
| 545 | - }, | ||
| 546 | - | ||
| 547 | - /** | ||
| 548 | - * Callback to parse the data requested when dataUrl change its value | ||
| 549 | - * | ||
| 550 | - * @method handleResponseData | ||
| 551 | - */ | ||
| 552 | - handleResponseData : function(e){ | ||
| 553 | - | ||
| 554 | - this.$.fields_treeview.init(e.detail.response); | ||
| 555 | - | ||
| 556 | - /*var table_params ={ | ||
| 557 | - component : "datatable-datalet", | ||
| 558 | - params :{ | ||
| 559 | - 'data-url' : this.dataUrl | ||
| 560 | - }, | ||
| 561 | - fields : [], | ||
| 562 | - placeHolder : (navigator.userAgent.toLowerCase().indexOf('chrome') > -1 ) ? this.$.table_component_place_holder : this.$.table_component_place_holder[Object.keys(this.$.table_component_place_holder)[0]] | ||
| 563 | - }; | ||
| 564 | - | ||
| 565 | - ComponentService.deep_url = this.deepUrl; | ||
| 566 | - ComponentService.getComponent(table_params);*/ | ||
| 567 | - | ||
| 568 | - }, | ||
| 569 | - | ||
| 570 | - /** | ||
| 571 | - * Callback to parse the components response object | ||
| 572 | - * | ||
| 573 | - * @method handleResponseDatalets | ||
| 574 | - */ | ||
| 575 | - handleResponseDatalets : function(e){ | ||
| 576 | - this.datalets_list = new Array(); | ||
| 577 | - for(var i=0;i < e.detail.response.length;i++){ | ||
| 578 | - var datalet_info = { name : e.detail.response[i].name , | ||
| 579 | - image : e.detail.response[i].url + e.detail.response[i].name + ".png" | ||
| 580 | - }; | ||
| 581 | - | ||
| 582 | - this.datalets_list.push(datalet_info); | ||
| 583 | - } | ||
| 584 | - | ||
| 585 | - /*var w = $(this.$.visualization_slider_area).width(); | ||
| 586 | - var pages = 2; | ||
| 587 | - var numItemsPerPage = 3;*/ | ||
| 588 | - | ||
| 589 | - this.$.visualization_slider_area.innerHTML = '<items-slider-controllet items=\'' + JSON.stringify(this.datalets_list) + '\'' + | ||
| 590 | - '\'></items-slider-controllet>'; | ||
| 591 | - }, | ||
| 592 | - | ||
| 593 | - handleSelectedDatalet : function(e){ | ||
| 594 | - | ||
| 595 | - var response = e.detail.response; | ||
| 596 | - //<draggable-element-controllet is-target="true" heading="Field 1" description="This fields is used for ..." number="1"></draggable-element-controllet> | ||
| 597 | - this.$.datalet_idm_fields_container.innerHTML = ""; | ||
| 598 | - | ||
| 599 | - if(response.idm.inputs.input.constructor == Object) { | ||
| 600 | - var input = response.idm.inputs.input; | ||
| 601 | - if(input.selection == "*") { | ||
| 602 | - var input_selected_fields = Polymer.dom(this.$.selected_fields_container).querySelectorAll('draggable-element-controllet'); | ||
| 603 | - for (var j = 0; j < input_selected_fields.length; j++) { | ||
| 604 | - this.$.datalet_idm_fields_container.innerHTML += '<draggable-element-controllet is-target="true" heading="Field ' + (j + 1) + '" description="' + input.description + '" number="' + (j + 1) + '"></draggable-element-controllet><br>'; | ||
| 605 | - } | ||
| 606 | - } | ||
| 607 | - }else{ | ||
| 608 | - for(var i =0; i < response.idm.inputs.input.length; i++){ | ||
| 609 | - var input = response.idm.inputs.input[i]; | ||
| 610 | - this.$.datalet_idm_fields_container.innerHTML += '<draggable-element-controllet is-target="true" id="' + input.name + '" heading="' + input.name + '" description="' + input.description + '" number="' + (i + 1) + '"></draggable-element-controllet><br>'; | ||
| 611 | - } | ||
| 612 | - } | ||
| 613 | - | ||
| 614 | - }, | ||
| 615 | - | ||
| 616 | - assignToolbar : function(){ | ||
| 617 | - this.$.toolbar_number.innerHTML = (this.selected + 1); | ||
| 618 | - switch(this.selected){ | ||
| 619 | - case 0: | ||
| 620 | - this.$.toolbar_title.innerHTML = "Dataset source"; | ||
| 621 | - this.$.toolbar_description.innerHTML = "Copy and paste/drag and drop in the textarea the url of datasource"; | ||
| 622 | - break; | ||
| 623 | - case 1: | ||
| 624 | - this.$.toolbar_title.innerHTML = "Data fields selection"; | ||
| 625 | - this.$.toolbar_description.innerHTML = "Select the fields you want to visualize"; | ||
| 626 | - break; | ||
| 627 | - case 2: | ||
| 628 | - this.$.toolbar_title.innerHTML = "Data mapping"; | ||
| 629 | - this.$.toolbar_description.innerHTML = "Select the visualization from the slider, drag and drop the selected fields in visualization parameter area, customize the visualization if you need"; | ||
| 630 | - break; | ||
| 631 | - case 3: | ||
| 632 | - this.$.toolbar_title.innerHTML = "Finish"; | ||
| 633 | - this.$.toolbar_description.innerHTML = "Confirms the creation of the datalet"; | ||
| 634 | - | ||
| 635 | - break; | ||
| 636 | - } | ||
| 637 | - }, | ||
| 638 | - | ||
| 639 | - validateCurrentPass : function(next_selected_pass){ | ||
| 640 | - | ||
| 641 | - switch(next_selected_pass){ | ||
| 642 | - case 0: | ||
| 643 | - return true; | ||
| 644 | - case 1: | ||
| 645 | - if(this.$.data_url.value == ""){ | ||
| 646 | - this.$.message.text = "You have to select a dataset to access to pass 2."; | ||
| 647 | - this.$.message.show(); | ||
| 648 | - return false; | ||
| 649 | - }else{ | ||
| 650 | - return true; | ||
| 651 | - } | ||
| 652 | - | ||
| 653 | - case 2: | ||
| 654 | - if(Polymer.dom(this.$.selected_fields_container).querySelectorAll('draggable-element-controllet') == 0){ | ||
| 655 | - this.$.message.text = "You have to select a set of fields to access to pass 3."; | ||
| 656 | - this.$.message.show(); | ||
| 657 | - return false; | ||
| 658 | - }else{ | ||
| 659 | - return true; | ||
| 660 | - } | ||
| 661 | - } | ||
| 662 | - | ||
| 663 | - }, | ||
| 664 | - | ||
| 665 | - _onPrevClick : function() { | ||
| 666 | - if(!this.validateCurrentPass(this.selected === 0 ? 0 : (this.selected - 1))) return; | ||
| 667 | - | ||
| 668 | - this.entryAnimation = 'slide-from-left-animation'; | ||
| 669 | - this.exitAnimation = 'slide-right-animation'; | ||
| 670 | - this.selected = this.selected === 0 ? 0 : (this.selected - 1); | ||
| 671 | - //this.assignToolbar(); | ||
| 672 | - }, | ||
| 673 | - | ||
| 674 | - _onNextClick : function() { | ||
| 675 | - | ||
| 676 | - if(!this.validateCurrentPass(this.selected === 2 ? 2 : (this.selected + 1))) return; | ||
| 677 | - | ||
| 678 | - this.entryAnimation = 'slide-from-right-animation'; | ||
| 679 | - this.exitAnimation = 'slide-left-animation'; | ||
| 680 | - this.selected = this.selected === 2 ? 2 : (this.selected + 1); | ||
| 681 | - //this.assignToolbar(); | ||
| 682 | - }, | ||
| 683 | - | ||
| 684 | - _datasourceSelected : function(e){ | ||
| 685 | - if(Object.getPrototypeOf(e) !== CustomEvent.prototype) { | ||
| 686 | - e = e[Object.keys(e)[0]]; | ||
| 687 | - } | ||
| 688 | - | ||
| 689 | - this.$.data_url.value = this.datasets_urls[parseInt(e.target.id)]; | ||
| 690 | - }, | ||
| 691 | - | ||
| 692 | - _dataUrlChanged : function(newValue, oldValue){ | ||
| 693 | - this.$.data_request.generateRequest(); | ||
| 694 | - }, | ||
| 695 | - | ||
| 696 | - _dataletSelected : function(e){ | ||
| 697 | - this.selected_datalet = e.detail.datalet; | ||
| 698 | - this.$.selected_datalet_request.url = this.deepUrl + e.detail.datalet; | ||
| 699 | - this.$.selected_datalet_request.generateRequest(); | ||
| 700 | - | ||
| 701 | - }, | ||
| 702 | - | ||
| 703 | - _fieldsSelected : function(e){ | ||
| 704 | - | ||
| 705 | - this.$.selected_fields_container.innerHTML = ""; | ||
| 706 | - for(var i=0;i<e.detail.fields.length;i++) { | ||
| 707 | - this.$.selected_fields_container.innerHTML += '<draggable-element-controllet identifier="' + e.detail.fields[i] + | ||
| 708 | - '" label="' + e.detail.fields[i].split(",")[e.detail.fields[i].split(",").length -1] + | ||
| 709 | - '"></draggable-element-controllet><br>'; | ||
| 710 | - } | ||
| 711 | - | ||
| 712 | - var place_holder = (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) ? this.$.table_component_place_holder : this.$.table_component_place_holder[Object.keys(this.$.table_component_place_holder)[0]]; | ||
| 713 | - | ||
| 714 | - var table_params ={ | ||
| 715 | - component : "datatable-datalet", | ||
| 716 | - params :{ | ||
| 717 | - 'data-url' : this.dataUrl | ||
| 718 | - }, | ||
| 719 | - fields : e.detail.fields, | ||
| 720 | - placeHolder : this.$.table_component_place_holder | ||
| 721 | - }; | ||
| 722 | - | ||
| 723 | - ComponentService.deep_url = this.deepUrl; | ||
| 724 | - ComponentService.getComponent(table_params); | ||
| 725 | - | ||
| 726 | - }, | ||
| 727 | - | ||
| 728 | - _fieldsMapped : function(e){ | ||
| 729 | - | ||
| 730 | - var input_mapped_fields = Polymer.dom(this.$.datalet_idm_fields_container).querySelectorAll('draggable-element-controllet[is-target=true]'); | ||
| 731 | - this.selected_fields = Array(); | ||
| 732 | - | ||
| 733 | - for (var i = 0; i < input_mapped_fields.length; i++) { | ||
| 734 | - if (input_mapped_fields[i].value != "") { | ||
| 735 | - this.selected_fields.push(input_mapped_fields[i].value); | ||
| 736 | - } | ||
| 737 | - } | ||
| 738 | - | ||
| 739 | - var datalet_params ={ | ||
| 740 | - component : this.selected_datalet, | ||
| 741 | - params :{ | ||
| 742 | - 'data-url' : this.dataUrl | ||
| 743 | - }, | ||
| 744 | - fields : this.selected_fields, | ||
| 745 | - placeHolder : this.$.datalet_placeholder | ||
| 746 | - }; | ||
| 747 | - | ||
| 748 | - var datalet_finish_params ={ | ||
| 749 | - component : this.selected_datalet, | ||
| 750 | - params :{ | ||
| 751 | - 'data-url' : this.dataUrl | ||
| 752 | - }, | ||
| 753 | - fields : this.selected_fields, | ||
| 754 | - placeHolder : this.$.datalet_created_placehorder | ||
| 755 | - }; | ||
| 756 | - | ||
| 757 | - ComponentService.deep_url = this.deepUrl; | ||
| 758 | - | ||
| 759 | - ComponentService.getComponent(datalet_params); | ||
| 760 | - ComponentService.getComponent(datalet_finish_params); | ||
| 761 | - | ||
| 762 | - }, | ||
| 763 | - | ||
| 764 | - _handleDatasourceDragOver : function(e){ | ||
| 765 | - this.$.data_url.value = ""; | ||
| 766 | - }, | ||
| 767 | - | ||
| 768 | - _onFinish : function(e){ | ||
| 769 | - | ||
| 770 | - var data = { | ||
| 771 | - dataUrl : this.dataUrl, | ||
| 772 | - fields : this.selected_fields, | ||
| 773 | - datalet : this.selected_datalet | ||
| 774 | - } | ||
| 775 | - | ||
| 776 | - this.fire('data-sevc-controllet.dataletCreated', {data : data}); | ||
| 777 | - | ||
| 778 | - } | ||
| 779 | - | ||
| 780 | - }); | ||
| 781 | - | ||
| 782 | - </script> | ||
| 783 | - | ||
| 784 | -</dom-module> | ||
| 785 | \ No newline at end of file | 0 | \ No newline at end of file |
controllets/data-sevc-controllet/static/css/md_checkbox.css deleted
| 1 | -/*body { | ||
| 2 | - font-size: 16px; | ||
| 3 | -} | ||
| 4 | - | ||
| 5 | -.header { | ||
| 6 | - height: 8rem; | ||
| 7 | - background: #009688; | ||
| 8 | -} | ||
| 9 | - | ||
| 10 | -.content { | ||
| 11 | - width: 20rem; | ||
| 12 | - margin: -4rem auto 0 auto; | ||
| 13 | - padding: 1rem; | ||
| 14 | - background: #fff; | ||
| 15 | - border-radius: 0.125rem; | ||
| 16 | - box-shadow: 0 0.125rem 0.3125rem 0 rgba(0, 0, 0, 0.25); | ||
| 17 | -} | ||
| 18 | -*/ | ||
| 19 | - | ||
| 20 | -/* | ||
| 21 | -<header class="header"> | ||
| 22 | - | ||
| 23 | -</header> | ||
| 24 | - | ||
| 25 | -<section class="content"> | ||
| 26 | - <ul class="list"> | ||
| 27 | - <li class="list__item"> | ||
| 28 | - <label class="label--checkbox"> | ||
| 29 | - <input type="checkbox" class="checkbox" checked> | ||
| 30 | - Item 1 | ||
| 31 | - </label> | ||
| 32 | - </li> | ||
| 33 | - <li class="list__item"> | ||
| 34 | - <label class="label--checkbox"> | ||
| 35 | - <input type="checkbox" class="checkbox"> | ||
| 36 | - Item 2 | ||
| 37 | - </label> | ||
| 38 | - </li> | ||
| 39 | - <li class="list__item"> | ||
| 40 | - <label class="label--checkbox"> | ||
| 41 | - <input type="checkbox" class="checkbox"> | ||
| 42 | - Item 3 | ||
| 43 | - </label> | ||
| 44 | - </li> | ||
| 45 | - <li class="list__item"> | ||
| 46 | - <label class="label--checkbox"> | ||
| 47 | - <input type="checkbox" class="checkbox"> | ||
| 48 | - Item 4 | ||
| 49 | - </label> | ||
| 50 | - </li> | ||
| 51 | - </ul> | ||
| 52 | -</section> | ||
| 53 | - | ||
| 54 | -<a href="http://www.twitter.com/sambego" target="_blank" class="button--round button--sticky"> | ||
| 55 | - <i class="fa fa-twitter"></i> | ||
| 56 | -</a> | ||
| 57 | -*/ | ||
| 58 | -ul ul, ol ul { | ||
| 59 | - /*list-style-type: circle;*/ | ||
| 60 | -} | ||
| 61 | -user agent stylesheetul, menu, dir { | ||
| 62 | - /*display: block; | ||
| 63 | - list-style-type: disc; | ||
| 64 | - -webkit-margin-before: 1em; | ||
| 65 | - -webkit-margin-after: 1em; | ||
| 66 | - -webkit-margin-start: 0px; | ||
| 67 | - -webkit-margin-end: 0px; | ||
| 68 | - -webkit-padding-start: 40px;*/ | ||
| 69 | -} | ||
| 70 | - | ||
| 71 | -.list { | ||
| 72 | - margin: .5rem; | ||
| 73 | -} | ||
| 74 | - | ||
| 75 | -.list__item { | ||
| 76 | - margin: 0 0 .5rem 0; | ||
| 77 | - padding: 0; | ||
| 78 | -} | ||
| 79 | - | ||
| 80 | -.label--checkbox { | ||
| 81 | - position: relative; | ||
| 82 | - margin: .5rem; | ||
| 83 | - font-family: Arial, sans-serif; | ||
| 84 | - line-height: 135%; | ||
| 85 | - cursor: pointer; | ||
| 86 | -} | ||
| 87 | - | ||
| 88 | -.checkbox { | ||
| 89 | - position: relative; | ||
| 90 | - top: -0.375rem; | ||
| 91 | - margin: 0 1rem 0 0; | ||
| 92 | - cursor: pointer; | ||
| 93 | -} | ||
| 94 | -.checkbox:before { | ||
| 95 | - -webkit-transition: all 0.3s ease-in-out; | ||
| 96 | - -moz-transition: all 0.3s ease-in-out; | ||
| 97 | - transition: all 0.3s ease-in-out; | ||
| 98 | - content: ""; | ||
| 99 | - position: absolute; | ||
| 100 | - left: 0; | ||
| 101 | - z-index: 1; | ||
| 102 | - width: 1rem; | ||
| 103 | - height: 1rem; | ||
| 104 | - border: 2px solid #f2f2f2; | ||
| 105 | -} | ||
| 106 | -.checkbox:checked:before { | ||
| 107 | - -webkit-transform: rotate(-45deg); | ||
| 108 | - -moz-transform: rotate(-45deg); | ||
| 109 | - -ms-transform: rotate(-45deg); | ||
| 110 | - -o-transform: rotate(-45deg); | ||
| 111 | - transform: rotate(-45deg); | ||
| 112 | - height: .5rem; | ||
| 113 | - border-color: #009688; | ||
| 114 | - border-top-style: none; | ||
| 115 | - border-right-style: none; | ||
| 116 | -} | ||
| 117 | -.checkbox:after { | ||
| 118 | - content: ""; | ||
| 119 | - position: absolute; | ||
| 120 | - top: -0.125rem; | ||
| 121 | - left: 0; | ||
| 122 | - width: 1.1rem; | ||
| 123 | - height: 1.1rem; | ||
| 124 | - background: #fff; | ||
| 125 | - cursor: pointer; | ||
| 126 | -} | ||
| 127 | - | ||
| 128 | -.button--round { | ||
| 129 | - -webkit-transition: 0.3s background ease-in-out; | ||
| 130 | - -moz-transition: 0.3s background ease-in-out; | ||
| 131 | - transition: 0.3s background ease-in-out; | ||
| 132 | - width: 2rem; | ||
| 133 | - height: 2rem; | ||
| 134 | - background: #5677fc; | ||
| 135 | - border-radius: 50%; | ||
| 136 | - box-shadow: 0 0.125rem 0.3125rem 0 rgba(0, 0, 0, 0.25); | ||
| 137 | - color: #fff; | ||
| 138 | - text-decoration: none; | ||
| 139 | - text-align: center; | ||
| 140 | -} | ||
| 141 | -.button--round i { | ||
| 142 | - font-size: 1rem; | ||
| 143 | - line-height: 220%; | ||
| 144 | - vertical-align: middle; | ||
| 145 | -} | ||
| 146 | -.button--round:hover { | ||
| 147 | - background: #3b50ce; | ||
| 148 | -} | ||
| 149 | - | ||
| 150 | -.button--sticky { | ||
| 151 | - position: fixed; | ||
| 152 | - right: 2rem; | ||
| 153 | - top: 16rem; | ||
| 154 | -} | ||
| 155 | - | ||
| 156 | -.content { | ||
| 157 | - -webkit-animation-duration: 0.4s; | ||
| 158 | - animation-duration: 0.4s; | ||
| 159 | - -webkit-animation-fill-mode: both; | ||
| 160 | - animation-fill-mode: both; | ||
| 161 | - -webkit-animation-name: slideUp; | ||
| 162 | - animation-name: slideUp; | ||
| 163 | - -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); | ||
| 164 | - animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); | ||
| 165 | -} | ||
| 166 | - | ||
| 167 | -@-webkit-keyframes slideUp { | ||
| 168 | - 0% { | ||
| 169 | - -webkit-transform: translateY(6.25rem); | ||
| 170 | - transform: translateY(6.25rem); | ||
| 171 | - } | ||
| 172 | - 100% { | ||
| 173 | - -webkit-transform: translateY(0); | ||
| 174 | - transform: translateY(0); | ||
| 175 | - } | ||
| 176 | -} | ||
| 177 | -@keyframes slideUp { | ||
| 178 | - 0% { | ||
| 179 | - -webkit-transform: translateY(6.25rem); | ||
| 180 | - transform: translateY(6.25rem); | ||
| 181 | - } | ||
| 182 | - 100% { | ||
| 183 | - -webkit-transform: translateY(0); | ||
| 184 | - transform: translateY(0); | ||
| 185 | - } | ||
| 186 | -} |
controllets/data-sevc-controllet/static/css/reset.css
0 → 100644
| 1 | +::content html { | ||
| 2 | + color: #000; | ||
| 3 | + background: #FFF; | ||
| 4 | +} | ||
| 5 | + | ||
| 6 | +::content body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, | ||
| 7 | +h4, h5, h6, pre, code, form, fieldset, legend, | ||
| 8 | +input, button, textarea, p, blockquote, th, td { | ||
| 9 | + margin: 0; | ||
| 10 | + padding: 0; | ||
| 11 | +} | ||
| 12 | + | ||
| 13 | +::content table { | ||
| 14 | + border-collapse: collapse; | ||
| 15 | + border-spacing: 0; | ||
| 16 | +} | ||
| 17 | + | ||
| 18 | +::content fieldset, img { | ||
| 19 | + border: 0; | ||
| 20 | +} | ||
| 21 | + | ||
| 22 | +::content address, caption, cite, code, dfn, em, strong, | ||
| 23 | +th, var, optgroup { | ||
| 24 | + font-style: inherit; | ||
| 25 | + font-weight: inherit; | ||
| 26 | +} | ||
| 27 | + | ||
| 28 | +::content del, ins { | ||
| 29 | + text-decoration: none; | ||
| 30 | +} | ||
| 31 | + | ||
| 32 | +::content li { | ||
| 33 | + list-style: none; | ||
| 34 | +} | ||
| 35 | + | ||
| 36 | +::content caption, th { | ||
| 37 | + text-align: left; | ||
| 38 | +} | ||
| 39 | + | ||
| 40 | +::content h1, h2, h3, h4, h5, h6 { | ||
| 41 | + font-size: 100%; | ||
| 42 | + font-weight: normal; | ||
| 43 | +} | ||
| 44 | + | ||
| 45 | +::content q:before, q:after { | ||
| 46 | + content: ''; | ||
| 47 | +} | ||
| 48 | + | ||
| 49 | +::content abbr, acronym { | ||
| 50 | + border: 0; | ||
| 51 | + font-variant: normal; | ||
| 52 | +} | ||
| 53 | + | ||
| 54 | +::content sup { | ||
| 55 | + vertical-align: baseline; | ||
| 56 | +} | ||
| 57 | + | ||
| 58 | +::content sub { | ||
| 59 | + vertical-align: baseline; | ||
| 60 | +} | ||
| 61 | + | ||
| 62 | +/*because legend doesn't inherit in IE */ | ||
| 63 | +::content legend { | ||
| 64 | + color: #000; | ||
| 65 | +} | ||
| 66 | + | ||
| 67 | +::content input, button, textarea, select, optgroup, option { | ||
| 68 | + font-family: inherit; | ||
| 69 | + font-size: inherit; | ||
| 70 | + font-style: inherit; | ||
| 71 | + font-weight: inherit; | ||
| 72 | +} | ||
| 73 | + | ||
| 74 | +/*@purpose To enable resizing for IE */ | ||
| 75 | +/*@branch For IE6-Win, IE7-Win */ | ||
| 76 | +::content input, button, textarea, select { | ||
| 77 | + *font-size: 100%; | ||
| 78 | +} | ||
| 0 | \ No newline at end of file | 79 | \ No newline at end of file |
controllets/items-slider-controllet/chart.png deleted
506 Bytes
controllets/items-slider-controllet/css/jquery.jscrollpane.css deleted
| 1 | -/* | ||
| 2 | - * CSS Styles that are needed by jScrollPane for it to operate correctly. | ||
| 3 | - * | ||
| 4 | - * Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane | ||
| 5 | - * may not operate correctly without them. | ||
| 6 | - */ | ||
| 7 | - | ||
| 8 | -.jspContainer | ||
| 9 | -{ | ||
| 10 | - overflow: hidden; | ||
| 11 | - position: relative; | ||
| 12 | -} | ||
| 13 | - | ||
| 14 | -.jspPane | ||
| 15 | -{ | ||
| 16 | - position: absolute; | ||
| 17 | -} | ||
| 18 | - | ||
| 19 | -.jspVerticalBar | ||
| 20 | -{ | ||
| 21 | - position: absolute; | ||
| 22 | - top: 0; | ||
| 23 | - right: 0; | ||
| 24 | - width: 10px; | ||
| 25 | - height: 100%; | ||
| 26 | - background: #fff; | ||
| 27 | - | ||
| 28 | -} | ||
| 29 | - | ||
| 30 | -.jspHorizontalBar | ||
| 31 | -{ | ||
| 32 | - position: absolute; | ||
| 33 | - bottom: 0; | ||
| 34 | - left: 0; | ||
| 35 | - width: 100%; | ||
| 36 | - height: 10px; | ||
| 37 | - background: #fff; | ||
| 38 | -} | ||
| 39 | - | ||
| 40 | -.jspVerticalBar *, | ||
| 41 | -.jspHorizontalBar * | ||
| 42 | -{ | ||
| 43 | - margin: 0; | ||
| 44 | - padding: 0; | ||
| 45 | -} | ||
| 46 | - | ||
| 47 | -.jspCap | ||
| 48 | -{ | ||
| 49 | - display: none; | ||
| 50 | -} | ||
| 51 | - | ||
| 52 | -.jspHorizontalBar .jspCap | ||
| 53 | -{ | ||
| 54 | - float: left; | ||
| 55 | -} | ||
| 56 | - | ||
| 57 | -.jspTrack | ||
| 58 | -{ | ||
| 59 | - background: #fff; | ||
| 60 | - position: relative; | ||
| 61 | -} | ||
| 62 | - | ||
| 63 | -.jspDrag | ||
| 64 | -{ | ||
| 65 | - background: #000; | ||
| 66 | - position: relative; | ||
| 67 | - top: 0; | ||
| 68 | - left: 0; | ||
| 69 | - cursor: pointer; | ||
| 70 | -} | ||
| 71 | - | ||
| 72 | -.jspHorizontalBar .jspTrack, | ||
| 73 | -.jspHorizontalBar .jspDrag | ||
| 74 | -{ | ||
| 75 | - float: left; | ||
| 76 | - height: 100%; | ||
| 77 | -} | ||
| 78 | - | ||
| 79 | -.jspArrow | ||
| 80 | -{ | ||
| 81 | - background: #50506d; | ||
| 82 | - text-indent: -20000px; | ||
| 83 | - display: block; | ||
| 84 | - cursor: pointer; | ||
| 85 | -} | ||
| 86 | - | ||
| 87 | -.jspArrow.jspDisabled | ||
| 88 | -{ | ||
| 89 | - cursor: default; | ||
| 90 | - background: #80808d; | ||
| 91 | -} | ||
| 92 | - | ||
| 93 | -.jspVerticalBar .jspArrow | ||
| 94 | -{ | ||
| 95 | - height: 10px; | ||
| 96 | -} | ||
| 97 | - | ||
| 98 | -.jspHorizontalBar .jspArrow | ||
| 99 | -{ | ||
| 100 | - width: 10px; | ||
| 101 | - float: left; | ||
| 102 | - height: 100%; | ||
| 103 | -} | ||
| 104 | - | ||
| 105 | -.jspVerticalBar .jspArrow:focus | ||
| 106 | -{ | ||
| 107 | - outline: none; | ||
| 108 | -} | ||
| 109 | - | ||
| 110 | -.jspCorner | ||
| 111 | -{ | ||
| 112 | - background: #eeeef4; | ||
| 113 | - float: left; | ||
| 114 | - height: 100%; | ||
| 115 | -} | ||
| 116 | - | ||
| 117 | -/* Yuk! CSS Hack for IE6 3 pixel bug :( */ | ||
| 118 | -* html .jspCorner | ||
| 119 | -{ | ||
| 120 | - margin: 0 -3px 0 0; | ||
| 121 | -} | ||
| 122 | \ No newline at end of file | 0 | \ No newline at end of file |
controllets/items-slider-controllet/css/style.css deleted
| 1 | -/* Circular Content Carousel Style */ | ||
| 2 | -.ca-wrapper{ | ||
| 3 | - width: 100% | ||
| 4 | -} | ||
| 5 | - | ||
| 6 | -.ca-container{ | ||
| 7 | - position:relative; | ||
| 8 | - margin:25px auto 20px auto; | ||
| 9 | - /*width:990px;*/ | ||
| 10 | - width:80%; | ||
| 11 | - height:150px; | ||
| 12 | -} | ||
| 13 | -.ca-wrapper{ | ||
| 14 | - width:100%; | ||
| 15 | - height:100%; | ||
| 16 | - position:relative; | ||
| 17 | -} | ||
| 18 | -.ca-item{ | ||
| 19 | - position:relative; | ||
| 20 | - float:left; | ||
| 21 | - width:150px; | ||
| 22 | - height:100%; | ||
| 23 | - text-align:center; | ||
| 24 | -} | ||
| 25 | -.ca-more{ | ||
| 26 | - position: absolute; | ||
| 27 | - bottom: 10px; | ||
| 28 | - right:0px; | ||
| 29 | - padding:4px 15px; | ||
| 30 | - font-weight:bold; | ||
| 31 | - background: #ccbda2; | ||
| 32 | - text-align:center; | ||
| 33 | - color: white; | ||
| 34 | - font-family: "Georgia","Times New Roman",serif; | ||
| 35 | - font-style:italic; | ||
| 36 | - text-shadow:1px 1px 1px #897c63; | ||
| 37 | -} | ||
| 38 | -.ca-close{ | ||
| 39 | - position:absolute; | ||
| 40 | - top:10px; | ||
| 41 | - right:10px; | ||
| 42 | - background:#fff url(../../../../../../../Desktop/ROUTETOPA/fase%201%20-%20Settembre%202015/layout-datalet/CircularContentCarousel/images/cross.png) no-repeat center center; | ||
| 43 | - width:27px; | ||
| 44 | - height:27px; | ||
| 45 | - text-indent:-9000px; | ||
| 46 | - outline:none; | ||
| 47 | - -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.2); | ||
| 48 | - -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.2); | ||
| 49 | - box-shadow:1px 1px 2px rgba(0,0,0,0.2); | ||
| 50 | - opacity:0.7; | ||
| 51 | -} | ||
| 52 | -.ca-close:hover{ | ||
| 53 | - opacity:1.0; | ||
| 54 | -} | ||
| 55 | -.ca-item-main{ | ||
| 56 | - padding:20px; | ||
| 57 | - position:absolute; | ||
| 58 | - top:5px; | ||
| 59 | - left:5px; | ||
| 60 | - right:5px; | ||
| 61 | - bottom:5px; | ||
| 62 | - background:#fff; | ||
| 63 | - overflow:hidden; | ||
| 64 | - -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.2); | ||
| 65 | - -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.2); | ||
| 66 | - box-shadow:1px 1px 2px rgba(0,0,0,0.2); | ||
| 67 | -} | ||
| 68 | -.ca-icon{ | ||
| 69 | - width:233px; | ||
| 70 | - height:189px; | ||
| 71 | - position:relative; | ||
| 72 | - margin:0 auto; | ||
| 73 | - background:transparent url(../../../../../../../Desktop/ROUTETOPA/fase%201%20-%20Settembre%202015/layout-datalet/CircularContentCarousel/images/animal1.png) no-repeat center center; | ||
| 74 | -} | ||
| 75 | -.ca-item-2 .ca-icon{ | ||
| 76 | - background-image:url(../../../../../../../Desktop/ROUTETOPA/fase%201%20-%20Settembre%202015/layout-datalet/CircularContentCarousel/images/animal2.png); | ||
| 77 | -} | ||
| 78 | -.ca-item-3 .ca-icon{ | ||
| 79 | - background-image:url(../../../../../../../Desktop/ROUTETOPA/fase%201%20-%20Settembre%202015/layout-datalet/CircularContentCarousel/images/animal3.png); | ||
| 80 | -} | ||
| 81 | -.ca-item-4 .ca-icon{ | ||
| 82 | - background-image:url(../../../../../../../Desktop/ROUTETOPA/fase%201%20-%20Settembre%202015/layout-datalet/CircularContentCarousel/images/animal4.png); | ||
| 83 | -} | ||
| 84 | -.ca-item-5 .ca-icon{ | ||
| 85 | - background-image:url(../../../../../../../Desktop/ROUTETOPA/fase%201%20-%20Settembre%202015/layout-datalet/CircularContentCarousel/images/animal5.png); | ||
| 86 | -} | ||
| 87 | -.ca-item-6 .ca-icon{ | ||
| 88 | - background-image:url(../../../../../../../Desktop/ROUTETOPA/fase%201%20-%20Settembre%202015/layout-datalet/CircularContentCarousel/images/animal6.png); | ||
| 89 | -} | ||
| 90 | -.ca-item-7 .ca-icon{ | ||
| 91 | - background-image:url(../../../../../../../Desktop/ROUTETOPA/fase%201%20-%20Settembre%202015/layout-datalet/CircularContentCarousel/images/animal7.png); | ||
| 92 | -} | ||
| 93 | -.ca-item-8 .ca-icon{ | ||
| 94 | - background-image:url(../../../../../../../Desktop/ROUTETOPA/fase%201%20-%20Settembre%202015/layout-datalet/CircularContentCarousel/images/animal8.png); | ||
| 95 | -} | ||
| 96 | -.ca-item h3{ | ||
| 97 | - font-family: 'Coustard', sans-serif; | ||
| 98 | - text-transform:uppercase; | ||
| 99 | - font-size:30px; | ||
| 100 | - color:#000; | ||
| 101 | - margin-bottom:20px; | ||
| 102 | - height:85px; | ||
| 103 | - text-align:center; | ||
| 104 | - text-shadow: 0px 1px 1px #e4ebe9; | ||
| 105 | -} | ||
| 106 | -.ca-item h4{ | ||
| 107 | - font-family: "Georgia","Times New Roman",serif; | ||
| 108 | - font-style:italic; | ||
| 109 | - font-size:12px; | ||
| 110 | - text-align:left; | ||
| 111 | - border-left:10px solid #b0ccc6; | ||
| 112 | - padding-left:10px; | ||
| 113 | - line-height:24px; | ||
| 114 | - margin:10px; | ||
| 115 | - position:relative; | ||
| 116 | -} | ||
| 117 | -.ca-item h4 span{ | ||
| 118 | - text-indent:40px; | ||
| 119 | - display:block; | ||
| 120 | -} | ||
| 121 | -.ca-item h4 span.ca-quote{ | ||
| 122 | - color:#f4eee3; | ||
| 123 | - font-size:100px; | ||
| 124 | - position:absolute; | ||
| 125 | - top:20px; | ||
| 126 | - left:0px; | ||
| 127 | - text-indent:0px; | ||
| 128 | -} | ||
| 129 | -.ca-content-wrapper{ | ||
| 130 | - background:#b0ccc6; | ||
| 131 | - position:absolute; | ||
| 132 | - width:0px; /* expands to width of the wrapper minus 1 element */ | ||
| 133 | - height:440px; | ||
| 134 | - top:5px; | ||
| 135 | - text-align:left; | ||
| 136 | - z-index:10000; | ||
| 137 | - overflow:hidden; | ||
| 138 | -} | ||
| 139 | -.ca-content{ | ||
| 140 | - width:660px; | ||
| 141 | - overflow:hidden; | ||
| 142 | -} | ||
| 143 | -.ca-content-text{ | ||
| 144 | - font-size: 14px; | ||
| 145 | - font-style: italic; | ||
| 146 | - font-family: "Georgia","Times New Roman",serif; | ||
| 147 | - margin:10px 20px; | ||
| 148 | - padding:10px 20px; | ||
| 149 | - line-height:24px; | ||
| 150 | -} | ||
| 151 | -.ca-content-text p{ | ||
| 152 | - padding-bottom:5px; | ||
| 153 | -} | ||
| 154 | -.ca-content h6{ | ||
| 155 | - margin:25px 20px 0px 35px; | ||
| 156 | - font-size:32px; | ||
| 157 | - padding-bottom:5px; | ||
| 158 | - color:#000; | ||
| 159 | - font-family: 'Coustard', sans-serif; | ||
| 160 | - color:#60817a; | ||
| 161 | - border-bottom:2px solid #99bcb4; | ||
| 162 | - text-shadow: 1px 1px 1px #99BCB4; | ||
| 163 | -} | ||
| 164 | -.ca-content ul{ | ||
| 165 | - margin:20px 35px; | ||
| 166 | - height:30px; | ||
| 167 | -} | ||
| 168 | -.ca-content ul li{ | ||
| 169 | - float:left; | ||
| 170 | - margin:0px 2px; | ||
| 171 | -} | ||
| 172 | -.ca-content ul li a{ | ||
| 173 | - color:#fff; | ||
| 174 | - background:#000; | ||
| 175 | - padding:3px 6px; | ||
| 176 | - font-size:14px; | ||
| 177 | - font-family: "Georgia","Times New Roman",serif; | ||
| 178 | - font-style:italic; | ||
| 179 | -} | ||
| 180 | -.ca-content ul li a:hover{ | ||
| 181 | - background:#fff; | ||
| 182 | - color:#000; | ||
| 183 | - text-shadow:none; | ||
| 184 | -} | ||
| 185 | -.ca-nav span{ | ||
| 186 | - width:25px; | ||
| 187 | - height:38px; | ||
| 188 | - background:transparent url(../images/arrows.png) no-repeat top left; | ||
| 189 | - position:absolute; | ||
| 190 | - top:50%; | ||
| 191 | - margin-top:-19px; | ||
| 192 | - left:-40px; | ||
| 193 | - text-indent:-9000px; | ||
| 194 | - opacity:0.7; | ||
| 195 | - cursor:pointer; | ||
| 196 | - z-index:100; | ||
| 197 | -} | ||
| 198 | -.ca-nav span.ca-nav-next{ | ||
| 199 | - background-position:top right; | ||
| 200 | - left:auto; | ||
| 201 | - right:-40px; | ||
| 202 | -} | ||
| 203 | -.ca-nav span:hover{ | ||
| 204 | - opacity:1.0; | ||
| 205 | -} | ||
| 206 | \ No newline at end of file | 0 | \ No newline at end of file |
controllets/items-slider-controllet/images/ImageAttribution.txt deleted
controllets/items-slider-controllet/images/Thumbs.db deleted
No preview for this file type
controllets/items-slider-controllet/images/animal1.png deleted
36.2 KB
controllets/items-slider-controllet/images/animal2.png deleted
33.6 KB
controllets/items-slider-controllet/images/animal3.png deleted
22.3 KB
controllets/items-slider-controllet/images/animal4.png deleted
39 KB
controllets/items-slider-controllet/images/animal5.png deleted
43.4 KB
controllets/items-slider-controllet/images/animal6.png deleted
32.7 KB
controllets/items-slider-controllet/images/animal7.png deleted
24.9 KB
controllets/items-slider-controllet/images/animal8.png deleted
31.2 KB
controllets/items-slider-controllet/images/arrows.png deleted
1.54 KB
controllets/items-slider-controllet/images/cross.png deleted
266 Bytes
controllets/items-slider-controllet/images/pattern.png deleted
2.88 KB
controllets/items-slider-controllet/items-slider-controllet.html
| @@ -89,7 +89,7 @@ | @@ -89,7 +89,7 @@ | ||
| 89 | position: relative; | 89 | position: relative; |
| 90 | float:left; | 90 | float:left; |
| 91 | display: inline-block; | 91 | display: inline-block; |
| 92 | - height: 25vh; | 92 | + height: 38vh; |
| 93 | width: 100%; | 93 | width: 100%; |
| 94 | overflow: hidden; | 94 | overflow: hidden; |
| 95 | text-align: center; | 95 | text-align: center; |
controllets/items-slider-controllet/items-slider-controllet_.html deleted
| 1 | -<link rel="import" href="../../bower_components/polymer/polymer.html"> | ||
| 2 | -<link rel="import" href="../../bower_components/paper-styles/color.html"> | ||
| 3 | -<!--<link rel="import" href="../../bower_components/paper-styles/demo.css">--> | ||
| 4 | - | ||
| 5 | -<link rel="import" href="../../bower_components/neon-animation/neon-animated-pages.html"> | ||
| 6 | -<link rel="import" href="../../bower_components/neon-animation/neon-animatable.html"> | ||
| 7 | -<link rel="import" href="../../bower_components/neon-animation/neon-animations.html"> | ||
| 8 | - | ||
| 9 | -<link rel="import" href="../../bower_components/paper-card/paper-card.html"> | ||
| 10 | -<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html"> | ||
| 11 | -<link rel="import" href="../../bower_components/iron-icons/iron-icons.html"> | ||
| 12 | - | ||
| 13 | -<dom-module id="items-slider-controllet"> | ||
| 14 | - <template> | ||
| 15 | - | ||
| 16 | - <style is="custom-style"> | ||
| 17 | - body { | ||
| 18 | - margin: 0; | ||
| 19 | - padding: 3em; | ||
| 20 | - -webkit-tap-highlight-color: rgba(0,0,0,0); | ||
| 21 | - -webkit-touch-callout: none; | ||
| 22 | - line-height: 0; | ||
| 23 | - font-size: 1vw; | ||
| 24 | - } | ||
| 25 | - | ||
| 26 | - | ||
| 27 | - :host ::content .content{ | ||
| 28 | - position: relative; | ||
| 29 | - float: left; | ||
| 30 | - margin : .5em; | ||
| 31 | - height: 8em; | ||
| 32 | - width: 9em; | ||
| 33 | - background: #fff; | ||
| 34 | - background:#fff; | ||
| 35 | - overflow:hidden; | ||
| 36 | - border-radius: 0.125rem; | ||
| 37 | - box-shadow: 0 0.625em 0.5125em 0 rgba(0, 0, 0, 0.25); | ||
| 38 | - padding: 1em; | ||
| 39 | - } | ||
| 40 | - | ||
| 41 | - :host ::content .content-selected{ | ||
| 42 | - position: relative; | ||
| 43 | - float: left; | ||
| 44 | - top : .5em; | ||
| 45 | - margin : .5em; | ||
| 46 | - height: 9em; | ||
| 47 | - width: 8em; | ||
| 48 | - background:#fff; | ||
| 49 | - overflow:hidden; | ||
| 50 | - border-style: solid; | ||
| 51 | - border-width: 0.03em; | ||
| 52 | - border-radius: 0.125rem; | ||
| 53 | - box-shadow: 0 1.825em 1.7125em 0 rgba(0, 0, 0, 0.50); | ||
| 54 | - padding: 1em; | ||
| 55 | - } | ||
| 56 | - | ||
| 57 | - img .card-content{ | ||
| 58 | - padding: 0.5px 0 0.5px; | ||
| 59 | - } | ||
| 60 | - | ||
| 61 | - .title { | ||
| 62 | - display: inline-block; | ||
| 63 | - position: relative; | ||
| 64 | - padding-left: .2em; | ||
| 65 | - padding-right: .2em; | ||
| 66 | - color: var(--paper-indigo-500); | ||
| 67 | - } | ||
| 68 | - | ||
| 69 | - .title .big { | ||
| 70 | - /*font-size: 1.1em;*/ | ||
| 71 | - /*widht: 100%;*/ | ||
| 72 | - font-size: 0.9em; | ||
| 73 | - color: var(--google-grey-500); | ||
| 74 | - } | ||
| 75 | - | ||
| 76 | - .toolbar_button{ | ||
| 77 | - /*height: 100%; | ||
| 78 | - display: inline-block;*/ | ||
| 79 | - float: left; | ||
| 80 | - margin-top: 3.5em; | ||
| 81 | - --iron-icon-height: 28px; | ||
| 82 | - --iron-icon-width: 28px; | ||
| 83 | - } | ||
| 84 | - | ||
| 85 | - #pages{ | ||
| 86 | - position:relative; | ||
| 87 | - margin:25px auto 20px auto; | ||
| 88 | - /*width:990px;*/ | ||
| 89 | - width:80%; | ||
| 90 | - height:150px; | ||
| 91 | - | ||
| 92 | - /* position: relative; | ||
| 93 | - float:left; | ||
| 94 | - display: inline-block; | ||
| 95 | - height: 22vh; | ||
| 96 | - width: 80%; | ||
| 97 | - overflow: hidden; | ||
| 98 | - text-align: center;*/ | ||
| 99 | - /*margin-left: 3em;*/ | ||
| 100 | - } | ||
| 101 | - | ||
| 102 | - </style> | ||
| 103 | - | ||
| 104 | - <paper-icon-button id="PrevButton" class="toolbar_button x-scope" on-click="_onPrevClick" icon="chevron-left" alt="arrow-back" title="arrow-back"></paper-icon-button> | ||
| 105 | - | ||
| 106 | - <neon-animated-pages id="pages" class="flex" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]"> | ||
| 107 | - | ||
| 108 | - <template is="dom-repeat" items="{{itemsPages}}" as="page" index-as="p"> | ||
| 109 | - | ||
| 110 | - <neon-animatable> | ||
| 111 | - <template is="dom-repeat" items="{{itemsPerPage}}" as="item" index-as="i"> | ||
| 112 | - <template is="dom-if" if="{{getName(p, i) != 0}}"> | ||
| 113 | - <div class='fancy content' id="{{getName(p, i)}}" on-click="_cardClick"> | ||
| 114 | - | ||
| 115 | - <div class="card-content"> | ||
| 116 | - <div class="title"> | ||
| 117 | - <div class="big">{{getName(p, i)}}</div> | ||
| 118 | - </div> | ||
| 119 | - </div> | ||
| 120 | - <br> | ||
| 121 | - <div class="card-content"> | ||
| 122 | - <img width="75px" height="50px" src="{{getImage(p, i)}}" > | ||
| 123 | - </div> | ||
| 124 | - </div> | ||
| 125 | - </template> | ||
| 126 | - </template> | ||
| 127 | - </neon-animatable> | ||
| 128 | - </template> | ||
| 129 | - | ||
| 130 | - </neon-animated-pages> | ||
| 131 | - | ||
| 132 | - <paper-icon-button id="NextButton" class="toolbar_button x-scope" on-click="_onNextClick" icon="chevron-right" alt="arrow-forward" title="arrow-forward"></paper-icon-button> | ||
| 133 | - | ||
| 134 | - </template> | ||
| 135 | - | ||
| 136 | - <script> | ||
| 137 | - | ||
| 138 | - Polymer({ | ||
| 139 | - | ||
| 140 | - is : 'items-slider-controllet', | ||
| 141 | - | ||
| 142 | - properties : { | ||
| 143 | - | ||
| 144 | - entryAnimation : { | ||
| 145 | - type : String, | ||
| 146 | - value : "" | ||
| 147 | - }, | ||
| 148 | - | ||
| 149 | - exitAnimation : { | ||
| 150 | - type : String, | ||
| 151 | - value : "" | ||
| 152 | - }, | ||
| 153 | - | ||
| 154 | - selected : { | ||
| 155 | - type : Number, | ||
| 156 | - value : 0 | ||
| 157 | - }, | ||
| 158 | - | ||
| 159 | - /** | ||
| 160 | - * It stores all items to put in the slider | ||
| 161 | - * | ||
| 162 | - * @attribute tools | ||
| 163 | - * @type array | ||
| 164 | - * @default 'null' | ||
| 165 | - */ | ||
| 166 | - items : { | ||
| 167 | - type: Array, | ||
| 168 | - value: [] | ||
| 169 | - }, | ||
| 170 | - | ||
| 171 | - itemsPages : { | ||
| 172 | - type : Array, | ||
| 173 | - value : [] | ||
| 174 | - }, | ||
| 175 | - | ||
| 176 | - itemsPerPage : { | ||
| 177 | - type : Array, | ||
| 178 | - value : [] | ||
| 179 | - }, | ||
| 180 | - | ||
| 181 | - prevSelectedCard : { | ||
| 182 | - type: Object, | ||
| 183 | - value : null | ||
| 184 | - }, | ||
| 185 | - | ||
| 186 | - numItemsPerPage : { | ||
| 187 | - type: Number, | ||
| 188 | - value : 4 | ||
| 189 | - } | ||
| 190 | - | ||
| 191 | - }, | ||
| 192 | - | ||
| 193 | - ready : function(){ | ||
| 194 | - | ||
| 195 | - var pages = Math.floor(this.items.length / this.numItemsPerPage); | ||
| 196 | - var mod = this.items.length % this.numItemsPerPage; | ||
| 197 | - if(mod > 0) pages += 1; | ||
| 198 | - | ||
| 199 | - this.itemsPages = new Array(); | ||
| 200 | - this.itemsPerPage = new Array(); | ||
| 201 | - | ||
| 202 | - for(var i = 0; i < pages; i++){ | ||
| 203 | - this.itemsPages.push(i); | ||
| 204 | - } | ||
| 205 | - | ||
| 206 | - for(var i = 0; i < this.numItemsPerPage; i++){ | ||
| 207 | - this.itemsPerPage.push(i); | ||
| 208 | - } | ||
| 209 | - | ||
| 210 | - }, | ||
| 211 | - | ||
| 212 | - getPage : function(page){ | ||
| 213 | - return this.itemsPages[page]; | ||
| 214 | - }, | ||
| 215 | - | ||
| 216 | - getName : function(page, item){ | ||
| 217 | - return ( ((page * this.itemsPerPage.length) + item) > this.items.length - 1 ) ? 0 : this.items[(page * this.itemsPerPage.length) + item].name.replace("-datalet",""); | ||
| 218 | - }, | ||
| 219 | - | ||
| 220 | - getImage : function(page, item){ | ||
| 221 | - return ( ((page * this.itemsPerPage.length) + item) > this.items.length - 1 ) ? 0 : this.items[(page * this.itemsPerPage.length) + item].image; | ||
| 222 | - }, | ||
| 223 | - | ||
| 224 | - _onPrevClick : function() { | ||
| 225 | - this.entryAnimation = 'slide-from-left-animation'; | ||
| 226 | - this.exitAnimation = 'slide-right-animation'; | ||
| 227 | - this.selected = this.selected === 0 ? (this.itemsPages.length - 1) : (this.selected - 1); | ||
| 228 | - }, | ||
| 229 | - | ||
| 230 | - _onNextClick : function() { | ||
| 231 | - this.entryAnimation = 'slide-from-right-animation'; | ||
| 232 | - this.exitAnimation = 'slide-left-animation'; | ||
| 233 | - this.selected = this.selected === (this.itemsPages.length -1) ? 0 : (this.selected + 1); | ||
| 234 | - }, | ||
| 235 | - | ||
| 236 | - _cardClick : function(e){ | ||
| 237 | - if(this.prevSelectedCard != null){ | ||
| 238 | - this.prevSelectedCard.className = "fancy content"; | ||
| 239 | - | ||
| 240 | - } | ||
| 241 | - e.currentTarget.className = "fancy content-selected"; | ||
| 242 | - this.prevSelectedCard = e.currentTarget; | ||
| 243 | - | ||
| 244 | - this.fire('items-slider-controllet_item-selected', {datalet: e.currentTarget.id + "-datalet"}); | ||
| 245 | - | ||
| 246 | - } | ||
| 247 | - }); | ||
| 248 | - | ||
| 249 | - </script> | ||
| 250 | - | ||
| 251 | -</dom-module> | ||
| 252 | \ No newline at end of file | 0 | \ No newline at end of file |
controllets/items-slider-controllet/items-slider-controllet__.html deleted
| 1 | -<link rel="import" href="../../bower_components/polymer/polymer.html"> | ||
| 2 | -<link rel="import" href="../../bower_components/paper-styles/color.html"> | ||
| 3 | -<!--<link rel="import" href="../../bower_components/paper-styles/demo.css">--> | ||
| 4 | - | ||
| 5 | -<link rel="import" href="../../bower_components/neon-animation/neon-animated-pages.html"> | ||
| 6 | -<link rel="import" href="../../bower_components/neon-animation/neon-animatable.html"> | ||
| 7 | -<link rel="import" href="../../bower_components/neon-animation/neon-animations.html"> | ||
| 8 | - | ||
| 9 | -<link rel="import" href="../../bower_components/paper-card/paper-card.html"> | ||
| 10 | -<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html"> | ||
| 11 | -<link rel="import" href="../../bower_components/iron-icons/iron-icons.html"> | ||
| 12 | - | ||
| 13 | -<dom-module id="items-slider-controllet"> | ||
| 14 | - <template> | ||
| 15 | - <link rel="stylesheet" type="text/css" href="css/style.css" /> | ||
| 16 | - | ||
| 17 | - | ||
| 18 | - <style is="custom-style"> | ||
| 19 | - /* body { | ||
| 20 | - margin: 0; | ||
| 21 | - padding: 3em; | ||
| 22 | - -webkit-tap-highlight-color: rgba(0,0,0,0); | ||
| 23 | - -webkit-touch-callout: none; | ||
| 24 | - line-height: 0; | ||
| 25 | - font-size: 1vw; | ||
| 26 | - } | ||
| 27 | - | ||
| 28 | - | ||
| 29 | - :host ::content .content{ | ||
| 30 | - position: relative; | ||
| 31 | - float: left; | ||
| 32 | - margin : .5em; | ||
| 33 | - | ||
| 34 | - /!*height: 9em; | ||
| 35 | - width: 9em;*!/ | ||
| 36 | - min-width: 80px; | ||
| 37 | - max-width: 115px; | ||
| 38 | - background: #fff; | ||
| 39 | - border-radius: 0.125rem; | ||
| 40 | - box-shadow: 0 0.625em 0.5125em 0 rgba(0, 0, 0, 0.25); | ||
| 41 | - padding: 1em; | ||
| 42 | - } | ||
| 43 | - | ||
| 44 | - :host ::content .content-selected{ | ||
| 45 | - position: relative; | ||
| 46 | - float: left; | ||
| 47 | - top : .5em; | ||
| 48 | - margin : .5em; | ||
| 49 | - | ||
| 50 | - /!*height: 9em; | ||
| 51 | - width: 8em;*!/ | ||
| 52 | - min-width: 80px; | ||
| 53 | - max-width: 115px; | ||
| 54 | - | ||
| 55 | - background: #fff; | ||
| 56 | - border-style: solid; | ||
| 57 | - border-width: 0.03em; | ||
| 58 | - border-radius: 0.125rem; | ||
| 59 | - box-shadow: 0 1.825em 1.7125em 0 rgba(0, 0, 0, 0.50); | ||
| 60 | - padding: 1em; | ||
| 61 | - } | ||
| 62 | - | ||
| 63 | - img .card-content{ | ||
| 64 | - padding: 0.5px 0 0.5px; | ||
| 65 | - } | ||
| 66 | - | ||
| 67 | - .title { | ||
| 68 | - display: inline-block; | ||
| 69 | - position: relative; | ||
| 70 | - padding-left: .2em; | ||
| 71 | - padding-right: .2em; | ||
| 72 | - color: var(--paper-indigo-500); | ||
| 73 | - } | ||
| 74 | - | ||
| 75 | - .title .big { | ||
| 76 | - /!*font-size: 1.1em;*!/ | ||
| 77 | - widht: 100%; | ||
| 78 | - font-size: 0.9em; | ||
| 79 | - color: var(--google-grey-500); | ||
| 80 | - } | ||
| 81 | - | ||
| 82 | - .toolbar_button{ | ||
| 83 | - /!*height: 100%; | ||
| 84 | - display: inline-block;*!/ | ||
| 85 | - float: left; | ||
| 86 | - margin-top: 3.5em; | ||
| 87 | - --iron-icon-height: 28px; | ||
| 88 | - --iron-icon-width: 28px; | ||
| 89 | - } | ||
| 90 | - | ||
| 91 | - #pages{ | ||
| 92 | - position: relative; | ||
| 93 | - float:left; | ||
| 94 | - display: inline-block; | ||
| 95 | - height: 22vh; | ||
| 96 | - width: 80%; | ||
| 97 | - overflow: hidden; | ||
| 98 | - text-align: center; | ||
| 99 | - /!*margin-left: 3em;*!/ | ||
| 100 | - }*/ | ||
| 101 | - | ||
| 102 | - .ca-item-main-selected{ | ||
| 103 | - padding:20px; | ||
| 104 | - position:absolute; | ||
| 105 | - top:5px; | ||
| 106 | - left:5px; | ||
| 107 | - right:5px; | ||
| 108 | - bottom:5px; | ||
| 109 | - border-radius: 4px; | ||
| 110 | - -webkit-box-shadow: 1px 0px 8px 0px rgba(50, 50, 50, 1); | ||
| 111 | - -moz-box-shadow: 1px 0px 8px 0px rgba(50, 50, 50, 1); | ||
| 112 | - box-shadow: 1px 0px 8px 0px rgba(50, 50, 50, 1); | ||
| 113 | - } | ||
| 114 | - | ||
| 115 | - </style> | ||
| 116 | - | ||
| 117 | - | ||
| 118 | - <div id="ca_container" class="ca-container"> | ||
| 119 | - <div id="cards" class="ca-wrapper"> | ||
| 120 | - <template is="dom-repeat" items="{{items}}" as="item" index-as="i"> | ||
| 121 | - <div class="ca-item" id="{{getName(i)}}" on-click="_cardClick"> | ||
| 122 | - <div class="ca-item-main"> | ||
| 123 | - <div class="card-content"> | ||
| 124 | - <div class="title"> | ||
| 125 | - <div class="big">{{getName(i)}}</div> | ||
| 126 | - </div> | ||
| 127 | - </div> | ||
| 128 | - <br> | ||
| 129 | - <div class="card-content"> | ||
| 130 | - <img width="75px" height="50px" src="{{getImage(i)}}" > | ||
| 131 | - </div> | ||
| 132 | - </div> | ||
| 133 | - </div> | ||
| 134 | - </template> | ||
| 135 | - </div> | ||
| 136 | - </div> | ||
| 137 | - | ||
| 138 | - </template> | ||
| 139 | - | ||
| 140 | - <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> | ||
| 141 | - <script type="text/javascript" src="js/jquery.mousewheel.js"></script> | ||
| 142 | - <script type="text/javascript" src="js/jquery.contentcarousel.js"></script> | ||
| 143 | - | ||
| 144 | - <script> | ||
| 145 | - | ||
| 146 | - Polymer({ | ||
| 147 | - | ||
| 148 | - is : 'items-slider-controllet', | ||
| 149 | - | ||
| 150 | - properties : { | ||
| 151 | - | ||
| 152 | - entryAnimation : { | ||
| 153 | - type : String, | ||
| 154 | - value : "" | ||
| 155 | - }, | ||
| 156 | - | ||
| 157 | - exitAnimation : { | ||
| 158 | - type : String, | ||
| 159 | - value : "" | ||
| 160 | - }, | ||
| 161 | - | ||
| 162 | - selected : { | ||
| 163 | - type : Number, | ||
| 164 | - value : 0 | ||
| 165 | - }, | ||
| 166 | - | ||
| 167 | - /** | ||
| 168 | - * It stores all items to put in the slider | ||
| 169 | - * | ||
| 170 | - * @attribute tools | ||
| 171 | - * @type array | ||
| 172 | - * @default 'null' | ||
| 173 | - */ | ||
| 174 | - items : { | ||
| 175 | - type: Array, | ||
| 176 | - value: [] | ||
| 177 | - }, | ||
| 178 | - | ||
| 179 | - itemsPages : { | ||
| 180 | - type : Array, | ||
| 181 | - value : [] | ||
| 182 | - }, | ||
| 183 | - | ||
| 184 | - itemsPerPage : { | ||
| 185 | - type : Array, | ||
| 186 | - value : [] | ||
| 187 | - }, | ||
| 188 | - | ||
| 189 | - prevSelectedCard : { | ||
| 190 | - type: Object, | ||
| 191 | - value : null | ||
| 192 | - }, | ||
| 193 | - | ||
| 194 | - numItemsPerPage : { | ||
| 195 | - type: Number, | ||
| 196 | - value : 4 | ||
| 197 | - } | ||
| 198 | - | ||
| 199 | - }, | ||
| 200 | - | ||
| 201 | - getName : function(index){ | ||
| 202 | - return this.items[index].name.replace("-datalet",""); | ||
| 203 | - }, | ||
| 204 | - | ||
| 205 | - getImage : function(index){ | ||
| 206 | - return this.items[index].image; | ||
| 207 | - }, | ||
| 208 | - | ||
| 209 | - ready : function(){ | ||
| 210 | - /* this.$.cards.innerHTML = ''; | ||
| 211 | - for(var i = 0; i < this.items.length; i++){ | ||
| 212 | - this.$.cards.innerHTML += '<div class="ca-item">' + | ||
| 213 | - '<div class="ca-item-main" on-click="_cardClick">' + | ||
| 214 | - '<div class="card-content">' + | ||
| 215 | - '<div class="title">' + | ||
| 216 | - '<div class="big">' +this.items[i].name.replace("-datalet","") + '</div>' + | ||
| 217 | - '</div>' + | ||
| 218 | - '</div>' + | ||
| 219 | - '<br>' + | ||
| 220 | - '<div class="card-content">' + | ||
| 221 | - '<img width="75px" height="50px" src="' + this.items[i].image + '" >' + | ||
| 222 | - '</div>' + | ||
| 223 | - '</div>' + | ||
| 224 | - '</div>'; | ||
| 225 | - | ||
| 226 | - }*/ | ||
| 227 | - | ||
| 228 | - this.async(function(){ | ||
| 229 | - $(this.$.ca_container).contentcarousel(); | ||
| 230 | - },1000) | ||
| 231 | - | ||
| 232 | - }, | ||
| 233 | - | ||
| 234 | - _cardClick : function(e){ | ||
| 235 | - if(this.prevSelectedCard != null){ | ||
| 236 | - this.prevSelectedCard.children[0].className = "ca-item-main"; | ||
| 237 | - | ||
| 238 | - } | ||
| 239 | - e.currentTarget.children[0].className = "ca-item-main-selected style-scope items-slider-controllet"; | ||
| 240 | - this.prevSelectedCard = e.currentTarget; | ||
| 241 | - | ||
| 242 | - this.fire('items-slider-controllet_item-selected', {datalet: e.currentTarget.id + "-datalet"}); | ||
| 243 | - | ||
| 244 | - } | ||
| 245 | - }); | ||
| 246 | - | ||
| 247 | - </script> | ||
| 248 | - | ||
| 249 | -</dom-module> | ||
| 250 | \ No newline at end of file | 0 | \ No newline at end of file |
controllets/items-slider-controllet/js/jquery.contentcarousel.js deleted
| 1 | -(function($) { | ||
| 2 | - var aux = { | ||
| 3 | - // navigates left / right | ||
| 4 | - navigate : function( dir, $el, $wrapper, opts, cache ) { | ||
| 5 | - | ||
| 6 | - var scroll = opts.scroll, | ||
| 7 | - factor = 1, | ||
| 8 | - idxClicked = 0; | ||
| 9 | - | ||
| 10 | - if( cache.expanded ) { | ||
| 11 | - scroll = 1; // scroll is always 1 in full mode | ||
| 12 | - factor = 3; // the width of the expanded item will be 3 times bigger than 1 collapsed item | ||
| 13 | - idxClicked = cache.idxClicked; // the index of the clicked item | ||
| 14 | - } | ||
| 15 | - | ||
| 16 | - // clone the elements on the right / left and append / prepend them according to dir and scroll | ||
| 17 | - if( dir === 1 ) { | ||
| 18 | - $wrapper.find('div.ca-item:lt(' + scroll + ')').each(function(i) { | ||
| 19 | - $(this).clone(true).css( 'left', ( cache.totalItems - idxClicked + i ) * cache.itemW * factor + 'px' ).appendTo( $wrapper ); | ||
| 20 | - }); | ||
| 21 | - } | ||
| 22 | - else { | ||
| 23 | - var $first = $wrapper.children().eq(0); | ||
| 24 | - | ||
| 25 | - $wrapper.find('div.ca-item:gt(' + ( cache.totalItems - 1 - scroll ) + ')').each(function(i) { | ||
| 26 | - // insert before $first so they stay in the right order | ||
| 27 | - $(this).clone(true).css( 'left', - ( scroll - i + idxClicked ) * cache.itemW * factor + 'px' ).insertBefore( $first ); | ||
| 28 | - }); | ||
| 29 | - } | ||
| 30 | - | ||
| 31 | - // animate the left of each item | ||
| 32 | - // the calculations are dependent on dir and on the cache.expanded value | ||
| 33 | - $wrapper.find('div.ca-item').each(function(i) { | ||
| 34 | - var $item = $(this); | ||
| 35 | - $item.stop().animate({ | ||
| 36 | - left : ( dir === 1 ) ? '-=' + ( cache.itemW * factor * scroll ) + 'px' : '+=' + ( cache.itemW * factor * scroll ) + 'px' | ||
| 37 | - }, opts.sliderSpeed, opts.sliderEasing, function() { | ||
| 38 | - if( ( dir === 1 && $item.position().left < - idxClicked * cache.itemW * factor ) || ( dir === -1 && $item.position().left > ( ( cache.totalItems - 1 - idxClicked ) * cache.itemW * factor ) ) ) { | ||
| 39 | - // remove the item that was cloned | ||
| 40 | - $item.remove(); | ||
| 41 | - } | ||
| 42 | - cache.isAnimating = false; | ||
| 43 | - }); | ||
| 44 | - }); | ||
| 45 | - | ||
| 46 | - }, | ||
| 47 | - // opens an item (animation) -> opens all the others | ||
| 48 | - openItem : function( $wrapper, $item, opts, cache ) { | ||
| 49 | - cache.idxClicked = $item.index(); | ||
| 50 | - // the item's position (1, 2, or 3) on the viewport (the visible items) | ||
| 51 | - cache.winpos = aux.getWinPos( $item.position().left, cache ); | ||
| 52 | - $wrapper.find('div.ca-item').not( $item ).hide(); | ||
| 53 | - $item.find('div.ca-content-wrapper').css( 'left', cache.itemW + 'px' ).stop().animate({ | ||
| 54 | - width : cache.itemW * 2 + 'px', | ||
| 55 | - left : cache.itemW + 'px' | ||
| 56 | - }, opts.itemSpeed, opts.itemEasing) | ||
| 57 | - .end() | ||
| 58 | - .stop() | ||
| 59 | - .animate({ | ||
| 60 | - left : '0px' | ||
| 61 | - }, opts.itemSpeed, opts.itemEasing, function() { | ||
| 62 | - cache.isAnimating = false; | ||
| 63 | - cache.expanded = true; | ||
| 64 | - | ||
| 65 | - aux.openItems( $wrapper, $item, opts, cache ); | ||
| 66 | - }); | ||
| 67 | - | ||
| 68 | - }, | ||
| 69 | - // opens all the items | ||
| 70 | - openItems : function( $wrapper, $openedItem, opts, cache ) { | ||
| 71 | - var openedIdx = $openedItem.index(); | ||
| 72 | - | ||
| 73 | - $wrapper.find('div.ca-item').each(function(i) { | ||
| 74 | - var $item = $(this), | ||
| 75 | - idx = $item.index(); | ||
| 76 | - | ||
| 77 | - if( idx !== openedIdx ) { | ||
| 78 | - $item.css( 'left', - ( openedIdx - idx ) * ( cache.itemW * 3 ) + 'px' ).show().find('div.ca-content-wrapper').css({ | ||
| 79 | - left : cache.itemW + 'px', | ||
| 80 | - width : cache.itemW * 2 + 'px' | ||
| 81 | - }); | ||
| 82 | - | ||
| 83 | - // hide more link | ||
| 84 | - aux.toggleMore( $item, false ); | ||
| 85 | - } | ||
| 86 | - }); | ||
| 87 | - }, | ||
| 88 | - // show / hide the item's more button | ||
| 89 | - toggleMore : function( $item, show ) { | ||
| 90 | - ( show ) ? $item.find('a.ca-more').show() : $item.find('a.ca-more').hide(); | ||
| 91 | - }, | ||
| 92 | - // close all the items | ||
| 93 | - // the current one is animated | ||
| 94 | - closeItems : function( $wrapper, $openedItem, opts, cache ) { | ||
| 95 | - var openedIdx = $openedItem.index(); | ||
| 96 | - | ||
| 97 | - $openedItem.find('div.ca-content-wrapper').stop().animate({ | ||
| 98 | - width : '0px' | ||
| 99 | - }, opts.itemSpeed, opts.itemEasing) | ||
| 100 | - .end() | ||
| 101 | - .stop() | ||
| 102 | - .animate({ | ||
| 103 | - left : cache.itemW * ( cache.winpos - 1 ) + 'px' | ||
| 104 | - }, opts.itemSpeed, opts.itemEasing, function() { | ||
| 105 | - cache.isAnimating = false; | ||
| 106 | - cache.expanded = false; | ||
| 107 | - }); | ||
| 108 | - | ||
| 109 | - // show more link | ||
| 110 | - aux.toggleMore( $openedItem, true ); | ||
| 111 | - | ||
| 112 | - $wrapper.find('div.ca-item').each(function(i) { | ||
| 113 | - var $item = $(this), | ||
| 114 | - idx = $item.index(); | ||
| 115 | - | ||
| 116 | - if( idx !== openedIdx ) { | ||
| 117 | - $item.find('div.ca-content-wrapper').css({ | ||
| 118 | - width : '0px' | ||
| 119 | - }) | ||
| 120 | - .end() | ||
| 121 | - .css( 'left', ( ( cache.winpos - 1 ) - ( openedIdx - idx ) ) * cache.itemW + 'px' ) | ||
| 122 | - .show(); | ||
| 123 | - | ||
| 124 | - // show more link | ||
| 125 | - aux.toggleMore( $item, true ); | ||
| 126 | - } | ||
| 127 | - }); | ||
| 128 | - }, | ||
| 129 | - // gets the item's position (1, 2, or 3) on the viewport (the visible items) | ||
| 130 | - // val is the left of the item | ||
| 131 | - getWinPos : function( val, cache ) { | ||
| 132 | - switch( val ) { | ||
| 133 | - case 0 : return 1; break; | ||
| 134 | - case cache.itemW : return 2; break; | ||
| 135 | - case cache.itemW * 2 : return 3; break; | ||
| 136 | - } | ||
| 137 | - } | ||
| 138 | - }, | ||
| 139 | - methods = { | ||
| 140 | - init : function( options ) { | ||
| 141 | - | ||
| 142 | - if( this.length ) { | ||
| 143 | - | ||
| 144 | - var settings = { | ||
| 145 | - sliderSpeed : 500, // speed for the sliding animation | ||
| 146 | - sliderEasing : 'easeOutExpo',// easing for the sliding animation | ||
| 147 | - itemSpeed : 500, // speed for the item animation (open / close) | ||
| 148 | - itemEasing : 'easeOutExpo',// easing for the item animation (open / close) | ||
| 149 | - scroll : 1 // number of items to scroll at a time | ||
| 150 | - }; | ||
| 151 | - | ||
| 152 | - return this.each(function() { | ||
| 153 | - | ||
| 154 | - // if options exist, lets merge them with our default settings | ||
| 155 | - if ( options ) { | ||
| 156 | - $.extend( settings, options ); | ||
| 157 | - } | ||
| 158 | - | ||
| 159 | - var $el = $(this), | ||
| 160 | - $wrapper = $el.find('div.ca-wrapper'), | ||
| 161 | - $items = $wrapper.children('div.ca-item'), | ||
| 162 | - cache = {}; | ||
| 163 | - | ||
| 164 | - // save the with of one item | ||
| 165 | - cache.itemW = $items.width(); | ||
| 166 | - // save the number of total items | ||
| 167 | - cache.totalItems = $items.length; | ||
| 168 | - | ||
| 169 | - // add navigation buttons | ||
| 170 | - if( cache.totalItems > 3 ) | ||
| 171 | - $el.prepend('<div class="ca-nav"><span class="ca-nav-prev">Previous</span><span class="ca-nav-next">Next</span></div>') | ||
| 172 | - | ||
| 173 | - // control the scroll value | ||
| 174 | - if( settings.scroll < 1 ) | ||
| 175 | - settings.scroll = 1; | ||
| 176 | - else if( settings.scroll > 3 ) | ||
| 177 | - settings.scroll = 3; | ||
| 178 | - | ||
| 179 | - var $navPrev = $el.find('span.ca-nav-prev'), | ||
| 180 | - $navNext = $el.find('span.ca-nav-next'); | ||
| 181 | - | ||
| 182 | - // hide the items except the first 3 | ||
| 183 | - $wrapper.css( 'overflow', 'hidden' ); | ||
| 184 | - | ||
| 185 | - // the items will have position absolute | ||
| 186 | - // calculate the left of each item | ||
| 187 | - $items.each(function(i) { | ||
| 188 | - $(this).css({ | ||
| 189 | - position : 'absolute', | ||
| 190 | - left : i * cache.itemW + 'px' | ||
| 191 | - }); | ||
| 192 | - }); | ||
| 193 | - | ||
| 194 | - // click to open the item(s) | ||
| 195 | - $el.find('a.ca-more').live('click.contentcarousel', function( event ) { | ||
| 196 | - if( cache.isAnimating ) return false; | ||
| 197 | - cache.isAnimating = true; | ||
| 198 | - $(this).hide(); | ||
| 199 | - var $item = $(this).closest('div.ca-item'); | ||
| 200 | - aux.openItem( $wrapper, $item, settings, cache ); | ||
| 201 | - return false; | ||
| 202 | - }); | ||
| 203 | - | ||
| 204 | - // click to close the item(s) | ||
| 205 | - $el.find('a.ca-close').live('click.contentcarousel', function( event ) { | ||
| 206 | - if( cache.isAnimating ) return false; | ||
| 207 | - cache.isAnimating = true; | ||
| 208 | - var $item = $(this).closest('div.ca-item'); | ||
| 209 | - aux.closeItems( $wrapper, $item, settings, cache ); | ||
| 210 | - return false; | ||
| 211 | - }); | ||
| 212 | - | ||
| 213 | - // navigate left | ||
| 214 | - $navPrev.bind('click.contentcarousel', function( event ) { | ||
| 215 | - if( cache.isAnimating ) return false; | ||
| 216 | - cache.isAnimating = true; | ||
| 217 | - aux.navigate( -1, $el, $wrapper, settings, cache ); | ||
| 218 | - }); | ||
| 219 | - | ||
| 220 | - // navigate right | ||
| 221 | - $navNext.bind('click.contentcarousel', function( event ) { | ||
| 222 | - if( cache.isAnimating ) return false; | ||
| 223 | - cache.isAnimating = true; | ||
| 224 | - aux.navigate( 1, $el, $wrapper, settings, cache ); | ||
| 225 | - }); | ||
| 226 | - | ||
| 227 | - // adds events to the mouse | ||
| 228 | - $el.bind('mousewheel.contentcarousel', function(e, delta) { | ||
| 229 | - if(delta > 0) { | ||
| 230 | - if( cache.isAnimating ) return false; | ||
| 231 | - cache.isAnimating = true; | ||
| 232 | - aux.navigate( -1, $el, $wrapper, settings, cache ); | ||
| 233 | - } | ||
| 234 | - else { | ||
| 235 | - if( cache.isAnimating ) return false; | ||
| 236 | - cache.isAnimating = true; | ||
| 237 | - aux.navigate( 1, $el, $wrapper, settings, cache ); | ||
| 238 | - } | ||
| 239 | - return false; | ||
| 240 | - }); | ||
| 241 | - | ||
| 242 | - }); | ||
| 243 | - } | ||
| 244 | - } | ||
| 245 | - }; | ||
| 246 | - | ||
| 247 | - $.fn.contentcarousel = function(method) { | ||
| 248 | - if ( methods[method] ) { | ||
| 249 | - return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 )); | ||
| 250 | - } else if ( typeof method === 'object' || ! method ) { | ||
| 251 | - return methods.init.apply( this, arguments ); | ||
| 252 | - } else { | ||
| 253 | - $.error( 'Method ' + method + ' does not exist on jQuery.contentcarousel' ); | ||
| 254 | - } | ||
| 255 | - }; | ||
| 256 | - | ||
| 257 | -})(jQuery); | ||
| 258 | \ No newline at end of file | 0 | \ No newline at end of file |
controllets/items-slider-controllet/js/jquery.easing.1.3.js deleted
| 1 | -/* | ||
| 2 | - * jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/ | ||
| 3 | - * | ||
| 4 | - * Uses the built in easing capabilities added In jQuery 1.1 | ||
| 5 | - * to offer multiple easing options | ||
| 6 | - * | ||
| 7 | - * TERMS OF USE - jQuery Easing | ||
| 8 | - * | ||
| 9 | - * Open source under the BSD License. | ||
| 10 | - * | ||
| 11 | - * Copyright © 2008 George McGinley Smith | ||
| 12 | - * All rights reserved. | ||
| 13 | - * | ||
| 14 | - * Redistribution and use in source and binary forms, with or without modification, | ||
| 15 | - * are permitted provided that the following conditions are met: | ||
| 16 | - * | ||
| 17 | - * Redistributions of source code must retain the above copyright notice, this list of | ||
| 18 | - * conditions and the following disclaimer. | ||
| 19 | - * Redistributions in binary form must reproduce the above copyright notice, this list | ||
| 20 | - * of conditions and the following disclaimer in the documentation and/or other materials | ||
| 21 | - * provided with the distribution. | ||
| 22 | - * | ||
| 23 | - * Neither the name of the author nor the names of contributors may be used to endorse | ||
| 24 | - * or promote products derived from this software without specific prior written permission. | ||
| 25 | - * | ||
| 26 | - * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY | ||
| 27 | - * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF | ||
| 28 | - * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE | ||
| 29 | - * COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, | ||
| 30 | - * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE | ||
| 31 | - * GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED | ||
| 32 | - * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING | ||
| 33 | - * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED | ||
| 34 | - * OF THE POSSIBILITY OF SUCH DAMAGE. | ||
| 35 | - * | ||
| 36 | -*/ | ||
| 37 | - | ||
| 38 | -// t: current time, b: begInnIng value, c: change In value, d: duration | ||
| 39 | -jQuery.easing['jswing'] = jQuery.easing['swing']; | ||
| 40 | - | ||
| 41 | -jQuery.extend( jQuery.easing, | ||
| 42 | -{ | ||
| 43 | - def: 'easeOutQuad', | ||
| 44 | - swing: function (x, t, b, c, d) { | ||
| 45 | - //alert(jQuery.easing.default); | ||
| 46 | - return jQuery.easing[jQuery.easing.def](x, t, b, c, d); | ||
| 47 | - }, | ||
| 48 | - easeInQuad: function (x, t, b, c, d) { | ||
| 49 | - return c*(t/=d)*t + b; | ||
| 50 | - }, | ||
| 51 | - easeOutQuad: function (x, t, b, c, d) { | ||
| 52 | - return -c *(t/=d)*(t-2) + b; | ||
| 53 | - }, | ||
| 54 | - easeInOutQuad: function (x, t, b, c, d) { | ||
| 55 | - if ((t/=d/2) < 1) return c/2*t*t + b; | ||
| 56 | - return -c/2 * ((--t)*(t-2) - 1) + b; | ||
| 57 | - }, | ||
| 58 | - easeInCubic: function (x, t, b, c, d) { | ||
| 59 | - return c*(t/=d)*t*t + b; | ||
| 60 | - }, | ||
| 61 | - easeOutCubic: function (x, t, b, c, d) { | ||
| 62 | - return c*((t=t/d-1)*t*t + 1) + b; | ||
| 63 | - }, | ||
| 64 | - easeInOutCubic: function (x, t, b, c, d) { | ||
| 65 | - if ((t/=d/2) < 1) return c/2*t*t*t + b; | ||
| 66 | - return c/2*((t-=2)*t*t + 2) + b; | ||
| 67 | - }, | ||
| 68 | - easeInQuart: function (x, t, b, c, d) { | ||
| 69 | - return c*(t/=d)*t*t*t + b; | ||
| 70 | - }, | ||
| 71 | - easeOutQuart: function (x, t, b, c, d) { | ||
| 72 | - return -c * ((t=t/d-1)*t*t*t - 1) + b; | ||
| 73 | - }, | ||
| 74 | - easeInOutQuart: function (x, t, b, c, d) { | ||
| 75 | - if ((t/=d/2) < 1) return c/2*t*t*t*t + b; | ||
| 76 | - return -c/2 * ((t-=2)*t*t*t - 2) + b; | ||
| 77 | - }, | ||
| 78 | - easeInQuint: function (x, t, b, c, d) { | ||
| 79 | - return c*(t/=d)*t*t*t*t + b; | ||
| 80 | - }, | ||
| 81 | - easeOutQuint: function (x, t, b, c, d) { | ||
| 82 | - return c*((t=t/d-1)*t*t*t*t + 1) + b; | ||
| 83 | - }, | ||
| 84 | - easeInOutQuint: function (x, t, b, c, d) { | ||
| 85 | - if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b; | ||
| 86 | - return c/2*((t-=2)*t*t*t*t + 2) + b; | ||
| 87 | - }, | ||
| 88 | - easeInSine: function (x, t, b, c, d) { | ||
| 89 | - return -c * Math.cos(t/d * (Math.PI/2)) + c + b; | ||
| 90 | - }, | ||
| 91 | - easeOutSine: function (x, t, b, c, d) { | ||
| 92 | - return c * Math.sin(t/d * (Math.PI/2)) + b; | ||
| 93 | - }, | ||
| 94 | - easeInOutSine: function (x, t, b, c, d) { | ||
| 95 | - return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b; | ||
| 96 | - }, | ||
| 97 | - easeInExpo: function (x, t, b, c, d) { | ||
| 98 | - return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b; | ||
| 99 | - }, | ||
| 100 | - easeOutExpo: function (x, t, b, c, d) { | ||
| 101 | - return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b; | ||
| 102 | - }, | ||
| 103 | - easeInOutExpo: function (x, t, b, c, d) { | ||
| 104 | - if (t==0) return b; | ||
| 105 | - if (t==d) return b+c; | ||
| 106 | - if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b; | ||
| 107 | - return c/2 * (-Math.pow(2, -10 * --t) + 2) + b; | ||
| 108 | - }, | ||
| 109 | - easeInCirc: function (x, t, b, c, d) { | ||
| 110 | - return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b; | ||
| 111 | - }, | ||
| 112 | - easeOutCirc: function (x, t, b, c, d) { | ||
| 113 | - return c * Math.sqrt(1 - (t=t/d-1)*t) + b; | ||
| 114 | - }, | ||
| 115 | - easeInOutCirc: function (x, t, b, c, d) { | ||
| 116 | - if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b; | ||
| 117 | - return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b; | ||
| 118 | - }, | ||
| 119 | - easeInElastic: function (x, t, b, c, d) { | ||
| 120 | - var s=1.70158;var p=0;var a=c; | ||
| 121 | - if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; | ||
| 122 | - if (a < Math.abs(c)) { a=c; var s=p/4; } | ||
| 123 | - else var s = p/(2*Math.PI) * Math.asin (c/a); | ||
| 124 | - return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; | ||
| 125 | - }, | ||
| 126 | - easeOutElastic: function (x, t, b, c, d) { | ||
| 127 | - var s=1.70158;var p=0;var a=c; | ||
| 128 | - if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; | ||
| 129 | - if (a < Math.abs(c)) { a=c; var s=p/4; } | ||
| 130 | - else var s = p/(2*Math.PI) * Math.asin (c/a); | ||
| 131 | - return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b; | ||
| 132 | - }, | ||
| 133 | - easeInOutElastic: function (x, t, b, c, d) { | ||
| 134 | - var s=1.70158;var p=0;var a=c; | ||
| 135 | - if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5); | ||
| 136 | - if (a < Math.abs(c)) { a=c; var s=p/4; } | ||
| 137 | - else var s = p/(2*Math.PI) * Math.asin (c/a); | ||
| 138 | - if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; | ||
| 139 | - return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b; | ||
| 140 | - }, | ||
| 141 | - easeInBack: function (x, t, b, c, d, s) { | ||
| 142 | - if (s == undefined) s = 1.70158; | ||
| 143 | - return c*(t/=d)*t*((s+1)*t - s) + b; | ||
| 144 | - }, | ||
| 145 | - easeOutBack: function (x, t, b, c, d, s) { | ||
| 146 | - if (s == undefined) s = 1.70158; | ||
| 147 | - return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b; | ||
| 148 | - }, | ||
| 149 | - easeInOutBack: function (x, t, b, c, d, s) { | ||
| 150 | - if (s == undefined) s = 1.70158; | ||
| 151 | - if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b; | ||
| 152 | - return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b; | ||
| 153 | - }, | ||
| 154 | - easeInBounce: function (x, t, b, c, d) { | ||
| 155 | - return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b; | ||
| 156 | - }, | ||
| 157 | - easeOutBounce: function (x, t, b, c, d) { | ||
| 158 | - if ((t/=d) < (1/2.75)) { | ||
| 159 | - return c*(7.5625*t*t) + b; | ||
| 160 | - } else if (t < (2/2.75)) { | ||
| 161 | - return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b; | ||
| 162 | - } else if (t < (2.5/2.75)) { | ||
| 163 | - return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b; | ||
| 164 | - } else { | ||
| 165 | - return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b; | ||
| 166 | - } | ||
| 167 | - }, | ||
| 168 | - easeInOutBounce: function (x, t, b, c, d) { | ||
| 169 | - if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b; | ||
| 170 | - return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b; | ||
| 171 | - } | ||
| 172 | -}); | ||
| 173 | - | ||
| 174 | -/* | ||
| 175 | - * | ||
| 176 | - * TERMS OF USE - EASING EQUATIONS | ||
| 177 | - * | ||
| 178 | - * Open source under the BSD License. | ||
| 179 | - * | ||
| 180 | - * Copyright © 2001 Robert Penner | ||
| 181 | - * All rights reserved. | ||
| 182 | - * | ||
| 183 | - * Redistribution and use in source and binary forms, with or without modification, | ||
| 184 | - * are permitted provided that the following conditions are met: | ||
| 185 | - * | ||
| 186 | - * Redistributions of source code must retain the above copyright notice, this list of | ||
| 187 | - * conditions and the following disclaimer. | ||
| 188 | - * Redistributions in binary form must reproduce the above copyright notice, this list | ||
| 189 | - * of conditions and the following disclaimer in the documentation and/or other materials | ||
| 190 | - * provided with the distribution. | ||
| 191 | - * | ||
| 192 | - * Neither the name of the author nor the names of contributors may be used to endorse | ||
| 193 | - * or promote products derived from this software without specific prior written permission. | ||
| 194 | - * | ||
| 195 | - * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY | ||
| 196 | - * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF | ||
| 197 | - * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE | ||
| 198 | - * COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, | ||
| 199 | - * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE | ||
| 200 | - * GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED | ||
| 201 | - * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING | ||
| 202 | - * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED | ||
| 203 | - * OF THE POSSIBILITY OF SUCH DAMAGE. | ||
| 204 | - * | ||
| 205 | - */ | ||
| 206 | \ No newline at end of file | 0 | \ No newline at end of file |
controllets/items-slider-controllet/js/jquery.mousewheel.js deleted
| 1 | -/*! Copyright (c) 2010 Brandon Aaron (http://brandonaaron.net) | ||
| 2 | - * Licensed under the MIT License (LICENSE.txt). | ||
| 3 | - * | ||
| 4 | - * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers. | ||
| 5 | - * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix. | ||
| 6 | - * Thanks to: Seamus Leahy for adding deltaX and deltaY | ||
| 7 | - * | ||
| 8 | - * Version: 3.0.4 | ||
| 9 | - * | ||
| 10 | - * Requires: 1.2.2+ | ||
| 11 | - */ | ||
| 12 | - | ||
| 13 | -(function($) { | ||
| 14 | - | ||
| 15 | -var types = ['DOMMouseScroll', 'mousewheel']; | ||
| 16 | - | ||
| 17 | -$.event.special.mousewheel = { | ||
| 18 | - setup: function() { | ||
| 19 | - if ( this.addEventListener ) { | ||
| 20 | - for ( var i=types.length; i; ) { | ||
| 21 | - this.addEventListener( types[--i], handler, false ); | ||
| 22 | - } | ||
| 23 | - } else { | ||
| 24 | - this.onmousewheel = handler; | ||
| 25 | - } | ||
| 26 | - }, | ||
| 27 | - | ||
| 28 | - teardown: function() { | ||
| 29 | - if ( this.removeEventListener ) { | ||
| 30 | - for ( var i=types.length; i; ) { | ||
| 31 | - this.removeEventListener( types[--i], handler, false ); | ||
| 32 | - } | ||
| 33 | - } else { | ||
| 34 | - this.onmousewheel = null; | ||
| 35 | - } | ||
| 36 | - } | ||
| 37 | -}; | ||
| 38 | - | ||
| 39 | -$.fn.extend({ | ||
| 40 | - mousewheel: function(fn) { | ||
| 41 | - return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel"); | ||
| 42 | - }, | ||
| 43 | - | ||
| 44 | - unmousewheel: function(fn) { | ||
| 45 | - return this.unbind("mousewheel", fn); | ||
| 46 | - } | ||
| 47 | -}); | ||
| 48 | - | ||
| 49 | - | ||
| 50 | -function handler(event) { | ||
| 51 | - var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0; | ||
| 52 | - event = $.event.fix(orgEvent); | ||
| 53 | - event.type = "mousewheel"; | ||
| 54 | - | ||
| 55 | - // Old school scrollwheel delta | ||
| 56 | - if ( event.wheelDelta ) { delta = event.wheelDelta/120; } | ||
| 57 | - if ( event.detail ) { delta = -event.detail/3; } | ||
| 58 | - | ||
| 59 | - // New school multidimensional scroll (touchpads) deltas | ||
| 60 | - deltaY = delta; | ||
| 61 | - | ||
| 62 | - // Gecko | ||
| 63 | - if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) { | ||
| 64 | - deltaY = 0; | ||
| 65 | - deltaX = -1*delta; | ||
| 66 | - } | ||
| 67 | - | ||
| 68 | - // Webkit | ||
| 69 | - if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; } | ||
| 70 | - if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; } | ||
| 71 | - | ||
| 72 | - // Add event and delta to the front of the arguments | ||
| 73 | - args.unshift(event, delta, deltaX, deltaY); | ||
| 74 | - | ||
| 75 | - return $.event.handle.apply(this, args); | ||
| 76 | -} | ||
| 77 | - | ||
| 78 | -})(jQuery); | ||
| 79 | \ No newline at end of file | 0 | \ No newline at end of file |
controllets/treeview-controllet/treeview-controllet_.html deleted
| 1 | -<link rel="import" href="../../bower_components/polymer/polymer.html"> | ||
| 2 | -<link rel="import" href="../../bower_components/paper-styles/color.html"> | ||
| 3 | -<link rel="import" href="../../bower_components/paper-item/paper-item.html"> | ||
| 4 | -<link rel="import" href="../../bower_components/paper-card/paper-card.html"> | ||
| 5 | - | ||
| 6 | - | ||
| 7 | - | ||
| 8 | -<dom-module id="treeview-controllet"> | ||
| 9 | - <template> | ||
| 10 | - <style is="custom-style"> | ||
| 11 | - | ||
| 12 | - :host ::content .list { | ||
| 13 | - margin: .5rem; | ||
| 14 | - display: block; | ||
| 15 | - list-style-type: none; | ||
| 16 | - } | ||
| 17 | - | ||
| 18 | - :host ::content .list__item { | ||
| 19 | - margin: 0 0 .5rem 0; | ||
| 20 | - padding: 0; | ||
| 21 | - } | ||
| 22 | - | ||
| 23 | - :host ::content .label--checkbox { | ||
| 24 | - position: relative; | ||
| 25 | - margin: .5rem; | ||
| 26 | - font-family: Arial, sans-serif; | ||
| 27 | - line-height: 135%; | ||
| 28 | - cursor: pointer; | ||
| 29 | - padding-left: 30px; | ||
| 30 | - padding-top: 0px; | ||
| 31 | - } | ||
| 32 | - | ||
| 33 | - :host ::content .checkbox + label { | ||
| 34 | - /*text-indent: -5000px; | ||
| 35 | - height: 20px; | ||
| 36 | - width: auto;*/ | ||
| 37 | - } | ||
| 38 | - | ||
| 39 | - :host ::content input[type="checkbox"]:not(:checked), :host ::content input[type="checkbox"]:checked { | ||
| 40 | - position: relative; | ||
| 41 | - left: 10px; | ||
| 42 | - visibility: visible; | ||
| 43 | - } | ||
| 44 | - | ||
| 45 | - :host ::content .checkbox { | ||
| 46 | - position: relative; | ||
| 47 | - /*top: -0.375rem;*/ | ||
| 48 | - top: 3px; | ||
| 49 | - margin: 0 1rem 0 0; | ||
| 50 | - cursor: pointer; | ||
| 51 | - min-height: 0; | ||
| 52 | - max-height: 0; | ||
| 53 | - } | ||
| 54 | - | ||
| 55 | - :host ::content .checkbox:before { | ||
| 56 | - -webkit-transition: all 0.3s ease-in-out; | ||
| 57 | - -moz-transition: all 0.3s ease-in-out; | ||
| 58 | - transition: all 0.3s ease-in-out; | ||
| 59 | - content: ""; | ||
| 60 | - position: absolute; | ||
| 61 | - left: 0; | ||
| 62 | - z-index: 1; | ||
| 63 | - width: 1.2em; | ||
| 64 | - height: 1.2em; | ||
| 65 | - border: 2px solid #DDDDDD; | ||
| 66 | - } | ||
| 67 | - | ||
| 68 | - :host ::content .checkbox:checked:before { | ||
| 69 | - -webkit-transform: rotate(-45deg); | ||
| 70 | - -moz-transform: rotate(-45deg); | ||
| 71 | - -ms-transform: rotate(-45deg); | ||
| 72 | - -o-transform: rotate(-45deg); | ||
| 73 | - transform: rotate(-45deg); | ||
| 74 | - height: 1em; | ||
| 75 | - border-color: var(--paper-blue-500); | ||
| 76 | - border-top-style: none; | ||
| 77 | - border-right-style: none; | ||
| 78 | - } | ||
| 79 | - | ||
| 80 | - :host ::content .checkbox:after { | ||
| 81 | - content: ""; | ||
| 82 | - position: absolute; | ||
| 83 | - top: -0.125em; | ||
| 84 | - left: 0; | ||
| 85 | - width: 1.4em; | ||
| 86 | - height: 1.4em; | ||
| 87 | - background: #fff; | ||
| 88 | - cursor: pointer; | ||
| 89 | - } | ||
| 90 | - | ||
| 91 | - :host ::content .select-all{ | ||
| 92 | - position:relative; | ||
| 93 | - float:left; | ||
| 94 | - left: 20px; | ||
| 95 | - top: -3px; | ||
| 96 | - } | ||
| 97 | - | ||
| 98 | - :host ::content div.hiding_panel{ | ||
| 99 | - width: 100%; | ||
| 100 | - height: 15px; | ||
| 101 | - /*padding: 3px; | ||
| 102 | - height: 35px; | ||
| 103 | - border: 1px; | ||
| 104 | - background: #fff; | ||
| 105 | - border-radius: 0.125rem; | ||
| 106 | - box-shadow: 0 0.125rem 0.3125rem 0 rgba(0, 0, 0, 0.25);*/ | ||
| 107 | - } | ||
| 108 | - | ||
| 109 | - :host ::content div.panel-title{ | ||
| 110 | - position: relative; | ||
| 111 | - float: left; | ||
| 112 | - padding-left: 10px; | ||
| 113 | - font-weight: bolder; | ||
| 114 | - color: #000000; | ||
| 115 | - } | ||
| 116 | - | ||
| 117 | - :host ::content iron-icon.panel-hide-trigger { | ||
| 118 | - position: relative; | ||
| 119 | - float: left; | ||
| 120 | - height: 24px; | ||
| 121 | - width: 24px; | ||
| 122 | - border-radius: 50%; | ||
| 123 | - /*background: var(--paper-pink-500);*/ | ||
| 124 | - background: #348ED5; | ||
| 125 | - color: white; | ||
| 126 | - line-height: 64px; | ||
| 127 | - } | ||
| 128 | - | ||
| 129 | - :host ::content iron-icon.panel-hide-trigger:hover { | ||
| 130 | - /*color: var(--google-gray-700);*/ | ||
| 131 | - color : #000000; | ||
| 132 | - } | ||
| 133 | - | ||
| 134 | - :host ::content .items-list{ | ||
| 135 | - display: none; | ||
| 136 | - } | ||
| 137 | - | ||
| 138 | - </style> | ||
| 139 | - | ||
| 140 | - <div class="vertical-section"> | ||
| 141 | - <div id="treeview_placeholder" class="horizontal-section"></div> | ||
| 142 | - </div> | ||
| 143 | - | ||
| 144 | - </template> | ||
| 145 | - | ||
| 146 | - <script> | ||
| 147 | - | ||
| 148 | - Polymer({ | ||
| 149 | - | ||
| 150 | - is : 'treeview-controllet', | ||
| 151 | - | ||
| 152 | - listeners : { | ||
| 153 | - 'tap' : '_clickHandler' | ||
| 154 | - }, | ||
| 155 | - | ||
| 156 | - properties : { | ||
| 157 | - | ||
| 158 | - fieldsMap : { | ||
| 159 | - type : Map, | ||
| 160 | - value : null | ||
| 161 | - } | ||
| 162 | - | ||
| 163 | - }, | ||
| 164 | - | ||
| 165 | - createFieldsContainer : function(id, heading, level){ | ||
| 166 | - | ||
| 167 | - var ul = document.createElement('ul'); | ||
| 168 | - ul.className = "list"; | ||
| 169 | - ul.id = id; | ||
| 170 | - ul.innerHTML = '<div class="hiding_panel">' + | ||
| 171 | - '<iron-icon icon="chevron-right" class="panel-hide-trigger"></iron-icon>' + | ||
| 172 | - '<div class="panel-title">' + heading + '</div>' + | ||
| 173 | - '<input id="'+ heading +'" type="checkbox" class="checkbox select-all">' + | ||
| 174 | - '</div>' + | ||
| 175 | - '<br>'; | ||
| 176 | - /*'<div class="items-list"></div>';*/ | ||
| 177 | - ul.innerHTML += (id.indexOf("records") != -1) ? '<div class="items-list" style="display:block;"></div>' : '<div class="items-list"></div>'; | ||
| 178 | - | ||
| 179 | - return ul; | ||
| 180 | - | ||
| 181 | - }, | ||
| 182 | - | ||
| 183 | - createListItem : function(id, label) { | ||
| 184 | - return '<li class="list__item">' | ||
| 185 | - + '<input id="'+ id +'" type="checkbox" class="checkbox">' | ||
| 186 | - + '<div class="label--checkbox">'+ label +'</div>' | ||
| 187 | - + '</li>'; | ||
| 188 | - }, | ||
| 189 | - | ||
| 190 | - analyzeObject : function(parent_list, curr_field, object) { | ||
| 191 | - if(object == null) return; | ||
| 192 | - if(curr_field != null){ | ||
| 193 | - if(object == null) object = ""; | ||
| 194 | - | ||
| 195 | - if(object.constructor == Array){//Deal with flat array case | ||
| 196 | - if(object[0].constructor != Object){ | ||
| 197 | - //MATERIAL CHECKBOX UL | ||
| 198 | - this.fieldsMap[parent_list[parent_list.length - 2]].children[2].innerHTML += this.createListItem(parent_list.toString(), curr_field); | ||
| 199 | - return; | ||
| 200 | - } | ||
| 201 | - } | ||
| 202 | - if(object.constructor == Array || object.constructor == Object){ | ||
| 203 | - var panel = this.createFieldsContainer(curr_field, parent_list[parent_list.length - 1], parent_list.length); | ||
| 204 | - this.fieldsMap[curr_field] = panel; | ||
| 205 | - //MATERIAL CHECKBOX UL | ||
| 206 | - this.fieldsMap[parent_list[parent_list.length - 2]].appendChild(this.fieldsMap[curr_field]); | ||
| 207 | - }else{ | ||
| 208 | - //MATERIAL CHECKBOX UL | ||
| 209 | - this.fieldsMap[parent_list[parent_list.length - 2]].children[2].innerHTML += this.createListItem(parent_list.toString(), curr_field); | ||
| 210 | - } | ||
| 211 | - } | ||
| 212 | - if(object.constructor == Array || object.constructor == Object) { | ||
| 213 | - var obj = (object.constructor == Array) ? object[0] : object; | ||
| 214 | - if(Object.prototype.toString.call(obj) === '[object String]') return;//Deal with flat array case | ||
| 215 | - for (var field in obj) { | ||
| 216 | - var parents = new Array(); | ||
| 217 | - parent_list.every(function (element, index, array) { | ||
| 218 | - parents.push(element); | ||
| 219 | - return true; | ||
| 220 | - }); | ||
| 221 | - parents.push(field); | ||
| 222 | - this.analyzeObject(parents, field, obj[field]); | ||
| 223 | - } | ||
| 224 | - } | ||
| 225 | - }, | ||
| 226 | - | ||
| 227 | - init : function(data){ | ||
| 228 | - //crete root node and insert it in to shadow dom | ||
| 229 | - var mainPanel = this.createFieldsContainer("root", "Data fields", 0); | ||
| 230 | - //MATERIAL CHECKBOX UL | ||
| 231 | - mainPanel.children[2].style.display = "block"; | ||
| 232 | - | ||
| 233 | - this.$.treeview_placeholder.innerHTML = ""; | ||
| 234 | - this.$.treeview_placeholder.appendChild(mainPanel); | ||
| 235 | - this.fieldsMap = new Map; | ||
| 236 | - this.fieldsMap["root"] = mainPanel; | ||
| 237 | - //call recursive analyze function for current json to get all fields user can select | ||
| 238 | - this.analyzeObject(new Array("root"), null, data); | ||
| 239 | - | ||
| 240 | - }, | ||
| 241 | - | ||
| 242 | - fireSelectedFields : function(){ | ||
| 243 | - | ||
| 244 | - var cbs = Polymer.dom(this.$.treeview_placeholder).querySelectorAll('input[type=checkbox]:checked'); | ||
| 245 | - var fields = Array(); | ||
| 246 | - for(var i=0;i<cbs.length;i++) { | ||
| 247 | - if(cbs[i].className.includes("select-all")) continue; | ||
| 248 | - fields.push(cbs[i].id.replace("root,","")); | ||
| 249 | - } | ||
| 250 | - | ||
| 251 | - this.fire('treeview-controllet-fileds-selected', {fields : fields}); | ||
| 252 | - }, | ||
| 253 | - | ||
| 254 | - _clickHandler : function(e){ | ||
| 255 | - if(Object.getPrototypeOf(e) !== CustomEvent.prototype) { | ||
| 256 | - e = e[Object.keys(e)[0]]; | ||
| 257 | - } | ||
| 258 | - | ||
| 259 | - if(!e.target.control) { | ||
| 260 | - switch((e.target.className.indexOf("iron-icon") != -1) ? "panel-hide-trigger" : e.target.className){ | ||
| 261 | - case 'checkbox': | ||
| 262 | - | ||
| 263 | - this.fireSelectedFields(); | ||
| 264 | - | ||
| 265 | - break; | ||
| 266 | - case 'panel-hide-trigger': | ||
| 267 | - | ||
| 268 | - if(e.target.parentNode.parentNode.children[2].style.display == "block") { | ||
| 269 | - e.target.parentNode.parentNode.children[2].style.cssText = "display: none;"; | ||
| 270 | - e.target.icon = "chevron-right"; | ||
| 271 | - | ||
| 272 | - }else{ | ||
| 273 | - e.target.parentNode.parentNode.children[2].style.cssText = "display: block;"; | ||
| 274 | - e.target.icon = "expand-more"; | ||
| 275 | - } | ||
| 276 | - break; | ||
| 277 | - case 'checkbox select-all': | ||
| 278 | - var childs = e.srcElement.parentNode.parentNode.children[2].childNodes; | ||
| 279 | - for(var i=0; i < childs.length; i++){ | ||
| 280 | - childs[i].children[0].checked = e.srcElement.checked; | ||
| 281 | - } | ||
| 282 | - | ||
| 283 | - this.fireSelectedFields(); | ||
| 284 | - | ||
| 285 | - break; | ||
| 286 | - } | ||
| 287 | - } | ||
| 288 | - } | ||
| 289 | - }); | ||
| 290 | - | ||
| 291 | - </script> | ||
| 292 | - | ||
| 293 | -</dom-module> | ||
| 294 | \ No newline at end of file | 0 | \ No newline at end of file |