Skip to content
This repository was archived by the owner on Oct 4, 2023. It is now read-only.

Commit a0a835f

Browse files
IchordeDionysosIchordeDionysos
committed
rest-api-doc v2 w/ responsive page
1 parent d59475d commit a0a835f

10 files changed

+586
-79
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
bower_components
2+
.idea

‎bower.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,10 @@
1919
],
2020
"dependencies": {
2121
"polymer": "Polymer/polymer#^1.1.0",
22-
"paper-input": "^1.1.11"
22+
"paper-input": "^1.1.11",
23+
"paper-drawer-panel": "^1.0.10",
24+
"paper-icon-button": "^1.1.3",
25+
"paper-item": "^1.2.1"
2326
},
2427
"devDependencies": {
2528
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",

‎demo/doc.html

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!doctype html>
2+
<!--
3+
@license
4+
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
5+
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
6+
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
7+
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
8+
Code distributed by Google as part of the polymer project is also
9+
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10+
-->
11+
<html>
12+
<head>
13+
<meta charset="utf-8">
14+
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
15+
<title>rest-api-doc Demo</title>
16+
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
17+
<link rel="import" href="../rest-api-doc.html">
18+
</head>
19+
<body unresolved>
20+
21+
<p>An example of <code>&lt;rest-api-doc&gt;</code>:</p>
22+
23+
<rest-api-doc url="http://api.apnea-core.com/login" method="post" action="signin">
24+
Login to APNEA-CORE and retieve access token.
25+
</rest-api-doc>
26+
27+
<script>
28+
var seedElement = document.querySelector('rest-api-doc');
29+
seedElement.body = [{
30+
key: 'mail',
31+
type: 'string',
32+
optional: false
33+
},{
34+
key: 'password',
35+
type: 'string',
36+
optional: false
37+
},{
38+
key: 'type',
39+
type: 'string',
40+
values: 'admin, organizer, judge',
41+
optional: false
42+
}];
43+
</script>
44+
45+
</body>
46+
</html>

‎demo/index.html

+38-30
Original file line numberDiff line numberDiff line change
@@ -9,38 +9,46 @@
99
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
1010
-->
1111
<html>
12-
<head>
13-
<meta charset="utf-8">
14-
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
15-
<title>rest-api-doc Demo</title>
16-
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
17-
<link rel="import" href="../rest-api-doc.html">
18-
</head>
19-
<body unresolved>
12+
<head>
13+
<meta charset="utf-8">
14+
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
15+
<title>rest-api-doc Demo</title>
16+
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
17+
<link rel="import" href="../rest-api-page.html">
18+
<link rel="import" href="../rest-api-doc.html">
19+
</head>
20+
<body unresolved>
2021

21-
<p>An example of <code>&lt;rest-api-doc&gt;</code>:</p>
22+
<p>An example of <code>&lt;rest-api-page&gt;</code>:</p>
2223

23-
<rest-api-doc url="http://api.apnea-core.com/login" method="post" action="signin">
24-
Login to APNEA-CORE and retieve access token.
25-
</rest-api-doc>
24+
<rest-api-page base-url="http://api.xtrm-sports.com">
25+
<rest-api-doc title="Get Location" method="GET" url="/get">
26+
<rest-api-param key="id" type="Number" values="1, 12, 30">The ID for the location to fetch.</rest-api-param>
27+
<rest-api-param key="language" type="String" optional values="de, en">The requested language for the result.</rest-api-param>
28+
<rest-api-explanation>Get every location by ID.</rest-api-explanation>
29+
</rest-api-doc>
30+
<rest-api-doc title="Search"></rest-api-doc>
31+
<rest-api-doc title="List Locations"></rest-api-doc>
32+
<rest-api-doc title="Add Location"></rest-api-doc>
33+
</rest-api-page>
2634

27-
<script>
28-
var seedElement = document.querySelector('rest-api-doc');
29-
seedElement.body = [{
30-
key: 'mail',
31-
type: 'string',
32-
optional: false
33-
},{
34-
key: 'password',
35-
type: 'string',
36-
optional: false
37-
},{
38-
key: 'type',
39-
type: 'string',
40-
values: 'admin, organizer, judge',
41-
optional: false
42-
}];
43-
</script>
35+
<script>
36+
var seedElement = document.querySelector('rest-api-page');
37+
/*seedElement.body = [{
38+
key: 'mail',
39+
type: 'string',
40+
optional: false
41+
},{
42+
key: 'password',
43+
type: 'string',
44+
optional: false
45+
},{
46+
key: 'type',
47+
type: 'string',
48+
values: 'admin, organizer, judge',
49+
optional: false
50+
}];*/
51+
</script>
4452

45-
</body>
53+
</body>
4654
</html>

‎doc-helper.html

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
<link rel="import" href="rest-api-page.html">
2+
<link rel="import" href="rest-api-doc.html">

‎index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
match the folder name, add a src="&lt;main-component&gt;.html" attribute,
2424
where &lt;main-component&gt;.html" is a file that imports all of the
2525
components you want documented. -->
26-
<iron-component-page></iron-component-page>
26+
<iron-component-page src="doc-helper.html"></iron-component-page>
2727

2828
</body>
2929
</html>

‎rest-api-doc.html

+49-47
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
2323
@group REST Elements
2424
@element rest-api-doc
25-
@demo demo/index.html
25+
@demo demo/doc.html
2626
@hero hero.svg
2727
-->
2828
<dom-module id="rest-api-doc">
@@ -49,17 +49,6 @@
4949
#description {
5050
padding: 8px;
5151
}
52-
paper-input {
53-
display: inline-block;
54-
}
55-
.keyValueHeader {
56-
background-color: rgb(220, 220, 220);
57-
padding: 8px;
58-
margin: 8px 0;
59-
}
60-
.keyValueContainer {
61-
margin-left: 16px;
62-
}
6352
paper-button {
6453
position: absolute;
6554
top: 8px;
@@ -73,44 +62,11 @@
7362
padding: 8px;
7463
}
7564
</style>
76-
<div id="request">
65+
<!--<div id="request">
7766
<span id="method">[[method]]</span>
7867
<span id="url">[[url]]</span>
7968
</div>
80-
<div id="description"><content></content></div>
81-
<div id="params">
82-
<template is="dom-if" if="[[params]]">
83-
<div class="keyValueHeader">Params</div>
84-
<div class="keyValueContainer">
85-
<template id="paramRepeat" is="dom-repeat" items="[[params]]">
86-
<paper-input label="[[item.key]]"></paper-input>
87-
</template>
88-
</template>
89-
</div>
90-
</div>
91-
<div id="headers">
92-
<template is="dom-if" if="[[headers]]">
93-
<div class="keyValueHeader">Headers</div>
94-
<div class="keyValueContainer">
95-
<template id="headerRepeat" is="dom-repeat" items="[[headers]]">
96-
<paper-input label="[[item.key]]"></paper-input>
97-
</template>
98-
</template>
99-
</div>
100-
</div>
101-
<div id="body">
102-
<template is="dom-if" if="[[body]]">
103-
<div class="keyValueHeader">Body</div>
104-
<div class="keyValueContainer">
105-
<template id="bodyRepeat" is="dom-repeat" items="[[body]]">
106-
<paper-input label="[[item.key]]"></paper-input>
107-
</template>
108-
</template>
109-
</div>
110-
</div>
111-
<paper-button raised on-tap="sendRequest">Send Request</paper-button>
112-
<div class="keyValueHeader">Response</div>
113-
<x-json id="jsonResponse"></x-json>
69+
<div id="description"><content></content></div>-->
11470
</template>
11571
</dom-module>
11672

