Skip to content

Commit 592968e

Browse files
anthonykoerberanthonykoerber
committed
polymer 1.2.3 WIP
1 parent 9c51fbe commit 592968e

5 files changed

Lines changed: 227 additions & 209 deletions

File tree

‎bower.json‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,12 +37,16 @@
3737
"eventdispatcherjs": "mrdoob/eventdispatcher.js#57d849444a",
3838
"moment": "~2.10.6",
3939
"moment-range": "~2.0.3",
40-
"polymer": "Polymer/polymer#1.1.3",
41-
"webcomponentsjs": "webcomponents/webcomponentsjs#0.7.12",
40+
"polymer": "Polymer/polymer#1.2.3",
41+
"webcomponentsjs": "webcomponents/webcomponentsjs#0.7.15",
4242
"zousan": "~1.3.0"
4343
},
4444
"devDependencies": {
4545
"web-component-tester": "~3.3.22",
4646
"bourbon": "~4.2.4"
47+
},
48+
"resolutions": {
49+
"webcomponentsjs": "^0.7.18",
50+
"polymer": "1.2.3"
4751
}
4852
}

‎src/mm-ajax/index.html‎

Lines changed: 120 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -1,129 +1,131 @@
11
<!DOCTYPE html>
22
<html>
3-
<head>
4-
<style is="custom-style">
5-
div {
6-
width: 600px;
7-
height: 400px;
8-
overflow: scroll;
9-
display: block;
10-
background-color: #ECECEC;
11-
border-bottom: 1px dashed #CCC;
12-
padding: 15px;
13-
margin-bottom: 10px;
14-
}
15-
</style>
3+
<head>
4+
<style is="custom-style">
5+
div {
6+
width: 600px;
7+
height: 400px;
8+
overflow: scroll;
9+
display: block;
10+
background-color: #ECECEC;
11+
border-bottom: 1px dashed #CCC;
12+
padding: 15px;
13+
margin-bottom: 10px;
14+
}
15+
</style>
1616
<script language="javascript" src="../../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
17-
<link rel="import" href="mm-ajax.html"/>
18-
<link rel="import" href="../mm-textarea/mm-textarea.html"/>
19-
<link rel="import" href="../mm-input/mm-input.html"/>
20-
<link rel="import" href="../mm-button/mm-button.html"/>
21-
</head>
22-
<body>
17+
<link rel="import" href="mm-ajax.html"/>
18+
<link rel="import" href="../mm-textarea/mm-textarea.html"/>
19+
<link rel="import" href="../mm-input/mm-input.html"/>
20+
<link rel="import" href="../mm-button/mm-button.html"/>
21+
</head>
22+
<body>
2323

24-
<dom-module id="test-result">
25-
<style>
26-
:host {
27-
display: block;
28-
}
29-
#log {
30-
background-color: #CCC;
31-
border-radius: 4px 4px;
32-
width: 300px;
33-
height: 100px;
34-
display: block;
35-
overflow-y: scroll;
36-
}
37-
</style>
38-
<template>
39-
<mm-ajax id="ajax" url="{{url}}" method="GET" params="{{params}}" auto response="{{response}}" on-data-error="{{log}}" on-data-ready="{{log}}" on-data-result="{{log}}" on-data-progress="{{log}}" on-data-abort="{{log}}" debug></mm-ajax>
40-
<mm-input id="url" value="{{url}}"></mm-input>
41-
<mm-input id="params" value="{{params}}"></mm-input>
42-
<mm-button id="btn" on-click="{{update}}">
43-
<label>
44-
Go!
45-
</label>
46-
</mm-button>
47-
<mm-textarea value="{{result}}"></mm-textarea>
48-
<div id="log"></div>
24+
<dom-module id="test-result">
25+
<style>
26+
:host {
27+
display: block;
28+
}
29+
#log {
30+
background-color: #CCC;
31+
border-radius: 4px 4px;
32+
width: 300px;
33+
height: 100px;
34+
display: block;
35+
overflow-y: scroll;
36+
}
37+
</style>
38+
<template>
39+
<mm-ajax id="ajax" url="{{url}}" method="GET" params="{{params}}" auto response="{{response}}" on-data-error="{{log}}" on-data-ready="{{log}}" on-data-result="{{log}}" on-data-progress="{{log}}" on-data-abort="{{log}}" debug></mm-ajax>
40+
<mm-input id="url" value="{{url}}"></mm-input>
41+
<mm-input id="params" value="{{params}}"></mm-input>
42+
<mm-button id="btn" on-click="update">
43+
<label>
44+
Go!
45+
</label>
46+
</mm-button>
47+
<mm-textarea value="{{result}}"></mm-textarea>
48+
<div id="log"></div>
4949

