Added Polymer
This commit is contained in:
18
rpg-docs/public/bower_components/core-image/.bower.json
vendored
Normal file
18
rpg-docs/public/bower_components/core-image/.bower.json
vendored
Normal file
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"name": "core-image",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"polymer": "Polymer/polymer#^0.5.0"
|
||||
},
|
||||
"version": "0.5.1",
|
||||
"homepage": "https://github.com/Polymer/core-image",
|
||||
"_release": "0.5.1",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "0.5.1",
|
||||
"commit": "9652b414633eb6f54636ea5e488716769515f210"
|
||||
},
|
||||
"_source": "git://github.com/Polymer/core-image.git",
|
||||
"_target": "^0.5.0",
|
||||
"_originalSource": "Polymer/core-image"
|
||||
}
|
||||
4
rpg-docs/public/bower_components/core-image/README.md
vendored
Normal file
4
rpg-docs/public/bower_components/core-image/README.md
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
core-image
|
||||
=========
|
||||
|
||||
See the [component page](http://polymer-project.org/docs/elements/core-elements.html#core-image) for more information.
|
||||
8
rpg-docs/public/bower_components/core-image/bower.json
vendored
Normal file
8
rpg-docs/public/bower_components/core-image/bower.json
vendored
Normal file
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"name": "core-image",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"polymer": "Polymer/polymer#^0.5.0"
|
||||
},
|
||||
"version": "0.5.1"
|
||||
}
|
||||
23
rpg-docs/public/bower_components/core-image/core-image.css
vendored
Normal file
23
rpg-docs/public/bower_components/core-image/core-image.css
vendored
Normal file
@@ -0,0 +1,23 @@
|
||||
/*
|
||||
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
|
||||
*/
|
||||
|
||||
:host {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#placeholder {
|
||||
background-color: inherit;
|
||||
opacity: 1;
|
||||
}
|
||||
#placeholder.fadein {
|
||||
transition: opacity 0.5s linear;
|
||||
opacity: 0;
|
||||
}
|
||||
243
rpg-docs/public/bower_components/core-image/core-image.html
vendored
Normal file
243
rpg-docs/public/bower_components/core-image/core-image.html
vendored
Normal file
@@ -0,0 +1,243 @@
|
||||
<!--
|
||||
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 <img src="..."> 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>
|
||||
175
rpg-docs/public/bower_components/core-image/demo.html
vendored
Normal file
175
rpg-docs/public/bower_components/core-image/demo.html
vendored
Normal file
@@ -0,0 +1,175 @@
|
||||
<!--
|
||||
@license
|
||||
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
|
||||
-->
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<title>core-image</title>
|
||||
|
||||
<script src="../webcomponentsjs/webcomponents.js"></script>
|
||||
|
||||
<link rel="import" href="core-image.html">
|
||||
|
||||
<style>
|
||||
.sized {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
.gray {
|
||||
background-color: lightgray;
|
||||
}
|
||||
.group {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body unresolved>
|
||||
|
||||
<template is="auto-binding">
|
||||
<h3>Sizing: none (naturally sized)</h3>
|
||||
<core-image src="http://lorempixel.com/400/200/sports/1"></core-image>
|
||||
|
||||
<h3>Sizing: cover</h3>
|
||||
<core-image class="sized" sizing="cover" src="http://lorempixel.com/400/200/sports/2"></core-image>
|
||||
<core-image class="sized" sizing="cover" src="http://lorempixel.com/200/400/sports/3"></core-image>
|
||||
|
||||
<h3>Sizing: contain</h3>
|
||||
<core-image class="sized gray" sizing="contain" src="http://lorempixel.com/400/200/sports/2"></core-image>
|
||||
<core-image class="sized gray" sizing="contain" src="http://lorempixel.com/200/400/sports/3"></core-image>
|
||||
|
||||
<h3>Preload: none</h3>
|
||||
<div class="group">
|
||||
<div>No sizing</div>
|
||||
<button on-tap="{{preload}}" target="preload1a">Load image</button><br><br>
|
||||
<core-image id="preload1a" class="sized gray" ></core-image>
|
||||
</div>
|
||||
<div class="group">
|
||||
<div>Cover</div>
|
||||
<button on-tap="{{preload}}" target="preload1b">Load image</button><br><br>
|
||||
<core-image id="preload1b" class="sized gray" sizing="cover" ></core-image>
|
||||
</div>
|
||||
<div class="group">
|
||||
<div>Contain</div>
|
||||
<button on-tap="{{preload}}" target="preload1c">Load image</button><br><br>
|
||||
<core-image id="preload1c" class="sized gray" sizing="contain" ></core-image>
|
||||
</div>
|
||||
|
||||
<h3>Preload: color as placeholder</h3>
|
||||
<div class="group">
|
||||
<div>No sizing</div>
|
||||
<button on-tap="{{preload}}" target="preload2a">Load image</button>
|
||||
<span hidden?="{{!$.preload2a.loading}}">Loading...</span>
|
||||
<br><br>
|
||||
<core-image id="preload2a" class="sized gray" preload ></core-image>
|
||||
</div>
|
||||
<div class="group">
|
||||
<div>Cover</div>
|
||||
<button on-tap="{{preload}}" target="preload2b">Load image</button>
|
||||
<span hidden?="{{!$.preload2b.loading}}">Loading...</span>
|
||||
<br><br>
|
||||
<core-image id="preload2b" class="sized gray" sizing="cover" preload ></core-image>
|
||||
</div>
|
||||
<div class="group">
|
||||
<div>Contain</div>
|
||||
<button on-tap="{{preload}}" target="preload2c">Load image</button>
|
||||
<span hidden?="{{!$.preload2c.loading}}">Loading...</span>
|
||||
<br><br>
|
||||
<core-image id="preload2c" class="sized gray" sizing="contain" preload ></core-image>
|
||||
</div>
|
||||
|
||||
<h3>Preload: image as placeholder</h3>
|
||||
<div class="group">
|
||||
<div>No sizing</div>
|
||||
<button on-tap="{{preload}}" target="preload3a">Load image</button>
|
||||
<span hidden?="{{!$.preload3a.loading}}">Loading...</span>
|
||||
<br><br>
|
||||
<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>
|
||||
</div>
|
||||
<div class="group">
|
||||
<div>Cover</div>
|
||||
<button on-tap="{{preload}}" target="preload3b">Load image</button>
|
||||
<span hidden?="{{!$.preload3b.loading}}">Loading...</span>
|
||||
<br><br>
|
||||
<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>
|
||||
</div>
|
||||
<div class="group">
|
||||
<div>Contain</div>
|
||||
<button on-tap="{{preload}}" target="preload3c">Load image</button>
|
||||
<span hidden?="{{!$.preload3c.loading}}">Loading...</span>
|
||||
<br><br>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<h3>Preload: color as placeholder, with Fade-in</h3>
|
||||
<div class="group">
|
||||
<div>No sizing</div>
|
||||
<button on-tap="{{preload}}" target="preload2afade">Load image</button>
|
||||
<span hidden?="{{!$.preload2afade.loading}}">Loading...</span>
|
||||
<br><br>
|
||||
<core-image id="preload2afade" class="sized gray" preload fade></core-image>
|
||||
</div>
|
||||
<div class="group">
|
||||
<div>Cover</div>
|
||||
<button on-tap="{{preload}}" target="preload2bfade">Load image</button>
|
||||
<span hidden?="{{!$.preload2bfade.loading}}">Loading...</span>
|
||||
<br><br>
|
||||
<core-image id="preload2bfade" class="sized gray" sizing="cover" preload fade></core-image>
|
||||
</div>
|
||||
<div class="group">
|
||||
<div>Contain</div>
|
||||
<button on-tap="{{preload}}" target="preload2cfade">Load image</button>
|
||||
<span hidden?="{{!$.preload2cfade.loading}}">Loading...</span>
|
||||
<br><br>
|
||||
<core-image id="preload2cfade" class="sized gray" sizing="contain" preload fade></core-image>
|
||||
</div>
|
||||
|
||||
<h3>Preload: image as placeholder, with Fade-in</h3>
|
||||
<div class="group">
|
||||
<div>No sizing</div>
|
||||
<button on-tap="{{preload}}" target="preload3afade">Load image</button>
|
||||
<span hidden?="{{!$.preload3afade.loading}}">Loading...</span>
|
||||
<br><br>
|
||||
<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>
|
||||
</div>
|
||||
<div class="group">
|
||||
<div>Cover</div>
|
||||
<button on-tap="{{preload}}" target="preload3bfade">Load image</button>
|
||||
<span hidden?="{{!$.preload3bfade.loading}}">Loading...</span>
|
||||
<br><br>
|
||||
<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>
|
||||
</div>
|
||||
<div class="group">
|
||||
<div>Contain</div>
|
||||
<button on-tap="{{preload}}" target="preload3cfade">Load image</button>
|
||||
<span hidden?="{{!$.preload3cfade.loading}}">Loading...</span>
|
||||
<br><br>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
addEventListener('template-bound', function(e) {
|
||||
|
||||
var scope = e.target;
|
||||
scope.preload = function(e) {
|
||||
var img = document.querySelector('#' + e.target.getAttribute('target'));
|
||||
img.src = 'http://lorempixel.com/1920/1080?' + Math.random();
|
||||
e.target.textContent = 'Reload image';
|
||||
};
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
22
rpg-docs/public/bower_components/core-image/index.html
vendored
Normal file
22
rpg-docs/public/bower_components/core-image/index.html
vendored
Normal file
@@ -0,0 +1,22 @@
|
||||
<!doctype 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
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
|
||||
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
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<script src="../webcomponentsjs/webcomponents.js"></script>
|
||||
<link rel="import" href="../core-component-page/core-component-page.html">
|
||||
|
||||
</head>
|
||||
<body unresolved>
|
||||
|
||||
<core-component-page></core-component-page>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
24
rpg-docs/public/bower_components/core-image/metadata.html
vendored
Normal file
24
rpg-docs/public/bower_components/core-image/metadata.html
vendored
Normal file
@@ -0,0 +1,24 @@
|
||||
<!--
|
||||
@license
|
||||
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
|
||||
-->
|
||||
<x-meta id="core-image" label="Image" group="Core">
|
||||
|
||||
<template>
|
||||
|
||||
<core-item icon="settings" label="Image"></core-item>
|
||||
|
||||
</template>
|
||||
|
||||
<template id="imports">
|
||||
|
||||
<link rel="import" href="core-image.html">
|
||||
|
||||
</template>
|
||||
|
||||
</x-meta>
|
||||
Reference in New Issue
Block a user