Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(161)

Unified Diff: third_party/polymer/components/core-image/core-image.html

Issue 1215543002: Remove Polymer 0.5. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: fix unit test Created 5 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
Index: third_party/polymer/components/core-image/core-image.html
diff --git a/third_party/polymer/components/core-image/core-image.html b/third_party/polymer/components/core-image/core-image.html
deleted file mode 100644
index 6693436902aa7df40ec42dcbf493836116f247f1..0000000000000000000000000000000000000000
--- a/third_party/polymer/components/core-image/core-image.html
+++ /dev/null
@@ -1,243 +0,0 @@
-<!--
-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>
« no previous file with comments | « third_party/polymer/components/core-image/core-image.css ('k') | third_party/polymer/components/core-image/demo.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698