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

Side by Side Diff: third_party/polymer/v1_0/components-chromium/iron-image/iron-image-extracted.js

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
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
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698