2 * Renders the whole class-documentation page.
4 Ext.define('Docs.OverviewPanel', {
5 extend: 'Ext.panel.Panel',
8 cls: 'doc-tab iScroll',
13 afterrender: function(cmp) {
14 // Expand member when clicked
15 cmp.el.addListener('click', function(cmp, el) {
16 Ext.get(Ext.get(el).up('.member')).toggleCls('open');
19 delegate: '.expandable'
21 // Do nothing when clicking on not-expandable items
22 cmp.el.addListener('click', Ext.emptyFn, this, {
24 delegate: '.not-expandable'
27 cmp.el.addListener('click', function(cmp, el) {
28 Docs.ClassLoader.load(el.rel);
37 * Scrolls the specified element into view
39 * @param {String} query DomQuery selector string.
41 scrollToEl: function(query) {
42 var el = Ext.get(Ext.query(query)[0]);
44 var isMember = el.hasCls("member");
45 var scrollOffset = el.getY() - (isMember ? 170 : 160);
46 var docContent = Ext.get(Ext.query('#doc-overview .x-panel-body')[0]);
47 var currentScroll = docContent.getScroll()['top'];
48 docContent.scrollTo('top', currentScroll + scrollOffset, true);
50 if (isMember && el.down(".expandable")) {
57 * Renders class documentation in this panel.
59 * @param {Object} docClass
61 load: function(docClass) {
62 this.docClass = docClass;
63 this.removeDocked(this.toolbar, true);
64 this.toolbar = Ext.create('Docs.OverviewToolbar', {
67 this.addDocked(this.toolbar);
69 this.update(this.renderClass(docClass));
70 this.syntaxHighlight();
73 // Marks all code blocks with "prettyprint" class and then calls
74 // the prettify library function to highlight them.
75 syntaxHighlight: function() {
76 Ext.Array.forEach(Ext.query("pre > code"), function(el) {
77 Ext.get(el).addCls("prettyprint");
82 renderClass: function(cls) {
83 this.classTpl = this.classTpl || new Ext.XTemplate(
84 '<div class="doc-overview-content">',
87 '<div class="members">',
93 return this.classTpl.apply({
95 hierarchy: this.renderHierarchy(cls),
96 members: this.renderMembers(cls)
100 renderHierarchy: function(cls) {
101 if (cls.superclasses.length === 0 && cls.allMixins.length === 0) {
105 this.hierarchyTpl = this.hierarchyTpl || new Ext.XTemplate(
106 '<pre class="hierarchy">',
108 '<h4>Hierarchy</h4>',
111 '<tpl if="mixins.length > 0">',
113 '<tpl for="mixins">',
114 '<div class="mixin">{.}</div>',
120 return this.hierarchyTpl.apply({
121 tree: cls.superclasses.length ? this.renderClassTree(cls.superclasses.concat(cls.name), true) : "",
122 mixins: Ext.Array.map(cls.allMixins, this.renderLink, this)
126 renderClassTree: function(superclasses, firstChild) {
127 if (superclasses.length === 0) {
131 this.classTreeTpl = this.classTreeTpl || new Ext.XTemplate(
132 '<div class="subclass {firstChild}">',
138 var name = superclasses[0];
139 return this.classTreeTpl.apply({
140 firstChild: firstChild ? 'first-child' : '',
141 link: superclasses.length > 1 ? this.renderLink(name) : '<strong>'+name+'</strong>',
142 subtree: this.renderClassTree(superclasses.slice(1))
146 renderLink: function(className) {
147 return Ext.String.format('<a href="#/api/{0}" rel="{0}" class="docClass">{0}</a>', className);
150 renderMembers: function(cls) {
152 cfg: "Config options",
153 property: "Properties",
158 // Skip rendering empty sections
160 for (var type in typeTitles) {
161 if (cls[type].length > 0) {
162 html.push(this.renderSection(cls[type], type, typeTitles[type]));
165 return html.join("");
168 renderSection: function(members, type, title) {
169 this.sectionTpl = this.sectionTpl || new Ext.XTemplate(
170 '<div id="m-{type}">',
171 '<div class="definedBy">Defined By</div>',
172 '<h3 class="members-title">{title}</h3>',
177 return this.sectionTpl.apply({
180 members: Ext.Array.map(members, this.renderMemberDiv, this).join("")
184 renderMemberDiv: function(member, index) {
185 this.memberTpl = this.memberTpl || new Ext.XTemplate(
186 '<div id="{tagname}-{name}" class="member {firstChild} {inherited}">',
187 // leftmost column: expand button
188 '<a href="#" class="side {expandable}">',
189 '<span> </span>',
191 // member name and type + link to owner class and source
192 '<div class="title">',
193 '<div class="meta">',
194 '<a href="#/api/{member}" rel="{member}" class="definedIn docClass">{member}</a><br/>',
195 '<a href="source/{href}" target="_blank" class="viewSource">view source</a>',
197 '<a href="#" class="name {expandable}">{name}</a>{signature}',
199 // short and long descriptions
200 '<div class="description">',
201 '<div class="short">{[this.shortDoc(values)]}</div>',
202 '<div class="long">{longDoc}</div>',
206 // Returns contents for short documentation
207 shortDoc: function(cfg) {
208 return cfg.shortDoc ? cfg.shortDoc : cfg.doc;
213 return this.memberTpl.apply(Ext.apply({
214 // use classname "first-child" when it's first member in its category
215 firstChild: (index === 0) ? "first-child" : "",
216 // use classname "expandable" when member has shortened description
217 expandable: member.shortDoc ? "expandable" : "not-expandable",
218 // use classname "inherited" when member is not defined in this class
219 inherited: member.member === this.docClass.name ? "not-inherited" : "inherited",
220 // method params signature or property type signature
221 signature: this.renderSignature(member),
222 // full documentation together with optional parameters and return value
223 longDoc: this.renderLongDoc(member)
227 renderSignature: function(member) {
228 if (member.tagname === "cfg" || member.tagname === "property") {
229 return "<span> : " + member.type + "</span>";
232 var ps = Ext.Array.map(member.params, this.renderShortParam, this).join(", ");
233 var signature = '( <span class="pre">' + ps + "</span> )";
234 if (member.tagname === "method") {
235 return signature + " : " + member["return"].type;
243 renderShortParam: function(param) {
244 var p = param.type + " " + param.name;
245 return param.optional ? "["+p+"]" : p;
248 renderLongDoc: function(member) {
249 var doc = member.doc;
251 if (member.params && member.params.length > 0) {
252 doc += '<h3 class="pa">Parameters</h3>';
253 var ps = Ext.Array.map(member.params, this.renderLongParam, this).join("");
254 doc += "<ul>" + ps + "</ul>";
257 if (member["return"]) {
258 doc += this.renderReturn(member["return"]);
264 renderLongParam: function(param) {
265 this.paramTpl = this.paramTpl || new Ext.XTemplate(
267 '<span class="pre">{name}</span> : {type}',
268 '<div class="sub-desc">',
274 return this.paramTpl.apply(param);
277 renderReturn: function(returnDoc) {
278 this.returnTpl = this.returnTpl || new Ext.XTemplate(
279 '<h3 class="pa">Returns</h3>',
282 '<span class="pre">{type}</span>',
283 '<div class="sub-desc">',
290 return this.returnTpl.apply(returnDoc);