From 06599bcfc6d8c01bb11ad3f9b18ada6ef47bf166 Mon Sep 17 00:00:00 2001
From: Jeremy Ruston <jeremy@osmosoft.com>
Date: Mon, 26 Aug 2013 14:48:05 +0100
Subject: [PATCH] Fix up closing tiddlers in the zoomin listview

One for @giffmex
---
 core/modules/widgets/list/listviews/zoomin.js | 71 +++++++++++++++++--
 1 file changed, 66 insertions(+), 5 deletions(-)

diff --git a/core/modules/widgets/list/listviews/zoomin.js b/core/modules/widgets/list/listviews/zoomin.js
index 5d9e84bbf..f2903f172 100644
--- a/core/modules/widgets/list/listviews/zoomin.js
+++ b/core/modules/widgets/list/listviews/zoomin.js
@@ -16,7 +16,7 @@ var ZoominListView = function(listWidget) {
 	this.listWidget = listWidget;
 	this.storyNode = this.listWidget.renderer.domNode;
 	// Set the current tiddler
-	this.currentTiddler = this.listWidget.children[0];
+	this.currentTiddler = this.listWidget.children[0].domNode;
 	// Make all the tiddlers position absolute, and hide all but the first one
 	this.storyNode.style.position = "relative";
 	for(var t=0; t<this.storyNode.children.length; t++) {
@@ -68,6 +68,67 @@ ZoominListView.prototype.insert = function(index) {
 	]);
 };
 
+/*
+Visualise navigating back to the previous tiddler
+	storyElement: story element being closed
+*/
+ZoominListView.prototype.remove = function(index) {
+	var listElementNode = this.listWidget.children[index],
+		targetElement = listElementNode.domNode;
+	// Set up the tiddler that is being closed
+	$tw.utils.setStyle(targetElement,[
+		{position: "absolute"},
+		{display: "block"},
+		{transformOrigin: "50% 50%"},
+		{transform: "translateX(0px) translateY(0px) scale(1)"},
+		{transition: "none"},
+		{zIndex: "0"}
+	]);
+	// We'll move back to the previous or next element in the story
+	var toElement = this.storyNode.children[index - 1];
+	if(!toElement) {
+		toElement = this.storyNode.children[index + 1];
+	}
+	// Set up the tiddler we're moving back in
+	if(toElement) {
+		$tw.utils.setStyle(toElement,[
+			{position: "absolute"},
+			{display: "block"},
+			{transformOrigin: "50% 50%"},
+			{transform: "translateX(0px) translateY(0px) scale(10)"},
+			{transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in, opacity " + $tw.config.preferences.animationDurationMs + " ease-in"},
+			{opacity: "0"},
+			{zIndex: "500"}
+		]);
+		this.currentTiddler = toElement;
+	}
+	// Animate them both
+	// Force layout
+	$tw.utils.forceLayout(this.storyNode);
+	// First, the tiddler we're closing
+	$tw.utils.setStyle(targetElement,[
+		{transformOrigin: "50% 50%"},
+		{transform: "translateX(0px) translateY(0px) scale(0.1)"},
+		{transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in, opacity " + $tw.config.preferences.animationDurationMs + " ease-in"},
+		{opacity: "0"},
+		{zIndex: "0"}
+	]);
+	setTimeout(function() {
+		// Delete the DOM node when the transition is over
+		if(targetElement.parentNode) {
+			targetElement.parentNode.removeChild(targetElement);
+		}
+	},$tw.config.preferences.animationDuration);
+	// Now the tiddler we're going back to
+	if(toElement) {
+		$tw.utils.setStyle(toElement,[
+			{transform: "translateX(0px) translateY(0px) scale(1)"},
+			{opacity: "1"}
+		]);
+	}
+	return true; // Indicate that we'll delete the DOM node
+};
+
 ZoominListView.prototype.navigateTo = function(historyInfo) {
 	var listElementIndex = this.listWidget.findListElementByTitle(0,historyInfo.title);
 	if(listElementIndex === undefined) {
@@ -108,7 +169,7 @@ ZoominListView.prototype.navigateTo = function(historyInfo) {
 	// Apply the ending transitions with a timeout to ensure that the previously applied transformations are applied first
 	var self = this,
 		prevCurrentTiddler = this.currentTiddler;
-	this.currentTiddler = listElementNode;
+	this.currentTiddler = targetElement;
 	// Transform the target tiddler to its natural size
 	$tw.utils.setStyle(targetElement,[
 		{transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in, opacity " + $tw.config.preferences.animationDurationMs + " ease-in"},
@@ -117,11 +178,11 @@ ZoominListView.prototype.navigateTo = function(historyInfo) {
 		{zIndex: "500"},
 	]);
 	// Transform the previous tiddler out of the way and then hide it
-	if(prevCurrentTiddler && prevCurrentTiddler !== listElementNode) {
+	if(prevCurrentTiddler && prevCurrentTiddler !== targetElement) {
 		var scale = zoomBounds.width / sourceBounds.width;
 		x =  zoomBounds.left - targetBounds.left - (sourceBounds.left - targetBounds.left) * scale;
 		y =  zoomBounds.top - targetBounds.top - (sourceBounds.top - targetBounds.top) * scale;
-		$tw.utils.setStyle(prevCurrentTiddler.domNode,[
+		$tw.utils.setStyle(prevCurrentTiddler,[
 			{transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in, opacity " + $tw.config.preferences.animationDurationMs + " ease-in"},
 			{opacity: "0.0"},
 			{transformOrigin: "0 0"},
@@ -131,7 +192,7 @@ ZoominListView.prototype.navigateTo = function(historyInfo) {
 		// Hide the tiddler when the transition has finished
 		setTimeout(function() {
 			if(self.currentTiddler !== prevCurrentTiddler) {
-				prevCurrentTiddler.domNode.style.display = "none";
+				prevCurrentTiddler.style.display = "none";
 			}
 		},$tw.config.preferences.animationDuration);
 	}