Further refinements to the list mechanism

Much better navigation animation for classic view

core/modules/macros/link.js

@@ -35,7 +35,8 @@ exports.handleEvent = function (event) {
 			var navEvent = document.createEvent("Event");
 			navEvent.initEvent("tw-navigate",true,true);
 			navEvent.navigateTo = this.linkInfo.to;
-			navEvent.navigateFrom = this;
+			navEvent.navigateFromNode = this;
+			navEvent.navigateFromPageRect = $tw.utils.getBoundingPageRect(this.child.domNode);
 			event.target.dispatchEvent(navEvent); 
 			event.preventDefault();
 			return false;

core/modules/macros/list/list.js

@@ -294,7 +294,7 @@ exports.handleHistoryChanges = function() {
 	// Navigate forwards to each of the new tiddlers
 	while(entry < newHistory.length) {
 		if(this.listview && this.listview.navigateTo) {
-			this.listview.navigateTo(newHistory[entry].title);
+			this.listview.navigateTo(newHistory[entry]);
 		}
 		entry++;
 	}

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

@@ -16,19 +16,46 @@ function ClassicListView(listMacro) {
 	this.listMacro = listMacro;
 }
 
-ClassicListView.prototype.navigateTo = function(title) {
+ClassicListView.prototype.navigateTo = function(historyInfo) {
-	var listElementIndex = this.listMacro.findListElementByTitle(0,title),
+	var listElementIndex = this.listMacro.findListElementByTitle(0,historyInfo.title),
 		listElementNode = this.listMacro.listFrame.children[listElementIndex],
 		targetElement = listElementNode.domNode;
-	// Replace any previous transition on the target element
+	// Remove any transform on the target element
 	$tw.utils.setStyle(targetElement,[
-		{transition: ""}
+		{transition: "none"},
+		{transformOrigin: "0% 0%"},
+		{transform: "none"},
+		{height: "auto"}
+	]);
+	// Compute the start and end positions of the target element
+	var srcRect = historyInfo.fromPageRect;
+	if(!srcRect) {
+		var scrollPos = $tw.utils.getScrollPosition();
+		srcRect.width = window.innerWidth;
+		srcRect.height = window.innerHeight;
+		srcRect = {
+			left: scrollPos.x,
+			top: scrollPos.y,
+			right: scrollPos.x + srcRect.width,
+			bottom: scrollPos.y + srcRect.height
+		};
+	};
+$tw.utils.forceLayout(targetElement);
+	var dstRect = $tw.utils.getBoundingPageRect(targetElement);
+	// Compute the transformations
+	var scale = srcRect.width / dstRect.width;
+	// Position the target element over the source rectangle
+	$tw.utils.setStyle(targetElement,[
+		{transition: "none"},
+		{transform: "translateX(" + (srcRect.left-dstRect.left) + "px) translateY(" + (srcRect.top-dstRect.top) + "px) scale(" + scale + ")"}
 	]);
 	$tw.utils.forceLayout(targetElement);
+	// Transition the target element to its final resting place
 	$tw.utils.setStyle(targetElement,[
-		{transform: ""},
+		{transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in-out, " +
+					"opacity " + $tw.config.preferences.animationDurationMs + " ease-out"},
+		{transform: "none"}
 	]);
-	$tw.utils.forceLayout(targetElement);
 	// Scroll the target element into view
 	$tw.scroller.scrollIntoView(targetElement);
 };
@@ -38,21 +65,23 @@ ClassicListView.prototype.insert = function(index) {
 		targetElement = listElementNode.domNode;
 	// Get the current height of the tiddler
 	var currHeight = targetElement.offsetHeight;
-	// Animate the closure
+	// Reset the height once the transition is over
+	targetElement.addEventListener($tw.utils.convertEventName("transitionEnd"),function(event) {
+		$tw.utils.setStyle(targetElement,[
+			{transition: "none"},
+			{height: "auto"}
+		]);
+	},false);
+	// Set up the initial position of the element
 	$tw.utils.setStyle(targetElement,[
-		{transition: ""},
+		{transition: "none"},
 		{transformOrigin: "0% 0%"},
 		{transform: "translateX(" + window.innerWidth + "px)"},
 		{opacity: "0.0"},
 		{height: "0px"}
 	]);
 	$tw.utils.forceLayout(targetElement);
-	targetElement.addEventListener($tw.utils.convertEventName("transitionEnd"),function(event) {
+	// Transition to the final position
-		$tw.utils.setStyle(targetElement,[
-			{transition: ""},
-			{height: "auto"}
-		]);
-	},false);
 	$tw.utils.setStyle(targetElement,[
 		{transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in-out, " +
 					"opacity " + $tw.config.preferences.animationDurationMs + " ease-out, " +

core/modules/macros/navigator.js

@@ -70,7 +70,7 @@ exports.eventMap["tw-navigate"] = function(event) {
 	}
 	// Add a new record to the top of the history stack
 	this.history = this.wiki.getTiddlerData(this.historyTitle,[]);
-	this.history.push({title: event.navigateTo});
+	this.history.push({title: event.navigateTo, fromPageRect: event.navigateFromPageRect});
 	this.wiki.setTiddlerData(this.historyTitle,this.history);
 	event.stopPropagation();
 	return false;

core/modules/utils/dom/browser.js

@@ -92,20 +92,20 @@ var eventNameMappings = {
 	"transitionEnd": {
 		correspondingCssProperty: "transition",
 		mappings: {
-			transition: "transitionEnd",
+			transition: "transitionend",
 			OTransition: "oTransitionEnd",
 			MSTransition: "msTransitionEnd",
-			MozTransition: "transitionEnd",
+			MozTransition: "transitionend",
 			webkitTransition: "webkitTransitionEnd"
 		}
 	},
 	"animationEnd": {
 		correspondingCssProperty: "animation",
 		mappings: {
-			animation: "animationEnd",
+			animation: "animationend",
 			OAnimation: "oAnimationEnd",
 			MSAnimation: "msAnimationEnd",
-			MozAnimation: "animationEnd",
+			MozAnimation: "animationend",
 			webkitAnimation: "webkitAnimationEnd"
 		}
 	}

core/modules/utils/dom/dom.js

@@ -91,6 +91,22 @@ exports.getScrollPosition = function() {
 	}
 };
 
+/*
+Gets the bounding rectangle of an element in absolute page coordinates
+*/
+exports.getBoundingPageRect = function(element) {
+	var scrollPos = $tw.utils.getScrollPosition(),
+		clientRect = element.getBoundingClientRect();
+	return {
+		left: clientRect.left + scrollPos.x,
+		width: clientRect.width,
+		right: clientRect.right + scrollPos.x,
+		top: clientRect.top + scrollPos.y,
+		height: clientRect.height,
+		bottom: clientRect.bottom + scrollPos.y
+	};
+};
+
 /*
 Saves a named password in the browser
 */