Index: third_party/polymer/components-chromium/core-animated-pages/demos/shadow.html |
diff --git a/third_party/polymer/components-chromium/core-animated-pages/demos/shadow.html b/third_party/polymer/components-chromium/core-animated-pages/demos/shadow.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..549c0041f7264fb0b63e593fbfa0cbf533f376b6 |
--- /dev/null |
+++ b/third_party/polymer/components-chromium/core-animated-pages/demos/shadow.html |
@@ -0,0 +1,133 @@ |
+<!doctype html> |
+<html> |
+<head> |
+ |
+ <script src="../../platform/platform.js"></script> |
+ |
+ <link href="../../core-icons/core-icons.html" rel="import"> |
+ <link href="../../core-icon-button/core-icon-button.html" rel="import"> |
+ <link href="../../core-toolbar/core-toolbar.html" rel="import"> |
+ <link href="../core-animated-pages.html" rel="import"> |
+ |
+ <style> |
+ body { |
+ font-family: sans-serif; |
+ } |
+ |
+ .toolbar { |
+ background-color: steelblue; |
+ } |
+ |
+ </style> |
+ |
+</head> |
+<body unresolved fullbleed vertical layout> |
+ |
+ <polymer-element name="grid-toc" attributes="items selected"> |
+ <template> |
+ <style> |
+ #container { |
+ overflow: auto; |
+ } |
+ |
+ .card { |
+ position: relative; |
+ height: 150px; |
+ width: 150px; |
+ font-size: 50px; |
+ margin: 8px; |
+ background-color: tomato; |
+ border-radius: 4px; |
+ cursor: default; |
+ } |
+ </style> |
+ <div id="container" on-tap="{{selectView}}" flex horizontal wrap around-justified layout hero-p> |
+ <template repeat="{{item in items}}"> |
+ <div class="card" vertical center center-justified layout hero-id="item-{{item}}" hero?="{{selected === item + 1 || lastSelected === item + 1}}"><span cross-fade>{{item}}</span></div> |
+ </template> |
+ </div> |
+ </template> |
+ <script> |
+ Polymer('grid-toc', { |
+ selectedChanged: function(old) { |
+ this.lastSelected = old; |
+ }, |
+ selectView: function(e) { |
+ var item = e.target.templateInstance.model.item; |
+ if (item !== undefined) { |
+ this.fire('grid-toc-select', {item: item}); |
+ } |
+ } |
+ }); |
+ </script> |
+ </polymer-element> |
+ |
+ <polymer-element name="grid-item" attributes="item isHero"> |
+ <template> |
+ <style> |
+ .view { |
+ font-size: 250px; |
+ background-color: tomato; |
+ } |
+ </style> |
+ <div class="view" flex vertical center center-justified layout hero-id="item-{{item}}" hero?="{{isHero}}"> |
+ <span cross-fade>{{item}}</span> |
+ </div> |
+ </template> |
+ <script> |
+ Polymer('grid-item', { |
+ isSelected: false |
+ }) |
+ </script> |
+ </polymer-element> |
+ |
+ |
+ <template is="auto-binding"> |
+ <core-toolbar class="toolbar"> |
+ <core-icon-button icon="{{$.pages.selected != 0 ? 'arrow-back' : 'menu'}}" on-tap="{{back}}"></core-icon-button> |
+ <div flex>Stuff</div> |
+ <core-icon-button icon="more-vert"></core-icon-button> |
+ </core-toolbar> |
+ <core-animated-pages id="pages" flex selected="0" on-core-animated-pages-transition-end="{{transitionend}}" transitions="cross-fade-all hero-transition"> |
+ |
+ <grid-toc vertical id="toc" layout selected="{{$.pages.selected}}" items="{{items}}" hero-p on-grid-toc-select="{{selectView}}"></grid-toc> |
+ |
+ <template repeat="{{item in items}}"> |
+ <grid-item vertical layout item="{{item}}" hero-p isHero="{{$.pages.selected === item + 1 || $.pages.selected === 0}}"></grid-item> |
+ </template> |
+ |
+ </core-animated-pages> |
+ </template> |
+ |
+ <script> |
+ |
+ addEventListener('template-bound', function(e) { |
+ var scope = e.target; |
+ var items = [], count=50; |
+ for (var i=0; i < count; i++) { |
+ items.push(i); |
+ } |
+ |
+ scope.items = items; |
+ |
+ scope.selectView = function(e, detail) { |
+ var i = detail.item; |
+ this.$.pages.selected = i+1; |
+ } |
+ |
+ scope.back = function() { |
+ this.lastSelected = this.$.pages.selected; |
+ this.$.pages.selected = 0; |
+ } |
+ |
+ scope.transitionend = function() { |
+ if (this.lastSelected) { |
+ this.lastSelected = null; |
+ } |
+ } |
+ }) |
+ |
+ </script> |
+ |
+</body> |
+</html> |