From 31831436f4f0e208ecf8e17733fdff7f210aa4e2 Mon Sep 17 00:00:00 2001 From: Nick Poulden Date: Mon, 1 Aug 2011 16:35:18 -0700 Subject: [PATCH] More refactoring and fixes for redesign --- template/app/Application.js | 7 ++- template/app/controller/Classes.js | 23 +------ template/app/controller/Content.js | 24 +++++++ template/app/controller/Favorites.js | 4 +- template/app/controller/Guides.js | 50 +++++++++++---- template/app/controller/Tabs.js | 20 ++++-- template/app/view/Viewport.js | 6 ++ template/app/view/cls/Index.js | 1 - template/app/view/examples/Index.js | 94 ---------------------------- template/app/view/examples/Tree.js | 3 +- template/app/view/guides/Index.js | 19 +++++- template/app/view/tree/Tree.js | 2 +- 12 files changed, 111 insertions(+), 142 deletions(-) create mode 100644 template/app/controller/Content.js diff --git a/template/app/Application.js b/template/app/Application.js index 35ad1b27..b648c0e6 100644 --- a/template/app/Application.js +++ b/template/app/Application.js @@ -20,6 +20,7 @@ Ext.define('Docs.Application', { ], controllers: [ + 'Content', 'Classes', 'Search', 'InlineExamples', @@ -45,9 +46,9 @@ Ext.define('Docs.Application', { Docs.initEventTracking(); } - setInterval(function(){ - Ext.DomQuery.select('link')[4].href = "resources/css/viewport.css?" + Math.ceil(Math.random() * 100000000) - }, 1000) + // setInterval(function(){ + // Ext.DomQuery.select('link')[4].href = "resources/css/viewport.css?" + Math.ceil(Math.random() * 100000000) + // }, 1000) } }); diff --git a/template/app/controller/Classes.js b/template/app/controller/Classes.js index d7f2c205..776c0dbc 100644 --- a/template/app/controller/Classes.js +++ b/template/app/controller/Classes.js @@ -3,7 +3,7 @@ * between pages. */ Ext.define('Docs.controller.Classes', { - extend: 'Ext.app.Controller', + extend: 'Docs.controller.Content', requires: [ 'Docs.History', @@ -39,7 +39,7 @@ Ext.define('Docs.controller.Classes', { }, { ref: 'tree', - selector: 'classtree' + selector: 'classtree[cmpName=classtree]' }, { ref: 'favoritesGrid', @@ -74,7 +74,7 @@ Ext.define('Docs.controller.Classes', { }); this.control({ - 'classtree': { + 'classtree[cmpName=classtree]': { urlclick: function(url, event) { this.handleUrlClick(url, event, this.getTree()); } @@ -149,15 +149,6 @@ Ext.define('Docs.controller.Classes', { } }, - // Code for the middle mouse button - MIDDLE: 1, - - // True when middle mouse button pressed or shift/ctrl key pressed - // together with mouse button (for Mac) - opensNewWindow: function(event) { - return event.button === this.MIDDLE || event.shiftKey || event.ctrlKey; - }, - /** * Loads main page. * @@ -247,14 +238,6 @@ Ext.define('Docs.controller.Classes', { } this.currentCls = cls; - }, - - /** - * Returns base URL used for making AJAX requests. - * @return {String} URL - */ - getBaseUrl: function() { - return document.location.href.replace(/#.*/, "").replace(/index.html/, ""); } }); diff --git a/template/app/controller/Content.js b/template/app/controller/Content.js new file mode 100644 index 00000000..ccfcd9a9 --- /dev/null +++ b/template/app/controller/Content.js @@ -0,0 +1,24 @@ +/** + * Controller for Welcome page + */ +Ext.define('Docs.controller.Content', { + extend: 'Ext.app.Controller', + + // Code for the middle mouse button + MIDDLE: 1, + + // True when middle mouse button pressed or shift/ctrl key pressed + // together with mouse button (for Mac) + opensNewWindow: function(event) { + return event.button === this.MIDDLE || event.shiftKey || event.ctrlKey; + }, + + /** + * Returns base URL used for making AJAX requests. + * @return {String} URL + */ + getBaseUrl: function() { + return document.location.href.replace(/#.*/, "").replace(/index.html/, ""); + } + +}); diff --git a/template/app/controller/Favorites.js b/template/app/controller/Favorites.js index 6897827d..c99296e7 100644 --- a/template/app/controller/Favorites.js +++ b/template/app/controller/Favorites.js @@ -51,7 +51,7 @@ Ext.define('Docs.controller.Favorites', { add: function(url) { // Show favorites when first favorite added if (Docs.Favorites.getCount() > 0) { - this.getPanel().show(); + // this.getPanel().show(); } // Add favorite marking to tree this.getTree().setFavorite(url, true); @@ -59,7 +59,7 @@ Ext.define('Docs.controller.Favorites', { remove: function(url) { // Hide favorites when favorites list empty if (Docs.Favorites.getCount() === 0) { - this.getPanel().hide(); + // this.getPanel().hide(); } // remove favorite marking from tree this.getTree().setFavorite(url, false); diff --git a/template/app/controller/Guides.js b/template/app/controller/Guides.js index 44478f39..fe8a0e39 100644 --- a/template/app/controller/Guides.js +++ b/template/app/controller/Guides.js @@ -2,7 +2,18 @@ * Controller for Welcome page */ Ext.define('Docs.controller.Guides', { - extend: 'Ext.app.Controller', + extend: 'Docs.controller.Content', + + refs: [ + { + ref: 'viewport', + selector: '#viewport' + }, + { + ref: 'tree', + selector: 'classtree[cmpName=guidetree]' + } + ], init: function() { this.addEvents( @@ -15,6 +26,11 @@ Ext.define('Docs.controller.Guides', { ); this.control({ + 'classtree[cmpName=guidetree]': { + urlclick: function(url, event) { + this.handleUrlClick(url, event, this.getTree()); + } + }, 'indexcontainer': { afterrender: function(cmp) { cmp.el.addListener('click', function(event, el) { @@ -28,10 +44,26 @@ Ext.define('Docs.controller.Guides', { }) }, + // We don't want to select the class that was opened in another window, + // so restore the previous selection. + handleUrlClick: function(url, event, view) { + // Remove everything up to # + url = url.replace(/.*#/, ""); + + if (this.opensNewWindow(event)) { + window.open("#"+url); + view && view.selectUrl(this.activeUrl ? this.activeUrl : ""); + } + else { + this.loadGuide(url); + } + }, + loadIndex: function() { Ext.getCmp('doctabs').activateTab('#/guide'); Ext.getCmp('card-panel').layout.setActiveItem('guides'); - Ext.getCmp('tree-container').hide(); + Ext.getCmp('tree-container').show(); + Ext.getCmp('tree-container').layout.setActiveItem(2); }, /** @@ -41,6 +73,10 @@ Ext.define('Docs.controller.Guides', { * @param {Boolean} noHistory true to disable adding entry to browser history */ loadGuide: function(url, noHistory) { + Ext.getCmp('card-panel').layout.setActiveItem('guide'); + Ext.getCmp('tree-container').show(); + Ext.getCmp('tree-container').layout.setActiveItem(2); + if (this.activeUrl === url) return; this.activeUrl = url; @@ -54,7 +90,7 @@ Ext.define('Docs.controller.Guides', { success: function(json) { this.getViewport().setPageTitle(json.guide.match(/

(.*)<\/h1>/)[1]); Ext.getCmp("guide").update(json.guide); - Ext.getCmp('card-panel').layout.setActiveItem(2); + Docs.Syntax.highlight(Ext.get("guide")); this.fireEvent('showGuide', name[1]); this.getTree().selectUrl(url); @@ -65,14 +101,6 @@ Ext.define('Docs.controller.Guides', { scope: this }); } - }, - - /** - * Returns base URL used for making AJAX requests. - * @return {String} URL - */ - getBaseUrl: function() { - return document.location.href.replace(/#.*/, "").replace(/index.html/, ""); } }); diff --git a/template/app/controller/Tabs.js b/template/app/controller/Tabs.js index 2bfee023..f90d9b8b 100644 --- a/template/app/controller/Tabs.js +++ b/template/app/controller/Tabs.js @@ -6,8 +6,12 @@ Ext.define('Docs.controller.Tabs', { refs: [ { - ref: 'tree', - selector: 'classtree' + ref: 'classTree', + selector: 'classtree[cmpName=classtree]' + }, + { + ref: 'guideTree', + selector: 'classtree[cmpName=guidetree]' } ], @@ -15,10 +19,14 @@ Ext.define('Docs.controller.Tabs', { this.getController('Classes').addListener({ showClass: function(cls) { - this.addTabFromTree("/api/"+cls); + this.addTabFromTree("/api/"+cls, this.getClassTree()); }, + scope: this + }); + + this.getController('Guides').addListener({ showGuide: function(guide) { - this.addTabFromTree("/guide/"+guide); + this.addTabFromTree("/guide/"+guide, this.getGuideTree()); }, scope: this }); @@ -37,8 +45,8 @@ Ext.define('Docs.controller.Tabs', { * Adds a tab based on information from the class tree * @param {String} url The url of the record in the tree */ - addTabFromTree: function(url) { - var treeRecord = this.getTree().findRecordByUrl(url); + addTabFromTree: function(url, tree) { + var treeRecord = tree.findRecordByUrl(url); Ext.getCmp('doctabs').addTab({ href: '#' + treeRecord.raw.url, text: treeRecord.raw.text, diff --git a/template/app/view/Viewport.js b/template/app/view/Viewport.js index 98d3ffa3..a138d719 100644 --- a/template/app/view/Viewport.js +++ b/template/app/view/Viewport.js @@ -104,10 +104,16 @@ Ext.define('Docs.view.Viewport', { items: [ { xtype: 'classtree', + cmpName: 'classtree', root: Docs.classData }, { xtype: 'examplestree' + }, + { + xtype: 'classtree', + cmpName: 'guidetree', + root: Docs.guideData } ] }, diff --git a/template/app/view/cls/Index.js b/template/app/view/cls/Index.js index 708cd77f..384bd424 100644 --- a/template/app/view/cls/Index.js +++ b/template/app/view/cls/Index.js @@ -43,7 +43,6 @@ Ext.define('Docs.view.cls.Index', { extractData: function() { var data = { notice: Ext.get("notice-text"), - guides: Ext.get("guides-content"), categories: Ext.get("categories-content") }; for (var i in data) { diff --git a/template/app/view/examples/Index.js b/template/app/view/examples/Index.js index 72285f38..0fee1bc4 100644 --- a/template/app/view/examples/Index.js +++ b/template/app/view/examples/Index.js @@ -28,97 +28,3 @@ Ext.define('Docs.view.examples.Index', { this.callParent(arguments); } }); - -// Ext.onReady(function() { -// -// (Ext.defer(function() { -// // Instantiate Ext.App instance -// var App = Ext.create('Ext.App', {}); -// -// var catalog = Ext.samples.samplesCatalog; -// -// for (var i = 0, c; c = catalog[i]; i++) { -// c.id = 'sample-' + i; -// } -// -// var store = Ext.create('Ext.data.JsonStore', { -// idProperty : 'id', -// fields : ['id', 'title', 'samples'], -// data : catalog -// }); -// -// var panel = Ext.create('Ext.Panel', { -// frame : false, -// renderTo : Ext.get('all-demos'), -// height : 300, -// autoScroll : true, -// items : Ext.create('Ext.samples.SamplePanel', { -// store : store -// }) -// }); -// -// var tpl = Ext.create('Ext.XTemplate', -// '
  • {title:stripTags}
    • ' -// ); -// tpl.overwrite('sample-menu', catalog); -// -// Ext.select('#sample-spacer').remove(); -// -// var headerEl = Ext.get('hd'), -// footerEl = Ext.get('ft'), -// bodyEl = Ext.get('bd'), -// sideBoxEl = bodyEl.down('div[class=side-box]'), -// titleEl = bodyEl.down('h1#pagetitle'); -// -// var doResize = function() { -// var windowHeight = Ext.getDoc().getViewSize(false).height; -// -// var footerHeight = footerEl.getHeight() + footerEl.getMargin().top, -// titleElHeight = titleEl.getHeight() + titleEl.getMargin().top, -// headerHeight = headerEl.getHeight() + titleElHeight; -// -// var warnEl = Ext.get('fb'); -// var warnHeight = warnEl ? warnEl.getHeight() : 0; -// -// var availHeight = windowHeight - ( footerHeight + headerHeight + 14) - warnHeight; -// var sideBoxHeight = sideBoxEl.getHeight(); -// -// panel.setHeight((availHeight > sideBoxHeight) ? availHeight : sideBoxHeight); -// }; -// -// // Resize on demand -// Ext.EventManager.onWindowResize(doResize); -// -// var firebugWarning = function () { -// var cp = Ext.create('Ext.state.CookieProvider'); -// -// if(window.console && window.console.firebug && ! cp.get('hideFBWarning')){ -// var tpl = Ext.create('Ext.Template', -// '' -// ); -// var newEl = tpl.insertFirst('all-demos'); -// -// Ext.fly('hideWarning').on('click', function() { -// Ext.fly(newEl).slideOut('t',{remove:true}); -// cp.set('hideFBWarning', true); -// doResize(); -// }); -// Ext.fly(newEl).slideIn(); -// doResize(); -// } -// }; -// -// var hideMask = function () { -// Ext.get('loading').remove(); -// Ext.fly('loading-mask').animate({ -// opacity:0, -// remove:true, -// callback: firebugWarning -// }); -// }; -// -// Ext.defer(hideMask, 250); -// doResize(); -// -// },500)); -// }); diff --git a/template/app/view/examples/Tree.js b/template/app/view/examples/Tree.js index 30236b89..b050067d 100644 --- a/template/app/view/examples/Tree.js +++ b/template/app/view/examples/Tree.js @@ -40,8 +40,7 @@ Ext.define('Docs.view.examples.Tree', { this.root.children.push({ text: sampleGroup.title, - children: children, - expanded: true + children: children }) }, this); diff --git a/template/app/view/guides/Index.js b/template/app/view/guides/Index.js index 5142fe03..2ce16e3d 100644 --- a/template/app/view/guides/Index.js +++ b/template/app/view/guides/Index.js @@ -1,7 +1,22 @@ Ext.define('Docs.view.guides.Index', { extend: 'Ext.container.Container', alias : 'widget.guideindex', - cls: 'guideindex', + cls: 'class-list', + + initComponent: function() { + this.tpl = new Ext.XTemplate( + '
    ', + '

    Guides

    ', + '{guides}', + '
    ' + ); + + var guideData = Ext.get("guides-content"); + this.data = { guides: guideData.dom.innerHTML }; + guideData.remove(); + + this.callParent(arguments); + } - html: 'Guides' }); + diff --git a/template/app/view/tree/Tree.js b/template/app/view/tree/Tree.js index 4cac01e3..dcd7b77f 100644 --- a/template/app/view/tree/Tree.js +++ b/template/app/view/tree/Tree.js @@ -40,7 +40,7 @@ Ext.define('Docs.view.tree.Tree', { ); this.nodeTpl = new Ext.XTemplate( - '{text} ', + '{text} ', '' ); -- GitLab