diff options
Diffstat (limited to 'catapult/third_party/polymer/components/iron-fit-behavior/demo/index.html')
| -rw-r--r-- | catapult/third_party/polymer/components/iron-fit-behavior/demo/index.html | 166 |
1 files changed, 166 insertions, 0 deletions
diff --git a/catapult/third_party/polymer/components/iron-fit-behavior/demo/index.html b/catapult/third_party/polymer/components/iron-fit-behavior/demo/index.html new file mode 100644 index 00000000..2c716e06 --- /dev/null +++ b/catapult/third_party/polymer/components/iron-fit-behavior/demo/index.html @@ -0,0 +1,166 @@ +<!doctype html> +<!-- +@license +Copyright (c) 2015 The Polymer Project Authors. All rights reserved. +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt +Code distributed by Google as part of the polymer project is also +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt +--> +<html> + +<head> + + <title>iron-fit-behavior demo</title> + + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> + <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> + + <script src="../../webcomponentsjs/webcomponents-lite.js"></script> + <link rel="import" href="simple-fit.html"> + <link rel="import" href="../../iron-demo-helpers/demo-snippet.html"> + <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html"> + + <style is="custom-style" include="demo-pages-shared-styles"> + .centered { + min-width: 500px; + } + demo-snippet { + --demo-snippet-code: { + max-height: 250px; + } + } + </style> + +</head> + +<body unresolved class="centered"> + <h3> + An element with <code>IronFitBehavior</code> can be centered in + <code>fitInto</code> or positioned around a <code>positionTarget</code> + </h3> + <demo-snippet> + <template> + <style> + .target { + cursor: pointer; + text-align: center; + display: inline-block; + box-sizing: border-box; + border: 1px solid; + width: 100px; + padding: 20px 0; + margin: 5px; + } + + #myFit { + z-index: 10; + padding: 20px; + overflow: auto; + min-width: 100px; + min-height: 100px; + } + + button { + background-color: white; + border-radius: 5px; + border-width: 1px; + } + + button.selected { + background-color: #b3e5fc; + } + </style> + <template is="dom-bind"> + <template is="dom-repeat" items="[[containers]]"> + <div class="target" on-tap="updatePositionTarget">Target</div> + </template> + <simple-fit id="myFit" auto-fit-on-attach> + <h2>Align</h2> + <p> + <button on-tap="updateAlign" vertical-align="top">top</button> + <button on-tap="updateAlign" vertical-align="bottom">bottom</button> + <button on-tap="updateAlign" vertical-align="auto">auto</button> + <button on-tap="updateAlign" vertical-align>null</button> + </p> + <p> + <button on-tap="updateAlign" horizontal-align="left">left</button> + <button on-tap="updateAlign" horizontal-align="right">right</button> + <button on-tap="updateAlign" horizontal-align="auto">auto</button> + <button on-tap="updateAlign" horizontal-align>null</button> + </p> + <button on-tap="toggleNoOverlap">no overlap</button> + <button on-tap="toggleDynamicAlign">dynamic align</button> + </simple-fit> + <script> + var defaultTarget = Polymer.dom(myFit).parentNode; + var template = document.querySelector('template[is="dom-bind"]'); + + template.containers = new Array(30); + + template.updatePositionTarget = function(e) { + var target = Polymer.dom(e).rootTarget; + target = myFit.positionTarget === target ? defaultTarget : target; + myFit.positionTarget.style.backgroundColor = ''; + target.style.backgroundColor = 'orange'; + myFit.positionTarget = target; + template.refit(); + }; + + template._raf = null; + template.refit = function() { + template._raf && window.cancelAnimationFrame(template._raf); + template._raf = window.requestAnimationFrame(function() { + template._raf = null; + myFit.refit(); + }); + }; + + template.updateAlign = function(e) { + var target = Polymer.dom(e).rootTarget; + if (target.hasAttribute('horizontal-align')) { + myFit.horizontalAlign = target.getAttribute('horizontal-align'); + var children = target.parentNode.querySelectorAll('[horizontal-align]'); + for (var i = 0; i < children.length; i++) { + toggleClass(children[i], 'selected', children[i] === target); + } + } + if (target.hasAttribute('vertical-align')) { + myFit.verticalAlign = target.getAttribute('vertical-align'); + var children = target.parentNode.querySelectorAll('[vertical-align]'); + for (var i = 0; i < children.length; i++) { + toggleClass(children[i], 'selected', children[i] === target); + } + } + template.refit(); + }; + + template.toggleNoOverlap = function(e) { + myFit.noOverlap = !myFit.noOverlap; + toggleClass(Polymer.dom(e).rootTarget, 'selected', myFit.noOverlap); + template.refit(); + }; + + template.toggleDynamicAlign = function(e) { + myFit.dynamicAlign = !myFit.dynamicAlign; + toggleClass(Polymer.dom(e).rootTarget, 'selected', myFit.dynamicAlign); + template.refit(); + }; + + // Listen for resize and scroll on window. + window.addEventListener('resize', template.refit); + window.addEventListener('scroll', template.refit); + + function toggleClass(element, cssClass, condition) { + element.classList[condition ? 'add' : 'remove'](cssClass); + } + </script> + </template> + </template> + </demo-snippet> + +</body> + +</html> |