| OLD | NEW |
| (Empty) |
| 1 | |
| 2 | |
| 3 Polymer({ | |
| 4 | |
| 5 is: 'iron-image', | |
| 6 | |
| 7 properties: { | |
| 8 /** | |
| 9 * The URL of an image. | |
| 10 */ | |
| 11 src: { | |
| 12 observer: '_srcChanged', | |
| 13 type: String, | |
| 14 value: '' | |
| 15 }, | |
| 16 | |
| 17 /** | |
| 18 * When true, the image is prevented from loading and any placeholder is | |
| 19 * shown. This may be useful when a binding to the src property is known
to | |
| 20 * be invalid, to prevent 404 requests. | |
| 21 */ | |
| 22 preventLoad: { | |
| 23 type: Boolean, | |
| 24 value: false | |
| 25 }, | |
| 26 | |
| 27 /** | |
| 28 * Sets a sizing option for the image. Valid values are `contain` (full | |
| 29 * aspect ratio of the image is contained within the element and | |
| 30 * letterboxed) or `cover` (image is cropped in order to fully cover the | |
| 31 * bounds of the element), or `null` (default: image takes natural size). | |
| 32 */ | |
| 33 sizing: { | |
| 34 type: String, | |
| 35 value: null | |
| 36 }, | |
| 37 | |
| 38 /** | |
| 39 * When a sizing option is uzed (`cover` or `contain`), this determines | |
| 40 * how the image is aligned within the element bounds. | |
| 41 */ | |
| 42 position: { | |
| 43 type: String, | |
| 44 value: 'center' | |
| 45 }, | |
| 46 | |
| 47 /** | |
| 48 * When `true`, any change to the `src` property will cause the `placehold
er` | |
| 49 * image to be shown until the | |
| 50 */ | |
| 51 preload: { | |
| 52 type: Boolean, | |
| 53 value: false | |
| 54 }, | |
| 55 | |
| 56 /** | |
| 57 * This image will be used as a background/placeholder until the src image
has | |
| 58 * loaded. Use of a data-URI for placeholder is encouraged for instant re
ndering. | |
| 59 */ | |
| 60 placeholder: { | |
| 61 type: String, | |
| 62 value: null | |
| 63 }, | |
| 64 | |
| 65 /** | |
| 66 * When `preload` is true, setting `fade` to true will cause the image to | |
| 67 * fade into place. | |
| 68 */ | |
| 69 fade: { | |
| 70 type: Boolean, | |
| 71 value: false | |
| 72 }, | |
| 73 | |
| 74 /** | |
| 75 * Read-only value that is true when the image is loaded. | |
| 76 */ | |
| 77 loaded: { | |
| 78 notify: true, | |
| 79 type: Boolean, | |
| 80 value: false | |
| 81 }, | |
| 82 | |
| 83 /** | |
| 84 * Read-only value that tracks the loading state of the image when the `pr
eload` | |
| 85 * option is used. | |
| 86 */ | |
| 87 loading: { | |
| 88 notify: true, | |
| 89 type: Boolean, | |
| 90 value: false | |
| 91 }, | |
| 92 | |
| 93 /** | |
| 94 * Can be used to set the width of image (e.g. via binding); size may also
be | |
| 95 * set via CSS. | |
| 96 */ | |
| 97 width: { | |
| 98 observer: '_widthChanged', | |
| 99 type: Number, | |
| 100 value: null | |
| 101 }, | |
| 102 | |
| 103 /** | |
| 104 * Can be used to set the height of image (e.g. via binding); size may als
o be | |
| 105 * set via CSS. | |
| 106 * | |
| 107 * @attribute height | |
| 108 * @type number | |
| 109 * @default null | |
| 110 */ | |
| 111 height: { | |
| 112 observer: '_heightChanged', | |
| 113 type: Number, | |
| 114 value: null | |
| 115 }, | |
| 116 | |
| 117 _placeholderBackgroundUrl: { | |
| 118 type: String, | |
| 119 computed: '_computePlaceholderBackgroundUrl(preload,placeholder)', | |
| 120 observer: '_placeholderBackgroundUrlChanged' | |
| 121 }, | |
| 122 | |
| 123 requiresPreload: { | |
| 124 type: Boolean, | |
| 125 computed: '_computeRequiresPreload(preload,loaded)' | |
| 126 }, | |
| 127 | |
| 128 canLoad: { | |
| 129 type: Boolean, | |
| 130 computed: '_computeCanLoad(preventLoad, src)' | |
| 131 } | |
| 132 | |
| 133 }, | |
| 134 | |
| 135 observers: [ | |
| 136 '_transformChanged(sizing, position)', | |
| 137 '_loadBehaviorChanged(canLoad, preload, loaded)', | |
| 138 '_loadStateChanged(src, preload, loaded)', | |
| 139 ], | |
| 140 | |
| 141 ready: function() { | |
| 142 if (!this.hasAttribute('role')) { | |
| 143 this.setAttribute('role', 'img'); | |
| 144 } | |
| 145 }, | |
| 146 | |
| 147 _computeImageVisibility: function() { | |
| 148 return !!this.sizing; | |
| 149 }, | |
| 150 | |
| 151 _computePlaceholderVisibility: function() { | |
| 152 return !this.preload || (this.loaded && !this.fade); | |
| 153 }, | |
| 154 | |
| 155 _computePlaceholderClassName: function() { | |
| 156 if (!this.preload) { | |
| 157 return ''; | |
| 158 } | |
| 159 | |
| 160 var className = 'fit'; | |
| 161 if (this.loaded && this.fade) { | |
| 162 className += ' faded-out'; | |
| 163 } | |
| 164 return className; | |
| 165 }, | |
| 166 | |
| 167 _computePlaceholderBackgroundUrl: function() { | |
| 168 if (this.preload && this.placeholder) { | |
| 169 return 'url(' + this.placeholder + ')'; | |
| 170 } | |
| 171 | |
| 172 return null; | |
| 173 }, | |
| 174 | |
| 175 _computeRequiresPreload: function() { | |
| 176 return this.preload && !this.loaded; | |
| 177 }, | |
| 178 | |
| 179 _computeCanLoad: function() { | |
| 180 return Boolean(!this.preventLoad && this.src); | |
| 181 }, | |
| 182 | |
| 183 _widthChanged: function() { | |
| 184 this.style.width = isNaN(this.width) ? this.width : this.width + 'px'; | |
| 185 }, | |
| 186 | |
| 187 _heightChanged: function() { | |
| 188 this.style.height = isNaN(this.height) ? this.height : this.height + 'px'; | |
| 189 }, | |
| 190 | |
| 191 _srcChanged: function(newSrc, oldSrc) { | |
| 192 if (newSrc !== oldSrc) { | |
| 193 this.loaded = false; | |
| 194 } | |
| 195 }, | |
| 196 | |
| 197 _placeholderBackgroundUrlChanged: function() { | |
| 198 this.$.placeholder.style.backgroundImage = | |
| 199 this._placeholderBackgroundUrl; | |
| 200 }, | |
| 201 | |
| 202 _transformChanged: function() { | |
| 203 var placeholderStyle = this.$.placeholder.style; | |
| 204 | |
| 205 this.style.backgroundSize = | |
| 206 placeholderStyle.backgroundSize = this.sizing; | |
| 207 | |
| 208 this.style.backgroundPosition = | |
| 209 placeholderStyle.backgroundPosition = | |
| 210 this.sizing ? this.position : ''; | |
| 211 | |
| 212 this.style.backgroundRepeat = | |
| 213 placeholderStyle.backgroundRepeat = | |
| 214 this.sizing ? 'no-repeat' : ''; | |
| 215 }, | |
| 216 | |
| 217 _loadBehaviorChanged: function() { | |
| 218 var img; | |
| 219 | |
| 220 if (!this.canLoad) { | |
| 221 return; | |
| 222 } | |
| 223 | |
| 224 if (this.requiresPreload) { | |
| 225 img = new Image(); | |
| 226 img.src = this.src; | |
| 227 | |
| 228 this.loading = true; | |
| 229 | |
| 230 img.onload = function() { | |
| 231 this.loading = false; | |
| 232 this.loaded = true; | |
| 233 }.bind(this); | |
| 234 } else { | |
| 235 this.loaded = true; | |
| 236 } | |
| 237 }, | |
| 238 | |
| 239 _loadStateChanged: function() { | |
| 240 if (this.requiresPreload) { | |
| 241 return; | |
| 242 } | |
| 243 | |
| 244 if (this.sizing) { | |
| 245 this.style.backgroundImage = this.src ? 'url(' + this.src + ')': ''; | |
| 246 } else { | |
| 247 this.$.img.src = this.src || ''; | |
| 248 } | |
| 249 } | |
| 250 }); | |
| 251 | |
| OLD | NEW |