| Index: third_party/polymer/components/core-animated-pages/demos/shadow.html
|
| diff --git a/third_party/polymer/components/core-animated-pages/demos/shadow.html b/third_party/polymer/components/core-animated-pages/demos/shadow.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..549c0041f7264fb0b63e593fbfa0cbf533f376b6
|
| --- /dev/null
|
| +++ b/third_party/polymer/components/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>
|
|
|
Chromium Code Reviews
Issue 582873003:
Polymer elements added to third_party/polymer. (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master