Add a barebones animation framework

The idea is to allow us to package animations/transitions into plugins

core/modules/startup.js

@@ -96,6 +96,8 @@ exports.startup = function() {
 		document.addEventListener("tw-clear-password",function(event) {
 			$tw.crypto.setPassword(null);
 		});
+		// Install the animator
+		$tw.anim = new $tw.utils.Animator();
 		// Kick off the stylesheet manager
 		$tw.stylesheetManager = new $tw.utils.StylesheetManager($tw.wiki);
 		// If we're being viewed on a data: URI then give instructions for how to save

core/modules/utils/dom/animations/slide.js

@@ -0,0 +1,107 @@
+/*\
+title: $:/core/modules/utils/dom/animations/slide.js
+type: application/javascript
+module-type: animation
+
+A simple slide animation that varies the height of the element
+
+\*/
+(function(){
+
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
+
+function slideOpen(domNode,options) {
+	// Get the current height of the domNode
+	var computedStyle = window.getComputedStyle(domNode),
+		currMarginBottom = parseInt(computedStyle.marginBottom,10),
+		currMarginTop = parseInt(computedStyle.marginTop,10),
+		currPaddingBottom = parseInt(computedStyle.paddingBottom,10),
+		currPaddingTop = parseInt(computedStyle.paddingTop,10),
+		currHeight = domNode.offsetHeight;
+	// Reset the margin once the transition is over
+	var transitionEventName = $tw.utils.convertEventName("transitionEnd");
+	domNode.addEventListener(transitionEventName,function handler(event) {
+		$tw.utils.setStyle(domNode,[
+			{transition: "none"},
+			{marginBottom: ""},
+			{marginTop: ""},
+			{paddingBottom: ""},
+			{paddingTop: ""},
+			{height: "auto"}
+		]);
+		domNode.removeEventListener(transitionEventName,handler,false);
+		if(options.callback) {
+			options.callback();
+		}
+	},false);
+	// Set up the initial position of the element
+	$tw.utils.setStyle(domNode,[
+		{transition: "none"},
+		{marginTop: "0px"},
+		{marginBottom: "0px"},
+		{paddingTop: "0px"},
+		{paddingBottom: "0px"},
+		{height: "0px"}
+	]);
+	$tw.utils.forceLayout(domNode);
+	// Transition to the final position
+	$tw.utils.setStyle(domNode,[
+		{transition: "margin-top " + $tw.config.preferences.animationDurationMs + " ease-in-out, " +
+					"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"},
+		{marginBottom: currMarginBottom + "px"},
+		{marginTop: currMarginTop + "px"},
+		{paddingBottom: currPaddingBottom + "px"},
+		{paddingTop: currPaddingTop + "px"},
+		{height: currHeight + "px"}
+	]);
+}
+
+function slideClosed(domNode,options) {
+	var currHeight = domNode.offsetHeight;
+	// Clear the properties we've set when the animation is over
+	var transitionEventName = $tw.utils.convertEventName("transitionEnd");
+	domNode.addEventListener(transitionEventName,function handler(event) {
+		$tw.utils.setStyle(domNode,[
+			{transition: "none"},
+			{marginBottom: ""},
+			{marginTop: ""},
+			{paddingBottom: ""},
+			{paddingTop: ""},
+			{height: "auto"}
+		]);
+		domNode.removeEventListener(transitionEventName,handler,false);
+		if(options.callback) {
+			options.callback();
+		}
+	},false);
+	// Set up the initial position of the element
+	$tw.utils.setStyle(domNode,[
+		{height: currHeight + "px"}
+	]);
+	$tw.utils.forceLayout(domNode);
+	// Transition to the final position
+	$tw.utils.setStyle(domNode,[
+		{transition: "margin-top " + $tw.config.preferences.animationDurationMs + " ease-in-out, " +
+					"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"},
+		{marginTop: "0px"},
+		{marginBottom: "0px"},
+		{paddingTop: "0px"},
+		{paddingBottom: "0px"},
+		{height: "0px"}
+	]);
+}
+
+exports.slide = {
+	open: slideOpen,
+	close: slideClosed
+};
+
+})();

core/modules/utils/dom/animator.js

@@ -0,0 +1,38 @@
+/*\
+title: $:/core/modules/utils/dom/animator.js
+type: application/javascript
+module-type: utils
+
+Orchestrates animations and transitions
+
+\*/
+(function(){
+
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
+
+function Animator() {
+	// Get the registered animation modules
+	this.animations = {};
+	$tw.modules.applyMethods("animation",this.animations);
+}
+
+Animator.prototype.perform = function(type,domNode,options) {
+	options = options || {};
+	// Find an animation that can handle this type
+	var chosenAnimation;
+	$tw.utils.each(this.animations,function(animation,name) {
+		if($tw.utils.hop(animation,type)) {
+			chosenAnimation = animation[type];
+		}
+	});
+	// Call the animation
+	if(chosenAnimation) {
+		chosenAnimation(domNode,options);
+	}
+};
+
+exports.Animator = Animator;
+
+})();