Refactor the whole scroll state remembering. (682c3014) · Commits · extjs / jsduck

template/app/controller/Classes.js

+2 −12

Original line number	Diff line number	Diff line
		@@ -119,10 +119,6 @@ Ext.define('Docs.controller.Classes', {
		preventDefault: true,
		delegate: '.not-expandable'
		});

		cmp.body.addListener('scroll', function(cmp, el) {
		this.setScrollState('#!/api/' + this.currentCls.name, el.scrollTop);
		}, this);
		}
		},

		@@ -250,24 +246,18 @@ Ext.define('Docs.controller.Classes', {
		reRendered = true;
		}
		this.currentCls = cls;
		this.getOverview().setScrollContext("#!/api/"+cls.name);

		if (anchor) {
		this.getOverview().scrollToEl("#" + anchor);
		this.fireEvent('showMember', cls.name, anchor);
		}
		else {
		this.scrollContent();
		this.getOverview().restoreScrollState();
		}

		this.getTree().selectUrl("#!/api/"+cls.name);
		this.fireEvent('showClass', cls.name, {reRendered: reRendered});
		},

		scrollContent: function() {
		if (this.currentCls) {
		var baseUrl = '#!/api/' + this.currentCls.name;
		this.getOverview().getEl().down('.x-panel-body').scrollTo('top', this.getScrollState(baseUrl));
		}
		}

		});

template/app/controller/Content.js

+1 −31

