| OLD | NEW | 
 | (Empty) | 
|    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://polym
     er.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/CO
     NTRIBUTORS.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/P
     ATENTS.txt |  | 
|    9 --> |  | 
|   10 <!doctype html> |  | 
|   11 <html> |  | 
|   12 <head> |  | 
|   13  |  | 
|   14   <title>core-layout-grid example</title> |  | 
|   15  |  | 
|   16   <script src="../platform/platform.js"></script> |  | 
|   17  |  | 
|   18   <link rel="import" href="core-layout-grid.html"> |  | 
|   19  |  | 
|   20   <style> |  | 
|   21     body { |  | 
|   22       font-family: sans-serif; |  | 
|   23       overflow: hidden; |  | 
|   24     } |  | 
|   25   </style> |  | 
|   26  |  | 
|   27 </head> |  | 
|   28 <body unresolved> |  | 
|   29  |  | 
|   30   <grid-test></grid-test> |  | 
|   31  |  | 
|   32   <polymer-element name="grid-test" on-tap="{{rotate}}"> |  | 
|   33   <template> |  | 
|   34  |  | 
|   35     <style> |  | 
|   36       * { |  | 
|   37         -webkit-transition: top, right, bottom, left; |  | 
|   38         -webkit-transition-duration: 0.3s; |  | 
|   39       } |  | 
|   40  |  | 
|   41       panel { |  | 
|   42         display: inline-block; |  | 
|   43         border: 4px dotted lightblue; |  | 
|   44         padding: 16px; |  | 
|   45         background-color: whitesmoke; |  | 
|   46       } |  | 
|   47  |  | 
|   48       #outputToolbar { |  | 
|   49         width: 400px; |  | 
|   50       } |  | 
|   51  |  | 
|   52       #output { |  | 
|   53         width: 400px; |  | 
|   54       } |  | 
|   55  |  | 
|   56       #workspace { |  | 
|   57         border-color: orange; |  | 
|   58       } |  | 
|   59     </style> |  | 
|   60  |  | 
|   61     <core-layout-grid nodes="{{nodes}}" layout="{{layout}}"></core-layout-grid> |  | 
|   62  |  | 
|   63     <panel id="toolbar">toolbar (click to rotate)</panel> |  | 
|   64     <panel id="sidebar">sidebar</panel> |  | 
|   65     <panel id="workspace">workspace</panel> |  | 
|   66     <panel id="outputToolbar">otherbar</panel> |  | 
|   67     <panel id="output"> |  | 
|   68       output |  | 
|   69       <h2>Documentation</h2> |  | 
|   70       <h1>Verbiage</h1> |  | 
|   71       <p>In backbone record integer LED amplified internet protocol a extension 
     reflective.  |  | 
|   72       Array kilohertz LED. Wavelength extension patch supporting wave an by prom
     pt.</p> |  | 
|   73     </panel> |  | 
|   74  |  | 
|   75   </template> |  | 
|   76   <script> |  | 
|   77  |  | 
|   78     Polymer('grid-test', { |  | 
|   79       arrangements: [[ |  | 
|   80         [1, 1, 1, 1], |  | 
|   81         [2, 3, 3, 4], |  | 
|   82         [2, 3, 3, 5] |  | 
|   83       ], [ |  | 
|   84         [4, 3, 2], |  | 
|   85         [5, 3, 2], |  | 
|   86         [5, 1, 1] |  | 
|   87       ], [ |  | 
|   88         [1, 1], |  | 
|   89         [2, 3], |  | 
|   90         [4, 3] |  | 
|   91       ]], |  | 
|   92  |  | 
|   93       outputLayout: 0, |  | 
|   94  |  | 
|   95       ready: function() { |  | 
|   96         this.outputLayoutChanged(); |  | 
|   97       }, |  | 
|   98  |  | 
|   99       outputLayoutChanged: function() { |  | 
|  100         this.layout = this.arrangements[this.outputLayout]; |  | 
|  101       }, |  | 
|  102  |  | 
|  103       toggleLayout: function() { |  | 
|  104         this.outputLayout = (this.outputLayout + 1) % this.arrangements.length; |  | 
|  105       }, |  | 
|  106  |  | 
|  107       rotate: function() { |  | 
|  108         this.toggleLayout(); |  | 
|  109       } |  | 
|  110     }); |  | 
|  111  |  | 
|  112   </script> |  | 
|  113   </polymer-element> |  | 
|  114  |  | 
|  115 </body> |  | 
|  116 </html> |  | 
| OLD | NEW |