From 7b2de4546cbb885d3466cbdb8add1a24b8f89914 Mon Sep 17 00:00:00 2001 From: Nick Poulden Date: Tue, 2 Aug 2011 15:17:50 -0700 Subject: [PATCH] Scroll state fixes --- template/app/Application.js | 8 ++--- template/app/Renderer.js | 6 ++-- template/app/controller/Classes.js | 32 ++++++++++------- template/app/controller/Examples.js | 2 +- template/app/controller/Guides.js | 56 ++++++++++++++++++++--------- template/app/controller/Index.js | 1 - 6 files changed, 66 insertions(+), 39 deletions(-) diff --git a/template/app/Application.js b/template/app/Application.js index ccf19510..77485f19 100644 --- a/template/app/Application.js +++ b/template/app/Application.js @@ -35,7 +35,7 @@ Ext.define('Docs.Application', { Docs.App = this; Docs.Favorites.init(); Docs.Settings.init(); - Docs.classState = {}; + Docs.contentState = {}; Ext.create('Docs.view.Viewport'); @@ -46,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/Renderer.js b/template/app/Renderer.js index 2435232f..9ed68780 100644 --- a/template/app/Renderer.js +++ b/template/app/Renderer.js @@ -187,8 +187,8 @@ Ext.define('Docs.Renderer', { var memberName = member.tagname + '-' + member.name, open; - if (Docs.classState && Docs.classState['/api/' + this.cls.name] && Docs.classState['/api/' + this.cls.name][memberName]) { - open = Docs.classState['/api/' + this.cls.name][memberName].expanded; + if (Docs.contentState && Docs.contentState['/api/' + this.cls.name] && Docs.contentState['/api/' + this.cls.name][memberName]) { + open = Docs.contentState['/api/' + this.cls.name][memberName].expanded; } return this.memberTpl.apply(Ext.apply({ @@ -266,7 +266,7 @@ Ext.define('Docs.Renderer', { doc += member.deprecated.text; doc += ''; } - + doc += this.renderParamsAndReturn(member); return doc; diff --git a/template/app/controller/Classes.js b/template/app/controller/Classes.js index b479e082..37c93fac 100644 --- a/template/app/controller/Classes.js +++ b/template/app/controller/Classes.js @@ -1,6 +1,5 @@ /** - * Controller responsible for loading classes, guides, and switching - * between pages. + * Controller responsible for loading classes */ Ext.define('Docs.controller.Classes', { extend: 'Docs.controller.Content', @@ -103,13 +102,13 @@ Ext.define('Docs.controller.Classes', { memberName = member.getAttribute('id'), baseUrl = '/api/' + this.currentCls.name; - Docs.classState[baseUrl] = Docs.classState[baseUrl] || {}; - Docs.classState[baseUrl][memberName] = Docs.classState[baseUrl][memberName] || {}; + Docs.contentState[baseUrl] = Docs.contentState[baseUrl] || {}; + Docs.contentState[baseUrl][memberName] = Docs.contentState[baseUrl][memberName] || {}; if (member.hasCls('open')) { - Docs.classState[baseUrl][memberName].expanded = false; + Docs.contentState[baseUrl][memberName].expanded = false; } else { - Docs.classState[baseUrl][memberName].expanded = true; + Docs.contentState[baseUrl][memberName].expanded = true; this.fireEvent('showMember', clsName, memberName); } member.toggleCls('open'); @@ -126,8 +125,8 @@ Ext.define('Docs.controller.Classes', { cmp.body.addListener('scroll', function(cmp, el) { var baseUrl = '/api/' + this.currentCls.name; - Docs.classState[baseUrl] = Docs.classState[baseUrl] || {}; - Docs.classState[baseUrl]['scrollOffset'] = el.scrollTop; + Docs.contentState[baseUrl] = Docs.contentState[baseUrl] || {}; + Docs.contentState[baseUrl]['scrollOffset'] = el.scrollTop; }, this); } } @@ -180,7 +179,10 @@ Ext.define('Docs.controller.Classes', { Ext.getCmp('tree-container').show(); Ext.getCmp('tree-container').layout.setActiveItem(0); - if (this.activeUrl === url) return; + if (this.activeUrl === url) { + this.scrollContent(); + return; + } this.activeUrl = url; if (!noHistory) { @@ -228,16 +230,20 @@ Ext.define('Docs.controller.Classes', { this.fireEvent('showClass', cls.name); } + this.currentCls = cls; + if (anchor) { this.getOverview().scrollToEl("#" + anchor); this.fireEvent('showMember', cls.name, anchor); } else { - var baseUrl = '/api/' + cls.name, - offset = (Docs.classState[baseUrl] && Docs.classState[baseUrl].scrollOffset) || 0; - this.getOverview().getEl().down('.x-panel-body').scrollTo('top', offset); + this.scrollContent(); } + }, - this.currentCls = cls; + scrollContent: function() { + var baseUrl = '/api/' + this.currentCls.name, + offset = (Docs.contentState[baseUrl] && Docs.contentState[baseUrl].scrollOffset) || 0; + this.getOverview().getEl().down('.x-panel-body').scrollTo('top', offset); } }); diff --git a/template/app/controller/Examples.js b/template/app/controller/Examples.js index aaca0090..7f1fc05e 100644 --- a/template/app/controller/Examples.js +++ b/template/app/controller/Examples.js @@ -1,5 +1,5 @@ /** - * Controller for inline examples. + * Controller for Examples showcase */ Ext.define('Docs.controller.Examples', { extend: 'Ext.app.Controller', diff --git a/template/app/controller/Guides.js b/template/app/controller/Guides.js index fe8a0e39..8f25a59e 100644 --- a/template/app/controller/Guides.js +++ b/template/app/controller/Guides.js @@ -1,5 +1,5 @@ /** - * Controller for Welcome page + * Guides Controller */ Ext.define('Docs.controller.Guides', { extend: 'Docs.controller.Content', @@ -15,6 +15,8 @@ Ext.define('Docs.controller.Guides', { } ], + cache: {}, + init: function() { this.addEvents( /** @@ -59,6 +61,9 @@ Ext.define('Docs.controller.Guides', { } }, + /** + * Loads the guides index + */ loadIndex: function() { Ext.getCmp('doctabs').activateTab('#/guide'); Ext.getCmp('card-panel').layout.setActiveItem('guides'); @@ -73,6 +78,7 @@ 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); @@ -84,23 +90,39 @@ Ext.define('Docs.controller.Guides', { var name = url.match(/^\/guide\/(.*)$/); if (name) { - Ext.data.JsonP.request({ - url: this.getBaseUrl() + "/guides/" + name[1] + "/README.js", - callbackName: name[1], - success: function(json) { - this.getViewport().setPageTitle(json.guide.match(/

(.*)<\/h1>/)[1]); - Ext.getCmp("guide").update(json.guide); - - Docs.Syntax.highlight(Ext.get("guide")); - this.fireEvent('showGuide', name[1]); - this.getTree().selectUrl(url); - }, - failure: function(response, opts) { - this.getController('Index').showFailure("Guide "+name[1]+" was not found."); - }, - scope: this - }); + if (this.cache[name[1]]) { + this.showGuide(this.cache[name[1]], url, name[1]); + } else { + Ext.data.JsonP.request({ + url: this.getBaseUrl() + "/guides/" + name[1] + "/README.js", + callbackName: name[1], + success: function(json) { + this.cache[name[1]] = json; + this.showGuide(json, url, name[1]); + }, + failure: function(response, opts) { + this.getController('Index').showFailure("Guide "+name[1]+" was not found."); + }, + scope: this + }); + } } + }, + + /** + * Shows guide. + * + * @param {Object} json Guide json + * @param {String} url URL of the guide + * @param {Boolean} name Name of the guide + */ + showGuide: function(json, url, name) { + this.getViewport().setPageTitle(json.guide.match(/

(.*)<\/h1>/)[1]); + Ext.getCmp("guide").update(json.guide); + + Docs.Syntax.highlight(Ext.get("guide")); + this.fireEvent('showGuide', name); + this.getTree().selectUrl(url); } }); diff --git a/template/app/controller/Index.js b/template/app/controller/Index.js index 7fdae167..8314d141 100644 --- a/template/app/controller/Index.js +++ b/template/app/controller/Index.js @@ -16,7 +16,6 @@ Ext.define('Docs.controller.Index', { * @private */ showFailure: function(msg) { - this.getOverview().setLoading(false); var tpl = new Ext.XTemplate( "

Oops...

", "

{msg}

", -- GitLab