/**
* Renders the whole class-documentation page.
*/
-Ext.define('Docs.OverviewPanel', {
+Ext.define('Docs.view.cls.Overview', {
extend: 'Ext.panel.Panel',
-
- id: 'doc-overview',
- cls: 'doc-tab iScroll',
+ alias: 'widget.classoverview',
+ requires: [
+ 'Docs.view.cls.Toolbar',
+ 'Docs.Syntax',
+ 'Docs.Settings'
+ ],
+
+ cls: 'class-overview iScroll',
title: 'Overview',
autoScroll: true,
-
- listeners: {
- afterrender: function(cmp) {
- // Expand member when clicked
- cmp.el.addListener('click', function(cmp, el) {
- Ext.get(Ext.get(el).up('.member')).toggleCls('open');
- }, this, {
- preventDefault: true,
- delegate: '.expandable'
- });
- // Do nothing when clicking on not-expandable items
- cmp.el.addListener('click', Ext.emptyFn, this, {
- preventDefault: true,
- delegate: '.not-expandable'
- });
-
- cmp.el.addListener('click', function(cmp, el) {
- Docs.ClassLoader.load(el.rel);
- }, this, {
- preventDefault: true,
- delegate: '.docClass'
- });
- }
- },
+ bodyPadding: '20',
/**
* Scrolls the specified element into view
var el = Ext.get(Ext.query(query)[0]);
if (el) {
var isMember = el.hasCls("member");
- var scrollOffset = el.getY() - (isMember ? 170 : 160);
- var docContent = Ext.get(Ext.query('#doc-overview .x-panel-body')[0]);
+ var scrollOffset = el.getY() - (isMember ? 145 : 135);
+ var docContent = this.getEl().down('.x-panel-body');
var currentScroll = docContent.getScroll()['top'];
docContent.scrollTo('top', currentScroll + scrollOffset, true);
if (isMember && el.down(".expandable")) {
el.addCls('open');
}
+ el.highlight();
}
},
*/
load: function(docClass) {
this.docClass = docClass;
- this.removeDocked(this.toolbar, true);
- this.toolbar = Ext.create('Docs.OverviewToolbar', {
- docClass: docClass
+
+ if (this.toolbar) {
+ this.removeDocked(this.toolbar, true);
+ }
+ this.toolbar = Ext.create('Docs.view.cls.Toolbar', {
+ docClass: this.docClass
});
this.addDocked(this.toolbar);
this.update(this.renderClass(docClass));
- this.syntaxHighlight();
- },
+ Docs.Syntax.highlight(this.getEl());
- // Marks all code blocks with "prettyprint" class and then calls
- // the prettify library function to highlight them.
- syntaxHighlight: function() {
- Ext.Array.forEach(Ext.query("pre > code"), function(el) {
- Ext.get(el).addCls("prettyprint");
- });
- prettyPrint();
+ if (Docs.Settings.get("hideInherited")) {
+ this.toolbar.hideInherited(true);
+ }
},
renderClass: function(cls) {
this.classTpl = this.classTpl || new Ext.XTemplate(
- '<div class="doc-overview-content">',
+ '<div>',
'{hierarchy}',
'{doc}',
'<div class="members">',
},
renderHierarchy: function(cls) {
- if (cls.superclasses.length === 0 && cls.allMixins.length === 0) {
+ if (cls.superclasses.length === 0 && cls.allMixins.length === 0 && cls.alternateClassNames.length === 0) {
return "";
}
this.hierarchyTpl = this.hierarchyTpl || new Ext.XTemplate(
'<pre class="hierarchy">',
+ '<tpl if="alternateClassNames.length > 0">',
+ '<h4>Alternate names</h4>',
+ '<tpl for="alternateClassNames">',
+ '<div class="alternate-class-name">{.}</div>',
+ '</tpl>',
+ '</tpl>',
'<tpl if="tree">',
'<h4>Hierarchy</h4>',
'{tree}',
return this.hierarchyTpl.apply({
tree: cls.superclasses.length ? this.renderClassTree(cls.superclasses.concat(cls.name), true) : "",
- mixins: Ext.Array.map(cls.allMixins, this.renderLink, this)
+ mixins: Ext.Array.map(cls.allMixins, this.renderLink, this),
+ alternateClassNames: cls.alternateClassNames
});
},
// Skip rendering empty sections
var html = [];
for (var type in typeTitles) {
- if (cls[type].length > 0) {
- html.push(this.renderSection(cls[type], type, typeTitles[type]));
+ if (cls.members[type].length > 0) {
+ html.push(this.renderSection(cls.members[type], type, typeTitles[type]));
}
}
return html.join("");
// member name and type + link to owner class and source
'<div class="title">',
'<div class="meta">',
- '<a href="#/api/{member}" rel="{member}" class="definedIn docClass">{member}</a><br/>',
+ '<a href="#/api/{owner}" rel="{owner}" class="definedIn docClass">{owner}</a><br/>',
'<a href="source/{href}" target="_blank" class="viewSource">view source</a>',
'</div>',
- '<a href="#" class="name {expandable}">{name}</a>{signature}',
+ '{signature}',
'</div>',
// short and long descriptions
'<div class="description">',
// use classname "expandable" when member has shortened description
expandable: member.shortDoc ? "expandable" : "not-expandable",
// use classname "inherited" when member is not defined in this class
- inherited: member.member === this.docClass.name ? "not-inherited" : "inherited",
+ inherited: member.owner === this.docClass.name ? "not-inherited" : "inherited",
// method params signature or property type signature
signature: this.renderSignature(member),
// full documentation together with optional parameters and return value
},
renderSignature: function(member) {
+ this.signatureTpl = this.signatureTpl || new Ext.XTemplate(
+ '{before}<a href="#/api/{member}-{tagname}-{name}" class="name {expandable}">{name}</a>{params}{after}'
+ );
+
+ var cfg = Ext.apply({}, member);
+ cfg.expandable = member.shortDoc ? "expandable" : "not-expandable";
+
+ if (member.tagname === "method" && member.name === member.owner.replace(/^.*\./, "")) {
+ cfg.before = "<strong class='constructor-signature'>new</strong>";
+ }
+
if (member.tagname === "cfg" || member.tagname === "property") {
- return "<span> : " + member.type + "</span>";
+ cfg.params = "<span> : " + member.type + "</span>";
}
else {
var ps = Ext.Array.map(member.params, this.renderShortParam, this).join(", ");
- var signature = '( <span class="pre">' + ps + "</span> )";
+ cfg.params = '( <span class="pre">' + ps + "</span> )";
if (member.tagname === "method") {
- return signature + " : " + member["return"].type;
- }
- else {
- return signature;
+ cfg.params += " : " + member["return"].type;
}
}
+
+ if (member.protected) {
+ cfg.after = "<strong class='protected-signature'>protected</strong>";
+ }
+ if (member.static) {
+ cfg.after = "<strong class='static-signature'>static</strong>";
+ }
+ if (member.deprecated) {
+ cfg.after = "<strong class='deprecated-signature'>deprecated</strong>";
+ }
+
+ return this.signatureTpl.apply(cfg);
},
renderShortParam: function(param) {
renderLongDoc: function(member) {
var doc = member.doc;
+ if (member.deprecated) {
+ var v = member.deprecated.version ? "since " + member.deprecated.version : "";
+ doc += '<div class="deprecated">';
+ doc += Ext.String.format('<p>This {0} has been <strong>deprecated</strong> {1}</p>', member.tagname, v);
+ doc += member.deprecated.text;
+ doc += '</div>';
+ }
+
if (member.params && member.params.length > 0) {
doc += '<h3 class="pa">Parameters</h3>';
var ps = Ext.Array.map(member.params, this.renderLongParam, this).join("");