Skip to content

Commit 6e480d1

Browse files
jarrodekjarrodek
committed
chore: finishing the navigation
Signed-off-by: Pawel Psztyc <[email protected]>
1 parent 6fb7ff8 commit 6e480d1

28 files changed

+3789
-1512
lines changed

‎.vscode/settings.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@
3535
"dompurify",
3636
"fasttext",
3737
"formdata",
38+
"graphload",
3839
"httpbin",
3940
"itemschange",
4041
"mimechange",

‎demo/api-navigation.js

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import '@anypoint-web-components/awc/anypoint-checkbox.js';
44
import '@anypoint-web-components/awc/anypoint-radio-button.js';
55
import '@anypoint-web-components/awc/anypoint-radio-group.js';
66
import { AmfDemoBase } from './lib/AmfDemoBase.js';
7+
import { NavigationContextMenu, NavigationContextMenuCommands } from '../index.js';
78
import '../define/api-navigation.js';
89

910
/** @typedef {import('../').NavigationLayout} NavigationLayout */
@@ -14,17 +15,26 @@ class ComponentPage extends AmfDemoBase {
1415
constructor() {
1516
super();
1617
this.initObservableProperties([
17-
'summary', 'filter', 'edit', 'layout',
18+
'summary', 'filter', 'edit', 'layout', 'endpointsExpanded',
1819
]);
1920
this.componentName = 'api-navigation';
2021
this.noApiNavigation = true;
2122
this.summary = true;
2223
this.filter = false;
2324
this.edit = false;
25+
this.endpointsExpanded = false;
2426
/** @type NavigationLayout */
2527
this.layout = undefined;
2628
}
2729

30+
firstRender() {
31+
super.firstRender();
32+
const nav = document.querySelector('api-navigation');
33+
this.menu = new NavigationContextMenu(nav, { cancelNativeWhenHandled: true });
34+
this.menu.registerCommands(NavigationContextMenuCommands);
35+
this.menu.connect();
36+
}
37+
2838
/**
2939
* @param {CustomEvent} e
3040
*/
@@ -52,7 +62,6 @@ class ComponentPage extends AmfDemoBase {
5262
}
5363

5464
demoTemplate() {
55-
const { loaded } = this;
5665
return html`
5766
<section class="documentation-section">
5867
<h3>Interactive demo</h3>
@@ -61,7 +70,7 @@ class ComponentPage extends AmfDemoBase {
6170
</p>
6271
6372
<div class="api-demo-content">
64-
${!loaded ? html`<p>Load an API model first.</p>` : this.loadedTemplate()}
73+
${this.loadedTemplate()}
6574
</div>
6675
</section>
6776
`;
@@ -74,7 +83,7 @@ class ComponentPage extends AmfDemoBase {
7483
}
7584

7685
componentTemplate() {
77-
const { demoStates, darkThemeActive, summary, filter, edit, layout } = this;
86+
const { demoStates, darkThemeActive, summary, filter, edit, layout, endpointsExpanded } = this;
7887
return html`
7988
<arc-interactive-demo
8089
.states="${demoStates}"
@@ -86,6 +95,7 @@ class ComponentPage extends AmfDemoBase {
8695
?edit="${edit}"
8796
?filter="${filter}"
8897
.layout="${layout}"
98+
?endpointsExpanded="${endpointsExpanded}"
8999
@apinavigate="${this._navigationHandler}"
90100
slot="content"
91101
>
@@ -119,6 +129,15 @@ class ComponentPage extends AmfDemoBase {
119129
>
120130
Edit mode
121131
</anypoint-checkbox>
132+
<anypoint-checkbox
133+
aria-describedby="mainOptionsLabel"
134+
slot="options"
135+
name="endpointsExpanded"
136+
?checked="${endpointsExpanded}"
137+
@change="${this._toggleMainOption}"
138+
>
139+
Expand endpoints
140+
</anypoint-checkbox>
122141
123142
<label slot="options" id="mainOptionsLabel">Layout</label>
124143
<anypoint-radio-group slot="options" @select="${this._toggleLayoutOption}" attrForSelected="value" selectable="anypoint-radio-button">
@@ -151,6 +170,7 @@ class ComponentPage extends AmfDemoBase {
151170
['google-drive-api', 'Google Drive'],
152171
['mocking-service', 'Lots of methods'],
153172
['no-endpoints', 'No endpoints!'],
173+
['streetlights', 'streetlights (unsorted for the tree layout)'],
154174
['APIC-449', 'APIC-449'],
155175
['APIC-554', 'APIC-554'],
156176
['APIC-554-ii', 'APIC-554-ii'],

‎demo/apis/streetlights/streetlights.yaml

Lines changed: 215 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,215 @@
1+
asyncapi: 2.0.0
2+
info:
3+
title: Streetlights API
4+
version: '1.0.0'
5+
description: |
6+
The Smartylighting Streetlights API allows you to remotely manage the city lights.
7+
8+
### Check out its awesome features:
9+
10+
* Turn a specific streetlight on/off 🌃
11+
* Dim a specific streetlight 😎
12+
* Receive real-time information about environmental lighting conditions 📈
13+
license:
14+
name: Apache 2.0
15+
url: https://www.apache.org/licenses/LICENSE-2.0
16+
17+
servers:
18+
production:
19+
url: api.streetlights.smartylighting.com:{port}
20+
protocol: mqtt
21+
description: Test broker
22+
variables:
23+
port:
24+
description: Secure connection (TLS) is available through port 8883.
25+
default: '1883'
26+
enum:
27+
- '1883'
28+
- '8883'
29+
security:
30+
- apiKey: []
31+
- supportedOauthFlows:
32+
- streetlights:on
33+
- streetlights:off
34+
- streetlights:dim
35+
- openIdConnectWellKnown: []
36+
37+
defaultContentType: application/json
38+
39+
channels:
40+
smartylighting/streetlights/1/0/event/{streetlightId}/lighting/measured:
41+
description: The topic on which measured values may be produced and consumed.
42+
parameters:
43+
streetlightId:
44+
$ref: '#/components/parameters/streetlightId'
45+
subscribe:
46+
summary: Receive information about environmental lighting conditions of a particular streetlight.
47+
operationId: receiveLightMeasurement
48+
traits:
49+
- $ref: '#/components/operationTraits/kafka'
50+
message:
51+
$ref: '#/components/messages/lightMeasured'
52+
53+
smartylighting/streetlights/1/0/action/{streetlightId}/turn/on:
54+
parameters:
55+
streetlightId:
56+
$ref: '#/components/parameters/streetlightId'
57+
publish:
58+
operationId: turnOn
59+
traits:
60+
- $ref: '#/components/operationTraits/kafka'
61+
message:
62+
$ref: '#/components/messages/turnOnOff'
63+
64+
smartylighting/streetlights/1/0/action/{streetlightId}/turn/off:
65+
parameters:
66+
streetlightId:
67+
$ref: '#/components/parameters/streetlightId'
68+
publish:
69+
operationId: turnOff
70+
traits:
71+
- $ref: '#/components/operationTraits/kafka'
72+
message:
73+
$ref: '#/components/messages/turnOnOff'
74+
75+
smartylighting/streetlights/1/0/action/{streetlightId}/dim:
76+
parameters:
77+
streetlightId:
78+
$ref: '#/components/parameters/streetlightId'
79+
publish:
80+
operationId: dimLight
81+
traits:
82+
- $ref: '#/components/operationTraits/kafka'
83+
message:
84+
$ref: '#/components/messages/dimLight'
85+
86+
components:
87+
messages:
88+
lightMeasured:
89+
name: lightMeasured
90+
title: Light measured
91+
summary: Inform about environmental lighting conditions for a particular streetlight.
92+
contentType: application/json
93+
traits:
94+
- $ref: '#/components/messageTraits/commonHeaders'
95+
payload:
96+
$ref: "#/components/schemas/lightMeasuredPayload"
97+
turnOnOff:
98+
name: turnOnOff
99+
title: Turn on/off
100+
summary: Command a particular streetlight to turn the lights on or off.
101+
traits:
102+
- $ref: '#/components/messageTraits/commonHeaders'
103+
payload:
104+
$ref: "#/components/schemas/turnOnOffPayload"
105+
dimLight:
106+
name: dimLight
107+
title: Dim light
108+
summary: Command a particular streetlight to dim the lights.
109+
traits:
110+
- $ref: '#/components/messageTraits/commonHeaders'
111+
payload:
112+
$ref: "#/components/schemas/dimLightPayload"
113+
114+
schemas:
115+
lightMeasuredPayload:
116+
type: object
117+
properties:
118+
lumens:
119+
type: integer
120+
minimum: 0
121+
description: Light intensity measured in lumens.
122+
sentAt:
123+
$ref: "#/components/schemas/sentAt"
124+
turnOnOffPayload:
125+
type: object
126+
properties:
127+
command:
128+
type: string
129+
enum:
130+
- on
131+
- off
132+
description: Whether to turn on or off the light.
133+
sentAt:
134+
$ref: "#/components/schemas/sentAt"
135+
dimLightPayload:
136+
type: object
137+
properties:
138+
percentage:
139+
type: integer
140+
description: Percentage to which the light should be dimmed to.
141+
minimum: 0
142+
maximum: 100
143+
sentAt:
144+
$ref: "#/components/schemas/sentAt"
145+
sentAt:
146+
type: string
147+
format: date-time
148+
description: Date and time when the message was sent.
149+
150+
securitySchemes:
151+
apiKey:
152+
type: apiKey
153+
in: user
154+
description: Provide your API key as the user and leave the password empty.
155+
supportedOauthFlows:
156+
type: oauth2
157+
description: Flows to support OAuth 2.0
158+
flows:
159+
implicit:
160+
authorizationUrl: 'https://authserver.example/auth'
161+
scopes:
162+
'streetlights:on': Ability to switch lights on
163+
'streetlights:off': Ability to switch lights off
164+
'streetlights:dim': Ability to dim the lights
165+
password:
166+
tokenUrl: 'https://authserver.example/token'
167+
scopes:
168+
'streetlights:on': Ability to switch lights on
169+
'streetlights:off': Ability to switch lights off
170+
'streetlights:dim': Ability to dim the lights
171+
clientCredentials:
172+
tokenUrl: 'https://authserver.example/token'
173+
scopes:
174+
'streetlights:on': Ability to switch lights on
175+
'streetlights:off': Ability to switch lights off
176+
'streetlights:dim': Ability to dim the lights
177+
authorizationCode:
178+
authorizationUrl: 'https://authserver.example/auth'
179+
tokenUrl: 'https://authserver.example/token'
180+
refreshUrl: 'https://authserver.example/refresh'
181+
scopes:
182+
'streetlights:on': Ability to switch lights on
183+
'streetlights:off': Ability to switch lights off
184+
'streetlights:dim': Ability to dim the lights
185+
openIdConnectWellKnown:
186+
type: openIdConnect
187+
openIdConnectUrl: 'https://authserver.example/.well-known'
188+
189+
parameters:
190+
streetlightId:
191+
description: The ID of the streetlight.
192+
schema:
193+
type: string
194+
195+
messageTraits:
196+
commonHeaders:
197+
headers:
198+
type: object
199+
properties:
200+
my-app-header:
201+
type: integer
202+
minimum: 0
203+
maximum: 100
204+
205+
operationTraits:
206+
kafka:
207+
bindings:
208+
kafka:
209+
groupId:
210+
type: string
211+
enum: ['myGroupId']
212+
clientId:
213+
type: string
214+
enum: ['myClientId']
215+
bindingVersion: '0.1.0'

‎demo/model.mjs

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,7 @@ config.set('example-fragment/example-fragment.raml', { type: "RAML 1.0" });
8080
config.set('multi-server/multi-server.yaml', { type: "OAS 3.0", mime: 'application/yaml' });
8181
config.set('async-api/async-api.yaml', { type: "ASYNC 2.0" });
8282
config.set('Streetlights/Streetlights.yaml', { type: "ASYNC 2.0" });
83+
config.set('streetlights/streetlights.yaml', { type: "ASYNC 2.0" });
8384
config.set('api-keys/api-keys.yaml', { type: "OAS 3.0", mime: 'application/yaml' });
8485
config.set('oauth-flows/oauth-flows.yaml', { type: "OAS 3.0", mime: 'application/yaml' });
8586
config.set('oas-bearer/oas-bearer.yaml', { type: "OAS 3.0", mime: 'application/yaml' });

‎index.d.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ export { default as ApiAuthorizationEditorElement } from './src/elements/ApiAuth
1717
export { default as ApiAuthorizationMethodElement } from './src/elements/ApiAuthorizationMethodElement';
1818
export { default as ApiServerSelectorElement } from './src/elements/ApiServerSelectorElement';
1919
export { default as ApiNavigationElement } from './src/elements/ApiNavigationElement';
20+
export { default as ApiNavigationLegacyElement } from './src/elements/ApiNavigationLegacyElement.js';
2021
export { default as ApiSecurityDocumentElement } from './src/elements/ApiSecurityDocumentElement';
2122
export { default as ApiParametrizedSecuritySchemeElement } from './src/elements/ApiParametrizedSecuritySchemeElement';
2223
export { default as ApiSecurityRequirementDocumentElement } from './src/elements/ApiSecurityRequirementDocumentElement';
@@ -46,3 +47,5 @@ export { DomEventsAmfStore } from './src/store/DomEventsAmfStore';
4647
export { AmfStore } from './src/store/AmfStore';
4748
export { AmfStoreDomEventsMixin } from './src/store/mixins/AmfStoreDomEventsMixin';
4849
export { InMemAmfGraphStore } from './src/store/InMemAmfGraphStore';
50+
export { NavigationContextMenu } from './src/plugins/NavigationContextMenu';
51+
export { default as NavigationContextMenuCommands } from './src/plugins/NavigationCommands';

‎index.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ export { default as ApiRequestEditorElement } from './src/elements/ApiRequestEdi
1616
export { default as ApiAuthorizationEditorElement } from './src/elements/ApiAuthorizationEditorElement.js';
1717
export { default as ApiAuthorizationMethodElement } from './src/elements/ApiAuthorizationMethodElement.js';
1818
export { default as ApiServerSelectorElement } from './src/elements/ApiServerSelectorElement.js';
19-
2019
export { default as ApiNavigationElement } from './src/elements/ApiNavigationElement.js';
20+
export { default as ApiNavigationLegacyElement } from './src/elements/ApiNavigationLegacyElement.js';
2121
export { default as ApiSecurityDocumentElement } from './src/elements/ApiSecurityDocumentElement.js';
2222
export { default as ApiParametrizedSecuritySchemeElement } from './src/elements/ApiParametrizedSecuritySchemeElement.js';
2323
export { default as ApiSecurityRequirementDocumentElement } from './src/elements/ApiSecurityRequirementDocumentElement.js';
@@ -39,3 +39,5 @@ export { DomEventsAmfStore } from './src/store/DomEventsAmfStore.js';
3939
export { AmfStore } from './src/store/AmfStore.js';
4040
export { AmfStoreDomEventsMixin } from './src/store/mixins/AmfStoreDomEventsMixin.js';
4141
export { InMemAmfGraphStore } from './src/store/InMemAmfGraphStore.js';
42+
export { NavigationContextMenu } from './src/plugins/NavigationContextMenu.js';
43+
export { default as NavigationContextMenuCommands } from './src/plugins/NavigationCommands.js';

0 commit comments

Comments
 (0)