Rename polymer and cr_elements v0_8 to v1_0

third_party/polymer/v0_8/components-chromium/iron-image/iron-image-extracted.js

-
-
-  Polymer({
-
-    is: 'iron-image',
-
-    properties: {
-      /**
-       * The URL of an image.
-       *
-       * @attribute src
-       * @type string
-       * @default ''
-       */
-      src: {
-        observer: '_srcChanged',
-        type: String,
-        value: ''
-      },
-
-      /**
-       * 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.
-       *
-       * @attribute preventLoad
-       * @type boolean
-       * @default false
-       */
-      preventLoad: {
-        type: Boolean,
-        value: false
-      },
-
-      /**
-       * 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).
-       *
-       * @attribute sizing
-       * @type string
-       * @default null
-       */
-      sizing: {
-        type: String,
-        value: null
-      },
-
-      /**
-       * When a sizing option is uzed (`cover` or `contain`), this determines
-       * how the image is aligned within the element bounds.
-       *
-       * @attribute position
-       * @type string
-       * @default 'center'
-       */
-      position: {
-        type: String,
-        value: 'center'
-      },
-
-      /**
-       * When `true`, any change to the `src` property will cause the `placeholder`
-       * image to be shown until the
-       *
-       * @attribute preload
-       * @type boolean
-       * @default false
-       */
-      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.
-       *
-       * @attribute placeholder
-       * @type string
-       * @default null
-       */
-      placeholder: {
-        type: String,
-        value: null
-      },
-
-      /**
-       * When `preload` is true, setting `fade` to true will cause the image to
-       * fade into place.
-       *
-       * @attribute fade
-       * @type boolean
-       * @default false
-       */
-      fade: {
-        type: Boolean,
-        value: false
-      },
-
-      /**
-       * Read-only value that is true when the image is loaded.
-       *
-       * @attribute preloaded
-       * @type boolean
-       * @default false
-       */
-      loaded: {
-        notify: true,
-        type: Boolean,
-        value: false
-      },
-
-      /**
-       * Read-only value that tracks the loading state of the image when the `preload`
-       * option is used.
-       *
-       * @attribute loading
-       * @type boolean
-       * @default false
-       */
-      loading: {
-        notify: 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.
-       *
-       * @attribute width
-       * @type number
-       * @default null
-       */
-      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
-      },
-
-      _placeholderBackgroundUrl: {
-        type: String,
-        computed: '_computePlaceholderBackgroundUrl(preload,placeholder)',
-        observer: '_placeholderBackgroundUrlChanged'
-      },
-
-      requiresPreload: {
-        type: Boolean,
-        computed: '_computeRequiresPreload(preload,loaded)'
-      },
-
-      canLoad: {
-        type: Boolean,
-        computed: '_computeCanLoad(preventLoad, src)'
-      }
-
-    },
-
-    observers: [
-      '_transformChanged(sizing, position)',
-      '_loadBehaviorChanged(canLoad, preload, loaded)',
-      '_loadStateChanged(src, preload, loaded)',
-    ],
-
-    ready: function() {
-      if (!this.hasAttribute('role')) {
-        this.setAttribute('role', 'img');
-      }
-    },
-
-    _computeImageVisibility: function() {
-      return !!this.sizing;
-    },
-
-    _computePlaceholderVisibility: function() {
-      return !this.preload || (this.loaded && !this.fade);
-    },
-
-    _computePlaceholderClassName: function() {
-      if (!this.preload) {
-        return '';
-      }
-
-      var className = 'fit';
-      if (this.loaded && this.fade) {
-        className += ' faded-out';
-      }
-      return className;
-    },
-
-    _computePlaceholderBackgroundUrl: function() {
-      if (this.preload && this.placeholder) {
-        return 'url(' + this.placeholder + ')';
-      }
-
-      return null;
-    },
-
-    _computeRequiresPreload: function() {
-      return this.preload && !this.loaded;
-    },
-
-    _computeCanLoad: function() {
-      return Boolean(!this.preventLoad && this.src);
-    },
-
-    _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';
-    },
-
-    _srcChanged: function(newSrc, oldSrc) {
-      if (newSrc !== oldSrc) {
-        this.loaded = false;
-      }
-    },
-
-    _placeholderBackgroundUrlChanged: function() {
-      this.$.placeholder.style.backgroundImage =
-        this._placeholderBackgroundUrl;
-    },
-
-    _transformChanged: function() {
-      var placeholderStyle = this.$.placeholder.style;
-
-      this.style.backgroundSize =
-        placeholderStyle.backgroundSize = this.sizing;
-
-      this.style.backgroundPosition =
-        placeholderStyle.backgroundPosition =
-        this.sizing ? this.position : null;
-
-      this.style.backgroundRepeat =
-        placeholderStyle.backgroundRepeat =
-        this.sizing ? 'no-repeat' : null;
-    },
-
-    _loadBehaviorChanged: function() {
-      var img;
-
-      if (!this.canLoad) {
-        return;
-      }
-
-      if (this.requiresPreload) {
-        img = new Image();
-        img.src = this.src;
-
-        this.loading = true;
-
-        img.onload = function() {
-          this.loading = false;
-          this.loaded = true;
-        }.bind(this);
-      } else {
-        this.loaded = true;
-      }
-    },
-
-    _loadStateChanged: function() {
-      if (this.requiresPreload) {
-        return;
-      }
-
-      if (this.sizing) {
-        this.style.backgroundImage = this.src ? 'url(' + this.src + ')': '';
-      } else {
-        this.$.img.src = this.src || '';
-      }
-    }
-  });
-