From a8b1da33dea228afe819f47d5468c3a82bbe0064 Mon Sep 17 00:00:00 2001
From: Jeremy Ruston <jeremy@osmosoft.com>
Date: Tue, 28 May 2013 16:47:16 +0100
Subject: [PATCH] Improvements to slide animation

---
 core/modules/utils/dom/animations/slide.js | 24 ++++++++++++++--------
 core/modules/widgets/reveal.js             | 17 +++++++++------
 core/templates/ViewTemplate.tid            |  2 +-
 3 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/core/modules/utils/dom/animations/slide.js b/core/modules/utils/dom/animations/slide.js
index 623a4bd3f..358340130 100644
--- a/core/modules/utils/dom/animations/slide.js
+++ b/core/modules/utils/dom/animations/slide.js
@@ -29,7 +29,8 @@ function slideOpen(domNode,options) {
 			{marginTop: ""},
 			{paddingBottom: ""},
 			{paddingTop: ""},
-			{height: "auto"}
+			{height: "auto"},
+			{opacity: ""}
 		]);
 		domNode.removeEventListener(transitionEventName,handler,false);
 		if(options.callback) {
@@ -43,7 +44,8 @@ function slideOpen(domNode,options) {
 		{marginBottom: "0px"},
 		{paddingTop: "0px"},
 		{paddingBottom: "0px"},
-		{height: "0px"}
+		{height: "0px"},
+		{opacity: "0"}
 	]);
 	$tw.utils.forceLayout(domNode);
 	// Transition to the final position
@@ -52,12 +54,14 @@ function slideOpen(domNode,options) {
 					"margin-bottom " + $tw.config.preferences.animationDurationMs + " ease-in-out, " +
 					"padding-top " + $tw.config.preferences.animationDurationMs + " ease-in-out, " +
 					"padding-bottom " + $tw.config.preferences.animationDurationMs + " ease-in-out, " +
-					"height " + $tw.config.preferences.animationDurationMs + " ease-in-out"},
+					"height " + $tw.config.preferences.animationDurationMs + " ease-in-out, " +
+					"opacity " + $tw.config.preferences.animationDurationMs + " ease-in-out"},
 		{marginBottom: currMarginBottom + "px"},
 		{marginTop: currMarginTop + "px"},
 		{paddingBottom: currPaddingBottom + "px"},
 		{paddingTop: currPaddingTop + "px"},
-		{height: currHeight + "px"}
+		{height: currHeight + "px"},
+		{opacity: "1"}
 	]);
 }
 
@@ -72,7 +76,8 @@ function slideClosed(domNode,options) {
 			{marginTop: ""},
 			{paddingBottom: ""},
 			{paddingTop: ""},
-			{height: "auto"}
+			{height: "auto"},
+			{opacity: ""}
 		]);
 		domNode.removeEventListener(transitionEventName,handler,false);
 		if(options.callback) {
@@ -81,7 +86,8 @@ function slideClosed(domNode,options) {
 	},false);
 	// Set up the initial position of the element
 	$tw.utils.setStyle(domNode,[
-		{height: currHeight + "px"}
+		{height: currHeight + "px"},
+		{opacity: "1"}
 	]);
 	$tw.utils.forceLayout(domNode);
 	// Transition to the final position
@@ -90,12 +96,14 @@ function slideClosed(domNode,options) {
 					"margin-bottom " + $tw.config.preferences.animationDurationMs + " ease-in-out, " +
 					"padding-top " + $tw.config.preferences.animationDurationMs + " ease-in-out, " +
 					"padding-bottom " + $tw.config.preferences.animationDurationMs + " ease-in-out, " +
-					"height " + $tw.config.preferences.animationDurationMs + " ease-in-out"},
+					"height " + $tw.config.preferences.animationDurationMs + " ease-in-out, " +
+					"opacity " + $tw.config.preferences.animationDurationMs + " ease-in-out"},
 		{marginTop: "0px"},
 		{marginBottom: "0px"},
 		{paddingTop: "0px"},
 		{paddingBottom: "0px"},
-		{height: "0px"}
+		{height: "0px"},
+		{opacity: "0"}
 	]);
 }
 
diff --git a/core/modules/widgets/reveal.js b/core/modules/widgets/reveal.js
index defc9fa22..87165da4b 100644
--- a/core/modules/widgets/reveal.js
+++ b/core/modules/widgets/reveal.js
@@ -28,6 +28,7 @@ RevealWidget.prototype.generate = function() {
 	this["default"] = this.renderer.getAttribute("default");
 	this.qualifyTiddlerTitles = this.renderer.getAttribute("qualifyTiddlerTitles");
 	this["class"] = this.renderer.getAttribute("class");
+	this.animate = this.renderer.getAttribute("animate","no");
 	// Compute the title of the state tiddler and read it
 	this.stateTitle = this.state;
 	if(this.qualifyTiddlerTitles) {
@@ -151,13 +152,17 @@ RevealWidget.prototype.refreshInDom = function(changedAttributes,changedTiddlers
 		}
 		// Animate the opening or closing
 		if(this.isOpen !== previousState) {
-			if(this.isOpen) {
-				this.renderer.domNode.style.display = this.renderer.parseTreeNode.isBlock ? "block" : "inline";
-				$tw.anim.perform("open",this.renderer.domNode);
+			if(this.animate !== "no") {
+				if(this.isOpen) {
+					this.renderer.domNode.style.display = this.renderer.parseTreeNode.isBlock ? "block" : "inline";
+					$tw.anim.perform("open",this.renderer.domNode);
+				} else {
+					$tw.anim.perform("close",this.renderer.domNode,{callback: function() {
+						self.renderer.domNode.style.display = "none";
+					}});
+				}
 			} else {
-				$tw.anim.perform("close",this.renderer.domNode,{callback: function() {
-					self.renderer.domNode.style.display = "none";
-				}});
+				this.renderer.domNode.style.display = this.isOpen ? (this.renderer.parseTreeNode.isBlock ? "block" : "inline") : "none";
 			}
 		}
 		// Add or remove the tw-reveal-open class
diff --git a/core/templates/ViewTemplate.tid b/core/templates/ViewTemplate.tid
index 50a6d2cd4..728ae7992 100644
--- a/core/templates/ViewTemplate.tid
+++ b/core/templates/ViewTemplate.tid
@@ -5,7 +5,7 @@ modifier: JeremyRuston
 
 </span><$view field="title"/></span>
 
-<$reveal type="nomatch" text="" default="" state="$:/state/tiddlerInfo" qualifyTiddlerTitles="yes" class="tw-tiddler-info">
+<$reveal type="nomatch" text="" default="" state="$:/state/tiddlerInfo" qualifyTiddlerTitles="yes" class="tw-tiddler-info" animate="yes">
 
 <$transclude template="$:/templates/TiddlerInfo"/>