50-
</template>
51-
<script type="text/javascript">
52-
Polymer({
53-
is:'test-result',
54-
url: "http://localhost:8000/ajax",
55-
params: '[{"name":"cake","value":100}]',
56-
log: function(e) {
57-
console.log("log",e);
58-
this.$.log.innerHTML += "[event] " + e.type + "<br/>";
59-
},
60-
update: function() {
61-
this.$.ajax.exec();
62-
},
63-
responseChanged: function(_old, _new) {
64-
if (typeof this.response !== "string") {
65-
this.result = JSON.stringify(this.response);
66-
} else {
67-
this.result = this.response;
68-
}
69-
}
70-
});
71-
</script>
72-
</dom-module>
50+
</template>
51+
</dom-module>
7352

74-
<div><test-result></test-result></div>
53+
<div><test-result></test-result></div>
7554

76-
<div>
77-
<mm-ajax id="a1" url="http://localhost:8000/ajax" method="GET">
78-
</mm-ajax>
79-
<mm-button id="b1">
80-
<label>GET!</label>
81-
</mm-button>
82-
</div>
83-
<div>
84-
<mm-ajax id="a2" url="http://localhost:8000/ajax" method="POST"></mm-ajax>
85-
<mm-button id="b2">
86-
<label>POST!</label>
87-
</mm-button>
88-
</div>
89-
<div>
90-
<mm-ajax id="a3" url="http://localhost:8000/ajax" method="POST"></mm-ajax>
91-
<mm-button id="b3">
92-
<label>POST JSON!</label>
93-
</mm-button>
94-
</div>
95-
<script>
96-
window.addEventListener("WebComponentsReady", function(e) {
97-
var a1 = document.querySelector("#a1"),
98-
b1 = document.querySelector("#b1"),
99-
a2 = document.querySelector("#a2"),
100-
b2 = document.querySelector("#b2"),
101-
a3 = document.querySelector("#a3"),
102-
b3 = document.querySelector("#b3");
55+
<div>
56+
<mm-ajax id="a1" url="http://localhost:8000/ajax" method="GET">
57+
</mm-ajax>
58+
<mm-button id="b1">
59+
<label>GET!</label>
60+
</mm-button>
61+
</div>
62+
<div>
63+
<mm-ajax id="a2" url="http://localhost:8000/ajax" method="POST"></mm-ajax>
64+
<mm-button id="b2">
65+
<label>POST!</label>
66+
</mm-button>
67+
</div>
68+
<div>
69+
<mm-ajax id="a3" url="http://localhost:8000/ajax" method="POST"></mm-ajax>
70+
<mm-button id="b3">
71+
<label>POST JSON!</label>
72+
</mm-button>
73+
</div>
74+
<script>
10375

104-
b1.addEventListener("click", function(){
105-
a1.exec();
106-
});
76+
HTMLImports.whenReady(function(){
77+
Polymer({
78+
is:'test-result',
79+
url: "http://localhost:8000/ajax",
80+
params: '[{"name":"cake","value":100}]',
81+
log: function(e) {
82+
console.log("log",e);
83+
this.$.log.innerHTML += "[event] " + e.type + "<br/>";
84+
},
85+
update: function() {
86+
this.$.ajax.exec();
87+
},
88+
responseChanged: function(_old, _new) {
89+
if (typeof this.response !== "string") {
90+
this.result = JSON.stringify(this.response);
91+
} else {
92+
this.result = this.response;
93+
}
94+
}
95+
});
96+
});
97+
98+
window.addEventListener("WebComponentsReady", function(e) {
99+
var a1 = document.querySelector("#a1"),
100+
b1 = document.querySelector("#b1"),
101+
a2 = document.querySelector("#a2"),
102+
b2 = document.querySelector("#b2"),
103+
a3 = document.querySelector("#a3"),
104+
b3 = document.querySelector("#b3");
107105

108-
b2.addEventListener("click", function() {
109-
a2.body = {
110-
test:"help computer",
111-
num:1234,
112-
zappo:"kerpow"
113-
};
114-
a2.exec();
115-
});
106+
b1.addEventListener("click", function(){
107+
a1.exec();
108+
});
116109

117-
b3.addEventListener("click", function() {
118-
a3.body = JSON.stringify({
119-
test:"help computer",
120-
num:1234,
121-
zappo:"kerpow"
122-
});
123-
console.log(a3.body);
124-
a3.exec();
125-
});
126-
});
127-
</script>
128-
</body>
110+
b2.addEventListener("click", function() {
111+
a2.body = {
112+
test:"help computer",
113+
num:1234,
114+
zappo:"kerpow"
115+
};
116+
a2.exec();
117+
});
118+
119+
b3.addEventListener("click", function() {
120+
a3.body = JSON.stringify({
121+
test:"help computer",
122+
num:1234,
123+
zappo:"kerpow"
124+
});
125+
console.log(a3.body);
126+
a3.exec();
127+
});
128+
});
129+
</script>
130+
</body>
129131
</html>

0 commit comments

Comments
 (0)