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

   1 <!--
   2     @license
   3     Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   4     This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   5     The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   6     The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   7     Code distributed by Google as part of the polymer project is also
   8     subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   9 -->
  10 <!doctype html>
  11 <html>
  12 <head>
  13
  14   <script src="../../webcomponentsjs/webcomponents.js"></script>
  15   <link href="../core-animated-pages.html" rel="import">
  16   <link href="../transitions/cross-fade.html" rel="import">
  17   <link href="../transitions/slide-from-right.html" rel="import">
  18
  19   <style>
  20     body {
  21       font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  22       margin: 0;
  23     }
  24
  25     core-animated-pages {
  26       position: absolute;
  27       top: 50px;
  28       right: 0;
  29       bottom: 0;
  30       left: 0;
  31       font-size: 72px;
  32       overflow: hidden;
  33     }
  34
  35     section > div {
  36       height: 100%;
  37       color: white;
  38     }
  39
  40   </style>
  41
  42 </head>
  43 <body unresolved>
  44   <select onchange="change();">
  45     <option value="cross-fade-all" selected>cross-fade-all</option>
  46     <option value="slide-from-right">slide-from-right</option>
  47   </select>
  48
  49   <core-animated-pages onclick="stuff();" transitions="cross-fade-all">
  50     <section>
  51       <div layout vertical center center-justified style="background:red;">
  52         <div>1</div>
  53       </div>
  54     </section>
  55     <section>
  56       <div layout vertical center center-justified style="background:blue;">
  57         <div>2</div>
  58       </div>
  59     </section>
  60     <section>
  61       <div layout vertical center center-justified style="background:purple;">
  62         <div>3</div>
  63       </div>
  64     </section>
  65     <section>
  66       <div layout vertical center center-justified style="background:orange;">
  67         <div>4</div>
  68       </div>
  69     </section>
  70     <section>
  71       <div layout vertical center center-justified style="background:green;">
  72         <div>5</div>
  73       </div>
  74     </section>
  75   </core-animated-pages>
  76
  77   <script>
  78     function change() {
  79       var s = document.querySelector('select');
  80       document.querySelector('core-animated-pages').transitions = document.querySelector('select').options[s.selectedIndex].value;
  81     }
  82
  83     var up = true;
  84     var max = 4;
  85     function stuff() {
  86       var p = document.querySelector('core-animated-pages');
  87       if (up && p.selected === max || !up && p.selected === 0) {
  88         up = !up;
  89       }
  90       if (up) {
  91         p.selected += 1;
  92       } else {
  93         p.selected -= 1;
  94       }
  95     }
  96   </script>
  97 </body>
  98 </html>