Added Polymer

This commit is contained in:
Thaum
2014-11-26 10:18:35 +00:00
parent 5eea4714b2
commit 3408ba9e8d
1210 changed files with 394645 additions and 47 deletions

View File

@@ -0,0 +1,19 @@
{
"name": "core-transition",
"private": true,
"dependencies": {
"polymer": "Polymer/polymer#^0.5.0",
"core-meta": "Polymer/core-meta#^0.5.0"
},
"version": "0.5.1",
"homepage": "https://github.com/Polymer/core-transition",
"_release": "0.5.1",
"_resolution": {
"type": "version",
"tag": "0.5.1",
"commit": "a9e9e3a62653bdef81bb1c8531d12476b8b62caf"
},
"_source": "git://github.com/Polymer/core-transition.git",
"_target": "^0.5.0",
"_originalSource": "Polymer/core-transition"
}

View File

@@ -0,0 +1,2 @@
core-transition
===============

View File

@@ -0,0 +1,9 @@
{
"name": "core-transition",
"private": true,
"dependencies": {
"polymer": "Polymer/polymer#^0.5.0",
"core-meta": "Polymer/core-meta#^0.5.0"
},
"version": "0.5.1"
}

View File

@@ -0,0 +1,220 @@
<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<!--
`<core-transition-css>` implements CSS transitions as `<core-transition>` objects so they can be
reused in a pluggable transition system such as in `<core-overlay>`. Currently this class has
some specific support to animate an element from and to the viewport such as a dialog, but you
can override it for different effects.
Example:
my-css-transition.html:
<polymer-element name="my-css-transition" extends="core-transition-css">
<template>
<style>
:host(.my-transition) {
opacity: 0;
transition: transform 1s ease-out, opacity 1s ease-out;
}
:host(.my-transition.my-opened) {
opacity: 1;
transform: none;
}
:host(.my-transition-top) {
transform: translateY(-100vh);
}
:host(.my-transition-bottom) {
transform: translateY(100vh);
}
</style>
</template>
<script>
Polymer({
baseClass: 'my-transition',
openedClass: 'my-opened'
});
</script>
</polymer-element>
<my-css-transition id="my-transition-top" transitionType="top"></my-css-transition>
<my-css-transition id="my-transition-bottom" transitionType="bottom"></my-css-transition>
my-css-transition-demo.html
<link href="components/core-meta/core-meta.html" rel="import">
<link href="my-css-transition.html">
<div id="animate-me"></div>
<script>
// Get the core-transition
var meta = document.createElement('core-meta');
meta.type = 'transition';
var transition1 = meta.byId('my-transition-top');
// Set up the animation
var animated = document.getElementById('animate-me');
transition1.setup(animated);
transition1.go(animated, {opened: true});
</script>
The first element in the template of a `<core-transition-css>` object should be a stylesheet. It
will be injected to the scope of the animated node in the `setup` function. The node is initially
invisible with `opacity: 0`, and you can transition it to an "opened" state by passing
`{opened: true}` to the `go` function.
All nodes being animated will get the class `my-transition` added in the `setup` function.
Additionally, the class `my-transition-<transitionType>` will be applied. You can use the
`transitionType` attribute to implement several different behaviors with the same
`<core-transition-css>` object. In the above example, `<my-css-transition>` implements both
sliding the node from the top of the viewport and from the bottom of the viewport.
Available transitions
---------------------
`<core-transition-css>` includes several commonly used transitions.
`core-transition-fade`: Animates from `opacity: 0` to `opacity: 1` when it opens.
`core-transition-center`: Zooms the node into the final size.
`core-transition-top`: Slides the node into the final position from the top.
`core-transition-bottom`: Slides the node into the final position from the bottom.
`core-transition-left`: Slides the node into the final position from the left.
`core-transition-right`: Slides the node into the final position from the right.
@group Polymer Core Elements
@element core-transition-css
@extends core-transition
@status beta
@homepage github.io
-->
<link rel="import" href="core-transition.html">
<polymer-element name="core-transition-css" extends="core-transition" attributes="transitionType">
<template>
<link no-shim rel="stylesheet" href="core-transition-overlay.css">
</template>
<script>
Polymer('core-transition-css', {
/**
* The class that will be applied to all animated nodes.
*
* @attribute baseClass
* @type string
* @default "core-transition"
*/
baseClass: 'core-transition',
/**
* The class that will be applied to nodes in the opened state.
*
* @attribute openedClass
* @type string
* @default "core-opened"
*/
openedClass: 'core-opened',
/**
* The class that will be applied to nodes in the closed state.
*
* @attribute closedClass
* @type string
* @default "core-closed"
*/
closedClass: 'core-closed',
/**
* Event to listen to for animation completion.
*
* @attribute completeEventName
* @type string
* @default "transitionEnd"
*/
completeEventName: 'transitionend',
publish: {
/**
* A secondary configuration attribute for the animation. The class
* `<baseClass>-<transitionType` is applied to the animated node during
* `setup`.
*
* @attribute transitionType
* @type string
*/
transitionType: null
},
registerCallback: function(element) {
this.transitionStyle = element.templateContent().firstElementChild;
},
// template is just for loading styles, we don't need a shadowRoot
fetchTemplate: function() {
return null;
},
go: function(node, state) {
if (state.opened !== undefined) {
this.transitionOpened(node, state.opened);
}
},
setup: function(node) {
if (!node._hasTransitionStyle) {
if (!node.shadowRoot) {
node.createShadowRoot().innerHTML = '<content></content>';
}
this.installScopeStyle(this.transitionStyle, 'transition',
node.shadowRoot);
node._hasTransitionStyle = true;
}
node.classList.add(this.baseClass);
if (this.transitionType) {
node.classList.add(this.baseClass + '-' + this.transitionType);
}
},
teardown: function(node) {
node.classList.remove(this.baseClass);
if (this.transitionType) {
node.classList.remove(this.baseClass + '-' + this.transitionType);
}
},
transitionOpened: function(node, opened) {
this.listenOnce(node, this.completeEventName, function() {
if (!opened) {
node.classList.remove(this.closedClass);
}
this.complete(node);
});
node.classList.toggle(this.openedClass, opened);
node.classList.toggle(this.closedClass, !opened);
}
});
</script>
</polymer-element>
<core-transition-css id="core-transition-fade"></core-transition-css>
<core-transition-css id="core-transition-center" transitionType="center"></core-transition-css>
<core-transition-css id="core-transition-top" transitionType="top"></core-transition-css>
<core-transition-css id="core-transition-bottom" transitionType="bottom"></core-transition-css>
<core-transition-css id="core-transition-left" transitionType="left"></core-transition-css>
<core-transition-css id="core-transition-right" transitionType="right"></core-transition-css>

