OLD | NEW |
(Empty) | |
| 1 <!-- |
| 2 @license |
| 3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. |
| 4 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
| 5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
| 7 Code distributed by Google as part of the polymer project is also |
| 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 9 --> |
| 10 <link rel="import" href="../marked-element/marked-element.html"> |
| 11 <link rel="import" href="../paper-styles/paper-styles.html"> |
| 12 <link rel="import" href="../paper-button/paper-button.html"> |
| 13 <link rel="import" href="../polymer/polymer.html"> |
| 14 <link rel="import" href="../prism-element/prism-highlighter.html"> |
| 15 |
| 16 <link rel="import" href="iron-doc-property.html"> |
| 17 |
| 18 <!-- |
| 19 Renders documentation describing an element's API. |
| 20 |
| 21 `iron-doc-viewer` renders element and behavior descriptions as extracted by |
| 22 [Hydrolysis](https://github.com/PolymerLabs/hydrolysis). You can provide them |
| 23 either via binding... |
| 24 |
| 25 <iron-doc-viewer descriptor="{{elementDescriptor}}"></iron-doc-viewer> |
| 26 |
| 27 ...or by placing the element descriptor in JSON as the text content of an |
| 28 `iron-doc-viewer`: |
| 29 |
| 30 <iron-doc-viewer> |
| 31 { |
| 32 "is": "awesome-sauce", |
| 33 "properties": [ |
| 34 {"name": "isAwesome", "type": "boolean", "desc": "Is it awesome?"}, |
| 35 ] |
| 36 } |
| 37 </iron-doc-viewer> |
| 38 |
| 39 However, be aware that due to current limitations in Polymer 0.8, _changes_ to |
| 40 the text content will not be respected, only the initial value will be loaded. |
| 41 If you wish to update the documented element, please set it via the `descriptor` |
| 42 property. |
| 43 |
| 44 @demo demo/index.html Basic Demo |
| 45 --> |
| 46 <dom-module id="iron-doc-viewer"> |
| 47 |
| 48 <link rel="import" type="css" href="iron-doc-viewer.css"> |
| 49 |
| 50 <template> |
| 51 <prism-highlighter></prism-highlighter> |
| 52 |
| 53 <section id="summary" class="card" hidden$="[[!descriptor.desc]]"> |
| 54 <header>Documentation</header> |
| 55 <marked-element markdown="{{descriptor.desc}}"></marked-element> |
| 56 </section> |
| 57 |
| 58 <nav id="api"> |
| 59 <header>API Reference</header> |
| 60 <paper-button id="togglePrivate" |
| 61 on-tap="_togglePrivate">{{_privateToggleLabel}}</paper-button> |
| 62 </nav> |
| 63 |
| 64 <section id="properties" class="card" hidden$="{{_noneToShow(_showPrivate,_p
roperties)}}"> |
| 65 <header>Properties</header> |
| 66 <template is="dom-repeat" items="{{_properties}}" hidden$="{{!_properties.
length}}"> |
| 67 <iron-doc-property descriptor="{{item}}"></iron-doc-property> |
| 68 </template> |
| 69 </section> |
| 70 |
| 71 <section id="methods" class="card" hidden$="{{_noneToShow(_showPrivate,_met
hods)}}"> |
| 72 <header>Methods</header> |
| 73 <template is="dom-repeat" items="{{_methods}}"> |
| 74 <iron-doc-property descriptor="{{item}}"></iron-doc-property> |
| 75 </template> |
| 76 </section> |
| 77 |
| 78 <section id="events" class="card" hidden$="{{_noneToShow(_showPrivate,_event
s)}}"> |
| 79 <header>Events</header> |
| 80 <template is="dom-repeat" items="{{_events}}"> |
| 81 <iron-doc-property descriptor="{{item}}"></iron-doc-property> |
| 82 </template> |
| 83 </section> |
| 84 |
| 85 <section id="behaviors" class="card" hidden$="{{_hideBehaviors(_behaviors)}}
"> |
| 86 <header>Behaviors</header> |
| 87 <template is="dom-repeat" items="{{_behaviors}}"> |
| 88 <p on-click="_broadcastBehavior">{{item}}</p> |
| 89 </template> |
| 90 </section> |
| 91 |
| 92 </template> |
| 93 |
| 94 </dom-module> |
| 95 |
| 96 <script> |
| 97 (function() { |
| 98 |
| 99 Polymer({ |
| 100 |
| 101 is: 'iron-doc-viewer', |
| 102 |
| 103 properties: { |
| 104 |
| 105 /** |
| 106 * The [Hydrolysis](https://github.com/PolymerLabs/hydrolysis)-generated |
| 107 * element descriptor to display details for. |
| 108 * |
| 109 * Alternatively, the element descriptor can be provided as JSON via the t
ext content |
| 110 * of this element. |
| 111 * |
| 112 * @type {hydrolysis.ElementDescriptor} |
| 113 */ |
| 114 descriptor: { |
| 115 type: Object, |
| 116 observer: '_descriptorChanged', |
| 117 }, |
| 118 |
| 119 /** Whether private properties should be hidden or shown. */ |
| 120 _showPrivate: { |
| 121 type: Boolean, |
| 122 value: false, |
| 123 observer: '_showPrivateChanged', |
| 124 }, |
| 125 |
| 126 /** The label to show for the Private API toggle. */ |
| 127 _privateToggleLabel: String, |
| 128 |
| 129 /** |
| 130 * Broadcast when another component is clicked on |
| 131 * @param {String} detail name of the component |
| 132 * iron-doc-viewer container should load component if possible |
| 133 * @event iron-doc-viewer-component-selected |
| 134 */ |
| 135 }, |
| 136 |
| 137 ready: function() { |
| 138 var jsonDescriptor = this._loadJson(); |
| 139 // Note that this is only an error during element creation. You are free |
| 140 // to stomp over the descriptor after it is ready. |
| 141 if (jsonDescriptor && this.descriptor) { |
| 142 console.error( |
| 143 this, |
| 144 'received both a bound descriptor:', this.descriptor, |
| 145 'and JSON descriptor:', this._jsonDescriptor, |
| 146 'Please provide only one'); |
| 147 throw new Error( |
| 148 '<iron-doc-viewer> accepts either a bound or JSON descriptor; not bo
th'); |
| 149 } |
| 150 |
| 151 if (jsonDescriptor) { |
| 152 this.descriptor = jsonDescriptor; |
| 153 } |
| 154 }, |
| 155 |
| 156 /** |
| 157 * Loads a hydrolysis element descriptor (as JSON) from the text content of |
| 158 * this element, if present. |
| 159 * |
| 160 * @return {hydrolysis.ElementDescriptor} The parsed descriptor, or `null`. |
| 161 */ |
| 162 _loadJson: function() { |
| 163 var textContent = ''; |
| 164 Array.prototype.forEach.call(Polymer.dom(this).childNodes, function(node)
{ |
| 165 textContent = textContent + node.textContent; |
| 166 }); |
| 167 textContent = textContent.trim(); |
| 168 if (textContent === '') return null; |
| 169 |
| 170 try { |
| 171 return JSON.parse(textContent); |
| 172 } catch(error) { |
| 173 console.error('Failure when parsing JSON:', textContent, error); |
| 174 throw error; |
| 175 } |
| 176 }, |
| 177 |
| 178 /** Converts `descriptor` into our template-friendly `_model`. */ |
| 179 _descriptorChanged: function() { |
| 180 if (!this.descriptor) return; |
| 181 |
| 182 // Split the documented properties between functions and other types. |
| 183 var properties = []; |
| 184 var methods = []; |
| 185 |
| 186 for (var i = 0, property; property = this.descriptor.properties[i]; i++) { |
| 187 (property.type === 'Function' ? methods : properties).push(property); |
| 188 } |
| 189 this._properties = properties; |
| 190 this._methods = methods; |
| 191 this._events = this.descriptor.events || []; |
| 192 this._behaviors = this.descriptor.behaviors || []; |
| 193 |
| 194 this.toggleAttribute('abstract', this.descriptor.abstract); |
| 195 }, |
| 196 |
| 197 _collapsedChanged: function() { |
| 198 this._collapseToggleLabel = this._collapsed ? 'expand' : 'collapse'; |
| 199 |
| 200 // Bound values aren't exposed to dom-repeat's scope. |
| 201 var properties = this.querySelectorAll('iron-doc-property'); |
| 202 for (var i = 0, property; property = properties[i]; i++) { |
| 203 property.collapsed = this._collapsed; |
| 204 } |
| 205 }, |
| 206 |
| 207 _toggleCollapsed: function() { |
| 208 this._collapsed = !this._collapsed; |
| 209 }, |
| 210 |
| 211 _showPrivateChanged: function() { |
| 212 this._privateToggleLabel = (this._showPrivate ? 'hide' : 'show') + ' priva
te API'; |
| 213 this.toggleClass('show-private', this._showPrivate); |
| 214 }, |
| 215 |
| 216 _togglePrivate: function() { |
| 217 this._showPrivate = !this._showPrivate; |
| 218 }, |
| 219 |
| 220 _noneToShow: function(showPrivate, items) { |
| 221 for (var i = 0; i < items.length; i++) { |
| 222 if (showPrivate || !items[i].private) return false; |
| 223 } |
| 224 return true; |
| 225 }, |
| 226 |
| 227 _hideBehaviors: function(behaviors) { |
| 228 return behaviors === null || behaviors.length === 0; |
| 229 }, |
| 230 |
| 231 _broadcastBehavior: function(ev) { |
| 232 this.fire('iron-doc-viewer-component-selected', ev.target._templateInstanc
e.item); |
| 233 } |
| 234 }); |
| 235 |
| 236 })(); |
| 237 </script> |
OLD | NEW |