| OLD | NEW | 
|---|
|  | (Empty) | 
| 1 <!-- |  | 
| 2 @license |  | 
| 3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. |  | 
| 4 This code may only be used under the BSD style license found at http://polymer.g
    ithub.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/CONTRI
    BUTORS.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/PATEN
    TS.txt |  | 
| 9 --> |  | 
| 10 |  | 
| 11 <link rel="import" href="../polymer/polymer.html"> |  | 
| 12 <link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html
    "> |  | 
| 13 <link rel="import" href="../iron-selector/iron-selectable.html"> |  | 
| 14 |  | 
| 15 <!-- |  | 
| 16 `iron-pages` is used to select one of its children to show. One use is to cycle 
    through a list of |  | 
| 17 children "pages". |  | 
| 18 |  | 
| 19 Example: |  | 
| 20 |  | 
| 21     <iron-pages selected="0"> |  | 
| 22       <div>One</div> |  | 
| 23       <div>Two</div> |  | 
| 24       <div>Three</div> |  | 
| 25     </iron-pages> |  | 
| 26 |  | 
| 27     <script> |  | 
| 28       document.addEventListener('click', function(e) { |  | 
| 29         var pages = document.querySelector('iron-pages'); |  | 
| 30         pages.selectNext(); |  | 
| 31       }); |  | 
| 32     </script> |  | 
| 33 |  | 
| 34 @group Iron Elements |  | 
| 35 @class iron-pages |  | 
| 36 @hero hero.svg |  | 
| 37 @demo demo/index.html |  | 
| 38 @extends iron-selector |  | 
| 39 --> |  | 
| 40 |  | 
| 41 <dom-module id="iron-pages"> |  | 
| 42 |  | 
| 43   <style> |  | 
| 44 |  | 
| 45     :host { |  | 
| 46       display: block; |  | 
| 47     } |  | 
| 48 |  | 
| 49     :host > ::content > :not(.iron-selected) { |  | 
| 50       display: none !important; |  | 
| 51     } |  | 
| 52 |  | 
| 53   </style> |  | 
| 54 |  | 
| 55   <template> |  | 
| 56 |  | 
| 57     <content></content> |  | 
| 58 |  | 
| 59   </template> |  | 
| 60 |  | 
| 61 </dom-module> |  | 
| 62 |  | 
| 63 <script> |  | 
| 64 |  | 
| 65   Polymer({ |  | 
| 66 |  | 
| 67     is: 'iron-pages', |  | 
| 68 |  | 
| 69     behaviors: [ |  | 
| 70       Polymer.IronResizableBehavior, |  | 
| 71       Polymer.IronSelectableBehavior |  | 
| 72     ], |  | 
| 73 |  | 
| 74     properties: { |  | 
| 75 |  | 
| 76       // as the selected page is the only one visible, activateEvent |  | 
| 77       // is both non-sensical and problematic; e.g. in cases where a user |  | 
| 78       // handler attempts to change the page and the activateEvent |  | 
| 79       // handler immediately changes it back |  | 
| 80       activateEvent: { |  | 
| 81         value: null |  | 
| 82       } |  | 
| 83 |  | 
| 84     }, |  | 
| 85 |  | 
| 86     observers: [ |  | 
| 87       '_selectedPageChanged(selected)' |  | 
| 88     ], |  | 
| 89 |  | 
| 90     _selectedPageChanged: function(selected, old) { |  | 
| 91       this.async(this.notifyResize); |  | 
| 92     } |  | 
| 93   }); |  | 
| 94 |  | 
| 95 </script> |  | 
| OLD | NEW | 
|---|