diff options
Diffstat (limited to 'systrace/catapult/third_party/polymer/components/iron-fit-behavior/demo/index.html')
| -rw-r--r-- | systrace/catapult/third_party/polymer/components/iron-fit-behavior/demo/index.html | 166 |
1 files changed, 0 insertions, 166 deletions
diff --git a/systrace/catapult/third_party/polymer/components/iron-fit-behavior/demo/index.html b/systrace/catapult/third_party/polymer/components/iron-fit-behavior/demo/index.html deleted file mode 100644 index 2c716e0..0000000 --- a/systrace/catapult/third_party/polymer/components/iron-fit-behavior/demo/index.html +++ /dev/null @@ -1,166 +0,0 @@ -<!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> |