| OLD | NEW |
| 1 <!-- | 1 <!-- |
| 2 @license | 2 @license |
| 3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. | 3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. |
| 4 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt | 4 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
| 5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | 5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt | 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
| 7 Code distributed by Google as part of the polymer project is also | 7 Code distributed by Google as part of the polymer project is also |
| 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt | 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 9 --> | 9 --> |
| 10 | 10 |
| (...skipping 21 matching lines...) Expand all Loading... |
| 32 */ | 32 */ |
| 33 | 33 |
| 34 Polymer.IronFitBehavior = { | 34 Polymer.IronFitBehavior = { |
| 35 | 35 |
| 36 properties: { | 36 properties: { |
| 37 | 37 |
| 38 /** | 38 /** |
| 39 * The element that will receive a `max-height`/`width`. By default it is
the same as `this`, | 39 * The element that will receive a `max-height`/`width`. By default it is
the same as `this`, |
| 40 * but it can be set to a child element. This is useful, for example, for
implementing a | 40 * but it can be set to a child element. This is useful, for example, for
implementing a |
| 41 * scrolling region inside the element. | 41 * scrolling region inside the element. |
| 42 * @type {!Element} |
| 42 */ | 43 */ |
| 43 sizingTarget: { | 44 sizingTarget: { |
| 44 type: Object, | 45 type: Object, |
| 45 value: function() { | 46 value: function() { |
| 46 return this; | 47 return this; |
| 47 } | 48 } |
| 48 }, | 49 }, |
| 49 | 50 |
| 50 /** | 51 /** |
| 51 * The element to fit `this` into. | 52 * The element to fit `this` into. |
| 52 */ | 53 */ |
| 53 fitInto: { | 54 fitInto: { |
| 54 type: Object, | 55 type: Object, |
| 55 value: window | 56 value: window |
| 56 }, | 57 }, |
| 57 | 58 |
| 58 /** | 59 /** |
| 59 * Set to true to auto-fit on attach. | 60 * Set to true to auto-fit on attach. |
| 60 */ | 61 */ |
| 61 autoFitOnAttach: { | 62 autoFitOnAttach: { |
| 62 type: Boolean, | 63 type: Boolean, |
| 63 value: false | 64 value: false |
| 64 }, | 65 }, |
| 65 | 66 |
| 67 /** @type {?Object} */ |
| 66 _fitInfo: { | 68 _fitInfo: { |
| 67 type: Object | 69 type: Object |
| 68 } | 70 } |
| 69 | 71 |
| 70 }, | 72 }, |
| 71 | 73 |
| 72 get _fitWidth() { | 74 get _fitWidth() { |
| 73 var fitWidth; | 75 var fitWidth; |
| 74 if (this.fitInto === window) { | 76 if (this.fitInto === window) { |
| 75 fitWidth = this.fitInto.innerWidth; | 77 fitWidth = this.fitInto.innerWidth; |
| 76 } else { | 78 } else { |
| 77 fitWidth = this.fitInto.getBoundingClientRect().width; | 79 fitWidth = this.fitInto.getBoundingClientRect().width; |
| 78 } | 80 } |
| 79 return fitWidth; | 81 return fitWidth; |
| 80 }, | 82 }, |
| 81 | 83 |
| 82 get _fitHeight() { | 84 get _fitHeight() { |
| 83 var fitHeight; | 85 var fitHeight; |
| 84 if (this.fitInto === window) { | 86 if (this.fitInto === window) { |
| 85 fitHeight = this.fitInto.innerHeight; | 87 fitHeight = this.fitInto.innerHeight; |
| 86 } else { | 88 } else { |
| 87 fitHeight = this.fitInto.getBoundingClientRect().height; | 89 fitHeight = this.fitInto.getBoundingClientRect().height; |
| 88 } | 90 } |
| 89 return fitHeight; | 91 return fitHeight; |
| 90 }, | 92 }, |
| 91 | 93 |
| 94 get _fitLeft() { |
| 95 var fitLeft; |
| 96 if (this.fitInto === window) { |
| 97 fitLeft = 0; |
| 98 } else { |
| 99 fitLeft = this.fitInto.getBoundingClientRect().left; |
| 100 } |
| 101 return fitLeft; |
| 102 }, |
| 103 |
| 104 get _fitTop() { |
| 105 var fitTop; |
| 106 if (this.fitInto === window) { |
| 107 fitTop = 0; |
| 108 } else { |
| 109 fitTop = this.fitInto.getBoundingClientRect().top; |
| 110 } |
| 111 return fitTop; |
| 112 }, |
| 113 |
| 92 attached: function() { | 114 attached: function() { |
| 93 if (this.autoFitOnAttach) { | 115 if (this.autoFitOnAttach) { |
| 94 if (window.getComputedStyle(this).display === 'none') { | 116 if (window.getComputedStyle(this).display === 'none') { |
| 95 setTimeout(function() { | 117 setTimeout(function() { |
| 96 this.fit(); | 118 this.fit(); |
| 97 }.bind(this)); | 119 }.bind(this)); |
| 98 } else { | 120 } else { |
| 99 this.fit(); | 121 this.fit(); |
| 100 } | 122 } |
| 101 } | 123 } |
| (...skipping 11 matching lines...) Expand all Loading... |
| 113 /** | 135 /** |
| 114 * Memoize information needed to position and size the target element. | 136 * Memoize information needed to position and size the target element. |
| 115 */ | 137 */ |
| 116 _discoverInfo: function() { | 138 _discoverInfo: function() { |
| 117 if (this._fitInfo) { | 139 if (this._fitInfo) { |
| 118 return; | 140 return; |
| 119 } | 141 } |
| 120 var target = window.getComputedStyle(this); | 142 var target = window.getComputedStyle(this); |
| 121 var sizer = window.getComputedStyle(this.sizingTarget); | 143 var sizer = window.getComputedStyle(this.sizingTarget); |
| 122 this._fitInfo = { | 144 this._fitInfo = { |
| 145 inlineStyle: { |
| 146 top: this.style.top || '', |
| 147 left: this.style.left || '' |
| 148 }, |
| 123 positionedBy: { | 149 positionedBy: { |
| 124 vertically: target.top !== 'auto' ? 'top' : (target.bottom !== 'auto'
? | 150 vertically: target.top !== 'auto' ? 'top' : (target.bottom !== 'auto'
? |
| 125 'bottom' : null), | 151 'bottom' : null), |
| 126 horizontally: target.left !== 'auto' ? 'left' : (target.right !== 'aut
o' ? | 152 horizontally: target.left !== 'auto' ? 'left' : (target.right !== 'aut
o' ? |
| 127 'right' : null), | 153 'right' : null), |
| 128 css: target.position | 154 css: target.position |
| 129 }, | 155 }, |
| 130 sizedBy: { | 156 sizedBy: { |
| 131 height: sizer.maxHeight !== 'none', | 157 height: sizer.maxHeight !== 'none', |
| 132 width: sizer.maxWidth !== 'none' | 158 width: sizer.maxWidth !== 'none' |
| 133 }, | 159 }, |
| 134 margin: { | 160 margin: { |
| 135 top: parseInt(target.marginTop, 10) || 0, | 161 top: parseInt(target.marginTop, 10) || 0, |
| 136 right: parseInt(target.marginRight, 10) || 0, | 162 right: parseInt(target.marginRight, 10) || 0, |
| 137 bottom: parseInt(target.marginBottom, 10) || 0, | 163 bottom: parseInt(target.marginBottom, 10) || 0, |
| 138 left: parseInt(target.marginLeft, 10) || 0 | 164 left: parseInt(target.marginLeft, 10) || 0 |
| 139 } | 165 } |
| 140 }; | 166 }; |
| 141 }, | 167 }, |
| 142 | 168 |
| 143 /** | 169 /** |
| 144 * Resets the target element's position and size constraints, and clear | 170 * Resets the target element's position and size constraints, and clear |
| 145 * the memoized data. | 171 * the memoized data. |
| 146 */ | 172 */ |
| 147 resetFit: function() { | 173 resetFit: function() { |
| 148 if (!this._fitInfo || !this._fitInfo.sizedBy.height) { | 174 if (!this._fitInfo || !this._fitInfo.sizedBy.height) { |
| 149 this.sizingTarget.style.maxHeight = ''; | 175 this.sizingTarget.style.maxHeight = ''; |
| 150 this.style.top = ''; | 176 this.style.top = this._fitInfo ? this._fitInfo.inlineStyle.top : ''; |
| 151 } | 177 } |
| 152 if (!this._fitInfo || !this._fitInfo.sizedBy.width) { | 178 if (!this._fitInfo || !this._fitInfo.sizedBy.width) { |
| 153 this.sizingTarget.style.maxWidth = ''; | 179 this.sizingTarget.style.maxWidth = ''; |
| 154 this.style.left = ''; | 180 this.style.left = this._fitInfo ? this._fitInfo.inlineStyle.left : ''; |
| 155 } | 181 } |
| 156 if (this._fitInfo) { | 182 if (this._fitInfo) { |
| 157 this.style.position = this._fitInfo.positionedBy.css; | 183 this.style.position = this._fitInfo.positionedBy.css; |
| 158 } | 184 } |
| 159 this._fitInfo = null; | 185 this._fitInfo = null; |
| 160 }, | 186 }, |
| 161 | 187 |
| 162 /** | 188 /** |
| 163 * Equivalent to calling `resetFit()` and `fit()`. Useful to call this after
the element, | 189 * Equivalent to calling `resetFit()` and `fit()`. Useful to call this after
the element, |
| 164 * the window, or the `fitInfo` element has been resized. | 190 * the window, or the `fitInfo` element has been resized. |
| (...skipping 42 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 207 /** | 233 /** |
| 208 * Centers horizontally and vertically if not already positioned. This also
sets | 234 * Centers horizontally and vertically if not already positioned. This also
sets |
| 209 * `position:fixed`. | 235 * `position:fixed`. |
| 210 */ | 236 */ |
| 211 center: function() { | 237 center: function() { |
| 212 if (!this._fitInfo.positionedBy.vertically || !this._fitInfo.positionedBy.
horizontally) { | 238 if (!this._fitInfo.positionedBy.vertically || !this._fitInfo.positionedBy.
horizontally) { |
| 213 // need position:fixed to center | 239 // need position:fixed to center |
| 214 this.style.position = 'fixed'; | 240 this.style.position = 'fixed'; |
| 215 } | 241 } |
| 216 if (!this._fitInfo.positionedBy.vertically) { | 242 if (!this._fitInfo.positionedBy.vertically) { |
| 217 var top = (this._fitHeight - this.offsetHeight) / 2; | 243 var top = (this._fitHeight - this.offsetHeight) / 2 + this._fitTop; |
| 218 top -= this._fitInfo.margin.top; | 244 top -= this._fitInfo.margin.top; |
| 219 this.style.top = top + 'px'; | 245 this.style.top = top + 'px'; |
| 220 } | 246 } |
| 221 if (!this._fitInfo.positionedBy.horizontally) { | 247 if (!this._fitInfo.positionedBy.horizontally) { |
| 222 var left = (this._fitWidth - this.offsetWidth) / 2; | 248 var left = (this._fitWidth - this.offsetWidth) / 2 + this._fitLeft; |
| 223 left -= this._fitInfo.margin.left; | 249 left -= this._fitInfo.margin.left; |
| 224 this.style.left = left + 'px'; | 250 this.style.left = left + 'px'; |
| 225 } | 251 } |
| 226 } | 252 } |
| 227 | 253 |
| 228 }; | 254 }; |
| 229 | 255 |
| 230 </script> | 256 </script> |
| OLD | NEW |