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 |