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

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

Issue 1621603002: Add Polymer iron-image to Chromium checkout. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 4 years, 11 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 side-by-side diff with in-line comments
Download patch
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);
+ }
+ });
« no previous file with comments | « third_party/polymer/v1_0/components-chromium/iron-image/iron-image.html ('k') | third_party/polymer/v1_0/reproduce.sh » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698