Skip to content

Commit

Permalink
chore: completing separation of the app from the element
Browse files Browse the repository at this point in the history
  • Loading branch information
@jarrodek
jarrodek committed Aug 31, 2019
1 parent 2c1b56a commit 86e6a20
Show file tree
Hide file tree
Showing 4 changed files with 208 additions and 160 deletions.
26 changes: 18 additions & 8 deletions demo/element/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,9 @@ class ApicApplication extends DemoBase {
@click="${this.toggleConsoleMenu}">
<iron-icon icon="arc:menu"></iron-icon>
</anypoint-icon-button>
<h1>API Console as an element</h1>
<anypoint-icon-button
aria-label="Activate to open API selection menu"
title="Open API selection menu"
Expand All @@ -38,18 +40,26 @@ class ApicApplication extends DemoBase {
</anypoint-icon-button>
</div>
<div class="wrapper">
<api-console
redirecturi="https://auth.advancedrestclient.com/oauth-popup.html"
oauth2clientid="821776164331-rserncqpdsq32lmbf5cfeolgcoujb6fm.apps.googleusercontent.com">
</api-console>
</div>
<api-console
redirecturi="https://auth.advancedrestclient.com/oauth-popup.html"
oauth2clientid="821776164331-rserncqpdsq32lmbf5cfeolgcoujb6fm.apps.googleusercontent.com">
</api-console>
${this.apiSelectorTemplate()}
<section>
<div class="footer">
Brought to you with ❤ by MuleSoft. A Salesforce company.
</div>
</section>
${this.apiSelectorTemplate()}
`;
}

_setAmfModel(model) {
const apic = document.querySelector('api-console');
apic.amf = model;
apic.selectedShape = 'summary';
apic.selectedShapeType = 'summary';
}

firstRendered() {
this.selectFirstApi();
}
Expand Down
31 changes: 26 additions & 5 deletions demo/element/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,27 +55,48 @@
--anypoint-dropdown-menu-label-color: #fff;
}

.demo-section {
height: 100%;
display: flex;
flex-direction: column;
margin: 0 auto;
width: 60%;
}

h1 {
font-size: 34px;
font-weight: 200;
line-height: 28px;
box-sizing: border-box;
margin: 0;
margin: 0 0 0 12px;
flex: 1;
}

.demo-section {
width: 60%;
margin: 40px auto;
api-console {
flex: 1;
overflow: auto;
}

#demo {
height: 100%;
}

.wrapper {
position: relative;
height: calc(100% - 100px);
}

.header {
display: flex;
align-items: center;;
align-items: center;
margin: 20px 0;
}

.footer {
padding: 20px 0;
font-size: 1rem;
text-align: center;
color: #9E9E9E;
}
</style>
</head>
Expand Down
206 changes: 74 additions & 132 deletions src/ApiConsole.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,100 +54,75 @@ export class ApiConsole extends AmfHelperMixin(LitElement) {
display: none !important;
}
.nav-content {
display: flex;
flex-direction: row;
align-items: center;
.nav-drawer {
width: var(--app-drawer-width, 256px);
display: block;
left: 0;
top: 0;
bottom: 0;
background-color: #fff;
transform: translateX(-100%);
transform-origin: top right;
transition: transform 0.3s cubic-bezier(0.74, 0.03, 0.3, 0.97);
height: 100%;
position: absolute;
z-index: 2;
}
.powered-by {
padding: 12px 0px;
border-top: 1px rgba(0,0,0,0.24) solid;
margin: 8px 12px 0 12px;
:host([navigationopened]) .nav-drawer {
transform: translateX(0);
box-shadow: var(--anypoiont-dropdown-shaddow);
}
a img {
text-underline: none;
}
.nav-scrim {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
a.attribution {
display: inline-block;
width: 177px;
margin-left: 24px;
fill: var(--api-console-menu-color, #424143);
}
height: 100%;
position: absolute;
z-index: 1;
.extension-banner {
align-items: center;
display: none;
border-bottom: 1px var(--api-console-extension-banner-border-bottom-color, rgba(0,0,0,0.12)) solid;
border-top: 1px var(--api-console-extension-banner-border-bottom-color, rgba(0,0,0,0.12)) solid;
margin-bottom: 12px;
box-sizing: border-box;
color: var(--api-console-extension-banner-color, rgba(0,0,0,0.54));
}
transition-property: opacity;
-webkit-transform: translateZ(0);
transform: translateZ(0);
.extension-banner[active] {
display: flex;
flex-direction: row;
opacity: 0;
background: var(--app-drawer-scrim-background, rgba(0, 0, 0, 0.5));
}
.main-content {
margin-left: var(--api-console-main-content-margin-left, 24px);
margin-right: var(--api-console-main-content-margin-right, 24px);
margin-top: var(--api-console-main-content-margin-top, 0px);
position: relative;
:host([navigationopened]) .nav-scrim {
opacity: 1;
}
.drawer-content-wrapper {
max-height: calc(100% - 64px);
display: flex;
flex-direction: column;
background-color: var(--api-console-menu-background-color, inherit);
height: 100%;
}
api-navigation {
flex: 1 1 auto;
}
/* :host(:not([app])) app-drawer-layout {
min-height: inherit;
overflow: hidden;
} */
/* :host(:not([app])) app-header {
position: absolute;
right: 0 !important;
left: 0 !important;
} */
api-request-panel,
api-documentation {
max-width: var(--api-console-main-max-width, 1600px);
flex: 1;
overflow: auto;
}
.api-docs {
display: flex;
flex-direction: row;
overflow: auto;
margin-top: 12px;
.powered-by {
padding: 12px 0px;
border-top: 1px rgba(0,0,0,0.24) solid;
margin: 8px 12px 0 12px;
}
.api-docs api-documentation {
flex: 1;
a img {
text-underline: none;
}
.api-docs .inline-request {
max-width: 600px;
margin-left: 12px;
background-color: var(--apic-tryint-wide-background-color, transparent);
border-left-width: 1px;
border-left-color: var(--apic-tryint-wide-border-color, #e5e5e5);
border-left-style: solid;
padding: 0 12px;
box-sizing: border-box;
flex: 1;
a.attribution {
display: inline-block;
width: 177px;
margin-left: 24px;
fill: var(--api-console-menu-color, #424143);
}
.method-title-area {
Expand Down Expand Up @@ -180,53 +155,23 @@ export class ApiConsole extends AmfHelperMixin(LitElement) {
margin: 0;
}
.nav-drawer {
width: var(--app-drawer-width, 256px);
display: block;
left: 0;
top: 0;
bottom: 0;
background-color: #fff;
transform: translateX(-100%);
transform-origin: top right;
transition: transform 0.3s cubic-bezier(0.74, 0.03, 0.3, 0.97);
position: absolute;
}
:host([navigationopened]) .nav-drawer {
transform: translateX(0);
box-shadow: var(--anypoiont-dropdown-shaddow);
}
.nav-scrim {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transition-property: opacity;
-webkit-transform: translateZ(0);
transform: translateZ(0);
opacity: 0;
background: var(--app-drawer-scrim-background, rgba(0, 0, 0, 0.5));
}
:host([navigationopened]) .nav-scrim {
opacity: 1;
.main-content {
overflow: auto;
height: 100%;
}
`;
}

_getContentTemplate() {
_getPageTemplate() {
switch (this.page) {
case 'docs': return this._getDocsTemplate();
case 'docs': return this._apiDocumentationTemplate();
case 'request': return this._getRequestTemplate();
default: return '';
}
}

_bannerMessage() {}

_getRequestTemplate() {
const {
methodName,
Expand Down Expand Up @@ -282,7 +227,7 @@ export class ApiConsole extends AmfHelperMixin(LitElement) {
.eventsTarget="${eventsTarget}"></api-request-panel>`;
}

_getDocsTemplate() {
_apiDocumentationTemplate() {
const {
inlineMethods,
legacy,
Expand All @@ -294,29 +239,22 @@ export class ApiConsole extends AmfHelperMixin(LitElement) {
narrow,
scrollTarget,
redirectUri,
baseUri,
_renderInlineTyit
baseUri
} = this;
return html`<section class="api-docs">
<api-documentation
.amf="${amf}"
.selected="${selectedShape}"
.selectedType="${selectedShapeType}"
?narrow="${narrow}"
?legacy="${legacy}"
?outlined="${outlined}"
.inlineMethods="${inlineMethods}"
.noTryIt="${_noTryItValue}"
.baseUri="${baseUri}"
.redirectUri="${redirectUri}"
.scrollTarget="${scrollTarget}"
@api-navigation-selection-changed="${this._apiNavigationOcurred}"
@tryit-requested="${this._tryitHandler}"></api-documentation>
${_renderInlineTyit ? html`<div class="inline-request">
${this._bannerMessage()}
${this._requestPanelTemplate()}
</div>` : ''}
</section>`;
return html`<api-documentation
.amf="${amf}"
.selected="${selectedShape}"
.selectedType="${selectedShapeType}"
?narrow="${narrow}"
?legacy="${legacy}"
?outlined="${outlined}"
.inlineMethods="${inlineMethods}"
.noTryIt="${_noTryItValue}"
.baseUri="${baseUri}"
.redirectUri="${redirectUri}"
.scrollTarget="${scrollTarget}"
@api-navigation-selection-changed="${this._apiNavigationOcurred}"
@tryit-requested="${this._tryitHandler}"></api-documentation>`;
}

_navigationTemplate() {
Expand All @@ -333,7 +271,7 @@ export class ApiConsole extends AmfHelperMixin(LitElement) {

_navigationDrawerTemplate() {
return html`
${this.navigationOpened ? html`<div class="nav-scrim"></div>` : ''}
${this.navigationOpened ? html`<div class="nav-scrim" @click="${this._closeDrawer}"></div>` : ''}
<div class="nav-drawer">
${this._navigationTemplate()}
</div>
Expand All @@ -343,7 +281,7 @@ export class ApiConsole extends AmfHelperMixin(LitElement) {
_mainContentTemplate() {
return html`
<div class="main-content">
${this._getContentTemplate()}
${this._getPageTemplate()}
</div>
${this._navigationDrawerTemplate()}`;
}
Expand Down Expand Up @@ -861,4 +799,8 @@ export class ApiConsole extends AmfHelperMixin(LitElement) {
this._hasApicCorsExtension = e.detail.value;
this._hasCorsExtensionChanged(e.detail.value);
}

_closeDrawer() {
this.navigationOpened = false;
}
}
Loading

0 comments on commit 86e6a20

Please sign in to comment.