docs/js/App.js

   1 /**
   2  * Manages the front page and switching between the main parts of docs
   3  * app.
   4  */
   5 Ext.define("Docs.App", {
   6     singleton: true,
   7
   8     /**
   9      * Returns base URL used for making AJAX requests.
  10      * @return {String} URL
  11      */
  12     getBaseUrl: function() {
  13         return document.location.href.replace(/#.*/, "").replace(/index.html/, "");
  14     },
  15
  16     /**
  17      * Initializes listeners for all kind of links on front page.
  18      */
  19     init: function() {
  20         this.initResizeWindow();
  21
  22         Ext.core.DomHelper.append(Ext.get("api-overview"), this.renderOverviewData(Docs.overviewData));
  23
  24         // load front page when clicked on logo
  25         Ext.get(Ext.query(".header > h2 > a")[0]).addListener('click', function() {
  26             this.setIndexMode();
  27             Docs.History.push("");
  28         }, this, {preventDefault: true});
  29
  30         // load guide when clicked on guide link
  31         Ext.Array.forEach(Ext.query("#api-overview .guides a"), function(el) {
  32             Ext.get(el).addListener('click', function() {
  33                 this.setGuideMode();
  34                 Docs.Guides.load(el.className);
  35             }, this, {preventDefault: true});
  36         }, this);
  37
  38         // render classes tree
  39         Ext.create('Docs.ClassTree', {
  40             root: Docs.classData
  41         });
  42
  43         Ext.tip.QuickTipManager.init();
  44         Docs.History.init();
  45     },
  46
  47     setIndexMode: function() {
  48         Ext.get("top-block").setStyle({display: 'block'});
  49         Ext.get("top-block").update('<h1>Ext JS 4.0 API Documentation</h1>');
  50
  51         Ext.get("api-overview").setStyle({display: 'block'});
  52         Ext.get("api-guide").setStyle({display: 'none'}).update("");
  53         Ext.get("api-class").setStyle({display: 'none'});
  54     },
  55
  56     setGuideMode: function() {
  57         Ext.get("top-block").setStyle({display: 'none'});
  58
  59         Ext.get("api-overview").setStyle({display: 'none'});
  60         Ext.get("api-guide").setStyle({display: 'block'});
  61         Ext.get("api-class").setStyle({display: 'none'});
  62     },
  63
  64     setClassMode: function() {
  65         Ext.get("top-block").setStyle({display: 'block'});
  66
  67         Ext.get("api-overview").setStyle({display: 'none'});
  68         Ext.get("api-guide").setStyle({display: 'none'}).update("");
  69         Ext.get("api-class").setStyle({display: 'block'});
  70     },
  71
  72     initResizeWindow: function() {
  73         this.resizeWindow();
  74         // Resize the main window and tree on resize
  75         window.onresize = Ext.bind(function() {
  76             if (!this.resizeTimeout) {
  77                 this.resizeTimeout = Ext.Function.defer(this.resizeWindow, 100, this);
  78             }
  79         }, this);
  80     },
  81
  82     resizeWindow: function() {
  83         var treePanelCmp = Ext.getCmp('treePanelCmp'),
  84             docTabPanel = Ext.getCmp('docTabPanel'),
  85             container = Ext.get('container'),
  86             viewportHeight = Ext.core.Element.getViewportHeight(),
  87             viewportWidth = Ext.core.Element.getViewportWidth();
  88
  89         if (Ext.get('notice')) {
  90             viewportHeight = viewportHeight - 40;
  91         }
  92
  93         container.setStyle({
  94             position: 'absolute',
  95             height: String(viewportHeight - 40) + 'px',
  96             width: String(viewportWidth - 280) + 'px'
  97         });
  98
  99         if (treePanelCmp) {
 100             treePanelCmp.setHeight(viewportHeight - 140);
 101         } else {
 102             Ext.get('docContent').setHeight(viewportHeight - 90);
 103         }
 104
 105         if (docTabPanel) {
 106             docTabPanel.setHeight(viewportHeight - 125);
 107         }
 108
 109         this.resizeTimeout = null;
 110     },
 111
 112     renderOverviewData: function(data) {
 113         var tpl = new Ext.XTemplate(
 114             '<tpl for="organisation">',
 115                 '<div class="category">',
 116                     '<h1>{name}</h1>',
 117                     '<tpl for="categories">',
 118                         '<div class="{align}">',
 119                         '<tpl for="items">',
 120                             '<h3>{.}</h3>',
 121                             '<div class="links">',
 122                                 '{[this.renderClasses(values)]}',
 123                             '</div>',
 124                         '</tpl>',
 125                         '</div>',
 126                     '</tpl>',
 127                     '<div style="clear:both"></div>',
 128                 '</div>',
 129             '</tpl>',
 130             {
 131                 renderClasses: function(category) {
 132                     return Ext.Array.map(data.categories[category].classes, function(cls) {
 133                         return Ext.String.format('<a href="#/api/{0}" rel="{0}" class="docClass">{0}</a>', cls);
 134                     }).join("\n");
 135                 }
 136             }
 137         );
 138         return tpl.apply(data);
 139     }
 140 });