-
Notifications
You must be signed in to change notification settings - Fork 0
/
demo.html
98 lines (94 loc) · 2.29 KB
/
demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<html>
<head>
<link rel="import" href="../iron-ajax/iron-ajax.html">
<link rel="import" href="../paper-material/paper-material.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="paper-people-list.html">
<style>
.container {
margin: 40px auto;
padding: 20px;
width: 400px;
display: flex;
}
.container paper-people-list {
flex: 1;
}
.container p {
margin-right: 20px;
}
paper-button {
display: block;
}
</style>
</head>
<body>
<template is="dom-bind" id="Demo">
<iron-ajax
id="githubSearch"
url="https://api.github.com/search/users"
method="GET"
params='[[params]]'
on-response="handleResponse"
on-error="handleError" ></iron-ajax>
<paper-material class="container">
<p>To</p>
<paper-people-list
data="{{data}}"
on-search-changed="handleChange"></paper-people-list>
</paper-material>
<paper-button raised on-tap="showData">Show me the data</paper-button>
<div class="output"></div>
</template>
<script>
Demo.data = [],
Demo.params = '';
/*
* Handles Success Response from the api
* and puts them in `data` attribute of
* paper-people-list
*/
Demo.handleResponse = function (e, detail) {
var data = e.detail.response.items.slice(0, 5),
tempArray = [];
data.forEach( function(el, index) {
tempArray.push({
"avatar": el.avatar_url,
"name": el.login,
"identifier": el.html_url
});
});
Demo.data = tempArray;
};
/*
* Handles Errors
*/
Demo.handleError = function (e, detail) {
console.log(e.detail.response);
};
/*
* Handles search parameter changes
* and requests data again
*/
Demo.handleChange = function (e, detail) {
if(detail.search != undefined) {
Demo.params = {
"q": detail.search
};
if(detail.search.length > 5) {
this.$.githubSearch.generateRequest();
}
}
};
Demo.showData = function (e, detail) {
var outputdata = document.querySelector("paper-people-list").people;
var output ='';
outputdata.forEach( function (val) {
output += "<p>" + val.identifier + "</p>";
});
document.querySelector('.output').innerHTML = output;
}
</script>
</body>
</html>