Original line number	Diff line number	Diff line
		@@ -18,28 +18,12 @@ Ext.define('Docs.controller.Content', {
		*/
		title: "",

		onLaunch: function() {
		var cmp = this.getIndex();
		if (cmp.rendered) {
		this.initScrollListener();
		}
		else {
		cmp.on('afterrender', this.initScrollListener, this);
		}
		},

		initScrollListener: function() {
		this.getIndex().getEl().addListener('scroll', function(cmp, el) {
		this.setScrollState(this.baseUrl, el.scrollTop);
		}, this);
		},

		loadIndex: function(noHistory) {
		noHistory \|\| Docs.History.push(this.baseUrl);
		this.getViewport().setPageTitle(this.title);
		Ext.getCmp('doctabs').activateTab(this.baseUrl);
		Ext.getCmp('card-panel').layout.setActiveItem(this.getIndex());
		this.getIndex().getEl().scrollTo('top', this.getScrollState(this.baseUrl));
		this.getIndex().restoreScrollState();
		},

		// True when middle mouse button pressed or shift/ctrl key pressed
		@@ -54,19 +38,5 @@ Ext.define('Docs.controller.Content', {
		*/
		getBaseUrl: function() {
		return document.location.href.replace(/\/?(index.html\|template.html)?#.*/, "");
		},

		/**
		* Mediates Tabs controller getScrollState()
		*/
		getScrollState: function(url) {
		return Docs.App.getController('Tabs').getScrollState(url);
		},

		/**
		* Mediates Tabs controller setScrollState()
		*/
		setScrollState: function(url, scroll) {
		Docs.App.getController('Tabs').setScrollState(url, scroll);
		}
		});

template/app/controller/Guides.js

+2 −8

Original line number	Diff line number	Diff line
		@@ -57,13 +57,6 @@ Ext.define('Docs.controller.Guides', {
		delegate: '.guide'
		});
		}
		},
		'#guide': {
		afterrender: function(cmp) {
		cmp.body.addListener('scroll', function(cmp, el) {
		this.setScrollState(this.activeUrl, el.scrollTop);
		}, this);
		}
		}
		});
		},
		@@ -151,12 +144,13 @@ Ext.define('Docs.controller.Guides', {
		reRendered = true;
		}
		this.activeUrl = url;
		this.getGuide().setScrollContext(this.activeUrl);

		if (section) {
		this.getGuide().scrollToEl(name+section);
		}
		else {
		this.getGuide().setScrollTop(this.getScrollState(this.activeUrl));
		this.getGuide().restoreScrollState();
		}

		this.fireEvent('showGuide', name, { reRendered: reRendered });

template/app/controller/Tabs.js

+1 −27

Original line number	Diff line number	Diff line
		@@ -63,8 +63,6 @@ Ext.define('Docs.controller.Tabs', {
		}
		],

		scrollState: {},

		init: function() {
		this.getController('Classes').addListener({
		showClass: function(cls) {
		@@ -97,7 +95,7 @@ Ext.define('Docs.controller.Tabs', {
		this.control({
		'[componentCls=doctabs]': {
		tabClose: function(url) {
		delete this.scrollState[url];
		// delete this.scrollState[url];
		},
		tabActivate: function(url, opts) {
		Docs.History.push(url, opts);
		@@ -165,10 +163,6 @@ Ext.define('Docs.controller.Tabs', {
		// Adds new tab, no questions asked
		addTab: function(tab, opts) {
		opts = opts \|\| { animate: true, activate: true };
		// Init scrollstate when tab opened.
		if (!this.scrollState[tab.url]) {
		this.scrollState[tab.url] = 0;
		}
		this.getDoctabs().addTab({
		href: tab.url,
		text: tab.text,
		@@ -194,26 +188,6 @@ Ext.define('Docs.controller.Tabs', {
		// default to classtree, just in case
		return this.getClassTree();
		}
		},

		/**
		* Saves scrollstate of a tab.
		*
		* @param {String} url URL of the tab.
		* @param {Number} scroll the scroll amount.
		*/
		setScrollState: function(url, scroll) {
		this.scrollState[url] = scroll;
		},

		/**
		* Returns scrollstate of a tab.
		*
		* @param {String} url URL of the tab.
		* @return {Number} the scroll amount.
		*/
		getScrollState: function(url) {
		return this.scrollState[url] \|\| 0;
		}

		});

template/app/view/PanelScrolling.js→template/app/view/Scrolling.js

+93 −0

Original line number	Diff line number	Diff line
		/**
		* A mixin that adds various scrolling methods to panel.
		* A mixin that adds various scrolling methods to panel or container.
		*
		* It monitors the scrolling and remembers scrolling amount in current
		* context, allowing the scroll amount to be restored afterwards.
		*/
		Ext.define('Docs.view.Scrolling', {
		/**
		* Initializes scroll state saving.
		*
		* Should be called from initComponent of the class that mixes this in.
		*
		* @protected
		*/
		initScrolling: function() {
		this.scrollContext = 'index';
		this.scrollState = {};

		this.on("afterrender", function() {
		this.getScrollEl().addListener('scroll', this.saveScrollState, this);
		}, this);
		},

		/**
		* Sets the current scrolling context for saving scroll state.
		*
		* @param {String} ctx A name for the context.
		*/
		setScrollContext: function(ctx) {
		this.scrollContext = ctx;
		},

		/**
		* Saves the scroll state in current context.
		*
		* This is automatically called every time the container is scrolled.
		*/
		saveScrollState: function() {
		this.scrollState[this.scrollContext] = this.getScrollTop();
		},

		/**
		* Restores scroll state in current context.
		*/
		Ext.define('Docs.view.PanelScrolling', {
		restoreScrollState: function() {
		this.setScrollTop(this.scrollState[this.scrollContext] \|\| 0);
		},

		/**
		* Scrolls the specified element into view
		*
		@@ -24,7 +68,7 @@ Ext.define('Docs.view.PanelScrolling', {
		* @return {Number}
		*/
		getScrollTop: function() {
		return this.body.getScroll()['top'];
		return this.getScrollEl().getScroll()['top'];
		},

		/**
		@@ -32,13 +76,18 @@ Ext.define('Docs.view.PanelScrolling', {
		* @param {Number} offset
		*/
		setScrollTop: function(offset) {
		return this.body.scrollTo('top', offset);
		return this.getScrollEl().scrollTo('top', offset);
		},

		/**
		* Scrolls panel to the top
		*/
		scrollToTop: function() {
		this.body.scrollTo('top');
		this.getScrollEl().scrollTo('top');
		},

		// helper to make the mixin work with both Panel and Container.
		getScrollEl: function() {
		return this.body \|\| this.el;
		}
		});