<!doctype 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
-->
<html>
  <head>

    <title>iron-image</title>

    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>

    <link rel="stylesheet" href="../../paper-styles/demo.css">
    <link rel="import" href="../iron-image.html">

    <style>
      .sized {
        width: 200px;
        height: 200px;
      }
      .gray {
        background-color: lightgray;
      }
      .group {
        display: inline-block;
        vertical-align: top;
      }

      [hidden] {
        display: none;
      }

      .controls {
        display: block;
        margin-bottom: 1em;
      }
    </style>

  </head>
  <body unresolved>

    <template is="dom-bind">
      <h3>Sizing: none (naturally sized)</h3>
      <iron-image src="./polymer.svg"></iron-image>

      <h3>Sizing: cover</h3>
      <iron-image class="sized" sizing="cover" src="./polymer.svg"></iron-image>
      <iron-image class="sized" sizing="cover" src="./polymer.svg"></iron-image>

      <h3>Sizing: contain</h3>
      <iron-image class="sized gray" sizing="contain"  src="./polymer.svg"></iron-image>
      <iron-image class="sized gray" sizing="contain"  src="./polymer.svg"></iron-image>

      <h3>Preload: none</h3>
      <div class="group">
        <div>No sizing</div>
        <div class="controls">
          <button on-click="preload" target="preload1a">Load image</button>
        </div>
        <iron-image id="preload1a" class="sized gray" ></iron-image>
      </div>
      <div class="group">
        <div>Cover</div>
        <div class="controls"><button on-click="preload" target="preload1b">Load image</button></div>
        <iron-image id="preload1b" class="sized gray" sizing="cover" ></iron-image>
      </div>
      <div class="group">
        <div>Contain</div>
        <div class="controls"><button on-click="preload" target="preload1c">Load image</button></div>
        <iron-image id="preload1c" class="sized gray" sizing="contain" ></iron-image>
      </div>

      <h3>Preload: color as placeholder</h3>
      <div class="group">
        <div>No sizing</div>
        <div class="controls"><button on-click="preload" target="preload2a">Load image</button>
          <span hidden$="[[!loading2a]]">Loading...</span></div>

        <iron-image loading="{{loading2a}}" id="preload2a" class="sized gray" preload></iron-image>
      </div>
      <div class="group">
        <div>Cover</div>
        <div class="controls"><button on-click="preload" target="preload2b">Load image</button>
          <span hidden$="[[!loading2b]]">Loading...</span></div>

        <iron-image loading="{{loading2b}}" id="preload2b" class="sized gray" sizing="cover" preload ></iron-image>
      </div>
      <div class="group">
        <div>Contain</div>
        <div class="controls"><button on-click="preload" target="preload2c">Load image</button>
          <span hidden$="[[!loading2c]]">Loading...</span></div>

        <iron-image loading="{{loading2c}}" id="preload2c" class="sized gray" sizing="contain" preload ></iron-image>
      </div>

      <h3>Preload: image as placeholder</h3>
      <div class="group">
        <div>No sizing</div>
        <div class="controls"><button on-click="preload" target="preload3a">Load image</button>
          <span hidden$="[[!loading3a]]">Loading...</span></div>

        <iron-image loading="{{loading3a}}" id="preload3a" class="sized gray" preload  placeholder="data:image/gif;base64, "></iron-image>
      </div>

      <div class="group">
        <div>Cover</div>
        <div class="controls"><button on-click="preload" target="preload3b">Load image</button>
          <span hidden$="[[!loading3b]]">Loading...</span></div>

        <iron-image loading="{{loading3b}}" id="preload3b" class="sized gray" sizing="cover" preload  placeholder="data:image/gif;base64, "></iron-image>
      </div>

      <div class="group">
        <div>Contain</div>
        <div class="controls"><button on-click="preload" target="preload3c">Load image</button>
          <span hidden$="[[!loading3c]]">Loading...</span></div>

        <iron-image loading="{{loading3c}}" id="preload3c" class="sized gray" sizing="contain" preload  placeholder="data:image/gif;base64, "></iron-image>
      </div>

      <h3>Preload: color as placeholder, with Fade-in</h3>
      <div class="group">
        <div>No sizing</div>
        <div class="controls"><button on-click="preload" target="preload2afade">Load image</button>
          <span hidden$="[[!loading2aFade]]">Loading...</span></div>

        <iron-image loading="{{loading2aFade}}" id="preload2afade" class="sized gray" preload fade></iron-image>
      </div>
      <div class="group">
        <div>Cover</div>
        <div class="controls"><button on-click="preload" target="preload2bfade">Load image</button>
          <span hidden$="[[!loading2bFade]]">Loading...</span></div>

        <iron-image loading="{{loading2bFade}}" id="preload2bfade" class="sized gray" sizing="cover" preload fade></iron-image>
      </div>
      <div class="group">
        <div>Contain</div>
        <div class="controls"><button on-click="preload" target="preload2cfade">Load image</button>
          <span hidden$="[[!loading2cFade]]">Loading...</span></div>

        <iron-image loading="{{loading2cFade}}" id="preload2cfade" class="sized gray" sizing="contain" preload fade></iron-image>
      </div>

      <h3>Preload: image as placeholder, with Fade-in</h3>
      <div class="group">
        <div>No sizing</div>
        <div class="controls"><button on-click="preload" target="preload3afade">Load image</button>
          <span hidden$="[[!loading3aFade]]">Loading...</span></div>

        <iron-image loading="{{loading3aFade}}" id="preload3afade" class="sized gray" preload  placeholder="data:image/gif;base64, " fade></iron-image>
      </div>
      <div class="group">
        <div>Cover</div>
        <div class="controls"><button on-click="preload" target="preload3bfade">Load image</button>
          <span hidden$="[[!loading3bFade]]">Loading...</span></div>

        <iron-image loading="{{loading3bFade}}" id="preload3bfade" class="sized gray" sizing="cover" preload  placeholder="data:image/gif;base64, " fade></iron-image>
      </div>
      <div class="group">
        <div>Contain</div>
        <div class="controls"><button on-click="preload" target="preload3cfade">Load image</button>
          <span hidden$="[[!loading3cFade]]">Loading...</span></div>

        <iron-image loading="{{loading3cFade}}" id="preload3cfade" class="sized gray" sizing="contain" preload  placeholder="data:image/gif;base64, " fade></iron-image>
      </div>
    </template>

    <script>
      var scope = document.querySelector('template[is=dom-bind]');

      scope.preload = function(e) {
        var img = document.querySelector('#' + e.target.getAttribute('target'));
        img.src = './polymer.svg?' + Math.random();
        e.target.textContent = 'Reload image';
      };
    </script>
  </body>
</html>
