Skip to content
This repository has been archived by the owner on Mar 13, 2018. It is now read-only.

Commit

Permalink
Merge pull request #10 from Polymer/master
Browse files Browse the repository at this point in the history 
7/11 master -> stable
  • Loading branch information
@dfreedm
dfreedm committed Jul 11, 2013
2 parents 4f5d66b + a385ebf commit ef4399c
Show file tree
Hide file tree
Showing 55 changed files with 2,718 additions and 295 deletions.
30 changes: 30 additions & 0 deletions polymer-ajax/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<title>polymer-ajax</title>
<script src="../../polymer/polymer.js"></script>
<link rel="import" href="polymer-ajax.html">
</head>
<body>
<polymer-ajax auto url="http://gdata.youtube.com/feeds/api/videos/"
params='{"alt":"json", "q":"chrome"}'
handleAs="json"></polymer-ajax>

<template repeat="{{response.feed.entry}}">
<div>{{title.$t}}</div>
</template>

<script>
document.addEventListener('WebComponentsReady', function() {
var ajax = document.querySelector("polymer-ajax");
ajax.addEventListener("polymer-response",
function(e) {
document.querySelector('template').model = {
response: e.detail.response
};
}
);
});
</script>
</body>
</html>
13 changes: 7 additions & 6 deletions polymer-ajax/polymer-ajax.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,23 +23,24 @@
/**
* Fired when a response is received.
*
* @event response
* @event polymer-response
*/
/**
* Fired when an error is received.
*
* @event error
* @event polymer-error
*/
/**
* Fired whenever a response or an error is received.
*
* @event complete
* @event polymer-complete
*/
-->
<link rel="import" href="polymer-xhr.html">
<element name="polymer-ajax" attributes="url handleAs auto params response">

