Added Polymer
This commit is contained in:
Thaum
21
rpg-docs/public/bower_components/core-animated-pages/.bower.json
vendored
Normal file
21
rpg-docs/public/bower_components/core-animated-pages/.bower.json
vendored
Normal file
@@ -0,0 +1,21 @@
|
||||
{
|
||||
"name": "core-animated-pages",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"polymer": "Polymer/polymer#^0.5.0",
|
||||
"core-selector": "Polymer/core-selector#^0.5.0",
|
||||
"core-style": "Polymer/core-style#^0.5.0",
|
||||
"core-transition": "Polymer/core-transition#^0.5.0"
|
||||
},
|
||||
"version": "0.5.1",
|
||||
"homepage": "https://github.com/Polymer/core-animated-pages",
|
||||
"_release": "0.5.1",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "0.5.1",
|
||||
"commit": "ea600ff41cfc770b4203eaa641a72ada1c1ba154"
|
||||
},
|
||||
"_source": "git://github.com/Polymer/core-animated-pages.git",
|
||||
"_target": "^0.5.0",
|
||||
"_originalSource": "Polymer/core-animated-pages"
|
||||
}
|
||||
4
rpg-docs/public/bower_components/core-animated-pages/README.md
vendored
Normal file
4
rpg-docs/public/bower_components/core-animated-pages/README.md
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
core-animated-pages
|
||||
===================
|
||||
|
||||
See the [component page](http://polymer-project.org/docs/elements/core-elements.html#core-animated-pages) for more information.
|
||||
11
rpg-docs/public/bower_components/core-animated-pages/bower.json
vendored
Normal file
11
rpg-docs/public/bower_components/core-animated-pages/bower.json
vendored
Normal file
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"name": "core-animated-pages",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"polymer": "Polymer/polymer#^0.5.0",
|
||||
"core-selector": "Polymer/core-selector#^0.5.0",
|
||||
"core-style": "Polymer/core-style#^0.5.0",
|
||||
"core-transition": "Polymer/core-transition#^0.5.0"
|
||||
},
|
||||
"version": "0.5.1"
|
||||
}
|
||||
28
rpg-docs/public/bower_components/core-animated-pages/core-animated-pages.css
vendored
Normal file
28
rpg-docs/public/bower_components/core-animated-pages/core-animated-pages.css
vendored
Normal file
@@ -0,0 +1,28 @@
|
||||
/*
|
||||
* @license
|
||||
* Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
||||
* This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
* The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
* The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
* Code distributed by Google as part of the polymer project is also
|
||||
* subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
*/
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: ':host > *'; }
|
||||
::content > * {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: ':host > *:not(.core-selected):not([animate])'; }
|
||||
::content > *:not(.core-selected):not([animate]) {
|
||||
display: none !important;
|
||||
}
|
||||
436
rpg-docs/public/bower_components/core-animated-pages/core-animated-pages.html
vendored
Normal file
436
rpg-docs/public/bower_components/core-animated-pages/core-animated-pages.html
vendored
Normal file
@@ -0,0 +1,436 @@
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
<link href="../core-selector/core-selector.html" rel="import">
|
||||
|
||||
<link href="transitions/hero-transition.html" rel="import">
|
||||
<link href="transitions/cross-fade.html" rel="import">
|
||||
|
||||
<!--
|
||||
|
||||
`core-animated-pages` selects one of its children "pages" to show and runs a transition
|
||||
when switching between them. The transitions are designed to be pluggable, and can
|
||||
accept any object that is an instance of a `core-transition-pages`. Transitions to run
|
||||
are specified in the `transitions` attribute as a space-delimited string of `id`s of
|
||||
transition elements. Several transitions are available with `core-animated-pages` by
|
||||
default, including `hero-transition`, `cross-fade`, and `tile-cascade`.
|
||||
|
||||
Example:
|
||||
|
||||
<style>
|
||||
#hero1 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background-color: orange;
|
||||
}
|
||||
#hero2 {
|
||||
position: absolute;
|
||||
top: 200px;
|
||||
left: 300px;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background-color: orange;
|
||||
}
|
||||
#bottom1, #bottom2 {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 50px;
|
||||
}
|
||||
#bottom1 {
|
||||
background-color: blue;
|
||||
}
|
||||
#bottom2 {
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
// hero-transition and cross-fade are declared elsewhere
|
||||
<core-animated-pages transitions="hero-transition cross-fade">
|
||||
<section id="page1">
|
||||
<div id="hero1" hero-id="hero" hero></div>
|
||||
<div id="bottom1" cross-fade></div>
|
||||
</section>
|
||||
<section id="page2">
|
||||
<div id="hero2" hero-id="hero" hero></div>
|
||||
<div id="bottom2" cross-fade></div>
|
||||
</section>
|
||||
</core-animated-pages>
|
||||
|
||||
In the above example, two transitions (`hero-transition` and `cross-fade`) are run when switching
|
||||
between `page1` and `page2`. `hero-transition` transforms elements with the same `hero-id` such
|
||||
that they appear to be shared across different pages. `cross-fade` fades out the elements marked
|
||||
`cross-fade` in the outgoing page, and fades in those in the incoming page. See the individual
|
||||
transition's documentation for specific details.
|
||||
|
||||
Finding elements to transition
|
||||
------------------------------
|
||||
|
||||
In general, a transition is applied to elements marked with a certain attribute. For example,
|
||||
`hero-transition` applies the transition on elements with the `hero` and `hero-id` attribute.
|
||||
Among the transitions included with `core-animated-pages`, script-based transitions such as
|
||||
`hero-transition` generally look for elements up to one level of shadowRoot from the
|
||||
`core-animated-pages` element, and CSS-based transitions such as `cross-fade` look for elements
|
||||
within any shadowRoot within the `core-animated-pages` element. This means you can use
|
||||
custom elements as pages and mark elements in their shadowRoots as heroes, or mark
|
||||
elements in deeper shadowRoots with other transitions.
|
||||
|
||||
Example:
|
||||
|
||||
<polymer-element name="x-el" noscript>
|
||||
<template>
|
||||
<style>
|
||||
#hero {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 50px;
|
||||
height: 300px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
<div id="hero" hero-id="bar" hero></div>
|
||||
</template>
|
||||
</polymer-element>
|
||||
|
||||
<polymer-element name="x-page-1" noscript>
|
||||
<template>
|
||||
<style>
|
||||
#hero1 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background-color: orange;
|
||||
}
|
||||
</style>
|
||||
<div id="hero1" hero-id="foo" hero></div>
|
||||
<div id="hero2" hero-id="bar" hero></div>
|
||||
</template>
|
||||
</polymer-element>
|
||||
|
||||
<polymer-element name="x-page-2" noscript>
|
||||
<template>
|
||||
<style>
|
||||
#hero1 {
|
||||
position: absolute;
|
||||
top: 200px;
|
||||
left: 300px;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background-color: orange;
|
||||
}
|
||||
#hero2 {
|
||||
background-color: blue;
|
||||
height: 150px;
|
||||
width: 400px;
|
||||
}
|
||||
</style>
|
||||
// The below element is one level of shadow from the core-animated-pages and will
|
||||
// be transitioned.
|
||||
<div id="hero1" hero-id="foo" hero></div>
|
||||
// The below element contains a hero inside its shadowRoot making it two levels away
|
||||
// from the core-animated-pages, and will not be transitioned.
|
||||
<x-el></x-el>
|
||||
</template>
|
||||
</polymer-element>
|
||||
|
||||
<core-animated-pages transitions="hero-transition">
|
||||
<x-page-1></x-page-1>
|
||||
<x-page-2></x-page-2>
|
||||
</core-animated-pages>
|
||||
|
||||
Note that the container element of the page does not participate in the transition.
|
||||
|
||||
// This does not work
|
||||
<core-animated-pages transitions="cross-fade">
|
||||
<section cross-fade></section>
|
||||
<section cross-fade></section>
|
||||
</core-animated-pages>
|
||||
|
||||
// This works
|
||||
<core-animated-pages transitions="cross-fade">
|
||||
<section>
|
||||
<div cross-fade></div>
|
||||
</section>
|
||||
<section>
|
||||
<div cross-fade></div>
|
||||
</section>
|
||||
</core-animated-pages>
|
||||
|
||||
Dynamically setting up transitions
|
||||
----------------------------------
|
||||
|
||||
An easy way to set up transitions dynamically is to use property binding on
|
||||
the transition attributes.
|
||||
|
||||
Example:
|
||||
|
||||
<core-animated-pages selected="{{selected}}">
|
||||
<section id="page1">
|
||||
<div hero-id="hero" hero></div>
|
||||
</section>
|
||||
<section id="page2">
|
||||
<div id="foo" hero-id="hero" hero?="{{selected === 1 || selected === 0}}" cross-fade="{{selected === 2}}"></div>
|
||||
</section>
|
||||
<section id="page3">
|
||||
</section>
|
||||
</core-animated-pages>
|
||||
|
||||
In the above example, the "foo" element only behaves as a hero element if transitioning between
|
||||
`#page1` and `#page2`. It gets cross-faded when transition to or from `#page3`.
|
||||
|
||||
Nesting pages
|
||||
-------------
|
||||
|
||||
It is possible to nest core-animated-pages elements for organization. Excessive nesting is
|
||||
not encouraged, however, since it makes setting up the transition more complex.
|
||||
|
||||
To nest core-animated-pages, the page containing the nested core-animated-pages element should
|
||||
have a `selectedItem` property bound to the `selectedItem` property of the nested element. This
|
||||
will allow the outer core-animated-pages to know which nested page it is actually transitioning
|
||||
to.
|
||||
|
||||
Example:
|
||||
|
||||
<polymer-element name="nested-page" attributes="selectedItem">
|
||||
<template>
|
||||
<core-animated-pages selectedItem="{{selectedItem}}">
|
||||
...
|
||||
</core-animated-pages>
|
||||
</template>
|
||||
</polymer-element>
|
||||
|
||||
<core-animated-pages>
|
||||
<section id="page1"></section>
|
||||
<nested-page id="page2"></nested-page>
|
||||
</core-animated-pages>
|
||||
|
||||
@element core-animated-pages
|
||||
@extends core-selector
|
||||
@status beta
|
||||
@homepage github.io
|
||||
-->
|
||||
<!--
|
||||
Fired before a page transition occurs. Both pages involved in the transition are visible when
|
||||
this event fires. This is useful if there is something the client needs to do when a page becomes
|
||||
visible.
|
||||
|
||||
@event core-animated-pages-transition-prepare
|
||||
-->
|
||||
<!--
|
||||
Fired when a page transition completes.
|
||||
|
||||
@event core-animated-pages-transition-end
|
||||
-->
|
||||
<polymer-element name="core-animated-pages" extends="core-selector" notap attributes="transitions">
|
||||
|
||||
<template>
|
||||
|
||||
<link href="core-animated-pages.css" rel="stylesheet">
|
||||
|
||||
<shadow></shadow>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
|
||||
eventDelegates: {
|
||||
'core-transitionend': 'transitionEnd'
|
||||
},
|
||||
|
||||
/**
|
||||
* A space-delimited string of transitions to use when switching between pages in this element.
|
||||
* The strings are `id`s of `core-transition-pages` elements included elsewhere. See the
|
||||
* individual transition's document for specific details.
|
||||
*
|
||||
* @attribute transitions
|
||||
* @type string
|
||||
* @default ''
|
||||
*/
|
||||
transitions: '',
|
||||
|
||||
selected: 0,
|
||||
|
||||
/**
|
||||
* The last page selected. This property is useful to dynamically set transitions based
|
||||
* on incoming and outgoing pages.
|
||||
*
|
||||
* @attribute lastSelected
|
||||
* @type Object
|
||||
* @default null
|
||||
*/
|
||||
lastSelected: null,
|
||||
|
||||
registerCallback: function() {
|
||||
this.tmeta = document.createElement('core-transition');
|
||||
},
|
||||
|
||||
created: function() {
|
||||
this._transitions = [];
|
||||
this.transitioning = [];
|
||||
},
|
||||
|
||||
transitionsChanged: function() {
|
||||
this._transitions = this.transitions.split(' ');
|
||||
},
|
||||
|
||||
_transitionsChanged: function(old) {
|
||||
if (this._transitionElements) {
|
||||
this._transitionElements.forEach(function(t) {
|
||||
t.teardown(this);
|
||||
}, this);
|
||||
}
|
||||
this._transitionElements = [];
|
||||
this._transitions.forEach(function(transitionId) {
|
||||
var t = this.getTransition(transitionId);
|
||||
if (t) {
|
||||
this._transitionElements.push(t);
|
||||
t.setup(this);
|
||||
}
|
||||
}, this);
|
||||
},
|
||||
|
||||
getTransition: function(transitionId) {
|
||||
return this.tmeta.byId(transitionId);
|
||||
},
|
||||
|
||||
selectionSelect: function(e, detail) {
|
||||
this.updateSelectedItem();
|
||||
// Wait to call applySelection when we run the transition
|
||||
},
|
||||
|
||||
applyTransition: function(src, dst) {
|
||||
if (this.animating) {
|
||||
this.cancelAsync(this.animating);
|
||||
this.animating = null;
|
||||
}
|
||||
|
||||
Polymer.flush();
|
||||
|
||||
if (this.transitioning.indexOf(src) === -1) {
|
||||
this.transitioning.push(src);
|
||||
}
|
||||
if (this.transitioning.indexOf(dst) === -1) {
|
||||
this.transitioning.push(dst);
|
||||
}
|
||||
// force src, dst to display
|
||||
src.setAttribute('animate', '');
|
||||
dst.setAttribute('animate', '');
|
||||
//
|
||||
var options = {
|
||||
src: src,
|
||||
dst: dst,
|
||||
easing: 'cubic-bezier(0.4, 0, 0.2, 1)'
|
||||
};
|
||||
|
||||
// fire an event so clients have a chance to do something when the
|
||||
// new page becomes visible but before it draws.
|
||||
this.fire('core-animated-pages-transition-prepare');
|
||||
|
||||
//
|
||||
// prepare transition
|
||||
this._transitionElements.forEach(function(transition) {
|
||||
transition.prepare(this, options);
|
||||
}, this);
|
||||
//
|
||||
// force layout!
|
||||
src.offsetTop;
|
||||
|
||||
//
|
||||
// apply selection
|
||||
this.applySelection(dst, true);
|
||||
this.applySelection(src, false);
|
||||
//
|
||||
// start transition
|
||||
this._transitionElements.forEach(function(transition) {
|
||||
transition.go(this, options);
|
||||
}, this);
|
||||
|
||||
if (!this._transitionElements.length) {
|
||||
this.complete();
|
||||
} else {
|
||||
this.animating = this.async(this.complete.bind(this), null, 5000);
|
||||
}
|
||||
},
|
||||
|
||||
complete: function() {
|
||||
if (this.animating) {
|
||||
this.cancelAsync(this.animating);
|
||||
this.animating = null;
|
||||
}
|
||||
|
||||
this.transitioning.forEach(function(t) {
|
||||
t.removeAttribute('animate');
|
||||
});
|
||||
this.transitioning = [];
|
||||
|
||||
this._transitionElements.forEach(function(transition) {
|
||||
transition.ensureComplete(this);
|
||||
}, this);
|
||||
|
||||
this.fire('core-animated-pages-transition-end');
|
||||
},
|
||||
|
||||
transitionEnd: function(e) {
|
||||
if (this.transitioning.length) {
|
||||
var completed = true;
|
||||
this._transitionElements.forEach(function(transition) {
|
||||
if (!transition.completed) {
|
||||
completed = false;
|
||||
}
|
||||
});
|
||||
if (completed) {
|
||||
this.job('transitionWatch', function() {
|
||||
this.complete();
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
selectedChanged: function(old) {
|
||||
this.lastSelected = old;
|
||||
this.super(arguments);
|
||||
},
|
||||
|
||||
selectedItemChanged: function(oldItem) {
|
||||
this.super(arguments);
|
||||
|
||||
if (!oldItem) {
|
||||
this.applySelection(this.selectedItem, true);
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.hasAttribute('no-transition') || !this._transitionElements || !this._transitionElements.length) {
|
||||
this.applySelection(oldItem, false);
|
||||
this.applySelection(this.selectedItem, true);
|
||||
return;
|
||||
}
|
||||
|
||||
if (oldItem && this.selectedItem) {
|
||||
// TODO(sorvell): allow bindings to update first?
|
||||
var self = this;
|
||||
Polymer.flush();
|
||||
Polymer.endOfMicrotask(function() {
|
||||
self.applyTransition(oldItem, self.selectedItem);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</polymer-element>
|
||||
23
rpg-docs/public/bower_components/core-animated-pages/demo.html
vendored
Normal file
23
rpg-docs/public/bower_components/core-animated-pages/demo.html
vendored
Normal file
@@ -0,0 +1,23 @@
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
<a href="demos/simple.html">pluggable transitions</a>
|
||||
<br>
|
||||
<a href="demos/news.html">icon to top bar</a>
|
||||
<br>
|
||||
<a href="demos/music.html">chip to card</a>
|
||||
<br>
|
||||
<a href="demos/list.html">list reorder</a>
|
||||
<br>
|
||||
<a href="demos/grid.html">grid to full screen</a>
|
||||
<br>
|
||||
<a href="demos/nested.html">nested core-animated-pages</a>
|
||||
<br>
|
||||
<a href="demos/quiz1.html">quiz: category to splash to question</a>
|
||||
<br>
|
||||
113
rpg-docs/public/bower_components/core-animated-pages/demos/grid.html
vendored
Normal file
113
rpg-docs/public/bower_components/core-animated-pages/demos/grid.html
vendored
Normal file
@@ -0,0 +1,113 @@
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<script src="../../webcomponentsjs/webcomponents.js"></script>
|
||||
|
||||
<link href="../../core-icons/core-icons.html" rel="import">
|
||||
<link href="../../core-icon-button/core-icon-button.html" rel="import">
|
||||
<link href="../../core-toolbar/core-toolbar.html" rel="import">
|
||||
<link href="../core-animated-pages.html" rel="import">
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
background-color: steelblue;
|
||||
}
|
||||
|
||||
#container {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.card {
|
||||
position: relative;
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
font-size: 50px;
|
||||
margin: 8px;
|
||||
background-color: tomato;
|
||||
border-radius: 4px;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.view {
|
||||
font-size: 250px;
|
||||
background-color: tomato;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body unresolved fullbleed vertical layout>
|
||||
<template is="auto-binding">
|
||||
<core-toolbar class="toolbar">
|
||||
<core-icon-button icon="{{$.pages.selected != 0 ? 'arrow-back' : 'menu'}}" on-tap="{{back}}"></core-icon-button>
|
||||
<div flex>Stuff</div>
|
||||
<core-icon-button icon="more-vert"></core-icon-button>
|
||||
</core-toolbar>
|
||||
<core-animated-pages id="pages" flex selected="0" on-core-animated-pages-transition-end="{{transitionend}}" transitions="cross-fade-all hero-transition">
|
||||
|
||||
<section vertical layout>
|
||||
|
||||
<div id="container" flex horizontal wrap around-justified layout hero-p>
|
||||
<template repeat="{{item in items}}">
|
||||
<div class="card" vertical center center-justified layout hero-id="item-{{item}}" hero?="{{$.pages.selected === item + 1 || lastSelected === item + 1}}" on-tap="{{selectView}}"><span cross-fade>{{item}}</span></div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<template repeat="{{item in items}}">
|
||||
<section vertical layout>
|
||||
<div class="view" flex vertical center center-justified layout hero-id="item-{{item}}" hero?="{{$.pages.selected === item + 1 || $.pages.selected === 0}}"><span cross-fade>{{item}}</span></div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
</core-animated-pages>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
addEventListener('template-bound', function(e) {
|
||||
var scope = e.target;
|
||||
var items = [], count=50;
|
||||
for (var i=0; i < count; i++) {
|
||||
items.push(i);
|
||||
}
|
||||
|
||||
scope.items = items;
|
||||
|
||||
scope.selectView = function(e) {
|
||||
var i = e.target.templateInstance.model.item;
|
||||
this.$.pages.selected = i+1;
|
||||
}
|
||||
|
||||
scope.back = function() {
|
||||
this.lastSelected = this.$.pages.selected;
|
||||
console.log(this.lastSelected);
|
||||
this.$.pages.selected = 0;
|
||||
}
|
||||
|
||||
scope.transitionend = function() {
|
||||
if (this.lastSelected) {
|
||||
this.lastSelected = null;
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
126
rpg-docs/public/bower_components/core-animated-pages/demos/list.html
vendored
Normal file
126
rpg-docs/public/bower_components/core-animated-pages/demos/list.html
vendored
Normal file
@@ -0,0 +1,126 @@
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<script src="../../webcomponentsjs/webcomponents.js"></script>
|
||||
<link href="../core-animated-pages.html" rel="import">
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body unresolved>
|
||||
|
||||
<polymer-element name="list-demo">
|
||||
<template>
|
||||
|
||||
<style>
|
||||
p {
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
.item {
|
||||
background: #e7e7e7;
|
||||
padding: 16px;
|
||||
margin: 8px;
|
||||
border-radius: 3px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Tap to move to top</p>
|
||||
|
||||
<core-animated-pages id="pages" on-tap="{{reorder}}" selected="{{selected}}" on-core-animated-pages-transition-end="{{done}}" transitions="hero-transition">
|
||||
|
||||
<section>
|
||||
<template repeat="{{items}}">
|
||||
<div hero-id="{{h}}" hero class="item">{{v}}</div>
|
||||
</template>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<template repeat="{{items2}}">
|
||||
<div hero-id="{{h}}" hero class="item">{{v}}</div>
|
||||
</template>
|
||||
</section>
|
||||
|
||||
</core-animated-pages>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
Polymer('list-demo', {
|
||||
|
||||
selected: 0,
|
||||
|
||||
items: [
|
||||
{h: 'matt', v: 'Matt McNulty'},
|
||||
{h: 'scott', v: 'Scott Miles'},
|
||||
{h: 'steve', v: 'Steve Orvell'},
|
||||
{h: 'frankie', v: 'Frankie Fu'},
|
||||
{h: 'daniel', v: 'Daniel Freedman'},
|
||||
{h: 'yvonne', v: 'Yvonne Yip'},
|
||||
],
|
||||
|
||||
items2: [
|
||||
{h: 'matt', v: 'Matt McNulty'},
|
||||
{h: 'scott', v: 'Scott Miles'},
|
||||
{h: 'steve', v: 'Steve Orvell'},
|
||||
{h: 'frankie', v: 'Frankie Fu'},
|
||||
{h: 'daniel', v: 'Daniel Freedman'},
|
||||
{h: 'yvonne', v: 'Yvonne Yip'},
|
||||
],
|
||||
|
||||
reorder: function(e) {
|
||||
if (this.$.pages.transitioning.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.lastMoved = e.target;
|
||||
this.lastMoved.style.zIndex = 10005;
|
||||
var item = e.target.templateInstance.model;
|
||||
var items = this.selected ? this.items : this.items2;
|
||||
var i = this.selected ? this.items2.indexOf(item) : this.items.indexOf(item);
|
||||
if (i != 0) {
|
||||
items.splice(0, 0, item);
|
||||
items.splice(i + 1, 1);
|
||||
}
|
||||
|
||||
this.lastIndex = i;
|
||||
this.selected = this.selected ? 0 : 1;
|
||||
},
|
||||
|
||||
done: function() {
|
||||
var i = this.lastIndex;
|
||||
var items = this.selected ? this.items : this.items2;
|
||||
var item = items[i];
|
||||
items.splice(0, 0, item);
|
||||
items.splice(i + 1, 1);
|
||||
this.lastMoved.style.zIndex = null;
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</polymer-element>
|
||||
|
||||
<list-demo></list-demo>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
182
rpg-docs/public/bower_components/core-animated-pages/demos/music.html
vendored
Normal file
182
rpg-docs/public/bower_components/core-animated-pages/demos/music.html
vendored
Normal file
@@ -0,0 +1,182 @@
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>core-animated-pages</title>
|
||||
|
||||
<script src="../../webcomponentsjs/webcomponents.js"></script>
|
||||
<link href="../core-animated-pages.html" rel="import">
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Roboto 2', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
margin: 0;
|
||||
background: #f1f1f1;
|
||||
}
|
||||
|
||||
.green {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 350px;
|
||||
background: #70c26f;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<polymer-element name="music-demo">
|
||||
<template>
|
||||
|
||||
<style>
|
||||
.chip-container {
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
right: 0;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.chip {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
border-radius: 3px;
|
||||
margin: 4px;
|
||||
overflow: hidden;
|
||||
text-align: start;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
|
||||
.chip-top {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.chip-bottom {
|
||||
padding: 8px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.chip-album-title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#details {
|
||||
padding: 200px 10% 0;
|
||||
}
|
||||
|
||||
.card {
|
||||
height: 400px;
|
||||
border-radius: 3px;
|
||||
text-align: start;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
||||
}
|
||||
|
||||
.card-left {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.card-right {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
border-radius: 50%;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.card-album-title {
|
||||
font-size: 2em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<core-animated-pages selected="{{page}}" transitions="hero-transition" on-core-animated-pages-transition-end="{{complete}}">
|
||||
|
||||
<section>
|
||||
|
||||
<div class="chip-container" hero-p on-tap="{{transition}}">
|
||||
|
||||
<template repeat="{{items as item}}">
|
||||
|
||||
<div class="chip" hero-id="{{item.artist}}-{{item.album}}" hero?="{{selectedAlbum === item }}">
|
||||
<div class="chip-top" style="background:{{item.color}};" hero-id="{{item.artist}}-{{item.album}}-art" hero?="{{selectedAlbum === item}}"></div>
|
||||
<div class="chip-bottom">
|
||||
<div class="chip-album-title">{{item.album}}</div>
|
||||
<div class="chip-artist">{{item.artist}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="details">
|
||||
|
||||
<div class="card" layout horizontal hero-id="{{selectedAlbum.artist}}-{{selectedAlbum.album}}" hero on-tap="{{transition}}">
|
||||
<div class="card-left" style="background:{{selectedAlbum.color}};" hero-id="{{selectedAlbum.artist}}-{{selectedAlbum.album}}-art" hero></div>
|
||||
<div class="card-right" flex>
|
||||
<div layout horizontal center>
|
||||
<div>
|
||||
<div class="card-icon" style="background:{{selectedAlbum.color}};"></div>
|
||||
</div>
|
||||
<div flex>
|
||||
<div class="card-album-title">{{selectedAlbum.album}}</div>
|
||||
<div class="card-album-artist">{{selectedAlbum.artist}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
</core-animated-pages>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
|
||||
Polymer('music-demo', {
|
||||
|
||||
page: 0,
|
||||
|
||||
items: [
|
||||
{ artist: 'Tycho', album: 'Fragments', color: '#f4db33' },
|
||||
{ artist: 'Tycho', album: 'Past Prologue', color: '#972ff8' },
|
||||
{ artist: 'Tycho', album: 'Spectre', color: '#7dd6fe' },
|
||||
{ artist: 'Tycho', album: 'Awake', color: '#dc3c84' }
|
||||
],
|
||||
|
||||
selectedAlbum: null,
|
||||
|
||||
transition: function(e) {
|
||||
if (this.page === 0 && e.target.templateInstance.model.item) {
|
||||
this.selectedAlbum = e.target.templateInstance.model.item;
|
||||
this.page = 1;
|
||||
} else {
|
||||
this.page = 0;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
</polymer-element>
|
||||
|
||||
<div class="green"></div>
|
||||
|
||||
<music-demo></music-demo>
|
||||
</body>
|
||||
</html>
|
||||
113
rpg-docs/public/bower_components/core-animated-pages/demos/nested-animated-pages.html
vendored
Normal file
113
rpg-docs/public/bower_components/core-animated-pages/demos/nested-animated-pages.html
vendored
Normal file
@@ -0,0 +1,113 @@
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
<link href="../../core-icons/core-icons.html" rel="import">
|
||||
<link href="../../core-icon-button/core-icon-button.html" rel="import">
|
||||
<link href="../core-animated-pages.html" rel="import">
|
||||
|
||||
<polymer-element name="nested-animated-pages">
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
core-animated-pages {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.tall-toolbar {
|
||||
box-sizing: border-box;
|
||||
height: 240px;
|
||||
}
|
||||
|
||||
.tall-toolbar.colored {
|
||||
fill: #fff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tall-toolbar [flex] {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
core-icon-button {
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
.body {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
.square {
|
||||
position: absolute;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
left: 16px;
|
||||
top: 175px;
|
||||
}
|
||||
|
||||
</style>
|
||||
<core-animated-pages id="pages" selected="{{page}}" selectedItem="{{selectedItem}}" transitions="hero-transition" no-transition?="{{noTransition}}">
|
||||
|
||||
<section id="page1" cross-fade>
|
||||
<div class="tall-toolbar colored" style="background-color:orange;" layout vertical hero-id="thing" hero?="{{page === 0 || !noTransition}}">
|
||||
<div layout horizontal center>
|
||||
<core-icon-button icon="clear" on-tap="{{back}}"></core-icon-button>
|
||||
<div flex>One</div>
|
||||
<core-icon-button icon="arrow-forward" on-tap="{{transition}}"></core-icon-button>
|
||||
</div>
|
||||
<div flex></div>
|
||||
</div>
|
||||
<div flex class="body"></div>
|
||||
</section>
|
||||
|
||||
<section layout vertical id="page2" cross-fade>
|
||||
<div class="tall-toolbar" layout vertical>
|
||||
<div layout horizontal center>
|
||||
<core-icon-button icon="clear" on-tap="{{back}}"></core-icon-button>
|
||||
<div flex>Two</div>
|
||||
<core-icon-button icon="arrow-forward" on-tap="{{transition}}"></core-icon-button>
|
||||
</div>
|
||||
<div flex></div>
|
||||
</div>
|
||||
<div flex class="body"></div>
|
||||
<div class="square" style="background-color:orange;" hero-id="thing" hero?="{{page === 1 || !noTransition}}"></div>
|
||||
</section>
|
||||
|
||||
</core-animated-pages>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
|
||||
publish: {
|
||||
page: {value: 0}
|
||||
},
|
||||
|
||||
selectedItem: null,
|
||||
noTransition: true,
|
||||
|
||||
back: function() {
|
||||
this.noTransition = true;
|
||||
this.fire('nested-back');
|
||||
},
|
||||
|
||||
transition: function() {
|
||||
this.noTransition = false;
|
||||
this.page = this.page === 0 ? 1 : 0;
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
</polymer-element>
|
||||
112
rpg-docs/public/bower_components/core-animated-pages/demos/nested.html
vendored
Normal file
112
rpg-docs/public/bower_components/core-animated-pages/demos/nested.html
vendored
Normal file
@@ -0,0 +1,112 @@
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>core-animated-pages</title>
|
||||
<script src="../../webcomponentsjs/webcomponents.js"></script>
|
||||
<link href="nested-animated-pages.html" rel="import">
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Roboto 2', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
margin: 0;
|
||||
background: #f1f1f1;
|
||||
}
|
||||
|
||||
nested-demo {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<polymer-element name="nested-demo">
|
||||
<template>
|
||||
|
||||
<style>
|
||||
|
||||
core-animated-pages {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
section {
|
||||
text-align: center;
|
||||
padding-top: 250px;
|
||||
}
|
||||
|
||||
.square {
|
||||
display: inline-block;
|
||||
margin: 8px;
|
||||
padding: 8px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: orange;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
<core-animated-pages selected="{{page}}" transitions="hero-transition cross-fade">
|
||||
|
||||
<section on-tap="{{transition}}" layout horizontal center-justified>
|
||||
|
||||
<div class="square" id="thing1" hero-id="thing" hero?="{{subpage === 0}}" cross-fade?="{{subpage !== 0}}">thing 1</div>
|
||||
<div class="square" id="thing2" hero-id="thing" hero?="{{subpage === 1}}" cross-fade?="{{subpage !== 1}}">thing 2</div>
|
||||
|
||||
</section>
|
||||
|
||||
<nested-animated-pages page="{{subpage}}" on-nested-back="{{back}}"></nested-animated-pages>
|
||||
|
||||
</core-animated-pages>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
Polymer('nested-demo', {
|
||||
|
||||
page: 0,
|
||||
subpage: 0,
|
||||
|
||||
transition: function(e) {
|
||||
|
||||
var el = e.target;
|
||||
if (el.id === "thing1") {
|
||||
this.subpage = 0;
|
||||
} else {
|
||||
this.subpage = 1;
|
||||
}
|
||||
|
||||
setTimeout(function() {
|
||||
this.page = 1;
|
||||
}.bind(this), 200);
|
||||
},
|
||||
|
||||
back: function() {
|
||||
this.page = 0;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
</polymer-element>
|
||||
|
||||
<nested-demo></nested-demo>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
255
rpg-docs/public/bower_components/core-animated-pages/demos/news.html
vendored
Normal file
255
rpg-docs/public/bower_components/core-animated-pages/demos/news.html
vendored
Normal file
@@ -0,0 +1,255 @@
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<script src="../../webcomponentsjs/webcomponents.js"></script>
|
||||
|
||||
<link href="../../core-icons/core-icons.html" rel="import">
|
||||
<link href="../../core-icons/social-icons.html" rel="import">
|
||||
<link href="../../core-toolbar/core-toolbar.html" rel="import">
|
||||
|
||||
<link href="../../paper-shadow/paper-shadow.html" rel="import">
|
||||
|
||||
<link href="../core-animated-pages.html" rel="import">
|
||||
|
||||
<style shim-shadowdom>
|
||||
body {
|
||||
font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.fit {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 420px;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
background: #8d3efc;
|
||||
/* FIXME */
|
||||
color: #fff !important;
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.toolbar-2 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: #000;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
body /deep/ .toolbar-2 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
width: 420px;
|
||||
background: #000;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: #e7e7e7;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.card {
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.card-top {
|
||||
background: #f2da2f;
|
||||
height: 240px;
|
||||
}
|
||||
|
||||
.card-top-2 {
|
||||
background: #99f8b7;
|
||||
height: 240px;
|
||||
}
|
||||
|
||||
.card-bottom {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.headline {
|
||||
font-size: 24px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.icon {
|
||||
position: relative;
|
||||
background: #000;
|
||||
color: #fff;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.icon::after {
|
||||
content: 'T';
|
||||
font-size: 24px;
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
left: 13px;
|
||||
}
|
||||
|
||||
.source-container {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.two-lines {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.source {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.time {
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.tiles-container {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.tile {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 85px;
|
||||
height: 85px;
|
||||
background: #fff;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body unresolved>
|
||||
|
||||
<polymer-element name="shadow-div" noscript>
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
<paper-shadow target="{{}}" z="1"></paper-shadow>
|
||||
<content></content>
|
||||
</template>
|
||||
</polymer-element>
|
||||
|
||||
<core-animated-pages class="fit" selected="0" transitions="cross-fade-all hero-transition">
|
||||
|
||||
<section id="first">
|
||||
|
||||
<core-toolbar class="tall toolbar">
|
||||
<core-icon icon="menu"></core-icon>
|
||||
<div flex>Highlights</div>
|
||||
<core-icon icon="social:share"></core-icon>
|
||||
<core-icon icon="bookmark"></core-icon>
|
||||
<core-icon icon="more-vert"></core-icon>
|
||||
</core-toolbar>
|
||||
|
||||
<div class="container" hero-p>
|
||||
|
||||
<shadow-div class="card" hero-p onclick="stuff()">
|
||||
<div class="card-top"></div>
|
||||
<div class="card-bottom" hero-p>
|
||||
<div class="headline">Google's Craziest Offices</div>
|
||||
<div class="source-container" hero-p layout horizontal center>
|
||||
<div class="icon" hero-id="icon-header" hero></div>
|
||||
<div class="two-lines">
|
||||
<div class="source">The New York Times</div>
|
||||
<div class="time">36 minutes ago</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</shadow-div>
|
||||
|
||||
<div class="tiles-container" layout horizontal justified>
|
||||
|
||||
<shadow-div class="tile"></shadow-div>
|
||||
<shadow-div class="tile"></shadow-div>
|
||||
<shadow-div class="tile"></shadow-div>
|
||||
<shadow-div class="tile"></shadow-div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section id="second">
|
||||
|
||||
<core-toolbar class="tall" hero-p>
|
||||
|
||||
<core-toolbar class="tall toolbar-2" hero-id="icon-header" hero>
|
||||
<div flex class="middle">T</div>
|
||||
</core-toolbar>
|
||||
</core-toolbar>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<shadow-div class="card" onclick="stuff()">
|
||||
<div class="card-top-2"></div>
|
||||
<div class="card-bottom">
|
||||
<div class="headline">Some long overflowing headline</div>
|
||||
<div class="source-container" layout horizontal center>
|
||||
<div class="icon" style="background:red;"></div>
|
||||
<div class="two-lines">
|
||||
<div class="source">The New York Times</div>
|
||||
<div class="time">36 minutes ago</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</shadow-div>
|
||||
|
||||
<div class="tiles-container" layout horizontal justified>
|
||||
|
||||
<shadow-div class="tile"></shadow-div>
|
||||
<shadow-div class="tile"></shadow-div>
|
||||
<shadow-div class="tile"></shadow-div>
|
||||
<shadow-div class="tile"></shadow-div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
</core-animated-pages>
|
||||
|
||||
<script>
|
||||
|
||||
function stuff(e) {
|
||||
var p = document.querySelector('core-animated-pages');
|
||||
p.selected = p.selected ? 0 : 1;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
BIN
rpg-docs/public/bower_components/core-animated-pages/demos/quiz1-intro.png
vendored
Normal file
BIN
rpg-docs/public/bower_components/core-animated-pages/demos/quiz1-intro.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.8 KiB |
263
rpg-docs/public/bower_components/core-animated-pages/demos/quiz1.html
vendored
Normal file
263
rpg-docs/public/bower_components/core-animated-pages/demos/quiz1.html
vendored
Normal file
@@ -0,0 +1,263 @@
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>core-animated-pages</title>
|
||||
|
||||
<script src="../../webcomponentsjs/webcomponents.js"></script>
|
||||
<link href="../../core-icons/av-icons.html" rel="import">
|
||||
<link href="../../paper-fab/paper-fab.html" rel="import">
|
||||
|
||||
<link href="../core-animated-pages.html" rel="import">
|
||||
<link href="../transitions/slide-up.html" rel="import">
|
||||
<link href="../transitions/list-cascade.html" rel="import">
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Roboto 2', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
margin: 0;
|
||||
background: #f1f1f1;
|
||||
}
|
||||
|
||||
quiz-demo {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<polymer-element name="quiz-demo">
|
||||
<template>
|
||||
|
||||
<style>
|
||||
core-animated-pages {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
section {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fab {
|
||||
position: absolute;
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.fab-0 {
|
||||
bottom: 50px;
|
||||
right: 24px;
|
||||
}
|
||||
|
||||
.fab-1 {
|
||||
top: 210px;
|
||||
right: 24px;
|
||||
}
|
||||
|
||||
paper-fab {
|
||||
background-color: #ff4081;
|
||||
}
|
||||
|
||||
.top {
|
||||
background-color: #ffff8d;
|
||||
}
|
||||
|
||||
.top-image {
|
||||
background: url(quiz1-intro.png);
|
||||
height: 287px;
|
||||
width: 202px;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
height: 80px;
|
||||
background-color: #ffeb3b;
|
||||
padding: 24px;
|
||||
color: #fff;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.tall-toolbar {
|
||||
box-sizing: border-box;
|
||||
height: 240px;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
padding: 48px;
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
.tall-toolbar.categories {
|
||||
background-color: #00bbd3;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.tall-toolbar.questions {
|
||||
background-color: #ffeb3b;
|
||||
}
|
||||
|
||||
.middle {
|
||||
background-color: #fafafa;
|
||||
color: #3f3f3f;
|
||||
padding: 24px 48px;
|
||||
font-size: 24px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.footer {
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
background-color: #ff80ab;
|
||||
}
|
||||
|
||||
.footer-right, .score {
|
||||
border-top: 1px solid #ccc;
|
||||
background-color: #fff;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.tile {
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
height: 200px;
|
||||
width: 49%;
|
||||
margin: 3px;
|
||||
}
|
||||
|
||||
.tile-bottom {
|
||||
padding: 8px;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
<core-animated-pages selected="{{page}}" transitions="hero-transition slide-up slide-down cross-fade list-cascade" on-core-animated-pages-transition-end="{{complete}}">
|
||||
|
||||
<section layout vertical>
|
||||
|
||||
<div class="tall-toolbar categories" slide-down>
|
||||
<span>Your name here</span>
|
||||
</div>
|
||||
|
||||
<div class="tiles-container">
|
||||
<div class="tile" style="background-color:#ccc;" layout vertical>
|
||||
<div class="tile-top" flex></div>
|
||||
<div class="tile-bottom" style="background-color:#aaa;">
|
||||
Leaderboard
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile" hero-id="category-image" hero style="background-color:#ffff8d;" layout vertical on-tap="{{transition}}">
|
||||
<div class="tile-top" flex></div>
|
||||
<div class="tile-bottom" hero-id="footer" hero style="background-color:#ffeb3b;">
|
||||
General Knowledge
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile" style="background-color:#b9f6ca;" layout vertical>
|
||||
<div class="tile-top" flex></div>
|
||||
<div class="tile-bottom" style="background-color:#0f9d58;">
|
||||
Category 2
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile" style="background-color:#ff8a80;" layout vertical>
|
||||
<div class="tile-top" flex></div>
|
||||
<div class="tile-bottom" style="background-color:#db4437;">
|
||||
Category 3
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile" style="background-color:#82b1ff;" layout vertical>
|
||||
<div class="tile-top" flex></div>
|
||||
<div class="tile-bottom" style="background-color:#4285f4;">
|
||||
Category 4
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile" style="background-color:#b388ff;" layout vertical>
|
||||
<div class="tile-top" flex></div>
|
||||
<div class="tile-bottom" style="background-color:#7e57c2;">
|
||||
Category 5
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section layout vertical>
|
||||
|
||||
<div class="top" hero-id="category-image" hero flex layout horizontal center center-justified>
|
||||
<div class="top-image" cross-fade></div>
|
||||
</div>
|
||||
<div class="bottom" hero-id="footer" hero cross-fade>
|
||||
<span cross-fade>General Knowledge</span>
|
||||
</div>
|
||||
<div class="fab fab-0" hero-id="fab" hero>
|
||||
<paper-fab icon="av:play-arrow" on-tap="{{transition}}" hero></paper-fab>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section layout vertical>
|
||||
|
||||
<div class="tall-toolbar questions" hero-id="footer" hero>
|
||||
<span cross-fade>Question here</span>
|
||||
</div>
|
||||
<div class="fab fab-1" hero-id="fab" hero>
|
||||
<paper-fab icon="av:play-arrow" on-tap="{{transition}}" hero></paper-fab>
|
||||
</div>
|
||||
|
||||
<div flex class="middle" slide-up list-cascade>
|
||||
<p>Option 1</p>
|
||||
<p>Option 2</p>
|
||||
<p>Option 3</p>
|
||||
<p>Option 4</p>
|
||||
<p>Option 5</p>
|
||||
</div>
|
||||
|
||||
<div class="footer" layout horizontal slide-up>
|
||||
<div class="avatar"></div>
|
||||
<div class="footer-right" flex>
|
||||
some text here
|
||||
</div>
|
||||
<div class="score">
|
||||
32 pts
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
</core-animated-pages>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
|
||||
Polymer('quiz-demo', {
|
||||
|
||||
page: 0,
|
||||
|
||||
transition: function(e) {
|
||||
if (this.page === 2) {
|
||||
this.page = 0;
|
||||
} else {
|
||||
this.page += 1;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
</polymer-element>
|
||||
|
||||
<quiz-demo></quiz-demo>
|
||||
</body>
|
||||
</html>
|
||||
142
rpg-docs/public/bower_components/core-animated-pages/demos/shadow.html
vendored
Normal file
142
rpg-docs/public/bower_components/core-animated-pages/demos/shadow.html
vendored
Normal file
@@ -0,0 +1,142 @@
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<script src="../../webcomponentsjs/webcomponents.js"></script>
|
||||
|
||||
<link href="../../core-icons/core-icons.html" rel="import">
|
||||
<link href="../../core-icon-button/core-icon-button.html" rel="import">
|
||||
<link href="../../core-toolbar/core-toolbar.html" rel="import">
|
||||
<link href="../core-animated-pages.html" rel="import">
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
background-color: steelblue;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body unresolved fullbleed vertical layout>
|
||||
|
||||
<polymer-element name="grid-toc" attributes="items selected">
|
||||
<template>
|
||||
<style>
|
||||
#container {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.card {
|
||||
position: relative;
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
font-size: 50px;
|
||||
margin: 8px;
|
||||
background-color: tomato;
|
||||
border-radius: 4px;
|
||||
cursor: default;
|
||||
}
|
||||
</style>
|
||||
<div id="container" on-tap="{{selectView}}" flex horizontal wrap around-justified layout hero-p>
|
||||
<template repeat="{{item in items}}">
|
||||
<div class="card" vertical center center-justified layout hero-id="item-{{item}}" hero?="{{selected === item + 1 || lastSelected === item + 1}}"><span cross-fade>{{item}}</span></div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
Polymer('grid-toc', {
|
||||
selectedChanged: function(old) {
|
||||
this.lastSelected = old;
|
||||
},
|
||||
selectView: function(e) {
|
||||
var item = e.target.templateInstance.model.item;
|
||||
if (item !== undefined) {
|
||||
this.fire('grid-toc-select', {item: item});
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</polymer-element>
|
||||
|
||||
<polymer-element name="grid-item" attributes="item isHero">
|
||||
<template>
|
||||
<style>
|
||||
.view {
|
||||
font-size: 250px;
|
||||
background-color: tomato;
|
||||
}
|
||||
</style>
|
||||
<div class="view" flex vertical center center-justified layout hero-id="item-{{item}}" hero?="{{isHero}}">
|
||||
<span cross-fade>{{item}}</span>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
Polymer('grid-item', {
|
||||
isSelected: false
|
||||
})
|
||||
</script>
|
||||
</polymer-element>
|
||||
|
||||
|
||||
<template is="auto-binding">
|
||||
<core-toolbar class="toolbar">
|
||||
<core-icon-button icon="{{$.pages.selected != 0 ? 'arrow-back' : 'menu'}}" on-tap="{{back}}"></core-icon-button>
|
||||
<div flex>Stuff</div>
|
||||
<core-icon-button icon="more-vert"></core-icon-button>
|
||||
</core-toolbar>
|
||||
<core-animated-pages id="pages" flex selected="0" on-core-animated-pages-transition-end="{{transitionend}}" transitions="cross-fade-all hero-transition">
|
||||
|
||||
<grid-toc vertical id="toc" layout selected="{{$.pages.selected}}" items="{{items}}" hero-p on-grid-toc-select="{{selectView}}"></grid-toc>
|
||||
|
||||
<template repeat="{{item in items}}">
|
||||
<grid-item vertical layout item="{{item}}" hero-p isHero="{{$.pages.selected === item + 1 || $.pages.selected === 0}}"></grid-item>
|
||||
</template>
|
||||
|
||||
</core-animated-pages>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
addEventListener('template-bound', function(e) {
|
||||
var scope = e.target;
|
||||
var items = [], count=50;
|
||||
for (var i=0; i < count; i++) {
|
||||
items.push(i);
|
||||
}
|
||||
|
||||
scope.items = items;
|
||||
|
||||
scope.selectView = function(e, detail) {
|
||||
var i = detail.item;
|
||||
this.$.pages.selected = i+1;
|
||||
}
|
||||
|
||||
scope.back = function() {
|
||||
this.lastSelected = this.$.pages.selected;
|
||||
this.$.pages.selected = 0;
|
||||
}
|
||||
|
||||
scope.transitionend = function() {
|
||||
if (this.lastSelected) {
|
||||
this.lastSelected = null;
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
98
rpg-docs/public/bower_components/core-animated-pages/demos/simple.html
vendored
Normal file
98
rpg-docs/public/bower_components/core-animated-pages/demos/simple.html
vendored
Normal file
@@ -0,0 +1,98 @@
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<script src="../../webcomponentsjs/webcomponents.js"></script>
|
||||
<link href="../core-animated-pages.html" rel="import">
|
||||
<link href="../transitions/cross-fade.html" rel="import">
|
||||
<link href="../transitions/slide-from-right.html" rel="import">
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
core-animated-pages {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
font-size: 72px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
section > div {
|
||||
height: 100%;
|
||||
color: white;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body unresolved>
|
||||
<select onchange="change();">
|
||||
<option value="cross-fade-all" selected>cross-fade-all</option>
|
||||
<option value="slide-from-right">slide-from-right</option>
|
||||
</select>
|
||||
|
||||
<core-animated-pages onclick="stuff();" transitions="cross-fade-all">
|
||||
<section>
|
||||
<div layout vertical center center-justified style="background:red;">
|
||||
<div>1</div>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<div layout vertical center center-justified style="background:blue;">
|
||||
<div>2</div>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<div layout vertical center center-justified style="background:purple;">
|
||||
<div>3</div>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<div layout vertical center center-justified style="background:orange;">
|
||||
<div>4</div>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<div layout vertical center center-justified style="background:green;">
|
||||
<div>5</div>
|
||||
</div>
|
||||
</section>
|
||||
</core-animated-pages>
|
||||
|
||||
<script>
|
||||
function change() {
|
||||
var s = document.querySelector('select');
|
||||
document.querySelector('core-animated-pages').transitions = document.querySelector('select').options[s.selectedIndex].value;
|
||||
}
|
||||
|
||||
var up = true;
|
||||
var max = 4;
|
||||
function stuff() {
|
||||
var p = document.querySelector('core-animated-pages');
|
||||
if (up && p.selected === max || !up && p.selected === 0) {
|
||||
up = !up;
|
||||
}
|
||||
if (up) {
|
||||
p.selected += 1;
|
||||
} else {
|
||||
p.selected -= 1;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
22
rpg-docs/public/bower_components/core-animated-pages/index.html
vendored
Normal file
22
rpg-docs/public/bower_components/core-animated-pages/index.html
vendored
Normal file
@@ -0,0 +1,22 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<script src="../webcomponentsjs/webcomponents.js"></script>
|
||||
<link rel="import" href="../core-component-page/core-component-page.html">
|
||||
|
||||
</head>
|
||||
<body unresolved>
|
||||
|
||||
<core-component-page sources='["core-animated-pages.html","transitions/core-transition-pages","transitions/hero-transition.html","transitions/cross-fade.html","transitions/cascade-transition.html","transitions/slide-up.html","transitions/slide-down.html"]'></core-component-page>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
38
rpg-docs/public/bower_components/core-animated-pages/metadata.html
vendored
Normal file
38
rpg-docs/public/bower_components/core-animated-pages/metadata.html
vendored
Normal file
@@ -0,0 +1,38 @@
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
<x-meta id="core-animated-pages" label="Animated Pages" group="Core" isContainer>
|
||||
<!--
|
||||
TODO(sorvell):
|
||||
- can't transition without contents; must document or fix.
|
||||
- transitions syntax awkward: should be space separated
|
||||
- hero-transition should be renamed `hero`
|
||||
- hero and cross-fade-all should be always enabled.
|
||||
-->
|
||||
<template>
|
||||
<core-animated-pages style="width:420px;height:582px;overflow:hidden;background-color:#eee;">
|
||||
<section layout horizontal center center-justified>
|
||||
</section>
|
||||
<section>
|
||||
</section>
|
||||
<section>
|
||||
</section>
|
||||
</core-animated-pages>
|
||||
</template>
|
||||
|
||||
<template id="imports">
|
||||
<link rel="import" href="core-animated-pages.html">
|
||||
<link rel="import" href="transitions/hero-transition.html">
|
||||
<link rel="import" href="transitions/cross-fade.html">
|
||||
<link rel="import" href="transitions/slide-down.html">
|
||||
<link rel="import" href="transitions/slide-up.html">
|
||||
<link rel="import" href="transitions/tile-cascade.html">
|
||||
</template>
|
||||
|
||||
</x-meta>
|
||||
138
rpg-docs/public/bower_components/core-animated-pages/transitions/cascade-transition.html
vendored
Normal file
138
rpg-docs/public/bower_components/core-animated-pages/transitions/cascade-transition.html
vendored
Normal file
@@ -0,0 +1,138 @@
|
||||
<!--
|
||||
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
|
||||
<link href="core-transition-pages.html" rel="import">
|
||||
|
||||
<core-style id="cascade-transition">
|
||||
polyfill-next-selector { content: ':host(.cascade) > * [cascade] > div'; }
|
||||
:host(.cascade) ::content > * /deep/ [cascade] > div {
|
||||
-webkit-transition: -webkit-transform {{g.transitions.cascadeDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1), opacity {{g.transitions.cascadeFadeDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition: transform {{g.transitions.cascadeDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1), opacity {{g.transitions.cascadeFadeDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: ':host(.cascade) > * [cascade] > div:nth-of-type(2)'; }
|
||||
:host(.cascade) ::content > * /deep/ [cascade] > div:nth-of-type(2) {
|
||||
-webkit-transition-delay: 0.05s;
|
||||
transition-delay: 0.05s;
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: ':host(.cascade) > * [cascade] > div:nth-of-type(3)'; }
|
||||
:host(.cascade) ::content > * /deep/ [cascade] > div:nth-of-type(3) {
|
||||
-webkit-transition-delay: 0.1s;
|
||||
transition-delay: 0.1s;
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: ':host(.cascade) > * [cascade] > div:nth-of-type(4)'; }
|
||||
:host(.cascade) ::content > * /deep/ [cascade] > div:nth-of-type(4) {
|
||||
-webkit-transition-delay: 0.15s;
|
||||
transition-delay: 0.15s;
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: ':host(.cascade) > * [cascade] > div:nth-of-type(5)'; }
|
||||
:host(.cascade) ::content > * /deep/ [cascade] > div:nth-of-type(5) {
|
||||
-webkit-transition-delay: 0.2s;
|
||||
transition-delay: 0.2s;
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: ':host(.cascade) > * [cascade] > div:nth-of-type(6)'; }
|
||||
:host(.cascade) ::content > * /deep/ [cascade] > div:nth-of-type(6) {
|
||||
-webkit-transition-delay: 0.25s;
|
||||
transition-delay: 0.25s;
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: ':host(.cascade) > * [cascade] > div:nth-of-type(7)'; }
|
||||
:host(.cascade) ::content > * /deep/ [cascade] > div:nth-of-type(7) {
|
||||
-webkit-transition-delay: 0.3s;
|
||||
transition-delay: 0.3s;
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: ':host(.cascade) > * [cascade] > div:nth-of-type(8)'; }
|
||||
:host(.cascade) ::content > * /deep/ [cascade] > div:nth-of-type(8) {
|
||||
-webkit-transition-delay: 0.35s;
|
||||
transition-delay: 0.35s;
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: ':host(.cascade) > * [cascade] > div:nth-of-type(9)'; }
|
||||
:host(.cascade) ::content > * /deep/ [cascade] > div:nth-of-type(9) {
|
||||
-webkit-transition-delay: 0.4s;
|
||||
transition-delay: 0.4s;
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: ':host(.cascade) > * [cascade] > div:nth-of-type(10)'; }
|
||||
:host(.cascade) ::content > * /deep/ [cascade] > div:nth-of-type(10) {
|
||||
-webkit-transition-delay: 0.45s;
|
||||
transition-delay: 0.45s;
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: ':host(.cascade) > * [cascade] > div:nth-of-type(11)'; }
|
||||
:host(.cascade) ::content > * /deep/ [cascade] > div:nth-of-type(11) {
|
||||
-webkit-transition-delay: 0.5s;
|
||||
transition-delay: 0.5s;
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: ':host(.cascade) > * [cascade] > div:nth-of-type(12)'; }
|
||||
:host(.cascade) ::content > * /deep/ [cascade] > div:nth-of-type(12) {
|
||||
-webkit-transition-delay: 0.55s;
|
||||
transition-delay: 0.55s;
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: '.core-selected [cascade] > div'; }
|
||||
::content > .core-selected /deep/ [cascade] > div {
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: '[animate]:not(.core-selected) [cascade] > div'; }
|
||||
::content > [animate]:not(.core-selected) /deep/ [cascade] > div {
|
||||
-webkit-transform: translateY(100%);
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: '[animate]:not(.core-selected) [cascade][fade] > div'; }
|
||||
::content > [animate]:not(.core-selected) /deep/ [cascade][fade] > div {
|
||||
opacity: 0;
|
||||
}
|
||||
</core-style>
|
||||
|
||||
<!--
|
||||
|
||||
`cascade-transition` slides the children of a container up in sequence, creating a
|
||||
reverse waterfall effect. It works well with both grids and lists. Configure the
|
||||
duration of the transition with the global variable `CoreStyle.g.transitions.cascadeDuration`.
|
||||
|
||||
Example:
|
||||
|
||||
<core-animated-pages transition="cascade-transition">
|
||||
<section>
|
||||
<div id="container" cascade>
|
||||
<div>item 1</div>
|
||||
<div>item 2</div>
|
||||
<div>item 3</div>
|
||||
<div>item 4</div>
|
||||
<div>item 5</div>
|
||||
<div>item 6</div>
|
||||
<div>item 7</div>
|
||||
</div>
|
||||
</section>
|
||||
<section></section>
|
||||
</core-animated-pages>
|
||||
|
||||
In the above example, the immediate children of `#container` will slide up in
|
||||
sequence when the page transitions from 0 to 1.
|
||||
|
||||
The items can optionally fade in as they slide. Add the `fade` attribute to
|
||||
the container to do that and configure the duration of the opacity transition with
|
||||
the global variable `CoreStyle.g.transitions.cascadeFadeDuration`.
|
||||
|
||||
@class cascade-transition
|
||||
@extends core-transition-pages
|
||||
@status beta
|
||||
@homepage github.io
|
||||
|
||||
-->
|
||||
|
||||
<core-transition-pages id="cascade-transition" activeClass="cascade" transitionProperty="transform"></core-transition-pages>
|
||||
175
rpg-docs/public/bower_components/core-animated-pages/transitions/core-transition-pages.html
vendored
Normal file
175
rpg-docs/public/bower_components/core-animated-pages/transitions/core-transition-pages.html
vendored
Normal file
@@ -0,0 +1,175 @@
|
||||
<!--
|
||||
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
|
||||
<link href="../../polymer/polymer.html" rel="import">
|
||||
<link href="../../core-style/core-style.html" rel="import">
|
||||
<link href="../../core-transition/core-transition.html" rel="import">
|
||||
|
||||
<!--
|
||||
|
||||
`core-transition-pages` represents a page transition, which may include CSS and/or
|
||||
script. It will look for a `core-style` element with the same `id` to install in the
|
||||
scope of the `core-animated-pages` that's using the transition.
|
||||
|
||||
Example:
|
||||
|
||||
<core-style id="fooTransition">
|
||||
// some CSS here
|
||||
</core-style>
|
||||
<core-transition-pages id="fooTransition"></core-transition-pages>
|
||||
|
||||
There are three stages to a page transition:
|
||||
|
||||
1. `prepare`: Called to set up the incoming and outgoing pages to the "before" state,
|
||||
e.g. setting the incoming page to `opacity: 0` for `cross-fade` or find and
|
||||
measure hero elements for `hero-transition`.
|
||||
|
||||
2. `go`: Called to run the transition. For CSS-based transitions, this generally
|
||||
applies a CSS `transition` property.
|
||||
|
||||
3. `complete`: Called when the elements are finished transitioning.
|
||||
|
||||
See the individual transition documentation for specific details.
|
||||
|
||||
@element core-transition-pages
|
||||
@extends core-transition
|
||||
@status beta
|
||||
@homepage github.io
|
||||
-->
|
||||
<!--
|
||||
Fired when the transition completes.
|
||||
|
||||
@event core-transitionend
|
||||
-->
|
||||
<polymer-element name="core-transition-pages" extends="core-transition">
|
||||
<script>
|
||||
|
||||
(function () {
|
||||
|
||||
// create some basic transition styling data.
|
||||
var transitions = CoreStyle.g.transitions = CoreStyle.g.transitions || {};
|
||||
transitions.duration = '500ms';
|
||||
transitions.heroDelay = '50ms';
|
||||
transitions.scaleDelay = '500ms';
|
||||
transitions.cascadeFadeDuration = '250ms';
|
||||
|
||||
Polymer({
|
||||
|
||||
publish: {
|
||||
/**
|
||||
* This class will be applied to the scope element in the `prepare` function.
|
||||
* It is removed in the `complete` function. Used to activate a set of CSS
|
||||
* rules that need to apply before the transition runs, e.g. a default opacity
|
||||
* or transform for the non-active pages.
|
||||
*
|
||||
* @attribute scopeClass
|
||||
* @type string
|
||||
* @default ''
|
||||
*/
|
||||
scopeClass: '',
|
||||
|
||||
/**
|
||||
* This class will be applied to the scope element in the `go` function. It is
|
||||
* remoived in the `complete' function. Generally used to apply a CSS transition
|
||||
* rule only during the transition.
|
||||
*
|
||||
* @attribute activeClass
|
||||
* @type string
|
||||
* @default ''
|
||||
*/
|
||||
activeClass: '',
|
||||
|
||||
/**
|
||||
* Specifies which CSS property to look for when it receives a `transitionEnd` event
|
||||
* to determine whether the transition is complete. If not specified, the first
|
||||
* transitionEnd event received will complete the transition.
|
||||
*
|
||||
* @attribute transitionProperty
|
||||
* @type string
|
||||
* @default ''
|
||||
*/
|
||||
transitionProperty: ''
|
||||
},
|
||||
|
||||
/**
|
||||
* True if this transition is complete.
|
||||
*
|
||||
* @attribute completed
|
||||
* @type boolean
|
||||
* @default false
|
||||
*/
|
||||
completed: false,
|
||||
|
||||
prepare: function(scope, options) {
|
||||
this.boundCompleteFn = this.complete.bind(this, scope);
|
||||
if (this.scopeClass) {
|
||||
scope.classList.add(this.scopeClass);
|
||||
}
|
||||
},
|
||||
|
||||
go: function(scope, options) {
|
||||
this.completed = false;
|
||||
if (this.activeClass) {
|
||||
scope.classList.add(this.activeClass);
|
||||
}
|
||||
scope.addEventListener('transitionend', this.boundCompleteFn, false);
|
||||
},
|
||||
|
||||
setup: function(scope) {
|
||||
if (!scope._pageTransitionStyles) {
|
||||
scope._pageTransitionStyles = {};
|
||||
}
|
||||
|
||||
var name = this.calcStyleName();
|
||||
|
||||
if (!scope._pageTransitionStyles[name]) {
|
||||
this.installStyleInScope(scope, name);
|
||||
scope._pageTransitionStyles[name] = true;
|
||||
}
|
||||
},
|
||||
|
||||
calcStyleName: function() {
|
||||
return this.id || this.localName;
|
||||
},
|
||||
|
||||
installStyleInScope: function(scope, id) {
|
||||
if (!scope.shadowRoot) {
|
||||
scope.createShadowRoot().innerHTML = '<content></content>';
|
||||
}
|
||||
var root = scope.shadowRoot;
|
||||
var scopeStyle = document.createElement('core-style');
|
||||
root.insertBefore(scopeStyle, root.firstChild);
|
||||
scopeStyle.applyRef(id);
|
||||
},
|
||||
|
||||
complete: function(scope, e) {
|
||||
// TODO(yvonne): hack, need to manage completion better
|
||||
if (e.propertyName !== 'box-shadow' && (!this.transitionProperty || e.propertyName.indexOf(this.transitionProperty) !== -1)) {
|
||||
this.completed = true;
|
||||
this.fire('core-transitionend', this, scope);
|
||||
}
|
||||
},
|
||||
|
||||
// TODO(sorvell): ideally we do this in complete.
|
||||
ensureComplete: function(scope) {
|
||||
scope.removeEventListener('transitionend', this.boundCompleteFn, false);
|
||||
if (this.scopeClass) {
|
||||
scope.classList.remove(this.scopeClass);
|
||||
}
|
||||
if (this.activeClass) {
|
||||
scope.classList.remove(this.activeClass);
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
})();
|
||||
|
||||
</script>
|
||||
</polymer-element>
|
||||
173
rpg-docs/public/bower_components/core-animated-pages/transitions/cross-fade.html
vendored
Normal file
173
rpg-docs/public/bower_components/core-animated-pages/transitions/cross-fade.html
vendored
Normal file
@@ -0,0 +1,173 @@
|
||||
<!--
|
||||
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
|
||||
<link href="core-transition-pages.html" rel="import">
|
||||
|
||||
<core-style id="cross-fade">
|
||||
polyfill-next-selector { content: ':host > * [cross-fade]'; }
|
||||
::content > * /deep/ [cross-fade] {
|
||||
-webkit-transition: opacity {{g.transitions.xfadeDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition: opacity {{g.transitions.xfadeDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: ':host > * [cross-fade][bg]'; }
|
||||
::content > * /deep/ [cross-fade][bg] {
|
||||
-webkit-transition: background-color {{g.transitions.xfadeDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition: background-color {{g.transitions.xfadeDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: ':host > * [cross-fade][hero-p]'; }
|
||||
::content > * /deep/ [cross-fade][hero-p] {
|
||||
-webkit-transition: background-color {{g.transitions.xfadeDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition: background-color {{g.transitions.xfadeDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: ':host > .core-selected [cross-fade]'; }
|
||||
::content > .core-selected /deep/ [cross-fade] {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [cross-fade]:not([hero-p]):not([bg])'; }
|
||||
::content > [animate]:not(.core-selected) /deep/ [cross-fade]:not([hero-p]):not([bg]) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [cross-fade][bg]'; }
|
||||
::content > [animate]:not(.core-selected) /deep/ [cross-fade][bg] {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [cross-fade][hero-p]'; }
|
||||
::content > [animate]:not(.core-selected) /deep/ [cross-fade][hero-p] {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
</core-style>
|
||||
|
||||
<core-style id="cross-fade-delayed">
|
||||
polyfill-next-selector { content: ':host > * [cross-fade-delayed]'; }
|
||||
::content > * /deep/ [cross-fade-delayed] {
|
||||
-webkit-transition: opacity {{g.transitions.xfadeDuration || g.transitions.duration}} ease-out;
|
||||
transition: opacity {{g.transitions.xfadeDuration || g.transitions.duration}} ease-out;
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: ':host > .core-selected [cross-fade-delayed]'; }
|
||||
::content > .core-selected /deep/ [cross-fade-delayed] {
|
||||
-webkit-transition: opacity {{g.transitions.xfadeDuration || g.transitions.duration}} ease-out {{g.transitions.xfadeDelay || g.transitions.xfadeDuration || g.transitions.duration}};
|
||||
transition: opacity {{g.transitions.xfadeDuration || g.transitions.duration}} ease-out {{g.transitions.xfadeDelay || g.transitions.xfadeDuration || g.transitions.duration}};
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [cross-fade-delayed]'; }
|
||||
::content > [animate]:not(.core-selected) /deep/ [cross-fade-delayed] {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: ':host > .core-selected [cross-fade-delayed]'; }
|
||||
::content > .core-selected /deep/ [cross-fade-delayed] {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
</core-style>
|
||||
|
||||
<core-style id="cross-fade-all">
|
||||
/* cross-fade-all: cross fade everything except for heroes and their parents */
|
||||
polyfill-next-selector { content: ':host(.cross-fade-all) > * *:not([hero]):not([hero-p]):not([cross-fade])'; }
|
||||
:host(.cross-fade-all) ::content > * /deep/ *:not([hero]):not([hero-p]):not([cross-fade]) {
|
||||
-webkit-transition: opacity {{g.transitions.xfadeDuration || g.transitions.duration}} ease-out;
|
||||
transition: opacity {{g.transitions.xfadeDuration || g.transitions.duration}} ease-out;
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: ':host(.cross-fade-all) > [animate]:not(.core-selected) *:not([hero]):not([hero-p]):not([cross-fade])'; }
|
||||
:host(.cross-fade-all) ::content > [animate]:not(.core-selected) /deep/ *:not([hero]):not([hero-p]):not([cross-fade]) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: ':host(.cross-fade-all) > .core-selected *:not([hero])'; }
|
||||
.host(.cross-fade-all) ::content > .core-selected /deep/ * {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Only background-color is allowed for the hero's parents, no opacity transitions */
|
||||
polyfill-next-selector { content: ':host(.cross-fade-all) > * [hero-p]'; }
|
||||
:host(.cross-fade-all) ::content > * /deep/ [hero-p] {
|
||||
-webkit-transition: background-color {{g.transitions.xfadeDuration || g.transitions.duration}} ease-out;
|
||||
transition: background-color {{g.transitions.xfadeDuration || g.transitions.duration}} ease-out;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: ':host(.cross-fade-all) > [animate]:not(.core-selected) [hero-p]'; }
|
||||
:host(.cross-fade-all) ::content > [animate]:not(.core-selected) /deep/ [hero-p] {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
</core-style>
|
||||
|
||||
<!--
|
||||
|
||||
`cross-fade` fades out elements in the outgoing page and fades in elements in the
|
||||
incoming page during a page transition. You can configure the duration of the
|
||||
transition with the global variable `CoreStyle.g.transitions.xfadeDuration`.
|
||||
|
||||
Example:
|
||||
|
||||
<core-animated-pages transition="cross-fade">
|
||||
<section>
|
||||
<div id="div1" cross-fade></div>
|
||||
</section>
|
||||
<section>
|
||||
<div id="div2" cross-fade bg>
|
||||
<div id="div3" cross-fade></div>
|
||||
<div id="div4"></div>
|
||||
</div>
|
||||
</section>
|
||||
</core-animated-pages>
|
||||
|
||||
In the above example, `#div1` and `#div3` has the `cross-fade` attribute. `#div1`
|
||||
will fade out and `#div3` will fade in with opacity transitions when the page switches
|
||||
from 0 to 1. Sometimes, you may want to only fade the background color of an element
|
||||
but not its children, and you can use the `bg` attribute along with the `#div1`
|
||||
attribute as in `#div2`.
|
||||
|
||||
@class cross-fade
|
||||
@extends core-transition-pages
|
||||
@status beta
|
||||
@homepage github.io
|
||||
|
||||
-->
|
||||
|
||||
<!--
|
||||
|
||||
`cross-fade-delayed` performs a cross-fade after some delay, either specified in
|
||||
the global variable `CoreStyle.g.transitions.xfadeDelay` or the duration of the
|
||||
transition.
|
||||
|
||||
Example:
|
||||
|
||||
<core-animated-pages transition="hero-transition cross-fade-delayed">
|
||||
<section>
|
||||
<div id="div1" hero-id hero></div>
|
||||
</section>
|
||||
<section>
|
||||
<div id="div2" hero-id hero>
|
||||
<div id="div3" cross-fade-delayed></div>
|
||||
</div>
|
||||
</section>
|
||||
</core-animated-pages>
|
||||
|
||||
In the above example, `#div3` fades in after the hero transition from `#div1` to
|
||||
`#div2` completes.
|
||||
|
||||
@class cross-fade-delayed
|
||||
@extends core-transition-pages
|
||||
@status beta
|
||||
@homepage github.io
|
||||
|
||||
-->
|
||||
|
||||
<core-transition-pages id="cross-fade"></core-transition-pages>
|
||||
<core-transition-pages id="cross-fade-delayed"></core-transition-pages>
|
||||
<core-transition-pages id="cross-fade-all" scopeClass="cross-fade-all"></core-transition-pages>
|
||||
22
rpg-docs/public/bower_components/core-animated-pages/transitions/hero-transition.css
vendored
Normal file
22
rpg-docs/public/bower_components/core-animated-pages/transitions/hero-transition.css
vendored
Normal file
@@ -0,0 +1,22 @@
|
||||
/*
|
||||
* @license
|
||||
* Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
||||
* This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
* The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
* The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
* Code distributed by Google as part of the polymer project is also
|
||||
* subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
*/
|
||||
|
||||
/* Hide heroes that are not currently transitioning */
|
||||
polyfill-next-selector { content: ':host > [animate] [hero]'; }
|
||||
::content > [animate] /deep/ [hero], ::content > [animate]::shadow [hero] {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: ':host > .core-selected[animate] [hero]'; }
|
||||
::content > .core-selected[animate] /deep/ [hero],
|
||||
::content > .core-selected[animate]::shadow [hero] {
|
||||
visibility: visible;
|
||||
z-index: 10000;
|
||||
}
|
||||
324
rpg-docs/public/bower_components/core-animated-pages/transitions/hero-transition.html
vendored
Normal file
324
rpg-docs/public/bower_components/core-animated-pages/transitions/hero-transition.html
vendored
Normal file
@@ -0,0 +1,324 @@
|
||||
<!--
|
||||
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
|
||||
<link href="core-transition-pages.html" rel="import">
|
||||
|
||||
<core-style id="hero-transition">
|
||||
/* Hide heroes that are not currently transitioning */
|
||||
polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [hero]'; }
|
||||
::content > [animate]:not(.core-selected) /deep/ [hero] {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: ':host > .core-selected[animate] [hero]'; }
|
||||
::content > .core-selected[animate] /deep/ [hero] {
|
||||
opacity: 1;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: ':host > * [hero-p]'; }
|
||||
::content > * /deep/ [hero-p] {
|
||||
-webkit-transition: box-shadow 100ms ease-out;
|
||||
transition: box-shadow 100ms ease-out;
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: ':host > [animate] [hero-p]'; }
|
||||
::content > [animate] /deep/ [hero-p] {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
</core-style>
|
||||
|
||||
|
||||
<!--
|
||||
|
||||
`hero-transition` transforms two elements in different pages such that they appear
|
||||
to be shared across the pages.
|
||||
|
||||
Example:
|
||||
|
||||
<core-animated-pages transition="hero-transition">
|
||||
<section layout horizontal>
|
||||
<div id="div1" flex></div>
|
||||
<div id="div2" flex hero-id="shared" hero></div>
|
||||
</section>
|
||||
<section>
|
||||
<section layout horizontal>
|
||||
<div id="div3" flex hero-id="shared" hero></div>
|
||||
<div id="div4" flex></div>
|
||||
</section>
|
||||
</section>
|
||||
</core-animated-pages>
|
||||
|
||||
In the above example, the elements `#div2` and `#div3` shares the same `hero-id`
|
||||
attribute and a single element appears to translate and scale smoothly between
|
||||
the two positions during a page transition.
|
||||
|
||||
Both elements from the source and destination pages must share the same `hero-id`
|
||||
and must both contain the `hero` attribute to trigger the transition. The separate
|
||||
`hero` attribute allows you to use binding to configure the transition:
|
||||
|
||||
Example:
|
||||
|
||||
<core-animated-pages transition="hero-transition">
|
||||
<section layout horizontal>
|
||||
<div id="div1" flex hero-id="shared" hero?="{{selected == 0}}"></div>
|
||||
<div id="div2" flex hero-id="shared" hero?="{{selected == 1}}"></div>
|
||||
</section>
|
||||
<section>
|
||||
<section layout horizontal>
|
||||
<div id="div3" flex hero-id="shared" hero></div>
|
||||
</section>
|
||||
</section>
|
||||
</core-animated-pages>
|
||||
|
||||
In the above example, either `#div1` or `#div2` scales to `#div3` during a page transition,
|
||||
depending on the value of `selected`.
|
||||
|
||||
Because it is common to share elements with different `border-radius` values, by default
|
||||
this transition will also animate the `border-radius` property.
|
||||
|
||||
You can configure the duration of the hero transition with the global variable
|
||||
`CoreStyle.g.transitions.heroDuration`.
|
||||
|
||||
@class hero-transition
|
||||
@extends core-transition-pages
|
||||
@status beta
|
||||
@homepage github.io
|
||||
-->
|
||||
<polymer-element name="hero-transition" extends="core-transition-pages">
|
||||
<script>
|
||||
(function() {
|
||||
|
||||
var webkitStyles = '-webkit-transition' in document.documentElement.style
|
||||
var TRANSITION_CSSNAME = webkitStyles ? '-webkit-transition' : 'transition';
|
||||
var TRANSFORM_CSSNAME = webkitStyles ? '-webkit-transform' : 'transform';
|
||||
var TRANSITION_NAME = webkitStyles ? 'webkitTransition' : 'transition';
|
||||
var TRANSFORM_NAME = webkitStyles ? 'webkitTransform' : 'transform';
|
||||
|
||||
var hasShadowDOMPolyfill = window.ShadowDOMPolyfill;
|
||||
|
||||
Polymer({
|
||||
|
||||
go: function(scope, options) {
|
||||
var props = [
|
||||
'border-radius',
|
||||
'width',
|
||||
'height',
|
||||
TRANSFORM_CSSNAME
|
||||
];
|
||||
|
||||
var duration = options && options.duration ||
|
||||
(CoreStyle.g.transitions.heroDuration ||
|
||||
CoreStyle.g.transitions.duration);
|
||||
|
||||
scope._heroes.forEach(function(h) {
|
||||
var d = h.h0.hasAttribute('hero-delayed') ? CoreStyle.g.transitions.heroDelay : '';
|
||||
var wt = [];
|
||||
props.forEach(function(p) {
|
||||
wt.push(p + ' ' + duration + ' ' + options.easing + ' ' + d);
|
||||
});
|
||||
|
||||
h.h1.style[TRANSITION_NAME] = wt.join(', ');
|
||||
h.h1.style.borderRadius = h.r1;
|
||||
h.h1.style[TRANSFORM_NAME] = '';
|
||||
});
|
||||
|
||||
this.super(arguments);
|
||||
|
||||
if (!scope._heroes.length) {
|
||||
this.completed = true;
|
||||
}
|
||||
},
|
||||
|
||||
prepare: function(scope, options) {
|
||||
this.super(arguments);
|
||||
var src = options.src, dst = options.dst;
|
||||
|
||||
if (scope._heroes && scope._heroes.length) {
|
||||
this.ensureComplete(scope);
|
||||
} else {
|
||||
scope._heroes = [];
|
||||
}
|
||||
|
||||
// FIXME(yvonne): basic support for nested pages.
|
||||
// Look for heroes in the light DOM and one level of shadow DOM of the src and dst,
|
||||
// and also in src.selectedItem or dst.selectedItem, then transform the dst hero to src
|
||||
var ss = '[hero]';
|
||||
var h$ = this.findAllInShadows(src, ss);
|
||||
if (src.selectedItem) {
|
||||
hs$ = this.findAllInShadows(src.selectedItem, ss);
|
||||
hsa$ = [];
|
||||
// De-duplicate items
|
||||
Array.prototype.forEach.call(hs$, function(hs) {
|
||||
if (h$.indexOf(hs) === -1) {
|
||||
hsa$.push(hs);
|
||||
}
|
||||
})
|
||||
h$ = h$.concat(hsa$);
|
||||
}
|
||||
|
||||
for (var i=0, h0; h0=h$[i]; i++) {
|
||||
var v = h0.getAttribute('hero-id');
|
||||
var ds = '[hero][hero-id="' + v + '"]';
|
||||
var h1 = this.findInShadows(dst, ds);
|
||||
|
||||
if (!h1 && dst.selectedItem) {
|
||||
h1 = this.findInShadows(dst.selectedItem, ds);
|
||||
}
|
||||
|
||||
// console.log('src', src);
|
||||
// console.log('dst', dst, dst.selectedItem);
|
||||
// console.log(v, h0, h1);
|
||||
if (v && h1) {
|
||||
var c0 = getComputedStyle(h0);
|
||||
var c1 = getComputedStyle(h1);
|
||||
var h = {
|
||||
h0: h0,
|
||||
b0: h0.getBoundingClientRect(),
|
||||
r0: c0.borderRadius,
|
||||
h1: h1,
|
||||
b1: h1.getBoundingClientRect(),
|
||||
r1: c1.borderRadius
|
||||
};
|
||||
|
||||
var dl = h.b0.left - h.b1.left;
|
||||
var dt = h.b0.top - h.b1.top;
|
||||
var sw = h.b0.width / h.b1.width;
|
||||
var sh = h.b0.height / h.b1.height;
|
||||
|
||||
// h.scaley = h.h0.hasAttribute('scaley');
|
||||
// if (!h.scaley && (sw !== 1 || sh !== 1)) {
|
||||
// sw = sh = 1;
|
||||
// h.h1.style.width = h.b0.width + 'px';
|
||||
// h.h1.style.height = h.b0.height + 'px';
|
||||
// }
|
||||
|
||||
// Also animate the border-radius for the circle-to-square transition
|
||||
if (h.r0 !== h.r1) {
|
||||
h.h1.style.borderRadius = h.r0;
|
||||
}
|
||||
|
||||
// console.log(h);
|
||||
|
||||
h.h1.style[TRANSFORM_NAME] = 'translate(' + dl + 'px,' + dt + 'px)' + ' scale(' + sw + ',' + sh + ')';
|
||||
h.h1.style[TRANSFORM_NAME + 'Origin'] = '0 0';
|
||||
|
||||
scope._heroes.push(h);
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
// carefully look into ::shadow with polyfill specific hack
|
||||
findInShadows: function(node, selector) {
|
||||
return node.querySelector(selector) || (hasShadowDOMPolyfill ?
|
||||
queryAllShadows(node, selector) :
|
||||
node.querySelector('::shadow ' + selector));
|
||||
},
|
||||
|
||||
findAllInShadows: function(node, selector) {
|
||||
if (hasShadowDOMPolyfill) {
|
||||
var nodes = node.querySelectorAll(selector).array();
|
||||
var shadowNodes = queryAllShadows(node, selector, true);
|
||||
return nodes.concat(shadowNodes);
|
||||
} else {
|
||||
return node.querySelectorAll(selector).array().concat(node.shadowRoot ? node.shadowRoot.querySelectorAll(selector).array() : []);
|
||||
}
|
||||
},
|
||||
|
||||
ensureComplete: function(scope) {
|
||||
this.super(arguments);
|
||||
if (scope._heroes) {
|
||||
scope._heroes.forEach(function(h) {
|
||||
h.h1.style[TRANSITION_NAME] = '';
|
||||
h.h1.style[TRANSFORM_NAME] = '';
|
||||
});
|
||||
scope._heroes = [];
|
||||
}
|
||||
},
|
||||
|
||||
complete: function(scope, e) {
|
||||
// if (e.propertyName === TRANSFORM_CSSNAME) {
|
||||
var done = false;
|
||||
scope._heroes.forEach(function(h) {
|
||||
if (h.h1 === e.path[0]) {
|
||||
done = true;
|
||||
}
|
||||
});
|
||||
|
||||
if (done) {
|
||||
this.super(arguments);
|
||||
}
|
||||
// }
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
// utility method for searching through shadowRoots.
|
||||
function queryShadow(node, selector) {
|
||||
var m, el = node.firstElementChild;
|
||||
var shadows, sr, i;
|
||||
shadows = [];
|
||||
sr = node.shadowRoot;
|
||||
while(sr) {
|
||||
shadows.push(sr);
|
||||
sr = sr.olderShadowRoot;
|
||||
}
|
||||
for(i = shadows.length - 1; i >= 0; i--) {
|
||||
m = shadows[i].querySelector(selector);
|
||||
if (m) {
|
||||
return m;
|
||||
}
|
||||
}
|
||||
while(el) {
|
||||
m = queryShadow(el, selector);
|
||||
if (m) {
|
||||
return m;
|
||||
}
|
||||
el = el.nextElementSibling;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function _queryAllShadows(node, selector, results) {
|
||||
var el = node.firstElementChild;
|
||||
var temp, sr, shadows, i, j;
|
||||
shadows = [];
|
||||
sr = node.shadowRoot;
|
||||
while(sr) {
|
||||
shadows.push(sr);
|
||||
sr = sr.olderShadowRoot;
|
||||
}
|
||||
for (i = shadows.length - 1; i >= 0; i--) {
|
||||
temp = shadows[i].querySelectorAll(selector);
|
||||
for(j = 0; j < temp.length; j++) {
|
||||
results.push(temp[j]);
|
||||
}
|
||||
}
|
||||
while (el) {
|
||||
_queryAllShadows(el, selector, results);
|
||||
el = el.nextElementSibling;
|
||||
}
|
||||
return results;
|
||||
}
|
||||
|
||||
queryAllShadows = function(node, selector, all) {
|
||||
if (all) {
|
||||
return _queryAllShadows(node, selector, []);
|
||||
} else {
|
||||
return queryShadow(node, selector);
|
||||
}
|
||||
};
|
||||
|
||||
})();
|
||||
</script>
|
||||
</polymer-element>
|
||||
|
||||
<hero-transition id="hero-transition"></hero-transition>
|
||||
58
rpg-docs/public/bower_components/core-animated-pages/transitions/list-cascade.html
vendored
Normal file
58
rpg-docs/public/bower_components/core-animated-pages/transitions/list-cascade.html
vendored
Normal file
@@ -0,0 +1,58 @@
|
||||
<!--
|
||||
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
|
||||
<link href="core-transition-pages.html" rel="import">
|
||||
|
||||
|
||||
<core-style id="list-cascade">
|
||||
polyfill-next-selector { content: ':host.list-cascade > * [list-cascade]'; }
|
||||
:host(.list-cascade) ::content > * [list-cascade] * {
|
||||
-webkit-transition: -webkit-transform 1s cubic-bezier(0.4, 0, 0.2, 1), opacity {{g.transitions.cascade || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1), opacity {{g.transitions.cascade || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: ':host > .core-selected [list-cascade] *'; }
|
||||
::content > .core-selected [list-cascade] * {
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: ':host > *:not(.core-selected) [list-cascade] *'; }
|
||||
::content > *:not(.core-selected) [list-cascade] * {
|
||||
-webkit-transform: translateY(200%);
|
||||
transform: translateY(200%);
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: ':host > .core-selected [list-cascade] *:nth-child(2)'; }
|
||||
::content > .core-selected [list-cascade] *:nth-child(2) {
|
||||
-webkit-transition-delay: 0.1s;
|
||||
transition-delay: 0.1s;
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: ':host > .core-selected [list-cascade] *:nth-child(3)'; }
|
||||
::content > .core-selected [list-cascade] *:nth-child(3) {
|
||||
-webkit-transition-delay: 0.2s;
|
||||
transition-delay: 0.2s;
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: ':host > .core-selected [list-cascade] *:nth-child(4)'; }
|
||||
::content > .core-selected [list-cascade] *:nth-child(4) {
|
||||
-webkit-transition-delay: 0.3s;
|
||||
transition-delay: 0.3s;
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: ':host > .core-selected [list-cascade] *:nth-child(5)'; }
|
||||
::content > .core-selected [list-cascade] *:nth-child(5) {
|
||||
-webkit-transition-delay: 0.4s;
|
||||
transition-delay: 0.4s;
|
||||
}
|
||||
</core-style>
|
||||
|
||||
<core-transition-pages id="list-cascade" activeClass="list-cascade"></core-transition-pages>
|
||||
37
rpg-docs/public/bower_components/core-animated-pages/transitions/scale-up.html
vendored
Normal file
37
rpg-docs/public/bower_components/core-animated-pages/transitions/scale-up.html
vendored
Normal file
@@ -0,0 +1,37 @@
|
||||
<!--
|
||||
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
|
||||
<link href="core-transition-pages.html" rel="import">
|
||||
|
||||
<core-style id="scale-up">
|
||||
polyfill-next-selector { content: ':host > * [scale-up]'; }
|
||||
::content > * /deep/ [scale-up] {
|
||||
-webkit-transition: -webkit-transform {{g.transitions.scaleDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1) {{g.transitions.scaleDelay || g.transitions.delay}} !important;
|
||||
transition: transform {{g.transitions.scaleDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1) {{g.transitions.scaleDelay || g.transitions.delay}} !important;
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: ':host > .core-selected [scale-up]'; }
|
||||
::content > .core-selected /deep/ [scale-up] {
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [scale-up]'; }
|
||||
::content > [animate]:not(.core-selected) /deep/ [scale-up] {
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: ':host > .core-selected[animate] [scale-up]'; }
|
||||
::content > .core-selected[animate] /deep/ [scale-up] {
|
||||
z-index: 1000;
|
||||
}
|
||||
</core-style>
|
||||
|
||||
<core-transition-pages id="scale-up"></core-transition-pages>
|
||||
55
rpg-docs/public/bower_components/core-animated-pages/transitions/slide-down.html
vendored
Normal file
55
rpg-docs/public/bower_components/core-animated-pages/transitions/slide-down.html
vendored
Normal file
@@ -0,0 +1,55 @@
|
||||
<!--
|
||||
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
|
||||
<link href="core-transition-pages.html" rel="import">
|
||||
|
||||
<core-style id="slide-down">
|
||||
polyfill-next-selector { content: ':host.slide-down > * [slide-down]'; }
|
||||
:host(.slide-down) ::content > * /deep/ [slide-down] {
|
||||
-webkit-transition: -webkit-transform {{g.transitions.slideDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition: transform {{g.transitions.slideDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: ':host > .core-selected [slide-down]'; }
|
||||
::content > .core-selected /deep/ [slide-down] {
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [slide-down]'; }
|
||||
::content > [animate]:not(.core-selected) /deep/ [slide-down] {
|
||||
-webkit-transform: translateY(-100%);
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
</core-style>
|
||||
|
||||
<!--
|
||||
|
||||
`slide-down` slides an element in the outgoing page from the top of the window and
|
||||
slides in an element in the incoming page from the top of the window during a page
|
||||
transition. You can configure the duration of the transition with the global variable
|
||||
`CoreStyle.g.transitions.slideDuration`.
|
||||
|
||||
Example:
|
||||
|
||||
<core-animated-pages transition="slide-down">
|
||||
<section>
|
||||
<div id="div1" slide-down></div>
|
||||
</section>
|
||||
<section></section>
|
||||
</core-animated-pages>
|
||||
|
||||
@class slide-down
|
||||
@extends core-transition-pages
|
||||
@status beta
|
||||
@homepage github.io
|
||||
|
||||
-->
|
||||
|
||||
<core-transition-pages id="slide-down" activeClass="slide-down"></core-transition-pages>
|
||||
38
rpg-docs/public/bower_components/core-animated-pages/transitions/slide-from-bottom.html
vendored
Normal file
38
rpg-docs/public/bower_components/core-animated-pages/transitions/slide-from-bottom.html
vendored
Normal file
@@ -0,0 +1,38 @@
|
||||
<!--
|
||||
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
|
||||
<link href="core-transition-pages.html" rel="import">
|
||||
|
||||
<core-style id="slide-from-bottom">
|
||||
polyfill-next-selector { content: ':host(.slide-from-bottom) > *'; }
|
||||
:host(.slide-from-bottom) ::content > * {
|
||||
-webkit-transition: -webkit-transform {{g.transitions.slideDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition: transform {{g.transitions.slideDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: ':host(.slide-from-bottom) > .core-selected ~ [animate]:not(.core-selected)'; }
|
||||
:host(.slide-from-bottom) ::content > .core-selected ~ [animate]:not(.core-selected) {
|
||||
-webkit-transform: translateY(100%);
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: ':host(.slide-from-bottom) > [animate]:not(.core-selected)'; }
|
||||
:host(.slide-from-bottom) ::content > [animate]:not(.core-selected) {
|
||||
-webkit-transform: translateY(-100%);
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: ':host(.slide-from-bottom) > .core-selected'; }
|
||||
:host(.slide-from-bottom) ::content > .core-selected {
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
}
|
||||
</core-style>
|
||||
|
||||
<core-transition-pages id="slide-from-bottom" scopeClass="slide-from-bottom"></core-transition-pages>
|
||||
43
rpg-docs/public/bower_components/core-animated-pages/transitions/slide-from-right.html
vendored
Normal file
43
rpg-docs/public/bower_components/core-animated-pages/transitions/slide-from-right.html
vendored
Normal file
@@ -0,0 +1,43 @@
|
||||
<!--
|
||||
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
|
||||
<link href="core-transition-pages.html" rel="import">
|
||||
|
||||
<!--
|
||||
Warning: This transition does not work well in combination with other transitions, because
|
||||
it operates on the page rather than the page's children.
|
||||
-->
|
||||
|
||||
<core-style id="slide-from-right">
|
||||
polyfill-next-selector { content: ':host(.slide-from-right) > *'; }
|
||||
:host(.slide-from-right) ::content > * {
|
||||
-webkit-transition: -webkit-transform {{g.transitions.slideDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition: transform {{g.transitions.slideDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: ':host(.slide-from-right) > .core-selected ~ [animate]:not(.core-selected)'; }
|
||||
:host(.slide-from-right) ::content > .core-selected ~ [animate]:not(.core-selected) {
|
||||
-webkit-transform: translateX(100%);
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: ':host(.slide-from-right) > [animate]:not(.core-selected)'; }
|
||||
:host(.slide-from-right) ::content > [animate]:not(.core-selected) {
|
||||
-webkit-transform: translateX(-100%);
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: ':host(.slide-from-right) > .core-selected'; }
|
||||
:host(.slide-from-right) ::content > .core-selected {
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
}
|
||||
</core-style>
|
||||
|
||||
<core-transition-pages id="slide-from-right" scopeClass="slide-from-right"></core-transition-pages>
|
||||
82
rpg-docs/public/bower_components/core-animated-pages/transitions/slide-up.html
vendored
Normal file
82
rpg-docs/public/bower_components/core-animated-pages/transitions/slide-up.html
vendored
Normal file
@@ -0,0 +1,82 @@
|
||||
<!--
|
||||
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
|
||||
<link href="core-transition-pages.html" rel="import">
|
||||
|
||||
<core-style id="slide-up">
|
||||
polyfill-next-selector { content: ':host.slide-up > * [slide-up]'; }
|
||||
:host(.slide-up) ::content > * /deep/ [slide-up] {
|
||||
-webkit-transition: -webkit-transform {{g.transitions.slideDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition: transform {{g.transitions.slideDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: ':host > .core-selected [slide-up]'; }
|
||||
::content > .core-selected /deep/ [slide-up] {
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [slide-up]'; }
|
||||
::content > [animate]:not(.core-selected) /deep/ [slide-up] {
|
||||
-webkit-transform: translateY(150%);
|
||||
transform: translateY(150%);
|
||||
}
|
||||
</core-style>
|
||||
|
||||
<core-style id="slide-up-offscreen">
|
||||
polyfill-next-selector { content: ':host.slide-up-offscreen > * [slide-up-offscreen]'; }
|
||||
:host(.slide-up-offscreen) ::content > * /deep/ [slide-up-offscreen] {
|
||||
-webkit-transition: -webkit-transform {{g.transitions.slideDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition: transform {{g.transitions.slideDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: ':host > .core-selected [slide-up-offscreen]'; }
|
||||
::content > .core-selected /deep/ [slide-up-offscreen] {
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [slide-up-offscreen]'; }
|
||||
::content > [animate]:not(.core-selected) /deep/ [slide-up-offscreen] {
|
||||
-webkit-transform: translateY(100vh);
|
||||
transform: translateY(100vh);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
polyfill-rule {
|
||||
content: ':host > [animate]:not(.core-selected) [slide-up-offscreen]';
|
||||
-webkit-transform: translateY(1000px);
|
||||
}
|
||||
</core-style>
|
||||
|
||||
<!--
|
||||
|
||||
`slide-up` slides an element in the outgoing page from the bottom of the window
|
||||
and slides in an element in the incoming page from the bottom of the window during
|
||||
a page transition. You can configure the duration of the transition with the global
|
||||
variable `CoreStyle.g.transitions.slideDuration`.
|
||||
|
||||
Example:
|
||||
|
||||
<core-animated-pages transition="slide-up">
|
||||
<section>
|
||||
<div id="div1" slide-up></div>
|
||||
</section>
|
||||
<section></section>
|
||||
</core-animated-pages>
|
||||
|
||||
@class slide-up
|
||||
@extends core-transition-pages
|
||||
@status beta
|
||||
@homepage github.io
|
||||
|
||||
-->
|
||||
|
||||
<core-transition-pages id="slide-up" activeClass="slide-up"></core-transition-pages>
|
||||
<core-transition-pages id="slide-up-offscreen" activeClass="slide-up-offscreen"></core-transition-pages>
|
||||
101
rpg-docs/public/bower_components/core-animated-pages/transitions/tile-cascade.html
vendored
Normal file
101
rpg-docs/public/bower_components/core-animated-pages/transitions/tile-cascade.html
vendored
Normal file
@@ -0,0 +1,101 @@
|
||||
<!--
|
||||
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
|
||||
<link href="core-transition-pages.html" rel="import">
|
||||
|
||||
<core-style id="tile-cascade">
|
||||
polyfill-next-selector { content: ':host(.tile-cascade) > * [tile-cascade] > div'; }
|
||||
:host(.tile-cascade) ::content > * /deep/ [tile-cascade] > div {
|
||||
-webkit-transition: -webkit-transform {{g.transitions.cascadeDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1), opacity {{g.transitions.cascadeFadeDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition: transform {{g.transitions.cascadeDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1), opacity {{g.transitions.cascadeFadeDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: ':host(.tile-cascade) > * [tile-cascade] > div:nth-of-type(2)'; }
|
||||
:host(.tile-cascade) ::content > * /deep/ [tile-cascade] > div:nth-of-type(2) {
|
||||
-webkit-transition-delay: 0.05s;
|
||||
transition-delay: 0.05s;
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: ':host(.tile-cascade) > * [tile-cascade] > div:nth-of-type(3)'; }
|
||||
:host(.tile-cascade) ::content > * /deep/ [tile-cascade] > div:nth-of-type(3) {
|
||||
-webkit-transition-delay: 0.1s;
|
||||
transition-delay: 0.1s;
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: ':host(.tile-cascade) > * [tile-cascade] > div:nth-of-type(4)'; }
|
||||
:host(.tile-cascade) ::content > * /deep/ [tile-cascade] > div:nth-of-type(4) {
|
||||
-webkit-transition-delay: 0.15s;
|
||||
transition-delay: 0.15s;
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: ':host(.tile-cascade) > * [tile-cascade] > div:nth-of-type(5)'; }
|
||||
:host(.tile-cascade) ::content > * /deep/ [tile-cascade] > div:nth-of-type(5) {
|
||||
-webkit-transition-delay: 0.2s;
|
||||
transition-delay: 0.2s;
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: ':host(.tile-cascade) > * [tile-cascade] > div:nth-of-type(6)'; }
|
||||
:host(.tile-cascade) ::content > * /deep/ [tile-cascade] > div:nth-of-type(6) {
|
||||
-webkit-transition-delay: 0.25s;
|
||||
transition-delay: 0.25s;
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: ':host(.tile-cascade) > * [tile-cascade] > div:nth-of-type(7)'; }
|
||||
:host(.tile-cascade) ::content > * /deep/ [tile-cascade] > div:nth-of-type(7) {
|
||||
-webkit-transition-delay: 0.3s;
|
||||
transition-delay: 0.3s;
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: ':host(.tile-cascade) > * [tile-cascade] > div:nth-of-type(8)'; }
|
||||
:host(.tile-cascade) ::content > * /deep/ [tile-cascade] > div:nth-of-type(8) {
|
||||
-webkit-transition-delay: 0.35s;
|
||||
transition-delay: 0.35s;
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: ':host(.tile-cascade) > * [tile-cascade] > div:nth-of-type(9)'; }
|
||||
:host(.tile-cascade) ::content > * /deep/ [tile-cascade] > div:nth-of-type(9) {
|
||||
-webkit-transition-delay: 0.4s;
|
||||
transition-delay: 0.4s;
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: ':host(.tile-cascade) > * [tile-cascade] > div:nth-of-type(10)'; }
|
||||
:host(.tile-cascade) ::content > * /deep/ [tile-cascade] > div:nth-of-type(10) {
|
||||
-webkit-transition-delay: 0.45s;
|
||||
transition-delay: 0.45s;
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: ':host(.tile-cascade) > * [tile-cascade] > div:nth-of-type(11)'; }
|
||||
:host(.tile-cascade) ::content > * /deep/ [tile-cascade] > div:nth-of-type(11) {
|
||||
-webkit-transition-delay: 0.5s;
|
||||
transition-delay: 0.5s;
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: ':host(.tile-cascade) > * [tile-cascade] > div:nth-of-type(12)'; }
|
||||
:host(.tile-cascade) ::content > * /deep/ [tile-cascade] > div:nth-of-type(12) {
|
||||
-webkit-transition-delay: 0.55s;
|
||||
transition-delay: 0.55s;
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: '.core-selected [tile-cascade] > div'; }
|
||||
::content > .core-selected /deep/ [tile-cascade] > div {
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: '[animate]:not(.core-selected) [tile-cascade] > div'; }
|
||||
::content > [animate]:not(.core-selected) /deep/ [tile-cascade] > div {
|
||||
-webkit-transform: translateY(100%);
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
polyfill-next-selector { content: '[animate]:not(.core-selected) [tile-cascade][fade] > div'; }
|
||||
::content > [animate]:not(.core-selected) /deep/ [tile-cascade][fade] > div {
|
||||
opacity: 0;
|
||||
}
|
||||
</core-style>
|
||||
|
||||
<core-transition-pages id="tile-cascade" activeClass="tile-cascade" transitionProperty="transform"></core-transition-pages>
|
||||
Reference in New Issue
Block a user