Commit 2e11c9e0 authored by Rene Saarsoo's avatar Rene Saarsoo
Browse files

Titles for all pages + various fixes. 

- Each page now has title.
- Cleaned up the mess with handling URL-s.
- Opening the tab that was just closed now works correctly.
- Opening videos/examples also selects tree nodes.
parent c876b05c

template/app/History.js

+5 −5
Original line number Diff line number Diff line
@@ -17,25 +17,25 @@ Ext.define("Docs.History", { 
    // Parses current URL and navigates to the page

    navigate: function(token) {

        var url = this.parseToken(token);

        if (url.url == "/api") {

        if (url.url == "#!/api") {

            Docs.App.getController('Classes').loadIndex(true);

        }

        else if (url.type === "api") {

            Docs.App.getController('Classes').loadClass(url.url, true);

        }

        else if (url.url === "/guide") {

        else if (url.url === "#!/guide") {

            Docs.App.getController('Guides').loadIndex(true);

        }

        else if (url.type === "guide") {

            Docs.App.getController('Guides').loadGuide(url.url, true);

        }

        else if (url.url === "/video") {

        else if (url.url === "#!/video") {

            Docs.App.getController('Videos').loadIndex(true);

        }

        else if (url.type === "video") {

            Docs.App.getController('Videos').loadVideo(url.url, true);

        }

        else if (url.url === "/example") {

        else if (url.url === "#!/example") {

            Docs.App.getController('Examples').loadIndex();

        }

        else if (url.type === "example") {
@@ -49,7 +49,7 @@ Ext.define("Docs.History", { 
    // Parses current browser location

    parseToken: function(token) {

        var matches = token && token.match(/!?(\/(api|guide|example|video)(\/(.*))?)/);

        return matches ? {type: matches[2], url: matches[1]} : {};

        return matches ? {type: matches[2], url: "#!"+matches[1]} : {};

    },



    /**

template/app/controller/Classes.js

+16 −21
Original line number Diff line number Diff line
@@ -130,10 +130,10 @@ Ext.define('Docs.controller.Classes', { 
    // so restore the previous selection.

    handleUrlClick: function(url, event, view) {

        // Remove everything up to #!

        url = url.replace(/.*#!?/, "");

        url = url.replace(/.*#!?/, "#!");



        if (this.opensNewWindow(event)) {

            window.open("#!"+url);

            window.open(url);

            view && view.selectUrl(this.activeUrl ? this.activeUrl : "");

        }

        else {
@@ -151,7 +151,7 @@ Ext.define('Docs.controller.Classes', { 
        if (!noHistory) {

            Docs.History.push("#!/api");

        }

        this.getViewport().setPageTitle("");

        this.getViewport().setPageTitle("Classes");

        Ext.getCmp('doctabs').activateTab('#!/api');

        Ext.getCmp('treecontainer').showTree('classtree');

        Ext.getCmp('card-panel').layout.setActiveItem('classindex');
@@ -169,18 +169,10 @@ Ext.define('Docs.controller.Classes', { 
        Ext.getCmp('card-panel').layout.setActiveItem('classcontainer');

        Ext.getCmp('treecontainer').showTree('classtree');



        if (this.activeUrl === url) {

            this.scrollContent();

            return;

        }

        this.activeUrl = url;



        if (!noHistory) {

            Docs.History.push(url);

        }

        noHistory || Docs.History.push(url);



        // separate class and member name

        var matches = url.match(/^\/api\/(.*?)(?:-(.*))?$/);

        var matches = url.match(/^#!\/api\/(.*?)(?:-(.*))?$/);

        var cls = matches[1];

        var member = matches[2];
@@ -192,6 +184,7 @@ Ext.define('Docs.controller.Classes', { 
            this.showClass(this.cache[cls], member);

        }

        else {

            this.cache[cls] = "in-progress";

            Ext.data.JsonP.request({

                url: this.getBaseUrl() + '/output/' + cls + '.js',

                callbackName: cls.replace(/\./g, '_'),
@@ -208,26 +201,28 @@ Ext.define('Docs.controller.Classes', { 
    },



    showClass: function(cls, anchor) {



        if (cls === "in-progress") {

            return;

        }

        this.getOverview().setLoading(false);



        if (this.currentCls !== cls) {

        this.getViewport().setPageTitle(cls.name);

        if (this.currentCls !== cls) {

            this.getHeader().load(cls);

            this.getOverview().load(cls);



            this.getTree().selectUrl("/api/"+cls.name);

            this.fireEvent('showClass', cls.name);

        }



        this.currentCls = cls;



        if (anchor) {

            this.getOverview().scrollToEl("#" + anchor);

            this.fireEvent('showMember', cls.name, anchor);

        } else {

        }

        else {

            this.scrollContent();

        }



        this.getTree().selectUrl("#!/api/"+cls.name);

        this.fireEvent('showClass', cls.name);

        this.currentCls = cls;

    },



    scrollContent: function() {

template/app/controller/Examples.js

+30 −9
Original line number Diff line number Diff line
@@ -5,6 +5,10 @@ Ext.define('Docs.controller.Examples', { 
    extend: 'Ext.app.Controller',



    refs: [

        {

            ref: 'viewport',

            selector: '#viewport'

        },

        {

            ref: 'tree',

            selector: '#exampletree'
@@ -36,28 +40,45 @@ Ext.define('Docs.controller.Examples', { 
    },



    loadIndex: function() {

        Docs.History.push("#!/example");

        this.getViewport().setPageTitle("Examples");

        Ext.getCmp('doctabs').activateTab('#!/example');

        Ext.getCmp('card-panel').layout.setActiveItem('exampleindex');

        Ext.getCmp('treecontainer').showTree('exampletree');

    },



    loadExample: function(url, noHistory) {

        if (this.activeUrl === url) {

            return this.activateExampleCard();

        var example = this.getExample(url);

        this.getViewport().setPageTitle(example.text);

        if (this.activeUrl !== url) {

            var ifr = document.getElementById("exampleIframe");

            ifr.contentWindow.location.replace('extjs/examples/' + example.url);

            setTimeout(this.activateExampleCard, 150); // Prevent previous example from flashing up

        }

        else {

            this.activateExampleCard();

        }

        this.activeUrl = url;



        noHistory || Docs.History.push(url);



        this.fireEvent('showExample', url);



        var ifr = document.getElementById("exampleIframe");

        ifr.contentWindow.location.replace('extjs/' + url.replace(/\/example\//, "/examples/"));

        setTimeout(this.activateExampleCard, 150); // Prevent previous example from flashing up

        this.getTree().selectUrl(url);

        this.activeUrl = url;

    },



    activateExampleCard: function() {

        Ext.getCmp('card-panel').layout.setActiveItem('example');

        Ext.getCmp('treecontainer').showTree('exampletree');

    },



    // Given an URL returns corresponding example description object

    getExample: function(url) {

        if (!this.map) {

            this.map = {};

            Ext.Array.forEach(Docs.data.examples, function(group) {

                Ext.Array.forEach(group.items, function(e) {

                    this.map["#!/example/"+e.url] = e;

                }, this);

            }, this);

        }

        return this.map[url];

    }

});

template/app/controller/Guides.js

+32 −30
Original line number Diff line number Diff line
@@ -35,7 +35,7 @@ Ext.define('Docs.controller.Guides', { 
            },

            'guideindex > thumblist': {

                urlclick: function(url) {

                    this.loadGuide('#!/' + url);

                    this.loadGuide(url);

                }

            },

            'indexcontainer': {
@@ -64,10 +64,10 @@ Ext.define('Docs.controller.Guides', { 
    // so restore the previous selection.

    handleUrlClick: function(url, event, view) {

        // Remove everything up to #!

        url = url.replace(/.*#!?/, "");

        url = url.replace(/.*#!?/, "#!");



        if (this.opensNewWindow(event)) {

            window.open("#!"+url);

            window.open(url);

            view && view.selectUrl(this.activeUrl ? this.activeUrl : "");

        }

        else {
@@ -79,6 +79,8 @@ Ext.define('Docs.controller.Guides', { 
     * Loads the guides index

     */

    loadIndex: function() {

        Docs.History.push("#!/guide");

        this.getViewport().setPageTitle("Guides");

        Ext.getCmp('doctabs').activateTab('#!/guide');

        Ext.getCmp('card-panel').layout.setActiveItem('guideindex');

        Ext.getCmp('treecontainer').showTree('guidetree');
@@ -93,33 +95,28 @@ Ext.define('Docs.controller.Guides', { 
    loadGuide: function(url, noHistory) {

        Ext.getCmp('card-panel').layout.setActiveItem('guide');

        Ext.getCmp('treecontainer').showTree('guidetree');



        if (this.activeUrl === url) {

            return this.scrollContent();

        }

        this.activeUrl = url;

        var name = url.match(/^#!\/guide\/(.*)$/)[1];



        noHistory || Docs.History.push(url);



        var name = url.match(/^\/guide\/(.*)$/);

        if (name) {

            if (this.cache[name[1]]) {

                this.showGuide(this.cache[name[1]], url, name[1]);

            } else {

        if (this.cache[name]) {

            this.showGuide(this.cache[name], url, name);

        }

        else {

            this.cache[name] = "in-progress";

            Ext.data.JsonP.request({

                    url: this.getBaseUrl() + "/guides/" + name[1] + "/README.js",

                    callbackName: name[1],

                url: this.getBaseUrl() + "/guides/" + name + "/README.js",

                callbackName: name,

                success: function(json) {

                        this.cache[name[1]] = json;

                        this.showGuide(json, url, name[1]);

                    this.cache[name] = json;

                    this.showGuide(json, url, name);

                },

                failure: function(response, opts) {

                        this.getController('Index').showFailure("Guide <b>"+name[1]+"</b> was not found.");

                    this.getController('Index').showFailure("Guide <b>"+name+"</b> was not found.");

                },

                scope: this

            });

        }

        }

    },



    /**
@@ -130,13 +127,18 @@ Ext.define('Docs.controller.Guides', { 
     * @param {Boolean} name Name of the guide

     */

    showGuide: function(json, url, name) {

        this.getViewport().setPageTitle(json.guide.match(/<h1>(.*)<\/h1>/)[1]);

        if (json === "in-progress") {

            return;

        }

        this.getViewport().setPageTitle(json.title);

        if (this.activeUrl !== url) {

            Ext.getCmp("guide").update(json.guide);



            Docs.Syntax.highlight(Ext.get("guide"));

        }

        this.scrollContent();

        this.fireEvent('showGuide', name);

        this.getTree().selectUrl(url);

        this.activeUrl = url;

    },



    scrollContent: function() {

template/app/controller/Index.js

+8 −0
Original line number Diff line number Diff line
@@ -4,7 +4,15 @@ 
Ext.define('Docs.controller.Index', {

    extend: 'Ext.app.Controller',



    refs: [

        {

            ref: 'viewport',

            selector: '#viewport'

        }

    ],



    loadIndex: function() {

        this.getViewport().setPageTitle("");

        Ext.getCmp('doctabs').activateTab('#');

        Ext.getCmp('card-panel').layout.setActiveItem('welcome');

        Ext.getCmp('treecontainer').hide();