Skip to content

Commit 8f03df4

Browse files
jarrodekjarrodek
committed
New: Added demo page for version selection.
1 parent 8b68564 commit 8f03df4

File tree

3 files changed

+264
-0
lines changed

3 files changed

+264
-0
lines changed

‎demo/index.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,8 @@ <h1>API console demo pages</h1>
4848
<dd>API console as a standalone application using native platform</dd>
4949
<dt><a href="api-selector/index.html">api-selector/index.html</a></dt>
5050
<dd>Extending default view of the API console</dd>
51+
<dt><a href="version-selector/index.html">version-selector/index.html</a></dt>
52+
<dd>Extending console's main navigation</dd>
5153
</dl>
5254
</div>
5355
</body>

‎demo/version-selector/app.js‎

Lines changed: 185 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,185 @@
1+
/**
2+
* @license
3+
* Copyright 2017 The Advanced REST client authors <[email protected]>
4+
* Licensed under the Apache License, Version 2.0 (the "License"); you may not
5+
* use this file except in compliance with the License. You may obtain a copy of
6+
* the License at
7+
* http://www.apache.org/licenses/LICENSE-2.0
8+
* Unless required by applicable law or agreed to in writing, software
9+
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
10+
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
11+
* License for the specific language governing permissions and limitations under
12+
* the License.
13+
*/
14+
15+
/**
16+
* The following script will handle API console routing when using the console as
17+
* a standalone application.
18+
*
19+
* It uses native JavaScript APIs so it can be used outside Polymer scope.
20+
*
21+
* @author Pawel Psztyc <[email protected]>
22+
*/
23+
(function() {
24+
'use strict';
25+
// API Console namespace.
26+
var apiconsole = {};
27+
// Namespace for standalone application.
28+
apiconsole.app = {};
29+
/**
30+
* Initialize event listeners for console's path and page properties and observers
31+
* router data change.
32+
*/
33+
apiconsole.app.init = function() {
34+
apiconsole.app.setInitialRouteData();
35+
apiconsole.app.addParserListeners();
36+
apiconsole.app.observeRouteEvents();
37+
apiconsole.app.loadDefault();
38+
};
39+
40+
apiconsole.app.setInitialRouteData = function() {
41+
// sets the initial path for routing from external source.
42+
// The API console sets default path to `summary` after RAML change.
43+
var location = document.querySelector('app-location');
44+
var locationPath = location.path;
45+
if (!locationPath) {
46+
return;
47+
}
48+
var parsedPath = locationPath.replace(/\-/g, '.');
49+
if (parsedPath[0] === '/') {
50+
parsedPath = parsedPath.substr(1);
51+
}
52+
var _route = parsedPath.split('/');
53+
var page = _route[0];
54+
var path = _route[1];
55+
56+
apiconsole.app.__initialPage = page;
57+
apiconsole.app.__initialPath = path;
58+
};
59+
/**
60+
* Adds event listeres to elements that are related to RAML dataq parsing.
61+
*/
62+
apiconsole.app.addParserListeners = function() {
63+
document.querySelector('raml-js-parser')
64+
.addEventListener('api-parse-ready', function(e) {
65+
document.querySelector('raml-json-enhance')
66+
.json = e.detail.json.specification;
67+
});
68+
69+
document.getElementById('versionSelector')
70+
.addEventListener('change', function() {
71+
document.querySelector('raml-js-parser').loadApi(this.value);
72+
document.getElementById('loadingApi').active = true;
73+
});
74+
75+
window.addEventListener('raml-json-enhance-ready', function(e) {
76+
var apiConsole = document.querySelector('api-console');
77+
apiConsole.raml = e.detail.json;
78+
document.getElementById('loadingApi').active = false;
79+
if (apiconsole.app.__initialPage && apiconsole.app.__initialPage !== apiConsole.page) {
80+
apiconsole.app.pageChanged(apiconsole.app.__initialPage);
81+
apiconsole.app.__initialPage = undefined;
82+
}
83+
if (apiconsole.app.__initialPath && apiconsole.app.__initialPath !== apiConsole.path) {
84+
apiconsole.app.pathChanged(apiconsole.app.__initialPath);
85+
apiconsole.app.__initialPath = undefined;
86+
}
87+
});
88+
};
89+
/**
90+
* Adds event listeres to elements that are related to the routing:
91+
* app-location, app-route and api-console.
92+
*/
93+
apiconsole.app.observeRouteEvents = function() {
94+
var apiConsole = document.querySelector('api-console');
95+
var location = document.querySelector('app-location');
96+
97+
apiConsole.addEventListener('path-changed', apiconsole.app._pathChanged);
98+
apiConsole.addEventListener('page-changed', apiconsole.app._pageChanged);
99+
location.addEventListener('route-changed', apiconsole.app._routeChanged);
100+
};
101+
// Event handler for the path change.
102+
apiconsole.app._pathChanged = function(e) {
103+
apiconsole.app.pathChanged(e.detail.value);
104+
};
105+
// Called when path changed from the api-console.
106+
apiconsole.app.pathChanged = function(path) {
107+
if (!path) {
108+
return;
109+
}
110+
var location = document.querySelector('app-location');
111+
var parsedPath = path.replace(/\./g, '-');
112+
var newPath = '/docs/' + parsedPath;
113+
if (newPath !== location.path) {
114+
location.set('path', newPath);
115+
}
116+
};
117+
// Event handler for the page change.
118+
apiconsole.app._pageChanged = function(e) {
119+
apiconsole.app.pageChanged(e.detail.value);
120+
};
121+
// Called when page change.
122+
apiconsole.app.pageChanged = function(page) {
123+
var apiConsole = document.querySelector('api-console');
124+
if (apiConsole.page !== page) {
125+
apiConsole.page = page;
126+
}
127+
};
128+
// Event handler for the route change.
129+
apiconsole.app._routeChanged = function(e) {
130+
apiconsole.app.routeChanged(e.detail.value);
131+
};
132+
// Updates api console path if different than curent URL
133+
apiconsole.app.routeChanged = function(route) {
134+
var locationPath = route.path;
135+
if (!locationPath || locationPath === '/') {
136+
document.querySelector('app-location').set('path', '/docs');
137+
return;
138+
}
139+
var parsedPath = locationPath.replace(/\-/g, '.');
140+
if (parsedPath[0] === '/') {
141+
parsedPath = parsedPath.substr(1);
142+
}
143+
var _route = parsedPath.split('/');
144+
var page = _route[0];
145+
var path = _route[1];
146+
var apiConsole = document.querySelector('api-console');
147+
if (apiConsole.page !== page) {
148+
apiConsole.page = page;
149+
}
150+
if (apiConsole.path !== path) {
151+
apiConsole.path = path;
152+
}
153+
};
154+
/**
155+
* Reads page name and the path from location path.
156+
*
157+
* @param {String} locationPath Current path read from path change event or read fomr the
158+
* `app-location` element.
159+
*/
160+
apiconsole.app._readPagePath = function(locationPath) {
161+
var parsedPath = locationPath.replace(/\-/g, '.');
162+
if (parsedPath[0] === '/') {
163+
parsedPath = parsedPath.substr(1);
164+
}
165+
var _route = parsedPath.split('/');
166+
var page = _route[0];
167+
var path = _route[1];
168+
return {
169+
page: page,
170+
path: path
171+
};
172+
};
173+
174+
apiconsole.app.loadDefault = function() {
175+
var url = document.getElementById('versionSelector').value;
176+
document.querySelector('raml-js-parser').loadApi(url);
177+
document.getElementById('loadingApi').active = true;
178+
};
179+
180+
// Notifys user when something went wrong...
181+
apiconsole.app.notifyInitError = function(message) {
182+
window.alert('Cannot initialize API console. ' + message);
183+
};
184+
apiconsole.app.init();
185+
})();

