Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(203)

Side by Side Diff: polymer_1.0.4/bower_components/iron-doc-viewer/iron-doc-property.html

Issue 1205703007: Add polymer 1.0 to npm_modules (Closed) Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master
Patch Set: Renamed folder to 1.0.4 Created 5 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
(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>&nbsp;readOnl y</span></template>
34 <template is="dom-if" if="{{descriptor.notify}}"><span>&nbsp;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>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698