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/typography.html"> |
| 12 <link rel="import" href="../polymer/polymer.html"> |
| 13 |
| 14 <!-- |
| 15 Renders documentation describing a specific property of an element. |
| 16 |
| 17 Give it a hydrolysis `PropertyDescriptor` (via `descriptor`), and watch it go! |
| 18 --> |
| 19 <dom-module id="iron-doc-property"> |
| 20 |
| 21 <link rel="import" type="css" href="iron-doc-property.css"> |
| 22 |
| 23 <template> |
| 24 <div id="transitionMask"> |
| 25 <div id="signature"> |
| 26 <span class="name">{{descriptor.name}}</span><span class="params">(<span
>{{_paramText}}</span>)</span> |
| 27 <span class="return" hidden$="{{!descriptor.return}}">➙ <span class="typ
e">{{descriptor.return.type}}</span></span> |
| 28 </div> |
| 29 <div id="details"> |
| 30 <div id="meta" hidden$="{{_computeHideMeta(descriptor)}}"> |
| 31 <span id="type" class="type">{{descriptor.type}}</span> |
| 32 <span id="default" hidden$="{{_computeHideDefault(descriptor.default)}
}">default: <span class="value">{{_computeDefaultDisplay(descriptor.default)}}</
span></span> |
| 33 <template is="dom-if" if="{{descriptor.readOnly}}"><span> readOnl
y</span></template> |
| 34 <template is="dom-if" if="{{descriptor.notify}}"><span> notify</s
pan></template> |
| 35 </div> |
| 36 <ol id="params" hidden$="{{_computeHideParams(descriptor,return)}}"> |
| 37 <template is="dom-repeat" items="{{descriptor.params}}"> |
| 38 <li hidden$="{{!item.type}}"> |
| 39 <span class="name">{{item.name}}</span> |
| 40 <span class="type">{{item.type}}</span> |
| 41 <marked-element markdown="{{item.desc}}"></marked-element> |
| 42 </li> |
| 43 </template> |
| 44 <li class="return" hidden$="{{!descriptor.return}}">Returns |
| 45 <span class="type">{{descriptor.return.type}}</span> |
| 46 <marked-element markdown="{{descriptor.return.desc}}"></marked-eleme
nt> |
| 47 </li> |
| 48 </ol> |
| 49 <marked-element id="desc" markdown="{{descriptor.desc}}" hidden$="{{!des
criptor.desc}}"></marked-element> |
| 50 </div> |
| 51 </div> |
| 52 </template> |
| 53 |
| 54 </dom-module> |
| 55 |
| 56 <script> |
| 57 (function() { |
| 58 |
| 59 Polymer({ |
| 60 |
| 61 is: 'iron-doc-property', |
| 62 |
| 63 properties: { |
| 64 |
| 65 /** |
| 66 * The [Hydrolysis](https://github.com/PolymerLabs/hydrolysis)-generated |
| 67 * element descriptor to display details for. |
| 68 * |
| 69 * Alternatively, the element descriptor can be provided as JSON via the t
ext content |
| 70 * of this element. |
| 71 * |
| 72 * @type {hydrolysis.PropertyDescriptor} |
| 73 */ |
| 74 descriptor: { |
| 75 type: Object, |
| 76 observer: '_descriptorChanged', |
| 77 }, |
| 78 |
| 79 /** |
| 80 * Whether the property should show a one-liner, or full summary. |
| 81 * |
| 82 * Note that this property _is_ reflected as an attribute, but we perform |
| 83 * the reflection manually. In order to support the CSS transitions, we |
| 84 * must calculate the element height before setting the attribute. |
| 85 */ |
| 86 collapsed: { |
| 87 type: Boolean, |
| 88 value: false, |
| 89 observer: '_collapsedChanged', |
| 90 }, |
| 91 |
| 92 }, |
| 93 |
| 94 listeners: { |
| 95 'transitionEnd': '_onTransitionEnd', |
| 96 'webkitTransitionEnd': '_onTransitionEnd', |
| 97 }, |
| 98 |
| 99 ready: function() { |
| 100 this._isReady = true; |
| 101 }, |
| 102 |
| 103 /** |
| 104 * Resets any state that was set up for transitions. |
| 105 * |
| 106 * We are careful to reset our explicit heights after a transition |
| 107 * completes, so that the property doesn't clip values if the user resizes |
| 108 * their viewport. |
| 109 */ |
| 110 _onTransitionEnd: function(event) { |
| 111 if (event.path[0] !== this.$.transitionMask) return; |
| 112 this.$.transitionMask.style.height = ''; |
| 113 }, |
| 114 |
| 115 _descriptorChanged: function() { |
| 116 this.toggleAttribute('private', this.descriptor.private); |
| 117 this.toggleAttribute('configuration', this.descriptor.configuration); |
| 118 this.toggleAttribute('function', this.descriptor.function); |
| 119 this._paramText = (this.descriptor.params || []).map(function(param) { |
| 120 return param.name; |
| 121 }).join(', '); |
| 122 }, |
| 123 |
| 124 /** |
| 125 * Reflects `collapsed` as the `_collapsed` attribute. |
| 126 * |
| 127 * "Why not use `reflectToAttribute: true`?", you ask? A fine question! |
| 128 * |
| 129 * We avoid simple reflection purely because there is no purely declarative |
| 130 * way of transitioning to/from `height: auto`. This callback manages |
| 131 * setting explicit heights for the property so that CSS can interpolate it. |
| 132 * |
| 133 * @see #_onTransitionEnd |
| 134 */ |
| 135 _collapsedChanged: function() { |
| 136 if (!this._isReady) { |
| 137 this.toggleAttribute('_collapsed', this.collapsed); |
| 138 return; |
| 139 } |
| 140 |
| 141 var container = this.$.transitionMask; |
| 142 var collapsed = this.collapsed; |
| 143 |
| 144 // Measure `height: auto`, which we will need regardless of transition |
| 145 // direction. We assume that the collapsed state has an explicit height |
| 146 // set via CSS rules; so we do not bother measuring that. |
| 147 container.style.height = 'auto'; |
| 148 var fullHeight = container.offsetHeight; |
| 149 |
| 150 // Then, we reset to the start state. Changing directions mid-transition |
| 151 // is _not_ supported! |
| 152 if (this.collapsed) { |
| 153 container.style.height = fullHeight + 'px'; // Height 'auto'. |
| 154 } else { |
| 155 container.style.height = ''; // Height specified by CSS rule. |
| 156 } |
| 157 |
| 158 // We must wait a frame so that the transition engine has a chance to know |
| 159 // that something actually changed. |
| 160 requestAnimationFrame(function() { |
| 161 this.toggleAttribute('_collapsed', collapsed); |
| 162 if (this.collapsed) { |
| 163 container.style.height = ''; // Height specified by CSS rule. |
| 164 } else { |
| 165 container.style.height = fullHeight + 'px'; // Height 'auto'. |
| 166 } |
| 167 }.bind(this)); |
| 168 }, |
| 169 |
| 170 // hidden if no type and no defaults |
| 171 _computeHideMeta: function(descriptor) { |
| 172 return descriptor.type === undefined && descriptor.default === undefined; |
| 173 }, |
| 174 |
| 175 // hidden if no params, and no return value |
| 176 _computeHideParams: function(descriptor,ret) { |
| 177 return (!descriptor.params || descriptor.params.length === 0) && !ret; |
| 178 }, |
| 179 |
| 180 _computeHideDefault: function(def) { |
| 181 return def === undefined; |
| 182 }, |
| 183 |
| 184 _computeDefaultDisplay: function(def) { |
| 185 if (def === '') |
| 186 return "''"; |
| 187 return def; |
| 188 } |
| 189 |
| 190 }); |
| 191 |
| 192 })(); |
| 193 </script> |
OLD | NEW |