api-console-assets
Version:
This repo only exists to publish api console components to npm
336 lines (300 loc) • 10.4 kB
HTML
<!--
@license
Copyright 2016 The Advanced REST client authors <arc@mulesoft.com>
Licensed under the Apache License, Version 2.0 (the "License"); you may not
use this file except in compliance with the License. You may obtain a copy of
the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
License for the specific language governing permissions and limitations under
the License.
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../raml-behaviors/raml-behavior.html">
<link rel="import" href="../marked-element/marked-element.html">
<link rel="import" href="../markdown-styles/markdown-styles.html">
<link rel="import" href="../docs-parameters-table/docs-parameters-table.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../iron-collapse/iron-collapse.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../iron-icon/iron-icon.html">
<link rel="import" href="../arc-icons/arc-icons.html">
<link rel="import" href="../docs-parameters-table/docs-parameters-table-shared-styles.html">
<link rel="import" href="url-label.html">
<!--
# `<raml-summary-view>`
A basic information about the RAML definition viewer for the documentation panel.
### Example
```
<raml-summary-view raml="[[raml]]"></raml-summary-view>
```
or in vanila JavaScript
```
let summary = document.querySelector('raml-summary-view');
summary.raml = raml;
```
### Styling
`<raml-summary-view>` provides the following custom properties and mixins for styling:
Custom property | Description | Default
----------------|-------------|----------
`--raml-summary-view` | Mixin applied to the element | `{}`
`--raml-summary-view-title` | Mixin applied to the API title element | `{}`
`--raml-summary-view-property` | Mixin applied to each line of attributes applied in the basic documentation view | `{}`
`--raml-summary-view-description-color` | Color of the description of the API. | `rgba(0, 0, 0, 0.54)`
`--raml-summary-view-description-max-width` | Max width of the API description | `700px`
`--raml-summary-view-description-value-color` | The color of the property value description | `rgba(0, 0, 0, 0.74)`
`--raml-summary-view-uri-section-title` | Mixin applied to URI description section. | `{}`
`--raml-summary-view-uri-section-margin-top` | Margin top of the URI description section | `24px`
`--raml-summary-view-base-uri-font-size` | Font size of the URI display. | `16px`;
`--raml-summary-view-base-uri` | Mixin applied to the URI display | `{}`,
`--raml-summary-view-parameters-table-max-width` | Max width of the URI parameters table | `700px`
`--raml-summary-view-parameters-table` | Mixin applied to the URI parameters table | `{}`
@group RAML Elements
@element raml-summary-view
@demo demo/index.html
@hero hero.svg
-->
<dom-module id="raml-summary-view">
<template>
<style include="markdown-styles"></style>
<style include="docs-parameters-table-shared-styles"></style>
<style>
:host {
display: block;
@apply(--raml-summary-view);
}
:host([hidden]) {
display: none;
}
h1 {
@apply(--arc-font-title);
@apply(--raml-summary-view-title);
}
h4 {
@apply(--arc-font-body1);
margin: 8px 0;
color: rgba(0, 0, 0, 0.87);
font-weight: 500;
@apply(--raml-summary-view-uri-section-title);
}
p.simple-desc {
margin: 8px 0;
@apply(--arc-font-body1);
@apply(--raml-summary-view-property);
}
.simple-desc > label {
margin-right: 4px;
color: var(--raml-summary-view-description-label-color, rgba(0, 0, 0, 0.74));
}
.simple-desc > span {
color: var(--raml-summary-view-description-value-color, rgba(0, 0, 0, 0.94));
}
.api-description {
margin: 20px 0;
color: var(--raml-summary-view-description-color, rgba(0, 0, 0, 0.74));
@apply(--arc-font-body1);
font-size: 15px;
max-width: var(--raml-summary-view-description-max-width, 700px);
@apply(--raml-summary-view-property);
}
.url-info {
margin-top: var(--raml-summary-view-uri-section-margin-top, 24px);
}
url-label {
font-size: var(--raml-summary-view-base-uri-font-size, 16px);
@apply(--raml-summary-view-base-uri);
}
.section-title-area {
@apply(--layout-horizontal);
@apply(--layout-center);
border-bottom: 1px var(--raml-summary-view-title-border-color, #e5e5e5) solid;
}
.section-title-area h4 {
@apply(--layout-flex);
}
.toggle-button {
color: var(--raml-summary-view-toggle-icon-color, rgba(0, 0, 0, 0.54));
transition: color 0.25s linear;
@apply(--toggle-button);
}
.toggle-icon {
transform: rotateZ(0deg);
transition: transform 0.3s linear;
}
.toggle-icon.opened {
transform: rotateZ(-180deg);
}
.toggle-button:hover {
color: var(--raml-summary-view-toggle-icon-hover-color, rgba(0, 0, 0, 0.78));
@apply(--toggle-button-hover);
}
.title-area-actions {
@apply(--raml-summary-view-title-area-actions);
}
.structure-info {
max-width: var(--raml-docs-table-max-width, 800px);
}
.sub-resources-list {
margin-top: 12px;
}
a {
color: var(--raml-docs-link-color, #00A1DF);
@apply(--raml-docs-link);
}
*[hidden] {
display: none;
}
</style>
<h1>[[raml.title]]</h1>
<p class="simple-desc" hidden$="[[isEmpty(raml.version)]]">
<label>Version:</label>
<span>[[raml.version]]</span>
</p>
<p class="simple-desc" hidden$="[[isEmpty(raml.mediaType)]]">
<label>Supported media type:</label>
<span>[[_displayArray(raml.mediaType)]]</span>
</p>
<p class="simple-desc" hidden$="[[isEmpty(raml.protocols)]]">
<label>Supported protocols:</label>
<span>[[_displayArray(raml.protocols)]]</span>
</p>
<div hidden$="[[isEmpty(raml.description)]]" class="api-description">
<marked-element markdown="[[raml.description]]">
<div class="markdown-html markdown-body"></div>
</marked-element>
</div>
<section class="url-info">
<h4>API base URI</h4>
<url-label url="[[raml.baseUri]]" uri-parameters="[[raml.baseUriParameters]]"></url-label>
</section>
<section class="structure-info" hidden$="[[!hasResources]]">
<div class="section-title-area">
<h4>API resources</h4>
<div class="title-area-actions">
<paper-button on-tap="toggleMethodsCollapse" class="toggle-button" title="Toogle resources details">
[[_computeToggleActionLabel(methodsOpened)]]
<iron-icon icon="arc:expand-more" class$="[[_computeToggleIconClass(methodsOpened)]]"></iron-icon>
</paper-button>
</div>
</div>
<iron-collapse opened="[[methodsOpened]]">
<div class="sub-resources-list">
<div class="params-table" id="substable">
<div class="tbody">
<template is="dom-repeat" items="[[resources]]">
<section class="tr">
<div class="param-name td"><a href="#" data-path$="[[item.path]]">[[item.meta.name]]</a></div>
<div class="param-desc td">[[item.meta.description]]</div>
</section>
</template>
</div>
</div>
</div>
</iron-collapse>
</section>
</template>
<script>
Polymer({
is: 'raml-summary-view',
behaviors: [Polymer.RamlBehavior],
/**
* An event fired when the user click on a resource link.
*
* @event raml-path-changed
* @property {String} path Path requested by the user.
*/
properties: {
// If true then the methods and sub-resources section is visible.
methodsOpened: {
type: Boolean,
value: true
},
// Computed list of resources. It's the element's internal structure.
resources: {
type: Array,
readOnly: true
},
// Computed value, True if resources model has been computed.
hasResources: {
type: Boolean,
value: false,
computed: '_computeHasResources(resources)'
}
},
observers: [
'_computeResources(raml)'
],
listeners: {
'substable.tap': '_subResourceTap'
},
// Displays array values.
_displayArray: function(arr) {
if (!arr || !arr.length) {
return '';
}
if (!(arr instanceof Array)) {
return arr;
}
return arr.join(', ');
},
_computeHasResources: function(model) {
return !!(model && model.length);
},
_computeResources: function(raml) {
if (!raml || !raml.resources) {
this._setResources(undefined);
return;
}
var resources = [];
raml.resources.forEach(function(resource, i) {
resources[resources.length] = {
path: 'resources.' + i,
meta: {
name: resource.displayName || resource.relativeUri,
description: resource.description
}
};
});
if (resources.length === 0) {
resources = undefined;
}
this._setResources(resources);
},
// Computes class for the toggle's button icon.
_computeToggleIconClass: function(opened) {
var clazz = 'toggle-icon';
if (opened) {
clazz += ' opened';
}
return clazz;
},
// Computes a label for the section toggle buttons.
_computeToggleActionLabel: function(opened) {
return opened ? 'Hide' : 'Show';
},
/**
* Toogles types section opened / closed.
*/
toggleMethodsCollapse: function() {
this.methodsOpened = !this.methodsOpened;
},
/**
* Handler for the click event on the resources list.
* Fires the `raml-path-changed` event.
*/
_subResourceTap: function(e) {
e.preventDefault();
e.stopPropagation();
var path = e.target.dataset.path;
if (!path) {
return;
}
this.fire('raml-path-changed', {
path: path
});
}
});
</script>
</dom-module>