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

Commit ef4399c

Browse files
dfreedmdfreedm
committed
Merge pull request #10 from Polymer/master
7/11 master -> stable
2 parents 4f5d66b + a385ebf commit ef4399c

55 files changed

Lines changed: 2718 additions & 295 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎polymer-ajax/index.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>polymer-ajax</title>
5+
<script src="../../polymer/polymer.js"></script>
6+
<link rel="import" href="polymer-ajax.html">
7+
</head>
8+
<body>
9+
<polymer-ajax auto url="http://gdata.youtube.com/feeds/api/videos/"
10+
params='{"alt":"json", "q":"chrome"}'
11+
handleAs="json"></polymer-ajax>
12+
13+
<template repeat="{{response.feed.entry}}">
14+
<div>{{title.$t}}</div>
15+
</template>
16+
17+
<script>
18+
document.addEventListener('WebComponentsReady', function() {
19+
var ajax = document.querySelector("polymer-ajax");
20+
ajax.addEventListener("polymer-response",
21+
function(e) {
22+
document.querySelector('template').model = {
23+
response: e.detail.response
24+
};
25+
}
26+
);
27+
});
28+
</script>
29+
</body>
30+
</html>

‎polymer-ajax/polymer-ajax.html‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,23 +23,24 @@
2323
/**
2424
* Fired when a response is received.
2525
*
26-
* @event response
26+
* @event polymer-response
2727
*/
2828
/**
2929
* Fired when an error is received.
3030
*
31-
* @event error
31+
* @event polymer-error
3232
*/
3333
/**
3434
* Fired whenever a response or an error is received.
3535
*
36-
* @event complete
36+
* @event polymer-complete
3737
*/
3838
-->
3939
<link rel="import" href="polymer-xhr.html">
40-
<element name="polymer-ajax" attributes="url handleAs auto params response">
40+
41+
<polymer-element name="polymer-ajax" attributes="url handleAs auto params response">
4142
<script>
42-
Polymer.register(this, {
43+
Polymer('polymer-ajax', {
4344
/**
4445
* The URL target of the request.
4546
*
@@ -175,4 +176,4 @@
175176
}
176177
});
177178
</script>
178-
</element>
179+
</polymer-element>

‎polymer-ajax/polymer-xhr.html‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
* @class polymer-xhr
2020
*/
2121
-->
22-
<element name="polymer-xhr">
22+
<polymer-element name="polymer-xhr">
2323
<template>
2424
<style>
2525
@host {
@@ -30,11 +30,11 @@
3030
</style>
3131
</template>
3232
<script>
33-
Polymer.register(this, {
33+
Polymer('polymer-xhr', {
3434
makeReadyStateHandler: function(xhr, callback) {
3535
xhr.onreadystatechange = function() {
3636
if (xhr.readyState == 4) {
37-
callback && callback.call(null, xhr.responseText, xhr);
37+
callback && callback.call(null, xhr.response, xhr);
3838
}
3939
};
4040
},
@@ -66,6 +66,7 @@
6666
* @param {Object} inOptions.params Data to be sent to the server.
6767
* @param {Object} inOptions.body The content for the request body for POST method.
6868
* @param {Object} inOptions.headers HTTP request headers.
69+
* @param {String} inOptions.responseType The response type. Default is 'text'.
6970
* @param {Object} inOptions.callback Called when request is completed.
7071
* @returns {Object} XHR object.
7172
*/
@@ -78,6 +79,9 @@
7879
if (params && method == 'GET') {
7980
url += (url.indexOf('?') > 0 ? '&' : '?') + params;
8081
}
82+
if (options.responseType) {
83+
xhr.responseType = options.responseType;
84+
}
8185
xhr.open(method, url, async);
8286
this.makeReadyStateHandler(xhr, options.callback);
8387
this.setRequestHeaders(options.headers);
@@ -89,4 +93,4 @@
8993
}
9094
});
9195
</script>
92-
</element>
96+
</polymer-element>

‎polymer-animation/index.html‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Polymer Animation Components</title>
5+
<link rel="import" href="polymer-animation.html">
6+
<link rel="import" href="polymer-animation-group.html">
7+
<link rel="import" href="polymer-blink.html">
8+
<link rel="import" href="polymer-bounce.html">
9+
<link rel="import" href="polymer-fadein.html">
10+
<link rel="import" href="polymer-fadeout.html">
11+
<link rel="import" href="polymer-flip.html">
12+
<link rel="import" href="polymer-shake.html">
13+
<script src="../../polymer/polymer.js"></script>
14+
<style>
15+
body {
16+
text-align: center;
17+
font-family: Helvetica, sans-serif;
18+
}
19+
div#target {
20+
display: inline-block;
21+
background-color: dimgrey;
22+
border-radius: 5px;
23+
padding: 5px 10px;
24+
margin: 50px;
25+
font-size: 30px;
26+
color: white;
27+
}
28+
div.animations > * {
29+
display: inline-block;
30+
background-color: darkgrey;
31+
border-radius: 5px;
32+
padding: 5px 10px;
33+
margin: 5px;
34+
color: white;
35+
}
36+
</style>
37+
</head>
38+
<body>
39+
<div id="target">animated!</div>
40+
<div class="animations">
41+
<polymer-animation duration="1">
42+
raw
43+
<polymer-animation-prop name="opacity" easing="ease-in-out">
44+
<polymer-animation-keyframe value="1"></polymer-animation-keyframe>
45+
<polymer-animation-keyframe value="0.3"></polymer-animation-keyframe>
46+
<polymer-animation-keyframe value="1"></polymer-animation-keyframe>
47+
</polymer-animation-prop>
48+
</polymer-animation>
49+
<polymer-animation-group type="seq">
50+
raw group
51+
<polymer-animation duration="0.3">
52+
<polymer-animation-prop name="opacity" easing="ease-in-out">
53+
<polymer-animation-keyframe value="1"></polymer-animation-keyframe>
54+
<polymer-animation-keyframe value="0.3"></polymer-animation-keyframe>
55+
<polymer-animation-keyframe value="1"></polymer-animation-keyframe>
56+
</polymer-animation-prop>
57+
</polymer-animation>
58+
<polymer-animation duration="0.3">
59+
<polymer-animation-prop name="transform" easing="ease-in-out">
60+
<polymer-animation-keyframe value="scale(1)"></polymer-animation-keyframe>
61+
<polymer-animation-keyframe value="scale(1.2)"></polymer-animation-keyframe>
62+
<polymer-animation-keyframe value="scale(1)"></polymer-animation-keyframe>
63+
</polymer-animation-prop>
64+
</polymer-animation>
65+
</polymer-animation-group>
66+
<polymer-bounce duration="1">bounce</polymer-bounce>
67+
<polymer-shake>shake</polymer-shake>
68+
<polymer-shake duration="Infinity">shake forever</polymer-shake>
69+
<polymer-flip>flip X</polymer-flip>
70+
<polymer-flip axis="y">flip Y</polymer-flip>
71+
<polymer-blink>blink</polymer-blink>
72+
<polymer-fadein>fade in</polymer-fadein>
73+
<polymer-fadeout>fade out</polymer-fadeout>
74+
</div>
75+
<script>
76+
document.addEventListener('WebComponentsReady', function() {
77+
document.querySelector('.animations').addEventListener('click',
78+
function(e) {
79+
var animation = e.target;
80+
animation.target = target;
81+
animation.play();
82+
});
83+
});
84+
</script>
85+
</body>
86+
</html>

‎polymer-animation/polymer-animation-group.html‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
<link rel="import" href="polymer-animation.html">
2+
<polymer-element name="polymer-animation-group" extends="polymer-animation" on-animationchange="onAnimationChange">
3+
<script>
4+
(function() {
5+
var ANIMATION_GROUPS = {
6+
'par': ParGroup,
7+
'seq': SeqGroup
8+
};
9+
/**
10+
* @module Animation
11+
*/
12+
/**
13+
* Component for a group of animations.
14+
*
15+
* A fade in and move animation in sequence:
16+
*
17+
* <polymer-animation-group type="seq">
18+
* <polymer-animation>
19+
* <polymer-animation-prop name="opacity">
20+
* <polymer-animation-keyframe value="0.5" offset="0"></polymer-animation-keyframe>
21+
* <polymer-animation-keyframe value="1" offset="1"></polymer-animation-keyframe>
22+
* <polymer-animation-prop>
23+
* </polymer-animation>
24+
* <polymer-animation>
25+
* <polymer-animation-prop name="transform">
26+
* <polymer-animation-keyframe value="translateX(0)" offset="0"></polymer-animation-keyframe>
27+
* <polymer-animation-keyframe value="translateX(100px)" offset="1"></polymer-animation-keyframe>
28+
* <polymer-animation-prop>
29+
* </polymer-animation>
30+
* </polymer-animation-group>
31+
* @class polymer-animation-group
32+
*/
33+
Polymer('polymer-animation-group', {
34+
/**
35+
* If specified the target will be assigned to all child animations.
36+
* @property target
37+
* @type HTMLElement|Node
38+
* @optional
39+
*/
40+
publish: {
41+
targetSelector: '',
42+
target: null,
43+
duration: null,
44+
/**
45+
* Group type. 'par' for parallel and 'seq' for sequence.
46+
* @property type
47+
* @type String
48+
*/
49+
type: 'par'
50+
},
51+
ready: function() {
52+
// TODO: need to do this for now.
53+
this.super();
54+
},
55+
makeAnimation: function() {
56+
return new ANIMATION_GROUPS[this.type](this.childAnimations, this.timingProps);
57+
},
58+
completeApply: function() {
59+
this.doOnChildren(function(c) {
60+
c.completeApply();
61+
});
62+
Platform.flush();
63+
this.super();
64+
},
65+
onAnimationChange: function(inEvent, inSender) {
66+
if (inSender !== this) {
67+
this.asyncApply();
68+
}
69+
},
70+
typeChanged: function() {
71+
this.asyncApply();
72+
},
73+
targetChanged: function() {
74+
this.doOnChildren(function(c) {
75+
c.target = this.target;
76+
}.bind(this));
77+
},
78+
doOnChildren: function(inFn) {
79+
var children = this.children;
80+
if (!children.length) {
81+
children = this.webkitShadowRoot ? this.webkitShadowRoot.childNodes : [];
82+
}
83+
Array.prototype.forEach.call(children, function(c) {
84+
// TODO <template> in the way
85+
c.apply && inFn(c);
86+
}, this);
87+
},
88+
get childAnimations() {
89+
var list = [];
90+
this.doOnChildren(function(c) {
91+
if (c.animation) {
92+
list.push(c.animation);
93+
}
94+
});
95+
return list;
96+
}
97+
});
98+
})();
99+
</script>
100+
</polymer-element>

‎polymer-animation/polymer-animation-keyframe.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<polymer-element name="polymer-animation-keyframe" attributes="offset value easing">
2+
<script>
3+
/**
4+
* Defines the value at a keyframe for the containing `polymer-animation-prop`.
5+
* @class polymer-animation-keyframe
6+
*/
7+
/**
8+
* From 0 to 1.
9+
* @property offset
10+
* @type Number
11+
* @required
12+
*/
13+
/**
14+
* Property value at the animation offset.
15+
* @property value
16+
* @type String
17+
* @required
18+
*/
19+
/**
20+
* @property easing
21+
* @type String
22+
*/
23+
Polymer('polymer-animation-keyframe', {
24+
get properties() {
25+
var props = {
26+
// TODO bug in webanimations polyfill
27+
value: String(this.value) || "",
28+
};
29+
var more = this.offset !== null || this.easing;
30+
if (this.offset !== null) {
31+
props.offset = this.offset;
32+
}
33+
if (this.easing) {
34+
props.timingFunction = this.easing;
35+
}
36+
return more ? props : String(this.value);
37+
}
38+
});
39+
</script>
40+
</polymer-element>
41+

‎polymer-animation/polymer-animation-prop.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<link rel="import" href="polymer-animation-keyframe.html">
2+
<polymer-element name="polymer-animation-prop" attributes="name">
3+
<script>
4+
/**
5+
* An animated property. Its children should be `<polymer-animation-keyframe>`
6+
* elements specifying the keyframe values.
7+
*
8+
* Declaring an property to move down and then right:
9+
*
10+
* <polymer-animation-prop name="transform">
11+
* <polymer-animation-keyframe offset="0" value="translate(0,0)"></polymer-animation-keyframe>
12+
* <polymer-animation-keyframe offset="0.5" value="translate(0,100px)"></polymer-animation-keyframe>
13+
* <polymer-animation-keyframe offset="1" value="translate(100px,100px)"></polymer-animation-keyframe>
14+
* </polymer-animation-prop>
15+
* @class polymer-animation-prop
16+
*/
17+
/**
18+
* CSS property name.
19+
* @property name
20+
* @type String
21+
* @required
22+
*/
23+
Polymer('polymer-animation-prop');
24+
</script>
25+
</polymer-element>

0 commit comments

Comments
 (0)