third_party/polymer/components/core-animated-pages/demos/simple.html

   1 <!doctype html>
   2 <html>
   3 <head>
   4
   5   <script src="../../platform/platform.js"></script>
   6   <link href="../core-animated-pages.html" rel="import">
   7   <link href="../transitions/cross-fade.html" rel="import">
   8   <link href="../transitions/slide-from-right.html" rel="import">
   9
  10   <style>
  11     body {
  12       font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  13       margin: 0;
  14     }
  15
  16     core-animated-pages {
  17       position: absolute;
  18       top: 50px;
  19       right: 0;
  20       bottom: 0;
  21       left: 0;
  22       font-size: 72px;
  23       overflow: hidden;
  24     }
  25
  26     section > div {
  27       height: 100%;
  28       color: white;
  29     }
  30
  31   </style>
  32
  33 </head>
  34 <body unresolved>
  35   <select onchange="change();">
  36     <option value="cross-fade-all" selected>cross-fade-all</option>
  37     <option value="slide-from-right">slide-from-right</option>
  38   </select>
  39
  40   <core-animated-pages onclick="stuff();" transitions="cross-fade-all">
  41     <section>
  42       <div layout vertical center center-justified style="background:red;">
  43         <div>1</div>
  44       </div>
  45     </section>
  46     <section>
  47       <div layout vertical center center-justified style="background:blue;">
  48         <div>2</div>
  49       </div>
  50     </section>
  51     <section>
  52       <div layout vertical center center-justified style="background:purple;">
  53         <div>3</div>
  54       </div>
  55     </section>
  56     <section>
  57       <div layout vertical center center-justified style="background:orange;">
  58         <div>4</div>
  59       </div>
  60     </section>
  61     <section>
  62       <div layout vertical center center-justified style="background:green;">
  63         <div>5</div>
  64       </div>
  65     </section>
  66   </core-animated-pages>
  67
  68   <script>
  69     function change() {
  70       var s = document.querySelector('select');
  71       document.querySelector('core-animated-pages').transitions = document.querySelector('select').options[s.selectedIndex].value;
  72     }
  73
  74     var up = true;
  75     var max = 4;
  76     function stuff() {
  77       var p = document.querySelector('core-animated-pages');
  78       if (up && p.selected === max || !up && p.selected === 0) {
  79         up = !up;
  80       }
  81       if (up) {
  82         p.selected += 1;
  83       } else {
  84         p.selected -= 1;
  85       }
  86     }
  87   </script>
  88 </body>
  89 </html>