| OLD | NEW |
| 1 | 1 |
| 2 | 2 |
| 3 Polymer({ | 3 Polymer({ |
| 4 | 4 |
| 5 is: 'iron-image', | 5 is: 'iron-image', |
| 6 | 6 |
| 7 properties: { | 7 properties: { |
| 8 /** | 8 /** |
| 9 * The URL of an image. | 9 * The URL of an image. |
| 10 * | |
| 11 * @attribute src | |
| 12 * @type string | |
| 13 * @default '' | |
| 14 */ | 10 */ |
| 15 src: { | 11 src: { |
| 16 observer: '_srcChanged', | 12 observer: '_srcChanged', |
| 17 type: String, | 13 type: String, |
| 18 value: '' | 14 value: '' |
| 19 }, | 15 }, |
| 20 | 16 |
| 21 /** | 17 /** |
| 22 * When true, the image is prevented from loading and any placeholder is | 18 * When true, the image is prevented from loading and any placeholder is |
| 23 * shown. This may be useful when a binding to the src property is known
to | 19 * shown. This may be useful when a binding to the src property is known
to |
| 24 * be invalid, to prevent 404 requests. | 20 * be invalid, to prevent 404 requests. |
| 25 * | |
| 26 * @attribute preventLoad | |
| 27 * @type boolean | |
| 28 * @default false | |
| 29 */ | 21 */ |
| 30 preventLoad: { | 22 preventLoad: { |
| 31 type: Boolean, | 23 type: Boolean, |
| 32 value: false | 24 value: false |
| 33 }, | 25 }, |
| 34 | 26 |
| 35 /** | 27 /** |
| 36 * Sets a sizing option for the image. Valid values are `contain` (full | 28 * Sets a sizing option for the image. Valid values are `contain` (full |
| 37 * aspect ratio of the image is contained within the element and | 29 * aspect ratio of the image is contained within the element and |
| 38 * letterboxed) or `cover` (image is cropped in order to fully cover the | 30 * letterboxed) or `cover` (image is cropped in order to fully cover the |
| 39 * bounds of the element), or `null` (default: image takes natural size). | 31 * bounds of the element), or `null` (default: image takes natural size). |
| 40 * | |
| 41 * @attribute sizing | |
| 42 * @type string | |
| 43 * @default null | |
| 44 */ | 32 */ |
| 45 sizing: { | 33 sizing: { |
| 46 type: String, | 34 type: String, |
| 47 value: null | 35 value: null |
| 48 }, | 36 }, |
| 49 | 37 |
| 50 /** | 38 /** |
| 51 * When a sizing option is uzed (`cover` or `contain`), this determines | 39 * When a sizing option is uzed (`cover` or `contain`), this determines |
| 52 * how the image is aligned within the element bounds. | 40 * how the image is aligned within the element bounds. |
| 53 * | |
| 54 * @attribute position | |
| 55 * @type string | |
| 56 * @default 'center' | |
| 57 */ | 41 */ |
| 58 position: { | 42 position: { |
| 59 type: String, | 43 type: String, |
| 60 value: 'center' | 44 value: 'center' |
| 61 }, | 45 }, |
| 62 | 46 |
| 63 /** | 47 /** |
| 64 * When `true`, any change to the `src` property will cause the `placehold
er` | 48 * When `true`, any change to the `src` property will cause the `placehold
er` |
| 65 * image to be shown until the | 49 * image to be shown until the |
| 66 * | |
| 67 * @attribute preload | |
| 68 * @type boolean | |
| 69 * @default false | |
| 70 */ | 50 */ |
| 71 preload: { | 51 preload: { |
| 72 type: Boolean, | 52 type: Boolean, |
| 73 value: false | 53 value: false |
| 74 }, | 54 }, |
| 75 | 55 |
| 76 /** | 56 /** |
| 77 * This image will be used as a background/placeholder until the src image
has | 57 * This image will be used as a background/placeholder until the src image
has |
| 78 * loaded. Use of a data-URI for placeholder is encouraged for instant re
ndering. | 58 * loaded. Use of a data-URI for placeholder is encouraged for instant re
ndering. |
| 79 * | |
| 80 * @attribute placeholder | |
| 81 * @type string | |
| 82 * @default null | |
| 83 */ | 59 */ |
| 84 placeholder: { | 60 placeholder: { |
| 85 type: String, | 61 type: String, |
| 86 value: null | 62 value: null |
| 87 }, | 63 }, |
| 88 | 64 |
| 89 /** | 65 /** |
| 90 * When `preload` is true, setting `fade` to true will cause the image to | 66 * When `preload` is true, setting `fade` to true will cause the image to |
| 91 * fade into place. | 67 * fade into place. |
| 92 * | |
| 93 * @attribute fade | |
| 94 * @type boolean | |
| 95 * @default false | |
| 96 */ | 68 */ |
| 97 fade: { | 69 fade: { |
| 98 type: Boolean, | 70 type: Boolean, |
| 99 value: false | 71 value: false |
| 100 }, | 72 }, |
| 101 | 73 |
| 102 /** | 74 /** |
| 103 * Read-only value that is true when the image is loaded. | 75 * Read-only value that is true when the image is loaded. |
| 104 * | |
| 105 * @attribute preloaded | |
| 106 * @type boolean | |
| 107 * @default false | |
| 108 */ | 76 */ |
| 109 loaded: { | 77 loaded: { |
| 110 notify: true, | 78 notify: true, |
| 111 type: Boolean, | 79 type: Boolean, |
| 112 value: false | 80 value: false |
| 113 }, | 81 }, |
| 114 | 82 |
| 115 /** | 83 /** |
| 116 * Read-only value that tracks the loading state of the image when the `pr
eload` | 84 * Read-only value that tracks the loading state of the image when the `pr
eload` |
| 117 * option is used. | 85 * option is used. |
| 118 * | |
| 119 * @attribute loading | |
| 120 * @type boolean | |
| 121 * @default false | |
| 122 */ | 86 */ |
| 123 loading: { | 87 loading: { |
| 124 notify: true, | 88 notify: true, |
| 125 type: Boolean, | 89 type: Boolean, |
| 126 value: false | 90 value: false |
| 127 }, | 91 }, |
| 128 | 92 |
| 129 /** | 93 /** |
| 130 * Can be used to set the width of image (e.g. via binding); size may also
be | 94 * Can be used to set the width of image (e.g. via binding); size may also
be |
| 131 * set via CSS. | 95 * set via CSS. |
| 132 * | |
| 133 * @attribute width | |
| 134 * @type number | |
| 135 * @default null | |
| 136 */ | 96 */ |
| 137 width: { | 97 width: { |
| 138 observer: '_widthChanged', | 98 observer: '_widthChanged', |
| 139 type: Number, | 99 type: Number, |
| 140 value: null | 100 value: null |
| 141 }, | 101 }, |
| 142 | 102 |
| 143 /** | 103 /** |
| 144 * Can be used to set the height of image (e.g. via binding); size may als
o be | 104 * Can be used to set the height of image (e.g. via binding); size may als
o be |
| 145 * set via CSS. | 105 * set via CSS. |
| (...skipping 94 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 240 }, | 200 }, |
| 241 | 201 |
| 242 _transformChanged: function() { | 202 _transformChanged: function() { |
| 243 var placeholderStyle = this.$.placeholder.style; | 203 var placeholderStyle = this.$.placeholder.style; |
| 244 | 204 |
| 245 this.style.backgroundSize = | 205 this.style.backgroundSize = |
| 246 placeholderStyle.backgroundSize = this.sizing; | 206 placeholderStyle.backgroundSize = this.sizing; |
| 247 | 207 |
| 248 this.style.backgroundPosition = | 208 this.style.backgroundPosition = |
| 249 placeholderStyle.backgroundPosition = | 209 placeholderStyle.backgroundPosition = |
| 250 this.sizing ? this.position : null; | 210 this.sizing ? this.position : ''; |
| 251 | 211 |
| 252 this.style.backgroundRepeat = | 212 this.style.backgroundRepeat = |
| 253 placeholderStyle.backgroundRepeat = | 213 placeholderStyle.backgroundRepeat = |
| 254 this.sizing ? 'no-repeat' : null; | 214 this.sizing ? 'no-repeat' : ''; |
| 255 }, | 215 }, |
| 256 | 216 |
| 257 _loadBehaviorChanged: function() { | 217 _loadBehaviorChanged: function() { |
| 258 var img; | 218 var img; |
| 259 | 219 |
| 260 if (!this.canLoad) { | 220 if (!this.canLoad) { |
| 261 return; | 221 return; |
| 262 } | 222 } |
| 263 | 223 |
| 264 if (this.requiresPreload) { | 224 if (this.requiresPreload) { |
| (...skipping 17 matching lines...) Expand all Loading... |
| 282 } | 242 } |
| 283 | 243 |
| 284 if (this.sizing) { | 244 if (this.sizing) { |
| 285 this.style.backgroundImage = this.src ? 'url(' + this.src + ')': ''; | 245 this.style.backgroundImage = this.src ? 'url(' + this.src + ')': ''; |
| 286 } else { | 246 } else { |
| 287 this.$.img.src = this.src || ''; | 247 this.$.img.src = this.src || ''; |
| 288 } | 248 } |
| 289 } | 249 } |
| 290 }); | 250 }); |
| 291 | 251 |
| OLD | NEW |