Skip to content

Commit a2f5304

Browse files
jarrodekjarrodek
committed
chore: started working on separating views for the app and the element
1 parent 391bba1 commit a2f5304

7 files changed

Lines changed: 535 additions & 514 deletions

File tree

‎api-console-app.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,4 +12,4 @@ License for the specific language governing permissions and limitations under
1212
the License.
1313
*/
1414
import { ApiConsoleApp } from './src/ApiConsoleApp.js';
15-
window.customElements.define('api-console', ApiConsoleApp);
15+
window.customElements.define('api-console-app', ApiConsoleApp);

‎demo/demo-base.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -148,7 +148,7 @@ export class DemoBase {
148148
}
149149

150150
_setAmfModel(model, old) {
151-
const apic = document.querySelector('api-console');
151+
const apic = document.querySelector('api-console,api-console-app');
152152
apic.amf = model;
153153
if (old) {
154154
apic.selectedShape = 'summary';

‎demo/element/app.js‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import { html } from 'lit-html';
2+
import '@anypoint-web-components/anypoint-dropdown/anypoint-dropdown.js';
3+
import '@anypoint-web-components/anypoint-listbox/anypoint-listbox.js';
4+
import '@anypoint-web-components/anypoint-item/anypoint-item.js';
5+
import '../../api-console.js';
6+
import { DemoBase } from '../demo-base.js';
7+
8+
class ApicApplication extends DemoBase {
9+
constructor() {
10+
super();
11+
this.apis = [
12+
['google-drive-api', 'Google Drive API'],
13+
['httpbin', 'HTTPbin API'],
14+
['exchange-experience-api', 'Exchange Experience API'],
15+
['data-type-fragment', 'RAML data type fragment'],
16+
['demo-api', 'Demo API']
17+
];
18+
19+
this.toggleConsoleMenu = this.toggleConsoleMenu.bind(this);
20+
}
21+
22+
demoTemplate() {
23+
return html`
24+
<section class="demo-section">
25+
<div class="header">
26+
<anypoint-icon-button
27+
aria-label="Activate to open API console menu"
28+
title="Open API console menu"
29+
@click="${this.toggleConsoleMenu}">
30+
<iron-icon icon="arc:menu"></iron-icon>
31+
</anypoint-icon-button>
32+
<h1>API Console as an element</h1>
33+
<anypoint-icon-button
34+
aria-label="Activate to open API selection menu"
35+
title="Open API selection menu"
36+
@click="${this.openApiSelector}">
37+
<iron-icon icon="arc:more-vert"></iron-icon>
38+
</anypoint-icon-button>
39+
</div>
40+
41+
<div class="wrapper">
42+
<api-console
43+
redirecturi="https://auth.advancedrestclient.com/oauth-popup.html"
44+
oauth2clientid="821776164331-rserncqpdsq32lmbf5cfeolgcoujb6fm.apps.googleusercontent.com">
45+
</api-console>
46+
</div>
47+
48+
${this.apiSelectorTemplate()}
49+
<section>
50+
`;
51+
}
52+
53+
firstRendered() {
54+
this.selectFirstApi();
55+
}
56+
57+
toggleConsoleMenu() {
58+
const apic = document.querySelector('api-console');
59+
apic.navigationOpened = !apic.navigationOpened;
60+
}
61+
}
62+
63+
const demo = new ApicApplication();
64+
demo.initialize();
65+
demo.render();
66+
window.demo = demo;

‎demo/element/index.html‎

Lines changed: 69 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -1,142 +1,88 @@
11
<!doctype html>
2-
<html>
2+
<html lang="en">
3+
34
<head>
45
<meta charset="utf-8">
56
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
67
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
7-
<title>API Console</title>
8-
9-
<script src="../../../@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
10-
<script src="../../../web-animations-js/web-animations-next.min.js"></script>
11-
12-
<script type="module" src="../../../@webcomponents/shadycss/entrypoints/apply-shim.js"></script>
13-
<script type="module" src="../../../@polymer/polymer/lib/elements/custom-style.js"></script>
14-
<script type="module" src="../../../@polymer/polymer/lib/elements/dom-bind.js"></script>
15-
<script type="module" src="../../../@polymer/iron-demo-helpers/demo-pages-shared-styles.js"></script>
16-
<script type="module" src="../../../@polymer/iron-demo-helpers/demo-snippet.js"></script>
17-
<script type="module" src="../../../@polymer/paper-styles/typography.js"></script>
18-
<script type="module" src="../../../@api-components/raml-aware/raml-aware.js"></script>
19-
<script type="module" src="../../../@polymer/paper-icon-button/paper-icon-button.js"></script>
20-
<script type="module" src="../../../@advanced-rest-client/xhr-simple-request/xhr-simple-request.js"></script>
21-
<script type="module" src="../../../@advanced-rest-client/oauth-authorization/oauth1-authorization.js"></script>
22-
<script type="module" src="../../../@advanced-rest-client/oauth-authorization/oauth2-authorization.js"></script>
23-
<script type="module" src="../../../@api-components/api-console-default-theme/api-console-default-theme.js"></script>
24-
<script type="module" src="../../api-console.js"></script>
25-
<script type="module" src="../parser-element/parser-element.js"></script>
26-
27-
<!-- CodeMirror support, cannot be imported as a ES6 module -->
28-
<script src="../../../jsonlint/lib/jsonlint.js"></script>
29-
<script src="../../../codemirror/lib/codemirror.js"></script>
30-
<script src="../../../codemirror/addon/mode/loadmode.js"></script>
31-
<script src="../../../codemirror/mode/meta.js"></script>
32-
<script src="../../../codemirror/mode/javascript/javascript.js"></script>
33-
<script src="../../../codemirror/mode/xml/xml.js"></script>
34-
<script src="../../../codemirror/mode/htmlmixed/htmlmixed.js"></script>
35-
<script src="../../../codemirror/addon/lint/lint.js"></script>
36-
<script src="../../../codemirror/addon/lint/json-lint.js"></script>
37-
<script src="../../../@advanced-rest-client/code-mirror-hint/headers-addon.js"></script>
38-
<script src="../../../@advanced-rest-client/code-mirror-hint/show-hint.js"></script>
39-
<script src="../../../@advanced-rest-client/code-mirror-hint/hint-http-headers.js"></script>
8+
<title>API Console element demo</title>
9+
<script src="../../node_modules/web-animations-js/web-animations.min.js"></script>
10+
<script src="../../node_modules/web-animations-js/web-animations-next.min.js"></script>
11+
<script src="../../node_modules/cryptojslib/components/core.js"></script>
12+
<script src="../../node_modules/cryptojslib/rollups/sha1.js"></script>
13+
<script src="../../node_modules/cryptojslib/components/enc-base64-min.js"></script>
14+
<script src="../../node_modules/cryptojslib/rollups/md5.js"></script>
15+
<script src="../../node_modules/cryptojslib/rollups/hmac-sha1.js"></script>
16+
<script src="../../node_modules/jsrsasign/lib/jsrsasign-rsa-min.js"></script>
17+
<!--
18+
Previously this was included into the compoennt.
19+
Since compoennts are ES6 modules this libraries cannot be loaded into
20+
the component as they do not export anything and won't set global variable.
21+
-->
22+
<script src="../../node_modules/jsonlint/lib/jsonlint.js"></script>
23+
<script src="../../node_modules/codemirror/lib/codemirror.js"></script>
24+
<script src="../../node_modules/codemirror/addon/mode/loadmode.js"></script>
25+
<script src="../../node_modules/codemirror/mode/meta.js"></script>
26+
<script src="../../node_modules/codemirror/mode/javascript/javascript.js"></script>
27+
<script src="../../node_modules/codemirror/mode/xml/xml.js"></script>
28+
<script src="../../node_modules/codemirror/mode/htmlmixed/htmlmixed.js"></script>
29+
<script src="../../node_modules/codemirror/addon/lint/lint.js"></script>
30+
<script src="../../node_modules/codemirror/addon/lint/json-lint.js"></script>
31+
<!--
32+
From the inside of a web component it is hard to determine where
33+
scripts are actually located. This should be set if the page won't load all possible
34+
scripts at run time. The component will download the "mode" from this location.
35+
-->
4036
<script>
4137
/* global CodeMirror */
42-
CodeMirror.modeURL = '../../../codemirror/mode/%N/%N.js';
38+
CodeMirror.modeURL = '../../node_modules/codemirror/mode/%N/%N.js';
4339
</script>
44-
<!-- Authorization panel libraries, cannot be imported as a ES6 module -->
45-
<script src="../../../cryptojslib/components/core.js"></script>
46-
<script src="../../../cryptojslib/rollups/sha1.js"></script>
47-
<script src="../../../cryptojslib/components/enc-base64-min.js"></script>
48-
<script src="../../../cryptojslib/rollups/md5.js"></script>
49-
<script src="../../../cryptojslib/rollups/hmac-sha1.js"></script>
50-
<script src="../../../jsrsasign/lib/jsrsasign-rsa-min.js"></script>
51-
52-
<custom-style>
53-
<style is="custom-style" include="demo-pages-shared-styles">
54-
html,
55-
body {
56-
margin: 0;
57-
padding: 0;
58-
background-color: #F0F4C3;
59-
}
6040

61-
:root {
62-
--paper-checkbox-unchecked-color: #fff;
63-
--paper-checkbox-label-color: #fff;
64-
}
41+
<link rel="stylesheet" type="text/css" crossorigin="anonymous" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700|Roboto:400,300,300italic,400italic,500,500italic,700,700italic">
42+
<link rel="stylesheet" type="text/css" href="../api-console-master-styles.css">
43+
<style>
44+
html, body {
45+
margin: 0;
46+
padding: 0;
47+
font-family: 'Roboto', 'Noto', sans-serif;
48+
font-size: 15px;
49+
color: #424242;
50+
height: 100%;
51+
}
6552

66-
api-console {
67-
min-height: calc(100vh - 140px);
68-
background-color: #fff;
69-
}
53+
.api-dropdown {
54+
--anypoint-dropdown-menu-background-color: #1c2831;
55+
--anypoint-dropdown-menu-label-color: #fff;
56+
}
7057

71-
.apic-container {
72-
position: relative;
73-
max-width: 700px;
74-
margin: 0px auto;
75-
}
58+
h1 {
59+
font-size: 34px;
60+
font-weight: 200;
61+
line-height: 28px;
62+
box-sizing: border-box;
63+
margin: 0;
64+
flex: 1;
65+
}
7666

77-
header {
78-
max-width: 700px;
79-
margin: 0 auto;
80-
}
67+
.demo-section {
68+
width: 60%;
69+
margin: 40px auto;
70+
}
8171

82-
h1 {
83-
@apply --paper-font-display1;
84-
}
72+
.wrapper {
73+
position: relative;
74+
}
8575

86-
[unresolved] .loader {
87-
display: block;
88-
}
89-
90-
.loader {
91-
max-width: 700px;
92-
margin: 0 auto;
93-
display: none;
94-
}
95-
</style>
96-
</custom-style>
76+
.header {
77+
display: flex;
78+
align-items: center;;
79+
}
80+
</style>
9781
</head>
9882

99-
<body unresolved>
100-
<div class="loader">
101-
<p>Loading the console</p>
102-
</div>
103-
<dom-bind id="demo">
104-
<template is="dom-bind">
105-
<raml-aware raml="{{amfModel}}" scope="demo-model"></raml-aware>
106-
<xhr-simple-request></xhr-simple-request>
107-
<oauth1-authorization></oauth1-authorization>
108-
<oauth2-authorization></oauth2-authorization>
109-
<template is="dom-if" if="[[hasData]]">
110-
<header>
111-
<h1>API console as a custom component</h1>
112-
<p class="info">
113-
This API console uses custom styling, has navigation on the right hand side and has top toolbars removed from the view.
114-
</p>
115-
</header>
116-
<div class="apic-container">
117-
<api-console aware="demo-model" append-headers="X-key: my-api-key\nOther-header:value" manual-navigation="[[manualNavigation]]" navigation-opened="{{navigationOpened}}" no-try-it="[[noTryIt]]" no-attribution="[[noAttribution]]" drawer-align="end" no-toolbars="">
118-
<paper-icon-button icon="arc:close" slot="toolbar" on-click="_closeApi" title="Select different demo API"></paper-icon-button>
119-
</api-console>
120-
</div>
121-
</template>
122-
<template is="dom-if" if="[[!hasData]]">
123-
<parser-element on-amf-changed="_updateAmf"></parser-element>
124-
</template>
125-
</template>
126-
</dom-bind>
127-
<script>
128-
(function(scope) {
129-
scope.hasData = false;
130-
scope._updateAmf = function(e) {
131-
scope.amfModel = e.detail.value;
132-
scope.hasData = !!e.detail.value;
133-
};
134-
135-
scope._closeApi = function() {
136-
scope.hasData = false;
137-
};
138-
})(document.querySelector('#demo'));
139-
</script>
83+
<body>
84+
<div id="demo"></div>
85+
<script type="module" src="./app.js" async></script>
14086
</body>
14187

14288
</html>

‎demo/standalone/app.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,9 @@ class ApicApplication extends DemoBase {
1616
['demo-api', 'Demo API']
1717
];
1818
}
19+
1920
demoTemplate() {
20-
return html`<api-console
21+
return html`<api-console-app
2122
app
2223
redirecturi="https://auth.advancedrestclient.com/oauth-popup.html"
2324
oauth2clientid="821776164331-rserncqpdsq32lmbf5cfeolgcoujb6fm.apps.googleusercontent.com">
@@ -28,7 +29,7 @@ class ApicApplication extends DemoBase {
2829
@click="${this.openApiSelector}">
2930
<iron-icon icon="arc:more-vert"></iron-icon>
3031
</anypoint-icon-button>
31-
</api-console>
32+
</api-console-app>
3233
${this.apiSelectorTemplate()}
3334
`;
3435
}

0 commit comments

Comments
 (0)