Revised implementation of scrolling behaviour

Now we use a "tw-scroll" event to request scrolling

core/modules/macros/list/listviews/classic.js

@@ -23,7 +23,9 @@ ClassicListView.prototype.navigateTo = function(historyInfo) {
 		listElementNode = this.listMacro.listFrame.children[listElementIndex],
 		targetElement = listElementNode.domNode;
 	// Scroll the node into view
-	$tw.scroller.scrollIntoView(targetElement);
+	var scrollEvent = document.createEvent("Event");
+	scrollEvent.initEvent("tw-scroll",true,true);
+	targetElement.dispatchEvent(scrollEvent);
 };
 
 ClassicListView.prototype.insert = function(index) {

core/modules/macros/list/listviews/sideways.js

@@ -35,7 +35,9 @@ SidewaysListView.prototype.navigateTo = function(historyInfo) {
 		listElementNode = this.listMacro.listFrame.children[listElementIndex],
 		targetElement = listElementNode.domNode;
 	// Scroll the node into view
-	$tw.scroller.scrollIntoView(targetElement);
+	var scrollEvent = document.createEvent("Event");
+	scrollEvent.initEvent("tw-scroll",true,true);
+	targetElement.dispatchEvent(scrollEvent);
 };
 
 SidewaysListView.prototype.insert = function(index) {

core/modules/macros/scrollable.js

@@ -51,21 +51,36 @@ exports.executeMacro = function() {
 	if(this.hasParameter("height")) {
 		outerAttributes.style.height = this.params.height;
 	}
-	var innerFrame = $tw.Tree.Element("div",innerAttributes,this.content),
-		outerFrame = $tw.Tree.Element("div",outerAttributes,[innerFrame]);
-	outerFrame.execute(this.parents,this.tiddlerTitle);
-	return outerFrame;
+	this.innerFrame = $tw.Tree.Element("div",innerAttributes,this.content);
+	this.outerFrame = $tw.Tree.Element("div",outerAttributes,[this.innerFrame],{
+		events: ["tw-scroll"],
+		eventHandler: this
+	});
+	this.outerFrame.execute(this.parents,this.tiddlerTitle);
+	return this.outerFrame;
 };
 
-exports.postRenderInDom = function() {
-	// Attach a scrollTo() method to the outer wrapper
-	var self = this;
-	this.child.children[0].domNode.scrollTo = function(bounds) {
-		self.scrollTo.call(self,bounds);
-	};
-};
+exports.handleEvent = function(event) {
+	if(event.type === "tw-scroll") {
+		return this.handleScrollEvent(event);
+	}
+	return true;
+}
 
-exports.scrollTo = function(bounds) {
+exports.handleScrollEvent = function(event) {
+	var domNode = event.target,
+		bounds = {
+			left: domNode.offsetLeft,
+			top: domNode.offsetTop,
+			width: domNode.offsetWidth,
+			height: domNode.offsetHeight
+		};
+	// Walk up the tree adjusting the offset bounds by each offsetParent
+	while(domNode.offsetParent && domNode.offsetParent !== this.innerFrame.domNode) {
+		domNode = domNode.offsetParent;
+		bounds.left += domNode.offsetLeft;
+		bounds.top += domNode.offsetTop;
+	}
 	this.cancelScroll();
 	this.startTime = new Date();
 	this.startX = this.child.domNode.scrollLeft;
@@ -85,6 +100,8 @@ exports.scrollTo = function(bounds) {
 			self.child.domNode.scrollTop = self.startY + (self.endY - self.startY) * t;
 		}, 10);
 	}
+	event.stopPropagation();
+	return false;
 };
 
 exports.cancelScroll = function() {

core/modules/startup.js

@@ -65,7 +65,8 @@ exports.startup = function() {
 		document.addEventListener("tw-login",handleSyncerEvent,false);
 		document.addEventListener("tw-logout",handleSyncerEvent,false);
 		// Install the scroller
-		$tw.scroller = new $tw.utils.Scroller();
+		$tw.pageScroller = new $tw.utils.PageScroller();
+		document.addEventListener("tw-scroll",$tw.pageScroller,false);
 		// Install the sprite factory
 		$tw.sprite = new $tw.utils.Sprite();
 		// Install the save action handler

core/modules/utils/dom/scroller.js

@@ -13,12 +13,13 @@ Module that creates a $tw.utils.Scroller object prototype that manages scrolling
 "use strict";
 
 /*
-Creates a Scroller object
+Event handler for when the `tw-scroll` event hits the document body
 */
-var Scroller = function() {
+var PageScroller = function() {
+	this.timerId = null;
 };
 
-Scroller.prototype.cancel = function() {
+PageScroller.prototype.cancelScroll = function() {
 	if(this.timerId) {
 		window.clearInterval(this.timerId);
 		this.timerId = null;
@@ -26,11 +27,22 @@ Scroller.prototype.cancel = function() {
 };
 
 /*
-Smoothly scroll an tree node into view if needed
+Handle an event
 */
-Scroller.prototype.scrollIntoView = function(domNode) {
+PageScroller.prototype.handleEvent = function(event) {
+	if(event.type === "tw-scroll") {
+		return this.handleScrollEvent(event);
+	}
+	return true;
+};
+
+/*
+Handle a scroll event hitting the page document
+*/
+PageScroller.prototype.handleScrollEvent = function(event) {
 	// Get the offset bounds of the element
-	var bounds = {
+	var domNode = event.target,
+		bounds = {
 			left: domNode.offsetLeft,
 			top: domNode.offsetTop,
 			width: domNode.offsetWidth,
@@ -39,17 +51,12 @@ Scroller.prototype.scrollIntoView = function(domNode) {
 	// Walk up the tree adjusting the offset bounds by each offsetParent
 	while(domNode.offsetParent) {
 		domNode = domNode.offsetParent;
-		// If the node is scrollable, tell it to scroll
-		if(domNode.scrollTo) {
-			domNode.scrollTo(bounds);
-			return;
-		}
 		bounds.left += domNode.offsetLeft;
 		bounds.top += domNode.offsetTop;
 	}
-	// If we got to the top of the tree then we need to scroll the body
+	// Now scroll the body
 	var scrollPosition = $tw.utils.getScrollPosition();
-	this.cancel();
+	this.cancelScroll();
 	this.startTime = new Date();
 	this.startX = scrollPosition.x;
 	this.startY = scrollPosition.y;
@@ -60,7 +67,7 @@ Scroller.prototype.scrollIntoView = function(domNode) {
 		this.timerId = window.setInterval(function() {
 			var t = ((new Date()) - self.startTime) / $tw.config.preferences.animationDuration;
 			if(t >= 1) {
-				self.cancel();
+				self.cancelScroll();
 				t = 1;
 			}
 			t = $tw.utils.slowInSlowOut(t);
@@ -69,6 +76,6 @@ Scroller.prototype.scrollIntoView = function(domNode) {
 	}
 };
 
-exports.Scroller = Scroller;
+exports.PageScroller = PageScroller;
 
 })();