third_party/polymer/components-chromium/core-image/demo.html

   1 <!--
   2     @license
   3     Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   4     This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   5     The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   6     The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   7     Code distributed by Google as part of the polymer project is also
   8     subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   9 -->
  10 <!doctype html>
  11 <html>
  12 <head>
  13
  14   <title>core-image</title>
  15
  16   <script src="../webcomponentsjs/webcomponents.js"></script>
  17
  18   <link rel="import" href="core-image.html">
  19
  20   <style>
  21     .sized {
  22       width: 200px;
  23       height: 200px;
  24     }
  25     .gray {
  26       background-color: lightgray;
  27     }
  28     .group {
  29       display: inline-block;
  30       vertical-align: top;
  31     }
  32   </style>
  33
  34 </head>
  35 <body unresolved>
  36
  37 <template is="auto-binding">
  38   <h3>Sizing: none (naturally sized)</h3>
  39   <core-image src="http://lorempixel.com/400/200/sports/1"></core-image>
  40
  41   <h3>Sizing: cover</h3>
  42   <core-image class="sized" sizing="cover" src="http://lorempixel.com/400/200/sports/2"></core-image>
  43   <core-image class="sized" sizing="cover" src="http://lorempixel.com/200/400/sports/3"></core-image>
  44
  45   <h3>Sizing: contain</h3>
  46   <core-image class="sized gray" sizing="contain"  src="http://lorempixel.com/400/200/sports/2"></core-image>
  47   <core-image class="sized gray" sizing="contain"  src="http://lorempixel.com/200/400/sports/3"></core-image>
  48
  49   <h3>Preload: none</h3>
  50   <div class="group">
  51     <div>No sizing</div>
  52     <button on-tap="{{preload}}" target="preload1a">Load image</button><br><br>
  53     <core-image id="preload1a" class="sized gray" ></core-image>
  54   </div>
  55   <div class="group">
  56     <div>Cover</div>
  57     <button on-tap="{{preload}}" target="preload1b">Load image</button><br><br>
  58     <core-image id="preload1b" class="sized gray" sizing="cover" ></core-image>
  59   </div>
  60   <div class="group">
  61     <div>Contain</div>
  62     <button on-tap="{{preload}}" target="preload1c">Load image</button><br><br>
  63     <core-image id="preload1c" class="sized gray" sizing="contain" ></core-image>
  64   </div>
  65
  66   <h3>Preload: color as placeholder</h3>
  67   <div class="group">
  68     <div>No sizing</div>
  69     <button on-tap="{{preload}}" target="preload2a">Load image</button>
  70     <span hidden?="{{!$.preload2a.loading}}">Loading...</span>
  71     <br><br>
  72     <core-image id="preload2a" class="sized gray" preload ></core-image>
  73   </div>
  74   <div class="group">
  75     <div>Cover</div>
  76     <button on-tap="{{preload}}" target="preload2b">Load image</button>
  77     <span hidden?="{{!$.preload2b.loading}}">Loading...</span>
  78     <br><br>
  79     <core-image id="preload2b" class="sized gray" sizing="cover" preload ></core-image>
  80   </div>
  81   <div class="group">
  82     <div>Contain</div>
  83     <button on-tap="{{preload}}" target="preload2c">Load image</button>
  84     <span hidden?="{{!$.preload2c.loading}}">Loading...</span>
  85     <br><br>
  86     <core-image id="preload2c" class="sized gray" sizing="contain" preload ></core-image>
  87   </div>
  88
  89   <h3>Preload: image as placeholder</h3>
  90   <div class="group">
  91     <div>No sizing</div>
  92     <button on-tap="{{preload}}" target="preload3a">Load image</button>
  93     <span hidden?="{{!$.preload3a.loading}}">Loading...</span>
  94     <br><br>
  95     <core-image id="preload3a" class="sized gray" preload  placeholder="data:image/gif;base64,R0lGODdhyADIAOMAAO7u/5aWlqGho9jY5OPj8cLCyqyssLe3vc3N1wAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAyADIAAAE/hDISau9OOvNu/9gKI5kaZ5oqq5s675wLM90bd94ru987//AoHBILBqPyKRyyWw6n9CodEqtWq/YrHbL7Xq/4LB4TC6bz+i0es1uu9/wuHxOr9vv+Lx+z+/7/4CBgoOEhYaHiImKi4yNjo+QkZKTlJWWl5iZmpucnZ6foKGio6SlpqeoqaqrrK2ur7CxsrO0tba3uLm6u7y9vr/AwcLDxMXGx8jJysvMzc7P0NHS06kB1tYqA9cUBQEFrgLWAgIqBOEBFNuu1gMs2ugT3d/rAe0r77bsFwMGAQLzEggc8AcQAIJwA+EBuKbQmgF+3iocDHBAXiZ9Fd6dAxhuo4R3/gwnGDgnkqE1BBM0XrN3CSOFgQYM+ouHEsFMAP1i2lQIAN8EhwS6kZPQ74BMnpZcTgiHkoA1AhKxAWDaU+pHqwvrVVVI1ScmpRIwYjxwTqo+r1vTafV6FmtSrRXEak0ooB+8tjzR4v251m0llwSgUnUaAOrJtFMDoESrty9XxYi/wk0sMEBMoRKo7iRK8SiFxu285vQMoIDR0qdNN+rmbxxJlRFLi7u22OG1mDjP4bYb2uFVf+r0CZ+cyOS1oRD/cUM4cN5EA3bDhszqWOHEhBLIZh+qHdnmaFABwIwm9BxLZxAtn6fGvr379/Djy59Pv779+/jz69/Pv7///wAGQyjggAQWaOCBCCao4IIMNujggxBGKOGEFFZo4YUYZqjhhhx26OGHIIYo4ogklmjiiSimqOKKLLbo4oswxijjjDRKEQEAOw=="></core-image>
  96   </div>
  97   <div class="group">
  98     <div>Cover</div>
  99     <button on-tap="{{preload}}" target="preload3b">Load image</button>
 100     <span hidden?="{{!$.preload3b.loading}}">Loading...</span>
 101     <br><br>
 102     <core-image id="preload3b" class="sized gray" sizing="cover" preload  placeholder="data:image/gif;base64,R0lGODdhyADIAOMAAO7u/5aWlqGho9jY5OPj8cLCyqyssLe3vc3N1wAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAyADIAAAE/hDISau9OOvNu/9gKI5kaZ5oqq5s675wLM90bd94ru987//AoHBILBqPyKRyyWw6n9CodEqtWq/YrHbL7Xq/4LB4TC6bz+i0es1uu9/wuHxOr9vv+Lx+z+/7/4CBgoOEhYaHiImKi4yNjo+QkZKTlJWWl5iZmpucnZ6foKGio6SlpqeoqaqrrK2ur7CxsrO0tba3uLm6u7y9vr/AwcLDxMXGx8jJysvMzc7P0NHS06kB1tYqA9cUBQEFrgLWAgIqBOEBFNuu1gMs2ugT3d/rAe0r77bsFwMGAQLzEggc8AcQAIJwA+EBuKbQmgF+3iocDHBAXiZ9Fd6dAxhuo4R3/gwnGDgnkqE1BBM0XrN3CSOFgQYM+ouHEsFMAP1i2lQIAN8EhwS6kZPQ74BMnpZcTgiHkoA1AhKxAWDaU+pHqwvrVVVI1ScmpRIwYjxwTqo+r1vTafV6FmtSrRXEak0ooB+8tjzR4v251m0llwSgUnUaAOrJtFMDoESrty9XxYi/wk0sMEBMoRKo7iRK8SiFxu285vQMoIDR0qdNN+rmbxxJlRFLi7u22OG1mDjP4bYb2uFVf+r0CZ+cyOS1oRD/cUM4cN5EA3bDhszqWOHEhBLIZh+qHdnmaFABwIwm9BxLZxAtn6fGvr379/Djy59Pv779+/jz69/Pv7///wAGQyjggAQWaOCBCCao4IIMNujggxBGKOGEFFZo4YUYZqjhhhx26OGHIIYo4ogklmjiiSimqOKKLLbo4oswxijjjDRKEQEAOw=="></core-image>
 103   </div>
 104   <div class="group">
 105     <div>Contain</div>
 106     <button on-tap="{{preload}}" target="preload3c">Load image</button>
 107     <span hidden?="{{!$.preload3c.loading}}">Loading...</span>
 108     <br><br>
 109     <core-image id="preload3c" class="sized gray" sizing="contain" preload  placeholder="data:image/gif;base64,R0lGODdhyADIAOMAAO7u/5aWlqGho9jY5OPj8cLCyqyssLe3vc3N1wAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAyADIAAAE/hDISau9OOvNu/9gKI5kaZ5oqq5s675wLM90bd94ru987//AoHBILBqPyKRyyWw6n9CodEqtWq/YrHbL7Xq/4LB4TC6bz+i0es1uu9/wuHxOr9vv+Lx+z+/7/4CBgoOEhYaHiImKi4yNjo+QkZKTlJWWl5iZmpucnZ6foKGio6SlpqeoqaqrrK2ur7CxsrO0tba3uLm6u7y9vr/AwcLDxMXGx8jJysvMzc7P0NHS06kB1tYqA9cUBQEFrgLWAgIqBOEBFNuu1gMs2ugT3d/rAe0r77bsFwMGAQLzEggc8AcQAIJwA+EBuKbQmgF+3iocDHBAXiZ9Fd6dAxhuo4R3/gwnGDgnkqE1BBM0XrN3CSOFgQYM+ouHEsFMAP1i2lQIAN8EhwS6kZPQ74BMnpZcTgiHkoA1AhKxAWDaU+pHqwvrVVVI1ScmpRIwYjxwTqo+r1vTafV6FmtSrRXEak0ooB+8tjzR4v251m0llwSgUnUaAOrJtFMDoESrty9XxYi/wk0sMEBMoRKo7iRK8SiFxu285vQMoIDR0qdNN+rmbxxJlRFLi7u22OG1mDjP4bYb2uFVf+r0CZ+cyOS1oRD/cUM4cN5EA3bDhszqWOHEhBLIZh+qHdnmaFABwIwm9BxLZxAtn6fGvr379/Djy59Pv779+/jz69/Pv7///wAGQyjggAQWaOCBCCao4IIMNujggxBGKOGEFFZo4YUYZqjhhhx26OGHIIYo4ogklmjiiSimqOKKLLbo4oswxijjjDRKEQEAOw=="></core-image>
 110   </div>
 111
 112   <h3>Preload: color as placeholder, with Fade-in</h3>
 113   <div class="group">
 114     <div>No sizing</div>
 115     <button on-tap="{{preload}}" target="preload2afade">Load image</button>
 116     <span hidden?="{{!$.preload2afade.loading}}">Loading...</span>
 117     <br><br>
 118     <core-image id="preload2afade" class="sized gray" preload fade></core-image>
 119   </div>
 120   <div class="group">
 121     <div>Cover</div>
 122     <button on-tap="{{preload}}" target="preload2bfade">Load image</button>
 123     <span hidden?="{{!$.preload2bfade.loading}}">Loading...</span>
 124     <br><br>
 125     <core-image id="preload2bfade" class="sized gray" sizing="cover" preload fade></core-image>
 126   </div>
 127   <div class="group">
 128     <div>Contain</div>
 129     <button on-tap="{{preload}}" target="preload2cfade">Load image</button>
 130     <span hidden?="{{!$.preload2cfade.loading}}">Loading...</span>
 131     <br><br>
 132     <core-image id="preload2cfade" class="sized gray" sizing="contain" preload fade></core-image>
 133   </div>
 134
 135   <h3>Preload: image as placeholder, with Fade-in</h3>
 136   <div class="group">
 137     <div>No sizing</div>
 138     <button on-tap="{{preload}}" target="preload3afade">Load image</button>
 139     <span hidden?="{{!$.preload3afade.loading}}">Loading...</span>
 140     <br><br>
 141     <core-image id="preload3afade" class="sized gray" preload  placeholder="data:image/gif;base64,R0lGODdhyADIAOMAAO7u/5aWlqGho9jY5OPj8cLCyqyssLe3vc3N1wAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAyADIAAAE/hDISau9OOvNu/9gKI5kaZ5oqq5s675wLM90bd94ru987//AoHBILBqPyKRyyWw6n9CodEqtWq/YrHbL7Xq/4LB4TC6bz+i0es1uu9/wuHxOr9vv+Lx+z+/7/4CBgoOEhYaHiImKi4yNjo+QkZKTlJWWl5iZmpucnZ6foKGio6SlpqeoqaqrrK2ur7CxsrO0tba3uLm6u7y9vr/AwcLDxMXGx8jJysvMzc7P0NHS06kB1tYqA9cUBQEFrgLWAgIqBOEBFNuu1gMs2ugT3d/rAe0r77bsFwMGAQLzEggc8AcQAIJwA+EBuKbQmgF+3iocDHBAXiZ9Fd6dAxhuo4R3/gwnGDgnkqE1BBM0XrN3CSOFgQYM+ouHEsFMAP1i2lQIAN8EhwS6kZPQ74BMnpZcTgiHkoA1AhKxAWDaU+pHqwvrVVVI1ScmpRIwYjxwTqo+r1vTafV6FmtSrRXEak0ooB+8tjzR4v251m0llwSgUnUaAOrJtFMDoESrty9XxYi/wk0sMEBMoRKo7iRK8SiFxu285vQMoIDR0qdNN+rmbxxJlRFLi7u22OG1mDjP4bYb2uFVf+r0CZ+cyOS1oRD/cUM4cN5EA3bDhszqWOHEhBLIZh+qHdnmaFABwIwm9BxLZxAtn6fGvr379/Djy59Pv779+/jz69/Pv7///wAGQyjggAQWaOCBCCao4IIMNujggxBGKOGEFFZo4YUYZqjhhhx26OGHIIYo4ogklmjiiSimqOKKLLbo4oswxijjjDRKEQEAOw==" fade></core-image>
 142   </div>
 143   <div class="group">
 144     <div>Cover</div>
 145     <button on-tap="{{preload}}" target="preload3bfade">Load image</button>
 146     <span hidden?="{{!$.preload3bfade.loading}}">Loading...</span>
 147     <br><br>
 148     <core-image id="preload3bfade" class="sized gray" sizing="cover" preload  placeholder="data:image/gif;base64,R0lGODdhyADIAOMAAO7u/5aWlqGho9jY5OPj8cLCyqyssLe3vc3N1wAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAyADIAAAE/hDISau9OOvNu/9gKI5kaZ5oqq5s675wLM90bd94ru987//AoHBILBqPyKRyyWw6n9CodEqtWq/YrHbL7Xq/4LB4TC6bz+i0es1uu9/wuHxOr9vv+Lx+z+/7/4CBgoOEhYaHiImKi4yNjo+QkZKTlJWWl5iZmpucnZ6foKGio6SlpqeoqaqrrK2ur7CxsrO0tba3uLm6u7y9vr/AwcLDxMXGx8jJysvMzc7P0NHS06kB1tYqA9cUBQEFrgLWAgIqBOEBFNuu1gMs2ugT3d/rAe0r77bsFwMGAQLzEggc8AcQAIJwA+EBuKbQmgF+3iocDHBAXiZ9Fd6dAxhuo4R3/gwnGDgnkqE1BBM0XrN3CSOFgQYM+ouHEsFMAP1i2lQIAN8EhwS6kZPQ74BMnpZcTgiHkoA1AhKxAWDaU+pHqwvrVVVI1ScmpRIwYjxwTqo+r1vTafV6FmtSrRXEak0ooB+8tjzR4v251m0llwSgUnUaAOrJtFMDoESrty9XxYi/wk0sMEBMoRKo7iRK8SiFxu285vQMoIDR0qdNN+rmbxxJlRFLi7u22OG1mDjP4bYb2uFVf+r0CZ+cyOS1oRD/cUM4cN5EA3bDhszqWOHEhBLIZh+qHdnmaFABwIwm9BxLZxAtn6fGvr379/Djy59Pv779+/jz69/Pv7///wAGQyjggAQWaOCBCCao4IIMNujggxBGKOGEFFZo4YUYZqjhhhx26OGHIIYo4ogklmjiiSimqOKKLLbo4oswxijjjDRKEQEAOw==" fade></core-image>
 149   </div>
 150   <div class="group">
 151     <div>Contain</div>
 152     <button on-tap="{{preload}}" target="preload3cfade">Load image</button>
 153     <span hidden?="{{!$.preload3cfade.loading}}">Loading...</span>
 154     <br><br>
 155     <core-image id="preload3cfade" class="sized gray" sizing="contain" preload  placeholder="data:image/gif;base64,R0lGODdhyADIAOMAAO7u/5aWlqGho9jY5OPj8cLCyqyssLe3vc3N1wAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAyADIAAAE/hDISau9OOvNu/9gKI5kaZ5oqq5s675wLM90bd94ru987//AoHBILBqPyKRyyWw6n9CodEqtWq/YrHbL7Xq/4LB4TC6bz+i0es1uu9/wuHxOr9vv+Lx+z+/7/4CBgoOEhYaHiImKi4yNjo+QkZKTlJWWl5iZmpucnZ6foKGio6SlpqeoqaqrrK2ur7CxsrO0tba3uLm6u7y9vr/AwcLDxMXGx8jJysvMzc7P0NHS06kB1tYqA9cUBQEFrgLWAgIqBOEBFNuu1gMs2ugT3d/rAe0r77bsFwMGAQLzEggc8AcQAIJwA+EBuKbQmgF+3iocDHBAXiZ9Fd6dAxhuo4R3/gwnGDgnkqE1BBM0XrN3CSOFgQYM+ouHEsFMAP1i2lQIAN8EhwS6kZPQ74BMnpZcTgiHkoA1AhKxAWDaU+pHqwvrVVVI1ScmpRIwYjxwTqo+r1vTafV6FmtSrRXEak0ooB+8tjzR4v251m0llwSgUnUaAOrJtFMDoESrty9XxYi/wk0sMEBMoRKo7iRK8SiFxu285vQMoIDR0qdNN+rmbxxJlRFLi7u22OG1mDjP4bYb2uFVf+r0CZ+cyOS1oRD/cUM4cN5EA3bDhszqWOHEhBLIZh+qHdnmaFABwIwm9BxLZxAtn6fGvr379/Djy59Pv779+/jz69/Pv7///wAGQyjggAQWaOCBCCao4IIMNujggxBGKOGEFFZo4YUYZqjhhhx26OGHIIYo4ogklmjiiSimqOKKLLbo4oswxijjjDRKEQEAOw==" fade></core-image>
 156   </div>
 157
 158 </template>
 159
 160 <script>
 161
 162   addEventListener('template-bound', function(e) {
 163
 164     var scope = e.target;
 165     scope.preload = function(e) {
 166       var img = document.querySelector('#' + e.target.getAttribute('target'));
 167       img.src = 'http://lorempixel.com/1920/1080?' + Math.random();
 168       e.target.textContent = 'Reload image';
 169     };
 170   });
 171
 172 </script>
 173
 174 </body>
 175 </html>