index.html
1.65 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!doctype html>
<html>
<head>
<script src="../../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="../page-slider-controllet.html" />
</head>
<body>
<style>
.page {
height: 100vw;
text-align: center;
padding-top: 100px;
font-weight: bold;
}
</style>
<page-slider-controllet id="slider">
<neon-animatable>
<div class="page"><p>Pagina uno</p><p>Page one</p><p>Primera página</p></div>
</neon-animatable>
<neon-animatable>
<div class="page" style="background-color: #BBDEFB;"><p>Pagina due</p><p>Page two</p><p>Página dos</p></div>
</neon-animatable>
<neon-animatable>
<div class="page"><p>Pagina tre</p><p>Page three</p><p>Página tres</p></div>
</neon-animatable>
</page-slider-controllet>
<script>
var slider = document.getElementById('slider');
slider.addEventListener("page-slider-controllet_selected", function (e) {
switch (e.detail.selected) {
case 0:
slider.setTitle("DATASET SOURCE", "Copy and paste/drag and drop in the textarea the url of datasource");
slider.chevronLeft("invisible");
break;
case 1:
slider.setTitle("Title", "Subtitle");
slider.setAvatar("B");
break;
case 2:
slider.setTitle("DATA MAPPING", "Select the visualization from the slider, drag and drop the selected fields in visualization parameter area, customize the visualization if you need");
slider.chevronRight(false);
}
});
</script>
</body>
</html>