diff --git a/template/index.html b/template/index.html
index af7c824764e2c3d44461bf1f09c24a2a70940ede..84be56cf1f49498d2c32cddc81b80a51f451fe6e 100644
--- a/template/index.html
+++ b/template/index.html
@@ -77,6 +77,10 @@
+
+
+
+
@@ -113,6 +117,7 @@
+
diff --git a/template/js/ClassPanel.js b/template/js/ClassPanel.js
index f7b74f615396596966fc9cdd1e11a4bd3dbe9110..834b4f2ee35d1034f478af67983946abe4b6e448 100644
--- a/template/js/ClassPanel.js
+++ b/template/js/ClassPanel.js
@@ -2,7 +2,7 @@ Ext.define('Docs.ClassPanel', {
extend: 'Ext.tab.Panel',
id: 'docTabPanel',
- renderTo: 'docContent',
+ renderTo: 'api-class',
style: 'border-color: #bfbfbf;',
plain: true,
diff --git a/template/js/Guides.js b/template/js/Guides.js
index a62e0dee7f4da63fbf275b32506ff2117789bfce..6a1ac84cb31040036a1326c18bd9d3530264945b 100644
--- a/template/js/Guides.js
+++ b/template/js/Guides.js
@@ -5,16 +5,10 @@ Ext.define("Docs.Guides", {
singleton: true,
/**
- * Adds click listeners for all guide links.
+ * Loads guide from given URL.
+ *
+ * @param {String} url
*/
- init: function() {
- Ext.Array.forEach(Ext.query("#api-overview .guides a"), function(el) {
- Ext.get(el).addListener('click', function() {
- this.load(el.href);
- }, this, {preventDefault: true});
- }, this);
- },
-
load: function(url) {
Ext.Ajax.request({
url: url,
@@ -27,8 +21,7 @@ Ext.define("Docs.Guides", {
},
render: function(html) {
- Ext.get("top-block").setStyle({display: 'none'});
- Ext.get("docContent").update(''+html+'
');
+ Ext.get("api-guide").update(html);
this.syntaxHighlight();
},
diff --git a/template/js/Index.js b/template/js/Index.js
new file mode 100644
index 0000000000000000000000000000000000000000..6c3ce936fa9caf56eaebcd2ac5209e479a9c958e
--- /dev/null
+++ b/template/js/Index.js
@@ -0,0 +1,49 @@
+/**
+ * Manages the front page of docs.
+ */
+Ext.define("Docs.Index", {
+ singleton: true,
+
+ /**
+ * Initializes listeners for all kind of links on front page.
+ */
+ init: function() {
+ // load front page when clicked on logo
+ Ext.get(Ext.query(".header > h2 > a")[0]).addListener('click', function() {
+ this.setIndexMode();
+ }, this, {preventDefault: true});
+
+ // load guide when clicked on guide link
+ Ext.Array.forEach(Ext.query("#api-overview .guides a"), function(el) {
+ Ext.get(el).addListener('click', function() {
+ this.setGuideMode();
+ Docs.Guides.load(el.href);
+ }, this, {preventDefault: true});
+ }, this);
+ },
+
+ setIndexMode: function() {
+ Ext.get("top-block").setStyle({display: 'block'});
+ Ext.get("top-block").update('Ext JS 4.0 API Documentation
');
+
+ Ext.get("api-overview").setStyle({display: 'block'});
+ Ext.get("api-guide").setStyle({display: 'none'}).update("");
+ Ext.get("api-class").setStyle({display: 'none'});
+ },
+
+ setGuideMode: function() {
+ Ext.get("top-block").setStyle({display: 'none'});
+
+ Ext.get("api-overview").setStyle({display: 'none'});
+ Ext.get("api-guide").setStyle({display: 'block'});
+ Ext.get("api-class").setStyle({display: 'none'});
+ },
+
+ setClassMode: function() {
+ Ext.get("top-block").setStyle({display: 'block'});
+
+ Ext.get("api-overview").setStyle({display: 'none'});
+ Ext.get("api-guide").setStyle({display: 'none'}).update("");
+ Ext.get("api-class").setStyle({display: 'block'});
+ }
+});
diff --git a/template/js/functions.js b/template/js/functions.js
index f01ca9ed7dc94cef5f515ec97c28910a0ac05f7a..2b61fe41eed04b905e6b88bc868dcf4388ff32a3 100644
--- a/template/js/functions.js
+++ b/template/js/functions.js
@@ -30,6 +30,7 @@ var getDocClass = function(cls, noHistory) {
Docs.History.push(cls);
}
+ Docs.Index.setClassMode();
var docTabPanel = Ext.getCmp('docTabPanel');
if (docTabPanel) {
Ext.getCmp('docTabPanel').setActiveTab(0);
@@ -59,8 +60,7 @@ var getDocClass = function(cls, noHistory) {
var showClass = function(cls, anchor) {
var docTabPanel = Ext.getCmp('docTabPanel');
if (!docTabPanel) {
- Ext.get('docContent').update('');
- Ext.create('Docs.ClassPanel');
+ Ext.create('Docs.ClassPanel');
}
Ext.get('docTabPanel').show();
diff --git a/template/js/init.js b/template/js/init.js
index fcf9d4241a7aa83a1389e9f9a346e4d9e49c781c..af414ff7f762af05bfe9436734b3b95aab293bff 100644
--- a/template/js/init.js
+++ b/template/js/init.js
@@ -9,7 +9,7 @@ Ext.onReady(function() {
};
Ext.tip.QuickTipManager.init();
- Docs.Guides.init();
+ Docs.Index.init();
Docs.History.init();
Ext.create('Docs.ClassTree', {
diff --git a/template/resources/sass/style.scss b/template/resources/sass/style.scss
index 17c5bd379a73b69be0cf59b57cd29326670c159e..2fc79184a65a99665819b54695027341206a519f 100644
--- a/template/resources/sass/style.scss
+++ b/template/resources/sass/style.scss
@@ -323,7 +323,7 @@ pre, code, kbd, samp, tt {
font-weight: bold;
padding-bottom: 0.5em; } }
-#doc-overview, .guide {
+#doc-overview, #api-guide {
pre {
background-color: #f7f7f7;
border: solid 1px #e8e8e8;
@@ -491,7 +491,7 @@ pre, code, kbd, samp, tt {
margin: 10px 0;
overflow: auto; }
-.doc-tab,.guide {
+.doc-tab, #api-guide {
min-height: 100px;
.clr {
clear: both; }
@@ -512,38 +512,37 @@ pre, code, kbd, samp, tt {
h4 {
font-weight: bold; } }
-#container {
- .guide {
- top: 10px;
- padding-right: 10px;
+#api-guide {
+ top: 10px;
+ padding-right: 10px;
+ font-size: 14px;
+ h1 {
+ background: url(../images/doc-m.png) no-repeat -5px 0;
+ padding: 5px 0 10px 55px;
+ font-family: "klavika-web-1", "klavika-web-2", sans-serif;
+ letter-spacing: -1px;
+ margin-bottom: 16px;
+ font-size: 2.3em;
+ color: #66ab16; }
+ h2 {
+ font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+ letter-spacing: -1px;
+ line-height: 20px;
+ border-bottom: 1px solid #f1f1f1;
+ font-size: 20px;
+ font-weight: bold;
+ color: #314e64;
+ margin: 30px 0 15px;
+ padding-bottom: 5px; }
+ h3 {
+ font-weight: bold;
+ color: #314e64;
+ margin-top: 1em;
font-size: 14px;
- h1 {
- background: url(../images/doc-m.png) no-repeat -5px 0;
- padding: 5px 0 10px 55px;
- font-family: "klavika-web-1", "klavika-web-2", sans-serif;
- letter-spacing: -1px;
- margin-bottom: 16px;
- font-size: 2.3em;
- color: #66ab16; }
- h2 {
- font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
- letter-spacing: -1px;
- line-height: 20px;
- border-bottom: 1px solid #f1f1f1;
- font-size: 20px;
- font-weight: bold;
- color: #314e64;
- margin: 30px 0 15px;
- padding-bottom: 5px; }
- h3 {
- font-weight: bold;
- color: #314e64;
- margin-top: 1em;
- font-size: 14px;
- line-height: 16px;
- margin-bottom: 4px; }
- hr {
- display: none; } } }
+ line-height: 16px;
+ margin-bottom: 4px; }
+ hr {
+ display: none; } }
.doc-tab {
.doc-overview-content {