npm_modules: Fork bower_components into Polymer 0.4.0 and 0.5.0 versions

polymer_0.5.0/bower_components/core-image/core-image.html

+<!--
+Copyright (c) 2014 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
+-->
+
+<!--
+`core-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:
+
+    <core-image src="http://lorempixel.com/400/400"></core-image>
+
+  Will letterbox the image to fit:
+
+    <core-image style="width:400px; height:400px;" sizing="contain"
+      src="http://lorempixel.com/600/400"></core-image>
+
+  Will crop the image to fit:
+
+    <core-image style="width:400px; height:400px;" sizing="cover"
+      src="http://lorempixel.com/600/400"></core-image>
+
+  Will show light-gray background until the image loads:
+
+    <core-image style="width:400px; height:400px; background-color: lightgray;" 
+      sizing="cover" preload src="http://lorempixel.com/600/400"></core-image>
+
+  Will show a base-64 encoded placeholder image until the image loads:
+
+    <core-image style="width:400px; height:400px;" placeholder="data:image/gif;base64,..." 
+      sizing="cover" preload src="http://lorempixel.com/600/400"></core-image>
+
+  Will fade the light-gray background out once the image is loaded:
+
+    <core-image style="width:400px; height:400px; background-color: lightgray;" 
+      sizing="cover" preload fade src="http://lorempixel.com/600/400"></core-image>
+
+    
+@group Polymer Core Elements
+@element core-image
+@homepage github.io
+-->
+
+<link rel="import" href="../polymer/polymer.html">
+
+<polymer-element name="core-image">
+<template>
+  <link rel="stylesheet" href="core-image.css">
+  <template if="{{!sizing}}">
+    <img id="img">
+  </template>
+  <template if="{{preload && fade}}">
+    <div id="placeholder" fit></div>
+  </template>
+  <content></content>
+</template>
+<script>
+
+  Polymer({
+    
+    publish: {
+
+      /**
+       * The URL of an image.
+       *
+       * @attribute src
+       * @type string
+       * @default null
+       */
+      src: null,
+
+      /**
+       * When false, 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 src
+       * @type string
+       * @default null
+       */
+      load: true,
+
+      /**
+       * 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: null,
+
+      /**
+       * 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: '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: false,
+
+      /**
+       * 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: null,
+
+      /**
+       * When `preload` is true, setting `fade` to true will cause the image to
+       * fade into place.
+       *
+       * @attribute fade
+       * @type boolean
+       * @default false
+       */
+      fade: 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: 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: 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: null
+
+    },
+
+    observe: {
+      'preload color sizing position src fade': 'update'
+    },
+
+    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';
+    },
+
+    update: function() {
+      this.style.backgroundSize = this.sizing;
+      this.style.backgroundPosition = this.sizing ? this.position : null;
+      this.style.backgroundRepeat = this.sizing ? 'no-repeat' : null;
+      if (this.preload) {
+        if (this.fade) {
+          if (!this._placeholderEl) {
+            this._placeholderEl = this.shadowRoot.querySelector('#placeholder');
+          }
+          this._placeholderEl.style.backgroundSize = this.sizing;
+          this._placeholderEl.style.backgroundPosition = this.sizing ? this.position : null;
+          this._placeholderEl.style.backgroundRepeat = this.sizing ? 'no-repeat' : null;
+          this._placeholderEl.classList.remove('fadein');
+          this._placeholderEl.style.backgroundImage = (this.load && this.placeholder) ? 'url(' + this.placeholder + ')': null;
+        } else {
+          this._setSrc(this.placeholder);
+        }
+        if (this.load && this.src) {
+          var img = new Image();
+          img.src = this.src;
+          this.loading = true;
+          img.onload = function() {
+            this._setSrc(this.src);
+            this.loading = false;
+            if (this.fade) {
+              this._placeholderEl.classList.add('fadein');
+            }
+          }.bind(this);
+        }
+      } else {
+        this._setSrc(this.src);
+      }
+    },
+
+    _setSrc: function(src) {
+      if (this.sizing) {
+        this.style.backgroundImage = src ? 'url(' + src + ')': '';
+      } else {
+        this.$.img.src = src || '';
+      }
+    }
+
+  });
+
+</script>
+</polymer-element>