View File

@@ -0,0 +1,46 @@
/* 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(.core-transition) {
outline: none;
overflow: auto;
opacity: 0;
-webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in;
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in;
}
:host(.core-transition.core-opened) {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
:host(.core-transition-center) {
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
:host(.core-transition-top) {
-webkit-transform: translateY(-200%);
transform: translateY(-200%);
}
:host(.core-transition-bottom) {
-webkit-transform: translateY(200%);
transform: translateY(200%);
}
:host(.core-transition-left) {
-webkit-transform: translateX(-200%);
transform: translateX(-200%);
}
:host(.core-transition-right) {
-webkit-transform: translateX(200%);
transform: translateX(200%);
}

View File

@@ -0,0 +1,140 @@
<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<!--
`<core-transition>` is an abstraction of an animation. It is used to implement pluggable
transitions, for example in `<core-overlay>`. You can extend this class to create a custom
animation, instantiate it, and import it where you need the animation.
All instances of `<core-transition>` are stored in a single database with `type=transition`.
For more about the database, please see the documentation for `<core-meta>`.
Each instance of `<core-transition>` objects are shared across all the clients, so you should
not store state information specific to the animated element in the transition. Rather, store
it on the element.
Example:
my-transition.html:
<polymer-element name="my-transition" extends="core-transition">
<script>
go: function(node) {
node.style.transition = 'opacity 1s ease-out';
node.style.opacity = 0;
}
</script>
</polymer-element>
<my-transition id="my-fade-out"></my-transition>
my-transition-demo.html:
<link href="components/core-meta/core-meta.html" rel="import">
<link href="my-transition.html" rel="import">
<div id="animate-me"></div>
<script>
// Get the core-transition
var meta = document.createElement('core-meta');
meta.type = 'transition';
var transition = meta.byId('my-fade-out');
// Run the animation
var animated = document.getElementById('animate-me');
transition.go(animated);
</script>
@group Polymer Core Elements
@element core-transition
@extends core-meta
@status beta
@homepage github.io
-->
<!--
Fired when the animation finishes.
@event core-transitionend
@param {Object} detail
@param {Object} detail.node The animated node
-->
<link rel="import" href="../core-meta/core-meta.html">
<polymer-element name="core-transition" extends="core-meta">
<script>
Polymer('core-transition', {
type: 'transition',
/**
* Run the animation.
*
* @method go
* @param {Node} node The node to apply the animation on
* @param {Object} state State info
*/
go: function(node, state) {
this.complete(node);
},
/**
* Set up the animation. This may include injecting a stylesheet,
* applying styles, creating a web animations object, etc.. This
*
* @method setup
* @param {Node} node The animated node
*/
setup: function(node) {
},
/**
* Tear down the animation.
*
* @method teardown
* @param {Node} node The animated node
*/
teardown: function(node) {
},
/**
* Called when the animation completes. This function also fires the
* `core-transitionend` event.
*
* @method complete
* @param {Node} node The animated node
*/
complete: function(node) {
this.fire('core-transitionend', null, node);
},
/**
* Utility function to listen to an event on a node once.
*
* @method listenOnce
* @param {Node} node The animated node
* @param {string} event Name of an event
* @param {Function} fn Event handler
* @param {Array} args Additional arguments to pass to `fn`
*/
listenOnce: function(node, event, fn, args) {
var self = this;
var listener = function() {
fn.apply(self, args);
node.removeEventListener(event, listener, false);
}
node.addEventListener(event, listener, false);
}
});
</script>
</polymer-element>

