SGH / COMPONENTS

Blame view

controllets/page-slider-controllet/demo/index.html 1.65 KB
Edit Raw Normal View History
94601c1f   Renato De Donato   trevieww multitable 
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
 
  <!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&aacute;gina</p></div>
      </neon-animatable>
      <neon-animatable>
          <div class="page" style="background-color: #BBDEFB;"><p>Pagina due</p><p>Page two</p><p>P&aacute;gina dos</p></div>
      </neon-animatable>
      <neon-animatable>
          <div class="page"><p>Pagina tre</p><p>Page three</p><p>P&aacute;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");
55ba476b   Renato De Donato   page-slider room 
39
 
                  slider.chevronLeft("invisible");
94601c1f   Renato De Donato   trevieww multitable 
40
41
42
43
44
45
46
47
48
49
50
51
52
53
 
                  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>