roojs-ui.js
[roojs1] / roojs-doc-debug.js
index 8708eef..d1a39ba 100644 (file)
@@ -22,6 +22,7 @@ Roo.doc = Roo.doc || {};
 Roo.doc.Entry  = function(config){
     Roo.doc.Entry.superclass.constructor.call(this, config);
     //this.el = Roo.get(document.body);
+    /*
     var body = Roo.get(document.body);
     body.attr({
         leftmargin : 0,
@@ -36,10 +37,11 @@ Roo.doc.Entry  = function(config){
     this.onRender(body);
     this.el = body;
     //this.onRender = function() { };
+    */
 
 };
 
-Roo.doc.Entry._calls = 0;
+//Roo.doc.Entry._calls = 0;
 
 Roo.extend(Roo.doc.Entry, Roo.bootstrap.Component,  {
     
@@ -64,17 +66,15 @@ Roo.extend(Roo.doc.Entry, Roo.bootstrap.Component,  {
             ]
         };
         
-        
          
-       
         return cfg;
     },
     
     addxtype :   function (tree, cntr)
     {
         return this.addxtypeChild(tree,cntr);
-    },
-    
+    }
+    /*
     onRender : function(ct, position)
     {
         
@@ -87,6 +87,7 @@ Roo.extend(Roo.doc.Entry, Roo.bootstrap.Component,  {
     
         Roo.bootstrap.Component.prototype.onRender.call(this, ct, position);
     }
+    */
    
 });
 