@@ -122,6 +78,11 @@
12278

12379
properties: {
12480

81+
/**
82+
* The `title` of the request
83+
*/
84+
title: String,
85+
12586
/**
12687
* The `url` to send the request to
12788
*/
@@ -153,6 +114,8 @@
153114
*/
154115
body: Array,
155116

117+
explanation: String,
118+
156119
/**
157120
* The `response` of the HTTP Request after it has been performed
158121
*/
@@ -162,6 +125,45 @@
162125
}
163126
},
164127

128+
ready: function () {
129+
this.set('params', []);
130+
this.set('headers', []);
131+
this.set('body', null);
132+
this.set('explanation', '');
133+
134+
this._observer = Polymer.dom(this).observeNodes(function (info) {
135+
this._setRequestInfos();
136+
});
137+
},
138+
139+
_setRequestInfos: function () {
140+
var params = this.queryAllEffectiveChildren('rest-api-param');
141+
var headers = this.queryAllEffectiveChildren('rest-api-header');
142+
var body = this.queryAllEffectiveChildren('rest-api-body');
143+
var kvBody = this.queryAllEffectiveChildren('rest-api-kv-body');
144+
var explanation = this.queryAllEffectiveChildren('rest-api-explanation');
145+
// Check for duplicate body declaration
146+
if (body.length > 0 && kvBody > 0) {
147+
console.warn('Only use either <rest-api-body> or <rest-api-kv-body>, ' +
148+
'but not both for one api. Now using: <rest-api-body>');
149+
this.set('body', body[0]);
150+
} else if (body.length > 0) {
151+
this.set('body', body[0]);
152+
} else if (kvBody.length > 0) {
153+
this.set('body', kvBody);
154+
} else {
155+
this.set('body', null);
156+
}
157+
158+
this.set('params', params);
159+
this.set('headers', headers);
160+
this.set('explanation', explanation[0].innerHTML);
161+
console.log(this.params);
162+
console.log(this.headers);
163+
console.log(this.explanation);
164+
console.log(this.body);
165+
},
166+
165167
sendRequest: function() {
166168
var url = this.url + '?';
167169
var method = this.method.toUpperCase();

0 commit comments

Comments
 (0)