Fix #5660 - roojs docs - linking and other tidy ups
[roojs1] / docs / Roo.docs.init.js
index 2866e61..62ad990 100644 (file)
@@ -3,8 +3,9 @@
 Roo.docs.init = {
     
     classes : false, // flat version of list of classes 
-    currentClass : '', // currently viewed class name
+    currentClass : '--none--', // currently viewed class name
     
+    hash : '',
     
     onReady : function()
     {
@@ -24,9 +25,16 @@ Roo.docs.init = {
         Roo.XComponent.on('buildcomplete', function() {
             
             //Roo.XComponent.modules[0].el.fireEvent('render');
-             this.loadTree();
+            this.loadTree();
         }, this);
-        Roo.get(document.body).on('click', this.onClick, this);
+        
+        
+        window.onhashchange = function() { Roo.docs.init.onHashChange(); }
+        
+        
+       
+        
+        //Roo.get(document.body).on('click', this.onClick, this);
       
         
     },
@@ -41,23 +49,43 @@ Roo.docs.init = {
             success : function(res, o)
             {
                 var d = Roo.decode(res.responseText);
-                Roo.log(d);
-                this.classes = [];
+                //Roo.log(d);
+                this.classes = {};
                 // our classes witch children first..
                 d.forEach(function(e) {
                     if (e.cn.length) {
-                        this.addTreeItem(Roo.docs.navGroup, e, 'NavSidebarItem');
+                        this.addTreeItem(Roo.docs.navGroup, e, 'NavSidebarItem', true);
+                        
+                    }
+                }, this);
+                
+                d.forEach(function(e) {
+                    if (!e.cn.length) {
+                        this.addTreeItem(Roo.docs.navGroup, e, 'NavSidebarItem' ,true);
+                    }
+                }, this);
+                
+                d.forEach(function(e) {
+                    if (e.cn.length) {
+                        this.addTreeItem(Roo.docs.mobileNavGroup, e, 'NavSidebarItem', false);
                         
                     }
                 }, this);
                 
                 d.forEach(function(e) {
                     if (!e.cn.length) {
-                        this.addTreeItem(Roo.docs.navGroup, e, 'NavSidebarItem');
+                        this.addTreeItem(Roo.docs.mobileNavGroup, e, 'NavSidebarItem', false);
                     }
                 }, this);
+                
                 var roo = Roo.docs.navGroup.items[1].menu;
                 roo.show(roo.triggerEl, '?', false);
+                if (location.hash.length) {
+                    this.loadHash();
+                    return;
+                }
+                
+                this.loadIntro();
                 
                 
             },
@@ -66,13 +94,26 @@ Roo.docs.init = {
         
         
     },
-    addTreeItem : function(parent, e, type) {
+    
+    hideChildren : function(c)
+    {
+        if (c.node.menu) {
+            c.node.menu.hide();
+        }
+        for (var i =0; i < c.cn.length; i++) {
+            this.hideChildren(c.cn[i]);
+        }
+        
+    },
+    
+    
+    addTreeItem : function(parent, e, type , parent_e) {
         
         this.classes[e.name] = e; 
         // add a node..
         var node = parent.addxtypeChild(Roo.factory({
             html: e.name.split('.').pop(),
-            id : e.name,
+           // id : e.name,
             xns : Roo.bootstrap,
             showArrow: false,
             xtype : type,
@@ -85,16 +126,20 @@ Roo.docs.init = {
                     ev.stopPropagation();
                      
                     if (c.cn.length) {
-                        Roo.log(ev);
+                        //Roo.log(ev);
                         if (mi.menu.el.hasClass('show')) {
-                            mi.menu.hide();
+                            this.hideChildren(c); //mi.menu.hide();
+                            // collapse children..
+                            
+                            
+                            
                         } else {
                             mi.menu.show(mi.menu.triggerEl,'?', false);
                         }
                         
                     }
-                    
-                    Roo.docs.init.loadDoc(c);
+                    location.hash = '#' + c.name;
+                    //Roo.docs.init.loadDoc(c);
                     
                 }).createDelegate(this,[e], true)
                 
@@ -118,6 +163,20 @@ Roo.docs.init = {
                 
             })
         }));
+        
+        // mobile nodes..?
+        
+       
+        
+        
+        
+        
+        if (parent_e !== false) {
+            e.node = node;
+            e.parent_menu = parent;
+            e.parent = parent_e == true ? null : parent_e;
+        }
+        
         parent.items.push(node);
         if (e.cn.length  && type == 'NavSidebarItem') {
             this.topm = node.menu;
@@ -129,16 +188,16 @@ Roo.docs.init = {
         }
         e.cn.forEach(function(ec) {
             var cn = ec.name.split('.').pop();
-            Roo.log(cn);
+            //Roo.log(cn);
             if (cn == cn.toLowerCase()) {
-                this.addTreeItem(node.menu, ec,'MenuItem');
+                this.addTreeItem(node.menu, ec,'MenuItem', parent_e !== false ? e : false);
             }
             
         }, this);
         e.cn.forEach(function(ec) {
             var cn = ec.name.split('.').pop();
             if (cn != cn.toLowerCase()) {
-                this.addTreeItem(node.menu, ec,'MenuItem');
+                this.addTreeItem(node.menu, ec,'MenuItem', parent_e !== false ? e : false);
             }
         }, this);
         
@@ -146,7 +205,7 @@ Roo.docs.init = {
     
     loadClass : function(name)
     {
-        if(typeof(this.classes[name]) != 'undefined') {
+        if(typeof(this.classes[name]) != 'undefined' && this.classes[name].is_class ) {
             this.loadDoc(this.classes[name]);
         }
         
@@ -177,11 +236,33 @@ Roo.docs.init = {
     
     loadDoc : function(cls)
     {
+        if (this.currentClass == cls.name) {
+            return;
+        }
+        //Roo.docs.mobileNavGroup.hide();
+        Roo.log("loadDoc?");
         Roo.docs.doc_body_content.hide();
+        
         this.currentClass = cls.name;
-        if (!cls.is_class) {
+        if (!cls ) {
+            Roo.docs.introBody.show();
             return;
         }
+        
+        // expand parents..
+        
+        var m = cls.parent_menu;
+        m.show(m.triggerEl,'?', false);
+        var mp = cls;
+        while ((mp = mp.parent)) {
+            m = mp.parent_menu;
+            m.show(m.triggerEl,'?', false);
+        }
+        cls.node.el.scrollIntoView(Roo.docs.sidebar.el,false);
+        Roo.docs.sidebar.el.select('.active').removeClass('active');
+        cls.node.el.addClass('active');
+        
+        Roo.docs.introBody.hide();
         Roo.docs.doc_body_content.show();
         Roo.Ajax.request({
             url : 'symbols/' + cls.name + '.json',
@@ -266,8 +347,168 @@ Roo.docs.init = {
         var link = e.target.href.split('#')[1];
         this.loadClass(link);
         
-    }
+    },
     
+    onHashChange : function()
+    {
+        if (this.hash == location.hash) {
+            return;
+        }
+        this.loadHash();
+        
+    },
+    loadHash : function()
+    {
+        if (location.hash.length < 2) {
+            this.loadDoc(false);
+        }
+        this.loadClass(location.hash.substring(1));
+        this.hash = location.hash;
+    },
+    
+      
+    loadIntro : function()
+    {
+      
+        
+        Roo.Ajax.request({
+            url : 'summary.txt',
+            method : 'GET',
+            success : function(res)
+            {
+                this.renderIntro(res.responseText);
+               
+                
+            },
+            scope : this
+        });
+        
+        
+    },
+    // render the really simple markdown data
+    renderIntro : function(intro)
+    {
+        
+        Roo.docs.doc_body_content.hide();
+
+        
+        var lines = intro.split("\n");
+        var tree = { 'name' : 'root', cn : []};
+        var state = [ tree ];
+        for (var i=0;i< lines.length;i++) {
+            var line = lines[i];
+            if (!line.length || line.match(/^\s+$/)) {
+                continue;
+            }
+            var sm = line.match(/^(\s+)(.*)/);
+            
+            var sml = sm ? sm[1].length: 0;
+            //Roo.log(sml);
+            sml = sml / 4; // 4 spaces indent?
+            var add = { name : sm ?  sm[2] : line, cn : [] };
+            state[sml].cn.push(add);
+            state[sml+1] = add;
+            
+        }
+        //Roo.log(tree);
+        
+        for(var i = 0; i < tree.cn.length; i++) {
+            // make a container..
+            var treei = tree.cn[i];
+            var ctree = {
+                
+                xtype : 'Column',
+                xns : Roo.bootstrap,
+                md:4,
+                sm : 6,
+                items : [ {
+                    header : treei.name,
+                    xtype : 'Container',
+                    panel : 'info',
+                    xns : Roo.bootstrap,
+                    items : []
+                }]
+            };
+            for(var ii = 0; ii < treei.cn.length; ii++) {
+                var treeii = treei.cn[ii];
+                // another container..
+               var ctreei = {
+                    header : treeii.name,
+                    xtype : 'Container',
+                    panel : 'primary',
+                    xns : Roo.bootstrap,
+                  
+                    items : [
+                         {
+                            xtype : 'Element',
+                            tag :'ul',
+                           
+                            xns : Roo.bootstrap,
+                            items : []
+                         }
+                    ]
+                };
+                ctree.items[0].items.push(ctreei);
+                var footer = '';
+                for(var iii = 0; iii < treeii.cn.length; iii++) {
+                    var treeiii = treeii.cn[iii];
+                    var ll = treeiii.name.match(/^(\S+)\s*(.*)$/);
+                    //Roo.log(treeiii.name);
+                    if (treeiii.name == 'Examples') {
+                        for (var j =0;j< treeiii.cn.length; j++) {
+                            var exs = treeiii.cn[j].name.match(/^\[([^\]]+)\](.*)$/);
+                            footer += '<li><a target="_blank" href="../' + exs[1] + '">'+exs[2] + '</a></li>';
+                        }
+                        continue;
+                        
+                        
+                    }
+        
+        
+
+                    ctreeii = {
+                            xtype : 'Element',
+                            tag :'li',
+                            xns : Roo.bootstrap,
+                            items : [
+                                {
+                                   xtype : 'Link',
+                                    href : '#' + ( ll ? ll[1] : treeiii.name ) ,
+                                    html : ll ? ll[1] : treeiii.name,
+                                    
+                                    xns : Roo.bootstrap 
+                                },
+                                {
+                                   xtype : 'Element',
+                                    tag : 'span',
+                                    html : ll && ll[2].length ? ' - ' + ll[2] : '',
+                                    xns : Roo.bootstrap 
+                                }
+                            ]
+                            
+                            
+                            
+                    };
+                    ctreei.items.push(ctreeii);
+                    
+                }
+                if (footer.length) {
+                    //Roo.log("footer:"+  footer);
+                    ctreei.footer = '<h5>Examples:</h5><ul>'+footer +'</ul>';
+                }
+        
+            }
+            
+            
+            
+            
+            
+            Roo.docs.introBody.addxtypeChild(ctree);
+        }
+        
+        
+        
+    }