OLD | NEW |
| (Empty) |
1 <!-- | |
2 @license | |
3 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. | |
4 This code may only be used under the BSD style license found at http://polym
er.github.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/CO
NTRIBUTORS.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/P
ATENTS.txt | |
9 --> | |
10 <link rel="import" href="../../core-icons/core-icons.html"> | |
11 <link rel="import" href="../../core-icon-button/core-icon-button.html"> | |
12 <link rel="import" href="../../core-toolbar/core-toolbar.html"> | |
13 <link rel="import" href="../../core-header-panel/core-header-panel.html"> | |
14 <link rel="import" href="../../marked-element/marked-element.html"> | |
15 <link rel="import" href="../../prettify-element/prettify-import.html"> | |
16 <link rel="import" href="../../context-free-parser/context-free-parser.html"> | |
17 | |
18 <!-- | |
19 | |
20 Displays formatted source documentation scraped from input urls. | |
21 | |
22 @element core-doc-page | |
23 --> | |
24 | |
25 <polymer-element name="core-doc-page" attributes="data" relative> | |
26 | |
27 <template> | |
28 | |
29 <link rel="stylesheet" href="core-doc-page.css"> | |
30 | |
31 <core-header-panel id="panel" mode="waterfall" fit> | |
32 | |
33 <!--<core-toolbar> | |
34 <span style="margin: 0 72px;">{{data.name}}</span> | |
35 </core-toolbar>--> | |
36 | |
37 <div class="main" on-marked-js-highlight="{{hilight}}"> | |
38 | |
39 <h1>{{data.name}}</h1> | |
40 | |
41 <p> | |
42 <core-icon icon="home"></core-icon> <a href="{{data | homepageFil
ter}}">Home Page</a> | |
43 </p> | |
44 | |
45 <template if="{{data.extends}}"> | |
46 <section class="top"> | |
47 <h3 id="{{data.name}}.extends">Extends: <a href="#{{data.extends}}">
{{data.extends}}</a></h3> | |
48 </section> | |
49 </template> | |
50 | |
51 <template if="{{data.description}}"> | |
52 <section class="box top"> | |
53 <h3 id="{{data.name}}.summary">Summary</h3> | |
54 <marked-element text="{{data.description}}"></marked-element> | |
55 </section> | |
56 </template> | |
57 | |
58 <template if="{{data.attributes.length}}"> | |
59 <section class="box attribute-box"> | |
60 <h3 id="{{data.name}}.attributes">Attributes</h3> | |
61 <template repeat="{{attribute in data.attributes}}"> | |
62 <div class="details" horizontal layout> | |
63 <div class="details-name" flex id="{{data.name}}.attributes.{{at
tribute.name}}"> | |
64 <p><code>{{attribute.name}}</code></p> | |
65 </div> | |
66 <div class="details-info" flex three> | |
67 <p layout horizontal center justified> | |
68 <code><<em>{{attribute.type}}</em>></code><span class=
"default" hidden?="{{!attribute.default}}">default: <code>{{attribute.default}}<
/code></span> | |
69 </p> | |
70 <marked-element text="{{attribute.description}}"></marked-elem
ent> | |
71 </div> | |
72 </div> | |
73 </template> | |
74 </section> | |
75 </template> | |
76 | |
77 <template if="{{data.properties.length}}"> | |
78 <section class="box property-box"> | |
79 <h3 id="{{data.name}}.properties">Properties</h3> | |
80 <template repeat="{{property in data.properties}}"> | |
81 <div class="details" horizontal layout> | |
82 <div class="details-name" flex id="{{data.name}}.properties.{{pr
operty.name}}"> | |
83 <p><code>{{property.name}}</code></p> | |
84 </div> | |
85 <div class="details-info" flex three> | |
86 <p layout horizontal center justified> | |
87 <code><<em>{{property.type}}</em>></code><span class="
default" hidden?="{{!property.default}}">default: <code>{{property.default}}</co
de></span> | |
88 </p> | |
89 <marked-element text="{{property.description}}"></marked-eleme
nt> | |
90 </div> | |
91 </div> | |
92 </template> | |
93 </section> | |
94 </template> | |
95 | |
96 <template if="{{data.events.length}}"> | |
97 <section class="box event-box"> | |
98 <h3 id="{{data.name}}.events">Events</h3> | |
99 <template repeat="{{event in data.events}}"> | |
100 <div class="details" horizontal layout> | |
101 <div class="details-name" flex id="{{data.name}}.events.{{event.
name}}"> | |
102 <p><code>{{event.name}}</code></p> | |
103 </div> | |
104 <div class="details-info" flex three> | |
105 <marked-element text="{{event.description}}"></marked-element> | |
106 <template if="{{event.params.length}}"> | |
107 <div class="params"> | |
108 <p>Event details:</p> | |
109 <template repeat="{{param in event.params}}"> | |
110 <p><code><<em>{{param.type}}</em>> {{param.name}}<
/code></p> | |
111 <p><span>{{param.description}}</span></p> | |
112 </template> | |
113 </div> | |
114 </template> | |
115 </div> | |
116 </div> | |
117 </template> | |
118 </section> | |
119 </template> | |
120 | |
121 <template if="{{data.methods.length}}"> | |
122 <section class="box method-box"> | |
123 <h3 id="{{data.name}}.methods">Methods</h3> | |
124 <template repeat="{{method in data.methods}}"> | |
125 <div class="details" horizontal layout> | |
126 <div class="details-name" flex id="{{data.name}}.methods.{{metho
d.name}}"> | |
127 <p><code>{{method.name}}</code></p> | |
128 </div> | |
129 <div class="details-info" flex three> | |
130 <marked-element text="{{method.description}}"></marked-element
> | |
131 <template if="{{method.params.length}}"> | |
132 <div class="params"> | |
133 <p>Method parameters:</p> | |
134 <template repeat="{{param in method.params}}"> | |
135 <p><code><<em>{{param.type}}</em>> {{param.name}}<
/code></p> | |
136 <p><span>{{param.description}}</span></p> | |
137 </template> | |
138 </div> | |
139 </template> | |
140 </div> | |
141 </div> | |
142 </template> | |
143 </section> | |
144 </template> | |
145 | |
146 </div> | |
147 | |
148 </core-header-panel> | |
149 | |
150 </template> | |
151 | |
152 <script> | |
153 | |
154 Polymer('core-doc-page', { | |
155 | |
156 hilight: function(event, detail, sender) { | |
157 detail.code = prettyPrintOne((detail.code || '').replace(/</g,'<').re
place(/>/g,'>')); | |
158 }, | |
159 | |
160 homepageFilter: function(data) { | |
161 if (!data) { | |
162 return ''; | |
163 } | |
164 if (!data.homepage || data.homepage === 'github.io') { | |
165 return '//polymer.github.io/' + data.name; | |
166 } else { | |
167 return data.homepage; | |
168 } | |
169 }, | |
170 | |
171 dataChanged: function() { | |
172 // Wrap in async() to delay execution until the next animation frame, | |
173 // since the <template> contents won't be stamped at the time this is ex
ecuted. | |
174 this.async(function() { | |
175 var elementToFocus = this.shadowRoot.getElementById(window.location.ha
sh.slice(1)); | |
176 if (elementToFocus) { | |
177 elementToFocus.scrollIntoView(); | |
178 } | |
179 }); | |
180 } | |
181 | |
182 }); | |
183 | |
184 </script> | |
185 | |
186 </polymer-element> | |
OLD | NEW |