938d1928
Luigi Serra
Update documentat...
|
1
2
|
<!--
@license
|
584d6ecd
Luigi Serra
Update components...
|
3
|
The MIT License (MIT)
|
938d1928
Luigi Serra
Update documentat...
|
4
|
|
584d6ecd
Luigi Serra
Update components...
|
5
|
Copyright (c) 2015 Dipartimento di Informatica - Università di Salerno - Italy
|
938d1928
Luigi Serra
Update documentat...
|
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
-->
|
ae17a8dc
Luigi Serra
Controllet and da...
|
26
|
<!--
|
950d181d
Luigi Serra
license updates
|
27
28
|
* Developed by :
* ROUTE-TO-PA Project - grant No 645860. - www.routetopa.eu
|
ae17a8dc
Luigi Serra
Controllet and da...
|
29
30
31
|
*
-->
|
73bcce88
luigser
COMPONENTS
|
32
33
|
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-styles/color.html">
|
73bcce88
luigser
COMPONENTS
|
34
35
36
37
38
39
40
41
42
|
<link rel="import" href="../../bower_components/neon-animation/neon-animated-pages.html">
<link rel="import" href="../../bower_components/neon-animation/neon-animatable.html">
<link rel="import" href="../../bower_components/neon-animation/neon-animations.html">
<link rel="import" href="../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
|
584d6ecd
Luigi Serra
Update components...
|
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
<!--
`items-slider-controllet` is a carousel of cards with a title and an image. Pass to it an array of objects with name and image fields and
a responsive slider will be created. Every time the user click on a card an event will be generate in order to get the card clicked information to
the component that use the slider.
Example:
<items-slider-controllet items='[{name : "myObject1", image : "pathToMyImage1"},...,{name : "myObjectN", image : "pathToMyImageN"}]' \>
</items-slider-controllet>
@element items-slider-controllet
@status beta
@homepage index.html
@group controllets
-->
|
73bcce88
luigser
COMPONENTS
|
60
61
62
63
|
<dom-module id="items-slider-controllet">
<template>
<style is="custom-style">
|
73bcce88
luigser
COMPONENTS
|
64
|
|
74249687
Luigi Serra
Cross browser con...
|
65
|
::content .content-card{
|
73bcce88
luigser
COMPONENTS
|
66
67
68
|
position: relative;
float: left;
margin : .5em;
|
74249687
Luigi Serra
Cross browser con...
|
69
70
|
/* height: 8em;
width: 7em;
|
0b818d7e
Luigi Serra
Selection control...
|
71
|
min-width: 80px;
|
74249687
Luigi Serra
Cross browser con...
|
72
|
max-width: 115px;*/
|
7f074f84
Luigi Serra
cross browser bug...
|
73
|
width: 15.5%;
|
74249687
Luigi Serra
Cross browser con...
|
74
|
height: 70%;
|
73bcce88
luigser
COMPONENTS
|
75
|
background: #fff;
|
e619a3b0
Luigi Serra
Controllet cross ...
|
76
77
|
-moz-border-radius: 0.125rem;; /* Firefox */
-webkit-border-radius: 0.125rem;; /* Safari, Chrome */
|
73bcce88
luigser
COMPONENTS
|
78
|
border-radius: 0.125rem;
|
74249687
Luigi Serra
Cross browser con...
|
79
80
81
|
box-shadow: 0 0.625em 0.5125em 0 rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 0 0.625em 0.5125em 0 rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 0.625em 0.5125em 0 rgba(0, 0, 0, 0.25);
|
73bcce88
luigser
COMPONENTS
|
82
83
84
|
padding: 1em;
}
|
74249687
Luigi Serra
Cross browser con...
|
85
|
::content .content-selected{
|
73bcce88
luigser
COMPONENTS
|
86
87
|
position: relative;
float: left;
|
e619a3b0
Luigi Serra
Controllet cross ...
|
88
|
top : 5%;
|
73bcce88
luigser
COMPONENTS
|
89
|
margin : .5em;
|
7f074f84
Luigi Serra
cross browser bug...
|
90
|
width: 15.5%;
|
74249687
Luigi Serra
Cross browser con...
|
91
|
height: 70%;
|
0b818d7e
Luigi Serra
Selection control...
|
92
|
|
73bcce88
luigser
COMPONENTS
|
93
94
95
|
background: #fff;
border-style: solid;
border-width: 0.03em;
|
74249687
Luigi Serra
Cross browser con...
|
96
97
|
-moz-border-radius: 0.125rem;; /* Firefox */
-webkit-border-radius: 0.125rem;; /* Safari, Chrome */
|
73bcce88
luigser
COMPONENTS
|
98
|
border-radius: 0.125rem;
|
74249687
Luigi Serra
Cross browser con...
|
99
100
101
|
box-shadow: 0 1.825em 1.7125em 0 rgba(0, 0, 0, 0.50);
-webkit-box-shadow: 0 1.825em 1.7125em 0 rgba(0, 0, 0, 0.50);
-moz-box-shadow: 0 1.825em 1.7125em 0 rgba(0, 0, 0, 0.50);
|
73bcce88
luigser
COMPONENTS
|
102
103
104
|
padding: 1em;
}
|
74249687
Luigi Serra
Cross browser con...
|
105
|
.title {
|
73bcce88
luigser
COMPONENTS
|
106
107
108
109
110
|
display: inline-block;
position: relative;
padding-left: .2em;
padding-right: .2em;
color: var(--paper-indigo-500);
|
74249687
Luigi Serra
Cross browser con...
|
111
|
}
|
73bcce88
luigser
COMPONENTS
|
112
|
|
74249687
Luigi Serra
Cross browser con...
|
113
|
.title .big {
|
73bcce88
luigser
COMPONENTS
|
114
115
|
/*font-size: 1.1em;*/
widht: 100%;
|
0b818d7e
Luigi Serra
Selection control...
|
116
|
font-size: 0.9em;
|
73bcce88
luigser
COMPONENTS
|
117
|
color: var(--google-grey-500);
|
74249687
Luigi Serra
Cross browser con...
|
118
|
}
|
73bcce88
luigser
COMPONENTS
|
119
120
121
122
123
|
.toolbar_button{
/*height: 100%;
display: inline-block;*/
float: left;
|
e619a3b0
Luigi Serra
Controllet cross ...
|
124
|
margin-top: 10%;
|
24be6abb
Luigi Serra
selection control...
|
125
|
width: 30px;
|
73bcce88
luigser
COMPONENTS
|
126
127
128
129
|
--iron-icon-height: 28px;
--iron-icon-width: 28px;
}
|
74249687
Luigi Serra
Cross browser con...
|
130
|
#pages{
|
73bcce88
luigser
COMPONENTS
|
131
132
133
|
position: relative;
float:left;
display: inline-block;
|
325c348a
Luigi Serra
Cross browser bug...
|
134
|
height: 38vh;
|
e619a3b0
Luigi Serra
Controllet cross ...
|
135
|
width: 100%;
|
73bcce88
luigser
COMPONENTS
|
136
137
138
139
140
|
overflow: hidden;
text-align: center;
/*margin-left: 3em;*/
}
|
74249687
Luigi Serra
Cross browser con...
|
141
142
143
144
145
|
img{
height: 80%;
width: 80%;
}
|
73bcce88
luigser
COMPONENTS
|
146
147
|
</style>
|
73bcce88
luigser
COMPONENTS
|
148
149
150
151
152
|
<neon-animated-pages id="pages" class="flex" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">
<template is="dom-repeat" items="{{itemsPages}}" as="page" index-as="p">
<neon-animatable>
|
e619a3b0
Luigi Serra
Controllet cross ...
|
153
154
155
156
|
<paper-icon-button class="toolbar_button x-scope" on-click="_onPrevClick" icon="chevron-left" alt="arrow-back" title="arrow-back"></paper-icon-button>
<template is="dom-repeat" items="{{itemsPerPage}}" as="item" index-as="i">
|
73bcce88
luigser
COMPONENTS
|
157
|
<template is="dom-if" if="{{getName(p, i) != 0}}">
|
24be6abb
Luigi Serra
selection control...
|
158
|
<div class='content-card' id="{{getName(p, i)}}" page="{{p}}" on-click="_cardClick">
|
73bcce88
luigser
COMPONENTS
|
159
|
|
e619a3b0
Luigi Serra
Controllet cross ...
|
160
|
<div>
|
73bcce88
luigser
COMPONENTS
|
161
162
163
164
165
|
<div class="title">
<div class="big">{{getName(p, i)}}</div>
</div>
</div>
<br>
|
74249687
Luigi Serra
Cross browser con...
|
166
167
|
<div class="card-content-image">
<img src="{{getImage(p, i)}}">
|
73bcce88
luigser
COMPONENTS
|
168
169
170
171
|
</div>
</div>
</template>
</template>
|
e619a3b0
Luigi Serra
Controllet cross ...
|
172
173
174
|
<paper-icon-button class="toolbar_button x-scope" on-click="_onNextClick" icon="chevron-right" alt="arrow-forward" title="arrow-forward"></paper-icon-button>
|
73bcce88
luigser
COMPONENTS
|
175
176
177
178
179
|
</neon-animatable>
</template>
</neon-animated-pages>
|
73bcce88
luigser
COMPONENTS
|
180
|
</template>
|
73bcce88
luigser
COMPONENTS
|
181
182
183
184
185
|
<script>
Polymer({
|
584d6ecd
Luigi Serra
Update components...
|
186
187
188
189
190
191
192
|
is : 'items-slider-controllet',
/**
* Fired when the user selects a card from slider by clicking on it.
*
* @event items-slider-controllet_item-selected
*/
|
73bcce88
luigser
COMPONENTS
|
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
|
properties : {
entryAnimation : {
type : String,
value : ""
},
exitAnimation : {
type : String,
value : ""
},
selected : {
type : Number,
value : 0
},
/**
* It stores all items to put in the slider
*
|
73bcce88
luigser
COMPONENTS
|
214
215
216
217
218
|
*/
items : {
type: Array,
value: []
},
|
73bcce88
luigser
COMPONENTS
|
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
|
itemsPages : {
type : Array,
value : []
},
itemsPerPage : {
type : Array,
value : []
},
prevSelectedCard : {
type: Object,
value : null
},
numItemsPerPage : {
type: Number,
value : 4
|
24be6abb
Luigi Serra
selection control...
|
237
238
239
240
241
242
243
|
},
/**
* Presected card. You can pass the card title to preselect it.
*/
selectedCard:{
type: String,
value: undefined
|
73bcce88
luigser
COMPONENTS
|
244
245
246
247
248
249
250
251
252
253
|
}
},
ready : function(){
var pages = Math.floor(this.items.length / this.numItemsPerPage);
var mod = this.items.length % this.numItemsPerPage;
if(mod > 0) pages += 1;
|
0b818d7e
Luigi Serra
Selection control...
|
254
255
|
this.itemsPages = new Array();
this.itemsPerPage = new Array();
|
73bcce88
luigser
COMPONENTS
|
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
|
for(var i = 0; i < pages; i++){
this.itemsPages.push(i);
}
for(var i = 0; i < this.numItemsPerPage; i++){
this.itemsPerPage.push(i);
}
},
getPage : function(page){
return this.itemsPages[page];
},
getName : function(page, item){
return ( ((page * this.itemsPerPage.length) + item) > this.items.length - 1 ) ? 0 : this.items[(page * this.itemsPerPage.length) + item].name.replace("-datalet","");
},
getImage : function(page, item){
return ( ((page * this.itemsPerPage.length) + item) > this.items.length - 1 ) ? 0 : this.items[(page * this.itemsPerPage.length) + item].image;
},
_onPrevClick : function() {
this.entryAnimation = 'slide-from-left-animation';
this.exitAnimation = 'slide-right-animation';
this.selected = this.selected === 0 ? (this.itemsPages.length - 1) : (this.selected - 1);
},
_onNextClick : function() {
this.entryAnimation = 'slide-from-right-animation';
this.exitAnimation = 'slide-left-animation';
|
e619a3b0
Luigi Serra
Controllet cross ...
|
288
|
this.selected = this.selected === (this.itemsPages.length - 1) ? 0 : (this.selected + 1);
|
73bcce88
luigser
COMPONENTS
|
289
290
291
292
|
},
_cardClick : function(e){
if(this.prevSelectedCard != null){
|
e619a3b0
Luigi Serra
Controllet cross ...
|
293
|
this.prevSelectedCard.className = "content-card";
|
73bcce88
luigser
COMPONENTS
|
294
295
|
}
|
e619a3b0
Luigi Serra
Controllet cross ...
|
296
|
e.currentTarget.className = "content-selected";
|
73bcce88
luigser
COMPONENTS
|
297
298
299
300
|
this.prevSelectedCard = e.currentTarget;
this.fire('items-slider-controllet_item-selected', {datalet: e.currentTarget.id + "-datalet"});
|
74249687
Luigi Serra
Cross browser con...
|
301
302
303
|
},
attached : function(){
|
2b235978
Luigi Serra
Controllet cross ...
|
304
|
this.selected = 1;
|
24be6abb
Luigi Serra
selection control...
|
305
306
307
308
309
310
311
312
313
|
if(this.selectedCard != undefined){
this.async(function(){
var card = document.getElementById(this.selectedCard);
card.className = "content-selected";
this.prevSelectedCard = card;
this.fire('items-slider-controllet_item-selected', {datalet: this.selectedCard + "-datalet"});
this.selected = card.page;
},1000);
}
|
73bcce88
luigser
COMPONENTS
|
314
315
316
317
318
319
|
}
});
</script>
</dom-module>
|