third_party/polymer/components-chromium/core-image/core-image-extracted.js

   1
   2
   3   Polymer('core-image',{
   4
   5     publish: {
   6
   7       /**
   8        * The URL of an image.
   9        *
  10        * @attribute src
  11        * @type string
  12        * @default null
  13        */
  14       src: null,
  15
  16       /**
  17        * When false, the image is prevented from loading and any placeholder is
  18        * shown.  This may be useful when a binding to the src property is known to
  19        * be invalid, to prevent 404 requests.
  20        *
  21        * @attribute src
  22        * @type string
  23        * @default null
  24        */
  25       load: true,
  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        * @attribute sizing
  34        * @type string
  35        * @default null
  36        */
  37       sizing: null,
  38
  39       /**
  40        * When a sizing option is uzed (`cover` or `contain`), this determines
  41        * how the image is aligned within the element bounds.
  42        *
  43        * @attribute position
  44        * @type string
  45        * @default 'center'
  46        */
  47       position: 'center',
  48
  49       /**
  50        * When `true`, any change to the `src` property will cause the `placeholder`
  51        * image to be shown until the
  52        *
  53        * @attribute preload
  54        * @type boolean
  55        * @default false
  56        */
  57       preload: false,
  58
  59       /**
  60        * This image will be used as a background/placeholder until the src image has
  61        * loaded.  Use of a data-URI for placeholder is encouraged for instant rendering.
  62        *
  63        * @attribute placeholder
  64        * @type string
  65        * @default null
  66        */
  67       placeholder: null,
  68
  69       /**
  70        * When `preload` is true, setting `fade` to true will cause the image to
  71        * fade into place.
  72        *
  73        * @attribute fade
  74        * @type boolean
  75        * @default false
  76        */
  77       fade: false,
  78
  79       /**
  80        * Read-only value that tracks the loading state of the image when the `preload`
  81        * option is used.
  82        *
  83        * @attribute loading
  84        * @type boolean
  85        * @default false
  86        */
  87       loading: false,
  88
  89       /**
  90        * Can be used to set the width of image (e.g. via binding); size may also be
  91        * set via CSS.
  92        *
  93        * @attribute width
  94        * @type number
  95        * @default null
  96        */
  97       width: null,
  98
  99       /**
 100        * Can be used to set the height of image (e.g. via binding); size may also be
 101        * set via CSS.
 102        *
 103        * @attribute height
 104        * @type number
 105        * @default null
 106        */
 107       height: null
 108
 109     },
 110
 111     observe: {
 112       'preload color sizing position src fade': 'update'
 113     },
 114
 115     widthChanged: function() {
 116       this.style.width = isNaN(this.width) ? this.width : this.width + 'px';
 117     },
 118
 119     heightChanged: function() {
 120       this.style.height = isNaN(this.height) ? this.height : this.height + 'px';
 121     },
 122
 123     update: function() {
 124       this.style.backgroundSize = this.sizing;
 125       this.style.backgroundPosition = this.sizing ? this.position : null;
 126       this.style.backgroundRepeat = this.sizing ? 'no-repeat' : null;
 127       if (this.preload) {
 128         if (this.fade) {
 129           if (!this._placeholderEl) {
 130             this._placeholderEl = this.shadowRoot.querySelector('#placeholder');
 131           }
 132           this._placeholderEl.style.backgroundSize = this.sizing;
 133           this._placeholderEl.style.backgroundPosition = this.sizing ? this.position : null;
 134           this._placeholderEl.style.backgroundRepeat = this.sizing ? 'no-repeat' : null;
 135           this._placeholderEl.classList.remove('fadein');
 136           this._placeholderEl.style.backgroundImage = (this.load && this.placeholder) ? 'url(' + this.placeholder + ')': null;
 137         } else {
 138           this._setSrc(this.placeholder);
 139         }
 140         if (this.load && this.src) {
 141           var img = new Image();
 142           img.src = this.src;
 143           this.loading = true;
 144           img.onload = function() {
 145             this._setSrc(this.src);
 146             this.loading = false;
 147             if (this.fade) {
 148               this._placeholderEl.classList.add('fadein');
 149             }
 150           }.bind(this);
 151         }
 152       } else {
 153         this._setSrc(this.src);
 154       }
 155     },
 156
 157     _setSrc: function(src) {
 158       if (this.sizing) {
 159         this.style.backgroundImage = src ? 'url(' + src + ')': '';
 160       } else {
 161         this.$.img.src = src || '';
 162       }
 163     }
 164
 165   });
 166