@@ -101,8 +102,11 @@ Roo.extend(Roo.doc.Entry, Roo.bootstrap.Component,  {
  * @class Roo.doc.Example
  * @extends Roo.bootstrap.Component
  * Example Element class
- * @cfg {String} lang (phpcode|programlisting) section type.
- * @cfg {String} code
+ * @cfg {String} title short title describing example
+ * @cfg {String} lang (php|txt|sql) code language.
+ * @cfg {String} code  example code
+ * @cfg {String} output The expected output from the code
+ * @cfg {String} outputlang php|txt|sql) output language
  *
  * 
  * @constructor
@@ -116,26 +120,59 @@ Roo.doc.Example = function(config){
 
 Roo.extend(Roo.doc.Example, Roo.bootstrap.Component,  {
     
-    
+    title : '',
     lang:   'php',
     code : '',
+    output : '',
+    outputlang : 'txt',
     
     getAutoCreate : function(){
         
         // no colour highlighting in here....
         
+        var code = hljs ? hljs.highlight(this.lang,this.code).value :
+                String.format('{0}',this.code).replace(/\n/g, '<br/>');
+        
+        Roo.log("code=" + code);
         var cfg ={
-            
-            cls : this.lang,
-            
+            cls : 'panel panel-info',
             cn : [
                 {
-                    tag: 'code',
-                    html :  String.format('{0}',this.code).replace(/\n/g, '<br/>')
+                    cls : 'panel-heading',
+                    html : this.title
+                },
+                {
+                    cls : 'panel-body',
+                    cn : [
+                        {
+                            tag: 'pre',
+                            cls : 'lang-' + this.lang,
+                            html :  code
+                        }
+                    ]
                 }
             ]
         };
         
+        if (this.output) {
+            
+            var out = hljs ? hljs.highlight(this.outputlang,this.output).value :
+                    String.format('{0}',this.output).replace(/\n/g, '<br/>');
+            cfg.cn.push(
+
+                {
+                    cls : 'panel-footer',
+                    cn : {
+                        tag: 'pre',
+                        html : out 
+                    }
+                }
+            
+                
+            );      
+        }
+        
+        
        
         return cfg;
     }
@@ -179,7 +216,7 @@ Roo.extend(Roo.doc.Para, Roo.bootstrap.Component,  {
         var cfg ={
             tag: 'p',
             cls: 'para',
-            html : this.html
+            html : Roo.Markdown.toHtml(this.html)
         };
          
         if (this.parent().is_list) {
@@ -239,6 +276,7 @@ Roo.extend(Roo.doc.Param, Roo.bootstrap.Component,  {
         
         //?? this is the synopsis type....
         
+        var desc = Roo.Markdown.toHtml(this.desc);
         
         if (this.parent().stype == 'parameter') {
             
@@ -253,7 +291,7 @@ Roo.extend(Roo.doc.Param, Roo.bootstrap.Component,  {
                                 tag: 'code',
                                 html : this.type + ' ' + this.name
                             },
-                            this.desc
+                            desc
                         ]
                     }
                 ]
@@ -269,7 +307,7 @@ Roo.extend(Roo.doc.Param, Roo.bootstrap.Component,  {
                             tag: 'code',
                             html : this.type
                         },
-                        this.desc
+                        desc
                     ]
                 };
                 
@@ -282,12 +320,16 @@ Roo.extend(Roo.doc.Param, Roo.bootstrap.Component,  {
         var cfg ={
             tag: 'span',
             cn : [
-                is_optional ? '[' : '',
+                this.is_optional ? '[' : '',
                 this.type,
                 ' ',
-                this.name,
+                {
+                    tag : 'b',
+                    html : this.name
+                },
                 this.defaultvalue == '' ? '' : ' = ',
                 this.defaultvalue,
+                this.is_optional ? ']' : '',
                 ',' // not really.. but let's do it anyway...
             ]
         };
@@ -296,7 +338,32 @@ Roo.extend(Roo.doc.Param, Roo.bootstrap.Component,  {
         
        
         return cfg;
+    },
+    getAutoCreateParamSection : function()
+    {
+        var desc = Roo.Markdown.toHtml(this.desc);
+        
+      
+        return {
+               tag : 'li',
+               cn : [
+                   {
+                       tag : 'p',
+                       cls: 'para',
+                       cn : [
+                           {
+                               tag: 'code',
+                               html : this.type + ' ' + this.name
+                           },
+                           desc
+                       ]
+                   }
+               ]
+           };
+        
+        
     }
+    
      
     
     
@@ -334,27 +401,56 @@ Roo.extend(Roo.doc.Section, Roo.bootstrap.Component,  {
      
     getAutoCreate : function(){
         
+        
+        var syn = Roo.factory(this.parent().items[0]);
+        
         var cfg ={
             
             cls : 'refsection',
             // id... ?
             cn : [
                 {
-                    tag: 'h1',
+                    tag: 'h3',
                     cls : 'title',
-                    html : this.stype.charAt(0).toUpperCase() + this.stype.slice(1) //ucfirst
+                    html : Roo.doc.Section.map[this.stype] 
                 }
             ]
         };
         if (this.stype == 'parameter') {
             
             // db package uses variable list here... - it results in dd/dl but the layout is messed up..
-            cfg.cn.push({
+            
+            var ul = {
                 tag: 'ul',
-                cls: 'itemizedlist roo-params'
+                cls: 'itemizedlist roo-params',
+                cn : []
+            };
+            // might not have any..
+            var params = syn.items;
+            for (var i =0; i < params.length;i++) {
+                ul.cn.push( Roo.factory(params[i]).getAutoCreateParamSection() )
+            }
+            
+            
+            cfg.cn.push(ul);
+        }
+        if (this.stype == 'return' && (syn.returndesc.length || syn.returntype.length )) {
+            
+            cfg.cn.push({
+                tag: 'p',
+                cls : 'para',
+                cn : [
+                
+                    {
+                        tag: 'code',
+                        cls: 'parameter',
+                        html : syn.returntype
+                    },
+                    syn.returndesc
+                ]
+                
             });
         }
-        
        
         return cfg;
     },
@@ -364,6 +460,7 @@ Roo.extend(Roo.doc.Section, Roo.bootstrap.Component,  {
         if (this.stype == 'parameter') {
             return this.el.select('.roo-params',true).first();
         }
+       
         return this.el;
     }
     
@@ -372,8 +469,15 @@ Roo.extend(Roo.doc.Section, Roo.bootstrap.Component,  {
 });
 
  
-
- /*
+Roo.doc.Section.map = {
+    'desc' : 'Description',
+    'parameter' : 'Parameters',
+    'return' : 'Return Value',
+    'note' : 'Notes',
+    'example' : 'Examples',
+    'throws' : 'Throws Exception'
+}
+/*
  * - LGPL
  *
  */
@@ -383,8 +487,12 @@ Roo.extend(Roo.doc.Section, Roo.bootstrap.Component,  {
  * @extends Roo.bootstrap.Component
  * Synopsis Element class
  * @cfg {String} returntype return value
+ * @cfg {String} returndesc description of return value. (used in the return section if set..)
  * @cfg {String} name title really..
  * @cfg {String} stype (function|constant)
+ * @cfg {String} memberof class name
+ * @cfg {bool} is_static is a static member
+ * @cfg {bool} is_constructor is a static member
  * 
  * @constructor
  * Create a new Synopsis
@@ -397,15 +505,36 @@ Roo.doc.Synopsis = function(config){
 
 Roo.extend(Roo.doc.Synopsis, Roo.bootstrap.Component,  {
     
-    
+    memberof : '',
+    is_static : false,
     returntype : '',
+    returndesc : '',
     name: '',
     stype:   'function',
-     
+    is_constructor : false,
+    
     getAutoCreate : function(){
         
+        var syn = this.items[0]; // hopefully...
+        
+        
+        
+        var nmp = (this.is_static ? '' : '$') +
+            this.memberof +
+            (this.is_static ? '::' : '->');
+            
+        var nm = this.name;
+        // this should probably do the params....?? then we need to disable the rendering..
+        
+        if (this.is_constructor) {
+            
+            nm = this.memberof;
+            nmp = 'new ';
+        }
+        
+         
         var cfg ={
-            tag: 'h2',
+            tag: 'h5',
             cls : 'refsynopsisdiv',
             cn : [
                 {
@@ -417,11 +546,11 @@ Roo.extend(Roo.doc.Synopsis, Roo.bootstrap.Component,  {
                                 tag:'code',
                                 cls : 'funcprototype',
                                 cn: [
-                                    this.returntype + ' ',
+                                    this.returntype + ' ' + nmp,
                                     {
                                         tag: 'strong',
                                         cls : this.stype,
-                                        html : this.name
+                                        html : nm
                                     },
                                     '(',
                                     {
@@ -454,6 +583,75 @@ Roo.extend(Roo.doc.Synopsis, Roo.bootstrap.Component,  {
     
     
    
+});
+
+
+ /*
+ * - LGPL
+ *
+ */
+
+/**
+ * @class Roo.doc.NavCategory
+ * @extends Roo.bootstrap.Component
+ * Navigation Category class
+ * @cfg {string} title
+ * @cfg {string} name
+ *
+ * Represent's an category on the left menu.
+ * - phpdoc @category elements map the pages to the categories
+ *   this should be on the left side of the menu, when the
+ *   contents are loaded, then it can expand this out, and add links
+ *   for each of the methods.
+ *
+ * 
+ * 
+ * @constructor
+ * Create a new Navigation Category
+ * @param {Object} config The config object
+ */
+
+Roo.doc.NavCategory = function(config){
+    Roo.doc.Para.superclass.constructor.call(this, config);
+    Roo.doc.NavCategory.registry[this.name] = this;
+};
+Roo.doc.NavCategory.registry = {};
+Roo.extend(Roo.doc.NavCategory, Roo.bootstrap.Component,  {
+    
+    title : '',
+    name : '',
+    getAutoCreate : function(){
+        
+        //?? this is the synopsis type....
+        
+        // this is not very fancy...
+        
+        var cfg ={
+            
+            cn : [
+                
+                {
+                    tag : 'a',
+                    cls: 'roo-nav-category',
+                    href : '#' + this.name,
+                    html : this.title
+                },
+                {
+                    cls : 'container roo-child-ctr'
+                }
+            ]
+        };
+
+        return cfg;
+    },
+    getChildContainer : function()
+    {
+        return this.el.select('.roo-child-ctr',true).first();
+    }
+    
+    
+   
 });