docs/class_tree.js

   1
   2 Ext.define('Docs.ClassTree', {
   3     extend: 'Ext.tree.Panel',
   4
   5     id: 'treePanelCmp',
   6     cls: 'iScroll',
   7     renderTo: 'treePanel',
   8     folderSort: true,
   9     useArrows: true,
  10
  11     height: Ext.core.Element.getViewportHeight() - 170,
  12     border: false,
  13     bodyBorder: false,
  14     padding: '0 0 0 20',
  15
  16     // dockedItems: [
  17     //     {
  18     //         xtype: 'container',
  19     //         layout: 'hbox',
  20     //         dock: 'top',
  21     //         margin: '0 0 10 0',
  22     //         items: [
  23     //             {
  24     //                 xtype: 'button',
  25     //                 text: 'Favorites',
  26     //                 clickEvent: 'mouseover',
  27     //                 iconCls: 'icon-fav',
  28     //                 baseCls: 'historyBut',
  29     //                 margin: '0 10 0 0',
  30     //                 menu: {
  31     //                     plain: true,
  32     //                     items: [],
  33     //                     listeners: {
  34     //                         click: function(menu, item) {
  35     //                             if (item) {
  36     //                                 getDocClass(item.text)
  37     //                             }
  38     //                         }
  39     //                     }
  40     //                 }
  41     //             },
  42     //             {
  43     //                 xtype: 'button',
  44     //                 text: 'History',
  45     //                 iconCls: 'icon-hist',
  46     //                 clickEvent: 'mouseover',
  47     //                 baseCls: 'historyBut',
  48     //                 menu: {
  49     //                     id: 'historyItems',
  50     //                     plain: true,
  51     //                     items: [
  52     //                         { text: 'Ext.button.Button', iconCls: 'icon-class' }
  53     //                     ],
  54     //                     listeners: {
  55     //                         click: function(menu, item) {
  56     //                             if (item) {
  57     //                                 getDocClass(item.text)
  58     //                             }
  59     //                         }
  60     //                     }
  61     //                 }
  62     //             }
  63     //         ]
  64     //     }
  65     // ],
  66
  67     listeners: {
  68                 itemclick: function(view, node) {
  69
  70                     var clsName = node.raw ? node.raw.clsName : node.data.clsName;
  71
  72                     if (clsName) {
  73                 getDocClass(clsName)
  74                     } else if (!node.isLeaf()){
  75                             if (node.isExpanded()) {
  76                                     node.collapse(false);
  77                             } else{
  78                                     node.expand(false);
  79                             }
  80                         }
  81                 },
  82                 render: function() {
  83                     var self = this;
  84                     setTimeout(function() {
  85                 self.selectCurrentClass()
  86                     }, 500)
  87                 }
  88         },
  89
  90         selectCurrentClass: function() {
  91
  92             var treePanel = Ext.getCmp('treePanelCmp');
  93
  94                 if (req.docClass != 'undefined') {
  95
  96                         var classNode = Ext.getCmp('treePanelCmp').getRootNode().findChildBy(function(n){
  97                             return req.docClass == n.raw.clsName;
  98                         }, null, true);
  99
 100                         if (classNode) {
 101                                 treePanel.getSelectionModel().select(classNode);
 102                                 classNode.bubble(function(n){
 103                                     n.expand()
 104                                 });
 105                         }
 106                 }
 107         }
 108 });
 109
 110
 111 Ext.define('CouchView', {
 112     extend: 'Ext.data.Model',
 113     fields: [ 'id', 'key', 'value' ]
 114 });
 115
 116 var convert = function(classes) {
 117         var tree = {},
 118                 nodes = [],
 119                 id = 0;
 120
 121                 c = classes;
 122
 123         classes.keys.forEach(function(cls) {
 124
 125                 var parts = cls.split('.'),
 126                         prevObject = tree;
 127
 128                 var stitchedParts = [];
 129                 for (var i = 0; i < parts.length; i++) {
 130                         if (i > 0 && parts[i + 1]  && parts[i + 1][0] && parts[i][0] && parts[i][0].match(/^[A-Z]/) && parts[i + 1][0].match(/^[A-Z]/)) {
 131                                 var n = parts.splice(i, 2).join('.');
 132                                 parts.splice(i, 0, n);
 133                         }
 134                 }
 135
 136                 parts.forEach(function(part) {
 137                         if (!prevObject[part]) {
 138                                 prevObject[part] = {};
 139                         }
 140
 141                         prevObject = prevObject[part];
 142                 });
 143         });
 144
 145         function handleTree(cls, tree) {
 146                 var innerNodes = [];
 147
 148         var treeKeys = [];
 149         for (var key in tree) treeKeys.push(key);
 150
 151                 treeKeys.forEach(function(key) {
 152                         innerNodes.push({
 153                                 id: id++,
 154                                 text: key
 155                         });
 156                         innerNodes[innerNodes.length - 1].allowDrop = false;
 157                         var clsName = (cls ? (cls + ".") : "") + key;
 158                         var clsData = classes.get(clsName);
 159
 160                         var subTreeKeys = [];
 161             for (var k2 in tree[key]) subTreeKeys.push(k2);
 162                         if (subTreeKeys.length) {
 163                                 innerNodes[innerNodes.length - 1].children = handleTree(clsName, tree[key]);
 164                                 innerNodes[innerNodes.length - 1].allowDrag = false;
 165                 innerNodes[innerNodes.length - 1].iconCls = 'icon-pkg';
 166                 if(clsData) {
 167                     innerNodes[innerNodes.length - 1].clsName = clsName;
 168                     innerNodes[innerNodes.length - 1].text = innerNodes[innerNodes.length - 1].text + '<a rel="'+clsName+'" class="fav"></a>';
 169                     innerNodes[innerNodes.length - 1].iconCls = 'icon-' + clsData.data.value.clsType;
 170                 }
 171                         } else {
 172                                 if(clsData) {
 173                     innerNodes[innerNodes.length - 1].iconCls = 'icon-' + clsData.data.value.clsType;
 174                                 }
 175
 176                 innerNodes[innerNodes.length - 1].text = innerNodes[innerNodes.length - 1].text + '<a rel="'+clsName+'" class="fav"></a>';
 177                                 innerNodes[innerNodes.length - 1].leaf = true;
 178                                 innerNodes[innerNodes.length - 1].clsName = clsName;
 179                         }
 180                 });
 181
 182                 return innerNodes;
 183         }
 184
 185         return handleTree(null, tree);
 186 };
 187
 188 var classPackagesStore;
 189
 190 var resizeWindows;
 191 var resizeWindowFn = function() {
 192
 193     var treePanelCmp = Ext.getCmp('treePanelCmp'),
 194         docTabPanel = Ext.getCmp('docTabPanel'),
 195         container = Ext.get('container'),
 196         viewportHeight = Ext.core.Element.getViewportHeight(),
 197         viewportWidth = Ext.core.Element.getViewportWidth();
 198
 199     if (Ext.get('notice')) {
 200         viewportHeight = viewportHeight - 40;
 201     }
 202
 203     container.setStyle({position: 'absolute', height: String(viewportHeight - 40) + 'px', width: String(viewportWidth - 280) + 'px'})
 204
 205     if (treePanelCmp) {
 206         treePanelCmp.setHeight(viewportHeight - 140);
 207     } else {
 208         Ext.get('docContent').setHeight(viewportHeight - 90);
 209     }
 210
 211     if (docTabPanel) {
 212         docTabPanel.setHeight(viewportHeight - 125);
 213     }
 214
 215     resizeWindows = null;
 216 };
 217
 218 // Resize the main window and tree on resize
 219 Ext.onReady(function() {
 220
 221     resizeWindowFn();
 222
 223     window.onresize = function() {
 224         if(!resizeWindows) {
 225             resizeWindows = setTimeout(resizeWindowFn, 100);
 226         }
 227     };
 228
 229     if (req.standAloneMode) {
 230         if (window.location.href.match(/api/)) {
 231                         req.baseDocURL = '../';
 232         } else if (window.location.href.match(/guide/)){
 233                         req.baseDocURL = '../';
 234                 }
 235     }
 236
 237     classPackagesStore = new Ext.data.Store({
 238         model: 'CouchView',
 239         proxy: {
 240             type: 'jsonp',
 241             callbackParam: 'callback',
 242             url : req.baseDocURL + '/classes.json',
 243             reader: {
 244                 type: 'json',
 245                 root: 'rows'
 246             }
 247         },
 248         autoLoad: true,
 249         listeners: {
 250             load: function() {
 251                 var nodes = convert(this.data)[0];
 252                 nodes.expanded = true;
 253                 Ext.create('Docs.ClassTree', {
 254                     root: nodes
 255                 });
 256             }
 257         }
 258     });
 259
 260 });