Index: third_party/polymer/v1_0/components-chromium/iron-image/iron-image-extracted.js |
diff --git a/third_party/polymer/v1_0/components-chromium/iron-image/iron-image-extracted.js b/third_party/polymer/v1_0/components-chromium/iron-image/iron-image-extracted.js |
new file mode 100644 |
index 0000000000000000000000000000000000000000..90e6eb73c47a724bdb05b25ae69e9e6d28b6de25 |
--- /dev/null |
+++ b/third_party/polymer/v1_0/components-chromium/iron-image/iron-image-extracted.js |
@@ -0,0 +1,274 @@ |
+Polymer({ |
+ is: 'iron-image', |
+ |
+ properties: { |
+ /** |
+ * The URL of an image. |
+ */ |
+ src: { |
+ observer: '_srcChanged', |
+ type: String, |
+ value: '' |
+ }, |
+ |
+ /** |
+ * A short text alternative for the image. |
+ */ |
+ alt: { |
+ type: String, |
+ value: null |
+ }, |
+ |
+ /** |
+ * When true, the image is prevented from loading and any placeholder is |
+ * shown. This may be useful when a binding to the src property is known to |
+ * be invalid, to prevent 404 requests. |
+ */ |
+ preventLoad: { |
+ type: Boolean, |
+ value: false, |
+ observer: '_preventLoadChanged' |
+ }, |
+ |
+ /** |
+ * Sets a sizing option for the image. Valid values are `contain` (full |
+ * aspect ratio of the image is contained within the element and |
+ * letterboxed) or `cover` (image is cropped in order to fully cover the |
+ * bounds of the element), or `null` (default: image takes natural size). |
+ */ |
+ sizing: { |
+ type: String, |
+ value: null, |
+ reflectToAttribute: true |
+ }, |
+ |
+ /** |
+ * When a sizing option is used (`cover` or `contain`), this determines |
+ * how the image is aligned within the element bounds. |
+ */ |
+ position: { |
+ type: String, |
+ value: 'center' |
+ }, |
+ |
+ /** |
+ * When `true`, any change to the `src` property will cause the `placeholder` |
+ * image to be shown until the new image has loaded. |
+ */ |
+ preload: { |
+ type: Boolean, |
+ value: false |
+ }, |
+ |
+ /** |
+ * This image will be used as a background/placeholder until the src image has |
+ * loaded. Use of a data-URI for placeholder is encouraged for instant rendering. |
+ */ |
+ placeholder: { |
+ type: String, |
+ value: null, |
+ observer: '_placeholderChanged' |
+ }, |
+ |
+ /** |
+ * When `preload` is true, setting `fade` to true will cause the image to |
+ * fade into place. |
+ */ |
+ fade: { |
+ type: Boolean, |
+ value: false |
+ }, |
+ |
+ /** |
+ * Read-only value that is true when the image is loaded. |
+ */ |
+ loaded: { |
+ notify: true, |
+ readOnly: true, |
+ type: Boolean, |
+ value: false |
+ }, |
+ |
+ /** |
+ * Read-only value that tracks the loading state of the image when the `preload` |
+ * option is used. |
+ */ |
+ loading: { |
+ notify: true, |
+ readOnly: true, |
+ type: Boolean, |
+ value: false |
+ }, |
+ |
+ /** |
+ * Read-only value that indicates that the last set `src` failed to load. |
+ */ |
+ error: { |
+ notify: true, |
+ readOnly: true, |
+ type: Boolean, |
+ value: false |
+ }, |
+ |
+ /** |
+ * Can be used to set the width of image (e.g. via binding); size may also be |
+ * set via CSS. |
+ */ |
+ width: { |
+ observer: '_widthChanged', |
+ type: Number, |
+ value: null |
+ }, |
+ |
+ /** |
+ * Can be used to set the height of image (e.g. via binding); size may also be |
+ * set via CSS. |
+ * |
+ * @attribute height |
+ * @type number |
+ * @default null |
+ */ |
+ height: { |
+ observer: '_heightChanged', |
+ type: Number, |
+ value: null |
+ }, |
+ }, |
+ |
+ observers: [ |
+ '_transformChanged(sizing, position)' |
+ ], |
+ |
+ ready: function() { |
+ var img = this.$.img; |
+ |
+ img.onload = function() { |
+ if (this.$.img.src !== this._resolveSrc(this.src)) return; |
+ |
+ this._setLoading(false); |
+ this._setLoaded(true); |
+ this._setError(false); |
+ }.bind(this); |
+ |
+ img.onerror = function() { |
+ if (this.$.img.src !== this._resolveSrc(this.src)) return; |
+ |
+ this._reset(); |
+ |
+ this._setLoading(false); |
+ this._setLoaded(false); |
+ this._setError(true); |
+ }.bind(this); |
+ |
+ this._resolvedSrc = ''; |
+ }, |
+ |
+ _load: function(src) { |
+ if (src) { |
+ this.$.img.src = src; |
+ } else { |
+ this.$.img.removeAttribute('src'); |
+ } |
+ this.$.sizedImgDiv.style.backgroundImage = src ? 'url("' + src + '")' : ''; |
+ |
+ this._setLoading(true); |
+ this._setLoaded(false); |
+ this._setError(false); |
+ }, |
+ |
+ _reset: function() { |
+ this.$.img.removeAttribute('src'); |
+ this.$.sizedImgDiv.style.backgroundImage = ''; |
+ |
+ this._setLoading(false); |
+ this._setLoaded(false); |
+ this._setError(false); |
+ }, |
+ |
+ _computePlaceholderHidden: function() { |
+ return !this.preload || (!this.fade && !this.loading && this.loaded); |
+ }, |
+ |
+ _computePlaceholderClassName: function() { |
+ return (this.preload && this.fade && !this.loading && this.loaded) ? 'faded-out' : ''; |
+ }, |
+ |
+ _computeImgDivHidden: function() { |
+ return !this.sizing; |
+ }, |
+ |
+ _computeImgDivARIAHidden: function() { |
+ return this.alt === '' ? 'true' : undefined; |
+ }, |
+ |
+ _computeImgDivARIALabel: function() { |
+ if (this.alt !== null) { |
+ return this.alt; |
+ } |
+ |
+ // Polymer.ResolveUrl.resolveUrl will resolve '' relative to a URL x to |
+ // that URL x, but '' is the default for src. |
+ if (this.src === '') { |
+ return ''; |
+ } |
+ |
+ var pathComponents = (new URL(this._resolveSrc(this.src))).pathname.split("/"); |
+ return pathComponents[pathComponents.length - 1]; |
+ }, |
+ |
+ _computeImgHidden: function() { |
+ return !!this.sizing; |
+ }, |
+ |
+ _widthChanged: function() { |
+ this.style.width = isNaN(this.width) ? this.width : this.width + 'px'; |
+ }, |
+ |
+ _heightChanged: function() { |
+ this.style.height = isNaN(this.height) ? this.height : this.height + 'px'; |
+ }, |
+ |
+ _preventLoadChanged: function() { |
+ if (this.preventLoad || this.loaded) return; |
+ |
+ this._reset(); |
+ this._load(this.src); |
+ }, |
+ |
+ _srcChanged: function(newSrc, oldSrc) { |
+ var newResolvedSrc = this._resolveSrc(newSrc); |
+ if (newResolvedSrc === this._resolvedSrc) return; |
+ this._resolvedSrc = newResolvedSrc; |
+ |
+ this._reset(); |
+ if (!this.preventLoad) { |
+ this._load(newSrc); |
+ } |
+ }, |
+ |
+ _placeholderChanged: function() { |
+ this.$.placeholder.style.backgroundImage = |
+ this.placeholder ? 'url("' + this.placeholder + '")' : ''; |
+ }, |
+ |
+ _transformChanged: function() { |
+ var sizedImgDivStyle = this.$.sizedImgDiv.style; |
+ var placeholderStyle = this.$.placeholder.style; |
+ |
+ sizedImgDivStyle.backgroundSize = |
+ placeholderStyle.backgroundSize = |
+ this.sizing; |
+ |
+ sizedImgDivStyle.backgroundPosition = |
+ placeholderStyle.backgroundPosition = |
+ this.sizing ? this.position : ''; |
+ |
+ sizedImgDivStyle.backgroundRepeat = |
+ placeholderStyle.backgroundRepeat = |
+ this.sizing ? 'no-repeat' : ''; |
+ }, |
+ |
+ _resolveSrc: function(testSrc) { |
+ return Polymer.ResolveUrl.resolveUrl(testSrc, this.ownerDocument.baseURI); |
+ } |
+ }); |