Commit 57664155 authored by Rene Saarsoo's avatar Rene Saarsoo
Browse files

Switching between index/guides/classes. 

The main docContent div now contains three divs:

- api-overview : the content on front page
- api-guide : the content of guide
- api-class : the docs of some class

These divs are shown and hidden as needed.
parent 2875362e

template/index.html

+5 −0
Original line number Diff line number Diff line
@@ -77,6 +77,10 @@ 


        </div>



        <div id="api-guide"></div>



        <div id="api-class"></div>



      </div>



      <div style="clear: both"></div>
@@ -113,6 +117,7 @@ 
  <script type="text/javascript" src="js/ClassPanel.js"></script>

  <script type="text/javascript" src="js/SourceCodePanel.js"></script>

  <script type="text/javascript" src="js/Guides.js"></script>

  <script type="text/javascript" src="js/Index.js"></script>



  <script type="text/javascript" src="js/search.js"></script>

  <script type="text/javascript" src="js/init.js"></script>

template/js/ClassPanel.js

+1 −1
Original line number Diff line number Diff line
@@ -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,

template/js/Guides.js

+4 −11
Original line number Diff line number Diff line
@@ -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('<div class="guide">'+html+'</div>');

        Ext.get("api-guide").update(html);

        this.syntaxHighlight();

    },

template/js/Index.js

0 → 100644
+49 −0
Original line number Diff line number Diff line 
/**

 * 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('<h1>Ext JS 4.0 API Documentation</h1>');



        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'});

    }

});

template/js/functions.js

+2 −2
Original line number Diff line number Diff line
@@ -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,7 +60,6 @@ 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');

    }