From f2460a3744c9b51a568c9b356b95164381a9e964 Mon Sep 17 00:00:00 2001
From: Jeremy Ruston <jeremy@osmosoft.com>
Date: Sat, 27 Oct 2012 19:30:16 +0100
Subject: [PATCH] Added simple insertion and deletion animations to cecily view

---
 core/modules/macros/list/listviews/cecily.js | 45 +++++++++++++-------
 tw5.com/tiddlers/samples/CecilyView.tid      |  2 +-
 2 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/core/modules/macros/list/listviews/cecily.js b/core/modules/macros/list/listviews/cecily.js
index 7585844d0..a5f71400e 100644
--- a/core/modules/macros/list/listviews/cecily.js
+++ b/core/modules/macros/list/listviews/cecily.js
@@ -27,6 +27,7 @@ function CecilyListView(listMacro) {
 	for(var t=0; t<listFrameDomNode.children.length; t++) {
 		var title = this.listMacro.listFrame.children[t].listElementInfo.title,
 			domNode = listFrameDomNode.children[t];
+		domNode.style.position = "absolute";
 		this.positionTiddler(title,domNode);
 	}
 };
@@ -63,12 +64,7 @@ CecilyListView.prototype.lookupTiddlerInMap = function(title,domNode) {
 			break;
 	}
 	// A default position
-	newPosition = newPosition || {
-		x: 0,
-		y: 0,
-		w: 100,
-		h: 100
-	};
+	newPosition = newPosition || {x: 0,y: 0,w: 100,h: 100};
 	// Save the position back to the map
 	this.map.positions[title] = newPosition;
 	this.saveMap();
@@ -78,31 +74,48 @@ CecilyListView.prototype.lookupTiddlerInMap = function(title,domNode) {
 CecilyListView.prototype.positionTiddler = function(title,domNode) {
 	var pos = this.lookupTiddlerInMap(title,domNode),
 		scale = pos.w/domNode.offsetWidth;
-	domNode.style.position = "absolute";
 	$tw.utils.setStyle(domNode,[
-		{transition: ""},
 		{transformOrigin: "0% 0%"},
 		{transform: "translateX(" + pos.x + "px) translateY(" + pos.y + "px) scale(" + scale + ")"}
 	]);
-	$tw.utils.forceLayout(domNode);
-	$tw.utils.setStyle(domNode,[
-		{transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in-out, opacity " + $tw.config.preferences.animationDurationMs + " ease-out"}
-	]);
 };
 
 CecilyListView.prototype.insert = function(index) {
 	var listElementNode = this.listMacro.listFrame.children[index],
 		targetElement = listElementNode.domNode;
-	// Animate the insertion
+	targetElement.style.position = "absolute";
 	$tw.utils.setStyle(targetElement,[
+		{transition: ""},
 		{opacity: "0.0"}
 	]);
+	this.positionTiddler(listElementNode.listElementInfo.title,targetElement);
+	$tw.utils.forceLayout(targetElement);
+	$tw.utils.setStyle(targetElement,[
+		{transition: "opacity " + $tw.config.preferences.animationDurationMs + " ease-out"},
+		{opacity: "1.0"}
+	]);
+};
+
+CecilyListView.prototype.remove = function(index) {
+	var listElementNode = this.listMacro.listFrame.children[index],
+		targetElement = listElementNode.domNode;
+	// Attach an event handler for the end of the transition
+	targetElement.addEventListener($tw.utils.convertEventName("transitionEnd"),function(event) {
+		if(targetElement.parentNode) {
+			targetElement.parentNode.removeChild(targetElement);
+		}
+	},false);
+	// Animate the closure
+	$tw.utils.setStyle(targetElement,[
+		{transition: "opacity " + $tw.config.preferences.animationDurationMs + " ease-out"},
+		{opacity: "1.0"}
+	]);
 	$tw.utils.forceLayout(targetElement);
 	$tw.utils.setStyle(targetElement,[
-		{opacity: "1.0"}
+		{opacity: "0.0"}
 	]);
-	// Position the dom node
-	this.positionTiddler(listElementNode.listElementInfo.title,targetElement);
+	// Returning true causes the DOM node not to be deleted
+	return true;
 };
 
 exports["cecily"] = CecilyListView;
diff --git a/tw5.com/tiddlers/samples/CecilyView.tid b/tw5.com/tiddlers/samples/CecilyView.tid
index 2c016ff47..5b37f8500 100644
--- a/tw5.com/tiddlers/samples/CecilyView.tid
+++ b/tw5.com/tiddlers/samples/CecilyView.tid
@@ -3,5 +3,5 @@ title: CecilyView
 "Cecily" provides a customisable ZoomableUserInterface to your tiddlers.
 
 {{mediumCecily{
-<<list filter:"[list[$:/StoryList]]" template:"CecilyTemplate" listview:cecily itemClass:"tw-cecily-tiddler-frame">>
+<<list filter:"[list[$:/StoryList]]" history:"$:/HistoryList" template:"CecilyTemplate" listview:cecily itemClass:"tw-cecily-tiddler-frame">>
 }}}