arc-archive / raml-docs-resource-viewer

raml-docs-resource-viewer

<raml-docs-resource-viewer> An element that displays a documentation for a RAML's resource object

Note: This element requires currentPath property to be set* in order to compute methods and sub-resources list. It is required for navigation.

Example

<raml-docs-resource-viewer current-path="{{path}}" raml="{{resource}}"></raml-docs-resource-viewer>

Requesting navigation to method / sub-property

When the user click on the name of a method or a sub-resource then the raml-path-changed event will be fired with the path property in event detail object. Parent element(s) should use this event to handle the change and navigate to sub-resource.

Method 1) assumes that Polymer's data binding model is used and parent element listens to change in currentPath:

<raml-docs-resource-viewer current-path="{{path}}"></raml-docs-resource-viewer>

Note use of {{}} instead of [[]] (more about that). Observers can observe change to the path property and change current object.

Second method uses event handling to handle path change:

<raml-docs-resource-viewer id="resourceViewer" current-path="[[path]]"></raml-docs-resource-viewer>

init: function() {
  document.querySelector('#resourceViewer').addEventListener('raml-path-changed', this._navigate.bind(this));
},

_navigate: function(e) {
  var path = e.detail.path;
  // Do somethind with path, like use `<raml-path-to-object>` element.
}

Styling

The internal elemnts uses as uch width as they need. The code view displays code snippets without text wrapping by defaul. To set proper width set the width or max-width on this element so any code snippet will respect this limitation.

<raml-docs-resource-viewer
  style="max-width: 900px"></raml-docs-resource-viewer>

This is also can be dome by setting max-width on any other parent elements.

<raml-docs-resource-viewer> provides the following custom properties and mixins for styling:

Custom property	Description	Default
--raml-docs-resource-viewer	Mixin applied to the element	{}
--raml-docs-h1	Mixin applied to H1	{}
--raml-docs-h2	Mixin applied to H2	{}
--raml-docs-h3	Mixin applied to H3	{}
--raml-docs-item-description	Mixin applied to the description field.	{}
--raml-docs-table-max-width	Max width applied to the tables. Suggested to not exceed 800px, otherwise it may cause usability issues.	800px
--raml-docs-link	Mixin applied to the links elements.	{}
--raml-docs-link-color	Color of the link elements	#00A1DF
--docs-parameters-table	Mixin applied to all parameter table elements	{}
--docs-parameters-url-table	Mixin applied to this elements	{}
--params-table-header-background-color	Background color of table header	#00A1DF
--params-table-header-color	Font color of table header	rgba(255, 255, 255, 0.87)
--params-table-subheader-background-color	Background color of table subheader	rgba(0, 161, 223, 0.24)
--params-table-subheader-color	Font color of table subheader	rgba(0, 0, 0, 0.87)
--params-table-row-border-color	Border color of table's each row	#00A1DF
--params-table-row-background-color	Background color of table's each row	#fff
--params-table-row-color	Font color of table's each row	#fff
--docs-parameters-table-cell	Mixin applied to each cell	{}
--docs-parameters-table-meta	Mixin applied to property's metadata (example, pattern, etc)	{}
--raml-docs-resource-viewer-title-border-color	Border color applied to the border of the section headline elements	#e5e5e5
--raml-docs-resource-viewer-narrow-container-width	width of the main container in the narrow view	calc(100vw - 32px)
--raml-docs-resource-viewer-navigation	Mixin applied to the links section	{}
--raml-docs-resource-viewer-navigation-wide-layout	Mixin applied to the links section in wide layout	{}
--raml-docs-resource-viewer-content	Mixin applied to the main content section.	{}
--raml-docs-resource-viewer-container	Mixin applied to the container that is holding main content and navigation containers	{}
--arc-font-headline		Mixin applied to all headline (h1) elements in ARC ecosystem.
--arc-font-title	Mixin applied to all title elements in ARC ecosystem.	{}
--arc-font-body1	Mixin applied to a ARC's body element	{}
--sidebar-list	Mixin applied to sidebar list of links	{}
--sidebar-list-link	Mixin applied to each link in sidebar list of links	{}
--sidebar-list-link-hover	Mixin applied to :hover state for links in sidebar list of links	{}
--toggle-button	Mixin applied to toggling button (show/hide)	{}
--toggle-button-hover	Mixin applied to toggling button on hover (show/hide)	{}
--raml-docs-method-viewer-title-area-actions	Mixin applied to toggling actions area	{}
--raml-docs-method-viewer-traits-list	Mixin applied to the list of traits container	{}
--raml-docs-method-viewer-traits-list-values	Mixin applied to the list of traits values (names)	{}
--raml-docs-method-viewer-traits-list-label	Mixin applied to the list of traits list label	{}
--raml-docs-method-viewer-traits-list-values-color	Color of the traits list values (names)	rgba(0,0,0,0.94)
--raml-docs-method-viewer-traits-list-color	Color of the traits list section	rgba(0,0,0,0.74)
--raml-docs-method-viewer-traits-list-values-color	Color of the traits list values (names)	rgba(0,0,0,0.94)
--raml-docs-method-viewer-traits-list-label-color	Color of the traits list label	inherit
--raml-docs-method-viewer-traits-list-help-icon	A mixin applied to the "more info" icon	{}
--raml-docs-method-viewer-traits-list-padding	Padding applied to the traits and resource types container	0px 12px
--raml-docs-resource-viewer-annotations-color	Color of the annotations lable	rgba(0,0,0,0.74)
--raml-docs-resource-viewer-annotations	Mixin applied to the annotations label	{}

Events

Name	Description	Params
raml-path-changed	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.	none