Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(791)

Side by Side Diff: third_party/polymer/v1_0/components/iron-image/iron-image.html

Issue 1221923003: Update bower.json for Polymer elements and add PRESUBMIT.py (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: rebase Created 5 years, 5 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
(Empty)
1 <!--
2 @license
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
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
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
9 -->
10
11 <link rel="import" href="../polymer/polymer.html">
12 <link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html">
13
14 <!--
15 `iron-image` is an element for displaying an image that provides useful sizing a nd
16 preloading options not found on the standard `<img>` tag.
17
18 The `sizing` option allows the image to be either cropped (`cover`) or
19 letterboxed (`contain`) to fill a fixed user-size placed on the element.
20
21 The `preload` option prevents the browser from rendering the image until the
22 image is fully loaded. In the interim, either the element's CSS `background-col or`
23 can be be used as the placeholder, or the `placeholder` property can be
24 set to a URL (preferably a data-URI, for instant rendering) for an
25 placeholder image.
26
27 The `fade` option (only valid when `preload` is set) will cause the placeholder
28 image/color to be faded out once the image is rendered.
29
30 Examples:
31
32 Basically identical to &lt;img src="..."&gt; tag:
33
34 <iron-image src="http://lorempixel.com/400/400"></iron-image>
35
36 Will letterbox the image to fit:
37
38 <iron-image style="width:400px; height:400px;" sizing="contain"
39 src="http://lorempixel.com/600/400"></iron-image>
40
41 Will crop the image to fit:
42
43 <iron-image style="width:400px; height:400px;" sizing="cover"
44 src="http://lorempixel.com/600/400"></iron-image>
45
46 Will show light-gray background until the image loads:
47
48 <iron-image style="width:400px; height:400px; background-color: lightgray;"
49 sizing="cover" preload src="http://lorempixel.com/600/400"></iron-image>
50
51 Will show a base-64 encoded placeholder image until the image loads:
52
53 <iron-image style="width:400px; height:400px;" placeholder="data:image/gif;b ase64,..."
54 sizing="cover" preload src="http://lorempixel.com/600/400"></iron-image>
55
56 Will fade the light-gray background out once the image is loaded:
57
58 <iron-image style="width:400px; height:400px; background-color: lightgray;"
59 sizing="cover" preload fade src="http://lorempixel.com/600/400"></iron-ima ge>
60
61
62 @group Iron Elements
63 @element iron-image
64 @demo demo/index.html
65 -->
66
67 <dom-module id="iron-image">
68
69 <style>
70
71 :host {
72 display: inline-block;
73 overflow: hidden;
74 position: relative;
75 }
76
77 :host([sizing]) #img {
78 display: none;
79 }
80
81 #placeholder {
82 background-color: inherit;
83 opacity: 1;
84 }
85
86 #placeholder.faded-out {
87 transition: opacity 0.5s linear;
88 opacity: 0;
89 }
90
91 </style>
92
93 <template>
94
95 <img id="img" role="none" hidden$="[[_computeImageVisibility(sizing)]]">
96 <div id="placeholder" hidden$="[[_computePlaceholderVisibility(fade,loaded,p reload)]]" class$="[[_computePlaceholderClassName(fade,loaded,preload)]]"></div>
97 <content></content>
98
99 </template>
100
101 </dom-module>
102
103 <script>
104
105 Polymer({
106
107 is: 'iron-image',
108
109 properties: {
110 /**
111 * The URL of an image.
112 */
113 src: {
114 observer: '_srcChanged',
115 type: String,
116 value: ''
117 },
118
119 /**
120 * When true, the image is prevented from loading and any placeholder is
121 * shown. This may be useful when a binding to the src property is known to
122 * be invalid, to prevent 404 requests.
123 */
124 preventLoad: {
125 type: Boolean,
126 value: false
127 },
128
129 /**
130 * Sets a sizing option for the image. Valid values are `contain` (full
131 * aspect ratio of the image is contained within the element and
132 * letterboxed) or `cover` (image is cropped in order to fully cover the
133 * bounds of the element), or `null` (default: image takes natural size).
134 */
135 sizing: {
136 type: String,
137 value: null
138 },
139
140 /**
141 * When a sizing option is uzed (`cover` or `contain`), this determines
142 * how the image is aligned within the element bounds.
143 */
144 position: {
145 type: String,
146 value: 'center'
147 },
148
149 /**
150 * When `true`, any change to the `src` property will cause the `placehold er`
151 * image to be shown until the
152 */
153 preload: {
154 type: Boolean,
155 value: false
156 },
157
158 /**
159 * This image will be used as a background/placeholder until the src image has
160 * loaded. Use of a data-URI for placeholder is encouraged for instant re ndering.
161 */
162 placeholder: {
163 type: String,
164 value: null
165 },
166
167 /**
168 * When `preload` is true, setting `fade` to true will cause the image to
169 * fade into place.
170 */
171 fade: {
172 type: Boolean,
173 value: false
174 },
175
176 /**
177 * Read-only value that is true when the image is loaded.
178 */
179 loaded: {
180 notify: true,
181 type: Boolean,
182 value: false
183 },
184
185 /**
186 * Read-only value that tracks the loading state of the image when the `pr eload`
187 * option is used.
188 */
189 loading: {
190 notify: true,
191 type: Boolean,
192 value: false
193 },
194
195 /**
196 * Can be used to set the width of image (e.g. via binding); size may also be
197 * set via CSS.
198 */
199 width: {
200 observer: '_widthChanged',
201 type: Number,
202 value: null
203 },
204
205 /**
206 * Can be used to set the height of image (e.g. via binding); size may als o be
207 * set via CSS.
208 *
209 * @attribute height
210 * @type number
211 * @default null
212 */
213 height: {
214 observer: '_heightChanged',
215 type: Number,
216 value: null
217 },
218
219 _placeholderBackgroundUrl: {
220 type: String,
221 computed: '_computePlaceholderBackgroundUrl(preload,placeholder)',
222 observer: '_placeholderBackgroundUrlChanged'
223 },
224
225 requiresPreload: {
226 type: Boolean,
227 computed: '_computeRequiresPreload(preload,loaded)'
228 },
229
230 canLoad: {
231 type: Boolean,
232 computed: '_computeCanLoad(preventLoad, src)'
233 }
234
235 },
236
237 observers: [
238 '_transformChanged(sizing, position)',
239 '_loadBehaviorChanged(canLoad, preload, loaded)',
240 '_loadStateChanged(src, preload, loaded)',
241 ],
242
243 ready: function() {
244 if (!this.hasAttribute('role')) {
245 this.setAttribute('role', 'img');
246 }
247 },
248
249 _computeImageVisibility: function() {
250 return !!this.sizing;
251 },
252
253 _computePlaceholderVisibility: function() {
254 return !this.preload || (this.loaded && !this.fade);
255 },
256
257 _computePlaceholderClassName: function() {
258 if (!this.preload) {
259 return '';
260 }
261
262 var className = 'fit';
263 if (this.loaded && this.fade) {
264 className += ' faded-out';
265 }
266 return className;
267 },
268
269 _computePlaceholderBackgroundUrl: function() {
270 if (this.preload && this.placeholder) {
271 return 'url(' + this.placeholder + ')';
272 }
273
274 return null;
275 },
276
277 _computeRequiresPreload: function() {
278 return this.preload && !this.loaded;
279 },
280
281 _computeCanLoad: function() {
282 return Boolean(!this.preventLoad && this.src);
283 },
284
285 _widthChanged: function() {
286 this.style.width = isNaN(this.width) ? this.width : this.width + 'px';
287 },
288
289 _heightChanged: function() {
290 this.style.height = isNaN(this.height) ? this.height : this.height + 'px';
291 },
292
293 _srcChanged: function(newSrc, oldSrc) {
294 if (newSrc !== oldSrc) {
295 this.loaded = false;
296 }
297 },
298
299 _placeholderBackgroundUrlChanged: function() {
300 this.$.placeholder.style.backgroundImage =
301 this._placeholderBackgroundUrl;
302 },
303
304 _transformChanged: function() {
305 var placeholderStyle = this.$.placeholder.style;
306
307 this.style.backgroundSize =
308 placeholderStyle.backgroundSize = this.sizing;
309
310 this.style.backgroundPosition =
311 placeholderStyle.backgroundPosition =
312 this.sizing ? this.position : '';
313
314 this.style.backgroundRepeat =
315 placeholderStyle.backgroundRepeat =
316 this.sizing ? 'no-repeat' : '';
317 },
318
319 _loadBehaviorChanged: function() {
320 var img;
321
322 if (!this.canLoad) {
323 return;
324 }
325
326 if (this.requiresPreload) {
327 img = new Image();
328 img.src = this.src;
329
330 this.loading = true;
331
332 img.onload = function() {
333 this.loading = false;
334 this.loaded = true;
335 }.bind(this);
336 } else {
337 this.loaded = true;
338 }
339 },
340
341 _loadStateChanged: function() {
342 if (this.requiresPreload) {
343 return;
344 }
345
346 if (this.sizing) {
347 this.style.backgroundImage = this.src ? 'url(' + this.src + ')': '';
348 } else {
349 this.$.img.src = this.src || '';
350 }
351 }
352 });
353
354 </script>
OLDNEW
« no previous file with comments | « third_party/polymer/v1_0/components/iron-image/index.html ('k') | third_party/polymer/v1_0/components/iron-input/.bower.json » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698