<polymer-element name="polymer-ajax" attributes="url handleAs auto params response">
<script>
Polymer.register(this, {
Polymer('polymer-ajax', {
/**
* The URL target of the request.
*
Expand Down Expand Up @@ -175,4 +176,4 @@
}
});
</script>
</element>
</polymer-element>
12 changes: 8 additions & 4 deletions polymer-ajax/polymer-xhr.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
* @class polymer-xhr
*/
-->
<element name="polymer-xhr">
<polymer-element name="polymer-xhr">
<template>
<style>
@host {
Expand All @@ -30,11 +30,11 @@
</style>
</template>
<script>
Polymer.register(this, {
Polymer('polymer-xhr', {
makeReadyStateHandler: function(xhr, callback) {
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
callback && callback.call(null, xhr.responseText, xhr);
callback && callback.call(null, xhr.response, xhr);
}
};
},
Expand Down Expand Up @@ -66,6 +66,7 @@
* @param {Object} inOptions.params Data to be sent to the server.
* @param {Object} inOptions.body The content for the request body for POST method.
* @param {Object} inOptions.headers HTTP request headers.
* @param {String} inOptions.responseType The response type. Default is 'text'.
* @param {Object} inOptions.callback Called when request is completed.
* @returns {Object} XHR object.
*/
Expand All @@ -78,6 +79,9 @@
if (params && method == 'GET') {
url += (url.indexOf('?') > 0 ? '&' : '?') + params;
}
if (options.responseType) {
xhr.responseType = options.responseType;
}
xhr.open(method, url, async);
this.makeReadyStateHandler(xhr, options.callback);
this.setRequestHeaders(options.headers);
Expand All @@ -89,4 +93,4 @@
}
});
</script>
</element>
</polymer-element>
86 changes: 86 additions & 0 deletions polymer-animation/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
<!DOCTYPE html>
<html>
<head>
<title>Polymer Animation Components</title>
<link rel="import" href="polymer-animation.html">
<link rel="import" href="polymer-animation-group.html">
<link rel="import" href="polymer-blink.html">
<link rel="import" href="polymer-bounce.html">
<link rel="import" href="polymer-fadein.html">
<link rel="import" href="polymer-fadeout.html">
<link rel="import" href="polymer-flip.html">
<link rel="import" href="polymer-shake.html">
<script src="../../polymer/polymer.js"></script>
<style>
body {
text-align: center;
font-family: Helvetica, sans-serif;
}
div#target {
display: inline-block;
background-color: dimgrey;
border-radius: 5px;
padding: 5px 10px;
margin: 50px;
font-size: 30px;
color: white;
}
div.animations > * {
display: inline-block;
background-color: darkgrey;
border-radius: 5px;
padding: 5px 10px;
margin: 5px;
color: white;
}
</style>
</head>
<body>
<div id="target">animated!</div>
<div class="animations">
<polymer-animation duration="1">
raw
<polymer-animation-prop name="opacity" easing="ease-in-out">
<polymer-animation-keyframe value="1"></polymer-animation-keyframe>
<polymer-animation-keyframe value="0.3"></polymer-animation-keyframe>
<polymer-animation-keyframe value="1"></polymer-animation-keyframe>
</polymer-animation-prop>
</polymer-animation>
<polymer-animation-group type="seq">
raw group
<polymer-animation duration="0.3">
<polymer-animation-prop name="opacity" easing="ease-in-out">
<polymer-animation-keyframe value="1"></polymer-animation-keyframe>
<polymer-animation-keyframe value="0.3"></polymer-animation-keyframe>
<polymer-animation-keyframe value="1"></polymer-animation-keyframe>
</polymer-animation-prop>
</polymer-animation>
<polymer-animation duration="0.3">
<polymer-animation-prop name="transform" easing="ease-in-out">
<polymer-animation-keyframe value="scale(1)"></polymer-animation-keyframe>
<polymer-animation-keyframe value="scale(1.2)"></polymer-animation-keyframe>
<polymer-animation-keyframe value="scale(1)"></polymer-animation-keyframe>
</polymer-animation-prop>
</polymer-animation>
</polymer-animation-group>
<polymer-bounce duration="1">bounce</polymer-bounce>
<polymer-shake>shake</polymer-shake>
<polymer-shake duration="Infinity">shake forever</polymer-shake>
<polymer-flip>flip X</polymer-flip>
<polymer-flip axis="y">flip Y</polymer-flip>
<polymer-blink>blink</polymer-blink>
<polymer-fadein>fade in</polymer-fadein>
<polymer-fadeout>fade out</polymer-fadeout>
</div>
<script>
document.addEventListener('WebComponentsReady', function() {
document.querySelector('.animations').addEventListener('click',
function(e) {
var animation = e.target;
animation.target = target;
animation.play();
});
});
</script>
</body>
</html>
100 changes: 100 additions & 0 deletions polymer-animation/polymer-animation-group.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
<link rel="import" href="polymer-animation.html">
<polymer-element name="polymer-animation-group" extends="polymer-animation" on-animationchange="onAnimationChange">
<script>
(function() {
var ANIMATION_GROUPS = {
'par': ParGroup,
'seq': SeqGroup
};
/**
* @module Animation
*/
/**
* Component for a group of animations.
*
* A fade in and move animation in sequence:
*
* <polymer-animation-group type="seq">
* <polymer-animation>
* <polymer-animation-prop name="opacity">
* <polymer-animation-keyframe value="0.5" offset="0"></polymer-animation-keyframe>
* <polymer-animation-keyframe value="1" offset="1"></polymer-animation-keyframe>
* <polymer-animation-prop>
* </polymer-animation>
* <polymer-animation>
* <polymer-animation-prop name="transform">
* <polymer-animation-keyframe value="translateX(0)" offset="0"></polymer-animation-keyframe>
* <polymer-animation-keyframe value="translateX(100px)" offset="1"></polymer-animation-keyframe>
* <polymer-animation-prop>
* </polymer-animation>
* </polymer-animation-group>
* @class polymer-animation-group
*/
Polymer('polymer-animation-group', {
/**
* If specified the target will be assigned to all child animations.
* @property target
* @type HTMLElement|Node
* @optional
*/
publish: {
targetSelector: '',
target: null,
duration: null,
/**
* Group type. 'par' for parallel and 'seq' for sequence.
* @property type
* @type String
*/
type: 'par'
},
ready: function() {
// TODO: need to do this for now.
this.super();
},
makeAnimation: function() {
return new ANIMATION_GROUPS[this.type](this.childAnimations, this.timingProps);
},
completeApply: function() {
this.doOnChildren(function(c) {
c.completeApply();
});
Platform.flush();
this.super();
},
onAnimationChange: function(inEvent, inSender) {
if (inSender !== this) {
this.asyncApply();
}
},
typeChanged: function() {
this.asyncApply();
},
targetChanged: function() {
this.doOnChildren(function(c) {
c.target = this.target;
}.bind(this));
},
doOnChildren: function(inFn) {
var children = this.children;
if (!children.length) {
children = this.webkitShadowRoot ? this.webkitShadowRoot.childNodes : [];
}
Array.prototype.forEach.call(children, function(c) {
// TODO <template> in the way
c.apply && inFn(c);
}, this);
},
get childAnimations() {
var list = [];
this.doOnChildren(function(c) {
if (c.animation) {
list.push(c.animation);
}
});
return list;
}
});
})();
</script>
</polymer-element>
41 changes: 41 additions & 0 deletions polymer-animation/polymer-animation-keyframe.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
<polymer-element name="polymer-animation-keyframe" attributes="offset value easing">
<script>
/**
* Defines the value at a keyframe for the containing `polymer-animation-prop`.
* @class polymer-animation-keyframe
*/
/**
* From 0 to 1.
* @property offset
* @type Number
* @required
*/
/**
* Property value at the animation offset.
* @property value
* @type String
* @required
*/
/**
* @property easing
* @type String
*/
Polymer('polymer-animation-keyframe', {
get properties() {
var props = {
// TODO bug in webanimations polyfill
value: String(this.value) || "",
};
var more = this.offset !== null || this.easing;
if (this.offset !== null) {
props.offset = this.offset;
}
if (this.easing) {
props.timingFunction = this.easing;
}
return more ? props : String(this.value);
}
});
</script>
</polymer-element>

25 changes: 25 additions & 0 deletions polymer-animation/polymer-animation-prop.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<link rel="import" href="polymer-animation-keyframe.html">
<polymer-element name="polymer-animation-prop" attributes="name">
<script>
/**
* An animated property. Its children should be `<polymer-animation-keyframe>`
* elements specifying the keyframe values.
*
* Declaring an property to move down and then right:
*
* <polymer-animation-prop name="transform">
* <polymer-animation-keyframe offset="0" value="translate(0,0)"></polymer-animation-keyframe>
* <polymer-animation-keyframe offset="0.5" value="translate(0,100px)"></polymer-animation-keyframe>
* <polymer-animation-keyframe offset="1" value="translate(100px,100px)"></polymer-animation-keyframe>
* </polymer-animation-prop>
* @class polymer-animation-prop
*/
/**
* CSS property name.
* @property name
* @type String
* @required
*/
Polymer('polymer-animation-prop');
</script>
</polymer-element>
Loading

0 comments on commit ef4399c

Please sign in to comment.