mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Luke
GitHub
commit
df57a84886
91 changed files with 596 additions and 6177 deletions
|
|
@ -1,4 +1,4 @@
|
||||||
<div id="libraryFileOrganizerPage" data-role="page" class="page type-interior organizePage withTabs" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Auto-Organize" data-require="emby-collapsible,jqmtable,scripts/autoorganizetv,paper-input,paper-checkbox">
|
<div id="libraryFileOrganizerPage" data-role="page" class="page type-interior organizePage withTabs" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Auto-Organize" data-require="emby-collapse,jqmtable,scripts/autoorganizetv,paper-input,paper-checkbox,jqmlistview">
|
||||||
|
|
||||||
<div data-role="content">
|
<div data-role="content">
|
||||||
<div class="content-primary">
|
<div class="content-primary">
|
||||||
|
|
@ -33,98 +33,101 @@
|
||||||
</li>
|
</li>
|
||||||
</ul><br />
|
</ul><br />
|
||||||
|
|
||||||
<emby-collapsible title="${HeaderEpisodeFilePattern}">
|
<div is="emby-collapse" title="${HeaderEpisodeFilePattern}">
|
||||||
<br />
|
<div class="collapseContent">
|
||||||
<div>
|
<br />
|
||||||
<paper-input type="text" id="txtEpisodePattern" name="txtEpisodePattern" label="${LabelEpisodePattern}" required></paper-input>
|
<div>
|
||||||
<div class="fieldDescription episodePatternDescription"></div>
|
<paper-input type="text" id="txtEpisodePattern" name="txtEpisodePattern" label="${LabelEpisodePattern}" required></paper-input>
|
||||||
</div>
|
<div class="fieldDescription episodePatternDescription"></div>
|
||||||
<br />
|
</div>
|
||||||
<div>
|
<br />
|
||||||
<paper-input type="text" id="txtMultiEpisodePattern" name="txtMultiEpisodePattern" label="${LabelMultiEpisodePattern}" required></paper-input>
|
<div>
|
||||||
<div class="fieldDescription multiEpisodePatternDescription"></div>
|
<paper-input type="text" id="txtMultiEpisodePattern" name="txtMultiEpisodePattern" label="${LabelMultiEpisodePattern}" required></paper-input>
|
||||||
</div>
|
<div class="fieldDescription multiEpisodePatternDescription"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<br />
|
<br />
|
||||||
<p>${HeaderSupportedPatterns}</p>
|
<p>${HeaderSupportedPatterns}</p>
|
||||||
|
|
||||||
|
<table data-role="table" id="movie-table" data-mode="reflow" class="ui-responsive">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>${HeaderTerm}</th>
|
||||||
|
<th>${HeaderPattern}</th>
|
||||||
|
<th>${HeaderResult}</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>${LabelSeriesNamePlain}</td>
|
||||||
|
<td>%sn</td>
|
||||||
|
<td>${LabelSeriesNamePlain}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>${LabelSeriesNamePlain}</td>
|
||||||
|
<td>%s.n</td>
|
||||||
|
<td>${ValueSeriesNamePeriod}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>${LabelSeriesNamePlain}</td>
|
||||||
|
<td>%s_n</td>
|
||||||
|
<td>${ValueSeriesNameUnderscore}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>${LabelSeasonNumberPlain}</td>
|
||||||
|
<td>%s</td>
|
||||||
|
<td>1</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>${LabelSeasonNumberPlain}</td>
|
||||||
|
<td>%0s</td>
|
||||||
|
<td>01</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>${LabelEpisodeNumberPlain}</td>
|
||||||
|
<td>%e</td>
|
||||||
|
<td>4</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>${LabelEpisodeNumberPlain}</td>
|
||||||
|
<td>%0e</td>
|
||||||
|
<td>04</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>${LabelEndingEpisodeNumberPlain}</td>
|
||||||
|
<td>%ed</td>
|
||||||
|
<td>5</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>${LabelEndingEpisodeNumberPlain}</td>
|
||||||
|
<td>%0ed</td>
|
||||||
|
<td>05</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>${LabelEpisodeNamePlain}</td>
|
||||||
|
<td>%en</td>
|
||||||
|
<td>${LabelEpisodeNamePlain}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>${LabelEpisodeNamePlain}</td>
|
||||||
|
<td>%e.n</td>
|
||||||
|
<td>${ValueEpisodeNamePeriod}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>${LabelEpisodeNamePlain}</td>
|
||||||
|
<td>%e_n</td>
|
||||||
|
<td>${ValueEpisodeNameUnderscore}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>${FileExtension}</td>
|
||||||
|
<td>%ext</td>
|
||||||
|
<td>mkv</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<table data-role="table" id="movie-table" data-mode="reflow" class="ui-responsive">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>${HeaderTerm}</th>
|
|
||||||
<th>${HeaderPattern}</th>
|
|
||||||
<th>${HeaderResult}</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>${LabelSeriesNamePlain}</td>
|
|
||||||
<td>%sn</td>
|
|
||||||
<td>${LabelSeriesNamePlain}</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>${LabelSeriesNamePlain}</td>
|
|
||||||
<td>%s.n</td>
|
|
||||||
<td>${ValueSeriesNamePeriod}</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>${LabelSeriesNamePlain}</td>
|
|
||||||
<td>%s_n</td>
|
|
||||||
<td>${ValueSeriesNameUnderscore}</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>${LabelSeasonNumberPlain}</td>
|
|
||||||
<td>%s</td>
|
|
||||||
<td>1</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>${LabelSeasonNumberPlain}</td>
|
|
||||||
<td>%0s</td>
|
|
||||||
<td>01</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>${LabelEpisodeNumberPlain}</td>
|
|
||||||
<td>%e</td>
|
|
||||||
<td>4</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>${LabelEpisodeNumberPlain}</td>
|
|
||||||
<td>%0e</td>
|
|
||||||
<td>04</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>${LabelEndingEpisodeNumberPlain}</td>
|
|
||||||
<td>%ed</td>
|
|
||||||
<td>5</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>${LabelEndingEpisodeNumberPlain}</td>
|
|
||||||
<td>%0ed</td>
|
|
||||||
<td>05</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>${LabelEpisodeNamePlain}</td>
|
|
||||||
<td>%en</td>
|
|
||||||
<td>${LabelEpisodeNamePlain}</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>${LabelEpisodeNamePlain}</td>
|
|
||||||
<td>%e.n</td>
|
|
||||||
<td>${ValueEpisodeNamePeriod}</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>${LabelEpisodeNamePlain}</td>
|
|
||||||
<td>%e_n</td>
|
|
||||||
<td>${ValueEpisodeNameUnderscore}</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>${FileExtension}</td>
|
|
||||||
<td>%ext</td>
|
|
||||||
<td>mkv</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</emby-collapsible>
|
|
||||||
<br /><br />
|
<br /><br />
|
||||||
<ul data-role="listview" class="ulForm">
|
<ul data-role="listview" class="ulForm">
|
||||||
<li>
|
<li>
|
||||||
|
|
|
||||||
|
|
@ -1,171 +0,0 @@
|
||||||
<link rel="import" href="../polymer/polymer.html">
|
|
||||||
<link rel="import" href="../iron-icon/iron-icon.html">
|
|
||||||
<link rel="import" href="../neon-animation/neon-animation-runner-behavior.html">
|
|
||||||
<link rel="import" href="../neon-animation/animations/transform-animation.html">
|
|
||||||
<link rel="import" href="../iron-collapse/iron-collapse.html">
|
|
||||||
|
|
||||||
<iron-iconset-svg name="emby-collapsible-icons" size="24">
|
|
||||||
<svg>
|
|
||||||
<defs>
|
|
||||||
<g id="expand-less"><path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z" /></g>
|
|
||||||
<g id="expand-more"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" /></g>
|
|
||||||
</defs>
|
|
||||||
</svg>
|
|
||||||
</iron-iconset-svg>
|
|
||||||
|
|
||||||
<dom-module id="emby-collapsible">
|
|
||||||
<template>
|
|
||||||
<style>
|
|
||||||
iron-collapse {
|
|
||||||
padding-left: 16px;
|
|
||||||
padding-right: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
:host:not([icon]) #titleIcon {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:host #titleIcon {
|
|
||||||
margin-right: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
:host #expandButton {
|
|
||||||
margin: 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<div>
|
|
||||||
<button is="emby-button" type="button" on-click="toggleExpand" id="expandButton" class="emby-collapsible-button block">
|
|
||||||
<iron-icon id="titleIcon" icon="[[icon]]" style="[[iconstyle]]"></iron-icon>
|
|
||||||
<h3 class="emby-collapsible-title" title="[[title]]">[[title]]</h3>
|
|
||||||
<iron-icon id="expandIcon" style="margin-left: auto; margin-right: .5em;"></iron-icon>
|
|
||||||
</button>
|
|
||||||
<iron-collapse id="contentCollapse" class="emby-collapsible-content" opened="{{expanded}}">
|
|
||||||
<content></content>
|
|
||||||
</iron-collapse>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
Polymer({
|
|
||||||
is: 'emby-collapsible',
|
|
||||||
behaviors: [Polymer.NeonAnimationRunnerBehavior],
|
|
||||||
properties: {
|
|
||||||
expanded: {
|
|
||||||
type: Boolean,
|
|
||||||
value: false,
|
|
||||||
notify: true,
|
|
||||||
observer: '_expandedChanged'
|
|
||||||
},
|
|
||||||
expandMoreTitle: {
|
|
||||||
type: String,
|
|
||||||
value: "Show More"
|
|
||||||
},
|
|
||||||
expandLessTitle: {
|
|
||||||
type: String,
|
|
||||||
value: "Show Less"
|
|
||||||
},
|
|
||||||
enableRotateAnimation: {
|
|
||||||
type: Boolean,
|
|
||||||
value: true
|
|
||||||
},
|
|
||||||
expandMoreIcon: {
|
|
||||||
type: String,
|
|
||||||
value: "expand-more"
|
|
||||||
},
|
|
||||||
expandLessIcon: {
|
|
||||||
type: String,
|
|
||||||
value: "expand-less"
|
|
||||||
},
|
|
||||||
animationConfig: {
|
|
||||||
value: function () {
|
|
||||||
return {
|
|
||||||
'rotateIcon': {
|
|
||||||
name: 'transform-animation',
|
|
||||||
node: this.$.expandIcon,
|
|
||||||
transformOrigin: "50% 50%",
|
|
||||||
transformFrom: "rotate(0)",
|
|
||||||
transformTo: "rotate(180deg)",
|
|
||||||
timing: { duration: 350 }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
listeners: {
|
|
||||||
'neon-animation-finish': '_onNeonAnimationFinish'
|
|
||||||
},
|
|
||||||
_onNeonAnimationFinish: function () {
|
|
||||||
if (this.expanded) {
|
|
||||||
this.$.expandIcon.icon = "emby-collapsible-icons:expand-less";
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
this.$.expandIcon.icon = "emby-collapsible-icons:expand-more";
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// Fires when an instance of the element is created
|
|
||||||
created: function () { },
|
|
||||||
|
|
||||||
// Fires when the local DOM has been fully prepared
|
|
||||||
ready: function () {
|
|
||||||
//Set initial icon
|
|
||||||
if (this.expanded) {
|
|
||||||
this.$.expandIcon.icon = "emby-collapsible-icons:expand-less";
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
this.$.expandIcon.icon = "emby-collapsible-icons:expand-more";
|
|
||||||
}
|
|
||||||
|
|
||||||
//Set initial title
|
|
||||||
if (this.expanded) {
|
|
||||||
this.$.expandButton.title = this.expandLessTitle;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
this.$.expandButton.title = this.expandMoreTitle;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// Fires when the element was inserted into the document
|
|
||||||
attached: function () { },
|
|
||||||
|
|
||||||
// Fires when the element was removed from the document
|
|
||||||
detached: function () { },
|
|
||||||
|
|
||||||
// Fires when an attribute was added, removed, or updated
|
|
||||||
_expandedChanged: function (newVal, oldVal) {
|
|
||||||
|
|
||||||
|
|
||||||
//If icon is already set no need to animate!
|
|
||||||
if ((newVal && (this.$.expandIcon.icon == "emby-collapsible-icons:expand-less")) || (!newVal && (this.$.expandIcon.icon == "emby-collapsible-icons:expand-more"))) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
//Set title
|
|
||||||
if (newVal) {
|
|
||||||
this.$.expandButton.title = this.expandLessTitle;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
this.$.expandButton.title = this.expandMoreTitle;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.enableRotateAnimation) {
|
|
||||||
//Play rotate animation
|
|
||||||
this.cancelAnimation();
|
|
||||||
this.playAnimation('rotateIcon');
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
if (this.expanded) {
|
|
||||||
this.$.expandIcon.icon = "emby-collapsible-icons:expand-less";
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
this.$.expandIcon.icon = "emby-collapsible-icons:expand-more";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
toggleExpand: function () {
|
|
||||||
this.expanded = !this.expanded;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</dom-module>
|
|
||||||
|
|
@ -82,7 +82,13 @@
|
||||||
|
|
||||||
this.insertAdjacentHTML('afterbegin', html);
|
this.insertAdjacentHTML('afterbegin', html);
|
||||||
|
|
||||||
this.querySelector('.emby-collapsible-button').addEventListener('click', onButtonClick);
|
var button = this.querySelector('.emby-collapsible-button');
|
||||||
|
|
||||||
|
button.addEventListener('click', onButtonClick);
|
||||||
|
|
||||||
|
if (this.getAttribute('data-expanded') == 'true') {
|
||||||
|
onButtonClick.call(button);
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
document.registerElement('emby-collapse', {
|
document.registerElement('emby-collapse', {
|
||||||
|
|
|
||||||
|
|
@ -166,11 +166,11 @@ define(['dialogHelper', './voicereceiver', './voiceprocessor', 'globalize', 'emb
|
||||||
currentDialog = dlg;
|
currentDialog = dlg;
|
||||||
|
|
||||||
dlg.addEventListener('close', function () {
|
dlg.addEventListener('close', function () {
|
||||||
|
voicereceiver.cancel();
|
||||||
currentDialog = null;
|
currentDialog = null;
|
||||||
});
|
});
|
||||||
|
|
||||||
function onCancelClick() {
|
function onCancelClick() {
|
||||||
voicereceiver.cancel();
|
|
||||||
dialogHelper.close(dlg);
|
dialogHelper.close(dlg);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
13
dashboard-ui/bower_components/fetch/.bower.json
vendored
13
dashboard-ui/bower_components/fetch/.bower.json
vendored
|
|
@ -14,14 +14,15 @@
|
||||||
"test/"
|
"test/"
|
||||||
],
|
],
|
||||||
"homepage": "https://github.com/github/fetch",
|
"homepage": "https://github.com/github/fetch",
|
||||||
"version": "0.11.1",
|
"version": "1.0.0",
|
||||||
"_release": "0.11.1",
|
"_release": "1.0.0",
|
||||||
"_resolution": {
|
"_resolution": {
|
||||||
"type": "version",
|
"type": "version",
|
||||||
"tag": "v0.11.1",
|
"tag": "v1.0.0",
|
||||||
"commit": "7d9a11deec5c0ea2d453390be647ba52695166f8"
|
"commit": "f054e7b5ce2bf7f86c8d7212c2de026800725b84"
|
||||||
},
|
},
|
||||||
"_source": "https://github.com/github/fetch.git",
|
"_source": "https://github.com/github/fetch.git",
|
||||||
"_target": "^0.11.0",
|
"_target": "^1.0.0",
|
||||||
"_originalSource": "fetch"
|
"_originalSource": "fetch",
|
||||||
|
"_direct": true
|
||||||
}
|
}
|
||||||
80
dashboard-ui/bower_components/fetch/fetch.js
vendored
80
dashboard-ui/bower_components/fetch/fetch.js
vendored
|
|
@ -5,6 +5,21 @@
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
|
var support = {
|
||||||
|
searchParams: 'URLSearchParams' in self,
|
||||||
|
iterable: 'Symbol' in self && 'iterator' in Symbol,
|
||||||
|
blob: 'FileReader' in self && 'Blob' in self && (function() {
|
||||||
|
try {
|
||||||
|
new Blob()
|
||||||
|
return true
|
||||||
|
} catch(e) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
})(),
|
||||||
|
formData: 'FormData' in self,
|
||||||
|
arrayBuffer: 'ArrayBuffer' in self
|
||||||
|
}
|
||||||
|
|
||||||
function normalizeName(name) {
|
function normalizeName(name) {
|
||||||
if (typeof name !== 'string') {
|
if (typeof name !== 'string') {
|
||||||
name = String(name)
|
name = String(name)
|
||||||
|
|
@ -22,6 +37,24 @@
|
||||||
return value
|
return value
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Build a destructive iterator for the value list
|
||||||
|
function iteratorFor(items) {
|
||||||
|
var iterator = {
|
||||||
|
next: function() {
|
||||||
|
var value = items.shift()
|
||||||
|
return {done: value === undefined, value: value}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (support.iterable) {
|
||||||
|
iterator[Symbol.iterator] = function() {
|
||||||
|
return iterator
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return iterator
|
||||||
|
}
|
||||||
|
|
||||||
function Headers(headers) {
|
function Headers(headers) {
|
||||||
this.map = {}
|
this.map = {}
|
||||||
|
|
||||||
|
|
@ -77,6 +110,28 @@
|
||||||
}, this)
|
}, this)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Headers.prototype.keys = function() {
|
||||||
|
var items = []
|
||||||
|
this.forEach(function(value, name) { items.push(name) })
|
||||||
|
return iteratorFor(items)
|
||||||
|
}
|
||||||
|
|
||||||
|
Headers.prototype.values = function() {
|
||||||
|
var items = []
|
||||||
|
this.forEach(function(value) { items.push(value) })
|
||||||
|
return iteratorFor(items)
|
||||||
|
}
|
||||||
|
|
||||||
|
Headers.prototype.entries = function() {
|
||||||
|
var items = []
|
||||||
|
this.forEach(function(value, name) { items.push([name, value]) })
|
||||||
|
return iteratorFor(items)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (support.iterable) {
|
||||||
|
Headers.prototype[Symbol.iterator] = Headers.prototype.entries
|
||||||
|
}
|
||||||
|
|
||||||
function consumed(body) {
|
function consumed(body) {
|
||||||
if (body.bodyUsed) {
|
if (body.bodyUsed) {
|
||||||
return Promise.reject(new TypeError('Already read'))
|
return Promise.reject(new TypeError('Already read'))
|
||||||
|
|
@ -107,23 +162,9 @@
|
||||||
return fileReaderReady(reader)
|
return fileReaderReady(reader)
|
||||||
}
|
}
|
||||||
|
|
||||||
var support = {
|
|
||||||
blob: 'FileReader' in self && 'Blob' in self && (function() {
|
|
||||||
try {
|
|
||||||
new Blob()
|
|
||||||
return true
|
|
||||||
} catch(e) {
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
})(),
|
|
||||||
formData: 'FormData' in self,
|
|
||||||
arrayBuffer: 'ArrayBuffer' in self
|
|
||||||
}
|
|
||||||
|
|
||||||
function Body() {
|
function Body() {
|
||||||
this.bodyUsed = false
|
this.bodyUsed = false
|
||||||
|
|
||||||
|
|
||||||
this._initBody = function(body) {
|
this._initBody = function(body) {
|
||||||
this._bodyInit = body
|
this._bodyInit = body
|
||||||
if (typeof body === 'string') {
|
if (typeof body === 'string') {
|
||||||
|
|
@ -132,6 +173,8 @@
|
||||||
this._bodyBlob = body
|
this._bodyBlob = body
|
||||||
} else if (support.formData && FormData.prototype.isPrototypeOf(body)) {
|
} else if (support.formData && FormData.prototype.isPrototypeOf(body)) {
|
||||||
this._bodyFormData = body
|
this._bodyFormData = body
|
||||||
|
} else if (support.searchParams && URLSearchParams.prototype.isPrototypeOf(body)) {
|
||||||
|
this._bodyText = body.toString()
|
||||||
} else if (!body) {
|
} else if (!body) {
|
||||||
this._bodyText = ''
|
this._bodyText = ''
|
||||||
} else if (support.arrayBuffer && ArrayBuffer.prototype.isPrototypeOf(body)) {
|
} else if (support.arrayBuffer && ArrayBuffer.prototype.isPrototypeOf(body)) {
|
||||||
|
|
@ -146,6 +189,8 @@
|
||||||
this.headers.set('content-type', 'text/plain;charset=UTF-8')
|
this.headers.set('content-type', 'text/plain;charset=UTF-8')
|
||||||
} else if (this._bodyBlob && this._bodyBlob.type) {
|
} else if (this._bodyBlob && this._bodyBlob.type) {
|
||||||
this.headers.set('content-type', this._bodyBlob.type)
|
this.headers.set('content-type', this._bodyBlob.type)
|
||||||
|
} else if (support.searchParams && URLSearchParams.prototype.isPrototypeOf(body)) {
|
||||||
|
this.headers.set('content-type', 'application/x-www-form-urlencoded;charset=UTF-8')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -349,13 +394,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
xhr.onload = function() {
|
xhr.onload = function() {
|
||||||
var status = (xhr.status === 1223) ? 204 : xhr.status
|
|
||||||
if (status < 100 || status > 599) {
|
|
||||||
reject(new TypeError('Network request failed'))
|
|
||||||
return
|
|
||||||
}
|
|
||||||
var options = {
|
var options = {
|
||||||
status: status,
|
status: xhr.status,
|
||||||
statusText: xhr.statusText,
|
statusText: xhr.statusText,
|
||||||
headers: headers(xhr),
|
headers: headers(xhr),
|
||||||
url: responseURL()
|
url: responseURL()
|
||||||
|
|
|
||||||
|
|
@ -23,14 +23,15 @@
|
||||||
"spec"
|
"spec"
|
||||||
],
|
],
|
||||||
"homepage": "https://github.com/Valve/fingerprintjs2",
|
"homepage": "https://github.com/Valve/fingerprintjs2",
|
||||||
"version": "1.1.4",
|
"version": "1.4.0",
|
||||||
"_release": "1.1.4",
|
"_release": "1.4.0",
|
||||||
"_resolution": {
|
"_resolution": {
|
||||||
"type": "version",
|
"type": "version",
|
||||||
"tag": "1.1.4",
|
"tag": "1.4.0",
|
||||||
"commit": "ae5719db3d942a1a84ab43b707d4d1c34138934e"
|
"commit": "75cbd474158f8ecce43e00f198c76e486b896937"
|
||||||
},
|
},
|
||||||
"_source": "https://github.com/Valve/fingerprintjs2.git",
|
"_source": "https://github.com/Valve/fingerprintjs2.git",
|
||||||
"_target": "~1.1.2",
|
"_target": "^1.4.0",
|
||||||
"_originalSource": "fingerprintjs2"
|
"_originalSource": "fingerprintjs2",
|
||||||
|
"_direct": true
|
||||||
}
|
}
|
||||||
|
|
@ -13,7 +13,7 @@ Include in the issue:
|
||||||
* Include library call code (I need all options you used when calling the library function)
|
* Include library call code (I need all options you used when calling the library function)
|
||||||
|
|
||||||
## Want to add a feature / contribute?
|
## Want to add a feature / contribute?
|
||||||
|
* Make sure the issue/suggestion does not exist by searching existing issues
|
||||||
* Fork the project and make the required changes in it (don't forget to add specs)
|
* Fork the project and make the required changes in it (don't forget to add specs)
|
||||||
* PRs w/out specs will not be accepted
|
* PRs w/out specs will not be accepted
|
||||||
* Run `gulp` to catch stylistic errors and produce the minified version.
|
* Run `gulp` to catch stylistic errors and produce the minified version.
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1,5 +1,5 @@
|
||||||
/*
|
/*
|
||||||
* Fingerprintjs2 1.1.4 - Modern & flexible browser fingerprint library v2
|
* Fingerprintjs2 1.4.0 - Modern & flexible browser fingerprint library v2
|
||||||
* https://github.com/Valve/fingerprintjs2
|
* https://github.com/Valve/fingerprintjs2
|
||||||
* Copyright (c) 2015 Valentin Vasilyev (valentin.vasilyev@outlook.com)
|
* Copyright (c) 2015 Valentin Vasilyev (valentin.vasilyev@outlook.com)
|
||||||
* Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.
|
* Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.
|
||||||
|
|
@ -84,6 +84,7 @@
|
||||||
keys = this.userAgentKey(keys);
|
keys = this.userAgentKey(keys);
|
||||||
keys = this.languageKey(keys);
|
keys = this.languageKey(keys);
|
||||||
keys = this.colorDepthKey(keys);
|
keys = this.colorDepthKey(keys);
|
||||||
|
keys = this.pixelRatioKey(keys);
|
||||||
keys = this.screenResolutionKey(keys);
|
keys = this.screenResolutionKey(keys);
|
||||||
keys = this.availableScreenResolutionKey(keys);
|
keys = this.availableScreenResolutionKey(keys);
|
||||||
keys = this.timezoneOffsetKey(keys);
|
keys = this.timezoneOffsetKey(keys);
|
||||||
|
|
@ -141,6 +142,15 @@
|
||||||
}
|
}
|
||||||
return keys;
|
return keys;
|
||||||
},
|
},
|
||||||
|
pixelRatioKey: function(keys) {
|
||||||
|
if(!this.options.excludePixelRatio) {
|
||||||
|
keys.push({key: "pixel_ratio", value: this.getPixelRatio()});
|
||||||
|
}
|
||||||
|
return keys;
|
||||||
|
},
|
||||||
|
getPixelRatio: function() {
|
||||||
|
return window.devicePixelRatio || "";
|
||||||
|
},
|
||||||
screenResolutionKey: function(keys) {
|
screenResolutionKey: function(keys) {
|
||||||
if(!this.options.excludeScreenResolution) {
|
if(!this.options.excludeScreenResolution) {
|
||||||
return this.getScreenResolution(keys);
|
return this.getScreenResolution(keys);
|
||||||
|
|
@ -334,6 +344,57 @@
|
||||||
// and if it doesn't match all 3 then that font is not available.
|
// and if it doesn't match all 3 then that font is not available.
|
||||||
var baseFonts = ["monospace", "sans-serif", "serif"];
|
var baseFonts = ["monospace", "sans-serif", "serif"];
|
||||||
|
|
||||||
|
var fontList = [
|
||||||
|
"Andale Mono", "Arial", "Arial Black", "Arial Hebrew", "Arial MT", "Arial Narrow", "Arial Rounded MT Bold", "Arial Unicode MS",
|
||||||
|
"Bitstream Vera Sans Mono", "Book Antiqua", "Bookman Old Style",
|
||||||
|
"Calibri", "Cambria", "Cambria Math", "Century", "Century Gothic", "Century Schoolbook", "Comic Sans", "Comic Sans MS", "Consolas", "Courier", "Courier New",
|
||||||
|
"Garamond", "Geneva", "Georgia",
|
||||||
|
"Helvetica", "Helvetica Neue",
|
||||||
|
"Impact",
|
||||||
|
"Lucida Bright", "Lucida Calligraphy", "Lucida Console", "Lucida Fax", "LUCIDA GRANDE", "Lucida Handwriting", "Lucida Sans", "Lucida Sans Typewriter", "Lucida Sans Unicode",
|
||||||
|
"Microsoft Sans Serif", "Monaco", "Monotype Corsiva", "MS Gothic", "MS Outlook", "MS PGothic", "MS Reference Sans Serif", "MS Sans Serif", "MS Serif", "MYRIAD", "MYRIAD PRO",
|
||||||
|
"Palatino", "Palatino Linotype",
|
||||||
|
"Segoe Print", "Segoe Script", "Segoe UI", "Segoe UI Light", "Segoe UI Semibold", "Segoe UI Symbol",
|
||||||
|
"Tahoma", "Times", "Times New Roman", "Times New Roman PS", "Trebuchet MS",
|
||||||
|
"Verdana", "Wingdings", "Wingdings 2", "Wingdings 3"
|
||||||
|
];
|
||||||
|
var extendedFontList = [
|
||||||
|
"Abadi MT Condensed Light", "Academy Engraved LET", "ADOBE CASLON PRO", "Adobe Garamond", "ADOBE GARAMOND PRO", "Agency FB", "Aharoni", "Albertus Extra Bold", "Albertus Medium", "Algerian", "Amazone BT", "American Typewriter",
|
||||||
|
"American Typewriter Condensed", "AmerType Md BT", "Andalus", "Angsana New", "AngsanaUPC", "Antique Olive", "Aparajita", "Apple Chancery", "Apple Color Emoji", "Apple SD Gothic Neo", "Arabic Typesetting", "ARCHER",
|
||||||
|
"ARNO PRO", "Arrus BT", "Aurora Cn BT", "AvantGarde Bk BT", "AvantGarde Md BT", "AVENIR", "Ayuthaya", "Bandy", "Bangla Sangam MN", "Bank Gothic", "BankGothic Md BT", "Baskerville",
|
||||||
|
"Baskerville Old Face", "Batang", "BatangChe", "Bauer Bodoni", "Bauhaus 93", "Bazooka", "Bell MT", "Bembo", "Benguiat Bk BT", "Berlin Sans FB", "Berlin Sans FB Demi", "Bernard MT Condensed", "BernhardFashion BT", "BernhardMod BT", "Big Caslon", "BinnerD",
|
||||||
|
"Blackadder ITC", "BlairMdITC TT", "Bodoni 72", "Bodoni 72 Oldstyle", "Bodoni 72 Smallcaps", "Bodoni MT", "Bodoni MT Black", "Bodoni MT Condensed", "Bodoni MT Poster Compressed",
|
||||||
|
"Bookshelf Symbol 7", "Boulder", "Bradley Hand", "Bradley Hand ITC", "Bremen Bd BT", "Britannic Bold", "Broadway", "Browallia New", "BrowalliaUPC", "Brush Script MT", "Californian FB", "Calisto MT", "Calligrapher", "Candara",
|
||||||
|
"CaslonOpnface BT", "Castellar", "Centaur", "Cezanne", "CG Omega", "CG Times", "Chalkboard", "Chalkboard SE", "Chalkduster", "Charlesworth", "Charter Bd BT", "Charter BT", "Chaucer",
|
||||||
|
"ChelthmITC Bk BT", "Chiller", "Clarendon", "Clarendon Condensed", "CloisterBlack BT", "Cochin", "Colonna MT", "Constantia", "Cooper Black", "Copperplate", "Copperplate Gothic", "Copperplate Gothic Bold",
|
||||||
|
"Copperplate Gothic Light", "CopperplGoth Bd BT", "Corbel", "Cordia New", "CordiaUPC", "Cornerstone", "Coronet", "Cuckoo", "Curlz MT", "DaunPenh", "Dauphin", "David", "DB LCD Temp", "DELICIOUS", "Denmark",
|
||||||
|
"DFKai-SB", "Didot", "DilleniaUPC", "DIN", "DokChampa", "Dotum", "DotumChe", "Ebrima", "Edwardian Script ITC", "Elephant", "English 111 Vivace BT", "Engravers MT", "EngraversGothic BT", "Eras Bold ITC", "Eras Demi ITC", "Eras Light ITC", "Eras Medium ITC",
|
||||||
|
"EucrosiaUPC", "Euphemia", "Euphemia UCAS", "EUROSTILE", "Exotc350 Bd BT", "FangSong", "Felix Titling", "Fixedsys", "FONTIN", "Footlight MT Light", "Forte",
|
||||||
|
"FrankRuehl", "Fransiscan", "Freefrm721 Blk BT", "FreesiaUPC", "Freestyle Script", "French Script MT", "FrnkGothITC Bk BT", "Fruitger", "FRUTIGER",
|
||||||
|
"Futura", "Futura Bk BT", "Futura Lt BT", "Futura Md BT", "Futura ZBlk BT", "FuturaBlack BT", "Gabriola", "Galliard BT", "Gautami", "Geeza Pro", "Geometr231 BT", "Geometr231 Hv BT", "Geometr231 Lt BT", "GeoSlab 703 Lt BT",
|
||||||
|
"GeoSlab 703 XBd BT", "Gigi", "Gill Sans", "Gill Sans MT", "Gill Sans MT Condensed", "Gill Sans MT Ext Condensed Bold", "Gill Sans Ultra Bold", "Gill Sans Ultra Bold Condensed", "Gisha", "Gloucester MT Extra Condensed", "GOTHAM", "GOTHAM BOLD",
|
||||||
|
"Goudy Old Style", "Goudy Stout", "GoudyHandtooled BT", "GoudyOLSt BT", "Gujarati Sangam MN", "Gulim", "GulimChe", "Gungsuh", "GungsuhChe", "Gurmukhi MN", "Haettenschweiler", "Harlow Solid Italic", "Harrington", "Heather", "Heiti SC", "Heiti TC", "HELV",
|
||||||
|
"Herald", "High Tower Text", "Hiragino Kaku Gothic ProN", "Hiragino Mincho ProN", "Hoefler Text", "Humanst 521 Cn BT", "Humanst521 BT", "Humanst521 Lt BT", "Imprint MT Shadow", "Incised901 Bd BT", "Incised901 BT",
|
||||||
|
"Incised901 Lt BT", "INCONSOLATA", "Informal Roman", "Informal011 BT", "INTERSTATE", "IrisUPC", "Iskoola Pota", "JasmineUPC", "Jazz LET", "Jenson", "Jester", "Jokerman", "Juice ITC", "Kabel Bk BT", "Kabel Ult BT", "Kailasa", "KaiTi", "Kalinga", "Kannada Sangam MN",
|
||||||
|
"Kartika", "Kaufmann Bd BT", "Kaufmann BT", "Khmer UI", "KodchiangUPC", "Kokila", "Korinna BT", "Kristen ITC", "Krungthep", "Kunstler Script", "Lao UI", "Latha", "Leelawadee", "Letter Gothic", "Levenim MT", "LilyUPC", "Lithograph", "Lithograph Light", "Long Island",
|
||||||
|
"Lydian BT", "Magneto", "Maiandra GD", "Malayalam Sangam MN", "Malgun Gothic",
|
||||||
|
"Mangal", "Marigold", "Marion", "Marker Felt", "Market", "Marlett", "Matisse ITC", "Matura MT Script Capitals", "Meiryo", "Meiryo UI", "Microsoft Himalaya", "Microsoft JhengHei", "Microsoft New Tai Lue", "Microsoft PhagsPa", "Microsoft Tai Le",
|
||||||
|
"Microsoft Uighur", "Microsoft YaHei", "Microsoft Yi Baiti", "MingLiU", "MingLiU_HKSCS", "MingLiU_HKSCS-ExtB", "MingLiU-ExtB", "Minion", "Minion Pro", "Miriam", "Miriam Fixed", "Mistral", "Modern", "Modern No. 20", "Mona Lisa Solid ITC TT", "Mongolian Baiti",
|
||||||
|
"MONO", "MoolBoran", "Mrs Eaves", "MS LineDraw", "MS Mincho", "MS PMincho", "MS Reference Specialty", "MS UI Gothic", "MT Extra", "MUSEO", "MV Boli",
|
||||||
|
"Nadeem", "Narkisim", "NEVIS", "News Gothic", "News GothicMT", "NewsGoth BT", "Niagara Engraved", "Niagara Solid", "Noteworthy", "NSimSun", "Nyala", "OCR A Extended", "Old Century", "Old English Text MT", "Onyx", "Onyx BT", "OPTIMA", "Oriya Sangam MN",
|
||||||
|
"OSAKA", "OzHandicraft BT", "Palace Script MT", "Papyrus", "Parchment", "Party LET", "Pegasus", "Perpetua", "Perpetua Titling MT", "PetitaBold", "Pickwick", "Plantagenet Cherokee", "Playbill", "PMingLiU", "PMingLiU-ExtB",
|
||||||
|
"Poor Richard", "Poster", "PosterBodoni BT", "PRINCETOWN LET", "Pristina", "PTBarnum BT", "Pythagoras", "Raavi", "Rage Italic", "Ravie", "Ribbon131 Bd BT", "Rockwell", "Rockwell Condensed", "Rockwell Extra Bold", "Rod", "Roman", "Sakkal Majalla",
|
||||||
|
"Santa Fe LET", "Savoye LET", "Sceptre", "Script", "Script MT Bold", "SCRIPTINA", "Serifa", "Serifa BT", "Serifa Th BT", "ShelleyVolante BT", "Sherwood",
|
||||||
|
"Shonar Bangla", "Showcard Gothic", "Shruti", "Signboard", "SILKSCREEN", "SimHei", "Simplified Arabic", "Simplified Arabic Fixed", "SimSun", "SimSun-ExtB", "Sinhala Sangam MN", "Sketch Rockwell", "Skia", "Small Fonts", "Snap ITC", "Snell Roundhand", "Socket",
|
||||||
|
"Souvenir Lt BT", "Staccato222 BT", "Steamer", "Stencil", "Storybook", "Styllo", "Subway", "Swis721 BlkEx BT", "Swiss911 XCm BT", "Sylfaen", "Synchro LET", "System", "Tamil Sangam MN", "Technical", "Teletype", "Telugu Sangam MN", "Tempus Sans ITC",
|
||||||
|
"Terminal", "Thonburi", "Traditional Arabic", "Trajan", "TRAJAN PRO", "Tristan", "Tubular", "Tunga", "Tw Cen MT", "Tw Cen MT Condensed", "Tw Cen MT Condensed Extra Bold",
|
||||||
|
"TypoUpright BT", "Unicorn", "Univers", "Univers CE 55 Medium", "Univers Condensed", "Utsaah", "Vagabond", "Vani", "Vijaya", "Viner Hand ITC", "VisualUI", "Vivaldi", "Vladimir Script", "Vrinda", "Westminster", "WHITNEY", "Wide Latin",
|
||||||
|
"ZapfEllipt BT", "ZapfHumnst BT", "ZapfHumnst Dm BT", "Zapfino", "Zurich BlkEx BT", "Zurich Ex BT", "ZWAdobeF"];
|
||||||
|
|
||||||
|
if(that.options.extendedJsFonts) {
|
||||||
|
fontList = fontList.concat(extendedFontList);
|
||||||
|
}
|
||||||
|
|
||||||
//we use m or w because these two characters take up the maximum width.
|
//we use m or w because these two characters take up the maximum width.
|
||||||
// And we use a LLi so that the same matching fonts can get separated
|
// And we use a LLi so that the same matching fonts can get separated
|
||||||
var testString = "mmmmmmmmmmlli";
|
var testString = "mmmmmmmmmmlli";
|
||||||
|
|
@ -343,94 +404,106 @@
|
||||||
|
|
||||||
var h = document.getElementsByTagName("body")[0];
|
var h = document.getElementsByTagName("body")[0];
|
||||||
|
|
||||||
// create a SPAN in the document to get the width of the text we use to test
|
// div to load spans for the base fonts
|
||||||
var s = document.createElement("span");
|
var baseFontsDiv = document.createElement("div");
|
||||||
/*
|
|
||||||
* We need this css as in some weird browser this
|
// div to load spans for the fonts to detect
|
||||||
* span elements shows up for a microSec which creates a
|
var fontsDiv = document.createElement("div");
|
||||||
* bad user experience
|
|
||||||
*/
|
|
||||||
s.style.position = "absolute";
|
|
||||||
s.style.left = "-9999px";
|
|
||||||
s.style.fontSize = testSize;
|
|
||||||
s.innerHTML = testString;
|
|
||||||
var defaultWidth = {};
|
var defaultWidth = {};
|
||||||
var defaultHeight = {};
|
var defaultHeight = {};
|
||||||
for (var index = 0, length = baseFonts.length; index < length; index++) {
|
|
||||||
//get the default width for the three base fonts
|
// creates a span where the fonts will be loaded
|
||||||
s.style.fontFamily = baseFonts[index];
|
var createSpan = function() {
|
||||||
h.appendChild(s);
|
var s = document.createElement("span");
|
||||||
defaultWidth[baseFonts[index]] = s.offsetWidth; //width for the default font
|
/*
|
||||||
defaultHeight[baseFonts[index]] = s.offsetHeight; //height for the defualt font
|
* We need this css as in some weird browser this
|
||||||
h.removeChild(s);
|
* span elements shows up for a microSec which creates a
|
||||||
}
|
* bad user experience
|
||||||
var detect = function (font) {
|
*/
|
||||||
|
s.style.position = "absolute";
|
||||||
|
s.style.left = "-9999px";
|
||||||
|
s.style.fontSize = testSize;
|
||||||
|
s.innerHTML = testString;
|
||||||
|
return s;
|
||||||
|
};
|
||||||
|
|
||||||
|
// creates a span and load the font to detect and a base font for fallback
|
||||||
|
var createSpanWithFonts = function(fontToDetect, baseFont) {
|
||||||
|
var s = createSpan();
|
||||||
|
s.style.fontFamily = "'" + fontToDetect + "'," + baseFont;
|
||||||
|
return s;
|
||||||
|
};
|
||||||
|
|
||||||
|
// creates spans for the base fonts and adds them to baseFontsDiv
|
||||||
|
var initializeBaseFontsSpans = function() {
|
||||||
|
var spans = [];
|
||||||
|
for (var index = 0, length = baseFonts.length; index < length; index++) {
|
||||||
|
var s = createSpan();
|
||||||
|
s.style.fontFamily = baseFonts[index];
|
||||||
|
baseFontsDiv.appendChild(s);
|
||||||
|
spans.push(s);
|
||||||
|
}
|
||||||
|
return spans;
|
||||||
|
};
|
||||||
|
|
||||||
|
// creates spans for the fonts to detect and adds them to fontsDiv
|
||||||
|
var initializeFontsSpans = function() {
|
||||||
|
var spans = {};
|
||||||
|
for(var i = 0, l = fontList.length; i < l; i++) {
|
||||||
|
var fontSpans = [];
|
||||||
|
for(var j = 0, numDefaultFonts = baseFonts.length; j < numDefaultFonts; j++) {
|
||||||
|
var s = createSpanWithFonts(fontList[i], baseFonts[j]);
|
||||||
|
fontsDiv.appendChild(s);
|
||||||
|
fontSpans.push(s);
|
||||||
|
}
|
||||||
|
spans[fontList[i]] = fontSpans; // Stores {fontName : [spans for that font]}
|
||||||
|
}
|
||||||
|
return spans;
|
||||||
|
};
|
||||||
|
|
||||||
|
// checks if a font is available
|
||||||
|
var isFontAvailable = function(fontSpans) {
|
||||||
var detected = false;
|
var detected = false;
|
||||||
for (var index = 0, l = baseFonts.length; index < l; index++) {
|
for(var i = 0; i < baseFonts.length; i++) {
|
||||||
s.style.fontFamily = font + "," + baseFonts[index]; // name of the font along with the base font for fallback.
|
detected = (fontSpans[i].offsetWidth !== defaultWidth[baseFonts[i]] || fontSpans[i].offsetHeight !== defaultHeight[baseFonts[i]]);
|
||||||
h.appendChild(s);
|
if(detected) {
|
||||||
var matched = (s.offsetWidth !== defaultWidth[baseFonts[index]] || s.offsetHeight !== defaultHeight[baseFonts[index]]);
|
return detected;
|
||||||
h.removeChild(s);
|
}
|
||||||
detected = detected || matched;
|
|
||||||
}
|
}
|
||||||
return detected;
|
return detected;
|
||||||
};
|
};
|
||||||
var fontList = [
|
|
||||||
"Andale Mono", "Arial", "Arial Black", "Arial Hebrew", "Arial MT", "Arial Narrow", "Arial Rounded MT Bold", "Arial Unicode MS",
|
|
||||||
"Bitstream Vera Sans Mono", "Book Antiqua", "Bookman Old Style",
|
|
||||||
"Calibri", "Cambria", "Cambria Math", "Century", "Century Gothic", "Century Schoolbook", "Comic Sans", "Comic Sans MS", "Consolas", "Courier", "Courier New",
|
|
||||||
"Garamond", "Geneva", "Georgia",
|
|
||||||
"Helvetica", "Helvetica Neue",
|
|
||||||
"Impact",
|
|
||||||
"Lucida Bright", "Lucida Calligraphy", "Lucida Console", "Lucida Fax", "LUCIDA GRANDE", "Lucida Handwriting", "Lucida Sans", "Lucida Sans Typewriter", "Lucida Sans Unicode",
|
|
||||||
"Microsoft Sans Serif", "Monaco", "Monotype Corsiva", "MS Gothic", "MS Outlook", "MS PGothic", "MS Reference Sans Serif", "MS Sans Serif", "MS Serif", "MYRIAD", "MYRIAD PRO",
|
|
||||||
"Palatino", "Palatino Linotype",
|
|
||||||
"Segoe Print", "Segoe Script", "Segoe UI", "Segoe UI Light", "Segoe UI Semibold", "Segoe UI Symbol",
|
|
||||||
"Tahoma", "Times", "Times New Roman", "Times New Roman PS", "Trebuchet MS",
|
|
||||||
"Verdana", "Wingdings", "Wingdings 2", "Wingdings 3"
|
|
||||||
];
|
|
||||||
var extendedFontList = [
|
|
||||||
"Abadi MT Condensed Light", "Academy Engraved LET", "ADOBE CASLON PRO", "Adobe Garamond", "ADOBE GARAMOND PRO", "Agency FB", "Aharoni", "Albertus Extra Bold", "Albertus Medium", "Algerian", "Amazone BT", "American Typewriter",
|
|
||||||
"American Typewriter Condensed", "AmerType Md BT", "Andalus", "Angsana New", "AngsanaUPC", "Antique Olive", "Aparajita", "Apple Chancery", "Apple Color Emoji", "Apple SD Gothic Neo", "Arabic Typesetting", "ARCHER",
|
|
||||||
"ARNO PRO", "Arrus BT", "Aurora Cn BT", "AvantGarde Bk BT", "AvantGarde Md BT", "AVENIR", "Ayuthaya", "Bandy", "Bangla Sangam MN", "Bank Gothic", "BankGothic Md BT", "Baskerville",
|
|
||||||
"Baskerville Old Face", "Batang", "BatangChe", "Bauer Bodoni", "Bauhaus 93", "Bazooka", "Bell MT", "Bembo", "Benguiat Bk BT", "Berlin Sans FB", "Berlin Sans FB Demi", "Bernard MT Condensed", "BernhardFashion BT", "BernhardMod BT", "Big Caslon", "BinnerD",
|
|
||||||
"Blackadder ITC", "BlairMdITC TT", "Bodoni 72", "Bodoni 72 Oldstyle", "Bodoni 72 Smallcaps", "Bodoni MT", "Bodoni MT Black", "Bodoni MT Condensed", "Bodoni MT Poster Compressed",
|
|
||||||
"Bookshelf Symbol 7", "Boulder", "Bradley Hand", "Bradley Hand ITC", "Bremen Bd BT", "Britannic Bold", "Broadway", "Browallia New", "BrowalliaUPC", "Brush Script MT", "Californian FB", "Calisto MT", "Calligrapher", "Candara",
|
|
||||||
"CaslonOpnface BT", "Castellar", "Centaur", "Cezanne", "CG Omega", "CG Times", "Chalkboard", "Chalkboard SE", "Chalkduster", "Charlesworth", "Charter Bd BT", "Charter BT", "Chaucer",
|
|
||||||
"ChelthmITC Bk BT", "Chiller", "Clarendon", "Clarendon Condensed", "CloisterBlack BT", "Cochin", "Colonna MT", "Constantia", "Cooper Black", "Copperplate", "Copperplate Gothic", "Copperplate Gothic Bold",
|
|
||||||
"Copperplate Gothic Light", "CopperplGoth Bd BT", "Corbel", "Cordia New", "CordiaUPC", "Cornerstone", "Coronet", "Cuckoo", "Curlz MT", "DaunPenh", "Dauphin", "David", "DB LCD Temp", "DELICIOUS", "Denmark",
|
|
||||||
"DFKai-SB", "Didot", "DilleniaUPC", "DIN", "DokChampa", "Dotum", "DotumChe", "Ebrima", "Edwardian Script ITC", "Elephant", "English 111 Vivace BT", "Engravers MT", "EngraversGothic BT", "Eras Bold ITC", "Eras Demi ITC", "Eras Light ITC", "Eras Medium ITC",
|
|
||||||
"EucrosiaUPC", "Euphemia", "Euphemia UCAS", "EUROSTILE", "Exotc350 Bd BT", "FangSong", "Felix Titling", "Fixedsys", "FONTIN", "Footlight MT Light", "Forte",
|
|
||||||
"FrankRuehl", "Fransiscan", "Freefrm721 Blk BT", "FreesiaUPC", "Freestyle Script", "French Script MT", "FrnkGothITC Bk BT", "Fruitger", "FRUTIGER",
|
|
||||||
"Futura", "Futura Bk BT", "Futura Lt BT", "Futura Md BT", "Futura ZBlk BT", "FuturaBlack BT", "Gabriola", "Galliard BT", "Gautami", "Geeza Pro", "Geometr231 BT", "Geometr231 Hv BT", "Geometr231 Lt BT", "GeoSlab 703 Lt BT",
|
|
||||||
"GeoSlab 703 XBd BT", "Gigi", "Gill Sans", "Gill Sans MT", "Gill Sans MT Condensed", "Gill Sans MT Ext Condensed Bold", "Gill Sans Ultra Bold", "Gill Sans Ultra Bold Condensed", "Gisha", "Gloucester MT Extra Condensed", "GOTHAM", "GOTHAM BOLD",
|
|
||||||
"Goudy Old Style", "Goudy Stout", "GoudyHandtooled BT", "GoudyOLSt BT", "Gujarati Sangam MN", "Gulim", "GulimChe", "Gungsuh", "GungsuhChe", "Gurmukhi MN", "Haettenschweiler", "Harlow Solid Italic", "Harrington", "Heather", "Heiti SC", "Heiti TC", "HELV",
|
|
||||||
"Herald", "High Tower Text", "Hiragino Kaku Gothic ProN", "Hiragino Mincho ProN", "Hoefler Text", "Humanst 521 Cn BT", "Humanst521 BT", "Humanst521 Lt BT", "Imprint MT Shadow", "Incised901 Bd BT", "Incised901 BT",
|
|
||||||
"Incised901 Lt BT", "INCONSOLATA", "Informal Roman", "Informal011 BT", "INTERSTATE", "IrisUPC", "Iskoola Pota", "JasmineUPC", "Jazz LET", "Jenson", "Jester", "Jokerman", "Juice ITC", "Kabel Bk BT", "Kabel Ult BT", "Kailasa", "KaiTi", "Kalinga", "Kannada Sangam MN",
|
|
||||||
"Kartika", "Kaufmann Bd BT", "Kaufmann BT", "Khmer UI", "KodchiangUPC", "Kokila", "Korinna BT", "Kristen ITC", "Krungthep", "Kunstler Script", "Lao UI", "Latha", "Leelawadee", "Letter Gothic", "Levenim MT", "LilyUPC", "Lithograph", "Lithograph Light", "Long Island",
|
|
||||||
"Lydian BT", "Magneto", "Maiandra GD", "Malayalam Sangam MN", "Malgun Gothic",
|
|
||||||
"Mangal", "Marigold", "Marion", "Marker Felt", "Market", "Marlett", "Matisse ITC", "Matura MT Script Capitals", "Meiryo", "Meiryo UI", "Microsoft Himalaya", "Microsoft JhengHei", "Microsoft New Tai Lue", "Microsoft PhagsPa", "Microsoft Tai Le",
|
|
||||||
"Microsoft Uighur", "Microsoft YaHei", "Microsoft Yi Baiti", "MingLiU", "MingLiU_HKSCS", "MingLiU_HKSCS-ExtB", "MingLiU-ExtB", "Minion", "Minion Pro", "Miriam", "Miriam Fixed", "Mistral", "Modern", "Modern No. 20", "Mona Lisa Solid ITC TT", "Mongolian Baiti",
|
|
||||||
"MONO", "MoolBoran", "Mrs Eaves", "MS LineDraw", "MS Mincho", "MS PMincho", "MS Reference Specialty", "MS UI Gothic", "MT Extra", "MUSEO", "MV Boli",
|
|
||||||
"Nadeem", "Narkisim", "NEVIS", "News Gothic", "News GothicMT", "NewsGoth BT", "Niagara Engraved", "Niagara Solid", "Noteworthy", "NSimSun", "Nyala", "OCR A Extended", "Old Century", "Old English Text MT", "Onyx", "Onyx BT", "OPTIMA", "Oriya Sangam MN",
|
|
||||||
"OSAKA", "OzHandicraft BT", "Palace Script MT", "Papyrus", "Parchment", "Party LET", "Pegasus", "Perpetua", "Perpetua Titling MT", "PetitaBold", "Pickwick", "Plantagenet Cherokee", "Playbill", "PMingLiU", "PMingLiU-ExtB",
|
|
||||||
"Poor Richard", "Poster", "PosterBodoni BT", "PRINCETOWN LET", "Pristina", "PTBarnum BT", "Pythagoras", "Raavi", "Rage Italic", "Ravie", "Ribbon131 Bd BT", "Rockwell", "Rockwell Condensed", "Rockwell Extra Bold", "Rod", "Roman", "Sakkal Majalla",
|
|
||||||
"Santa Fe LET", "Savoye LET", "Sceptre", "Script", "Script MT Bold", "SCRIPTINA", "Serifa", "Serifa BT", "Serifa Th BT", "ShelleyVolante BT", "Sherwood",
|
|
||||||
"Shonar Bangla", "Showcard Gothic", "Shruti", "Signboard", "SILKSCREEN", "SimHei", "Simplified Arabic", "Simplified Arabic Fixed", "SimSun", "SimSun-ExtB", "Sinhala Sangam MN", "Sketch Rockwell", "Skia", "Small Fonts", "Snap ITC", "Snell Roundhand", "Socket",
|
|
||||||
"Souvenir Lt BT", "Staccato222 BT", "Steamer", "Stencil", "Storybook", "Styllo", "Subway", "Swis721 BlkEx BT", "Swiss911 XCm BT", "Sylfaen", "Synchro LET", "System", "Tamil Sangam MN", "Technical", "Teletype", "Telugu Sangam MN", "Tempus Sans ITC",
|
|
||||||
"Terminal", "Thonburi", "Traditional Arabic", "Trajan", "TRAJAN PRO", "Tristan", "Tubular", "Tunga", "Tw Cen MT", "Tw Cen MT Condensed", "Tw Cen MT Condensed Extra Bold",
|
|
||||||
"TypoUpright BT", "Unicorn", "Univers", "Univers CE 55 Medium", "Univers Condensed", "Utsaah", "Vagabond", "Vani", "Vijaya", "Viner Hand ITC", "VisualUI", "Vivaldi", "Vladimir Script", "Vrinda", "Westminster", "WHITNEY", "Wide Latin",
|
|
||||||
"ZapfEllipt BT", "ZapfHumnst BT", "ZapfHumnst Dm BT", "Zapfino", "Zurich BlkEx BT", "Zurich Ex BT", "ZWAdobeF"];
|
|
||||||
|
|
||||||
if(that.options.extendedJsFonts) {
|
// create spans for base fonts
|
||||||
fontList = fontList.concat(extendedFontList);
|
var baseFontsSpans = initializeBaseFontsSpans();
|
||||||
|
|
||||||
|
// add the spans to the DOM
|
||||||
|
h.appendChild(baseFontsDiv);
|
||||||
|
|
||||||
|
// get the default width for the three base fonts
|
||||||
|
for (var index = 0, length = baseFonts.length; index < length; index++) {
|
||||||
|
defaultWidth[baseFonts[index]] = baseFontsSpans[index].offsetWidth; // width for the default font
|
||||||
|
defaultHeight[baseFonts[index]] = baseFontsSpans[index].offsetHeight; // height for the default font
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// create spans for fonts to detect
|
||||||
|
var fontsSpans = initializeFontsSpans();
|
||||||
|
|
||||||
|
// add all the spans to the DOM
|
||||||
|
h.appendChild(fontsDiv);
|
||||||
|
|
||||||
|
// check available fonts
|
||||||
var available = [];
|
var available = [];
|
||||||
for (var i = 0, l = fontList.length; i < l; i++) {
|
for(var i = 0, l = fontList.length; i < l; i++) {
|
||||||
if(detect(fontList[i])) {
|
if(isFontAvailable(fontsSpans[fontList[i]])) {
|
||||||
available.push(fontList[i]);
|
available.push(fontList[i]);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// remove spans from DOM
|
||||||
|
h.removeChild(fontsDiv);
|
||||||
|
h.removeChild(baseFontsDiv);
|
||||||
|
|
||||||
keys.push({key: "js_fonts", value: available});
|
keys.push({key: "js_fonts", value: available});
|
||||||
done(keys);
|
done(keys);
|
||||||
}, 1);
|
}, 1);
|
||||||
|
|
@ -616,7 +689,7 @@
|
||||||
ctx.font = "11pt no-real-font-123";
|
ctx.font = "11pt no-real-font-123";
|
||||||
}
|
}
|
||||||
ctx.fillText("Cwm fjordbank glyphs vext quiz, \ud83d\ude03", 2, 15);
|
ctx.fillText("Cwm fjordbank glyphs vext quiz, \ud83d\ude03", 2, 15);
|
||||||
ctx.fillStyle = "rgba(102, 204, 0, 0.7)";
|
ctx.fillStyle = "rgba(102, 204, 0, 0.2)";
|
||||||
ctx.font = "18pt Arial";
|
ctx.font = "18pt Arial";
|
||||||
ctx.fillText("Cwm fjordbank glyphs vext quiz, \ud83d\ude03", 4, 45);
|
ctx.fillText("Cwm fjordbank glyphs vext quiz, \ud83d\ude03", 4, 45);
|
||||||
|
|
||||||
|
|
@ -770,14 +843,18 @@
|
||||||
},
|
},
|
||||||
getAdBlock: function(){
|
getAdBlock: function(){
|
||||||
var ads = document.createElement("div");
|
var ads = document.createElement("div");
|
||||||
ads.setAttribute("id", "ads");
|
ads.innerHTML = " ";
|
||||||
|
ads.className = "adsbox";
|
||||||
|
var result = false;
|
||||||
try {
|
try {
|
||||||
// body may not exist, that's why we need try/catch
|
// body may not exist, that's why we need try/catch
|
||||||
document.body.appendChild(ads);
|
document.body.appendChild(ads);
|
||||||
return document.getElementById("ads") ? false : true;
|
result = document.getElementsByClassName("adsbox")[0].offsetHeight === 0;
|
||||||
|
document.body.removeChild(ads);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
return false;
|
result = false;
|
||||||
}
|
}
|
||||||
|
return result;
|
||||||
},
|
},
|
||||||
getHasLiedLanguages: function(){
|
getHasLiedLanguages: function(){
|
||||||
//We check if navigator.language is equal to the first language of navigator.languages
|
//We check if navigator.language is equal to the first language of navigator.languages
|
||||||
|
|
@ -787,7 +864,7 @@
|
||||||
if(firstLanguages !== navigator.language.substr(0, 2)){
|
if(firstLanguages !== navigator.language.substr(0, 2)){
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
} catch(err){
|
} catch(err) {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1206,6 +1283,6 @@
|
||||||
return ("00000000" + (h1[0] >>> 0).toString(16)).slice(-8) + ("00000000" + (h1[1] >>> 0).toString(16)).slice(-8) + ("00000000" + (h2[0] >>> 0).toString(16)).slice(-8) + ("00000000" + (h2[1] >>> 0).toString(16)).slice(-8);
|
return ("00000000" + (h1[0] >>> 0).toString(16)).slice(-8) + ("00000000" + (h1[1] >>> 0).toString(16)).slice(-8) + ("00000000" + (h2[0] >>> 0).toString(16)).slice(-8) + ("00000000" + (h2[1] >>> 0).toString(16)).slice(-8);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
Fingerprint2.VERSION = "1.1.4";
|
Fingerprint2.VERSION = "1.4.0";
|
||||||
return Fingerprint2;
|
return Fingerprint2;
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "fingerprintjs2",
|
"name": "fingerprintjs2",
|
||||||
"version": "1.1.4",
|
"version": "1.4.0",
|
||||||
"description": "Modern & flexible browser fingerprinting library",
|
"description": "Modern & flexible browser fingerprinting library",
|
||||||
"main": "dist/fingerprint2.min.js",
|
"main": "dist/fingerprint2.min.js",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|
|
||||||
|
|
@ -1,61 +0,0 @@
|
||||||
{
|
|
||||||
"name": "neon-animation",
|
|
||||||
"description": "A system for animating Polymer-based web components",
|
|
||||||
"version": "1.2.3",
|
|
||||||
"authors": [
|
|
||||||
"The Polymer Authors"
|
|
||||||
],
|
|
||||||
"keywords": [
|
|
||||||
"web-components",
|
|
||||||
"web-component",
|
|
||||||
"polymer",
|
|
||||||
"web-animations"
|
|
||||||
],
|
|
||||||
"main": [
|
|
||||||
"neon-animated-pages.html",
|
|
||||||
"neon-animatable-behavior.html",
|
|
||||||
"neon-animation-behavior.html",
|
|
||||||
"neon-animation-runner-behavior.html",
|
|
||||||
"neon-shared-element-animatable-behavior.html",
|
|
||||||
"neon-shared-element-animation-behavior.html",
|
|
||||||
"neon-animatable.html",
|
|
||||||
"neon-animations.html"
|
|
||||||
],
|
|
||||||
"private": true,
|
|
||||||
"repository": {
|
|
||||||
"type": "git",
|
|
||||||
"url": "git://github.com/PolymerElements/neon-animation"
|
|
||||||
},
|
|
||||||
"license": "http://polymer.github.io/LICENSE.txt",
|
|
||||||
"homepage": "https://github.com/PolymerElements/neon-animation",
|
|
||||||
"ignore": [],
|
|
||||||
"dependencies": {
|
|
||||||
"polymer": "Polymer/polymer#^1.1.0",
|
|
||||||
"iron-meta": "PolymerElements/iron-meta#^1.0.0",
|
|
||||||
"iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^1.0.0",
|
|
||||||
"iron-selector": "PolymerElements/iron-selector#^1.0.0",
|
|
||||||
"web-animations-js": "web-animations/web-animations-js#^2.2.0"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
|
|
||||||
"paper-toolbar": "PolymerElements/paper-toolbar#^1.0.0",
|
|
||||||
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
|
|
||||||
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
|
||||||
"web-component-tester": "^4.0.0",
|
|
||||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
|
|
||||||
"paper-item": "PolymerElements/paper-item#^1.0.0",
|
|
||||||
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
|
|
||||||
"iron-icon": "PolymerElements/iron-icon#^1.0.0",
|
|
||||||
"iron-icons": "PolymerElements/iron-icons#^1.0.0",
|
|
||||||
"paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0"
|
|
||||||
},
|
|
||||||
"_release": "1.2.3",
|
|
||||||
"_resolution": {
|
|
||||||
"type": "version",
|
|
||||||
"tag": "v1.2.3",
|
|
||||||
"commit": "c50d51e62825f4aa53f10e93f746796a174af232"
|
|
||||||
},
|
|
||||||
"_source": "git://github.com/PolymerElements/neon-animation.git",
|
|
||||||
"_target": "^1.2.2",
|
|
||||||
"_originalSource": "PolymerElements/neon-animation"
|
|
||||||
}
|
|
||||||
|
|
@ -1,33 +0,0 @@
|
||||||
<!-- Instructions: https://github.com/PolymerElements/neon-animation/CONTRIBUTING.md#filing-issues -->
|
|
||||||
### Description
|
|
||||||
<!-- Example: The `paper-foo` element causes the page to turn pink when clicked. -->
|
|
||||||
|
|
||||||
### Expected outcome
|
|
||||||
|
|
||||||
<!-- Example: The page stays the same color. -->
|
|
||||||
|
|
||||||
### Actual outcome
|
|
||||||
|
|
||||||
<!-- Example: The page turns pink. -->
|
|
||||||
|
|
||||||
### Live Demo
|
|
||||||
<!-- Example: https://jsbin.com/cagaye/edit?html,output -->
|
|
||||||
|
|
||||||
### Steps to reproduce
|
|
||||||
|
|
||||||
<!-- Example
|
|
||||||
1. Put a `paper-foo` element in the page.
|
|
||||||
2. Open the page in a web browser.
|
|
||||||
3. Click the `paper-foo` element.
|
|
||||||
-->
|
|
||||||
|
|
||||||
### Browsers Affected
|
|
||||||
<!-- Check all that apply -->
|
|
||||||
- [ ] Chrome
|
|
||||||
- [ ] Firefox
|
|
||||||
- [ ] Safari 9
|
|
||||||
- [ ] Safari 8
|
|
||||||
- [ ] Safari 7
|
|
||||||
- [ ] Edge
|
|
||||||
- [ ] IE 11
|
|
||||||
- [ ] IE 10
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
bower_components
|
|
||||||
|
|
@ -1,23 +0,0 @@
|
||||||
language: node_js
|
|
||||||
sudo: required
|
|
||||||
node_js: stable
|
|
||||||
addons:
|
|
||||||
firefox: latest
|
|
||||||
apt:
|
|
||||||
sources:
|
|
||||||
- google-chrome
|
|
||||||
packages:
|
|
||||||
- google-chrome-stable
|
|
||||||
sauce_connect: true
|
|
||||||
before_script:
|
|
||||||
- npm install -g bower polylint web-component-tester
|
|
||||||
- bower install
|
|
||||||
- polylint
|
|
||||||
script:
|
|
||||||
- xvfb-run wct
|
|
||||||
- "if [ \"${TRAVIS_PULL_REQUEST}\" = \"false\" ]; then wct -s 'default'; fi"
|
|
||||||
env:
|
|
||||||
global:
|
|
||||||
- secure: AnPpB3uzTWU0hmrDmPyOb/3mJZRv4BgPFJrpaT/mQ/9979IBeFfFHJX6MqQlgo894lJWvKSvAjEutgK5Z3LQh6cLB3JuhPBInwKgFPUx/V14VIju+Z7jwx6RycE3flb2f9Y6y5My13ovswsTNnhJEkpDGlbRnJlh5c+HeP+6D0oFPFaGWvULZsAHQnEykir1TMPL2TD8SfuYWifmBj7QYQ2vsYnqZoAkPNedv/OtdoA3rziFXSG3GqXX2NJVnYqlaLj/HiHK7xLlZu/ODfo6En12DMtqJajBP7NfJkEUAF72ScOsYxlwiI1aYcVSUy6upkxxPwkBj5x7wDZ0tRFmlautyq2skDAh/fgIfRw9AMe8kj/YLef+T8bmZNT9IIelNaNcpfTQHpYWcOpPk2uBT3iIOcmp+Ys8RZKqzYmekBtHTwCGmQcfQrjBXjrjz5xlUaoMH7vauh7Ct7SkD7Fu87XSUvks4v2yypxxmHXO8jUilKuUdtAzb3dtOboO0ptsoLuBm/qSeURco4be6KPyVnDxdWdbYOxIZtE8JeY2DbonS45OgFtL1NKeEIhiTQIcOuSs0qwJFFzaBBAfek1tkTvBhMJP3JPWpIbNJhdZWzSd0LUSe892sbiZJY67FA4xcY8vK5JZNWnxFyKX1+A8ljPEd1yBImxMzUDMNS9t0G0=
|
|
||||||
- secure: jdh0G/FDRghnjasav0/8nOZsYgXUd5DLKgD5XrDCVrBvPwXly+AnMXE+Hr/bztEXylcEmcqrWUUfB1ODUdVn1EGk8CJaYpHyKcoMcpJiEjHYS/3i1rXRsnHs2o3dcRO69rA8A5LZeG3yYfiPVUiKlyl7MWOal3pNohDGi8dZcT0CoWnA8UaV//0uXG3GGG3X8KcbVfB2hQvG1mK6wM6W4eHVOplcBaE2xnnFDMxfU2KnRgjLSPw66PeJGczWOBR9fZql9p6kV38ZM2s4qnUsMlTZkNqn0f6CuEPqcG6+S6Tk9+0dvAHet+Ky9fgiyJPq+p6sDGfdm1ZJwOjz5MoyudzGSuHAJHH2nscQf8pUBQ1gxKaGg7GV9LUj0cjLDAFWA2KpxTlabDZhZPIMoMKFpqpvJG49gDVga5gGabom21nd/+E1i/2vvoP16kY9rjf+Gd5+tIzajXCu8Tq06Xz63idZDJbt38GjArfFFqe5k7CqE+m2vpWx/iTwe+cT70wnIq/xigvaNq6CgUuNdzkVnVBj/C7yVqwwZkfbBC7HhRna9Nyzts/j2M2vwy0oYB73WzuhpYSweaAOZq2kcUIQ5ZMGO3UkZRjwWnHxAi5mrvZhRcRIqkvJJhoMQnjwJSTah/3cz0cJh19DL+Ozde24/tuY+vOnhFb+ddo1OKD6FtM=
|
|
||||||
dist: trusty
|
|
||||||
|
|
@ -1,77 +0,0 @@
|
||||||
|
|
||||||
<!--
|
|
||||||
This file is autogenerated based on
|
|
||||||
https://github.com/PolymerElements/ContributionGuide/blob/master/CONTRIBUTING.md
|
|
||||||
|
|
||||||
If you edit that file, it will get updated everywhere else.
|
|
||||||
If you edit this file, your changes will get overridden :)
|
|
||||||
|
|
||||||
You can however override the jsbin link with one that's customized to this
|
|
||||||
specific element:
|
|
||||||
|
|
||||||
jsbin=https://jsbin.com/cagaye/edit?html,output
|
|
||||||
-->
|
|
||||||
# Polymer Elements
|
|
||||||
## Guide for Contributors
|
|
||||||
|
|
||||||
Polymer Elements are built in the open, and the Polymer authors eagerly encourage any and all forms of community contribution. When contributing, please follow these guidelines:
|
|
||||||
|
|
||||||
### Filing Issues
|
|
||||||
|
|
||||||
**If you are filing an issue to request a feature**, please provide a clear description of the feature. It can be helpful to describe answers to the following questions:
|
|
||||||
|
|
||||||
1. **Who will use the feature?** _“As someone filling out a form…”_
|
|
||||||
2. **When will they use the feature?** _“When I enter an invalid value…”_
|
|
||||||
3. **What is the user’s goal?** _“I want to be visually notified that the value needs to be corrected…”_
|
|
||||||
|
|
||||||
**If you are filing an issue to report a bug**, please provide:
|
|
||||||
|
|
||||||
1. **A clear description of the bug and related expectations.** Consider using the following example template for reporting a bug:
|
|
||||||
|
|
||||||
```markdown
|
|
||||||
The `paper-foo` element causes the page to turn pink when clicked.
|
|
||||||
|
|
||||||
## Expected outcome
|
|
||||||
|
|
||||||
The page stays the same color.
|
|
||||||
|
|
||||||
## Actual outcome
|
|
||||||
|
|
||||||
The page turns pink.
|
|
||||||
|
|
||||||
## Steps to reproduce
|
|
||||||
|
|
||||||
1. Put a `paper-foo` element in the page.
|
|
||||||
2. Open the page in a web browser.
|
|
||||||
3. Click the `paper-foo` element.
|
|
||||||
```
|
|
||||||
|
|
||||||
2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [https://jsbin.com/cagaye/edit?html,output](https://jsbin.com/cagaye/edit?html,output).
|
|
||||||
|
|
||||||
3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers.
|
|
||||||
|
|
||||||
### Submitting Pull Requests
|
|
||||||
|
|
||||||
**Before creating a pull request**, please ensure that an issue exists for the corresponding change in the pull request that you intend to make. **If an issue does not exist, please create one per the guidelines above**. The goal is to discuss the design and necessity of the proposed change with Polymer authors and community before diving into a pull request.
|
|
||||||
|
|
||||||
When submitting pull requests, please provide:
|
|
||||||
|
|
||||||
1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues in the pull request description using the following syntax:
|
|
||||||
|
|
||||||
```markdown
|
|
||||||
(For a single issue)
|
|
||||||
Fixes #20
|
|
||||||
|
|
||||||
(For multiple issues)
|
|
||||||
Fixes #32, fixes #40
|
|
||||||
```
|
|
||||||
|
|
||||||
2. **A succinct description of the design** used to fix any related issues. For example:
|
|
||||||
|
|
||||||
```markdown
|
|
||||||
This fixes #20 by removing styles that leaked which would cause the page to turn pink whenever `paper-foo` is clicked.
|
|
||||||
```
|
|
||||||
|
|
||||||
3. **At least one test for each bug fixed or feature added** as part of the pull request. Pull requests that fix bugs or add features without accompanying tests will not be considered.
|
|
||||||
|
|
||||||
If a proposed change contains multiple commits, please [squash commits](https://www.google.com/url?q=http://blog.steveklabnik.com/posts/2012-11-08-how-to-squash-commits-in-a-github-pull-request) to as few as is necessary to succinctly express the change. A Polymer author can help you squash commits, so don’t be afraid to ask us if you need help with that!
|
|
||||||
|
|
@ -1,95 +0,0 @@
|
||||||
<!--
|
|
||||||
@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
|
|
||||||
-->
|
|
||||||
|
|
||||||
<link rel="import" href="../../polymer/polymer.html">
|
|
||||||
<link rel="import" href="../neon-animation-behavior.html">
|
|
||||||
<link rel="import" href="../web-animations.html">
|
|
||||||
|
|
||||||
<!--
|
|
||||||
`<cascaded-animation>` applies an animation on an array of elements with a delay between each.
|
|
||||||
the delay defaults to 50ms.
|
|
||||||
|
|
||||||
Configuration:
|
|
||||||
```
|
|
||||||
{
|
|
||||||
name: 'cascaded-animation',
|
|
||||||
animation: <animation-name>,
|
|
||||||
nodes: <array-of-nodes>,
|
|
||||||
nodeDelay: <node-delay-in-ms>,
|
|
||||||
timing: <animation-timing>
|
|
||||||
}
|
|
||||||
```
|
|
||||||
-->
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
Polymer({
|
|
||||||
|
|
||||||
is: 'cascaded-animation',
|
|
||||||
|
|
||||||
behaviors: [
|
|
||||||
Polymer.NeonAnimationBehavior
|
|
||||||
],
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @param {{
|
|
||||||
* animation: string,
|
|
||||||
* nodes: !Array<!Element>,
|
|
||||||
* nodeDelay: (number|undefined),
|
|
||||||
* timing: (Object|undefined)
|
|
||||||
* }} config
|
|
||||||
*/
|
|
||||||
configure: function(config) {
|
|
||||||
this._animations = [];
|
|
||||||
var nodes = config.nodes;
|
|
||||||
var effects = [];
|
|
||||||
var nodeDelay = config.nodeDelay || 50;
|
|
||||||
|
|
||||||
config.timing = config.timing || {};
|
|
||||||
config.timing.delay = config.timing.delay || 0;
|
|
||||||
|
|
||||||
var oldDelay = config.timing.delay;
|
|
||||||
var abortedConfigure;
|
|
||||||
for (var node, index = 0; node = nodes[index]; index++) {
|
|
||||||
config.timing.delay += nodeDelay;
|
|
||||||
config.node = node;
|
|
||||||
|
|
||||||
var animation = document.createElement(config.animation);
|
|
||||||
if (animation.isNeonAnimation) {
|
|
||||||
var effect = animation.configure(config);
|
|
||||||
|
|
||||||
this._animations.push(animation);
|
|
||||||
effects.push(effect);
|
|
||||||
} else {
|
|
||||||
console.warn(this.is + ':', config.animation, 'not found!');
|
|
||||||
abortedConfigure = true;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
config.timing.delay = oldDelay;
|
|
||||||
config.node = null;
|
|
||||||
// if a bad animation was configured, abort config.
|
|
||||||
if (abortedConfigure) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
this._effect = new GroupEffect(effects);
|
|
||||||
return this._effect;
|
|
||||||
},
|
|
||||||
|
|
||||||
complete: function() {
|
|
||||||
for (var animation, index = 0; animation = this._animations[index]; index++) {
|
|
||||||
animation.complete(animation.config);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,49 +0,0 @@
|
||||||
<!--
|
|
||||||
@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
|
|
||||||
-->
|
|
||||||
|
|
||||||
<link rel="import" href="../../polymer/polymer.html">
|
|
||||||
<link rel="import" href="../neon-animation-behavior.html">
|
|
||||||
<link rel="import" href="../web-animations.html">
|
|
||||||
|
|
||||||
<!--
|
|
||||||
`<fade-in-animation>` animates the opacity of an element from 0 to 1.
|
|
||||||
|
|
||||||
Configuration:
|
|
||||||
```
|
|
||||||
{
|
|
||||||
name: 'fade-in-animation',
|
|
||||||
node: <node>
|
|
||||||
timing: <animation-timing>
|
|
||||||
}
|
|
||||||
```
|
|
||||||
-->
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
Polymer({
|
|
||||||
|
|
||||||
is: 'fade-in-animation',
|
|
||||||
|
|
||||||
behaviors: [
|
|
||||||
Polymer.NeonAnimationBehavior
|
|
||||||
],
|
|
||||||
|
|
||||||
configure: function(config) {
|
|
||||||
var node = config.node;
|
|
||||||
this._effect = new KeyframeEffect(node, [
|
|
||||||
{'opacity': '0'},
|
|
||||||
{'opacity': '1'}
|
|
||||||
], this.timingFromConfig(config));
|
|
||||||
return this._effect;
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,49 +0,0 @@
|
||||||
<!--
|
|
||||||
@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
|
|
||||||
-->
|
|
||||||
|
|
||||||
<link rel="import" href="../../polymer/polymer.html">
|
|
||||||
<link rel="import" href="../neon-animation-behavior.html">
|
|
||||||
<link rel="import" href="../web-animations.html">
|
|
||||||
|
|
||||||
<!--
|
|
||||||
`<fade-out-animation>` animates the opacity of an element from 1 to 0.
|
|
||||||
|
|
||||||
Configuration:
|
|
||||||
```
|
|
||||||
{
|
|
||||||
name: 'fade-out-animation',
|
|
||||||
node: <node>
|
|
||||||
timing: <animation-timing>
|
|
||||||
}
|
|
||||||
```
|
|
||||||
-->
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
Polymer({
|
|
||||||
|
|
||||||
is: 'fade-out-animation',
|
|
||||||
|
|
||||||
behaviors: [
|
|
||||||
Polymer.NeonAnimationBehavior
|
|
||||||
],
|
|
||||||
|
|
||||||
configure: function(config) {
|
|
||||||
var node = config.node;
|
|
||||||
this._effect = new KeyframeEffect(node, [
|
|
||||||
{'opacity': '1'},
|
|
||||||
{'opacity': '0'}
|
|
||||||
], this.timingFromConfig(config));
|
|
||||||
return this._effect;
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,83 +0,0 @@
|
||||||
<!--
|
|
||||||
@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
|
|
||||||
-->
|
|
||||||
|
|
||||||
<link rel="import" href="../../polymer/polymer.html">
|
|
||||||
<link rel="import" href="../neon-shared-element-animation-behavior.html">
|
|
||||||
<link rel="import" href="../web-animations.html">
|
|
||||||
|
|
||||||
<!--
|
|
||||||
`<hero-animation>` is a shared element animation that scales and transform an element such that it
|
|
||||||
appears to be shared between two pages. Use this in `<neon-animated-pages>`. The source page
|
|
||||||
should use this animation in an 'exit' animation and set the `fromPage` configuration property to
|
|
||||||
itself, and the destination page should use this animation in an `entry` animation and set the
|
|
||||||
`toPage` configuration property to itself. They should also define the hero elements in the
|
|
||||||
`sharedElements` property (not a configuration property, see
|
|
||||||
`Polymer.NeonSharedElementAnimatableBehavior`).
|
|
||||||
|
|
||||||
Configuration:
|
|
||||||
```
|
|
||||||
{
|
|
||||||
name: 'hero-animation',
|
|
||||||
id: <shared-element-id>,
|
|
||||||
timing: <animation-timing>,
|
|
||||||
toPage: <node>, /* define for the destination page */
|
|
||||||
fromPage: <node>, /* define for the source page */
|
|
||||||
}
|
|
||||||
```
|
|
||||||
-->
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
Polymer({
|
|
||||||
|
|
||||||
is: 'hero-animation',
|
|
||||||
|
|
||||||
behaviors: [
|
|
||||||
Polymer.NeonSharedElementAnimationBehavior
|
|
||||||
],
|
|
||||||
|
|
||||||
configure: function(config) {
|
|
||||||
var shared = this.findSharedElements(config);
|
|
||||||
if (!shared) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
var fromRect = shared.from.getBoundingClientRect();
|
|
||||||
var toRect = shared.to.getBoundingClientRect();
|
|
||||||
|
|
||||||
var deltaLeft = fromRect.left - toRect.left;
|
|
||||||
var deltaTop = fromRect.top - toRect.top;
|
|
||||||
var deltaWidth = fromRect.width / toRect.width;
|
|
||||||
var deltaHeight = fromRect.height / toRect.height;
|
|
||||||
|
|
||||||
this._effect = new KeyframeEffect(shared.to, [
|
|
||||||
{'transform': 'translate(' + deltaLeft + 'px,' + deltaTop + 'px) scale(' + deltaWidth + ',' + deltaHeight + ')'},
|
|
||||||
{'transform': 'none'}
|
|
||||||
], this.timingFromConfig(config));
|
|
||||||
|
|
||||||
this.setPrefixedProperty(shared.to, 'transformOrigin', '0 0');
|
|
||||||
shared.to.style.zIndex = 10000;
|
|
||||||
shared.from.style.visibility = 'hidden';
|
|
||||||
|
|
||||||
return this._effect;
|
|
||||||
},
|
|
||||||
|
|
||||||
complete: function(config) {
|
|
||||||
var shared = this.findSharedElements(config);
|
|
||||||
if (!shared) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
shared.to.style.zIndex = '';
|
|
||||||
shared.from.style.visibility = '';
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,46 +0,0 @@
|
||||||
<!--
|
|
||||||
@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
|
|
||||||
-->
|
|
||||||
|
|
||||||
<link rel="import" href="../../polymer/polymer.html">
|
|
||||||
<link rel="import" href="../neon-animation-behavior.html">
|
|
||||||
<link rel="import" href="../web-animations.html">
|
|
||||||
|
|
||||||
<!--
|
|
||||||
`<opaque-animation>` makes an element `opacity:1` for the duration of the animation. Used to prevent
|
|
||||||
webkit/safari from drawing a frame before an animation for elements that animate from display:none.
|
|
||||||
-->
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
Polymer({
|
|
||||||
|
|
||||||
is: 'opaque-animation',
|
|
||||||
|
|
||||||
behaviors: [
|
|
||||||
Polymer.NeonAnimationBehavior
|
|
||||||
],
|
|
||||||
|
|
||||||
configure: function(config) {
|
|
||||||
var node = config.node;
|
|
||||||
this._effect = new KeyframeEffect(node, [
|
|
||||||
{'opacity': '1'},
|
|
||||||
{'opacity': '1'}
|
|
||||||
], this.timingFromConfig(config));
|
|
||||||
node.style.opacity = '0';
|
|
||||||
return this._effect;
|
|
||||||
},
|
|
||||||
|
|
||||||
complete: function(config) {
|
|
||||||
config.node.style.opacity = '';
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,87 +0,0 @@
|
||||||
<!--
|
|
||||||
@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
|
|
||||||
-->
|
|
||||||
|
|
||||||
<link rel="import" href="../../polymer/polymer.html">
|
|
||||||
<link rel="import" href="../neon-shared-element-animation-behavior.html">
|
|
||||||
<link rel="import" href="../web-animations.html">
|
|
||||||
|
|
||||||
<!--
|
|
||||||
`<reverse-ripple-animation>` scales and transform an element such that it appears to ripple down from this element, to either
|
|
||||||
a shared element, or a screen position.
|
|
||||||
|
|
||||||
If using as a shared element animation in `<neon-animated-pages>`, use this animation in an `exit`
|
|
||||||
animation in the source page and in an `entry` animation in the destination page. Also, define the
|
|
||||||
reverse-ripple elements in the `sharedElements` property (not a configuration property, see
|
|
||||||
`Polymer.NeonSharedElementAnimatableBehavior`).
|
|
||||||
If using a screen position, define the `gesture` property.
|
|
||||||
Configuration:
|
|
||||||
```
|
|
||||||
{
|
|
||||||
name: 'reverse-ripple-animation`.
|
|
||||||
id: <shared-element-id>, /* set this or gesture */
|
|
||||||
gesture: {x: <page-x>, y: <page-y>}, /* set this or id */
|
|
||||||
timing: <animation-timing>,
|
|
||||||
toPage: <node>, /* define for the destination page */
|
|
||||||
fromPage: <node>, /* define for the source page */
|
|
||||||
}
|
|
||||||
```
|
|
||||||
-->
|
|
||||||
|
|
||||||
<script>
|
|
||||||
Polymer({
|
|
||||||
is: 'reverse-ripple-animation',
|
|
||||||
|
|
||||||
behaviors: [
|
|
||||||
Polymer.NeonSharedElementAnimationBehavior
|
|
||||||
],
|
|
||||||
|
|
||||||
configure: function(config) {
|
|
||||||
var shared = this.findSharedElements(config);
|
|
||||||
if (!shared) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
var translateX, translateY;
|
|
||||||
var fromRect = shared.from.getBoundingClientRect();
|
|
||||||
if (config.gesture) {
|
|
||||||
translateX = config.gesture.x - (fromRect.left + (fromRect.width / 2));
|
|
||||||
translateY = config.gesture.y - (fromRect.top + (fromRect.height / 2));
|
|
||||||
} else {
|
|
||||||
var toRect = shared.to.getBoundingClientRect();
|
|
||||||
translateX = (toRect.left + (toRect.width / 2)) - (fromRect.left + (fromRect.width / 2));
|
|
||||||
translateY = (toRect.top + (toRect.height / 2)) - (fromRect.top + (fromRect.height / 2));
|
|
||||||
}
|
|
||||||
var translate = 'translate(' + translateX + 'px,' + translateY + 'px)';
|
|
||||||
|
|
||||||
var size = Math.max(fromRect.width + Math.abs(translateX) * 2, fromRect.height + Math.abs(translateY) * 2);
|
|
||||||
var diameter = Math.sqrt(2 * size * size);
|
|
||||||
var scaleX = diameter / fromRect.width;
|
|
||||||
var scaleY = diameter / fromRect.height;
|
|
||||||
var scale = 'scale(' + scaleX + ',' + scaleY + ')';
|
|
||||||
|
|
||||||
this._effect = new KeyframeEffect(shared.from, [
|
|
||||||
{'transform': translate + ' ' + scale},
|
|
||||||
{'transform': translate + ' scale(0)'}
|
|
||||||
], this.timingFromConfig(config));
|
|
||||||
|
|
||||||
this.setPrefixedProperty(shared.from, 'transformOrigin', '50% 50%');
|
|
||||||
shared.from.style.borderRadius = '50%';
|
|
||||||
|
|
||||||
return this._effect;
|
|
||||||
},
|
|
||||||
|
|
||||||
complete: function() {
|
|
||||||
if (this.sharedElements) {
|
|
||||||
this.setPrefixedProperty(this.sharedElements.from, 'transformOrigin', '');
|
|
||||||
this.sharedElements.from.style.borderRadius = '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,93 +0,0 @@
|
||||||
<!--
|
|
||||||
@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
|
|
||||||
-->
|
|
||||||
|
|
||||||
<link rel="import" href="../../polymer/polymer.html">
|
|
||||||
<link rel="import" href="../neon-shared-element-animation-behavior.html">
|
|
||||||
<link rel="import" href="../web-animations.html">
|
|
||||||
|
|
||||||
<!--
|
|
||||||
`<ripple-animation>` scales and transform an element such that it appears to ripple from either
|
|
||||||
a shared element, or from a screen position, to full screen.
|
|
||||||
|
|
||||||
If using as a shared element animation in `<neon-animated-pages>`, use this animation in an `exit`
|
|
||||||
animation in the source page and in an `entry` animation in the destination page. Also, define the
|
|
||||||
hero elements in the `sharedElements` property (not a configuration property, see
|
|
||||||
`Polymer.NeonSharedElementAnimatableBehavior`).
|
|
||||||
|
|
||||||
If using a screen position, define the `gesture` property.
|
|
||||||
|
|
||||||
Configuration:
|
|
||||||
```
|
|
||||||
{
|
|
||||||
name: 'ripple-animation`.
|
|
||||||
id: <shared-element-id>, /* set this or gesture */
|
|
||||||
gesture: {x: <page-x>, y: <page-y>}, /* set this or id */
|
|
||||||
timing: <animation-timing>,
|
|
||||||
toPage: <node>, /* define for the destination page */
|
|
||||||
fromPage: <node>, /* define for the source page */
|
|
||||||
}
|
|
||||||
```
|
|
||||||
-->
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
Polymer({
|
|
||||||
|
|
||||||
is: 'ripple-animation',
|
|
||||||
|
|
||||||
behaviors: [
|
|
||||||
Polymer.NeonSharedElementAnimationBehavior
|
|
||||||
],
|
|
||||||
|
|
||||||
configure: function(config) {
|
|
||||||
var shared = this.findSharedElements(config);
|
|
||||||
if (!shared) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
var translateX, translateY;
|
|
||||||
var toRect = shared.to.getBoundingClientRect();
|
|
||||||
if (config.gesture) {
|
|
||||||
translateX = config.gesture.x - (toRect.left + (toRect.width / 2));
|
|
||||||
translateY = config.gesture.y - (toRect.top + (toRect.height / 2));
|
|
||||||
} else {
|
|
||||||
var fromRect = shared.from.getBoundingClientRect();
|
|
||||||
translateX = (fromRect.left + (fromRect.width / 2)) - (toRect.left + (toRect.width / 2));
|
|
||||||
translateY = (fromRect.top + (fromRect.height / 2)) - (toRect.top + (toRect.height / 2));
|
|
||||||
}
|
|
||||||
var translate = 'translate(' + translateX + 'px,' + translateY + 'px)';
|
|
||||||
|
|
||||||
var size = Math.max(toRect.width + Math.abs(translateX) * 2, toRect.height + Math.abs(translateY) * 2);
|
|
||||||
var diameter = Math.sqrt(2 * size * size);
|
|
||||||
var scaleX = diameter / toRect.width;
|
|
||||||
var scaleY = diameter / toRect.height;
|
|
||||||
var scale = 'scale(' + scaleX + ',' + scaleY + ')';
|
|
||||||
|
|
||||||
this._effect = new KeyframeEffect(shared.to, [
|
|
||||||
{'transform': translate + ' scale(0)'},
|
|
||||||
{'transform': translate + ' ' + scale}
|
|
||||||
], this.timingFromConfig(config));
|
|
||||||
|
|
||||||
this.setPrefixedProperty(shared.to, 'transformOrigin', '50% 50%');
|
|
||||||
shared.to.style.borderRadius = '50%';
|
|
||||||
|
|
||||||
return this._effect;
|
|
||||||
},
|
|
||||||
|
|
||||||
complete: function() {
|
|
||||||
if (this.sharedElements) {
|
|
||||||
this.setPrefixedProperty(this.sharedElements.to, 'transformOrigin', '');
|
|
||||||
this.sharedElements.to.style.borderRadius = '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,65 +0,0 @@
|
||||||
<!--
|
|
||||||
@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
|
|
||||||
-->
|
|
||||||
|
|
||||||
<link rel="import" href="../../polymer/polymer.html">
|
|
||||||
<link rel="import" href="../neon-animation-behavior.html">
|
|
||||||
<link rel="import" href="../web-animations.html">
|
|
||||||
|
|
||||||
<!--
|
|
||||||
`<scale-down-animation>` animates the scale transform of an element from 1 to 0. By default it
|
|
||||||
scales in both the x and y axes.
|
|
||||||
|
|
||||||
Configuration:
|
|
||||||
```
|
|
||||||
{
|
|
||||||
name: 'scale-down-animation',
|
|
||||||
node: <node>,
|
|
||||||
axis: 'x' | 'y' | '',
|
|
||||||
transformOrigin: <transform-origin>,
|
|
||||||
timing: <animation-timing>
|
|
||||||
}
|
|
||||||
```
|
|
||||||
-->
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
Polymer({
|
|
||||||
|
|
||||||
is: 'scale-down-animation',
|
|
||||||
|
|
||||||
behaviors: [
|
|
||||||
Polymer.NeonAnimationBehavior
|
|
||||||
],
|
|
||||||
|
|
||||||
configure: function(config) {
|
|
||||||
var node = config.node;
|
|
||||||
|
|
||||||
var scaleProperty = 'scale(0, 0)';
|
|
||||||
if (config.axis === 'x') {
|
|
||||||
scaleProperty = 'scale(0, 1)';
|
|
||||||
} else if (config.axis === 'y') {
|
|
||||||
scaleProperty = 'scale(1, 0)';
|
|
||||||
}
|
|
||||||
|
|
||||||
this._effect = new KeyframeEffect(node, [
|
|
||||||
{'transform': 'scale(1,1)'},
|
|
||||||
{'transform': scaleProperty}
|
|
||||||
], this.timingFromConfig(config));
|
|
||||||
|
|
||||||
if (config.transformOrigin) {
|
|
||||||
this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
|
|
||||||
}
|
|
||||||
|
|
||||||
return this._effect;
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,65 +0,0 @@
|
||||||
<!--
|
|
||||||
@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
|
|
||||||
-->
|
|
||||||
|
|
||||||
<link rel="import" href="../../polymer/polymer.html">
|
|
||||||
<link rel="import" href="../neon-animation-behavior.html">
|
|
||||||
<link rel="import" href="../web-animations.html">
|
|
||||||
|
|
||||||
<!--
|
|
||||||
`<scale-up-animation>` animates the scale transform of an element from 0 to 1. By default it
|
|
||||||
scales in both the x and y axes.
|
|
||||||
|
|
||||||
Configuration:
|
|
||||||
```
|
|
||||||
{
|
|
||||||
name: 'scale-up-animation',
|
|
||||||
node: <node>,
|
|
||||||
axis: 'x' | 'y' | '',
|
|
||||||
transformOrigin: <transform-origin>,
|
|
||||||
timing: <animation-timing>
|
|
||||||
}
|
|
||||||
```
|
|
||||||
-->
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
Polymer({
|
|
||||||
|
|
||||||
is: 'scale-up-animation',
|
|
||||||
|
|
||||||
behaviors: [
|
|
||||||
Polymer.NeonAnimationBehavior
|
|
||||||
],
|
|
||||||
|
|
||||||
configure: function(config) {
|
|
||||||
var node = config.node;
|
|
||||||
|
|
||||||
var scaleProperty = 'scale(0)';
|
|
||||||
if (config.axis === 'x') {
|
|
||||||
scaleProperty = 'scale(0, 1)';
|
|
||||||
} else if (config.axis === 'y') {
|
|
||||||
scaleProperty = 'scale(1, 0)';
|
|
||||||
}
|
|
||||||
|
|
||||||
this._effect = new KeyframeEffect(node, [
|
|
||||||
{'transform': scaleProperty},
|
|
||||||
{'transform': 'scale(1, 1)'}
|
|
||||||
], this.timingFromConfig(config));
|
|
||||||
|
|
||||||
if (config.transformOrigin) {
|
|
||||||
this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
|
|
||||||
}
|
|
||||||
|
|
||||||
return this._effect;
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,59 +0,0 @@
|
||||||
<!--
|
|
||||||
@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
|
|
||||||
-->
|
|
||||||
|
|
||||||
<link rel="import" href="../../polymer/polymer.html">
|
|
||||||
<link rel="import" href="../neon-animation-behavior.html">
|
|
||||||
<link rel="import" href="../web-animations.html">
|
|
||||||
|
|
||||||
<!--
|
|
||||||
`<slide-down-animation>` animates the transform of an element from `none` `translateY(100%)`.
|
|
||||||
The `transformOrigin` defaults to `50% 0`.
|
|
||||||
|
|
||||||
Configuration:
|
|
||||||
```
|
|
||||||
{
|
|
||||||
name: 'slide-down-animation',
|
|
||||||
node: <node>,
|
|
||||||
transformOrigin: <transform-origin>,
|
|
||||||
timing: <animation-timing>
|
|
||||||
}
|
|
||||||
```
|
|
||||||
-->
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
Polymer({
|
|
||||||
|
|
||||||
is: 'slide-down-animation',
|
|
||||||
|
|
||||||
behaviors: [
|
|
||||||
Polymer.NeonAnimationBehavior
|
|
||||||
],
|
|
||||||
|
|
||||||
configure: function(config) {
|
|
||||||
var node = config.node;
|
|
||||||
|
|
||||||
this._effect = new KeyframeEffect(node, [
|
|
||||||
{'transform': 'translateY(0%)'},
|
|
||||||
{'transform': 'translateY(100%)'}
|
|
||||||
], this.timingFromConfig(config));
|
|
||||||
|
|
||||||
if (config.transformOrigin) {
|
|
||||||
this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
|
|
||||||
} else {
|
|
||||||
this.setPrefixedProperty(node, 'transformOrigin', '50% 0');
|
|
||||||
}
|
|
||||||
|
|
||||||
return this._effect;
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,59 +0,0 @@
|
||||||
<!--
|
|
||||||
@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
|
|
||||||
-->
|
|
||||||
|
|
||||||
<link rel="import" href="../../polymer/polymer.html">
|
|
||||||
<link rel="import" href="../neon-animation-behavior.html">
|
|
||||||
<link rel="import" href="../web-animations.html">
|
|
||||||
|
|
||||||
<!--
|
|
||||||
`<slide-from-bottom-animation>` animates the transform of an element from `none` to `translateY(100%)`.
|
|
||||||
The `transformOrigin` defaults to `50% 0`.
|
|
||||||
|
|
||||||
Configuration:
|
|
||||||
```
|
|
||||||
{
|
|
||||||
name: 'slide-from-bottom-animation',
|
|
||||||
node: <node>,
|
|
||||||
transformOrigin: <transform-origin>,
|
|
||||||
timing: <animation-timing>
|
|
||||||
}
|
|
||||||
```
|
|
||||||
-->
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
Polymer({
|
|
||||||
|
|
||||||
is: 'slide-from-bottom-animation',
|
|
||||||
|
|
||||||
behaviors: [
|
|
||||||
Polymer.NeonAnimationBehavior
|
|
||||||
],
|
|
||||||
|
|
||||||
configure: function(config) {
|
|
||||||
var node = config.node;
|
|
||||||
|
|
||||||
this._effect = new KeyframeEffect(node, [
|
|
||||||
{'transform': 'translateY(100%)'},
|
|
||||||
{'transform': 'translateY(0)'}
|
|
||||||
], this.timingFromConfig(config));
|
|
||||||
|
|
||||||
if (config.transformOrigin) {
|
|
||||||
this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
|
|
||||||
} else {
|
|
||||||
this.setPrefixedProperty(node, 'transformOrigin', '50% 0');
|
|
||||||
}
|
|
||||||
|
|
||||||
return this._effect;
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,60 +0,0 @@
|
||||||
<!--
|
|
||||||
@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
|
|
||||||
-->
|
|
||||||
|
|
||||||
<link rel="import" href="../../polymer/polymer.html">
|
|
||||||
<link rel="import" href="../neon-animation-behavior.html">
|
|
||||||
<link rel="import" href="../web-animations.html">
|
|
||||||
|
|
||||||
<!--
|
|
||||||
`<slide-from-left-animation>` animates the transform of an element from
|
|
||||||
`translateX(-100%)` to `none`.
|
|
||||||
The `transformOrigin` defaults to `0 50%`.
|
|
||||||
|
|
||||||
Configuration:
|
|
||||||
```
|
|
||||||
{
|
|
||||||
name: 'slide-from-left-animation',
|
|
||||||
node: <node>,
|
|
||||||
transformOrigin: <transform-origin>,
|
|
||||||
timing: <animation-timing>
|
|
||||||
}
|
|
||||||
```
|
|
||||||
-->
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
Polymer({
|
|
||||||
|
|
||||||
is: 'slide-from-left-animation',
|
|
||||||
|
|
||||||
behaviors: [
|
|
||||||
Polymer.NeonAnimationBehavior
|
|
||||||
],
|
|
||||||
|
|
||||||
configure: function(config) {
|
|
||||||
var node = config.node;
|
|
||||||
|
|
||||||
this._effect = new KeyframeEffect(node, [
|
|
||||||
{'transform': 'translateX(-100%)'},
|
|
||||||
{'transform': 'none'}
|
|
||||||
], this.timingFromConfig(config));
|
|
||||||
|
|
||||||
if (config.transformOrigin) {
|
|
||||||
this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
|
|
||||||
} else {
|
|
||||||
this.setPrefixedProperty(node, 'transformOrigin', '0 50%');
|
|
||||||
}
|
|
||||||
|
|
||||||
return this._effect;
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,60 +0,0 @@
|
||||||
<!--
|
|
||||||
@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
|
|
||||||
-->
|
|
||||||
|
|
||||||
<link rel="import" href="../../polymer/polymer.html">
|
|
||||||
<link rel="import" href="../neon-animation-behavior.html">
|
|
||||||
<link rel="import" href="../web-animations.html">
|
|
||||||
|
|
||||||
<!--
|
|
||||||
`<slide-from-right-animation>` animates the transform of an element from
|
|
||||||
`translateX(100%)` to `none`.
|
|
||||||
The `transformOrigin` defaults to `0 50%`.
|
|
||||||
|
|
||||||
Configuration:
|
|
||||||
```
|
|
||||||
{
|
|
||||||
name: 'slide-from-right-animation',
|
|
||||||
node: <node>,
|
|
||||||
transformOrigin: <transform-origin>,
|
|
||||||
timing: <animation-timing>
|
|
||||||
}
|
|
||||||
```
|
|
||||||
-->
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
Polymer({
|
|
||||||
|
|
||||||
is: 'slide-from-right-animation',
|
|
||||||
|
|
||||||
behaviors: [
|
|
||||||
Polymer.NeonAnimationBehavior
|
|
||||||
],
|
|
||||||
|
|
||||||
configure: function(config) {
|
|
||||||
var node = config.node;
|
|
||||||
|
|
||||||
this._effect = new KeyframeEffect(node, [
|
|
||||||
{'transform': 'translateX(100%)'},
|
|
||||||
{'transform': 'none'}
|
|
||||||
], this.timingFromConfig(config));
|
|
||||||
|
|
||||||
if (config.transformOrigin) {
|
|
||||||
this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
|
|
||||||
} else {
|
|
||||||
this.setPrefixedProperty(node, 'transformOrigin', '0 50%');
|
|
||||||
}
|
|
||||||
|
|
||||||
return this._effect;
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,59 +0,0 @@
|
||||||
<!--
|
|
||||||
@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
|
|
||||||
-->
|
|
||||||
|
|
||||||
<link rel="import" href="../../polymer/polymer.html">
|
|
||||||
<link rel="import" href="../neon-animation-behavior.html">
|
|
||||||
<link rel="import" href="../web-animations.html">
|
|
||||||
|
|
||||||
<!--
|
|
||||||
`<slide-from-top-animation>` animates the transform of an element from `translateY(-100%)` to
|
|
||||||
`none`. The `transformOrigin` defaults to `50% 0`.
|
|
||||||
|
|
||||||
Configuration:
|
|
||||||
```
|
|
||||||
{
|
|
||||||
name: 'slide-from-top-animation',
|
|
||||||
node: <node>,
|
|
||||||
transformOrigin: <transform-origin>,
|
|
||||||
timing: <animation-timing>
|
|
||||||
}
|
|
||||||
```
|
|
||||||
-->
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
Polymer({
|
|
||||||
|
|
||||||
is: 'slide-from-top-animation',
|
|
||||||
|
|
||||||
behaviors: [
|
|
||||||
Polymer.NeonAnimationBehavior
|
|
||||||
],
|
|
||||||
|
|
||||||
configure: function(config) {
|
|
||||||
var node = config.node;
|
|
||||||
|
|
||||||
this._effect = new KeyframeEffect(node, [
|
|
||||||
{'transform': 'translateY(-100%)'},
|
|
||||||
{'transform': 'translateY(0%)'}
|
|
||||||
], this.timingFromConfig(config));
|
|
||||||
|
|
||||||
if (config.transformOrigin) {
|
|
||||||
this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
|
|
||||||
} else {
|
|
||||||
this.setPrefixedProperty(node, 'transformOrigin', '50% 0');
|
|
||||||
}
|
|
||||||
|
|
||||||
return this._effect;
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,59 +0,0 @@
|
||||||
<!--
|
|
||||||
@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
|
|
||||||
-->
|
|
||||||
|
|
||||||
<link rel="import" href="../../polymer/polymer.html">
|
|
||||||
<link rel="import" href="../neon-animation-behavior.html">
|
|
||||||
<link rel="import" href="../web-animations.html">
|
|
||||||
|
|
||||||
<!--
|
|
||||||
`<slide-left-animation>` animates the transform of an element from `none` to `translateX(-100%)`.
|
|
||||||
The `transformOrigin` defaults to `0 50%`.
|
|
||||||
|
|
||||||
Configuration:
|
|
||||||
```
|
|
||||||
{
|
|
||||||
name: 'slide-left-animation',
|
|
||||||
node: <node>,
|
|
||||||
transformOrigin: <transform-origin>,
|
|
||||||
timing: <animation-timing>
|
|
||||||
}
|
|
||||||
```
|
|
||||||
-->
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
Polymer({
|
|
||||||
|
|
||||||
is: 'slide-left-animation',
|
|
||||||
|
|
||||||
behaviors: [
|
|
||||||
Polymer.NeonAnimationBehavior
|
|
||||||
],
|
|
||||||
|
|
||||||
configure: function(config) {
|
|
||||||
var node = config.node;
|
|
||||||
|
|
||||||
this._effect = new KeyframeEffect(node, [
|
|
||||||
{'transform': 'none'},
|
|
||||||
{'transform': 'translateX(-100%)'}
|
|
||||||
], this.timingFromConfig(config));
|
|
||||||
|
|
||||||
if (config.transformOrigin) {
|
|
||||||
this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
|
|
||||||
} else {
|
|
||||||
this.setPrefixedProperty(node, 'transformOrigin', '0 50%');
|
|
||||||
}
|
|
||||||
|
|
||||||
return this._effect;
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,59 +0,0 @@
|
||||||
<!--
|
|
||||||
@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
|
|
||||||
-->
|
|
||||||
|
|
||||||
<link rel="import" href="../../polymer/polymer.html">
|
|
||||||
<link rel="import" href="../neon-animation-behavior.html">
|
|
||||||
<link rel="import" href="../web-animations.html">
|
|
||||||
|
|
||||||
<!--
|
|
||||||
`<slide-right-animation>` animates the transform of an element from `none` to `translateX(100%)`.
|
|
||||||
The `transformOrigin` defaults to `0 50%`.
|
|
||||||
|
|
||||||
Configuration:
|
|
||||||
```
|
|
||||||
{
|
|
||||||
name: 'slide-right-animation',
|
|
||||||
node: <node>,
|
|
||||||
transformOrigin: <transform-origin>,
|
|
||||||
timing: <animation-timing>
|
|
||||||
}
|
|
||||||
```
|
|
||||||
-->
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
Polymer({
|
|
||||||
|
|
||||||
is: 'slide-right-animation',
|
|
||||||
|
|
||||||
behaviors: [
|
|
||||||
Polymer.NeonAnimationBehavior
|
|
||||||
],
|
|
||||||
|
|
||||||
configure: function(config) {
|
|
||||||
var node = config.node;
|
|
||||||
|
|
||||||
this._effect = new KeyframeEffect(node, [
|
|
||||||
{'transform': 'none'},
|
|
||||||
{'transform': 'translateX(100%)'}
|
|
||||||
], this.timingFromConfig(config));
|
|
||||||
|
|
||||||
if (config.transformOrigin) {
|
|
||||||
this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
|
|
||||||
} else {
|
|
||||||
this.setPrefixedProperty(node, 'transformOrigin', '0 50%');
|
|
||||||
}
|
|
||||||
|
|
||||||
return this._effect;
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,59 +0,0 @@
|
||||||
<!--
|
|
||||||
@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
|
|
||||||
-->
|
|
||||||
|
|
||||||
<link rel="import" href="../../polymer/polymer.html">
|
|
||||||
<link rel="import" href="../neon-animation-behavior.html">
|
|
||||||
<link rel="import" href="../web-animations.html">
|
|
||||||
|
|
||||||
<!--
|
|
||||||
`<slide-up-animation>` animates the transform of an element from `translateY(0)` to
|
|
||||||
`translateY(-100%)`. The `transformOrigin` defaults to `50% 0`.
|
|
||||||
|
|
||||||
Configuration:
|
|
||||||
```
|
|
||||||
{
|
|
||||||
name: 'slide-up-animation',
|
|
||||||
node: <node>,
|
|
||||||
transformOrigin: <transform-origin>,
|
|
||||||
timing: <animation-timing>
|
|
||||||
}
|
|
||||||
```
|
|
||||||
-->
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
Polymer({
|
|
||||||
|
|
||||||
is: 'slide-up-animation',
|
|
||||||
|
|
||||||
behaviors: [
|
|
||||||
Polymer.NeonAnimationBehavior
|
|
||||||
],
|
|
||||||
|
|
||||||
configure: function(config) {
|
|
||||||
var node = config.node;
|
|
||||||
|
|
||||||
this._effect = new KeyframeEffect(node, [
|
|
||||||
{'transform': 'translate(0)'},
|
|
||||||
{'transform': 'translateY(-100%)'}
|
|
||||||
], this.timingFromConfig(config));
|
|
||||||
|
|
||||||
if (config.transformOrigin) {
|
|
||||||
this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
|
|
||||||
} else {
|
|
||||||
this.setPrefixedProperty(node, 'transformOrigin', '50% 0');
|
|
||||||
}
|
|
||||||
|
|
||||||
return this._effect;
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,70 +0,0 @@
|
||||||
<!--
|
|
||||||
@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
|
|
||||||
-->
|
|
||||||
|
|
||||||
<link rel="import" href="../../polymer/polymer.html">
|
|
||||||
<link rel="import" href="../neon-animation-behavior.html">
|
|
||||||
<link rel="import" href="../web-animations.html">
|
|
||||||
|
|
||||||
<!--
|
|
||||||
`<transform-animation>` animates a custom transform on an element. Use this to animate multiple
|
|
||||||
transform properties, or to apply a custom transform value.
|
|
||||||
|
|
||||||
Configuration:
|
|
||||||
```
|
|
||||||
{
|
|
||||||
name: 'transform-animation',
|
|
||||||
node: <node>,
|
|
||||||
transformOrigin: <transform-origin>,
|
|
||||||
transformFrom: <transform-from-string>,
|
|
||||||
transformTo: <transform-to-string>,
|
|
||||||
timing: <animation-timing>
|
|
||||||
}
|
|
||||||
```
|
|
||||||
-->
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
Polymer({
|
|
||||||
|
|
||||||
is: 'transform-animation',
|
|
||||||
|
|
||||||
behaviors: [
|
|
||||||
Polymer.NeonAnimationBehavior
|
|
||||||
],
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @param {{
|
|
||||||
* node: !Element,
|
|
||||||
* transformOrigin: (string|undefined),
|
|
||||||
* transformFrom: (string|undefined),
|
|
||||||
* transformTo: (string|undefined),
|
|
||||||
* timing: (Object|undefined)
|
|
||||||
* }} config
|
|
||||||
*/
|
|
||||||
configure: function(config) {
|
|
||||||
var node = config.node;
|
|
||||||
var transformFrom = config.transformFrom || 'none';
|
|
||||||
var transformTo = config.transformTo || 'none';
|
|
||||||
|
|
||||||
this._effect = new KeyframeEffect(node, [
|
|
||||||
{'transform': transformFrom},
|
|
||||||
{'transform': transformTo}
|
|
||||||
], this.timingFromConfig(config));
|
|
||||||
|
|
||||||
if (config.transformOrigin) {
|
|
||||||
this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
|
|
||||||
}
|
|
||||||
|
|
||||||
return this._effect;
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,52 +0,0 @@
|
||||||
{
|
|
||||||
"name": "neon-animation",
|
|
||||||
"description": "A system for animating Polymer-based web components",
|
|
||||||
"version": "1.2.3",
|
|
||||||
"authors": [
|
|
||||||
"The Polymer Authors"
|
|
||||||
],
|
|
||||||
"keywords": [
|
|
||||||
"web-components",
|
|
||||||
"web-component",
|
|
||||||
"polymer",
|
|
||||||
"web-animations"
|
|
||||||
],
|
|
||||||
"main": [
|
|
||||||
"neon-animated-pages.html",
|
|
||||||
"neon-animatable-behavior.html",
|
|
||||||
"neon-animation-behavior.html",
|
|
||||||
"neon-animation-runner-behavior.html",
|
|
||||||
"neon-shared-element-animatable-behavior.html",
|
|
||||||
"neon-shared-element-animation-behavior.html",
|
|
||||||
"neon-animatable.html",
|
|
||||||
"neon-animations.html"
|
|
||||||
],
|
|
||||||
"private": true,
|
|
||||||
"repository": {
|
|
||||||
"type": "git",
|
|
||||||
"url": "git://github.com/PolymerElements/neon-animation"
|
|
||||||
},
|
|
||||||
"license": "http://polymer.github.io/LICENSE.txt",
|
|
||||||
"homepage": "https://github.com/PolymerElements/neon-animation",
|
|
||||||
"ignore": [],
|
|
||||||
"dependencies": {
|
|
||||||
"polymer": "Polymer/polymer#^1.1.0",
|
|
||||||
"iron-meta": "PolymerElements/iron-meta#^1.0.0",
|
|
||||||
"iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^1.0.0",
|
|
||||||
"iron-selector": "PolymerElements/iron-selector#^1.0.0",
|
|
||||||
"web-animations-js": "web-animations/web-animations-js#^2.2.0"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
|
|
||||||
"paper-toolbar": "PolymerElements/paper-toolbar#^1.0.0",
|
|
||||||
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
|
|
||||||
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
|
||||||
"web-component-tester": "^4.0.0",
|
|
||||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
|
|
||||||
"paper-item": "PolymerElements/paper-item#^1.0.0",
|
|
||||||
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
|
|
||||||
"iron-icon": "PolymerElements/iron-icon#^1.0.0",
|
|
||||||
"iron-icons": "PolymerElements/iron-icons#^1.0.0",
|
|
||||||
"paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,166 +0,0 @@
|
||||||
<!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>neon-animated-pages demo: card</title>
|
|
||||||
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
||||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
|
|
||||||
|
|
||||||
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
|
|
||||||
|
|
||||||
<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
|
|
||||||
<link rel="import" href="../../neon-animated-pages.html">
|
|
||||||
<link rel="import" href="../../neon-animations.html">
|
|
||||||
<link rel="import" href="../../../paper-styles/typography.html">
|
|
||||||
<link rel="import" href="x-card.html">
|
|
||||||
<link rel="import" href="x-cards-list.html">
|
|
||||||
|
|
||||||
<style is="custom-style">
|
|
||||||
|
|
||||||
body {
|
|
||||||
padding: 15px;
|
|
||||||
@apply(--layout-fullbleed);
|
|
||||||
@apply(--paper-font-common-base);
|
|
||||||
}
|
|
||||||
|
|
||||||
neon-animated-pages {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.large {
|
|
||||||
width: 100%
|
|
||||||
}
|
|
||||||
|
|
||||||
.button {
|
|
||||||
text-align: center;
|
|
||||||
width: 120px;
|
|
||||||
height: 32px;
|
|
||||||
line-height: 32px;
|
|
||||||
border-radius: 2px;
|
|
||||||
font-size: 0.9em;
|
|
||||||
background-color: #fff;
|
|
||||||
color: #646464;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button.blue {
|
|
||||||
background-color: #4285f4;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button.raised {
|
|
||||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
|
|
||||||
}
|
|
||||||
|
|
||||||
.button.back {
|
|
||||||
position: fixed;
|
|
||||||
top: 30px;
|
|
||||||
left: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-contents {
|
|
||||||
@apply(--layout-vertical);
|
|
||||||
@apply(--layout-center-center);
|
|
||||||
@apply(--layout-fit);
|
|
||||||
}
|
|
||||||
|
|
||||||
.button-container {
|
|
||||||
@apply(--layout-flex);
|
|
||||||
@apply(--layout-horizontal);
|
|
||||||
@apply(--layout-around-justified);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<template is="dom-bind">
|
|
||||||
<neon-animated-pages id="pages" selected="0">
|
|
||||||
<x-cards-list id="list">
|
|
||||||
<div class="card-contents">
|
|
||||||
<h2>Choose a subject</h2>
|
|
||||||
<div class="button-container large">
|
|
||||||
<div class="blue raised button" on-click="_onPolymerClick">
|
|
||||||
POLYMER
|
|
||||||
</div>
|
|
||||||
<div class="blue raised button" on-click="_onAngularClick">
|
|
||||||
ANGULAR
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</x-cards-list>
|
|
||||||
|
|
||||||
<x-card>
|
|
||||||
<div class="card-contents">
|
|
||||||
<div class="raised back button" on-click="_onBackClick">
|
|
||||||
BACK
|
|
||||||
</div>
|
|
||||||
<h2>Polymer</h2>
|
|
||||||
<p>
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
|
||||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
|
||||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
|
||||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
|
||||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
|
||||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</x-card>
|
|
||||||
|
|
||||||
<x-card>
|
|
||||||
<div class="card-contents">
|
|
||||||
<div class="raised back button" on-click="_onBackClick">
|
|
||||||
BACK
|
|
||||||
</div>
|
|
||||||
<h2>Angular</h2>
|
|
||||||
<p>
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
|
||||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
|
||||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
|
||||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
|
||||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
|
||||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</x-card>
|
|
||||||
|
|
||||||
</neon-animated-pages>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
var scope = document.querySelector('template[is="dom-bind"]');
|
|
||||||
|
|
||||||
scope._onPolymerClick = function(event) {
|
|
||||||
this.$.list.sharedElements = {
|
|
||||||
'ripple': event.target,
|
|
||||||
'reverse-ripple': event.target
|
|
||||||
};
|
|
||||||
this.$.pages.selected = 1;
|
|
||||||
};
|
|
||||||
|
|
||||||
scope._onAngularClick = function(event) {
|
|
||||||
this.$.list.sharedElements = {
|
|
||||||
'ripple': event.target,
|
|
||||||
'reverse-ripple': event.target
|
|
||||||
};
|
|
||||||
this.$.pages.selected = 2;
|
|
||||||
};
|
|
||||||
|
|
||||||
scope._onBackClick = function(event) {
|
|
||||||
this.$.pages.selected = 0;
|
|
||||||
};
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,94 +0,0 @@
|
||||||
<!--
|
|
||||||
@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
|
|
||||||
-->
|
|
||||||
|
|
||||||
<link rel="import" href="../../../polymer/polymer.html">
|
|
||||||
<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
|
|
||||||
<link rel="import" href="../../neon-shared-element-animatable-behavior.html">
|
|
||||||
|
|
||||||
<dom-module id="x-card">
|
|
||||||
<template>
|
|
||||||
<style>
|
|
||||||
:host {
|
|
||||||
display: block;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
#placeholder {
|
|
||||||
opacity: 0;
|
|
||||||
background-color: grey;
|
|
||||||
@apply(--layout-fit);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<div id="placeholder"></div>
|
|
||||||
<div id="container">
|
|
||||||
<content select="div"></content>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
</dom-module>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
(function() {
|
|
||||||
Polymer({
|
|
||||||
is: 'x-card',
|
|
||||||
|
|
||||||
behaviors: [
|
|
||||||
Polymer.NeonSharedElementAnimatableBehavior
|
|
||||||
],
|
|
||||||
|
|
||||||
properties: {
|
|
||||||
animationConfig: {
|
|
||||||
value: function() {
|
|
||||||
return {
|
|
||||||
'entry': [{
|
|
||||||
name: 'ripple-animation',
|
|
||||||
id: 'ripple',
|
|
||||||
toPage: this
|
|
||||||
}, {
|
|
||||||
name: 'fade-out-animation',
|
|
||||||
node: this.$.placeholder,
|
|
||||||
timing: {
|
|
||||||
delay: 250
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
name: 'fade-in-animation',
|
|
||||||
node: this.$.container,
|
|
||||||
timing: {
|
|
||||||
delay: 50
|
|
||||||
}
|
|
||||||
}],
|
|
||||||
|
|
||||||
'exit': [{
|
|
||||||
name: 'fade-out-animation',
|
|
||||||
node: this.$.container,
|
|
||||||
timing: {
|
|
||||||
duration: 0
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
name: 'reverse-ripple-animation',
|
|
||||||
id: 'reverse-ripple',
|
|
||||||
fromPage: this
|
|
||||||
}]
|
|
||||||
};
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
sharedElements: {
|
|
||||||
value: function() {
|
|
||||||
return {
|
|
||||||
'ripple': this.$.placeholder,
|
|
||||||
'reverse-ripple': this.$.placeholder
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
})();
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,75 +0,0 @@
|
||||||
<!--
|
|
||||||
@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
|
|
||||||
-->
|
|
||||||
|
|
||||||
<link rel="import" href="../../../polymer/polymer.html">
|
|
||||||
<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
|
|
||||||
<link rel="import" href="../../neon-shared-element-animatable-behavior.html">
|
|
||||||
|
|
||||||
<dom-module id="x-cards-list">
|
|
||||||
<template>
|
|
||||||
<style>
|
|
||||||
:host {
|
|
||||||
display: block;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
#placeholder {
|
|
||||||
opacity: 0;
|
|
||||||
background-color: grey;
|
|
||||||
@apply(--layout-fit);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<div id="placeholder"></div>
|
|
||||||
<div id="container">
|
|
||||||
<content select="div"></content>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
</dom-module>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
(function() {
|
|
||||||
Polymer({
|
|
||||||
is: 'x-cards-list',
|
|
||||||
|
|
||||||
behaviors: [
|
|
||||||
Polymer.NeonSharedElementAnimatableBehavior
|
|
||||||
],
|
|
||||||
|
|
||||||
properties: {
|
|
||||||
animationConfig: {
|
|
||||||
value: function() {
|
|
||||||
return {
|
|
||||||
'entry': [{
|
|
||||||
name: 'reverse-ripple-animation',
|
|
||||||
id: 'reverse-ripple',
|
|
||||||
toPage: this
|
|
||||||
}],
|
|
||||||
|
|
||||||
'exit': [{
|
|
||||||
name: 'fade-out-animation',
|
|
||||||
node: this.$.container,
|
|
||||||
timing: {
|
|
||||||
delay: 150,
|
|
||||||
duration: 0
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
name: 'ripple-animation',
|
|
||||||
id: 'ripple',
|
|
||||||
fromPage: this
|
|
||||||
}]
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
})();
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,132 +0,0 @@
|
||||||
<!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>neon-animated-pages demo: declarative</title>
|
|
||||||
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
||||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
|
|
||||||
|
|
||||||
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
|
|
||||||
|
|
||||||
<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
|
|
||||||
<link rel="import" href="../../../paper-styles/typography.html">
|
|
||||||
<link rel="import" href="../../../paper-styles/color.html">
|
|
||||||
<link rel="import" href="../../neon-animated-pages.html">
|
|
||||||
<link rel="import" href="../../neon-animatable.html">
|
|
||||||
<link rel="import" href="../../neon-animations.html">
|
|
||||||
|
|
||||||
<style is="custom-style">
|
|
||||||
body {
|
|
||||||
overflow: hidden;
|
|
||||||
@apply(--layout-fullbleed);
|
|
||||||
@apply(--layout-vertical);
|
|
||||||
}
|
|
||||||
|
|
||||||
.toolbar {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
padding: 8px;
|
|
||||||
|
|
||||||
background-color: white;
|
|
||||||
|
|
||||||
z-index: 12;
|
|
||||||
}
|
|
||||||
|
|
||||||
neon-animated-pages {
|
|
||||||
@apply(--layout-flex);
|
|
||||||
}
|
|
||||||
|
|
||||||
neon-animatable {
|
|
||||||
color: white;
|
|
||||||
@apply(--layout-horizontal);
|
|
||||||
@apply(--layout-center-center);
|
|
||||||
@apply(--paper-font-display4);
|
|
||||||
}
|
|
||||||
|
|
||||||
neon-animatable:nth-child(1) {
|
|
||||||
background: var(--paper-red-500);
|
|
||||||
}
|
|
||||||
|
|
||||||
neon-animatable:nth-child(2) {
|
|
||||||
background: var(--paper-blue-500);
|
|
||||||
}
|
|
||||||
|
|
||||||
neon-animatable:nth-child(3) {
|
|
||||||
background: var(--paper-orange-500);
|
|
||||||
}
|
|
||||||
|
|
||||||
neon-animatable:nth-child(4) {
|
|
||||||
background: var(--paper-green-500);
|
|
||||||
}
|
|
||||||
|
|
||||||
neon-animatable:nth-child(5) {
|
|
||||||
background: var(--paper-purple-500);
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<template is="dom-bind">
|
|
||||||
|
|
||||||
<div class="toolbar">
|
|
||||||
<button on-click="_onPrevClick">⇦</button>
|
|
||||||
<button on-click="_onNextClick">⇨</button>
|
|
||||||
<button on-click="_onUpClick">⇧</button>
|
|
||||||
<button on-click="_onDownClick">⇩</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<neon-animated-pages id="pages" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">
|
|
||||||
<neon-animatable>1</neon-animatable>
|
|
||||||
<neon-animatable>2</neon-animatable>
|
|
||||||
<neon-animatable>3</neon-animatable>
|
|
||||||
<neon-animatable>4</neon-animatable>
|
|
||||||
<neon-animatable>5</neon-animatable>
|
|
||||||
</neon-animated-pages>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
var scope = document.querySelector('template[is="dom-bind"]');
|
|
||||||
scope.selected = 0;
|
|
||||||
|
|
||||||
scope._onPrevClick = function() {
|
|
||||||
this.entryAnimation = 'slide-from-left-animation';
|
|
||||||
this.exitAnimation = 'slide-right-animation';
|
|
||||||
this.selected = this.selected === 0 ? 4 : (this.selected - 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
scope._onNextClick = function() {
|
|
||||||
this.entryAnimation = 'slide-from-right-animation';
|
|
||||||
this.exitAnimation = 'slide-left-animation';
|
|
||||||
this.selected = this.selected === 4 ? 0 : (this.selected + 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
scope._onUpClick = function() {
|
|
||||||
this.entryAnimation = 'slide-from-top-animation';
|
|
||||||
this.exitAnimation = 'slide-down-animation';
|
|
||||||
this.selected = this.selected === 4 ? 0 : (this.selected + 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
scope._onDownClick = function() {
|
|
||||||
this.entryAnimation = 'slide-from-bottom-animation';
|
|
||||||
this.exitAnimation = 'slide-up-animation';
|
|
||||||
this.selected = this.selected === 0 ? 4 : (this.selected - 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,70 +0,0 @@
|
||||||
<!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>neon-animation demo: basic</title>
|
|
||||||
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
||||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
|
|
||||||
|
|
||||||
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
|
|
||||||
|
|
||||||
<link rel="import" href="my-animatable.html">
|
|
||||||
<link rel="import" href="my-dialog.html">
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<style>
|
|
||||||
my-animatable {
|
|
||||||
margin-top: 50px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<template is="dom-bind">
|
|
||||||
|
|
||||||
<button on-click="_onCircleButtonClick">toggle circle</button>
|
|
||||||
<button on-click="_onDialogButtonClick">toggle dialog</button>
|
|
||||||
|
|
||||||
<div style="text-align: center">
|
|
||||||
<my-dialog>Hello World!</my-dialog>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<my-animatable></my-animatable>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
var scope = document.querySelector('template[is="dom-bind"]');
|
|
||||||
|
|
||||||
scope._onCircleButtonClick = function(event) {
|
|
||||||
var node = document.querySelector('my-animatable');
|
|
||||||
if (node) {
|
|
||||||
node.animate();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
scope._onDialogButtonClick = function(event) {
|
|
||||||
var node = document.querySelector('my-dialog');
|
|
||||||
if (node) {
|
|
||||||
if (node.opened) {
|
|
||||||
node.hide();
|
|
||||||
} else {
|
|
||||||
node.show();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,68 +0,0 @@
|
||||||
<!--
|
|
||||||
@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
|
|
||||||
-->
|
|
||||||
<link rel="import" href="../../../polymer/polymer.html">
|
|
||||||
<link rel="import" href="../../neon-animation-runner-behavior.html">
|
|
||||||
<link rel="import" href="../../animations/scale-down-animation.html">
|
|
||||||
|
|
||||||
<dom-module id="my-animatable">
|
|
||||||
<template>
|
|
||||||
<style>
|
|
||||||
:host {
|
|
||||||
display: inline-block;
|
|
||||||
border-radius: 50%;
|
|
||||||
width: 300px;
|
|
||||||
height: 300px;
|
|
||||||
background: orange;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<content></content>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
</dom-module>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
Polymer({
|
|
||||||
|
|
||||||
is: 'my-animatable',
|
|
||||||
|
|
||||||
behaviors: [
|
|
||||||
Polymer.NeonAnimationRunnerBehavior
|
|
||||||
],
|
|
||||||
|
|
||||||
properties: {
|
|
||||||
|
|
||||||
animationConfig: {
|
|
||||||
type: Object,
|
|
||||||
value: function() {
|
|
||||||
return {
|
|
||||||
name: 'scale-down-animation',
|
|
||||||
node: this
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
listeners: {
|
|
||||||
'neon-animation-finish': '_onNeonAnimationFinish'
|
|
||||||
},
|
|
||||||
|
|
||||||
animate: function() {
|
|
||||||
this.playAnimation();
|
|
||||||
},
|
|
||||||
|
|
||||||
_onNeonAnimationFinish: function() {
|
|
||||||
console.log('animation finish!');
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,94 +0,0 @@
|
||||||
<!--
|
|
||||||
@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
|
|
||||||
-->
|
|
||||||
<link rel="import" href="../../../polymer/polymer.html">
|
|
||||||
<link rel="import" href="../../../paper-styles/shadow.html">
|
|
||||||
<link rel="import" href="../../neon-animation-runner-behavior.html">
|
|
||||||
<link rel="import" href="../../animations/scale-up-animation.html">
|
|
||||||
<link rel="import" href="../../animations/fade-out-animation.html">
|
|
||||||
|
|
||||||
|
|
||||||
<dom-module id="my-dialog">
|
|
||||||
<template>
|
|
||||||
<style>
|
|
||||||
:host {
|
|
||||||
display: none;
|
|
||||||
padding: 16px;
|
|
||||||
background: white;
|
|
||||||
color: black;
|
|
||||||
margin: 0 auto;
|
|
||||||
z-index: 100;
|
|
||||||
position: absolute;
|
|
||||||
@apply(--shadow-elevation-2dp);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<content></content>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
</dom-module>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
Polymer({
|
|
||||||
|
|
||||||
is: 'my-dialog',
|
|
||||||
|
|
||||||
behaviors: [
|
|
||||||
Polymer.NeonAnimationRunnerBehavior
|
|
||||||
],
|
|
||||||
|
|
||||||
properties: {
|
|
||||||
|
|
||||||
opened: {
|
|
||||||
type: Boolean
|
|
||||||
},
|
|
||||||
|
|
||||||
animationConfig: {
|
|
||||||
type: Object,
|
|
||||||
value: function() {
|
|
||||||
return {
|
|
||||||
'entry': [{
|
|
||||||
name: 'scale-up-animation',
|
|
||||||
node: this
|
|
||||||
}],
|
|
||||||
'exit': [{
|
|
||||||
name: 'fade-out-animation',
|
|
||||||
node: this
|
|
||||||
}]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
listeners: {
|
|
||||||
'neon-animation-finish': '_onAnimationFinish'
|
|
||||||
},
|
|
||||||
|
|
||||||
_onAnimationFinish: function() {
|
|
||||||
if (!this.opened) {
|
|
||||||
this.style.display = '';
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
show: function() {
|
|
||||||
this.opened = true;
|
|
||||||
this.style.display = 'inline-block';
|
|
||||||
this.playAnimation('entry');
|
|
||||||
},
|
|
||||||
|
|
||||||
hide: function() {
|
|
||||||
this.opened = false;
|
|
||||||
this.playAnimation('exit');
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,90 +0,0 @@
|
||||||
<!--
|
|
||||||
@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
|
|
||||||
-->
|
|
||||||
<link rel="import" href="../../../polymer/polymer.html">
|
|
||||||
<link rel="import" href="../../../paper-styles/shadow.html">
|
|
||||||
<link rel="import" href="../../neon-animation-runner-behavior.html">
|
|
||||||
|
|
||||||
<dom-module id="animated-dropdown">
|
|
||||||
<template>
|
|
||||||
<style>
|
|
||||||
:host {
|
|
||||||
display: none;
|
|
||||||
padding: 16px;
|
|
||||||
background: white;
|
|
||||||
color: black;
|
|
||||||
|
|
||||||
@apply(--shadow-elevation-2dp);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<content></content>
|
|
||||||
</template>
|
|
||||||
</dom-module>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
Polymer({
|
|
||||||
|
|
||||||
is: 'animated-dropdown',
|
|
||||||
|
|
||||||
behaviors: [
|
|
||||||
Polymer.NeonAnimationRunnerBehavior
|
|
||||||
],
|
|
||||||
|
|
||||||
properties: {
|
|
||||||
|
|
||||||
animationConfig: {
|
|
||||||
type: Object,
|
|
||||||
value: function() {
|
|
||||||
return {
|
|
||||||
'entry': [{
|
|
||||||
name: 'scale-up-animation',
|
|
||||||
node: this,
|
|
||||||
transformOrigin: '0 0'
|
|
||||||
}],
|
|
||||||
'exit': [{
|
|
||||||
name: 'fade-out-animation',
|
|
||||||
node: this
|
|
||||||
}]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
_showing: {
|
|
||||||
type: Boolean,
|
|
||||||
value: false
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
listeners: {
|
|
||||||
'neon-animation-finish': '_onAnimationFinish'
|
|
||||||
},
|
|
||||||
|
|
||||||
_onAnimationFinish: function() {
|
|
||||||
if (this._showing) {
|
|
||||||
} else {
|
|
||||||
this.style.display = '';
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
show: function() {
|
|
||||||
this.style.display = 'inline-block';
|
|
||||||
this._showing = true;
|
|
||||||
this.playAnimation('entry');
|
|
||||||
},
|
|
||||||
|
|
||||||
hide: function() {
|
|
||||||
this._showing = false;
|
|
||||||
this.playAnimation('exit');
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,54 +0,0 @@
|
||||||
<!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>neon-animated-pages demo: dropdown</title>
|
|
||||||
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
||||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
|
|
||||||
|
|
||||||
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
|
|
||||||
|
|
||||||
<link rel="import" href="../../neon-animated-pages.html">
|
|
||||||
<link rel="import" href="../../neon-animations.html">
|
|
||||||
<link rel="import" href="animated-dropdown.html">
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<template is="dom-bind">
|
|
||||||
|
|
||||||
<button dropdown-id="dropdown" on-click="_onButtonClick">dropdown</button>
|
|
||||||
<br>
|
|
||||||
<animated-dropdown id="dropdown" on-click="_onDropdownClick">Hello world!</animated-dropdown>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
var scope = document.querySelector('template[is="dom-bind"]');
|
|
||||||
|
|
||||||
scope._onButtonClick = function(event) {
|
|
||||||
var dropdown = document.querySelector('#' + event.target.getAttribute('dropdown-id'));
|
|
||||||
if (dropdown) {
|
|
||||||
dropdown.show();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
scope._onDropdownClick = function(event) {
|
|
||||||
event.target.hide();
|
|
||||||
};
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,164 +0,0 @@
|
||||||
<!--
|
|
||||||
@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
|
|
||||||
-->
|
|
||||||
<link rel="import" href="../../../polymer/polymer.html">
|
|
||||||
<link rel="import" href="../../../paper-styles/typography.html">
|
|
||||||
<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
|
|
||||||
<link rel="import" href="../../neon-shared-element-animatable-behavior.html">
|
|
||||||
<link rel="import" href="../shared-styles.html">
|
|
||||||
|
|
||||||
<dom-module id="animated-grid">
|
|
||||||
<template>
|
|
||||||
<style include="shared-styles"></style>
|
|
||||||
<style>
|
|
||||||
|
|
||||||
:host {
|
|
||||||
display: block;
|
|
||||||
background: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tile {
|
|
||||||
display: inline-block;
|
|
||||||
float: left;
|
|
||||||
vertical-align: top;
|
|
||||||
width: calc(100% / 6);
|
|
||||||
height: calc(100% / 3);
|
|
||||||
|
|
||||||
@apply(--paper-font-title);
|
|
||||||
@apply(--layout-vertical);
|
|
||||||
@apply(--layout-center-center);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tile:nth-of-type(1) {
|
|
||||||
width: calc(100% / 3);
|
|
||||||
height: calc(100% / 3 * 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tile:nth-of-type(4) {
|
|
||||||
width: calc(100% / 3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tile:nth-of-type(5) {
|
|
||||||
width: calc(100% / 3);
|
|
||||||
height: calc(100% / 3 * 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tile:nth-of-type(8) {
|
|
||||||
width: calc(100% / 3);
|
|
||||||
height: calc(100% / 3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tile:nth-of-type(9) {
|
|
||||||
position: absolute;
|
|
||||||
top: calc(100% / 3 * 2);
|
|
||||||
left: 0;
|
|
||||||
width: calc(100% / 6);
|
|
||||||
height: calc(100% / 3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tile:nth-of-type(10) {
|
|
||||||
position: absolute;
|
|
||||||
top: calc(100% / 3 * 2);
|
|
||||||
left: calc(100% / 6);;
|
|
||||||
width: calc(100% / 6);
|
|
||||||
height: calc(100% / 3);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<template is="dom-repeat" items="[[config]]">
|
|
||||||
<div class$="[[_computeTileClass(item.color)]]">
|
|
||||||
<span>[[item.value]]</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
</dom-module>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
Polymer({
|
|
||||||
|
|
||||||
is: 'animated-grid',
|
|
||||||
|
|
||||||
behaviors: [
|
|
||||||
Polymer.NeonSharedElementAnimatableBehavior
|
|
||||||
],
|
|
||||||
|
|
||||||
properties: {
|
|
||||||
|
|
||||||
config: {
|
|
||||||
type: Array,
|
|
||||||
value: function() {
|
|
||||||
return [
|
|
||||||
{value: 1, color: 'blue'},
|
|
||||||
{value: 2, color: 'red'},
|
|
||||||
{value: 3, color: 'blue'},
|
|
||||||
{value: 4, color: 'green'},
|
|
||||||
{value: 5, color: 'yellow'},
|
|
||||||
{value: 6, color: 'blue'},
|
|
||||||
{value: 7, color: 'red'},
|
|
||||||
{value: 8, color: 'green'},
|
|
||||||
{value: 9, color: 'yellow'},
|
|
||||||
{value: 10, color: 'red'}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
animationConfig: {
|
|
||||||
type: Object,
|
|
||||||
value: function() {
|
|
||||||
return {
|
|
||||||
'exit': [{
|
|
||||||
name: 'ripple-animation',
|
|
||||||
id: 'ripple',
|
|
||||||
fromPage: this
|
|
||||||
}, {
|
|
||||||
name: 'hero-animation',
|
|
||||||
id: 'hero',
|
|
||||||
fromPage: this
|
|
||||||
}]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
listeners: {
|
|
||||||
click: '_onClick'
|
|
||||||
},
|
|
||||||
|
|
||||||
_computeTileClass: function(color) {
|
|
||||||
return 'tile ' + color + '-300';
|
|
||||||
},
|
|
||||||
|
|
||||||
_onClick: function(event) {
|
|
||||||
var target = event.target;
|
|
||||||
while (target !== this && !target._templateInstance) {
|
|
||||||
target = target.parentNode;
|
|
||||||
}
|
|
||||||
|
|
||||||
// configure the page animation
|
|
||||||
this.sharedElements = {
|
|
||||||
'hero': target,
|
|
||||||
'ripple': target
|
|
||||||
};
|
|
||||||
this.animationConfig['exit'][0].gesture = {
|
|
||||||
x: event.x || event.pageX,
|
|
||||||
y: event.y || event.pageY
|
|
||||||
};
|
|
||||||
|
|
||||||
this.fire('tile-click', {
|
|
||||||
tile: target,
|
|
||||||
data: target._templateInstance.item
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,122 +0,0 @@
|
||||||
<!--
|
|
||||||
@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
|
|
||||||
-->
|
|
||||||
<link rel="import" href="../../../polymer/polymer.html">
|
|
||||||
<link rel="import" href="../../neon-shared-element-animatable-behavior.html">
|
|
||||||
<link rel="import" href="../../../paper-styles/color.html">
|
|
||||||
<link rel="import" href="../shared-styles.html">
|
|
||||||
|
|
||||||
<dom-module id="fullsize-page-with-card">
|
|
||||||
<template>
|
|
||||||
<style include="shared-styles"></style>
|
|
||||||
<style>
|
|
||||||
|
|
||||||
:host {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fixed {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
height: 100vh;
|
|
||||||
width: 100vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
position: relative;
|
|
||||||
margin: 200px 100px 0;
|
|
||||||
height: 700px;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<div id="fixed" class$="[[_computeFixedBackgroundClass(color)]]"></div>
|
|
||||||
<div id="card" class$="[[_computeCardClass(color)]]"></div>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
</dom-module>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
Polymer({
|
|
||||||
|
|
||||||
is: 'fullsize-page-with-card',
|
|
||||||
|
|
||||||
behaviors: [
|
|
||||||
Polymer.NeonSharedElementAnimatableBehavior
|
|
||||||
],
|
|
||||||
|
|
||||||
properties: {
|
|
||||||
|
|
||||||
color: {
|
|
||||||
type: String
|
|
||||||
},
|
|
||||||
|
|
||||||
sharedElements: {
|
|
||||||
type: Object,
|
|
||||||
value: function() {
|
|
||||||
return {
|
|
||||||
'hero': this.$.card,
|
|
||||||
'ripple': this.$.fixed
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
animationConfig: {
|
|
||||||
type: Object,
|
|
||||||
value: function() {
|
|
||||||
return {
|
|
||||||
'entry': [{
|
|
||||||
name: 'ripple-animation',
|
|
||||||
id: 'ripple',
|
|
||||||
toPage: this,
|
|
||||||
}, {
|
|
||||||
name: 'hero-animation',
|
|
||||||
id: 'hero',
|
|
||||||
toPage: this,
|
|
||||||
timing: {
|
|
||||||
delay: 150
|
|
||||||
}
|
|
||||||
}],
|
|
||||||
'exit': [{
|
|
||||||
name: 'fade-out-animation',
|
|
||||||
node: this.$.fixed
|
|
||||||
}, {
|
|
||||||
name: 'transform-animation',
|
|
||||||
transformFrom: 'none',
|
|
||||||
transformTo: 'translate(0px,-200vh) scale(0.9,1)',
|
|
||||||
node: this.$.card
|
|
||||||
}]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
_computeCardClass: function(color) {
|
|
||||||
var cls = 'card';
|
|
||||||
if (color) {
|
|
||||||
cls += ' ' + color + '-300';
|
|
||||||
}
|
|
||||||
return cls;
|
|
||||||
},
|
|
||||||
|
|
||||||
_computeFixedBackgroundClass: function(color) {
|
|
||||||
var cls = 'fixed';
|
|
||||||
if (color) {
|
|
||||||
cls += ' ' + color + '-100';
|
|
||||||
}
|
|
||||||
return cls;
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,64 +0,0 @@
|
||||||
<!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>neon-animated-pages demo: grid</title>
|
|
||||||
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
||||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
|
|
||||||
|
|
||||||
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
|
|
||||||
|
|
||||||
<link rel="import" href="../../neon-animated-pages.html">
|
|
||||||
<link rel="import" href="../../neon-animations.html">
|
|
||||||
<link rel="import" href="animated-grid.html">
|
|
||||||
<link rel="import" href="fullsize-page-with-card.html">
|
|
||||||
|
|
||||||
<style is="custom-style">
|
|
||||||
body {
|
|
||||||
overflow: hidden;
|
|
||||||
@apply(--layout-fullbleed);
|
|
||||||
}
|
|
||||||
|
|
||||||
neon-animated-pages {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<template is="dom-bind">
|
|
||||||
<neon-animated-pages id="pages" selected="0">
|
|
||||||
<animated-grid on-tile-click="_onTileClick"></animated-grid>
|
|
||||||
<fullsize-page-with-card id="fullsize-card" on-click="_onFullsizeClick">
|
|
||||||
</fullsize-page-with-card>
|
|
||||||
</neon-animated-pages>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
var scope = document.querySelector('template[is="dom-bind"]');
|
|
||||||
|
|
||||||
scope._onTileClick = function(event) {
|
|
||||||
this.$['fullsize-card'].color = event.detail.data.color;
|
|
||||||
this.$.pages.selected = 1;
|
|
||||||
};
|
|
||||||
|
|
||||||
scope._onFullsizeClick = function(event) {
|
|
||||||
this.$.pages.selected = 0;
|
|
||||||
};
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,45 +0,0 @@
|
||||||
<!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 lang="en">
|
|
||||||
<head>
|
|
||||||
<title>neon-animated pages demo</title>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
||||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
|
|
||||||
|
|
||||||
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
|
||||||
|
|
||||||
<link rel="import" href="../../paper-styles/demo-pages.html">
|
|
||||||
</head>
|
|
||||||
<style>
|
|
||||||
a {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<body unresolved>
|
|
||||||
<div class="horizontal-section-container">
|
|
||||||
<div>
|
|
||||||
<h4>Sample demos</h4>
|
|
||||||
<div class="horizontal-section">
|
|
||||||
<a href="doc/index.html">basic</a>
|
|
||||||
<a href="declarative/index.html">declarative</a>
|
|
||||||
<a href="dropdown/index.html">dropdown</a>
|
|
||||||
<a href="grid/index.html">grid</a>
|
|
||||||
<a href="list/index.html">list</a>
|
|
||||||
<a href="load/index.html">load</a>
|
|
||||||
<a href="tiles/index.html">tiles</a>
|
|
||||||
<a href="card/index.html">card</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,118 +0,0 @@
|
||||||
<!--
|
|
||||||
@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
|
|
||||||
-->
|
|
||||||
<link rel="import" href="../../../polymer/polymer.html">
|
|
||||||
<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
|
|
||||||
<link rel="import" href="../../../paper-styles/shadow.html">
|
|
||||||
<link rel="import" href="../../neon-animatable-behavior.html">
|
|
||||||
|
|
||||||
<dom-module id="full-view">
|
|
||||||
<template>
|
|
||||||
<style>
|
|
||||||
:host {
|
|
||||||
@apply(--layout-vertical);
|
|
||||||
}
|
|
||||||
|
|
||||||
.main {
|
|
||||||
background: white;
|
|
||||||
@apply(--layout-flex);
|
|
||||||
@apply(--layout-scroll);
|
|
||||||
@apply(--shadow-elevation-8dp);
|
|
||||||
}
|
|
||||||
|
|
||||||
.image-container {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
padding-bottom: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.image {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: repeating-linear-gradient(
|
|
||||||
45deg,
|
|
||||||
#f5f5f5,
|
|
||||||
#f5f5f5 8px,
|
|
||||||
#e0e0e0 8px,
|
|
||||||
#e0e0e0 16px
|
|
||||||
);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<paper-toolbar class="medium-tall">
|
|
||||||
<paper-icon-button id="button" icon="clear" on-click="_onClearButtonClick"></paper-icon-button>
|
|
||||||
</paper-toolbar>
|
|
||||||
|
|
||||||
<div id="main" class="main">
|
|
||||||
<div class="image-container">
|
|
||||||
<div class="image">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
</dom-module>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
Polymer({
|
|
||||||
|
|
||||||
is: 'full-view',
|
|
||||||
|
|
||||||
behaviors: [
|
|
||||||
Polymer.NeonAnimatableBehavior
|
|
||||||
],
|
|
||||||
|
|
||||||
properties: {
|
|
||||||
|
|
||||||
sharedElements: {
|
|
||||||
type: Object,
|
|
||||||
value: function() {
|
|
||||||
return {
|
|
||||||
'hero': this.$.main
|
|
||||||
};
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
animationConfig: {
|
|
||||||
type: Object,
|
|
||||||
value: function() {
|
|
||||||
return {
|
|
||||||
'entry': [{
|
|
||||||
name: 'fade-in-animation',
|
|
||||||
node: this.$.button
|
|
||||||
}, {
|
|
||||||
name: 'hero-animation',
|
|
||||||
id: 'hero',
|
|
||||||
toPage: this
|
|
||||||
}],
|
|
||||||
|
|
||||||
'exit': [{
|
|
||||||
name: 'fade-out-animation',
|
|
||||||
node: this.$.button
|
|
||||||
}, {
|
|
||||||
name: 'scale-down-animation',
|
|
||||||
node: this.$.main,
|
|
||||||
transformOrigin: '50% 50%',
|
|
||||||
axis: 'y'
|
|
||||||
}]
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
_onClearButtonClick: function() {
|
|
||||||
this.fire('close');
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,35 +0,0 @@
|
||||||
<!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>neon-animated-pages demo: list</title>
|
|
||||||
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
||||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
|
|
||||||
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
|
|
||||||
<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
|
|
||||||
<link rel="import" href="list-demo.html">
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<style is="custom-style">
|
|
||||||
body {
|
|
||||||
@apply(--layout-fullbleed);
|
|
||||||
}
|
|
||||||
|
|
||||||
list-demo {
|
|
||||||
@apply(--layout-fit);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<body>
|
|
||||||
<list-demo></list-demo>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,102 +0,0 @@
|
||||||
<!--
|
|
||||||
@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
|
|
||||||
-->
|
|
||||||
<link rel="import" href="../../../polymer/polymer.html">
|
|
||||||
<link rel="import" href="../../../paper-toolbar/paper-toolbar.html">
|
|
||||||
<link rel="import" href="../../neon-animated-pages.html">
|
|
||||||
<link rel="import" href="../../neon-animations.html">
|
|
||||||
<link rel="import" href="list-view.html">
|
|
||||||
<link rel="import" href="full-view.html">
|
|
||||||
|
|
||||||
<dom-module id="list-demo">
|
|
||||||
<template>
|
|
||||||
<style>
|
|
||||||
:host {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
neon-animated-pages {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<neon-animated-pages id="pages" selected="0">
|
|
||||||
<list-view data="[[fileData]]" on-item-click="_onItemClick"></list-view>
|
|
||||||
<full-view on-close="_onClose"></full-view>
|
|
||||||
</neon-animated-pages>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
</dom-module>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
Polymer({
|
|
||||||
|
|
||||||
is: 'list-demo',
|
|
||||||
|
|
||||||
properties: {
|
|
||||||
|
|
||||||
fileData: {
|
|
||||||
type: Array,
|
|
||||||
value: function() {
|
|
||||||
return [
|
|
||||||
{fileName: 'IMG_4130.jpg', modifiedDate: 'May 12 2015'},
|
|
||||||
{fileName: 'IMG_4131.jpg', modifiedDate: 'May 12 2015'},
|
|
||||||
{fileName: 'IMG_4132.jpg', modifiedDate: 'May 12 2015'},
|
|
||||||
{fileName: 'IMG_4133.jpg', modifiedDate: 'May 12 2015'},
|
|
||||||
{fileName: 'IMG_4134.jpg', modifiedDate: 'May 12 2015'},
|
|
||||||
{fileName: 'IMG_4135.jpg', modifiedDate: 'May 12 2015'},
|
|
||||||
{fileName: 'IMG_4136.jpg', modifiedDate: 'May 12 2015'},
|
|
||||||
{fileName: 'IMG_4137.jpg', modifiedDate: 'May 12 2015'},
|
|
||||||
{fileName: 'IMG_4138.jpg', modifiedDate: 'May 12 2015'},
|
|
||||||
{fileName: 'IMG_4139.jpg', modifiedDate: 'May 12 2015'},
|
|
||||||
{fileName: 'IMG_4140.jpg', modifiedDate: 'May 12 2015'},
|
|
||||||
{fileName: 'IMG_4141.jpg', modifiedDate: 'May 12 2015'},
|
|
||||||
{fileName: 'IMG_4142.jpg', modifiedDate: 'May 12 2015'},
|
|
||||||
{fileName: 'IMG_4143.jpg', modifiedDate: 'May 12 2015'},
|
|
||||||
{fileName: 'IMG_4144.jpg', modifiedDate: 'May 12 2015'},
|
|
||||||
{fileName: 'IMG_4145.jpg', modifiedDate: 'May 12 2015'},
|
|
||||||
{fileName: 'IMG_4146.jpg', modifiedDate: 'May 12 2015'},
|
|
||||||
{fileName: 'IMG_4147.jpg', modifiedDate: 'May 12 2015'},
|
|
||||||
{fileName: 'IMG_4148.jpg', modifiedDate: 'May 12 2015'},
|
|
||||||
{fileName: 'IMG_4149.jpg', modifiedDate: 'May 12 2015'},
|
|
||||||
{fileName: 'IMG_4150.jpg', modifiedDate: 'May 12 2015'},
|
|
||||||
{fileName: 'IMG_4151.jpg', modifiedDate: 'May 12 2015'},
|
|
||||||
{fileName: 'IMG_4152.jpg', modifiedDate: 'May 12 2015'},
|
|
||||||
{fileName: 'IMG_4153.jpg', modifiedDate: 'May 12 2015'},
|
|
||||||
{fileName: 'IMG_4154.jpg', modifiedDate: 'May 12 2015'},
|
|
||||||
{fileName: 'IMG_4155.jpg', modifiedDate: 'May 12 2015'},
|
|
||||||
{fileName: 'IMG_4156.jpg', modifiedDate: 'May 12 2015'},
|
|
||||||
{fileName: 'IMG_4157.jpg', modifiedDate: 'May 12 2015'},
|
|
||||||
{fileName: 'IMG_4158.jpg', modifiedDate: 'May 12 2015'},
|
|
||||||
{fileName: 'IMG_4159.jpg', modifiedDate: 'May 12 2015'},
|
|
||||||
{fileName: 'IMG_4160.jpg', modifiedDate: 'May 12 2015'},
|
|
||||||
{fileName: 'IMG_4161.jpg', modifiedDate: 'May 12 2015'},
|
|
||||||
{fileName: 'IMG_4162.jpg', modifiedDate: 'May 12 2015'},
|
|
||||||
{fileName: 'IMG_4163.jpg', modifiedDate: 'May 12 2015'},
|
|
||||||
{fileName: 'IMG_4164.jpg', modifiedDate: 'May 12 2015'},
|
|
||||||
{fileName: 'IMG_4165.jpg', modifiedDate: 'May 12 2015'},
|
|
||||||
{fileName: 'IMG_4166.jpg', modifiedDate: 'May 12 2015'},
|
|
||||||
{fileName: 'IMG_4167.jpg', modifiedDate: 'May 12 2015'},
|
|
||||||
{fileName: 'IMG_4168.jpg', modifiedDate: 'May 12 2015'},
|
|
||||||
{fileName: 'IMG_4169.jpg', modifiedDate: 'May 12 2015'}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
_onItemClick: function() {
|
|
||||||
this.$.pages.selected = 1;
|
|
||||||
},
|
|
||||||
|
|
||||||
_onClose: function() {
|
|
||||||
this.$.pages.selected = 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,124 +0,0 @@
|
||||||
<!--
|
|
||||||
@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
|
|
||||||
-->
|
|
||||||
<link rel="import" href="../../../polymer/polymer.html">
|
|
||||||
<link rel="import" href="../../../iron-icons/iron-icons.html">
|
|
||||||
<link rel="import" href="../../../iron-icon/iron-icon.html">
|
|
||||||
<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
|
|
||||||
<link rel="import" href="../../../paper-icon-button/paper-icon-button.html">
|
|
||||||
<link rel="import" href="../../../paper-item/paper-item.html">
|
|
||||||
<link rel="import" href="../../../paper-item/paper-item-body.html">
|
|
||||||
<link rel="import" href="../../../paper-styles/color.html">
|
|
||||||
<link rel="import" href="../../neon-animatable-behavior.html">
|
|
||||||
|
|
||||||
<dom-module id="list-view">
|
|
||||||
<template>
|
|
||||||
<style>
|
|
||||||
:host {
|
|
||||||
@apply(--layout-vertical);
|
|
||||||
}
|
|
||||||
|
|
||||||
.main {
|
|
||||||
@apply(--layout-flex);
|
|
||||||
@apply(--layout-scroll);
|
|
||||||
}
|
|
||||||
|
|
||||||
iron-icon {
|
|
||||||
color: var(--google-grey-500);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<paper-toolbar class="medium-tall">
|
|
||||||
<paper-icon-button id="button" icon="arrow-back"></paper-icon-button>
|
|
||||||
</paper-toolbar>
|
|
||||||
|
|
||||||
<div class="main">
|
|
||||||
|
|
||||||
<template is="dom-repeat" items="[[data]]">
|
|
||||||
|
|
||||||
<paper-item>
|
|
||||||
<paper-item-body two-line>
|
|
||||||
<div>[[item.fileName]]</div>
|
|
||||||
<div secondary>[[item.modifiedDate]]</div>
|
|
||||||
</paper-item-body>
|
|
||||||
<iron-icon icon="info"></iron-icon>
|
|
||||||
</paper-item>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
</dom-module>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
Polymer({
|
|
||||||
|
|
||||||
is: 'list-view',
|
|
||||||
|
|
||||||
behaviors: [
|
|
||||||
Polymer.NeonAnimatableBehavior
|
|
||||||
],
|
|
||||||
|
|
||||||
listeners: {
|
|
||||||
'click': '_onClick'
|
|
||||||
},
|
|
||||||
|
|
||||||
properties: {
|
|
||||||
|
|
||||||
data: {
|
|
||||||
type: Array,
|
|
||||||
value: function() {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
animationConfig: {
|
|
||||||
type: Object,
|
|
||||||
value: function() {
|
|
||||||
return {
|
|
||||||
'entry': [{
|
|
||||||
name: 'fade-in-animation',
|
|
||||||
node: this.$.button
|
|
||||||
}],
|
|
||||||
|
|
||||||
'exit': [{
|
|
||||||
name: 'fade-out-animation',
|
|
||||||
node: this.$.button
|
|
||||||
}, {
|
|
||||||
name: 'hero-animation',
|
|
||||||
id: 'hero',
|
|
||||||
fromPage: this
|
|
||||||
}]
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
_onClick: function(event) {
|
|
||||||
var target = event.target;
|
|
||||||
while (target !== this && !target._templateInstance) {
|
|
||||||
target = target.parentNode;
|
|
||||||
}
|
|
||||||
|
|
||||||
// configure the page animation
|
|
||||||
this.sharedElements = {
|
|
||||||
'hero': target,
|
|
||||||
};
|
|
||||||
|
|
||||||
this.fire('item-click', {
|
|
||||||
item: target,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,146 +0,0 @@
|
||||||
<!--
|
|
||||||
@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
|
|
||||||
-->
|
|
||||||
<link rel="import" href="../../../polymer/polymer.html">
|
|
||||||
<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
|
|
||||||
<link rel="import" href="../../neon-shared-element-animatable-behavior.html">
|
|
||||||
<link rel="import" href="../../../paper-styles/typography.html">
|
|
||||||
<link rel="import" href="../../../paper-styles/color.html">
|
|
||||||
<link rel="import" href="../shared-styles.html">
|
|
||||||
|
|
||||||
<dom-module id="animated-grid">
|
|
||||||
<template>
|
|
||||||
<style include="shared-styles"></style>
|
|
||||||
<style>
|
|
||||||
:host {
|
|
||||||
display: block;
|
|
||||||
background: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tile {
|
|
||||||
display: inline-block;
|
|
||||||
float: left;
|
|
||||||
vertical-align: top;
|
|
||||||
width: calc(100% / 6);
|
|
||||||
height: calc(100% / 3);
|
|
||||||
|
|
||||||
@apply(--paper-font-title);
|
|
||||||
@apply(--layout-vertical);
|
|
||||||
@apply(--layout-center-center);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tile:nth-of-type(1) {
|
|
||||||
width: calc(100% / 3);
|
|
||||||
height: calc(100% / 3 * 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tile:nth-of-type(4) {
|
|
||||||
width: calc(100% / 3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tile:nth-of-type(5) {
|
|
||||||
width: calc(100% / 3);
|
|
||||||
height: calc(100% / 3 * 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tile:nth-of-type(8) {
|
|
||||||
width: calc(100% / 3);
|
|
||||||
height: calc(100% / 3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tile:nth-of-type(9) {
|
|
||||||
position: absolute;
|
|
||||||
top: calc(100% / 3 * 2);
|
|
||||||
left: 0;
|
|
||||||
width: calc(100% / 6);
|
|
||||||
height: calc(100% / 3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tile:nth-of-type(10) {
|
|
||||||
position: absolute;
|
|
||||||
top: calc(100% / 3 * 2);
|
|
||||||
left: calc(100% / 6);;
|
|
||||||
width: calc(100% / 6);
|
|
||||||
height: calc(100% / 3);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<template is="dom-repeat" items="[[config]]">
|
|
||||||
<div class$="[[_computeTileClass(item.color)]]">
|
|
||||||
<span>[[item.value]]</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
</dom-module>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
Polymer({
|
|
||||||
|
|
||||||
is: 'animated-grid',
|
|
||||||
|
|
||||||
behaviors: [
|
|
||||||
Polymer.NeonSharedElementAnimatableBehavior
|
|
||||||
],
|
|
||||||
|
|
||||||
properties: {
|
|
||||||
|
|
||||||
config: {
|
|
||||||
type: Array,
|
|
||||||
value: function() {
|
|
||||||
return [
|
|
||||||
{value: 1, color: 'blue'},
|
|
||||||
{value: 2, color: 'red'},
|
|
||||||
{value: 3, color: 'blue'},
|
|
||||||
{value: 4, color: 'green'},
|
|
||||||
{value: 5, color: 'yellow'},
|
|
||||||
{value: 6, color: 'blue'},
|
|
||||||
{value: 7, color: 'red'},
|
|
||||||
{value: 8, color: 'green'},
|
|
||||||
{value: 9, color: 'yellow'},
|
|
||||||
{value: 10, color: 'red'}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
animationConfig: {
|
|
||||||
type: Object,
|
|
||||||
value: function() {
|
|
||||||
return {
|
|
||||||
'entry': [{
|
|
||||||
name: 'cascaded-animation',
|
|
||||||
animation: 'transform-animation',
|
|
||||||
transformFrom: 'translateY(100%)',
|
|
||||||
transformTo: 'none',
|
|
||||||
timing: {
|
|
||||||
delay: 50
|
|
||||||
}
|
|
||||||
}]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
attached: function() {
|
|
||||||
this.async(function() {
|
|
||||||
var nodeList = Polymer.dom(this.root).querySelectorAll('.tile');
|
|
||||||
this.animationConfig['entry'][0].nodes = Array.prototype.slice.call(nodeList);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
_computeTileClass: function(color) {
|
|
||||||
return 'tile ' + color + '-300';
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,82 +0,0 @@
|
||||||
<!--
|
|
||||||
@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
|
|
||||||
-->
|
|
||||||
<link rel="import" href="../../../polymer/polymer.html">
|
|
||||||
<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
|
|
||||||
<link rel="import" href="../../neon-animatable-behavior.html">
|
|
||||||
<link rel="import" href="../../neon-animation-runner-behavior.html">
|
|
||||||
<link rel="import" href="../../../paper-styles/shadow.html">
|
|
||||||
<link rel="import" href="animated-grid.html">
|
|
||||||
|
|
||||||
<dom-module id="full-page">
|
|
||||||
<template>
|
|
||||||
<style>
|
|
||||||
:host {
|
|
||||||
background: black;
|
|
||||||
visibility: hidden;
|
|
||||||
@apply(--layout-vertical);
|
|
||||||
}
|
|
||||||
|
|
||||||
.toolbar {
|
|
||||||
background: #9c27b0;
|
|
||||||
height: 72px;
|
|
||||||
z-index: 1;
|
|
||||||
@apply(--shadow-elevation-2dp);
|
|
||||||
}
|
|
||||||
|
|
||||||
animated-grid {
|
|
||||||
height: calc(100% - 72px);
|
|
||||||
@apply(--layout-flex);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<div id="toolbar" class="toolbar"></div>
|
|
||||||
<animated-grid id="grid"></animated-grid>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
</dom-module>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
Polymer({
|
|
||||||
|
|
||||||
is: 'full-page',
|
|
||||||
|
|
||||||
behaviors: [
|
|
||||||
Polymer.NeonAnimatableBehavior,
|
|
||||||
Polymer.NeonAnimationRunnerBehavior
|
|
||||||
],
|
|
||||||
|
|
||||||
properties: {
|
|
||||||
|
|
||||||
animationConfig: {
|
|
||||||
type: Object,
|
|
||||||
value: function() {
|
|
||||||
return {
|
|
||||||
'entry': [{
|
|
||||||
name: 'slide-from-top-animation',
|
|
||||||
node: this.$.toolbar
|
|
||||||
}, {
|
|
||||||
animatable: this.$.grid,
|
|
||||||
type: 'entry'
|
|
||||||
}]
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
show: function() {
|
|
||||||
this.style.visibility = 'visible';
|
|
||||||
this.playAnimation('entry');
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,48 +0,0 @@
|
||||||
<!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>neon-animated-pages demo: load</title>
|
|
||||||
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
||||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
|
|
||||||
|
|
||||||
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
|
|
||||||
<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
|
|
||||||
<link rel="import" href="../../neon-animated-pages.html">
|
|
||||||
<link rel="import" href="../../neon-animations.html">
|
|
||||||
<link rel="import" href="full-page.html">
|
|
||||||
|
|
||||||
<style is="custom-style">
|
|
||||||
body {
|
|
||||||
overflow: hidden;
|
|
||||||
@apply(--layout-fullbleed);
|
|
||||||
}
|
|
||||||
full-page {
|
|
||||||
@apply(--layout-fit);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<full-page></full-page>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
document.addEventListener('WebComponentsReady', function() {
|
|
||||||
document.querySelector('full-page').show();
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,167 +0,0 @@
|
||||||
<!--
|
|
||||||
@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
|
|
||||||
-->
|
|
||||||
<link rel="import" href="../../../polymer/polymer.html">
|
|
||||||
<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
|
|
||||||
<link rel="import" href="../../neon-shared-element-animatable-behavior.html">
|
|
||||||
<link rel="import" href="../../../paper-styles/typography.html">
|
|
||||||
<link rel="import" href="../../../paper-styles/color.html">
|
|
||||||
<link rel="import" href="../shared-styles.html">
|
|
||||||
|
|
||||||
<dom-module id="animated-grid">
|
|
||||||
<template>
|
|
||||||
<style include="shared-styles"></style>
|
|
||||||
<style>
|
|
||||||
|
|
||||||
:host {
|
|
||||||
display: block;
|
|
||||||
background: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tile {
|
|
||||||
display: inline-block;
|
|
||||||
float: left;
|
|
||||||
vertical-align: top;
|
|
||||||
width: calc(100% / 6);
|
|
||||||
height: calc(100% / 3);
|
|
||||||
|
|
||||||
@apply(--paper-font-title);
|
|
||||||
@apply(--layout-vertical);
|
|
||||||
@apply(--layout-center-center);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tile:nth-of-type(1) {
|
|
||||||
width: calc(100% / 3);
|
|
||||||
height: calc(100% / 3 * 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tile:nth-of-type(4) {
|
|
||||||
width: calc(100% / 3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tile:nth-of-type(5) {
|
|
||||||
width: calc(100% / 3);
|
|
||||||
height: calc(100% / 3 * 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tile:nth-of-type(8) {
|
|
||||||
width: calc(100% / 3);
|
|
||||||
height: calc(100% / 3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tile:nth-of-type(9) {
|
|
||||||
position: absolute;
|
|
||||||
top: calc(100% / 3 * 2);
|
|
||||||
left: 0;
|
|
||||||
width: calc(100% / 6);
|
|
||||||
height: calc(100% / 3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tile:nth-of-type(10) {
|
|
||||||
position: absolute;
|
|
||||||
top: calc(100% / 3 * 2);
|
|
||||||
left: calc(100% / 6);;
|
|
||||||
width: calc(100% / 6);
|
|
||||||
height: calc(100% / 3);
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<template is="dom-repeat" items="[[config]]">
|
|
||||||
<div class$="[[_computeTileClass(item.color)]]">
|
|
||||||
<span>[[item.value]]</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
</dom-module>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
Polymer({
|
|
||||||
|
|
||||||
is: 'animated-grid',
|
|
||||||
|
|
||||||
behaviors: [
|
|
||||||
Polymer.NeonSharedElementAnimatableBehavior
|
|
||||||
],
|
|
||||||
|
|
||||||
properties: {
|
|
||||||
|
|
||||||
config: {
|
|
||||||
type: Array,
|
|
||||||
value: function() {
|
|
||||||
return [
|
|
||||||
{value: 1, color: 'blue'},
|
|
||||||
{value: 2, color: 'red'},
|
|
||||||
{value: 3, color: 'blue'},
|
|
||||||
{value: 4, color: 'green'},
|
|
||||||
{value: 5, color: 'yellow'},
|
|
||||||
{value: 6, color: 'blue'},
|
|
||||||
{value: 7, color: 'red'},
|
|
||||||
{value: 8, color: 'green'},
|
|
||||||
{value: 9, color: 'yellow'},
|
|
||||||
{value: 10, color: 'red'}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
animationConfig: {
|
|
||||||
type: Object,
|
|
||||||
value: function() {
|
|
||||||
return {
|
|
||||||
'exit': [{
|
|
||||||
name: 'ripple-animation',
|
|
||||||
id: 'ripple',
|
|
||||||
fromPage: this
|
|
||||||
}, {
|
|
||||||
name: 'hero-animation',
|
|
||||||
id: 'hero',
|
|
||||||
fromPage: this
|
|
||||||
}]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
listeners: {
|
|
||||||
click: '_onClick'
|
|
||||||
},
|
|
||||||
|
|
||||||
_computeTileClass: function(color) {
|
|
||||||
return 'tile ' + color + '-300';
|
|
||||||
},
|
|
||||||
|
|
||||||
_onClick: function(event) {
|
|
||||||
var target = event.target;
|
|
||||||
while (target !== this && !target._templateInstance) {
|
|
||||||
target = target.parentNode;
|
|
||||||
}
|
|
||||||
|
|
||||||
// configure the page animation
|
|
||||||
this.sharedElements = {
|
|
||||||
'hero': target,
|
|
||||||
'ripple': target
|
|
||||||
};
|
|
||||||
this.animationConfig['exit'][0].gesture = {
|
|
||||||
x: event.x,
|
|
||||||
y: event.y
|
|
||||||
};
|
|
||||||
|
|
||||||
this.fire('tile-click', {
|
|
||||||
tile: target,
|
|
||||||
data: target._templateInstance.item
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,120 +0,0 @@
|
||||||
<!--
|
|
||||||
@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
|
|
||||||
-->
|
|
||||||
<link rel="import" href="../../../polymer/polymer.html">
|
|
||||||
<link rel="import" href="../../neon-shared-element-animatable-behavior.html">
|
|
||||||
<link rel="import" href="../shared-styles.html">
|
|
||||||
|
|
||||||
<dom-module id="fullsize-page-with-card">
|
|
||||||
<template>
|
|
||||||
<style include="shared-styles"></style>
|
|
||||||
<style>
|
|
||||||
|
|
||||||
:host {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fixed {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
height: 100vh;
|
|
||||||
width: 100vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
position: relative;
|
|
||||||
margin: 200px 100px 0;
|
|
||||||
height: 700px;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<div id="fixed" class$="[[_computeFixedBackgroundClass(color)]]"></div>
|
|
||||||
<div id="card" class$="[[_computeCardClass(color)]]"></div>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
</dom-module>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
Polymer({
|
|
||||||
|
|
||||||
is: 'fullsize-page-with-card',
|
|
||||||
|
|
||||||
behaviors: [
|
|
||||||
Polymer.NeonSharedElementAnimatableBehavior
|
|
||||||
],
|
|
||||||
|
|
||||||
properties: {
|
|
||||||
|
|
||||||
color: {
|
|
||||||
type: String
|
|
||||||
},
|
|
||||||
|
|
||||||
sharedElements: {
|
|
||||||
type: Object,
|
|
||||||
value: function() {
|
|
||||||
return {
|
|
||||||
'hero': this.$.card,
|
|
||||||
'ripple': this.$.fixed
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
animationConfig: {
|
|
||||||
type: Object,
|
|
||||||
value: function() {
|
|
||||||
return {
|
|
||||||
'entry': [{
|
|
||||||
name: 'ripple-animation',
|
|
||||||
id: 'ripple',
|
|
||||||
toPage: this,
|
|
||||||
}, {
|
|
||||||
name: 'hero-animation',
|
|
||||||
id: 'hero',
|
|
||||||
toPage: this,
|
|
||||||
timing: {
|
|
||||||
delay: 150
|
|
||||||
}
|
|
||||||
}],
|
|
||||||
'exit': [{
|
|
||||||
name: 'fade-out-animation',
|
|
||||||
node: this.$.fixed
|
|
||||||
}, {
|
|
||||||
name: 'transform-animation',
|
|
||||||
transformFrom: 'none',
|
|
||||||
transformTo: 'translate(0px,-200vh) scale(0.9,1)',
|
|
||||||
node: this.$.card
|
|
||||||
}]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
_computeCardClass: function(color) {
|
|
||||||
var cls = 'card';
|
|
||||||
if (color) {
|
|
||||||
cls += ' ' + color + '-300';
|
|
||||||
}
|
|
||||||
return cls;
|
|
||||||
},
|
|
||||||
|
|
||||||
_computeFixedBackgroundClass: function(color) {
|
|
||||||
var cls = 'fixed';
|
|
||||||
if (color) {
|
|
||||||
cls += ' ' + color + '-100';
|
|
||||||
}
|
|
||||||
return cls;
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,63 +0,0 @@
|
||||||
<!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>neon-animated-pages demo: grid</title>
|
|
||||||
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
||||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
|
|
||||||
|
|
||||||
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
|
|
||||||
<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
|
|
||||||
<link rel="import" href="../../neon-animations.html">
|
|
||||||
<link rel="import" href="reprojected-pages.html">
|
|
||||||
<link rel="import" href="animated-grid.html">
|
|
||||||
<link rel="import" href="fullsize-page-with-card.html">
|
|
||||||
|
|
||||||
<style is="custom-style">
|
|
||||||
body {
|
|
||||||
overflow: hidden;
|
|
||||||
@apply(--layout-fullbleed);
|
|
||||||
}
|
|
||||||
reprojected-pages {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<template is="dom-bind">
|
|
||||||
|
|
||||||
<reprojected-pages id="pages" selected="0">
|
|
||||||
<animated-grid on-tile-click="_onTileClick"></animated-grid>
|
|
||||||
<fullsize-page-with-card id="fullsize-card" hero-id="hero" on-click="_onFullsizeClick">
|
|
||||||
</fullsize-page-with-card>
|
|
||||||
</reprojected-pages>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
var scope = document.querySelector('template[is="dom-bind"]');
|
|
||||||
|
|
||||||
scope._onTileClick = function(event) {
|
|
||||||
this.$['fullsize-card'].color = event.detail.data.color;
|
|
||||||
this.$.pages.selected = 1;
|
|
||||||
};
|
|
||||||
|
|
||||||
scope._onFullsizeClick = function(event) {
|
|
||||||
this.$.pages.selected = 0;
|
|
||||||
};
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,45 +0,0 @@
|
||||||
<!--
|
|
||||||
@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
|
|
||||||
-->
|
|
||||||
|
|
||||||
<link rel="import" href="../../../polymer/polymer.html">
|
|
||||||
<link rel="import" href="../../neon-animated-pages.html">
|
|
||||||
|
|
||||||
<dom-module id="reprojected-pages">
|
|
||||||
<template>
|
|
||||||
<style>
|
|
||||||
neon-animated-pages {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<neon-animated-pages selected="{{selected}}">
|
|
||||||
<content></content>
|
|
||||||
</neon-animated-pages>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
</dom-module>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
Polymer({
|
|
||||||
|
|
||||||
is: 'reprojected-pages',
|
|
||||||
|
|
||||||
properties: {
|
|
||||||
|
|
||||||
selected: {
|
|
||||||
type: String,
|
|
||||||
notify: true
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,47 +0,0 @@
|
||||||
<!--
|
|
||||||
@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
|
|
||||||
-->
|
|
||||||
|
|
||||||
<dom-module id="shared-styles">
|
|
||||||
<template>
|
|
||||||
<style>
|
|
||||||
.red-100 {
|
|
||||||
background: var(--google-red-100);
|
|
||||||
}
|
|
||||||
|
|
||||||
.yellow-100 {
|
|
||||||
background: var(--google-yellow-100);
|
|
||||||
}
|
|
||||||
|
|
||||||
.blue-100 {
|
|
||||||
background: var(--google-blue-100);
|
|
||||||
}
|
|
||||||
|
|
||||||
.green-100 {
|
|
||||||
background: var(--google-green-100);
|
|
||||||
}
|
|
||||||
|
|
||||||
.red-300 {
|
|
||||||
background: var(--google-red-300);
|
|
||||||
}
|
|
||||||
|
|
||||||
.yellow-300 {
|
|
||||||
background: var(--google-yellow-300);
|
|
||||||
}
|
|
||||||
|
|
||||||
.blue-300 {
|
|
||||||
background: var(--google-blue-300);
|
|
||||||
}
|
|
||||||
|
|
||||||
.green-300 {
|
|
||||||
background: var(--google-green-300);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</template>
|
|
||||||
</dom-module>
|
|
||||||
|
|
@ -1,107 +0,0 @@
|
||||||
<!--
|
|
||||||
@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
|
|
||||||
-->
|
|
||||||
<link rel="import" href="../../../polymer/polymer.html">
|
|
||||||
<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
|
|
||||||
<link rel="import" href="../../neon-shared-element-animatable-behavior.html">
|
|
||||||
|
|
||||||
<dom-module id="circles-page">
|
|
||||||
<template>
|
|
||||||
<style>
|
|
||||||
:host {
|
|
||||||
@apply(--layout-horizontal);
|
|
||||||
@apply(--layout-center-center);
|
|
||||||
}
|
|
||||||
|
|
||||||
.circle {
|
|
||||||
display: inline-block;
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
|
||||||
margin: 16px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: var(--color-one);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<div class="circle"></div>
|
|
||||||
<div class="circle"></div>
|
|
||||||
<div class="circle"></div>
|
|
||||||
<div class="circle"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
</dom-module>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
Polymer({
|
|
||||||
|
|
||||||
is: 'circles-page',
|
|
||||||
|
|
||||||
behaviors: [
|
|
||||||
Polymer.NeonSharedElementAnimatableBehavior
|
|
||||||
],
|
|
||||||
|
|
||||||
properties: {
|
|
||||||
|
|
||||||
animationConfig: {
|
|
||||||
value: function() {
|
|
||||||
var circles = Polymer.dom(this.root).querySelectorAll('.circle');
|
|
||||||
var circlesArray = Array.prototype.slice.call(circles);
|
|
||||||
return {
|
|
||||||
'entry': [{
|
|
||||||
name: 'cascaded-animation',
|
|
||||||
animation: 'scale-up-animation',
|
|
||||||
nodes: circlesArray
|
|
||||||
}],
|
|
||||||
|
|
||||||
'exit': [{
|
|
||||||
name: 'hero-animation',
|
|
||||||
id: 'hero',
|
|
||||||
fromPage: this
|
|
||||||
}, {
|
|
||||||
name: 'cascaded-animation',
|
|
||||||
animation: 'scale-down-animation'
|
|
||||||
}]
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
listeners: {
|
|
||||||
'click': '_onClick'
|
|
||||||
},
|
|
||||||
|
|
||||||
_onClick: function(event) {
|
|
||||||
var target = event.target;
|
|
||||||
if (target.classList.contains('circle')) {
|
|
||||||
// configure the page animation
|
|
||||||
this.sharedElements = {
|
|
||||||
'hero': target
|
|
||||||
};
|
|
||||||
|
|
||||||
var nodesToScale = [];
|
|
||||||
var circles = Polymer.dom(this.root).querySelectorAll('.circle');
|
|
||||||
for (var node, index = 0; node = circles[index]; index++) {
|
|
||||||
if (node !== event.target) {
|
|
||||||
nodesToScale.push(node);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.animationConfig['exit'][1].nodes = nodesToScale;
|
|
||||||
|
|
||||||
this.fire('circle-click');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,70 +0,0 @@
|
||||||
<!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>neon-animated-pages demo: tiles</title>
|
|
||||||
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
||||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
|
|
||||||
|
|
||||||
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
|
|
||||||
|
|
||||||
<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
|
|
||||||
<link rel="import" href="../../neon-animated-pages.html">
|
|
||||||
<link rel="import" href="../../neon-animations.html">
|
|
||||||
<link rel="import" href="../../../paper-styles/color.html">
|
|
||||||
<link rel="import" href="circles-page.html">
|
|
||||||
<link rel="import" href="squares-page.html">
|
|
||||||
|
|
||||||
<style is="custom-style">
|
|
||||||
body {
|
|
||||||
overflow: hidden;
|
|
||||||
@apply(--layout-fullbleed);
|
|
||||||
}
|
|
||||||
neon-animated-pages {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
:root {
|
|
||||||
--color-one: var(--paper-cyan-300);
|
|
||||||
--color-two: var(--paper-orange-500);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<template is="dom-bind">
|
|
||||||
|
|
||||||
<neon-animated-pages id="pages" selected="0">
|
|
||||||
<circles-page on-circle-click="_onCircleClick"></circles-page>
|
|
||||||
<squares-page on-click="_onSquaresClick"></squares-page>
|
|
||||||
</neon-animated-pages>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
var scope = document.querySelector('template[is="dom-bind"]');
|
|
||||||
|
|
||||||
scope._onCircleClick = function(event) {
|
|
||||||
this.$.pages.selected = 1;
|
|
||||||
};
|
|
||||||
|
|
||||||
scope._onSquaresClick = function(event) {
|
|
||||||
this.$.pages.selected = 0;
|
|
||||||
};
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,100 +0,0 @@
|
||||||
<!--
|
|
||||||
@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
|
|
||||||
-->
|
|
||||||
<link rel="import" href="../../../polymer/polymer.html">
|
|
||||||
<link rel="import" href="../../neon-shared-element-animatable-behavior.html">
|
|
||||||
|
|
||||||
<dom-module id="squares-page">
|
|
||||||
<template>
|
|
||||||
<style>
|
|
||||||
.header {
|
|
||||||
height: 40%;
|
|
||||||
background: var(--color-one);
|
|
||||||
}
|
|
||||||
|
|
||||||
.body {
|
|
||||||
text-align: center;
|
|
||||||
padding: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.square {
|
|
||||||
display: inline-block;
|
|
||||||
width: 150px;
|
|
||||||
height: 150px;
|
|
||||||
margin: 8px;
|
|
||||||
background: var(--color-two);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<div id="header" class="header"></div>
|
|
||||||
|
|
||||||
<div class="body">
|
|
||||||
<div class="square"></div>
|
|
||||||
<div class="square"></div>
|
|
||||||
<div class="square"></div>
|
|
||||||
<div class="square"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
</dom-module>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
Polymer({
|
|
||||||
|
|
||||||
is: 'squares-page',
|
|
||||||
|
|
||||||
behaviors: [
|
|
||||||
Polymer.NeonSharedElementAnimatableBehavior
|
|
||||||
],
|
|
||||||
|
|
||||||
properties: {
|
|
||||||
|
|
||||||
sharedElements: {
|
|
||||||
value: function() {
|
|
||||||
return {
|
|
||||||
'hero': this.$.header
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
animationConfig: {
|
|
||||||
value: function() {
|
|
||||||
var squares = Polymer.dom(this.root).querySelectorAll('.square');
|
|
||||||
var squaresArray = Array.prototype.slice.call(squares);
|
|
||||||
return {
|
|
||||||
'entry': [{
|
|
||||||
name: 'hero-animation',
|
|
||||||
id: 'hero',
|
|
||||||
toPage: this
|
|
||||||
}, {
|
|
||||||
name: 'cascaded-animation',
|
|
||||||
animation: 'transform-animation',
|
|
||||||
transformFrom: 'translateY(100%)',
|
|
||||||
nodes: squaresArray
|
|
||||||
}],
|
|
||||||
|
|
||||||
'exit': [{
|
|
||||||
name: 'slide-up-animation',
|
|
||||||
node: this.$.header
|
|
||||||
}, {
|
|
||||||
name: 'cascaded-animation',
|
|
||||||
animation: 'transform-animation',
|
|
||||||
transformTo: 'translateY(60vh)',
|
|
||||||
nodes: squaresArray
|
|
||||||
}]
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,314 +0,0 @@
|
||||||
---
|
|
||||||
title: neon-animation
|
|
||||||
summary: "A short guide to neon-animation and neon-animated-pages"
|
|
||||||
tags: ['animation','core-animated-pages']
|
|
||||||
elements: ['neon-animation','neon-animated-pages']
|
|
||||||
updated: 2015-05-26
|
|
||||||
---
|
|
||||||
|
|
||||||
# neon-animation
|
|
||||||
|
|
||||||
`neon-animation` is a suite of elements and behaviors to implement pluggable animated transitions for Polymer Elements using [Web Animations](https://w3c.github.io/web-animations/).
|
|
||||||
|
|
||||||
*Warning: The API may change.*
|
|
||||||
|
|
||||||
* [A basic animatable element](#basic)
|
|
||||||
* [Animation configuration](#configuration)
|
|
||||||
* [Animation types](#configuration-types)
|
|
||||||
* [Configuration properties](#configuration-properties)
|
|
||||||
* [Using multiple animations](#configuration-multiple)
|
|
||||||
* [Running animations encapsulated in children nodes](#configuration-encapsulation)
|
|
||||||
* [Page transitions](#page-transitions)
|
|
||||||
* [Shared element animations](#shared-element)
|
|
||||||
* [Declarative page transitions](#declarative-page)
|
|
||||||
* [Included animations](#animations)
|
|
||||||
* [Demos](#demos)
|
|
||||||
|
|
||||||
<a name="basic"></a>
|
|
||||||
## A basic animatable element
|
|
||||||
|
|
||||||
Elements that can be animated should implement the `Polymer.NeonAnimatableBehavior` behavior, or `Polymer.NeonAnimationRunnerBehavior` if they're also responsible for running an animation.
|
|
||||||
|
|
||||||
```js
|
|
||||||
Polymer({
|
|
||||||
is: 'my-animatable',
|
|
||||||
behaviors: [
|
|
||||||
Polymer.NeonAnimationRunnerBehavior
|
|
||||||
],
|
|
||||||
properties: {
|
|
||||||
animationConfig: {
|
|
||||||
value: function() {
|
|
||||||
return {
|
|
||||||
// provided by neon-animation/animations/scale-down-animation.html
|
|
||||||
name: 'scale-down-animation',
|
|
||||||
node: this
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
listeners: {
|
|
||||||
// this event is fired when the animation finishes
|
|
||||||
'neon-animation-finish': '_onNeonAnimationFinish'
|
|
||||||
},
|
|
||||||
animate: function() {
|
|
||||||
// run scale-down-animation
|
|
||||||
this.playAnimation();
|
|
||||||
},
|
|
||||||
_onNeonAnimationFinish: function() {
|
|
||||||
console.log('animation done!');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
[Live demo](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/doc/basic.html)
|
|
||||||
|
|
||||||
<a name="configuration"></a>
|
|
||||||
## Animation configuration
|
|
||||||
|
|
||||||
<a name="configuration-types"></a>
|
|
||||||
### Animation types
|
|
||||||
|
|
||||||
An element might run different animations, for example it might do something different when it enters the view and when it exits from view. You can set the `animationConfig` property to a map from an animation type to configuration.
|
|
||||||
|
|
||||||
```js
|
|
||||||
Polymer({
|
|
||||||
is: 'my-dialog',
|
|
||||||
behaviors: [
|
|
||||||
Polymer.NeonAnimationRunnerBehavior
|
|
||||||
],
|
|
||||||
properties: {
|
|
||||||
opened: {
|
|
||||||
type: Boolean
|
|
||||||
},
|
|
||||||
animationConfig: {
|
|
||||||
value: function() {
|
|
||||||
return {
|
|
||||||
'entry': {
|
|
||||||
// provided by neon-animation/animations/scale-up-animation.html
|
|
||||||
name: 'scale-up-animation',
|
|
||||||
node: this
|
|
||||||
},
|
|
||||||
'exit': {
|
|
||||||
// provided by neon-animation-animations/fade-out-animation.html
|
|
||||||
name: 'fade-out-animation',
|
|
||||||
node: this
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
listeners: {
|
|
||||||
'neon-animation-finish': '_onNeonAnimationFinish'
|
|
||||||
},
|
|
||||||
show: function() {
|
|
||||||
this.opened = true;
|
|
||||||
this.style.display = 'inline-block';
|
|
||||||
// run scale-up-animation
|
|
||||||
this.playAnimation('entry');
|
|
||||||
},
|
|
||||||
hide: function() {
|
|
||||||
this.opened = false;
|
|
||||||
// run fade-out-animation
|
|
||||||
this.playAnimation('exit');
|
|
||||||
},
|
|
||||||
_onNeonAnimationFinish: function() {
|
|
||||||
if (!this.opened) {
|
|
||||||
this.style.display = 'none';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
[Live demo](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/doc/types.html)
|
|
||||||
|
|
||||||
You can also use the convenience properties `entryAnimation` and `exitAnimation` to set `entry` and `exit` animations:
|
|
||||||
|
|
||||||
```js
|
|
||||||
properties: {
|
|
||||||
entryAnimation: {
|
|
||||||
value: 'scale-up-animation'
|
|
||||||
},
|
|
||||||
exitAnimation: {
|
|
||||||
value: 'fade-out-animation'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
<a name="configuration-properties"></a>
|
|
||||||
### Configuration properties
|
|
||||||
|
|
||||||
You can pass additional parameters to configure an animation in the animation configuration object.
|
|
||||||
All animations should accept the following properties:
|
|
||||||
|
|
||||||
* `name`: The name of an animation, ie. an element implementing `Polymer.NeonAnimationBehavior`.
|
|
||||||
* `node`: The target node to apply the animation to. Defaults to `this`.
|
|
||||||
* `timing`: Timing properties to use in this animation. They match the [Web Animations Animation Effect Timing interface](https://w3c.github.io/web-animations/#the-animationeffecttiming-interface). The
|
|
||||||
properties include the following:
|
|
||||||
* `duration`: The duration of the animation in milliseconds.
|
|
||||||
* `delay`: The delay before the start of the animation in milliseconds.
|
|
||||||
* `easing`: A timing function for the animation. Matches the CSS timing function values.
|
|
||||||
|
|
||||||
Animations may define additional configuration properties and they are listed in their documentation.
|
|
||||||
|
|
||||||
<a name="configuration-multiple"></a>
|
|
||||||
### Using multiple animations
|
|
||||||
|
|
||||||
Set the animation configuration to an array to combine animations, like this:
|
|
||||||
|
|
||||||
```js
|
|
||||||
animationConfig: {
|
|
||||||
value: function() {
|
|
||||||
return {
|
|
||||||
// fade-in-animation is run with a 50ms delay from slide-down-animation
|
|
||||||
'entry': [{
|
|
||||||
name: 'slide-down-animation',
|
|
||||||
node: this
|
|
||||||
}, {
|
|
||||||
name: 'fade-in-animation',
|
|
||||||
node: this,
|
|
||||||
timing: {delay: 50}
|
|
||||||
}]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
<a name="configuration-encapsulation"></a>
|
|
||||||
### Running animations encapsulated in children nodes
|
|
||||||
|
|
||||||
You can include animations in the configuration that are encapsulated in a child element that implement `Polymer.NeonAnimatableBehavior` with the `animatable` property.
|
|
||||||
|
|
||||||
```js
|
|
||||||
animationConfig: {
|
|
||||||
value: function() {
|
|
||||||
return {
|
|
||||||
// run fade-in-animation on this, and the entry animation on this.$.myAnimatable
|
|
||||||
'entry': [
|
|
||||||
{name: 'fade-in-animation', node: this},
|
|
||||||
{animatable: this.$.myAnimatable, type: 'entry'}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
<a name="page-transitions"></a>
|
|
||||||
## Page transitions
|
|
||||||
|
|
||||||
*The artist formerly known as `<core-animated-pages>`*
|
|
||||||
|
|
||||||
The `neon-animated-pages` element manages a set of pages to switch between, and runs animations between the page transitions. It implements the `Polymer.IronSelectableBehavior` behavior. Each child node should implement `Polymer.NeonAnimatableBehavior` and define the `entry` and `exit` animations. During a page transition, the `entry` animation is run on the new page and the `exit` animation is run on the old page.
|
|
||||||
|
|
||||||
<a name="shared-element"></a>
|
|
||||||
### Shared element animations
|
|
||||||
|
|
||||||
Shared element animations work on multiple nodes. For example, a "hero" animation is used during a page transition to make two elements from separate pages appear to animate as a single element. Shared element animation configurations have an `id` property that identify they belong in the same animation. Elements containing shared elements also have a `sharedElements` property defines a map from `id` to element, the element involved with the animation.
|
|
||||||
|
|
||||||
In the incoming page:
|
|
||||||
|
|
||||||
```js
|
|
||||||
properties: {
|
|
||||||
animationConfig: {
|
|
||||||
value: function() {
|
|
||||||
return {
|
|
||||||
// the incoming page defines the 'entry' animation
|
|
||||||
'entry': {
|
|
||||||
name: 'hero-animation',
|
|
||||||
id: 'hero',
|
|
||||||
toPage: this
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
sharedElements: {
|
|
||||||
value: function() {
|
|
||||||
return {
|
|
||||||
'hero': this.$.hero
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
In the outgoing page:
|
|
||||||
|
|
||||||
```js
|
|
||||||
properties: {
|
|
||||||
animationConfig: {
|
|
||||||
value: function() {
|
|
||||||
return {
|
|
||||||
// the outgoing page defines the 'exit' animation
|
|
||||||
'exit': {
|
|
||||||
name: 'hero-animation',
|
|
||||||
id: 'hero',
|
|
||||||
fromPage: this
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
sharedElements: {
|
|
||||||
value: function() {
|
|
||||||
return {
|
|
||||||
'hero': this.$.otherHero
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
<a name="declarative-page"></a>
|
|
||||||
### Declarative page transitions
|
|
||||||
|
|
||||||
For convenience, if you define the `entry-animation` and `exit-animation` attributes on `<neon-animated-pages>`, those animations will apply for all page transitions.
|
|
||||||
|
|
||||||
For example:
|
|
||||||
|
|
||||||
```js
|
|
||||||
<neon-animated-pages id="pages" class="flex" selected="[[selected]]" entry-animation="slide-from-right-animation" exit-animation="slide-left-animation">
|
|
||||||
<neon-animatable>1</neon-animatable>
|
|
||||||
<neon-animatable>2</neon-animatable>
|
|
||||||
<neon-animatable>3</neon-animatable>
|
|
||||||
<neon-animatable>4</neon-animatable>
|
|
||||||
<neon-animatable>5</neon-animatable>
|
|
||||||
</neon-animated-pages>
|
|
||||||
```
|
|
||||||
|
|
||||||
The new page will slide in from the right, and the old page slide away to the left.
|
|
||||||
|
|
||||||
<a name="animations"></a>
|
|
||||||
## Included animations
|
|
||||||
|
|
||||||
Single element animations:
|
|
||||||
|
|
||||||
* `fade-in-animation` Animates opacity from `0` to `1`;
|
|
||||||
* `fade-out-animation` Animates opacity from `1` to `0`;
|
|
||||||
* `scale-down-animation` Animates transform from `scale(1)` to `scale(0)`;
|
|
||||||
* `scale-up-animation` Animates transform from `scale(0)` to `scale(1)`;
|
|
||||||
* `slide-down-animation` Animates transform from `none` to `translateY(100%)`;
|
|
||||||
* `slide-up-animation` Animates transform from `none` to `translateY(-100%)`;
|
|
||||||
* `slide-from-top-animation` Animates transform from `translateY(-100%)` to `none`;
|
|
||||||
* `slide-from-bottom-animation` Animates transform from `translateY(100%)` to `none`;
|
|
||||||
* `slide-left-animation` Animates transform from `none` to `translateX(-100%)`;
|
|
||||||
* `slide-right-animation` Animates transform from `none` to `translateX(100%)`;
|
|
||||||
* `slide-from-left-animation` Animates transform from `translateX(-100%)` to `none`;
|
|
||||||
* `slide-from-right-animation` Animates transform from `translateX(100%)` to `none`;
|
|
||||||
* `transform-animation` Animates a custom transform.
|
|
||||||
|
|
||||||
Note that there is a restriction that only one transform animation can be applied on the same element at a time. Use the custom `transform-animation` to combine transform properties.
|
|
||||||
|
|
||||||
Shared element animations
|
|
||||||
|
|
||||||
* `hero-animation` Animates an element such that it looks like it scales and transforms from another element.
|
|
||||||
* `ripple-animation` Animates an element to full screen such that it looks like it ripples from another element.
|
|
||||||
|
|
||||||
Group animations
|
|
||||||
* `cascaded-animation` Applys an animation to an array of elements with a delay between each.
|
|
||||||
|
|
||||||
<a name="demos"></a>
|
|
||||||
## Demos
|
|
||||||
|
|
||||||
* [Grid to full screen](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/grid/index.html)
|
|
||||||
* [Animation on load](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/load/index.html)
|
|
||||||
* [List item to detail](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/list/index.html) (For narrow width)
|
|
||||||
* [Dots to squares](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/tiles/index.html)
|
|
||||||
* [Declarative](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/declarative/index.html)
|
|
||||||
|
|
@ -1,30 +0,0 @@
|
||||||
<!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>
|
|
||||||
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
|
|
||||||
|
|
||||||
<title>neon-animation</title>
|
|
||||||
|
|
||||||
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
|
|
||||||
|
|
||||||
<link rel="import" href="../polymer/polymer.html">
|
|
||||||
<link rel="import" href="../iron-component-page/iron-component-page.html">
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<iron-component-page></iron-component-page>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,150 +0,0 @@
|
||||||
<!--
|
|
||||||
@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
|
|
||||||
-->
|
|
||||||
|
|
||||||
<link rel="import" href="../polymer/polymer.html">
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
/**
|
|
||||||
* `Polymer.NeonAnimatableBehavior` is implemented by elements containing animations for use with
|
|
||||||
* elements implementing `Polymer.NeonAnimationRunnerBehavior`.
|
|
||||||
* @polymerBehavior
|
|
||||||
*/
|
|
||||||
Polymer.NeonAnimatableBehavior = {
|
|
||||||
|
|
||||||
properties: {
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Animation configuration. See README for more info.
|
|
||||||
*/
|
|
||||||
animationConfig: {
|
|
||||||
type: Object
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Convenience property for setting an 'entry' animation. Do not set `animationConfig.entry`
|
|
||||||
* manually if using this. The animated node is set to `this` if using this property.
|
|
||||||
*/
|
|
||||||
entryAnimation: {
|
|
||||||
observer: '_entryAnimationChanged',
|
|
||||||
type: String
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Convenience property for setting an 'exit' animation. Do not set `animationConfig.exit`
|
|
||||||
* manually if using this. The animated node is set to `this` if using this property.
|
|
||||||
*/
|
|
||||||
exitAnimation: {
|
|
||||||
observer: '_exitAnimationChanged',
|
|
||||||
type: String
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
_entryAnimationChanged: function() {
|
|
||||||
this.animationConfig = this.animationConfig || {};
|
|
||||||
this.animationConfig['entry'] = [{
|
|
||||||
name: this.entryAnimation,
|
|
||||||
node: this
|
|
||||||
}];
|
|
||||||
},
|
|
||||||
|
|
||||||
_exitAnimationChanged: function() {
|
|
||||||
this.animationConfig = this.animationConfig || {};
|
|
||||||
this.animationConfig['exit'] = [{
|
|
||||||
name: this.exitAnimation,
|
|
||||||
node: this
|
|
||||||
}];
|
|
||||||
},
|
|
||||||
|
|
||||||
_copyProperties: function(config1, config2) {
|
|
||||||
// shallowly copy properties from config2 to config1
|
|
||||||
for (var property in config2) {
|
|
||||||
config1[property] = config2[property];
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
_cloneConfig: function(config) {
|
|
||||||
var clone = {
|
|
||||||
isClone: true
|
|
||||||
};
|
|
||||||
this._copyProperties(clone, config);
|
|
||||||
return clone;
|
|
||||||
},
|
|
||||||
|
|
||||||
_getAnimationConfigRecursive: function(type, map, allConfigs) {
|
|
||||||
if (!this.animationConfig) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if(this.animationConfig.value && typeof this.animationConfig.value === 'function') {
|
|
||||||
this._warn(this._logf('playAnimation', "Please put 'animationConfig' inside of your components 'properties' object instead of outside of it."));
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// type is optional
|
|
||||||
var thisConfig;
|
|
||||||
if (type) {
|
|
||||||
thisConfig = this.animationConfig[type];
|
|
||||||
} else {
|
|
||||||
thisConfig = this.animationConfig;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!Array.isArray(thisConfig)) {
|
|
||||||
thisConfig = [thisConfig];
|
|
||||||
}
|
|
||||||
|
|
||||||
// iterate animations and recurse to process configurations from child nodes
|
|
||||||
if (thisConfig) {
|
|
||||||
for (var config, index = 0; config = thisConfig[index]; index++) {
|
|
||||||
if (config.animatable) {
|
|
||||||
config.animatable._getAnimationConfigRecursive(config.type || type, map, allConfigs);
|
|
||||||
} else {
|
|
||||||
if (config.id) {
|
|
||||||
var cachedConfig = map[config.id];
|
|
||||||
if (cachedConfig) {
|
|
||||||
// merge configurations with the same id, making a clone lazily
|
|
||||||
if (!cachedConfig.isClone) {
|
|
||||||
map[config.id] = this._cloneConfig(cachedConfig)
|
|
||||||
cachedConfig = map[config.id];
|
|
||||||
}
|
|
||||||
this._copyProperties(cachedConfig, config);
|
|
||||||
} else {
|
|
||||||
// put any configs with an id into a map
|
|
||||||
map[config.id] = config;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
allConfigs.push(config);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* An element implementing `Polymer.NeonAnimationRunnerBehavior` calls this method to configure
|
|
||||||
* an animation with an optional type. Elements implementing `Polymer.NeonAnimatableBehavior`
|
|
||||||
* should define the property `animationConfig`, which is either a configuration object
|
|
||||||
* or a map of animation type to array of configuration objects.
|
|
||||||
*/
|
|
||||||
getAnimationConfig: function(type) {
|
|
||||||
var map = {};
|
|
||||||
var allConfigs = [];
|
|
||||||
this._getAnimationConfigRecursive(type, map, allConfigs);
|
|
||||||
// append the configurations saved in the map to the array
|
|
||||||
for (var key in map) {
|
|
||||||
allConfigs.push(map[key]);
|
|
||||||
}
|
|
||||||
return allConfigs;
|
|
||||||
}
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,57 +0,0 @@
|
||||||
<!--
|
|
||||||
@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
|
|
||||||
-->
|
|
||||||
|
|
||||||
<link rel="import" href="../polymer/polymer.html">
|
|
||||||
<link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
|
|
||||||
<link rel="import" href="neon-animatable-behavior.html">
|
|
||||||
|
|
||||||
<!--
|
|
||||||
`<neon-animatable>` is a simple container element implementing `Polymer.NeonAnimatableBehavior`. This is a convenience element for use with `<neon-animated-pages>`.
|
|
||||||
|
|
||||||
```
|
|
||||||
<neon-animated-pages selected="0"
|
|
||||||
entry-animation="slide-from-right-animation"
|
|
||||||
exit-animation="slide-left-animation">
|
|
||||||
<neon-animatable>1</neon-animatable>
|
|
||||||
<neon-animatable>2</neon-animatable>
|
|
||||||
</neon-animated-pages>
|
|
||||||
```
|
|
||||||
-->
|
|
||||||
|
|
||||||
<dom-module id="neon-animatable">
|
|
||||||
|
|
||||||
<style>
|
|
||||||
|
|
||||||
:host {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<content></content>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
</dom-module>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
Polymer({
|
|
||||||
|
|
||||||
is: 'neon-animatable',
|
|
||||||
|
|
||||||
behaviors: [
|
|
||||||
Polymer.NeonAnimatableBehavior,
|
|
||||||
Polymer.IronResizableBehavior
|
|
||||||
]
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,224 +0,0 @@
|
||||||
<!--
|
|
||||||
@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
|
|
||||||
-->
|
|
||||||
<link rel="import" href="../polymer/polymer.html">
|
|
||||||
<link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
|
|
||||||
<link rel="import" href="../iron-selector/iron-selectable.html">
|
|
||||||
<link rel="import" href="neon-animation-runner-behavior.html">
|
|
||||||
<link rel="import" href="animations/opaque-animation.html">
|
|
||||||
|
|
||||||
<!--
|
|
||||||
Material design: [Meaningful transitions](https://www.google.com/design/spec/animation/meaningful-transitions.html)
|
|
||||||
|
|
||||||
`neon-animated-pages` manages a set of pages and runs an animation when switching between them. Its
|
|
||||||
children pages should implement `Polymer.NeonAnimatableBehavior` and define `entry` and `exit`
|
|
||||||
animations to be run when switching to or switching out of the page.
|
|
||||||
|
|
||||||
@group Neon Elements
|
|
||||||
@element neon-animated-pages
|
|
||||||
@demo demo/index.html
|
|
||||||
-->
|
|
||||||
|
|
||||||
<dom-module id="neon-animated-pages">
|
|
||||||
|
|
||||||
<style>
|
|
||||||
|
|
||||||
:host {
|
|
||||||
display: block;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
:host > ::content > * {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
:host > ::content > :not(.iron-selected):not(.neon-animating) {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:host > ::content > .neon-animating {
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<content id="content"></content>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
</dom-module>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
(function() {
|
|
||||||
|
|
||||||
Polymer({
|
|
||||||
|
|
||||||
is: 'neon-animated-pages',
|
|
||||||
|
|
||||||
behaviors: [
|
|
||||||
Polymer.IronResizableBehavior,
|
|
||||||
Polymer.IronSelectableBehavior,
|
|
||||||
Polymer.NeonAnimationRunnerBehavior
|
|
||||||
],
|
|
||||||
|
|
||||||
properties: {
|
|
||||||
|
|
||||||
activateEvent: {
|
|
||||||
type: String,
|
|
||||||
value: ''
|
|
||||||
},
|
|
||||||
|
|
||||||
// if true, the initial page selection will also be animated according to its animation config.
|
|
||||||
animateInitialSelection: {
|
|
||||||
type: Boolean,
|
|
||||||
value: false
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
listeners: {
|
|
||||||
'iron-select': '_onIronSelect',
|
|
||||||
'neon-animation-finish': '_onNeonAnimationFinish'
|
|
||||||
},
|
|
||||||
|
|
||||||
_onIronSelect: function(event) {
|
|
||||||
var selectedPage = event.detail.item;
|
|
||||||
|
|
||||||
// Only consider child elements.
|
|
||||||
if (this.items.indexOf(selectedPage) < 0) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
var oldPage = this._valueToItem(this._prevSelected) || false;
|
|
||||||
this._prevSelected = this.selected;
|
|
||||||
|
|
||||||
// on initial load and if animateInitialSelection is negated, simply display selectedPage.
|
|
||||||
if (!oldPage && !this.animateInitialSelection) {
|
|
||||||
this._completeSelectedChanged();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.animationConfig = [];
|
|
||||||
|
|
||||||
// configure selectedPage animations.
|
|
||||||
if (this.entryAnimation) {
|
|
||||||
this.animationConfig.push({
|
|
||||||
name: this.entryAnimation,
|
|
||||||
node: selectedPage
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
if (selectedPage.getAnimationConfig) {
|
|
||||||
this.animationConfig.push({
|
|
||||||
animatable: selectedPage,
|
|
||||||
type: 'entry'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// configure oldPage animations iff exists.
|
|
||||||
if (oldPage) {
|
|
||||||
|
|
||||||
// cancel the currently running animation if one is ongoing.
|
|
||||||
if (oldPage.classList.contains('neon-animating')) {
|
|
||||||
this._squelchNextFinishEvent = true;
|
|
||||||
this.cancelAnimation();
|
|
||||||
this._completeSelectedChanged();
|
|
||||||
this._squelchNextFinishEvent = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
// configure the animation.
|
|
||||||
if (this.exitAnimation) {
|
|
||||||
this.animationConfig.push({
|
|
||||||
name: this.exitAnimation,
|
|
||||||
node: oldPage
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
if (oldPage.getAnimationConfig) {
|
|
||||||
this.animationConfig.push({
|
|
||||||
animatable: oldPage,
|
|
||||||
type: 'exit'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// display the oldPage during the transition.
|
|
||||||
oldPage.classList.add('neon-animating');
|
|
||||||
}
|
|
||||||
|
|
||||||
// display the selectedPage during the transition.
|
|
||||||
selectedPage.classList.add('neon-animating');
|
|
||||||
|
|
||||||
// actually run the animations.
|
|
||||||
if (this.animationConfig.length >= 1) {
|
|
||||||
|
|
||||||
// on first load, ensure we run animations only after element is attached.
|
|
||||||
if (!this.isAttached) {
|
|
||||||
this.async(function () {
|
|
||||||
this.playAnimation(undefined, {
|
|
||||||
fromPage: null,
|
|
||||||
toPage: selectedPage
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
} else {
|
|
||||||
this.playAnimation(undefined, {
|
|
||||||
fromPage: oldPage,
|
|
||||||
toPage: selectedPage
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
} else {
|
|
||||||
this._completeSelectedChanged(oldPage, selectedPage);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @param {Object=} oldPage
|
|
||||||
* @param {Object=} selectedPage
|
|
||||||
*/
|
|
||||||
_completeSelectedChanged: function(oldPage, selectedPage) {
|
|
||||||
if (selectedPage) {
|
|
||||||
selectedPage.classList.remove('neon-animating');
|
|
||||||
}
|
|
||||||
if (oldPage) {
|
|
||||||
oldPage.classList.remove('neon-animating');
|
|
||||||
}
|
|
||||||
if (!selectedPage || !oldPage) {
|
|
||||||
var nodes = Polymer.dom(this.$.content).getDistributedNodes();
|
|
||||||
for (var node, index = 0; node = nodes[index]; index++) {
|
|
||||||
node.classList && node.classList.remove('neon-animating');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.async(this._notifyPageResize);
|
|
||||||
},
|
|
||||||
|
|
||||||
_onNeonAnimationFinish: function(event) {
|
|
||||||
if (this._squelchNextFinishEvent) {
|
|
||||||
this._squelchNextFinishEvent = false;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this._completeSelectedChanged(event.detail.fromPage, event.detail.toPage);
|
|
||||||
},
|
|
||||||
|
|
||||||
_notifyPageResize: function() {
|
|
||||||
var selectedPage = this.selectedItem || this._valueToItem(this.selected);
|
|
||||||
this.resizerShouldNotify = function(element) {
|
|
||||||
return element == selectedPage;
|
|
||||||
}
|
|
||||||
this.notifyResize();
|
|
||||||
}
|
|
||||||
|
|
||||||
})
|
|
||||||
|
|
||||||
})();
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,86 +0,0 @@
|
||||||
<!--
|
|
||||||
@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
|
|
||||||
-->
|
|
||||||
|
|
||||||
<link rel="import" href="../polymer/polymer.html">
|
|
||||||
<link rel="import" href="../iron-meta/iron-meta.html">
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Use `Polymer.NeonAnimationBehavior` to implement an animation.
|
|
||||||
* @polymerBehavior
|
|
||||||
*/
|
|
||||||
Polymer.NeonAnimationBehavior = {
|
|
||||||
|
|
||||||
properties: {
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Defines the animation timing.
|
|
||||||
*/
|
|
||||||
animationTiming: {
|
|
||||||
type: Object,
|
|
||||||
value: function() {
|
|
||||||
return {
|
|
||||||
duration: 500,
|
|
||||||
easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
|
|
||||||
fill: 'both'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Can be used to determine that elements implement this behavior.
|
|
||||||
*/
|
|
||||||
isNeonAnimation: true,
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Do any animation configuration here.
|
|
||||||
*/
|
|
||||||
// configure: function(config) {
|
|
||||||
// },
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Returns the animation timing by mixing in properties from `config` to the defaults defined
|
|
||||||
* by the animation.
|
|
||||||
*/
|
|
||||||
timingFromConfig: function(config) {
|
|
||||||
if (config.timing) {
|
|
||||||
for (var property in config.timing) {
|
|
||||||
this.animationTiming[property] = config.timing[property];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return this.animationTiming;
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Sets `transform` and `transformOrigin` properties along with the prefixed versions.
|
|
||||||
*/
|
|
||||||
setPrefixedProperty: function(node, property, value) {
|
|
||||||
var map = {
|
|
||||||
'transform': ['webkitTransform'],
|
|
||||||
'transformOrigin': ['mozTransformOrigin', 'webkitTransformOrigin']
|
|
||||||
};
|
|
||||||
var prefixes = map[property];
|
|
||||||
for (var prefix, index = 0; prefix = prefixes[index]; index++) {
|
|
||||||
node.style[prefix] = value;
|
|
||||||
}
|
|
||||||
node.style[property] = value;
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Called when the animation finishes.
|
|
||||||
*/
|
|
||||||
complete: function() {}
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,116 +0,0 @@
|
||||||
<!--
|
|
||||||
@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
|
|
||||||
-->
|
|
||||||
<link rel="import" href="../polymer/polymer.html">
|
|
||||||
<link rel="import" href="../iron-meta/iron-meta.html">
|
|
||||||
<link rel="import" href="neon-animatable-behavior.html">
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
/**
|
|
||||||
* `Polymer.NeonAnimationRunnerBehavior` adds a method to run animations.
|
|
||||||
*
|
|
||||||
* @polymerBehavior Polymer.NeonAnimationRunnerBehavior
|
|
||||||
*/
|
|
||||||
Polymer.NeonAnimationRunnerBehaviorImpl = {
|
|
||||||
|
|
||||||
properties: {
|
|
||||||
|
|
||||||
/** @type {?Object} */
|
|
||||||
_player: {
|
|
||||||
type: Object
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
_configureAnimationEffects: function(allConfigs) {
|
|
||||||
var allAnimations = [];
|
|
||||||
if (allConfigs.length > 0) {
|
|
||||||
for (var config, index = 0; config = allConfigs[index]; index++) {
|
|
||||||
var animation = document.createElement(config.name);
|
|
||||||
// is this element actually a neon animation?
|
|
||||||
if (animation.isNeonAnimation) {
|
|
||||||
var effect = animation.configure(config);
|
|
||||||
if (effect) {
|
|
||||||
allAnimations.push({
|
|
||||||
animation: animation,
|
|
||||||
config: config,
|
|
||||||
effect: effect
|
|
||||||
});
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
console.warn(this.is + ':', config.name, 'not found!');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return allAnimations;
|
|
||||||
},
|
|
||||||
|
|
||||||
_runAnimationEffects: function(allEffects) {
|
|
||||||
return document.timeline.play(new GroupEffect(allEffects));
|
|
||||||
},
|
|
||||||
|
|
||||||
_completeAnimations: function(allAnimations) {
|
|
||||||
for (var animation, index = 0; animation = allAnimations[index]; index++) {
|
|
||||||
animation.animation.complete(animation.config);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Plays an animation with an optional `type`.
|
|
||||||
* @param {string=} type
|
|
||||||
* @param {!Object=} cookie
|
|
||||||
*/
|
|
||||||
playAnimation: function(type, cookie) {
|
|
||||||
var allConfigs = this.getAnimationConfig(type);
|
|
||||||
if (!allConfigs) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
try {
|
|
||||||
var allAnimations = this._configureAnimationEffects(allConfigs);
|
|
||||||
var allEffects = allAnimations.map(function(animation) {
|
|
||||||
return animation.effect;
|
|
||||||
});
|
|
||||||
|
|
||||||
if (allEffects.length > 0) {
|
|
||||||
this._player = this._runAnimationEffects(allEffects);
|
|
||||||
this._player.onfinish = function() {
|
|
||||||
this._completeAnimations(allAnimations);
|
|
||||||
|
|
||||||
if (this._player) {
|
|
||||||
this._player.cancel();
|
|
||||||
this._player = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.fire('neon-animation-finish', cookie, {bubbles: false});
|
|
||||||
}.bind(this);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
console.warn('Couldnt play', '(', type, allConfigs, ').', e);
|
|
||||||
}
|
|
||||||
this.fire('neon-animation-finish', cookie, {bubbles: false});
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Cancels the currently running animation.
|
|
||||||
*/
|
|
||||||
cancelAnimation: function() {
|
|
||||||
if (this._player) {
|
|
||||||
this._player.cancel();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/** @polymerBehavior Polymer.NeonAnimationRunnerBehavior */
|
|
||||||
Polymer.NeonAnimationRunnerBehavior = [
|
|
||||||
Polymer.NeonAnimatableBehavior,
|
|
||||||
Polymer.NeonAnimationRunnerBehaviorImpl
|
|
||||||
];
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,18 +0,0 @@
|
||||||
<!--
|
|
||||||
@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
|
|
||||||
-->
|
|
||||||
|
|
||||||
<link rel="import" href="neon-animatable-behavior.html">
|
|
||||||
<link rel="import" href="neon-animated-pages.html">
|
|
||||||
<link rel="import" href="neon-animatable.html">
|
|
||||||
<link rel="import" href="neon-animation-behavior.html">
|
|
||||||
<link rel="import" href="neon-animation-runner-behavior.html">
|
|
||||||
<link rel="import" href="neon-animations.html">
|
|
||||||
<link rel="import" href="neon-shared-element-animatable-behavior.html">
|
|
||||||
<link rel="import" href="neon-shared-element-animation-behavior.html">
|
|
||||||
|
|
@ -1,29 +0,0 @@
|
||||||
<!--
|
|
||||||
@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
|
|
||||||
-->
|
|
||||||
<link rel="import" href="../polymer/polymer.html">
|
|
||||||
<link rel="import" href="animations/cascaded-animation.html">
|
|
||||||
<link rel="import" href="animations/fade-in-animation.html">
|
|
||||||
<link rel="import" href="animations/fade-out-animation.html">
|
|
||||||
<link rel="import" href="animations/hero-animation.html">
|
|
||||||
<link rel="import" href="animations/opaque-animation.html">
|
|
||||||
<link rel="import" href="animations/ripple-animation.html">
|
|
||||||
<link rel="import" href="animations/reverse-ripple-animation.html">
|
|
||||||
<link rel="import" href="animations/scale-down-animation.html">
|
|
||||||
<link rel="import" href="animations/scale-up-animation.html">
|
|
||||||
<link rel="import" href="animations/slide-from-left-animation.html">
|
|
||||||
<link rel="import" href="animations/slide-from-right-animation.html">
|
|
||||||
<link rel="import" href="animations/slide-from-top-animation.html">
|
|
||||||
<link rel="import" href="animations/slide-from-bottom-animation.html">
|
|
||||||
<link rel="import" href="animations/slide-left-animation.html">
|
|
||||||
<link rel="import" href="animations/slide-right-animation.html">
|
|
||||||
<link rel="import" href="animations/slide-up-animation.html">
|
|
||||||
<link rel="import" href="animations/slide-down-animation.html">
|
|
||||||
<link rel="import" href="animations/transform-animation.html">
|
|
||||||
|
|
||||||
|
|
@ -1,43 +0,0 @@
|
||||||
<!--
|
|
||||||
@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
|
|
||||||
-->
|
|
||||||
|
|
||||||
<link rel="import" href="../polymer/polymer.html">
|
|
||||||
<link rel="import" href="neon-animatable-behavior.html">
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Use `Polymer.NeonSharedElementAnimatableBehavior` to implement elements containing shared element
|
|
||||||
* animations.
|
|
||||||
* @polymerBehavior Polymer.NeonSharedElementAnimatableBehavior
|
|
||||||
*/
|
|
||||||
Polymer.NeonSharedElementAnimatableBehaviorImpl = {
|
|
||||||
|
|
||||||
properties: {
|
|
||||||
|
|
||||||
/**
|
|
||||||
* A map of shared element id to node.
|
|
||||||
*/
|
|
||||||
sharedElements: {
|
|
||||||
type: Object,
|
|
||||||
value: {}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
/** @polymerBehavior Polymer.NeonSharedElementAnimatableBehavior */
|
|
||||||
Polymer.NeonSharedElementAnimatableBehavior = [
|
|
||||||
Polymer.NeonAnimatableBehavior,
|
|
||||||
Polymer.NeonSharedElementAnimatableBehaviorImpl
|
|
||||||
];
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,72 +0,0 @@
|
||||||
<!--
|
|
||||||
@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
|
|
||||||
-->
|
|
||||||
|
|
||||||
<link rel="import" href="../polymer/polymer.html">
|
|
||||||
<link rel="import" href="neon-animation-behavior.html">
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Use `Polymer.NeonSharedElementAnimationBehavior` to implement shared element animations.
|
|
||||||
* @polymerBehavior Polymer.NeonSharedElementAnimationBehavior
|
|
||||||
*/
|
|
||||||
Polymer.NeonSharedElementAnimationBehaviorImpl = {
|
|
||||||
|
|
||||||
properties: {
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Cached copy of shared elements.
|
|
||||||
*/
|
|
||||||
sharedElements: {
|
|
||||||
type: Object
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Finds shared elements based on `config`.
|
|
||||||
*/
|
|
||||||
findSharedElements: function(config) {
|
|
||||||
var fromPage = config.fromPage;
|
|
||||||
var toPage = config.toPage;
|
|
||||||
if (!fromPage || !toPage) {
|
|
||||||
console.warn(this.is + ':', !fromPage ? 'fromPage' : 'toPage', 'is undefined!');
|
|
||||||
return null;
|
|
||||||
};
|
|
||||||
|
|
||||||
if (!fromPage.sharedElements || !toPage.sharedElements) {
|
|
||||||
console.warn(this.is + ':', 'sharedElements are undefined for', !fromPage.sharedElements ? fromPage : toPage);
|
|
||||||
return null;
|
|
||||||
};
|
|
||||||
|
|
||||||
var from = fromPage.sharedElements[config.id]
|
|
||||||
var to = toPage.sharedElements[config.id];
|
|
||||||
|
|
||||||
if (!from || !to) {
|
|
||||||
console.warn(this.is + ':', 'sharedElement with id', config.id, 'not found in', !from ? fromPage : toPage);
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.sharedElements = {
|
|
||||||
from: from,
|
|
||||||
to: to
|
|
||||||
};
|
|
||||||
return this.sharedElements;
|
|
||||||
}
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
/** @polymerBehavior Polymer.NeonSharedElementAnimationBehavior */
|
|
||||||
Polymer.NeonSharedElementAnimationBehavior = [
|
|
||||||
Polymer.NeonAnimationBehavior,
|
|
||||||
Polymer.NeonSharedElementAnimationBehaviorImpl
|
|
||||||
];
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,28 +0,0 @@
|
||||||
<!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>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
|
|
||||||
<title>neon-animation tests</title>
|
|
||||||
<script src="../../web-component-tester/browser.js"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<script>
|
|
||||||
WCT.loadSuites([
|
|
||||||
'neon-animated-pages.html',
|
|
||||||
'neon-animated-pages.html?dom=shadow',
|
|
||||||
'neon-animated-pages-lazy.html',
|
|
||||||
'neon-animated-pages-lazy.html?dom=shadow',
|
|
||||||
'neon-animated-pages-descendant-selection.html',
|
|
||||||
'neon-animated-pages-descendant-selection.html?dom=shadow',
|
|
||||||
]);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
</body></html>
|
|
||||||
|
|
@ -1,118 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!--
|
|
||||||
@license
|
|
||||||
Copyright (c) 2016 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>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1">
|
|
||||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
|
|
||||||
|
|
||||||
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
|
||||||
<script src="../../web-component-tester/browser.js"></script>
|
|
||||||
<script src="../../test-fixture/test-fixture-mocha.js"></script>
|
|
||||||
|
|
||||||
<link rel="import" href="../../test-fixture/test-fixture.html">
|
|
||||||
<link rel="import" href="../../neon-animation/neon-animated-pages.html">
|
|
||||||
<link rel="import" href="../../neon-animation/neon-animation-behavior.html">
|
|
||||||
<link rel="import" href="../../iron-selector/iron-selector.html">
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<test-fixture id="descendant-selection">
|
|
||||||
<template>
|
|
||||||
<neon-animated-pages entry-animation="test-animation" animate-initial-selection>
|
|
||||||
<iron-selector selected="0" id="selector">
|
|
||||||
<div>1</div>
|
|
||||||
<div id="target">2</div>
|
|
||||||
</iron-selector>
|
|
||||||
</neon-animated-pages>
|
|
||||||
</template>
|
|
||||||
</test-fixture>
|
|
||||||
|
|
||||||
<test-fixture id="selecting-item">
|
|
||||||
<template>
|
|
||||||
<neon-animated-pages entry-animation="test-animation" animate-initial-selection>
|
|
||||||
<x-selecting-element></x-selecting-element>
|
|
||||||
<div id="target"></div>
|
|
||||||
</neon-animated-pages>
|
|
||||||
</template>
|
|
||||||
</test-fixture>
|
|
||||||
|
|
||||||
<dom-module id="x-selecting-element">
|
|
||||||
<template>
|
|
||||||
<iron-selector selected="0" id="selector">
|
|
||||||
<div>1</div>
|
|
||||||
<div id="target">2</div>
|
|
||||||
</iron-selector>
|
|
||||||
</template>
|
|
||||||
</dom-module>
|
|
||||||
|
|
||||||
<dom-module id="test-element">
|
|
||||||
<template>
|
|
||||||
<neon-animated-pages entry-animation="test-animation" animate-initial-selection>
|
|
||||||
<content></content>
|
|
||||||
</neon-animated-pages>
|
|
||||||
</template>
|
|
||||||
</dom-module>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
HTMLImports.whenReady(function() {
|
|
||||||
Polymer({ is: 'x-selecting-element' });
|
|
||||||
Polymer({ is: 'test-element' });
|
|
||||||
Polymer({
|
|
||||||
is: 'test-animation',
|
|
||||||
behaviors: [
|
|
||||||
Polymer.NeonAnimationBehavior
|
|
||||||
],
|
|
||||||
configure: function(config) {
|
|
||||||
config.node.animated = true;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<test-fixture id="distributed-children">
|
|
||||||
<template>
|
|
||||||
<test-element>
|
|
||||||
<div>1</div>
|
|
||||||
<div id="target">2</div>
|
|
||||||
</test-element>
|
|
||||||
</template>
|
|
||||||
</test-fixture>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
suite('descendant selection', function() {
|
|
||||||
test('descendents of other selectors are not animated', function() {
|
|
||||||
var animatedPages = fixture('descendant-selection');
|
|
||||||
var selector = Polymer.dom(animatedPages).querySelector('#selector');
|
|
||||||
var target = Polymer.dom(animatedPages).querySelector('#target');
|
|
||||||
Polymer.dom(selector).setAttribute('selected', '1');
|
|
||||||
assert(!target.animated);
|
|
||||||
});
|
|
||||||
test('elements distributed as children are animated', function() {
|
|
||||||
var testElement = fixture('distributed-children');
|
|
||||||
var target = Polymer.dom(testElement).querySelector('#target');
|
|
||||||
var animatedPages = Polymer.dom(testElement.root).querySelector("neon-animated-pages");
|
|
||||||
Polymer.dom(animatedPages).setAttribute('selected', '1');
|
|
||||||
assert(target.animated);
|
|
||||||
});
|
|
||||||
test('ignores selection from shadow descendants of its items', function() {
|
|
||||||
var pages = fixture('selecting-item');
|
|
||||||
var target = Polymer.dom(pages).querySelector('#target');
|
|
||||||
var selecting = Polymer.dom(pages).querySelector('x-selecting-element');
|
|
||||||
selecting.$.selector.selected = 1;
|
|
||||||
assert(!target.animated);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,73 +0,0 @@
|
||||||
<!doctype html>
|
|
||||||
<!--
|
|
||||||
@license
|
|
||||||
Copyright (c) 2016 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>neon-animated-pages tests</title>
|
|
||||||
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
||||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
|
|
||||||
|
|
||||||
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
|
||||||
|
|
||||||
<script>Polymer = {lazyRegister: true}</script>
|
|
||||||
|
|
||||||
<script src="../../web-component-tester/browser.js"></script>
|
|
||||||
<script src="../../test-fixture/test-fixture-mocha.js"></script>
|
|
||||||
|
|
||||||
<link rel="import" href="../../test-fixture/test-fixture.html">
|
|
||||||
<link rel="import" href="../neon-animated-pages.html">
|
|
||||||
<link rel="import" href="../neon-animatable.html">
|
|
||||||
<link rel="import" href="../animations/slide-from-left-animation.html">
|
|
||||||
<link rel="import" href="../animations/slide-right-animation.html">
|
|
||||||
<link rel="import" href="test-resizable-pages.html">
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<test-fixture id="animate-initial-selection">
|
|
||||||
<template>
|
|
||||||
<neon-animated-pages entry-animation="slide-from-left-animation" exit-animation="slide-right-animation" animate-initial-selection>
|
|
||||||
<neon-animatable></neon-animatable>
|
|
||||||
<neon-animatable></neon-animatable>
|
|
||||||
</neon-animated-pages>
|
|
||||||
</template>
|
|
||||||
</test-fixture>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
suite('animations found when `lazRegister` setting is true', function() {
|
|
||||||
test('animations are registered', function(done) {
|
|
||||||
var animatedPages = fixture('animate-initial-selection');
|
|
||||||
animatedPages._completeAnimations = sinon.spy();
|
|
||||||
assert.isUndefined(animatedPages.selected);
|
|
||||||
var pages = Polymer.dom(animatedPages).children;
|
|
||||||
animatedPages.addEventListener('neon-animation-finish', function(event) {
|
|
||||||
if (animatedPages.selected === 0) {
|
|
||||||
animatedPages.selected = 1;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
assert.strictEqual(animatedPages.selected, 1);
|
|
||||||
assert.equal(event.detail.fromPage, pages[0]);
|
|
||||||
assert.equal(event.detail.toPage, pages[1]);
|
|
||||||
assert.isTrue(animatedPages._completeAnimations.calledTwice);
|
|
||||||
var a$ = animatedPages._completeAnimations.getCall(1).args[0];
|
|
||||||
assert.isTrue(a$[0].animation.isNeonAnimation, 'entry animation is not a registered animation');
|
|
||||||
assert.isTrue(a$[1].animation.isNeonAnimation, 'exit animation is not a registered animation');
|
|
||||||
done();
|
|
||||||
});
|
|
||||||
animatedPages.selected = 0;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,101 +0,0 @@
|
||||||
<!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>neon-animated-pages tests</title>
|
|
||||||
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
||||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
|
|
||||||
|
|
||||||
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
|
||||||
|
|
||||||
<script src="../../web-component-tester/browser.js"></script>
|
|
||||||
<script src="../../test-fixture/test-fixture-mocha.js"></script>
|
|
||||||
|
|
||||||
<link rel="import" href="../../test-fixture/test-fixture.html">
|
|
||||||
<link rel="import" href="../neon-animated-pages.html">
|
|
||||||
<link rel="import" href="../neon-animatable.html">
|
|
||||||
<link rel="import" href="../animations/slide-from-left-animation.html">
|
|
||||||
<link rel="import" href="../animations/slide-right-animation.html">
|
|
||||||
<link rel="import" href="test-resizable-pages.html">
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<test-fixture id="basic">
|
|
||||||
<template>
|
|
||||||
<neon-animated-pages>
|
|
||||||
</neon-animated-pages>
|
|
||||||
</template>
|
|
||||||
</test-fixture>
|
|
||||||
|
|
||||||
<test-fixture id="notify-resize">
|
|
||||||
<template>
|
|
||||||
<neon-animated-pages>
|
|
||||||
<a-resizable-page></a-resizable-page>
|
|
||||||
<b-resizable-page></b-resizable-page>
|
|
||||||
<c-resizable-page></c-resizable-page>
|
|
||||||
</neon-animated-pages>
|
|
||||||
</template>
|
|
||||||
</test-fixture>
|
|
||||||
|
|
||||||
<test-fixture id="animate-initial-selection">
|
|
||||||
<template>
|
|
||||||
<neon-animated-pages entry-animation="slide-from-left-animation" exit-animation="slide-right-animation" animate-initial-selection>
|
|
||||||
<neon-animatable></neon-animatable>
|
|
||||||
<neon-animatable></neon-animatable>
|
|
||||||
</neon-animated-pages>
|
|
||||||
</template>
|
|
||||||
</test-fixture>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
suite('basic', function() {
|
|
||||||
});
|
|
||||||
suite('notify-resize', function() {
|
|
||||||
test('only a destination page recieves a resize event', function(done) {
|
|
||||||
var animatedPages = fixture('notify-resize');
|
|
||||||
var resizables = Polymer.dom(animatedPages).children;
|
|
||||||
var recieves = {};
|
|
||||||
resizables.forEach(function(page) {
|
|
||||||
page.addEventListener('iron-resize', function(event) {
|
|
||||||
var pageName = event.currentTarget.tagName;
|
|
||||||
recieves[pageName] = pageName in recieves ? recieves[pageName] + 1 : 1;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
animatedPages.selected = 2;
|
|
||||||
setTimeout(function() {
|
|
||||||
assert.deepEqual(recieves, {
|
|
||||||
'C-RESIZABLE-PAGE': 1
|
|
||||||
});
|
|
||||||
done();
|
|
||||||
}, 50);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
suite('animate-initial-selection', function() {
|
|
||||||
test('\'neon-animation-finish\' event fired after animating initial selection', function(done) {
|
|
||||||
var animatedPages = fixture('animate-initial-selection');
|
|
||||||
assert.isUndefined(animatedPages.selected);
|
|
||||||
var pages = Polymer.dom(animatedPages).children;
|
|
||||||
animatedPages.addEventListener('neon-animation-finish', function(event) {
|
|
||||||
assert.strictEqual(animatedPages.selected, 0);
|
|
||||||
assert.isFalse(event.detail.fromPage);
|
|
||||||
assert.deepEqual(event.detail.toPage, pages[0]);
|
|
||||||
done();
|
|
||||||
});
|
|
||||||
animatedPages.selected = 0;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,58 +0,0 @@
|
||||||
<!--
|
|
||||||
@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
|
|
||||||
-->
|
|
||||||
|
|
||||||
<link rel="import" href="../../polymer/polymer.html">
|
|
||||||
<link rel="import" href="../neon-shared-element-animatable-behavior.html">
|
|
||||||
<link rel="import" href="../../iron-resizable-behavior/iron-resizable-behavior.html">
|
|
||||||
|
|
||||||
<dom-module id="a-resizable-page">
|
|
||||||
<template>
|
|
||||||
</template>
|
|
||||||
</dom-module>
|
|
||||||
|
|
||||||
<dom-module id="b-resizable-page">
|
|
||||||
<template>
|
|
||||||
</template>
|
|
||||||
</dom-module>
|
|
||||||
|
|
||||||
<dom-module id="c-resizable-page">
|
|
||||||
<template>
|
|
||||||
</template>
|
|
||||||
</dom-module>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
(function() {
|
|
||||||
|
|
||||||
Polymer({
|
|
||||||
is: 'a-resizable-page',
|
|
||||||
behaviors: [
|
|
||||||
Polymer.NeonSharedElementAnimatableBehavior,
|
|
||||||
Polymer.IronResizableBehavior
|
|
||||||
]
|
|
||||||
});
|
|
||||||
|
|
||||||
Polymer({
|
|
||||||
is: 'b-resizable-page',
|
|
||||||
behaviors: [
|
|
||||||
Polymer.NeonSharedElementAnimatableBehavior,
|
|
||||||
Polymer.IronResizableBehavior
|
|
||||||
]
|
|
||||||
});
|
|
||||||
|
|
||||||
Polymer({
|
|
||||||
is: 'c-resizable-page',
|
|
||||||
behaviors: [
|
|
||||||
Polymer.NeonSharedElementAnimatableBehavior,
|
|
||||||
Polymer.IronResizableBehavior
|
|
||||||
]
|
|
||||||
});
|
|
||||||
|
|
||||||
})();
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,14 +0,0 @@
|
||||||
<!--
|
|
||||||
@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
|
|
||||||
-->
|
|
||||||
|
|
||||||
<!--<script src="../web-animations-js/web-animations-next-lite.min.js"></script>-->
|
|
||||||
<script>
|
|
||||||
require(['webAnimations']);
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
define(['dialogHelper', 'jQuery', 'emby-input', 'emby-button', 'emby-collapsible', 'paper-checkbox', 'paper-icon-button-light'], function (dialogHelper, $) {
|
define(['dialogHelper', 'jQuery', 'emby-input', 'emby-button', 'emby-collapse', 'paper-checkbox', 'paper-icon-button-light'], function (dialogHelper, $) {
|
||||||
|
|
||||||
function renderLibrarySharingList(context, result) {
|
function renderLibrarySharingList(context, result) {
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -17,13 +17,13 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<br />
|
<div is="emby-collapse" title="${HeaderShareMediaFolders}">
|
||||||
|
<div class="collapseContent">
|
||||||
<emby-collapsible title="${HeaderShareMediaFolders}">
|
<div class="librarySharingList">
|
||||||
<div class="librarySharingList">
|
|
||||||
|
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</emby-collapsible>
|
</div>
|
||||||
<p class="fieldDescription" style="margin-top:.5em;">${MessageGuestSharingPermissionsHelp}</p>
|
<p class="fieldDescription" style="margin-top:.5em;">${MessageGuestSharingPermissionsHelp}</p>
|
||||||
<br />
|
<br />
|
||||||
<button is="emby-button" type="submit" class="raised submit block">
|
<button is="emby-button" type="submit" class="raised submit block">
|
||||||
|
|
|
||||||
|
|
@ -247,7 +247,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
function removeElementFromListview(source) {
|
function removeElementFromListview(source) {
|
||||||
$(source).parents('paper-icon-item').remove();
|
$(source).parents('.listItem').remove();
|
||||||
}
|
}
|
||||||
|
|
||||||
function editPerson(context, person, index) {
|
function editPerson(context, person, index) {
|
||||||
|
|
@ -353,9 +353,11 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
function onEditorClick(e) {
|
function onEditorClick(e) {
|
||||||
|
|
||||||
var btnRemoveFromEditorList = parentWithClass(e.target, 'btnRemoveFromEditorList');
|
var btnRemoveFromEditorList = parentWithClass(e.target, 'btnRemoveFromEditorList');
|
||||||
if (btnRemoveFromEditorList) {
|
if (btnRemoveFromEditorList) {
|
||||||
removeElementFromListview(btnRemoveFromEditorList);
|
removeElementFromListview(btnRemoveFromEditorList);
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
var btnAddTextItem = parentWithClass(e.target, 'btnAddTextItem');
|
var btnAddTextItem = parentWithClass(e.target, 'btnAddTextItem');
|
||||||
|
|
|
||||||
|
|
@ -22,12 +22,6 @@
|
||||||
transition: transform ease-in-out 0.3s, width ease-in-out 0.3s, visibility 0.3s;*/
|
transition: transform ease-in-out 0.3s, width ease-in-out 0.3s, visibility 0.3s;*/
|
||||||
}
|
}
|
||||||
|
|
||||||
.touch-menu-la .tmla-handle {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.scrollContainer {
|
.scrollContainer {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -428,6 +428,11 @@ body:not(.dashboardDocument) .headerAppsButton {
|
||||||
z-index: 998 !important;
|
z-index: 998 !important;
|
||||||
top: 65px !important;
|
top: 65px !important;
|
||||||
left: 0 !important;
|
left: 0 !important;
|
||||||
|
transform: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboardDocument .tmla-mask {
|
||||||
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashboardDocument .mainDrawerButton {
|
.dashboardDocument .mainDrawerButton {
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
<div id="dashboardPage" data-role="page" class="page type-interior dashboardHomePage fullWidthContent" data-require="scripts/dashboardpage,humanedate,buttonenabled,paper-icon-item,paper-item-body,paper-fab,emby-collapsible,emby-button">
|
<div id="dashboardPage" data-role="page" class="page type-interior dashboardHomePage fullWidthContent" data-require="scripts/dashboardpage,humanedate,buttonenabled,paper-icon-item,paper-item-body,paper-fab,emby-collapse,emby-button">
|
||||||
|
|
||||||
<div data-role="content">
|
<div data-role="content">
|
||||||
<div class="content-primary">
|
<div class="content-primary">
|
||||||
|
|
@ -51,15 +51,17 @@
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div id="collapsiblePendingInstallations" style="margin-top: 2em; display: none;">
|
<div id="collapsiblePendingInstallations" style="margin-top: 2em; display: none;">
|
||||||
<emby-collapsible title="${HeaderPendingInstallations}" expanded>
|
<div is="emby-collapse" title="${HeaderPendingInstallations}" data-expanded="true">
|
||||||
<p>${LabelComponentsUpdated}</p>
|
<div class="collapseContent">
|
||||||
<div id="pendingInstallations">
|
<p>${LabelComponentsUpdated}</p>
|
||||||
|
<div id="pendingInstallations">
|
||||||
|
</div>
|
||||||
|
<p>${MessagePleaseRestartServerToFinishUpdating}</p>
|
||||||
|
<div class="btnRestartContainer hide">
|
||||||
|
<button is="emby-button" type="button" class="raised submit" onclick="DashboardPage.restart();"><iron-icon icon="refresh"></iron-icon><span>${ButtonRestartNow}</span></button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p>${MessagePleaseRestartServerToFinishUpdating}</p>
|
</div>
|
||||||
<div class="btnRestartContainer hide">
|
|
||||||
<button is="emby-button" type="button" class="raised submit" onclick="DashboardPage.restart();"><iron-icon icon="refresh"></iron-icon><span>${ButtonRestartNow}</span></button>
|
|
||||||
</div>
|
|
||||||
</emby-collapsible>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="healthMonitorSection hide" style="margin-top: 2em;">
|
<div class="healthMonitorSection hide" style="margin-top: 2em;">
|
||||||
|
|
@ -78,31 +80,35 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="runningTasksCollapsible" style="margin-top: 2em; display: none;">
|
<div id="runningTasksCollapsible" style="margin-top: 2em; display: none;">
|
||||||
<emby-collapsible title="${HeaderRunningTasks}" expanded>
|
<div is="emby-collapse" title="${HeaderRunningTasks}" data-expanded="true">
|
||||||
<div id="divRunningTasks">
|
<div class="collapseContent">
|
||||||
|
<div id="divRunningTasks">
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</emby-collapsible>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<br />
|
<br />
|
||||||
<emby-collapsible title="${HeaderPaths}">
|
<div is="emby-collapse" title="${HeaderPaths}">
|
||||||
<p>
|
<div class="collapseContent">
|
||||||
<b>${LabelCache}</b><br />
|
<p>
|
||||||
<span id="cachePath"></span>
|
<b>${LabelCache}</b><br />
|
||||||
</p>
|
<span id="cachePath"></span>
|
||||||
<p>
|
</p>
|
||||||
<b>${LabelLogs}</b><br />
|
<p>
|
||||||
<span id="logPath"></span>
|
<b>${LabelLogs}</b><br />
|
||||||
</p>
|
<span id="logPath"></span>
|
||||||
<p>
|
</p>
|
||||||
<b>${LabelMetadata}</b><br />
|
<p>
|
||||||
<span id="metadataPath"></span>
|
<b>${LabelMetadata}</b><br />
|
||||||
</p>
|
<span id="metadataPath"></span>
|
||||||
<p>
|
</p>
|
||||||
<b>${LabelTranscodingTemporaryFiles}</b><br />
|
<p>
|
||||||
<span id="transcodingTemporaryPath"></span>
|
<b>${LabelTranscodingTemporaryFiles}</b><br />
|
||||||
</p>
|
<span id="transcodingTemporaryPath"></span>
|
||||||
</emby-collapsible>
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="readOnlyContent dashboardHomeRightColumn firstDashboardHomeRightColumn">
|
<div class="readOnlyContent dashboardHomeRightColumn firstDashboardHomeRightColumn">
|
||||||
|
|
|
||||||
|
|
@ -42,83 +42,92 @@
|
||||||
<br /><br />
|
<br /><br />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<emby-collapsible title="${HeaderAdvanced}">
|
<div is="emby-collapse" title="${HeaderAdvanced}">
|
||||||
<br />
|
<div class="collapseContent">
|
||||||
<ul data-role="listview" class="ulForm">
|
<ul data-role="listview" class="ulForm">
|
||||||
<li>
|
<li>
|
||||||
<paper-input type="text" id="txtCachePath" label="${LabelCachePath}" style="display:inline-block;width:85%;"></paper-input>
|
<paper-input type="text" id="txtCachePath" label="${LabelCachePath}" style="display: inline-block; width: 85%;"></paper-input>
|
||||||
<button type="button" is="paper-icon-button-light" id="btnSelectCachePath" title="${ButtonSelectDirectory}"><iron-icon icon="search"></iron-icon></button>
|
<button type="button" is="paper-icon-button-light" id="btnSelectCachePath" title="${ButtonSelectDirectory}" class="autoSize">
|
||||||
<div class="fieldDescription">${LabelCachePathHelp}</div>
|
<i class="md-icon">search</i>
|
||||||
</li>
|
</button>
|
||||||
</ul>
|
<div class="fieldDescription">${LabelCachePathHelp}</div>
|
||||||
</emby-collapsible>
|
</li>
|
||||||
|
</ul>
|
||||||
<emby-collapsible title="${HeaderAutomaticUpdates}">
|
|
||||||
<br />
|
|
||||||
<ul data-role="listview" class="ulForm">
|
|
||||||
<li class="fldAutomaticUpdates">
|
|
||||||
<div data-role="controlgroup">
|
|
||||||
<input type="checkbox" id="chkEnableAutomaticServerUpdates" data-mini="true" />
|
|
||||||
<label for="chkEnableAutomaticServerUpdates">${OptionEnableAutomaticServerUpdates}</label>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<label class="lnlAutomaticUpdateLevel selectLabel" for="selectAutomaticUpdateLevel"></label>
|
|
||||||
<select name="selectAutomaticUpdateLevel" id="selectAutomaticUpdateLevel">
|
|
||||||
<option value="Release">${OptionRelease}</option>
|
|
||||||
<option value="Beta">${OptionBeta}</option>
|
|
||||||
<option value="Dev">${OptionDev}</option>
|
|
||||||
</select>
|
|
||||||
<div id="devBuildWarning" class="fieldDescription warningFieldDescription" style="display: none;">
|
|
||||||
${DevBuildWarning}
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li id="fldEnableAutomaticRestart" style="display: none;">
|
|
||||||
<paper-checkbox id="chkEnableAutomaticRestart">${LabelAllowServerAutoRestart}</paper-checkbox>
|
|
||||||
<div class="fieldDescription paperCheckboxFieldDescription">
|
|
||||||
${LabelAllowServerAutoRestartHelp}
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</emby-collapsible>
|
|
||||||
|
|
||||||
<emby-collapsible title="${HeaderBranding}">
|
|
||||||
<p>${HeaderBrandingHelp}</p>
|
|
||||||
<br />
|
|
||||||
|
|
||||||
<ul data-role="listview" class="ulForm">
|
|
||||||
<li>
|
|
||||||
<paper-input type="text" id="txtLoginDisclaimer" label="${LabelLoginDisclaimer}"></paper-input>
|
|
||||||
<div class="fieldDescription">${LabelLoginDisclaimerHelp}</div>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<paper-textarea id="txtCustomCss" label="${LabelCustomCss}" class="mono"></paper-textarea>
|
|
||||||
<div class="fieldDescription">${LabelCustomCssHelp}</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</emby-collapsible>
|
|
||||||
|
|
||||||
<emby-collapsible title="${HeaderDeveloperOptions}">
|
|
||||||
<br />
|
|
||||||
<div>
|
|
||||||
<paper-checkbox id="chkEnableDashboardResponseCache">${OptionEnableWebClientResponseCache}</paper-checkbox>
|
|
||||||
</div>
|
</div>
|
||||||
<br />
|
</div>
|
||||||
<div>
|
|
||||||
<paper-checkbox id="chkEnableMinification">${OptionEnableWebClientResourceMinification}</paper-checkbox>
|
<div is="emby-collapse" title="${HeaderAutomaticUpdates}">
|
||||||
|
<div class="collapseContent">
|
||||||
|
<br />
|
||||||
|
<ul data-role="listview" class="ulForm">
|
||||||
|
<li class="fldAutomaticUpdates">
|
||||||
|
<div data-role="controlgroup">
|
||||||
|
<input type="checkbox" id="chkEnableAutomaticServerUpdates" data-mini="true" />
|
||||||
|
<label for="chkEnableAutomaticServerUpdates">${OptionEnableAutomaticServerUpdates}</label>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<label class="lnlAutomaticUpdateLevel selectLabel" for="selectAutomaticUpdateLevel"></label>
|
||||||
|
<select name="selectAutomaticUpdateLevel" id="selectAutomaticUpdateLevel">
|
||||||
|
<option value="Release">${OptionRelease}</option>
|
||||||
|
<option value="Beta">${OptionBeta}</option>
|
||||||
|
<option value="Dev">${OptionDev}</option>
|
||||||
|
</select>
|
||||||
|
<div id="devBuildWarning" class="fieldDescription warningFieldDescription" style="display: none;">
|
||||||
|
${DevBuildWarning}
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li id="fldEnableAutomaticRestart" style="display: none;">
|
||||||
|
<paper-checkbox id="chkEnableAutomaticRestart">${LabelAllowServerAutoRestart}</paper-checkbox>
|
||||||
|
<div class="fieldDescription paperCheckboxFieldDescription">
|
||||||
|
${LabelAllowServerAutoRestartHelp}
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="fieldDescription paperCheckboxFieldDescription">
|
</div>
|
||||||
${OptionDisableForDevelopmentHelp}
|
|
||||||
|
<div is="emby-collapse" title="${HeaderBranding}">
|
||||||
|
<div class="collapseContent">
|
||||||
|
<p>${HeaderBrandingHelp}</p>
|
||||||
|
<br />
|
||||||
|
|
||||||
|
<ul data-role="listview" class="ulForm">
|
||||||
|
<li>
|
||||||
|
<paper-input type="text" id="txtLoginDisclaimer" label="${LabelLoginDisclaimer}"></paper-input>
|
||||||
|
<div class="fieldDescription">${LabelLoginDisclaimerHelp}</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<paper-textarea id="txtCustomCss" label="${LabelCustomCss}" class="mono"></paper-textarea>
|
||||||
|
<div class="fieldDescription">${LabelCustomCssHelp}</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<br /><br />
|
</div>
|
||||||
<ul data-role="listview" class="ulForm">
|
|
||||||
<li>
|
<div is="emby-collapse" title="${HeaderDeveloperOptions}">
|
||||||
<paper-input type="text" id="txtDashboardSourcePath" label="${LabelDashboardSourcePath}" style="display: inline-block; width: 80%;"></paper-input>
|
<div class="collapseContent">
|
||||||
<button type="button" is="paper-icon-button-light" id="btnSelectDashboardSourcePath" title="${ButtonSelectDirectory}"><iron-icon icon="search"></iron-icon></button>
|
<br />
|
||||||
<div class="fieldDescription">${LabelDashboardSourcePathHelp}</div>
|
<div>
|
||||||
</li>
|
<paper-checkbox id="chkEnableDashboardResponseCache">${OptionEnableWebClientResponseCache}</paper-checkbox>
|
||||||
</ul>
|
</div>
|
||||||
</emby-collapsible>
|
<br />
|
||||||
|
<div>
|
||||||
|
<paper-checkbox id="chkEnableMinification">${OptionEnableWebClientResourceMinification}</paper-checkbox>
|
||||||
|
</div>
|
||||||
|
<div class="fieldDescription paperCheckboxFieldDescription">
|
||||||
|
${OptionDisableForDevelopmentHelp}
|
||||||
|
</div>
|
||||||
|
<br /><br />
|
||||||
|
<ul data-role="listview" class="ulForm">
|
||||||
|
<li>
|
||||||
|
<paper-input type="text" id="txtDashboardSourcePath" label="${LabelDashboardSourcePath}" style="display: inline-block; width: 80%;"></paper-input>
|
||||||
|
<button type="button" is="paper-icon-button-light" id="btnSelectDashboardSourcePath" title="${ButtonSelectDirectory}"><iron-icon icon="search"></iron-icon></button>
|
||||||
|
<div class="fieldDescription">${LabelDashboardSourcePathHelp}</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<br />
|
<br />
|
||||||
<ul data-role="listview" class="ulForm">
|
<ul data-role="listview" class="ulForm">
|
||||||
<li>
|
<li>
|
||||||
|
|
|
||||||
|
|
@ -36,90 +36,99 @@
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<emby-collapsible title="${HeaderAudio}">
|
<div is="emby-collapse" title="${HeaderAudio}">
|
||||||
<br />
|
<div class="collapseContent">
|
||||||
<div>
|
<br />
|
||||||
<paper-checkbox id="chkEnableAudioArchiveFiles">${OptionDetectArchiveFilesAsMedia}</paper-checkbox>
|
<div>
|
||||||
<div class="fieldDescription paperCheckboxFieldDescription">${OptionDetectArchiveFilesAsMediaHelp}</div>
|
<paper-checkbox id="chkEnableAudioArchiveFiles">${OptionDetectArchiveFilesAsMedia}</paper-checkbox>
|
||||||
|
<div class="fieldDescription paperCheckboxFieldDescription">${OptionDetectArchiveFilesAsMediaHelp}</div>
|
||||||
|
</div>
|
||||||
|
<br />
|
||||||
</div>
|
</div>
|
||||||
<br />
|
</div>
|
||||||
</emby-collapsible>
|
|
||||||
|
|
||||||
<emby-collapsible title="${HeaderVideo}">
|
<div is="emby-collapse" title="${HeaderVideo}">
|
||||||
<br />
|
<div class="collapseContent">
|
||||||
<div>
|
<br />
|
||||||
<paper-checkbox id="chkEnableVideoArchiveFiles">${OptionDetectArchiveFilesAsMedia}</paper-checkbox>
|
<div>
|
||||||
<div class="fieldDescription paperCheckboxFieldDescription">${OptionDetectArchiveFilesAsMediaHelp}</div>
|
<paper-checkbox id="chkEnableVideoArchiveFiles">${OptionDetectArchiveFilesAsMedia}</paper-checkbox>
|
||||||
|
<div class="fieldDescription paperCheckboxFieldDescription">${OptionDetectArchiveFilesAsMediaHelp}</div>
|
||||||
|
</div>
|
||||||
|
<br />
|
||||||
</div>
|
</div>
|
||||||
<br />
|
</div>
|
||||||
</emby-collapsible>
|
|
||||||
|
|
||||||
<emby-collapsible title="${HeaderChapters}">
|
<div is="emby-collapse" title="${HeaderChapters}">
|
||||||
<br />
|
<div class="collapseContent">
|
||||||
<ul data-role="listview" class="ulForm" style="margin-bottom:0!important;">
|
<br />
|
||||||
<li>
|
<ul data-role="listview" class="ulForm" style="margin-bottom:0!important;">
|
||||||
<div class="paperListLabel">${HeaderExtractChapterImagesFor}</div>
|
<li>
|
||||||
<div class="paperCheckboxList">
|
<div class="paperListLabel">${HeaderExtractChapterImagesFor}</div>
|
||||||
<paper-checkbox id="chkChaptersMovies">${OptionMovies}</paper-checkbox>
|
<div class="paperCheckboxList">
|
||||||
|
<paper-checkbox id="chkChaptersMovies">${OptionMovies}</paper-checkbox>
|
||||||
|
|
||||||
<paper-checkbox id="chkChaptersEpisodes">${OptionEpisodes}</paper-checkbox>
|
<paper-checkbox id="chkChaptersEpisodes">${OptionEpisodes}</paper-checkbox>
|
||||||
|
|
||||||
<paper-checkbox id="chkChaptersOtherVideos">${OptionOtherVideos}</paper-checkbox>
|
<paper-checkbox id="chkChaptersOtherVideos">${OptionOtherVideos}</paper-checkbox>
|
||||||
</div>
|
</div>
|
||||||
<div class="fieldDescription paperCheckboxFieldDescription">${ExtractChapterImagesHelp}</div>
|
<div class="fieldDescription paperCheckboxFieldDescription">${ExtractChapterImagesHelp}</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<br />
|
<br />
|
||||||
<div>
|
<div>
|
||||||
<paper-checkbox id="chkExtractChaptersDuringLibraryScan">${LabelExtractChaptersDuringLibraryScan}</paper-checkbox>
|
<paper-checkbox id="chkExtractChaptersDuringLibraryScan">${LabelExtractChaptersDuringLibraryScan}</paper-checkbox>
|
||||||
<div class="fieldDescription paperCheckboxFieldDescription">${LabelExtractChaptersDuringLibraryScanHelp}</div>
|
<div class="fieldDescription paperCheckboxFieldDescription">${LabelExtractChaptersDuringLibraryScanHelp}</div>
|
||||||
|
</div>
|
||||||
|
<br />
|
||||||
</div>
|
</div>
|
||||||
<br />
|
</div>
|
||||||
</emby-collapsible>
|
|
||||||
|
|
||||||
<emby-collapsible title="${HeaderPeople}">
|
<div is="emby-collapse" title="${HeaderPeople}">
|
||||||
<br />
|
<div class="collapseContent">
|
||||||
<ul data-role="listview" class="ulForm">
|
<br />
|
||||||
<li>
|
<ul data-role="listview" class="ulForm">
|
||||||
<div class="paperListLabel">${HeaderDownloadPeopleMetadataFor}</div>
|
<li>
|
||||||
<div class="paperCheckboxList">
|
<div class="paperListLabel">${HeaderDownloadPeopleMetadataFor}</div>
|
||||||
<paper-checkbox id="chkPeopleActors">${OptionActors}</paper-checkbox>
|
<div class="paperCheckboxList">
|
||||||
|
<paper-checkbox id="chkPeopleActors">${OptionActors}</paper-checkbox>
|
||||||
|
|
||||||
<paper-checkbox id="chkPeopleComposers">${OptionComposers}</paper-checkbox>
|
<paper-checkbox id="chkPeopleComposers">${OptionComposers}</paper-checkbox>
|
||||||
|
|
||||||
<paper-checkbox id="chkPeopleDirectors">${OptionDirectors}</paper-checkbox>
|
<paper-checkbox id="chkPeopleDirectors">${OptionDirectors}</paper-checkbox>
|
||||||
|
|
||||||
<paper-checkbox id="chkPeopleGuestStars">${OptionGuestStars}</paper-checkbox>
|
<paper-checkbox id="chkPeopleGuestStars">${OptionGuestStars}</paper-checkbox>
|
||||||
|
|
||||||
<paper-checkbox id="chkPeopleProducers">${OptionProducers}</paper-checkbox>
|
<paper-checkbox id="chkPeopleProducers">${OptionProducers}</paper-checkbox>
|
||||||
|
|
||||||
<paper-checkbox id="chkPeopleWriters">${OptionWriters}</paper-checkbox>
|
<paper-checkbox id="chkPeopleWriters">${OptionWriters}</paper-checkbox>
|
||||||
|
|
||||||
<paper-checkbox id="chkPeopleOthers">${OptionOthers}</paper-checkbox>
|
<paper-checkbox id="chkPeopleOthers">${OptionOthers}</paper-checkbox>
|
||||||
</div>
|
</div>
|
||||||
<div class="fieldDescription paperCheckboxFieldDescription">${HeaderDownloadPeopleMetadataForHelp}</div>
|
<div class="fieldDescription paperCheckboxFieldDescription">${HeaderDownloadPeopleMetadataForHelp}</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</emby-collapsible>
|
|
||||||
|
|
||||||
<emby-collapsible title="${HeaderTV}">
|
|
||||||
<br />
|
|
||||||
<div>
|
|
||||||
<label for="txtSeasonZeroName">${LabelSeasonZeroDisplayName}</label>
|
|
||||||
<paper-input type="text" id="txtSeasonZeroName" required></paper-input>
|
|
||||||
</div>
|
</div>
|
||||||
<br />
|
</div>
|
||||||
</emby-collapsible>
|
|
||||||
|
|
||||||
<emby-collapsible title="Fanart.tv">
|
<div is="emby-collapse" title="${HeaderTV}">
|
||||||
<ul data-role="listview" class="ulForm">
|
<div class="collapseContent">
|
||||||
<li>
|
<div>
|
||||||
<paper-input type="text" id="txtFanartApiKey" label="${LabelFanartApiKey}"></paper-input>
|
<paper-input type="text" id="txtSeasonZeroName" label="${LabelSeasonZeroDisplayName}" required></paper-input>
|
||||||
<div class="fieldDescription">${LabelFanartApiKeyHelp}</div>
|
</div>
|
||||||
<div class="fieldDescription"><a href="https://fanart.tv/2015/01/personal-api-keys" target="_blank">${ButtonLearnMore}</a></div>
|
</div>
|
||||||
</li>
|
</div>
|
||||||
</ul>
|
|
||||||
</emby-collapsible>
|
<div is="emby-collapse" title="Fanart.tv">
|
||||||
|
<div class="collapseContent">
|
||||||
|
<ul data-role="listview" class="ulForm">
|
||||||
|
<li>
|
||||||
|
<paper-input type="text" id="txtFanartApiKey" label="${LabelFanartApiKey}"></paper-input>
|
||||||
|
<div class="fieldDescription">${LabelFanartApiKeyHelp}</div>
|
||||||
|
<div class="fieldDescription"><a href="https://fanart.tv/2015/01/personal-api-keys" target="_blank">${ButtonLearnMore}</a></div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<br />
|
<br />
|
||||||
<br />
|
<br />
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
<div id="metadataImagesConfigurationPage" data-role="page" class="page type-interior metadataConfigurationPage withTabs" data-require="jqmlistview,emby-collapsible,scripts/metadataimagespage,paper-checkbox,paper-input,paper-fab,paper-icon-item,paper-item-body,emby-button">
|
<div id="metadataImagesConfigurationPage" data-role="page" class="page type-interior metadataConfigurationPage withTabs" data-require="jqmlistview,emby-collapse,scripts/metadataimagespage,paper-checkbox,paper-input,paper-fab,paper-icon-item,paper-item-body,emby-button">
|
||||||
|
|
||||||
<div data-role="content">
|
<div data-role="content">
|
||||||
|
|
||||||
|
|
@ -21,43 +21,44 @@
|
||||||
<div class="imageFetchers" style="margin-bottom: 2em;">
|
<div class="imageFetchers" style="margin-bottom: 2em;">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<emby-collapsible title="${HeaderImageSettings}">
|
<div is="emby-collapse" title="${HeaderImageSettings}">
|
||||||
<br />
|
<div class="collapseContent">
|
||||||
<div class="backdropFields" style="margin-bottom: 2em; display: none;">
|
<div class="backdropFields" style="margin-bottom: 2em; display: none;">
|
||||||
<div>
|
<div>
|
||||||
<paper-input type="number" id="txtMaxBackdrops" pattern="[0-9]*" required="required" min="0" label="${LabelMaxBackdropsPerItem}"></paper-input>
|
<paper-input type="number" id="txtMaxBackdrops" pattern="[0-9]*" required="required" min="0" label="${LabelMaxBackdropsPerItem}"></paper-input>
|
||||||
|
</div>
|
||||||
|
<br />
|
||||||
|
<div>
|
||||||
|
<paper-input type="number" id="txtMinBackdropDownloadWidth" pattern="[0-9]*" required="required" min="0" label="${LabelMinBackdropDownloadWidth}"></paper-input>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<br />
|
|
||||||
<div>
|
<div class="screenshotFields" style="margin-bottom: 2em; display: none;">
|
||||||
<paper-input type="number" id="txtMinBackdropDownloadWidth" pattern="[0-9]*" required="required" min="0" label="${LabelMinBackdropDownloadWidth}"></paper-input>
|
<div>
|
||||||
|
<paper-input type="number" id="txtMaxScreenshots" pattern="[0-9]*" required="required" min="0" label="${LabelMaxScreenshotsPerItem}"></paper-input>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<paper-input type="number" id="txtMinScreenshotDownloadWidth" pattern="[0-9]*" required="required" min="0" label="${LabelMinScreenshotDownloadWidth}"></paper-input>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="paperListLabel">${HeaderFetchImages}</div>
|
||||||
|
<div class="imageSelections paperCheckboxList">
|
||||||
|
|
||||||
|
<paper-checkbox class="imageType hide" data-imagetype="Primary">${OptionDownloadPrimaryImage}</paper-checkbox>
|
||||||
|
<paper-checkbox class="imageType hide" data-imagetype="Art">${OptionDownloadArtImage}</paper-checkbox>
|
||||||
|
<paper-checkbox class="imageType hide" data-imagetype="BoxRear">${OptionDownloadBackImage}</paper-checkbox>
|
||||||
|
<paper-checkbox class="imageType hide" data-imagetype="Banner">${OptionDownloadBannerImage}</paper-checkbox>
|
||||||
|
<paper-checkbox class="imageType hide" data-imagetype="Box">${OptionDownloadBoxImage}</paper-checkbox>
|
||||||
|
|
||||||
|
<paper-checkbox class="imageType hide" data-imagetype="Disc">${OptionDownloadDiscImage}</paper-checkbox>
|
||||||
|
<paper-checkbox class="imageType hide" data-imagetype="Logo">${OptionDownloadLogoImage}</paper-checkbox>
|
||||||
|
<paper-checkbox class="imageType hide" data-imagetype="Menu">${OptionDownloadMenuImage}</paper-checkbox>
|
||||||
|
<paper-checkbox class="imageType hide" data-imagetype="Thumb">${OptionDownloadThumbImage}</paper-checkbox>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div class="screenshotFields" style="margin-bottom: 2em; display: none;">
|
|
||||||
<div>
|
|
||||||
<paper-input type="number" id="txtMaxScreenshots" pattern="[0-9]*" required="required" min="0" label="${LabelMaxScreenshotsPerItem}"></paper-input>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<paper-input type="number" id="txtMinScreenshotDownloadWidth" pattern="[0-9]*" required="required" min="0" label="${LabelMinScreenshotDownloadWidth}"></paper-input>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="paperListLabel">${HeaderFetchImages}</div>
|
|
||||||
<div class="imageSelections paperCheckboxList">
|
|
||||||
|
|
||||||
<paper-checkbox class="imageType hide" data-imagetype="Primary">${OptionDownloadPrimaryImage}</paper-checkbox>
|
|
||||||
<paper-checkbox class="imageType hide" data-imagetype="Art">${OptionDownloadArtImage}</paper-checkbox>
|
|
||||||
<paper-checkbox class="imageType hide" data-imagetype="BoxRear">${OptionDownloadBackImage}</paper-checkbox>
|
|
||||||
<paper-checkbox class="imageType hide" data-imagetype="Banner">${OptionDownloadBannerImage}</paper-checkbox>
|
|
||||||
<paper-checkbox class="imageType hide" data-imagetype="Box">${OptionDownloadBoxImage}</paper-checkbox>
|
|
||||||
|
|
||||||
<paper-checkbox class="imageType hide" data-imagetype="Disc">${OptionDownloadDiscImage}</paper-checkbox>
|
|
||||||
<paper-checkbox class="imageType hide" data-imagetype="Logo">${OptionDownloadLogoImage}</paper-checkbox>
|
|
||||||
<paper-checkbox class="imageType hide" data-imagetype="Menu">${OptionDownloadMenuImage}</paper-checkbox>
|
|
||||||
<paper-checkbox class="imageType hide" data-imagetype="Thumb">${OptionDownloadThumbImage}</paper-checkbox>
|
|
||||||
</div>
|
|
||||||
</emby-collapsible>
|
|
||||||
|
|
||||||
<br />
|
<br />
|
||||||
<br />
|
<br />
|
||||||
|
|
|
||||||
|
|
@ -2020,7 +2020,8 @@
|
||||||
imgUrl = ApiClient.getScaledImageUrl(imageItem.ParentThumbItemId, {
|
imgUrl = ApiClient.getScaledImageUrl(imageItem.ParentThumbItemId, {
|
||||||
type: "Thumb",
|
type: "Thumb",
|
||||||
maxWidth: thumbWidth,
|
maxWidth: thumbWidth,
|
||||||
enableImageEnhancers: enableImageEnhancers
|
enableImageEnhancers: enableImageEnhancers,
|
||||||
|
tag: imageItem.ParentThumbImageTag
|
||||||
});
|
});
|
||||||
|
|
||||||
} else if (options.preferThumb && imageItem.BackdropImageTags && imageItem.BackdropImageTags.length) {
|
} else if (options.preferThumb && imageItem.BackdropImageTags && imageItem.BackdropImageTags.length) {
|
||||||
|
|
@ -2115,10 +2116,11 @@
|
||||||
|
|
||||||
} else if (imageItem.ParentThumbItemId) {
|
} else if (imageItem.ParentThumbItemId) {
|
||||||
|
|
||||||
imgUrl = ApiClient.getThumbImageUrl(imageItem, {
|
imgUrl = ApiClient.getScaledImageUrl(imageItem.ParentThumbItemId, {
|
||||||
type: "Thumb",
|
type: "Thumb",
|
||||||
maxWidth: thumbWidth,
|
maxWidth: thumbWidth,
|
||||||
enableImageEnhancers: enableImageEnhancers
|
enableImageEnhancers: enableImageEnhancers,
|
||||||
|
tag: imageItem.ParentThumbImageTag
|
||||||
});
|
});
|
||||||
|
|
||||||
} else if (item.MediaType == "Audio" || item.Type == "MusicAlbum" || item.Type == "MusicArtist") {
|
} else if (item.MediaType == "Audio" || item.Type == "MusicAlbum" || item.Type == "MusicArtist") {
|
||||||
|
|
|
||||||
|
|
@ -1210,7 +1210,7 @@ var Dashboard = {
|
||||||
// The native app can handle a little bit more than safari
|
// The native app can handle a little bit more than safari
|
||||||
if (AppInfo.isNativeApp) {
|
if (AppInfo.isNativeApp) {
|
||||||
|
|
||||||
//quality -= 5;
|
quality -= 5;
|
||||||
} else {
|
} else {
|
||||||
quality -= 15;
|
quality -= 15;
|
||||||
}
|
}
|
||||||
|
|
@ -2423,7 +2423,7 @@ var AppInfo = {};
|
||||||
|
|
||||||
defineRoute({
|
defineRoute({
|
||||||
path: '/dashboardgeneral.html',
|
path: '/dashboardgeneral.html',
|
||||||
dependencies: ['emby-collapsible', 'paper-textarea', 'paper-input', 'paper-checkbox', 'jqmlistview'],
|
dependencies: ['emby-collapse', 'paper-textarea', 'paper-input', 'paper-checkbox', 'jqmlistview'],
|
||||||
controller: 'scripts/dashboardgeneral',
|
controller: 'scripts/dashboardgeneral',
|
||||||
autoFocus: false,
|
autoFocus: false,
|
||||||
roles: 'admin'
|
roles: 'admin'
|
||||||
|
|
@ -2612,7 +2612,7 @@ var AppInfo = {};
|
||||||
|
|
||||||
defineRoute({
|
defineRoute({
|
||||||
path: '/librarysettings.html',
|
path: '/librarysettings.html',
|
||||||
dependencies: ['emby-collapsible', 'paper-input', 'paper-checkbox', 'emby-button', 'jqmlistview'],
|
dependencies: ['emby-collapse', 'paper-input', 'paper-checkbox', 'emby-button', 'jqmlistview'],
|
||||||
autoFocus: false,
|
autoFocus: false,
|
||||||
roles: 'admin',
|
roles: 'admin',
|
||||||
controller: 'scripts/librarysettings'
|
controller: 'scripts/librarysettings'
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue