Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(5)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/polymer/components/iron-fit-behavior/demo/index.html

Issue 2113853002: Run bower update (Closed) Base URL: https://github.com/catapult-project/catapult@polymer10-migration
Patch Set: Created 4 years, 5 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « third_party/polymer/components/iron-fit-behavior/bower.json ('k') | third_party/polymer/components/iron-fit-behavior/demo/simple-fit.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!doctype html> 1 <!doctype html>
2 <!-- 2 <!--
3 @license 3 @license
4 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
5 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt 5 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
6 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 6 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
7 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt 7 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
8 Code distributed by Google as part of the polymer project is also 8 Code distributed by Google as part of the polymer project is also
9 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt 9 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
10 --> 10 -->
11 <html> 11 <html>
12 <head>
13 12
14 <title>iron-fit-behavior demo</title> 13 <head>
15 14
16 <meta charset="utf-8"> 15 <title>iron-fit-behavior demo</title>
17 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
18 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initia l-scale=1, user-scalable=yes">
19 16
20 <script src="../../webcomponentsjs/webcomponents-lite.js"></script> 17 <meta charset="utf-8">
21 <link href="../../paper-styles/demo-pages.html" rel="import"> 18 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
22 <link rel="import" href="simple-fit.html"> 19 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial- scale=1, user-scalable=yes">
23 20
24 <style> 21 <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
22 <link rel="import" href="simple-fit.html">
23 <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
24 <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html ">
25 25
26 .sized { 26 <style is="custom-style" include="demo-pages-shared-styles">
27 max-width: 50%; 27 .centered {
28 max-height: 50%; 28 min-width: 500px;
29 padding: 20px; 29 }
30 demo-snippet {
31 --demo-snippet-code: {
32 max-height: 250px;
30 } 33 }
34 }
35 </style>
31 36
32 </style> 37 </head>
33 38
34 </head> 39 <body unresolved class="centered">
35 <body unresolved> 40 <h3>
41 An element with <code>IronFitBehavior</code> can be centered in
42 <code>fitInto</code> or positioned around a <code>positionTarget</code>
43 </h3>
44 <demo-snippet>
45 <template>
46 <style>
47 .target {
48 cursor: pointer;
49 text-align: center;
50 display: inline-block;
51 box-sizing: border-box;
52 border: 1px solid;
53 width: 100px;
54 padding: 20px 0;
55 margin: 5px;
56 }
36 57
37 <simple-fit id="myFit" auto-fit-on-attach class="sized" onclick="myFit.refit ()"> 58 #myFit {
38 Centered in window.<br><br> 59 z-index: 10;
39 Resize the window and click here to refit. 60 padding: 20px;
40 </simple-fit> 61 overflow: auto;
62 min-width: 100px;
63 min-height: 100px;
64 }
41 65
42 </body> 66 button {
67 background-color: white;
68 border-radius: 5px;
69 border-width: 1px;
70 }
71
72 button.selected {
73 background-color: #b3e5fc;
74 }
75 </style>
76 <template is="dom-bind">
77 <template is="dom-repeat" items="[[containers]]">
78 <div class="target" on-tap="updatePositionTarget">Target</div>
79 </template>
80 <simple-fit id="myFit" auto-fit-on-attach>
81 <h2>Align</h2>
82 <p>
83 <button on-tap="updateAlign" vertical-align="top">top</button>
84 <button on-tap="updateAlign" vertical-align="bottom">bottom</button>
85 <button on-tap="updateAlign" vertical-align="auto">auto</button>
86 <button on-tap="updateAlign" vertical-align>null</button>
87 </p>
88 <p>
89 <button on-tap="updateAlign" horizontal-align="left">left</button>
90 <button on-tap="updateAlign" horizontal-align="right">right</button>
91 <button on-tap="updateAlign" horizontal-align="auto">auto</button>
92 <button on-tap="updateAlign" horizontal-align>null</button>
93 </p>
94 <button on-tap="toggleNoOverlap">no overlap</button>
95 <button on-tap="toggleDynamicAlign">dynamic align</button>
96 </simple-fit>
97 <script>
98 var defaultTarget = Polymer.dom(myFit).parentNode;
99 var template = document.querySelector('template[is="dom-bind"]');
100
101 template.containers = new Array(30);
102
103 template.updatePositionTarget = function(e) {
104 var target = Polymer.dom(e).rootTarget;
105 target = myFit.positionTarget === target ? defaultTarget : target;
106 myFit.positionTarget.style.backgroundColor = '';
107 target.style.backgroundColor = 'orange';
108 myFit.positionTarget = target;
109 template.refit();
110 };
111
112 template._raf = null;
113 template.refit = function() {
114 template._raf && window.cancelAnimationFrame(template._raf);
115 template._raf = window.requestAnimationFrame(function() {
116 template._raf = null;
117 myFit.refit();
118 });
119 };
120
121 template.updateAlign = function(e) {
122 var target = Polymer.dom(e).rootTarget;
123 if (target.hasAttribute('horizontal-align')) {
124 myFit.horizontalAlign = target.getAttribute('horizontal-align');
125 var children = target.parentNode.querySelectorAll('[horizontal-ali gn]');
126 for (var i = 0; i < children.length; i++) {
127 toggleClass(children[i], 'selected', children[i] === target);
128 }
129 }
130 if (target.hasAttribute('vertical-align')) {
131 myFit.verticalAlign = target.getAttribute('vertical-align');
132 var children = target.parentNode.querySelectorAll('[vertical-align ]');
133 for (var i = 0; i < children.length; i++) {
134 toggleClass(children[i], 'selected', children[i] === target);
135 }
136 }
137 template.refit();
138 };
139
140 template.toggleNoOverlap = function(e) {
141 myFit.noOverlap = !myFit.noOverlap;
142 toggleClass(Polymer.dom(e).rootTarget, 'selected', myFit.noOverlap);
143 template.refit();
144 };
145
146 template.toggleDynamicAlign = function(e) {
147 myFit.dynamicAlign = !myFit.dynamicAlign;
148 toggleClass(Polymer.dom(e).rootTarget, 'selected', myFit.dynamicAlig n);
149 template.refit();
150 };
151
152 // Listen for resize and scroll on window.
153 window.addEventListener('resize', template.refit);
154 window.addEventListener('scroll', template.refit);
155
156 function toggleClass(element, cssClass, condition) {
157 element.classList[condition ? 'add' : 'remove'](cssClass);
158 }
159 </script>
160 </template>
161 </template>
162 </demo-snippet>
163
164 </body>
165
43 </html> 166 </html>
OLDNEW
« no previous file with comments | « third_party/polymer/components/iron-fit-behavior/bower.json ('k') | third_party/polymer/components/iron-fit-behavior/demo/simple-fit.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698