1 <!doctype html> 2 <!-- 3 @license 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.github.io/LICENSE.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/CONTRIBUTORS.txt 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/PATENTS.txt 10 --> 11 <html> 12 13 <head> 14 15 <title>iron-fit-behavior demo</title> 16 17 <meta charset="utf-8"> 18 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 19 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> 20 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 26 <style is="custom-style" include="demo-pages-shared-styles"> 27 .centered { 28 min-width: 500px; 29 } 30 demo-snippet { 31 --demo-snippet-code: { 32 max-height: 250px; 33 } 34 } 35 </style> 36 37 </head> 38 39 <body unresolved class="centered"> 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 } 57 58 #myFit { 59 z-index: 10; 60 padding: 20px; 61 overflow: auto; 62 min-width: 100px; 63 min-height: 100px; 64 } 65 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-align]'); 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.dynamicAlign); 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 166 </html> 167