View File

@@ -0,0 +1,87 @@
<!doctype html>
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>core-transition</title>
<script src="../webcomponentsjs/webcomponents.js"></script>
<link href="core-transition-css.html" rel="import">
<style>
#animate-me {
background-color: lime;
position: fixed;
top: 100px;
width: 100%;
height: 100%;
}
</style>
</head>
<body unresolved>
<div id="animate-me" hidden></div>
<select id="sel" onchange="setup();">
<option value="core-transition-fade" selected>core-transition-fade</option>
<option value="core-transition-center">core-transition-center</option>
<option value="core-transition-top">core-transition-top</option>
<option value="core-transition-bottom">core-transition-bottom</option>
<option value="core-transition-left">core-transition-left</option>
<option value="core-transition-right">core-transition-right</option>
</select>
<button onclick="stuff();">toggle</button>
<script>
document.addEventListener('polymer-ready', function() {
// initial setup
setup();
document.getElementById('animate-me').removeAttribute('hidden');
});
var meta;
var transition;
var state = {
opened: false
}
function getMeta() {
if (!meta) {
meta = document.createElement('core-meta');
meta.type = 'transition';
}
return meta;
}
function setup() {
var target = document.getElementById('animate-me');
if (transition) {
transition.teardown(target);
}
var value = document.getElementById('sel').selectedOptions[0].value;
transition = getMeta().byId(value);
transition.setup(target);
}
function stuff() {
var target = document.getElementById('animate-me');
state.opened = !state.opened;
transition.go(target, state);
}
</script>
</body>
</html>

View 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-transition.html","../core-meta/core-meta.html","core-transition-css.html"]'></core-component-page>
</body>
</html>