| 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 91 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 102 | 102 |
| 103 <script> | 103 <script> |
| 104 | 104 |
| 105 Polymer({ | 105 Polymer({ |
| 106 | 106 |
| 107 is: 'iron-image', | 107 is: 'iron-image', |
| 108 | 108 |
| 109 properties: { | 109 properties: { |
| 110 /** | 110 /** |
| 111 * The URL of an image. | 111 * The URL of an image. |
| 112 * | |
| 113 * @attribute src | |
| 114 * @type string | |
| 115 * @default '' | |
| 116 */ | 112 */ |
| 117 src: { | 113 src: { |
| 118 observer: '_srcChanged', | 114 observer: '_srcChanged', |
| 119 type: String, | 115 type: String, |
| 120 value: '' | 116 value: '' |
| 121 }, | 117 }, |
| 122 | 118 |
| 123 /** | 119 /** |
| 124 * When true, the image is prevented from loading and any placeholder is | 120 * When true, the image is prevented from loading and any placeholder is |
| 125 * shown. This may be useful when a binding to the src property is known
to | 121 * shown. This may be useful when a binding to the src property is known
to |
| 126 * be invalid, to prevent 404 requests. | 122 * be invalid, to prevent 404 requests. |
| 127 * | |
| 128 * @attribute preventLoad | |
| 129 * @type boolean | |
| 130 * @default false | |
| 131 */ | 123 */ |
| 132 preventLoad: { | 124 preventLoad: { |
| 133 type: Boolean, | 125 type: Boolean, |
| 134 value: false | 126 value: false |
| 135 }, | 127 }, |
| 136 | 128 |
| 137 /** | 129 /** |
| 138 * Sets a sizing option for the image. Valid values are `contain` (full | 130 * Sets a sizing option for the image. Valid values are `contain` (full |
| 139 * aspect ratio of the image is contained within the element and | 131 * aspect ratio of the image is contained within the element and |
| 140 * letterboxed) or `cover` (image is cropped in order to fully cover the | 132 * letterboxed) or `cover` (image is cropped in order to fully cover the |
| 141 * bounds of the element), or `null` (default: image takes natural size). | 133 * bounds of the element), or `null` (default: image takes natural size). |
| 142 * | |
| 143 * @attribute sizing | |
| 144 * @type string | |
| 145 * @default null | |
| 146 */ | 134 */ |
| 147 sizing: { | 135 sizing: { |
| 148 type: String, | 136 type: String, |
| 149 value: null | 137 value: null |
| 150 }, | 138 }, |
| 151 | 139 |
| 152 /** | 140 /** |
| 153 * When a sizing option is uzed (`cover` or `contain`), this determines | 141 * When a sizing option is uzed (`cover` or `contain`), this determines |
| 154 * how the image is aligned within the element bounds. | 142 * how the image is aligned within the element bounds. |
| 155 * | |
| 156 * @attribute position | |
| 157 * @type string | |
| 158 * @default 'center' | |
| 159 */ | 143 */ |
| 160 position: { | 144 position: { |
| 161 type: String, | 145 type: String, |
| 162 value: 'center' | 146 value: 'center' |
| 163 }, | 147 }, |
| 164 | 148 |
| 165 /** | 149 /** |
| 166 * When `true`, any change to the `src` property will cause the `placehold
er` | 150 * When `true`, any change to the `src` property will cause the `placehold
er` |
| 167 * image to be shown until the | 151 * image to be shown until the |
| 168 * | |
| 169 * @attribute preload | |
| 170 * @type boolean | |
| 171 * @default false | |
| 172 */ | 152 */ |
| 173 preload: { | 153 preload: { |
| 174 type: Boolean, | 154 type: Boolean, |
| 175 value: false | 155 value: false |
| 176 }, | 156 }, |
| 177 | 157 |
| 178 /** | 158 /** |
| 179 * This image will be used as a background/placeholder until the src image
has | 159 * This image will be used as a background/placeholder until the src image
has |
| 180 * loaded. Use of a data-URI for placeholder is encouraged for instant re
ndering. | 160 * loaded. Use of a data-URI for placeholder is encouraged for instant re
ndering. |
| 181 * | |
| 182 * @attribute placeholder | |
| 183 * @type string | |
| 184 * @default null | |
| 185 */ | 161 */ |
| 186 placeholder: { | 162 placeholder: { |
| 187 type: String, | 163 type: String, |
| 188 value: null | 164 value: null |
| 189 }, | 165 }, |
| 190 | 166 |
| 191 /** | 167 /** |
| 192 * When `preload` is true, setting `fade` to true will cause the image to | 168 * When `preload` is true, setting `fade` to true will cause the image to |
| 193 * fade into place. | 169 * fade into place. |
| 194 * | |
| 195 * @attribute fade | |
| 196 * @type boolean | |
| 197 * @default false | |
| 198 */ | 170 */ |
| 199 fade: { | 171 fade: { |
| 200 type: Boolean, | 172 type: Boolean, |
| 201 value: false | 173 value: false |
| 202 }, | 174 }, |
| 203 | 175 |
| 204 /** | 176 /** |
| 205 * Read-only value that is true when the image is loaded. | 177 * Read-only value that is true when the image is loaded. |
| 206 * | |
| 207 * @attribute preloaded | |
| 208 * @type boolean | |
| 209 * @default false | |
| 210 */ | 178 */ |
| 211 loaded: { | 179 loaded: { |
| 212 notify: true, | 180 notify: true, |
| 213 type: Boolean, | 181 type: Boolean, |
| 214 value: false | 182 value: false |
| 215 }, | 183 }, |
| 216 | 184 |
| 217 /** | 185 /** |
| 218 * Read-only value that tracks the loading state of the image when the `pr
eload` | 186 * Read-only value that tracks the loading state of the image when the `pr
eload` |
| 219 * option is used. | 187 * option is used. |
| 220 * | |
| 221 * @attribute loading | |
| 222 * @type boolean | |
| 223 * @default false | |
| 224 */ | 188 */ |
| 225 loading: { | 189 loading: { |
| 226 notify: true, | 190 notify: true, |
| 227 type: Boolean, | 191 type: Boolean, |
| 228 value: false | 192 value: false |
| 229 }, | 193 }, |
| 230 | 194 |
| 231 /** | 195 /** |
| 232 * Can be used to set the width of image (e.g. via binding); size may also
be | 196 * Can be used to set the width of image (e.g. via binding); size may also
be |
| 233 * set via CSS. | 197 * set via CSS. |
| 234 * | |
| 235 * @attribute width | |
| 236 * @type number | |
| 237 * @default null | |
| 238 */ | 198 */ |
| 239 width: { | 199 width: { |
| 240 observer: '_widthChanged', | 200 observer: '_widthChanged', |
| 241 type: Number, | 201 type: Number, |
| 242 value: null | 202 value: null |
| 243 }, | 203 }, |
| 244 | 204 |
| 245 /** | 205 /** |
| 246 * Can be used to set the height of image (e.g. via binding); size may als
o be | 206 * Can be used to set the height of image (e.g. via binding); size may als
o be |
| 247 * set via CSS. | 207 * set via CSS. |
| (...skipping 94 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 342 }, | 302 }, |
| 343 | 303 |
| 344 _transformChanged: function() { | 304 _transformChanged: function() { |
| 345 var placeholderStyle = this.$.placeholder.style; | 305 var placeholderStyle = this.$.placeholder.style; |
| 346 | 306 |
| 347 this.style.backgroundSize = | 307 this.style.backgroundSize = |
| 348 placeholderStyle.backgroundSize = this.sizing; | 308 placeholderStyle.backgroundSize = this.sizing; |
| 349 | 309 |
| 350 this.style.backgroundPosition = | 310 this.style.backgroundPosition = |
| 351 placeholderStyle.backgroundPosition = | 311 placeholderStyle.backgroundPosition = |
| 352 this.sizing ? this.position : null; | 312 this.sizing ? this.position : ''; |
| 353 | 313 |
| 354 this.style.backgroundRepeat = | 314 this.style.backgroundRepeat = |
| 355 placeholderStyle.backgroundRepeat = | 315 placeholderStyle.backgroundRepeat = |
| 356 this.sizing ? 'no-repeat' : null; | 316 this.sizing ? 'no-repeat' : ''; |
| 357 }, | 317 }, |
| 358 | 318 |
| 359 _loadBehaviorChanged: function() { | 319 _loadBehaviorChanged: function() { |
| 360 var img; | 320 var img; |
| 361 | 321 |
| 362 if (!this.canLoad) { | 322 if (!this.canLoad) { |
| 363 return; | 323 return; |
| 364 } | 324 } |
| 365 | 325 |
| 366 if (this.requiresPreload) { | 326 if (this.requiresPreload) { |
| (...skipping 18 matching lines...) Expand all Loading... |
| 385 | 345 |
| 386 if (this.sizing) { | 346 if (this.sizing) { |
| 387 this.style.backgroundImage = this.src ? 'url(' + this.src + ')': ''; | 347 this.style.backgroundImage = this.src ? 'url(' + this.src + ')': ''; |
| 388 } else { | 348 } else { |
| 389 this.$.img.src = this.src || ''; | 349 this.$.img.src = this.src || ''; |
| 390 } | 350 } |
| 391 } | 351 } |
| 392 }); | 352 }); |
| 393 | 353 |
| 394 </script> | 354 </script> |
| OLD | NEW |