api-console-assets

<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="../paper-styles/paper-styles.html"> <link rel="import" href="../paper-tabs/paper-tabs.html"> <link rel="import" href="../paper-tabs/paper-tab.html"> <link rel="import" href="../iron-flex-layout/iron-flex-layout.html"> <link rel="import" href="../docs-parameters-table/docs-body-parameters-table.html"> <link rel="import" href="../markdown-styles/markdown-styles.html"> <link rel="import" href="../iron-media-query/iron-media-query.html"> <link rel="import" href="../docs-parameters-table/docs-parameters-table-shared-styles.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="../iron-scroll-target-behavior/iron-scroll-target-behavior.html"> <link rel="import" href="../paper-tooltip/paper-tooltip.html"> <link rel="import" href="../arc-polyfills/arc-polyfills.html"> <link rel="import" href="../raml-annotations-display/raml-annotations-display.html">  <dom-module id="raml-docs-resource-viewer"> <template> <style include="markdown-styles"></style> <style include="docs-parameters-table-shared-styles"></style> <style> :host { display: block; @apply(--raml-docs-resource-viewer); --paper-tabs-selection-bar-color: var(--params-table-header-background-color, #00A1DF); --paper-tab-ink: var(--params-table-header-background-color, #00A1DF); --paper-tab: { flex: initial; } --content-section: { padding: 8px 12px; @apply(--raml-docs-resource-viewer-content-section); } } :host([hidden]) { display: none !important; } h1 { @apply(--arc-font-headline); @apply(--content-section); @apply(--raml-docs-h1); } h2 { @apply(--arc-font-title); @apply(--content-section); @apply(--raml-docs-h2); } h3 { @apply(--paper-font-subhead); @apply(--content-section); @apply(--raml-docs-h3); } .resource-name { font-weight: 500; } .resource-desc { @apply(--arc-font-body1); @apply(--content-section); @apply(--raml-docs-item-description); } .type-block { @apply(--content-section); } .params-table, docs-body-parameters-table { max-width: var(--raml-docs-table-max-width, 800px); } .sub-resources-list { @apply(--content-section); } a { color: var(--raml-docs-link-color, #00A1DF); @apply(--raml-docs-link); } .container { @apply(--layout-horizontal); @apply(--raml-docs-resource-viewer-container); } .main { @apply(--layout-flex); overflow: auto; @apply(--raml-docs-resource-viewer-content); } nav { width: 210px; min-height: 160px; border-left: 1px #e5e5e5 solid; padding-left: 12px; margin: 12px 0; position: relative; display: none; @apply(--raml-docs-resource-viewer-navigation); } [wide-layout] nav { display: block; @apply(--raml-docs-resource-viewer-navigation-wide-layout); } #nav-links { position: absolute; @apply(--sidebar-list); } #nav-links a { display: block; padding: 8px 12px; margin: 8px 0; @apply(--sidebar-list-link); } #nav-links a:hover { @apply(--sidebar-list-link-hover); } :host([narrow]) .container { max-width: var(--raml-docs-resource-viewer-narrow-container-width, calc(100vw - 32px)); overflow: auto; } .section-title-area { @apply(--layout-horizontal); @apply(--layout-center); border-bottom: 1px var(--raml-docs-resource-viewer-title-border-color, #e5e5e5) solid; } .section-title-area h2 { @apply(--layout-flex); } .toggle-button { color: var(--response-status-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(--response-status-view-toggle-icon-hover-color, rgba(0, 0, 0, 0.78)); @apply(--toggle-button-hover); } .title-area-actions { @apply(--raml-docs-method-viewer-title-area-actions); } .traits-list, .resource-types-list { margin-bottom: 8px; color: var(--raml-docs-method-viewer-traits-list-color, rgba(0,0,0,0.74)); padding: var(--raml-docs-method-viewer-traits-list-padding, 0px 12px); @apply(--raml-docs-method-viewer-traits-list); } .trait-value, .resource-types-value { color: var(--raml-docs-method-viewer-traits-list-values-color, rgba(0,0,0,0.94)); @apply(--raml-docs-method-viewer-traits-list-values); } .trait-label, .resource-types-label { color: var(--raml-docs-method-viewer-traits-list-label-color, inherit); @apply(--raml-docs-method-viewer-traits-list-label); } .help-icon-link-external { width: 16px; height: 16px; vertical-align: text-bottom; @apply(--raml-docs-method-viewer-traits-list-help-icon); } .title-area-actions { @apply(--title-area-actions); } raml-annotations-display { color: var(--raml-docs-resource-viewer-annotations-color, rgba(0,0,0,0.74)); @apply(--content-section); @apply(--raml-docs-resource-viewer-annotations); } </style> <iron-media-query query="(min-width: 800px)" query-matches="{{wide}}"></iron-media-query> <iron-media-query query="(max-width: [[narrowWidth]])" query-matches="{{narrow}}"></iron-media-query> <div class="container" wide-layout$="[[isWideLayout]]"> <div class="main"> <div class="title-area"> <h1 id="overview" class="title"> <span>Resource: </span> <span class="resource-name">[[_computeResourceName(raml.*)]]</span> </h1> </div> <template is="dom-if" if="[[hasTraits]]"> <div class="traits-list"> <span class="trait-label">Traits:</span> <span class="trait-value">[[_computeTraitsList(raml.is)]]</span> <a href="https://github.com/raml-org/raml-spec/blob/master/versions/raml-10/raml-10.md/#resource-types-and-traits" target="_blank"><iron-icon icon="arc:help-outline" class="help-icon-link-external"></iron-icon></a> <paper-tooltip>A trait provids a method-level nodes such as description, headers, query string parameters, and responses.</paper-tooltip> </div> </template> <template is="dom-if" if="[[hasResourceTypes]]"> <div class="resource-types-list"> <span class="resource-types-label">Resource types:</span> <span class="resource-types-value">[[_computeResourceTypesList(raml.type)]]</span> <a href="https://github.com/raml-org/raml-spec/blob/master/versions/raml-10/raml-10.md/#resource-types-and-traits" target="_blank"><iron-icon icon="arc:help-outline" class="help-icon-link-external"></iron-icon></a> <paper-tooltip>A resource type can specify security schemes, methods, and other nodes that can be applied to a resource as a reusable asset in RAML.</paper-tooltip> </div> </template> <template is="dom-if" if="[[hasAnnotations]]"> <raml-annotations-display annotations="[[raml.annotations]]"></raml-annotations-display> </template> <template is="dom-if" if="[[raml.description]]"> <marked-element smartypants markdown="[[raml.description]]"> <div class="markdown-html resource-desc"></div> </marked-element> </template> <section hidden$="[[!hasTypes]]"> <div class="section-title-area"> <h2 id="resources">Types</h2> <div class="title-area-actions"> <paper-button on-tap="toggleTypesCollapse" class="toggle-button"> [[_computeToggleActionLabel(typesOpened)]] <iron-icon icon="arc:expand-more" class$="[[_computeToggleIconClass(typesOpened)]]"></iron-icon> </paper-button> <paper-tooltip animation-delay="200">Toogle types details</paper-tooltip> </div> </div> <iron-collapse opened="[[typesOpened]]"> <template is="dom-repeat" items="[[types]]"> <div class="type-block"> <docs-body-parameters-table narrow="[[narrow]]" body="[[item]]" auto-hide></docs-body-parameters-table> </div> </template> </iron-collapse> </section> <section hidden$="[[!hasSubproperties]]"> <div class="section-title-area"> <h2 id="methods">Methods and sub-resources</h2> <div class="title-area-actions"> <paper-button on-tap="toggleMethodsCollapse" class="toggle-button"> [[_computeToggleActionLabel(methodsOpened)]] <iron-icon icon="arc:expand-more" class$="[[_computeToggleIconClass(methodsOpened)]]"></iron-icon> </paper-button> <paper-tooltip animation-delay="200">Toogle methods and sub-resources details</paper-tooltip> </div> </div> <iron-collapse opened="[[methodsOpened]]"> <div class="sub-resources-list"> <div class="params-table" id="substable"> <div class="params-table-header thead"> <section class="tr"> <div class="td">Name</div> <div class="td">Description</div> </section> </div> <div class="tbody"> <section hidden$="[[!methods]]" class="tr params-table-header subheader"> <div class="td" colspan="3">Methods</div> <div class="td"></div> </section> <template is="dom-repeat" items="[[methods]]"> <section class="tr"> <div class="td param-name"><a href="#" data-path$="[[item.path]]">[[item.meta.name]]</a></div> <div class="td param-desc">[[item.meta.description]]</div> </section> </template> <section hidden$="[[!resources]]" class="tr params-table-header subheader"> <div class="td" colspan="3">Sub-resources</div> <div class="td"></div> </section> <template is="dom-repeat" items="[[resources]]"> <section class="tr"> <div class="td param-name"><a href="#" data-path$="[[item.path]]">[[item.meta.name]]</a></div> <div class="td param-desc">[[item.meta.description]]</div> </section> </template> </div> </div> </div> </iron-collapse> </section> </div> <nav> <div id="nav-links"> <a href="#overview">Overview</a> <a hidden$="[[!hasTypes]]" href="#resources">Resources</a> <a href="#methods">Methods</a> </div> </nav> </div> </template> <script> Polymer({ is: 'raml-docs-resource-viewer', behaviors: [ Polymer.RamlBehavior, Polymer.IronScrollTargetBehavior ], /** * An event fired when the user cliecked on a method/sub-resource link. * Before the event is fired the `currentPath` propery is set. If parent * element is listening for change on this property then it's redundand to * listen for this event. * * @event raml-path-changed * @property {String} path Path requested by the user. */ properties: { /** * Computed value. List of types used by this endpoint. * The elements looks for types inside methods of this resource. * * It will not search for types in nested resources. */ types: { type: Array, readOnly: true }, // Computed value. True when the resource has types defined in it. hasTypes: { type: Boolean, value: false, computed: '_computeHasTypes(types.length)' }, // If true, the method has traits applied to it. hasTraits: { type: Boolean, readOnly: true }, // If true, the method has traits applied to it. hasResourceTypes: { type: Boolean, readOnly: true }, // Computed value, true if raml object has annotations hasAnnotations: { type: Boolean, readOnly: true }, /** * Curently selected path in the RAML JSON structure. Required to compute * sub-resources. */ currentPath: { type: String }, // Computed list of methods. It's the element's internal structure. methods: Array, // Computed list of resources. It's the element's internal structure. resources: Array, // Computed value, True if the resource has methods or sub-resources. hasSubproperties: { type: Boolean, computed: '_computeHasSubproperties(methods, resources)' }, /** * If true then the element will start listen for the * `raml-is-resource-changed`, `raml-selected-object-changed` and * `raml-selected-path-changed` event and set corresponding properties * when needed. It's a replacement for the Polymer's data biding * for apps that are not Polymer powered. */ autoHide: { type: Boolean, value: false, observer: '_autoHideChanged' }, // If true then the element will be hidden ui the UI. hidden: { type: Boolean, value: false, reflectToAttribute: true }, // If true then there's enough space to display right column wide: { type: Boolean, value: false }, /** * If set it will renders the view in the narrow layout. */ narrow: { type: Boolean, notify: true, reflectToAttribute: true }, // A widith below which the `narrow` property will be set to true. narrowWidth: { type: String, value: '768px' }, // If true then the types section is visible. typesOpened: { type: Boolean, value: true }, // If true then the methods and sub-resources section is visible. methodsOpened: { type: Boolean, value: true }, // Computed value, true if renders wide layout (with nav links) isWideLayout: { type: Boolean, computed: '_computeIsWideLayout(narrow, wide)' } }, observers: [ '_objectChanged(raml.*)', '_computeMethods(currentPath, raml.*)', '_computeResources(currentPath, raml.*)' ], listeners: { 'substable.tap': '_subResourceTap', 'nav-links.tap': '_navLinksTap' }, attached: function() { this._eventTarget = Polymer.dom(this).host || document; if (this.autoHide) { this._attacheListeners(); } this.listen(window, 'scroll', '_scrollHandler'); }, detached: function() { this._detachListeners(); this.unlisten(window, 'scroll', '_scrollHandler'); }, _autoHideChanged: function(state) { if (state) { this._attacheListeners(); } else { this._detachListeners(); } }, _attacheListeners: function() { if (!this._eventTarget) { this.hidden = true; return; } this._detachListeners(); this.listen(this._eventTarget, 'raml-is-resource-changed', '_isResourceHandler'); this.listen(this._eventTarget, 'raml-selected-object-changed', '_selectedChangeHandler'); this.listen(this._eventTarget, 'raml-selected-path-changed', '_selectedPathChangeHandler'); }, _detachListeners: function() { if (!this._eventTarget) { return; } this.unlisten(this._eventTarget, 'raml-is-resource-changed', '_isResourceHandler'); this.unlisten(this._eventTarget, 'raml-selected-object-changed', '_selectedChangeHandler'); this.unlisten(this._eventTarget, 'raml-selected-path-changed', '_selectedPathChangeHandler'); }, /** * It's a handler for the `raml-is-resource-changed` event fired * by other element. It sets the `hidden` value depending on the * event's `state` parameter. */ _isResourceHandler: function(e, detail) { var state = detail.state; this.hidden = !state; }, /** * Handler for the `selectedObject` (from the `<raml-path-to-object>`). */ _selectedChangeHandler: function(e, detail) { if (this.hidden) { this.raml = undefined; return; } this.raml = detail.selectedObject; }, _selectedPathChangeHandler: function(e, detail) { if (this.hidden) { this.currentPath = undefined; return; } this.currentPath = detail.path; }, // Computes the name of the resource. _computeResourceName: function() { var r = this.raml; if (!r) { return ''; } return r.displayName || r.relativeUri; }, _objectChanged: function(record) { var raml = record && record.base; if (!raml) { this._setHasTraits(false); this._setHasResourceTypes(false); this._setHasAnnotations(false); this._setTypes(undefined); return; } if (raml.is && raml.is.length) { this._setHasTraits(true); } else { this._setHasTraits(false); } if (raml.type && (typeof raml.type === 'string' || raml.type.length)) { this._setHasResourceTypes(true); } else { this._setHasResourceTypes(false); } if (raml.annotations && raml.annotations.length) { this._setHasAnnotations(true); } else { this._setHasAnnotations(false); } this._computeTypes(raml); }, // Computes list of the types in current resource. Called automatically when `raml` change. _computeTypes: function(raml) { var types = []; var self = this; if (raml.methods && raml.methods.length) { raml.methods.forEach(function(method) { var type = self._listTypes(method); if (type) { types = types.concat(type); } }); } this._filterDuplicates(types); this._setTypes(types); }, /** * Filters out duplicates of types so the list contain only one instance of * a type. * * @param {Array} types List of computed types. * @return {Array} list without duplicates. */ _filterDuplicates: function(types) { if (!types || !types.length) { return types; } for (var i = 0; i < types.length; i++) { var current = types[i][0]; for (var j = types.length - 1; j > i; j--) { var compare = types[j][0]; if (this.deepEqual(current, compare)) { types.splice(j, 1); } } } }, _listTypes: function(obj) { var self = this; var types = []; var type = self._extractType(obj); if (type) { types[types.length] = type; } if (obj.responses) { var keys = Object.keys(obj.responses); keys.forEach(function(status) { var response = obj.responses[status]; var type = self._extractType(response); if (type) { types[types.length] = type; } }); } return types; }, _extractType: function(obj) { if (!obj || !obj.body || !obj.body.length) { return; } var body = obj.body; if (body instanceof Array) { body = body.filter(function(type) { if (!type.description && !type.properties && !type.items) { return false; } return true; }); if (!body.length) { return; } } else { if (!body.description && !body.properties && !body.items) { return; } } return body; }, // Computes if the resource has defined types. It will revalidate when `types` array change. _computeHasTypes: function() { return !!(this.types && this.types.length); }, _computeMethods: function(currentPath) { var r = this.raml; if (!currentPath || !r || !r.methods || !r.methods.length) { this.methods = null; return; } var methods = []; r.methods.forEach(function(method, i) { methods[methods.length] = { path: currentPath + '.methods.' + i, meta: { name: method.displayName || method.method, description: method.description } }; }); if (methods.length === 0) { methods = null; } this.methods = methods; }, _computeResources: function(currentPath) { var r = this.raml; if (!currentPath || !r || !r.resources || !r.resources.length) { this.resources = null; return; } var resources = []; r.resources.forEach(function(resource, i) { resources[resources.length] = { path: currentPath + '.resources.' + i, meta: { name: resource.displayName || resource.relativeUri, description: resource.description } }; }); if (resources.length === 0) { resources = null; } this.resources = resources; }, // Computes the value for the hasSubproperties property. _computeHasSubproperties: function(methods, resources) { return !!((methods && methods.length) || (resources && resources.length)); }, _subResourceTap: function(e) { e.preventDefault(); e.stopPropagation(); var path = e.target.dataset.path; if (!path) { return; } // this.set('currentPath', path); this.fire('raml-path-changed', { path: path }); }, _navLinksTap: function(e) { e.preventDefault(); e.stopPropagation(); var targetId = e.target.getAttribute('href'); if (!targetId) { return; } var target = this.$$(targetId); this.scroll(0, target.offsetTop); }, _scrollHandler: function() { var elm = this.$$('#nav-links'); var parent = elm.parentNode; var top = parent.getBoundingClientRect().top; if (top < 24) { var _top = Math.abs(top) + 24; elm.style.top = _top + 'px'; } else { elm.style.removeProperty('top'); } }, // 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. */ toggleTypesCollapse: function() { this.typesOpened = !this.typesOpened; }, /** * Toogles types section opened / closed. */ toggleMethodsCollapse: function() { this.methodsOpened = !this.methodsOpened; }, /** * Computes the sate of the `isWideLayout` property. */ _computeIsWideLayout: function(narrow, wide) { return !narrow && wide; }, // Computes list of traits names to display in the view. _computeTraitsList: function(traits) { if (!traits || !traits.length) { return; } return traits.map(function(trait) { if (typeof trait === 'string') { return trait; } if (trait.name) { return trait.name; } try { var keys = Object.keys(trait); return keys[0]; } catch (e) {} }).join(', '); }, // Computes list of resource type names to display in the view. _computeResourceTypesList: function(type) { if (!type) { return; } if (typeof type === 'string') { return type; } return type.map(function(item) { if (typeof item === 'string') { return item; } if (item.name) { return item.name; } try { var keys = Object.keys(item); return keys[0]; } catch (e) {} }).join(', '); }, /** * Checks if an objects deeply equals other object * * @param {Object} a First object to compare * @param {object} b Second object to compare * @return {Boolean} True if both objects have the same list of properties * and have the same values in properties. */ deepEqual: function(a, b) { var i; if ((typeof a === 'object' && a) && (typeof b === 'object' && b)) { var keysA = Object.keys(a); var keysB = Object.keys(b); var keyAlength = keysA.length; var keyBlength = keysB.length; if (keyAlength !== keyBlength) { return false; } for (i = 0; i < keyAlength; i++) { var prop = keysA[i]; if (!b.hasOwnProperty(prop)) { return false; } if (!this.deepEqual(a[prop], b[prop])) { return false; } } return true; } else if (a instanceof Array && b instanceof Array) { var aLength = a.length; var bLength = b.length; if (aLength !== bLength) { return false; } for (i = 0; i < aLength; i++) { if (!this.deepEqual(a[i], b[i])) { return false; } } return true; } else if (a !== b) { return false; } return true; } }); </script> </dom-module>