+++ /dev/null
-/**
- * Renders the whole class-documentation page.
- */
-Ext.define('Docs.OverviewPanel', {
- extend: 'Ext.panel.Panel',
-
- id: 'doc-overview',
- cls: 'doc-tab 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'
- });
- }
- },
-
- /**
- * Scrolls the specified element into view
- *
- * @param {String} query DomQuery selector string.
- */
- scrollToEl: function(query) {
- 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 currentScroll = docContent.getScroll()['top'];
- docContent.scrollTo('top', currentScroll + scrollOffset, true);
-
- if (isMember && el.down(".expandable")) {
- el.addCls('open');
- }
- }
- },
-
- /**
- * Renders class documentation in this panel.
- *
- * @param {Object} docClass
- */
- load: function(docClass) {
- this.docClass = docClass;
- this.removeDocked(this.toolbar, true);
- this.toolbar = Ext.create('Docs.OverviewToolbar', {
- docClass: docClass
- });
- this.addDocked(this.toolbar);
-
- this.update(this.renderClass(docClass));
- this.syntaxHighlight();
- },
-
- // 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();
- },
-
- renderClass: function(cls) {
- this.classTpl = this.classTpl || new Ext.XTemplate(
- '<div class="doc-overview-content">',
- '{hierarchy}',
- '{doc}',
- '<div class="members">',
- '{members}',
- '</div>',
- '</div>'
- );
-
- return this.classTpl.apply({
- doc: cls.doc,
- hierarchy: this.renderHierarchy(cls),
- members: this.renderMembers(cls)
- });
- },
-
- renderHierarchy: function(cls) {
- if (cls.superclasses.length === 0 && cls.allMixins.length === 0) {
- return "";
- }
-
- this.hierarchyTpl = this.hierarchyTpl || new Ext.XTemplate(
- '<pre class="hierarchy">',
- '<tpl if="tree">',
- '<h4>Hierarchy</h4>',
- '{tree}',
- '</tpl>',
- '<tpl if="mixins.length > 0">',
- '<h4>Mixins</h4>',
- '<tpl for="mixins">',
- '<div class="mixin">{.}</div>',
- '</tpl>',
- '</tpl>',
- '</pre>'
- );
-
- 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)
- });
- },
-
- renderClassTree: function(superclasses, firstChild) {
- if (superclasses.length === 0) {
- return "";
- }
-
- this.classTreeTpl = this.classTreeTpl || new Ext.XTemplate(
- '<div class="subclass {firstChild}">',
- '{link}',
- '{subtree}',
- '</div>'
- );
-
- var name = superclasses[0];
- return this.classTreeTpl.apply({
- firstChild: firstChild ? 'first-child' : '',
- link: superclasses.length > 1 ? this.renderLink(name) : '<strong>'+name+'</strong>',
- subtree: this.renderClassTree(superclasses.slice(1))
- });
- },
-
- renderLink: function(className) {
- return Ext.String.format('<a href="#/api/{0}" rel="{0}" class="docClass">{0}</a>', className);
- },
-
- renderMembers: function(cls) {
- var typeTitles = {
- cfg: "Config options",
- property: "Properties",
- method: "Methods",
- event: "Events"
- };
-
- // 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]));
- }
- }
- return html.join("");
- },
-
- renderSection: function(members, type, title) {
- this.sectionTpl = this.sectionTpl || new Ext.XTemplate(
- '<div id="m-{type}">',
- '<div class="definedBy">Defined By</div>',
- '<h3 class="members-title">{title}</h3>',
- '{members}',
- '</div>'
- );
-
- return this.sectionTpl.apply({
- type: type,
- title: title,
- members: Ext.Array.map(members, this.renderMemberDiv, this).join("")
- });
- },
-
- renderMemberDiv: function(member, index) {
- this.memberTpl = this.memberTpl || new Ext.XTemplate(
- '<div id="{tagname}-{name}" class="member {firstChild} {inherited}">',
- // leftmost column: expand button
- '<a href="#" class="side {expandable}">',
- '<span> </span>',
- '</a>',
- // 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="source/{href}" target="_blank" class="viewSource">view source</a>',
- '</div>',
- '<a href="#" class="name {expandable}">{name}</a>{signature}',
- '</div>',
- // short and long descriptions
- '<div class="description">',
- '<div class="short">{[this.shortDoc(values)]}</div>',
- '<div class="long">{longDoc}</div>',
- '</div>',
- '</div>',
- {
- // Returns contents for short documentation
- shortDoc: function(cfg) {
- return cfg.shortDoc ? cfg.shortDoc : cfg.doc;
- }
- }
- );
-
- return this.memberTpl.apply(Ext.apply({
- // use classname "first-child" when it's first member in its category
- firstChild: (index === 0) ? "first-child" : "",
- // 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",
- // method params signature or property type signature
- signature: this.renderSignature(member),
- // full documentation together with optional parameters and return value
- longDoc: this.renderLongDoc(member)
- }, member));
- },
-
- renderSignature: function(member) {
- if (member.tagname === "cfg" || member.tagname === "property") {
- return "<span> : " + member.type + "</span>";
- }
- else {
- var ps = Ext.Array.map(member.params, this.renderShortParam, this).join(", ");
- var signature = '( <span class="pre">' + ps + "</span> )";
- if (member.tagname === "method") {
- return signature + " : " + member["return"].type;
- }
- else {
- return signature;
- }
- }
- },
-
- renderShortParam: function(param) {
- var p = param.type + " " + param.name;
- return param.optional ? "["+p+"]" : p;
- },
-
- renderLongDoc: function(member) {
- var doc = member.doc;
-
- if (member.params && member.params.length > 0) {
- doc += '<h3 class="pa">Parameters</h3>';
- var ps = Ext.Array.map(member.params, this.renderLongParam, this).join("");
- doc += "<ul>" + ps + "</ul>";
- }
-
- if (member["return"]) {
- doc += this.renderReturn(member["return"]);
- }
-
- return doc;
- },
-
- renderLongParam: function(param) {
- this.paramTpl = this.paramTpl || new Ext.XTemplate(
- '<li>',
- '<span class="pre">{name}</span> : {type}',
- '<div class="sub-desc">',
- '{doc}',
- '</div>',
- '</li>'
- );
-
- return this.paramTpl.apply(param);
- },
-
- renderReturn: function(returnDoc) {
- this.returnTpl = this.returnTpl || new Ext.XTemplate(
- '<h3 class="pa">Returns</h3>',
- '<ul>',
- '<li>',
- '<span class="pre">{type}</span>',
- '<div class="sub-desc">',
- '{doc}',
- '</div>',
- '</li>',
- '</ul>'
- );
-
- return this.returnTpl.apply(returnDoc);
- }
-});
git.ithinksw.org / extjs.git / blobdiff