Index: polymer_1.2.3/bower_components/iron-image/demo/index.html |
diff --git a/polymer_1.2.3/bower_components/iron-image/demo/index.html b/polymer_1.2.3/bower_components/iron-image/demo/index.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..79a8d83e0f957b85be82814e19d0496558f2a1e6 |
--- /dev/null |
+++ b/polymer_1.2.3/bower_components/iron-image/demo/index.html |
@@ -0,0 +1,235 @@ |
+<!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"> |
+ |
+ |
+ </head> |
+ <body unresolved> |
+ |
+ <demo-page></demo-page> |
+ <dom-module is="demo-page"> |
+ <template> |
+ <style is="custom-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; |
+ } |
+ |
+ #full-width-container { |
+ width: 450px; |
+ height: 500px; |
+ background: #eef; |
+ } |
+ |
+ #full-width-container iron-image { |
+ width: 100%; |
+ --iron-image-width: 100%; |
+ } |
+ |
+ #full-height-container { |
+ height: 300px; |
+ background: #eef; |
+ } |
+ |
+ #full-height-container iron-image { |
+ height: 100%; |
+ --iron-image-height: 100%; |
+ } |
+ </style> |
+ |
+ <h3>Sizing: none (naturally sized)</h3> |
+ <iron-image alt="The Polymer logo." src="./polymer.svg"></iron-image> |
+ |
+ <h3>Sizing: cover</h3> |
+ <iron-image alt="The Polymer logo." class="sized" sizing="cover" src="./polymer.svg"></iron-image> |
+ <iron-image alt="The Polymer logo." class="sized" sizing="cover" src="./polymer.svg"></iron-image> |
+ |
+ <h3>Sizing: contain</h3> |
+ <iron-image alt="The Polymer logo." class="sized gray" sizing="contain" src="./polymer.svg"></iron-image> |
+ <iron-image alt="The Polymer logo." class="sized gray" sizing="contain" src="./polymer.svg"></iron-image> |
+ |
+ <h3>Full width</h3> |
+ <div id="full-width-container"> |
+ <iron-image alt="The Polymer logo." class="gray" src="./polymer.svg"></iron-image> |
+ </div> |
+ |
+ <h3>Full height</h3> |
+ <div id="full-height-container"> |
+ <iron-image alt="The Polymer logo." class="gray" src="./polymer.svg"></iron-image> |
+ </div> |
+ |
+ <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 alt$="[[_computeLogoAltText(loading1a, loaded1a)]]" loading="{{loading1a}}" loaded="{{loaded1a}}" 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 alt$="[[_computeLogoAltText(loading1b, loaded1b)]]" loading="{{loading1b}}" loaded="{{loaded1b}}" 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 alt$="[[_computeLogoAltText(loading1c, loaded1c)]]" loading="{{loading1c}}" loaded="{{loaded1c}}" 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 alt$="[[_computeLogoAltText(loading2a, loaded2a)]]" loading="{{loading2a}}" loaded="{{loaded2a}}" 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 alt$="[[_computeLogoAltText(loading2b, loaded2b)]]" loading="{{loading2b}}" loaded="{{loaded2b}}" 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 alt$="[[_computeLogoAltText(loading2c, loaded2c)]]" loading="{{loading2c}}" loaded="{{loaded2c}}" 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 alt$="[[_computeLogoAltText(loading3a, loaded3a)]]" loading="{{loading3a}}" loaded="{{loaded3a}}" 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=="></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 alt$="[[_computeLogoAltText(loading3b, loaded3b)]]" loading="{{loading3b}}" loaded="{{loaded3b}}" 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=="></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 alt$="[[_computeLogoAltText(loading3c, loaded3c)]]" loading="{{loading3c}}" loaded="{{loaded3c}}" 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=="></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 alt$="[[_computeLogoAltText(loaded2aFade, loaded2aFade)]]" loading="{{loading2aFade}}" loaded="{{loaded2aFade}}" 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 alt$="[[_computeLogoAltText(loading2bFade, loaded2bFade)]]" loading="{{loading2bFade}}" loaded="{{loaded2bFade}}" 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 alt$="[[_computeLogoAltText(loading2cFade, loaded2cFade)]]" loading="{{loading2cFade}}" loaded="{{loaded2cFade}}" 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 alt$="[[_computeLogoAltText(loading3aFade, loaded3aFade)]]" loading="{{loading3aFade}}" loaded="{{loaded3aFade}}" 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></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 alt$="[[_computeLogoAltText(loading3bFade, loaded3bFade)]]" loading="{{loading3bFade}}" loaded="{{loaded3bFade}}" 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></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 alt$="[[_computeLogoAltText(loading3cFade, loaded3cFade)]]" loading="{{loading3cFade}}" loaded="{{loaded3cFade}}" 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></iron-image> |
+ </div> |
+ </template> |
+ <script> |
+ Polymer({ |
+ is: 'demo-page', |
+ |
+ preload: function(e) { |
+ var img = document.querySelector('#' + e.target.getAttribute('target')); |
+ img.src = './polymer.svg?' + Math.random(); |
+ e.target.textContent = 'Reload image'; |
+ }, |
+ |
+ _computeLogoAltText: function(loading, loaded) { |
+ var text = 'The Polymer logo. '; |
+ |
+ if (loading) { |
+ text += '(loading)'; |
+ } else if (loaded) { |
+ text += '(loaded)'; |
+ } else { |
+ text += '(not loaded)'; |
+ } |
+ |
+ return text; |
+ } |
+ }); |
+ </script> |
+ </dom-module> |
+ </body> |
+</html> |