From: Alan Knowles Date: Mon, 14 Jan 2019 07:07:03 +0000 (+0800) Subject: Fix #5660 - roojs docs - linking and other tidy ups X-Git-Url: http://git.roojs.org/?p=roojs1;a=commitdiff_plain;h=d199aa8ed399874c753aa414c52dc3819a24e6de Fix #5660 - roojs docs - linking and other tidy ups --- diff --git a/docs/Roo.docs.bjs b/docs/Roo.docs.bjs index 554974492c..9f518325be 100644 --- a/docs/Roo.docs.bjs +++ b/docs/Roo.docs.bjs @@ -32,12 +32,11 @@ "items" : [ { "listeners" : { - "render" : "function (_self)\n{\n // this.el.addClass(language);\n \n}" + "render" : "function (_self)\n{\n _this.sidebar = this;\n // this.el.addClass(language);\n \n}" }, "String cls" : "left-menu-sidebar", "xtype" : "NavSidebar", "$ xns" : "Roo.bootstrap", - "String style" : "padding-top:80px;", "items" : [ { "listeners" : { @@ -58,7 +57,7 @@ "items" : [ { "listeners" : { - "click" : "function (e)\n{\n document.location.reload();\n}" + "click" : "function (e)\n{\n document.location.hash = '#';\n}" }, "string href" : "#", "String cls" : "logo", @@ -89,8 +88,8 @@ "render" : "function (_self)\n{\n return;\n \n _this.navHeaderBar = this;\n \n this.el.addClass(language); \n \n var body = Roo.select('body', true).first();\n \n var mark = {\n tag: \"div\",\n cls:\"x-dlg-mask\"\n };\n \n this.mask = Roo.DomHelper.append(body, mark, true);\n \n var size = body.getSize();\n this.mask.setSize(size.width, size.height);\n \n this.mask.setStyle('z-index', '1029');\n \n this.mask.enableDisplayMode(\"block\");\n this.mask.hide();\n \n this.mask.on('click', function(){\n \n this.el.select('.navbar-collapse',true).removeClass('in'); \n this.mask.hide();\n \n }, this);\n \n \n var maxHeight = Roo.lib.Dom.getViewHeight() - this.el.select('.navbar-header', true).first().getHeight();\n \n this.el.select('.navbar-collapse', true).first().setStyle('max-height', maxHeight);\n \n}" }, "$ String brand_href" : "baseURL + '/'", - "String position" : "fixed-top", "String cls" : "mobile-header-menu", + "String position" : "fixed-top", "bool autohide" : true, "xtype" : "NavHeaderbar", "Boolean inverse" : false, @@ -108,8 +107,8 @@ "items" : [ { "xtype" : "Header", - "Number level" : 1, "$ xns" : "Roo.bootstrap", + "Number level" : 1, "String html" : "Roo JS Documentation" }, { @@ -147,8 +146,8 @@ "items" : [ { "xtype" : "Header", - "Number level" : 4, "$ xns" : "Roo.bootstrap", + "Number level" : 4, "String html" : " Class ", "items" : [ { @@ -175,10 +174,10 @@ { "listeners" : { "render" : "function (_self)\n{\n _this.doc_extends = this;\n}", - "click" : "function (e)\n{\n\n if (this.el.dom.innerHTML.length) {\n Roo.docs.init.loadDoc({ name : this.el.dom.innerHTML, is_class : true});\n }\n}" + "click" : "function (e)\n{\n\n if (this.el.dom.innerHTML.length) {\n document.location.hash = '#' + this.el.dom.innerHTML;\n \n } \n}" }, "String cls" : "doc-extends", - "Boolean preventDefault" : false, + "Boolean preventDefault" : true, "xtype" : "Link", "$ xns" : "Roo.bootstrap", "String html" : "parentcls" @@ -189,8 +188,8 @@ }, { "xtype" : "Header", - "$ xns" : "Roo.bootstrap", "Number level" : 5, + "$ xns" : "Roo.bootstrap", "String html" : "Defined in: ", "items" : [ { @@ -199,8 +198,8 @@ "click" : "function (e)\n{\n \n Roo.log([\"click\", this]);\n if (this.el.dom.innerHTML.length > 0) {\n Roo.docs.init.loadSource();\n }\n}" }, "String cls" : "doc-source", - "Boolean preventDefault" : true, "String href" : "#", + "Boolean preventDefault" : true, "xtype" : "Link", "$ xns" : "Roo.bootstrap", "String html" : "Defined in: " @@ -239,7 +238,7 @@ "String header" : "Inheritance tree", "String cls" : "doc-augments", "xtype" : "Container", - "String panel" : "success", + "String panel" : "primary", "$ xns" : "Roo.bootstrap" } ] @@ -251,10 +250,10 @@ "render" : "function (_self)\n{\n _this.configTableContainer = this;\n}" }, "String header" : "Configuration options", - "Boolean expanded" : true, "String cls" : "doc-table-container", + "Boolean expanded" : true, "xtype" : "Container", - "String panel" : "info", + "String panel" : "primary", "$ xns" : "Roo.bootstrap", "String style" : "margin-top:15px", "Boolean expandable" : true, @@ -272,8 +271,8 @@ "items" : [ { "String header" : "", - "Number md" : 11, "String dataIndex" : "name", + "Number md" : 11, "$ Function renderer" : "function(v,x,r) { \n\n return Roo.docs.template.config(r.json);\n\n\t\t\t\n}", "xtype" : "ColumnModel", "$ xns" : "Roo.grid", @@ -281,8 +280,8 @@ }, { "String header" : "Defined by", - "Number md" : 1, "String dataIndex" : "memberOf", + "Number md" : 1, "$ Function renderer" : "function(v,x,r) { \n if (r.json.memberOf == Roo.docs.init.currentClass) {\n return '';\n }\n\n\t\treturn \t'' + r.json.memberOf + '';\n\t\t\t\n}", "xtype" : "ColumnModel", "$ xns" : "Roo.grid", @@ -300,8 +299,8 @@ }, { "xtype" : "ArrayReader", - "$ xns" : "Roo.data", "$ fields" : "[ 'name', 'type', 'desc', 'memberOf' ]", + "$ xns" : "Roo.data", "* prop" : "reader" } ] @@ -315,9 +314,9 @@ "render" : "function (_self)\n{\n _this.methodsTableContainer = this;\n}" }, "String header" : "Constructor, Static and Public Methods", - "Boolean expanded" : false, "String cls" : "doc-table-container", - "String panel" : "info", + "Boolean expanded" : true, + "String panel" : "primary", "xtype" : "Container", "$ xns" : "Roo.bootstrap", "Boolean expandable" : true, @@ -334,8 +333,8 @@ "items" : [ { "String header" : " ", - "String dataIndex" : "name", "Number md" : 11, + "String dataIndex" : "name", "$ Function renderer" : "function(v,x,r) { \n\n return Roo.docs.template.method(r.json);\n\t\t \n\t\t\t\n}", "xtype" : "ColumnModel", "$ xns" : "Roo.grid", @@ -344,8 +343,8 @@ }, { "String header" : "Defined by", - "String dataIndex" : "memberOf", "Number md" : 1, + "String dataIndex" : "memberOf", "$ Function renderer" : "function(v,x,r) { \n\n if (r.json.memberOf == Roo.docs.init.currentClass) {\n return '';\n }\n\t\treturn \t'' + r.json.memberOf + '';\n\t\t\t\n}", "xtype" : "ColumnModel", "$ xns" : "Roo.grid", @@ -364,8 +363,8 @@ }, { "xtype" : "ArrayReader", - "$ xns" : "Roo.data", "$ fields" : "[ 'name', 'type', 'desc', 'memberOf' ]", + "$ xns" : "Roo.data", "* prop" : "reader" } ] @@ -379,10 +378,10 @@ "render" : "function (_self)\n{\n _this.eventsTableContainer = this;\n}" }, "String header" : "Events", - "Boolean expanded" : false, "String cls" : "doc-table-container", + "Boolean expanded" : true, "xtype" : "Container", - "String panel" : "info", + "String panel" : "primary", "$ xns" : "Roo.bootstrap", "Boolean expandable" : true, "items" : [ @@ -398,8 +397,8 @@ "items" : [ { "String header" : "", - "Number md" : 11, "String dataIndex" : "name", + "Number md" : 11, "$ Function renderer" : "function(v,x,r) { \n\n return Roo.docs.template.event(r.json);\n\t\t \n\t\t\t\n}", "xtype" : "ColumnModel", "$ xns" : "Roo.grid", @@ -407,8 +406,8 @@ }, { "String header" : "Defined by", - "Number md" : 1, "String dataIndex" : "memberOf", + "Number md" : 1, "$ Function renderer" : "function(v,x,r) { \n if (r.json.memberOf == Roo.docs.init.currentClass) {\n return '';\n }\n\n\t\treturn \t'' + r.json.memberOf + '';\n\t\t\t\n}", "xtype" : "ColumnModel", "$ xns" : "Roo.grid", @@ -421,8 +420,8 @@ "items" : [ { "xtype" : "ArrayReader", - "$ fields" : "[ 'name', 'type', 'desc', 'memberOf' ]", "$ xns" : "Roo.data", + "$ fields" : "[ 'name', 'type', 'desc', 'memberOf' ]", "* prop" : "reader" }, { diff --git a/docs/Roo.docs.init.js b/docs/Roo.docs.init.js index ec9b7457b9..b315fb87e5 100644 --- a/docs/Roo.docs.init.js +++ b/docs/Roo.docs.init.js @@ -5,6 +5,7 @@ Roo.docs.init = { classes : false, // flat version of list of classes currentClass : '', // 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); }, @@ -42,7 +50,7 @@ Roo.docs.init = { { var d = Roo.decode(res.responseText); Roo.log(d); - this.classes = []; + this.classes = {}; // our classes witch children first.. d.forEach(function(e) { if (e.cn.length) { @@ -58,6 +66,11 @@ Roo.docs.init = { }, this); var roo = Roo.docs.navGroup.items[1].menu; roo.show(roo.triggerEl, '?', false); + if (location.hash.length) { + this.loadHash(); + return; + } + this.loadIntro(); @@ -67,13 +80,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, @@ -88,14 +114,18 @@ Roo.docs.init = { if (c.cn.length) { 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) @@ -119,6 +149,9 @@ Roo.docs.init = { }) })); + e.node = node; + e.parent_menu = parent; + e.parent = parent_e; parent.items.push(node); if (e.cn.length && type == 'NavSidebarItem') { this.topm = node.menu; @@ -132,14 +165,14 @@ Roo.docs.init = { var cn = ec.name.split('.').pop(); Roo.log(cn); if (cn == cn.toLowerCase()) { - this.addTreeItem(node.menu, ec,'MenuItem'); + this.addTreeItem(node.menu, ec,'MenuItem', e); } }, 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', e); } }, this); @@ -147,7 +180,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]); } @@ -180,10 +213,24 @@ Roo.docs.init = { { 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({ @@ -270,6 +317,24 @@ Roo.docs.init = { this.loadClass(link); }, + + onHashChange : function() + { + if (this.hash == location.hash) { + return; + } + this.loadHash(); + + }, + loadHash : function() + { + if (location.hash.length < 2) { + this.loadClass(''); + } + this.loadClass(location.hash.substring(1)); + this.hash = location.hash; + }, + loadIntro : function() { @@ -292,6 +357,10 @@ Roo.docs.init = { // 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 ]; @@ -375,6 +444,7 @@ Roo.docs.init = { xtype : 'Link', href : '#' + ( ll ? ll[1] : treeiii.name ) , html : ll ? ll[1] : treeiii.name, + target : "_new", xns : Roo.bootstrap }, { diff --git a/docs/Roo.docs.js b/docs/Roo.docs.js index 9bd6a428c6..6e6c2dd8b4 100644 --- a/docs/Roo.docs.js +++ b/docs/Roo.docs.js @@ -52,10 +52,10 @@ Roo.docs = new Roo.XComponent({ { xtype : 'NavSidebar', cls : 'left-menu-sidebar', - style : 'padding-top:80px;', listeners : { render : function (_self) { + _this.sidebar = this; // this.el.addClass(language); } @@ -201,7 +201,7 @@ Roo.docs = new Roo.XComponent({ listeners : { click : function (e) { - document.location.reload(); + document.location.hash = '#'; } }, xns : Roo.bootstrap, @@ -394,14 +394,15 @@ Roo.docs = new Roo.XComponent({ xtype : 'Link', cls : 'doc-extends', html : _this._strings['494a64a432ff6a121e4ab9003c7a0df3'] /* parentcls */, - preventDefault : false, + preventDefault : true, listeners : { click : function (e) { if (this.el.dom.innerHTML.length) { - Roo.docs.init.loadDoc({ name : this.el.dom.innerHTML, is_class : true}); - } + document.location.hash = '#' + this.el.dom.innerHTML; + + } }, render : function (_self) { @@ -482,7 +483,7 @@ Roo.docs = new Roo.XComponent({ xtype : 'Container', cls : 'doc-augments', header : _this._strings['3e6ec55e2dff4342e3f25b0b0b988de9'] /* Inheritance tree */, - panel : 'success', + panel : 'primary', listeners : { render : function (_self) { @@ -502,7 +503,7 @@ Roo.docs = new Roo.XComponent({ expandable : true, expanded : true, header : _this._strings['50f33d14f129e4548c1c270fd6725a78'] /* Configuration options */, - panel : 'info', + panel : 'primary', style : 'margin-top:15px', listeners : { render : function (_self) @@ -595,9 +596,9 @@ Roo.docs = new Roo.XComponent({ xtype : 'Container', cls : 'doc-table-container', expandable : true, - expanded : false, + expanded : true, header : _this._strings['a1d108496af420635536a4e29e87d42b'] /* Constructor, Static and Public Methods */, - panel : 'info', + panel : 'primary', listeners : { render : function (_self) { @@ -690,9 +691,9 @@ Roo.docs = new Roo.XComponent({ xtype : 'Container', cls : 'doc-table-container', expandable : true, - expanded : false, + expanded : true, header : _this._strings['87f9f735a1d36793ceaecd4e47124b63'] /* Events */, - panel : 'info', + panel : 'primary', listeners : { render : function (_self) { diff --git a/docs/docs.css b/docs/docs.css index 14b563700d..4325f4d97c 100644 --- a/docs/docs.css +++ b/docs/docs.css @@ -69,7 +69,7 @@ h6, } .left-menu-sidebar.sidebar .sidebar-menu>li>a, .sidebar .sidebar-menu li.open li.treeview-menu > a { - color: #16114C; + /* color: #16114C; */ } .left-menu-sidebar.sidebar .left-menu-sidebar-options { @@ -80,10 +80,6 @@ h6, color: #999; } -.left-menu-sidebar.sidebar .sidebar-menu > li.active { - background-color: #fff; - border-color: #eee; -} .mobile-header-menu ul > li.active > a, .left-menu-sidebar.sidebar .sidebar-menu > li.active > a { @@ -91,8 +87,8 @@ h6, } .left-menu-sidebar.sidebar .sidebar-menu .treeview-menu > li.active { - background-color: #fff; - border-color: #eee; + /* background-color: #fff; + border-color: #eee; */ } .left-menu-sidebar.sidebar .sidebar-menu .treeview-menu > li.active > a { @@ -110,9 +106,16 @@ h6, .left-menu-sidebar.sidebar .sidebar-menu > li .treeview-menu a:hover, .left-menu-sidebar.sidebar .sidebar-menu > li a:hover { - color: #666; + /* color: #666; */ font-weight: bold; } +.left-menu-sidebar.sidebar .sidebar-menu>li.active>a, +.sidebar .sidebar-menu li.open li.treeview-menu.active>a +{ + color: #fff; +} + + /* block the broken bit from sidbar... */ .sidebar .sidebar-menu li.open li.treeview-menu>a { display: none; @@ -194,10 +197,16 @@ h6, .left-menu-sidebar { position: fixed; - width: 250px; /*320px;*/ - height: 100%; top: 0; left: 0; + bottom: 0px; + margin-top: 80px; + height: auto; + padding-bottom: 0; + margin-bottom: 0; + + width: 250px; /*320px;*/ + z-index: 999; background-repeat: no-repeat; background-position: center center;