t-image.html

<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html" />

<!--
`t-image` is an element for displaying an image that provides useful sizing and
preloading options not found on the standard `<img>` tag.

The `sizing` option allows the image to be either cropped (`cover`) or
letterboxed (`contain`) to fill a fixed user-size placed on the element.

The `preload` option prevents the browser from rendering the image until the
image is fully loaded.  In the interim, either the element's CSS `background-color`
can be be used as the placeholder, or the `placeholder` property can be
set to a URL (preferably a data-URI, for instant rendering) for an
placeholder image.

The `fade` option (only valid when `preload` is set) will cause the placeholder
image/color to be faded out once the image is rendered.

Examples:

  Basically identical to &lt;img src="..."&gt; tag:

    <t-image src="http://lorempixel.com/400/400"></t-image>

  Will letterbox the image to fit:

    <t-image style="width:400px; height:400px;" sizing="contain"
      src="http://lorempixel.com/600/400"></t-image>

  Will crop the image to fit:

    <t-image style="width:400px; height:400px;" sizing="cover"
      src="http://lorempixel.com/600/400"></t-image>

  Will show light-gray background until the image loads:

    <t-image style="width:400px; height:400px; background-color: lightgray;"
      sizing="cover" preload src="http://lorempixel.com/600/400"></t-image>

  Will show a base-64 encoded placeholder image until the image loads:

    <t-image style="width:400px; height:400px;" placeholder="data:image/gif;base64,..."
      sizing="cover" preload src="http://lorempixel.com/600/400"></t-image>

  Will fade the light-gray background out once the image is loaded:

    <t-image style="width:400px; height:400px; background-color: lightgray;"
      sizing="cover" preload fade src="http://lorempixel.com/600/400"></t-image>


@group Iron Elements
@element t-image
@demo demo/index.html
-->

<dom-module id="t-image">
    
  <style include="iron-flex-alignment"></style>
  <style include="iron-positioning"></style>
  <style include="iron-flex">

    :host {
      display: inline-block;
      overflow: hidden;
      position: relative;
    }

    :host([sizing]) #img {
      display: none;
    }

    #placeholder {
      background-color: inherit;
      opacity: 1;
    }

    #placeholder.faded-out {
      transition: opacity 0.5s linear;
      opacity: 0;
    }

    #loadingOverlay{
        background: var(--t-image-bg, #ccc);
        color: var(--t-image-icon-color, #fff);
        padding:10px;
    }
    #loadingIcon{
        max-height: 100px;
        max-width: 100px;
        width: auto;
        height: auto;
    }

  </style>

  <template>
     
      <template is="dom-if" if="[[!loaded]]">
        <div class="layout horizontal center center-justified fit" id="loadingOverlay">
            <iron-icon id="loadingIcon" icon="[[loadingIcon]]"></iron-icon>
        </div>
      </template>
    <img id="img" role="none" hidden$="[[_computeImageVisibility(sizing)]]">
    <div id="placeholder" hidden$="[[_computePlaceholderVisibility(fade,loaded,preload)]]" class$="[[_computePlaceholderClassName(fade,loaded,preload)]]"></div>
    <content></content>

  </template>

</dom-module>

<script>

  Polymer({

    is: 't-image',

    properties: {
      /**
       * The URL of an image.
       *
       * @attribute src
       * @type string
       * @default ''
       */
      src: {
        observer: '_srcChanged',
        type: String,
        value: ''
      },

    /**
       * The icon to put when theres no source 
       *
       * @attribute src
       * @type string
       * @default 'perm-media'
       */
      loadingIcon: {
          type: String,
          value: 'perm-media'
      },
      /**
       * 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,
        reflectToAttribute:true,
        value: "cover"
      },

      /**
       * 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: {
        reflectToAttribute:true,
        type: Boolean,
        value: true
      },

      /**
       * 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: {
        reflectToAttribute:true,
        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: {
        reflectToAttribute:true,
        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,
        reflectToAttribute:true,
        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,
        reflectToAttribute:true,
        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 || '';
      }
    }
  });

</script>