‎demo/version-selector/index.html‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
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+
13+
<head>
14+
<meta charset="utf-8">
15+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
16+
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
17+
<title>API Console - additional content</title>
18+
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
19+
<link rel="import" href="../../../app-route/app-location.html">
20+
<link rel="import" href="../../../raml-json-enhance/raml-json-enhance.html">
21+
<link rel="import" href="../../../raml-js-parser/raml-js-parser.html">
22+
<link rel="import" href="../../../font-roboto/roboto.html">
23+
<link rel="import" href="../../../paper-menu/paper-menu.html">
24+
<link rel="import" href="../../../paper-item/paper-item.html">
25+
<link rel="import" href="../../api-console.html">
26+
27+
<style is="custom-style">
28+
:root {
29+
--api-selector-width: 220px;
30+
}
31+
html,
32+
body {
33+
height: 100%;
34+
background-color: #fff;
35+
}
36+
37+
body {
38+
margin: 0;
39+
font-family: "Roboto", "Open Sans", sans-serif;
40+
-webkit-font-smoothing: antialiased;
41+
min-height: 100vh;
42+
@apply(--layout-vertical);
43+
}
44+
45+
api-console {
46+
@apply(--layout-fit);
47+
background-color: #fff;
48+
}
49+
50+
api-console {
51+
--api-console-main-container: {
52+
position: relative;
53+
@apply --layout-horizontal;
54+
};
55+
56+
--api-console-pages-container: {
57+
@apply --layout-flex;
58+
};
59+
}
60+
</style>
61+
</head>
62+
63+
<body unresolved>
64+
<app-location use-hash-as-path></app-location>
65+
<raml-json-enhance></raml-json-enhance>
66+
<raml-js-parser json></raml-js-parser>
67+
<api-console>
68+
<paper-spinner nav id="loadingApi" title="Loading API"></paper-spinner>
69+
<select id="versionSelector" nav title="Select API versions" value="https://cdn.rawgit.com/advanced-rest-client/echo-advancedrestclient-com/01671154/api/api.raml">
70+
<option value="https://cdn.rawgit.com/advanced-rest-client/echo-advancedrestclient-com/01671154/api/api.raml">Latest</option>
71+
<option value="https://cdn.rawgit.com/advanced-rest-client/raml-example-api/master/api.raml">v1.2</option>
72+
</select>
73+
</api-console>
74+
<script src="app.js"></script>
75+
</body>
76+
77+
</html>

0 commit comments

Comments
 (0)