Better programmatic CSS handling

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

@@ -54,14 +54,14 @@ CecilyListView.prototype.lookupTiddlerInMap = function(title,domNode) {
 	// If the tiddler wasn't in the map we'll have to compute it
 	var newPosition;
 	switch(this.map.positionNew) {
-		default: // "below"
+		default: // "right"
 			newPosition = {
 				x: this.newTiddlerPosition.x,
 				y: this.newTiddlerPosition.y,
 				w: 300,
 				h: 300
 			};
-			this.newTiddlerPosition.y += domNode.offsetHeight/2;
+			this.newTiddlerPosition.x += domNode.offsetWidth/2;
 			break;
 	}
 	// Return the position
@@ -83,12 +83,16 @@ CecilyListView.prototype.insert = function(index) {
 	var listElementNode = this.listMacro.listFrame.children[index],
 		targetElement = listElementNode.domNode;
 	// Animate the insertion
-	targetElement.style[$tw.browser.transition] = "";
-	targetElement.style[$tw.browser.transformorigin] = "0% 0%";
-	targetElement.style.opacity = "0.0";
+	$tw.utils.setStyle(targetElement,[
+		{transition: ""},
+		{transformOrigin: "0% 0%"},
+		{opacity: "0.0"}
+	]);
 	$tw.utils.forceLayout(targetElement);
-	targetElement.style[$tw.browser.transition] = "opacity " + $tw.config.preferences.animationDurationMs + " ease-out";
-	targetElement.style.opacity = "1.0";
+	$tw.utils.setStyle(targetElement,[
+		{transition: "opacity " + $tw.config.preferences.animationDurationMs + " ease-out"},
+		{opacity: "1.0"}
+	]);
 	// Position the dom node
 	this.positionTiddler(listElementNode.listElementInfo.title,targetElement);
 };

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

@@ -14,7 +14,7 @@ Views the list as a linear sequence
 
 function ClassicListView(listMacro) {
 	this.listMacro = listMacro;
-};
+}
 
 ClassicListView.prototype.insert = function(index) {
 	var listElementNode = this.listMacro.listFrame.children[index],
@@ -22,25 +22,23 @@ ClassicListView.prototype.insert = function(index) {
 	// Get the current height of the tiddler
 	var currHeight = targetElement.offsetHeight;
 	// Animate the closure
-	// $tw.utils.setStyle(targetElement,[
-	// 	{transition: ""},
-	// 	{transformOrigin: "0% 0%"},
-	// 	{transform: "translateX(" + window.innerWidth + "px)"},
-	// 	{opacity: "0.0"},
-	// 	{height: "0px"}
-	// ]);
-	targetElement.style[$tw.browser.transition] = "";
-	targetElement.style[$tw.browser.transformorigin] = "0% 0%";
-	targetElement.style[$tw.browser.transform] = "translateX(" + window.innerWidth + "px)";
-	targetElement.style.opacity = "0.0";
-	targetElement.style.height = "0px";
+	$tw.utils.setStyle(targetElement,[
+		{transition: ""},
+		{transformOrigin: "0% 0%"},
+		{transform: "translateX(" + window.innerWidth + "px)"},
+		{opacity: "0.0"},
+		{height: "0px"}
+	]);
 	$tw.utils.forceLayout(targetElement);
-	targetElement.style[$tw.browser.transition] = "-" + $tw.browser.prefix.toLowerCase() + "-transform " + $tw.config.preferences.animationDurationMs + " ease-in-out, " +
-														"opacity " + $tw.config.preferences.animationDurationMs + " ease-out, " +
-														"height " + $tw.config.preferences.animationDurationMs + " ease-in-out";
-	targetElement.style[$tw.browser.transform] = "translateX(0px)";
-	targetElement.style.opacity = "1.0";
-	targetElement.style.height = currHeight + "px";
+	$tw.utils.setStyle(targetElement,[
+		{transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in-out, " +
+					"opacity " + $tw.config.preferences.animationDurationMs + " ease-out, " +
+					"height " + $tw.config.preferences.animationDurationMs + " ease-in-out"},
+		{transform: "translateX(0px)"},
+		{opacity: "1.0"},
+		{height: currHeight + "px"}
+	]);
+
 };
 
 ClassicListView.prototype.remove = function(index) {
@@ -59,17 +57,21 @@ ClassicListView.prototype.remove = function(index) {
 		}
 	},false);
 	// Animate the closure
-	wrapperElement.style[$tw.browser.transition] = "-" + $tw.browser.prefix.toLowerCase() + "-transform " + $tw.config.preferences.animationDurationMs + " ease-in-out, " +
-															"opacity " + $tw.config.preferences.animationDurationMs + " ease-out, " +
-															"height " + $tw.config.preferences.animationDurationMs + " ease-in-out";
-	wrapperElement.style[$tw.browser.transformorigin] = "0% 0%";
-	wrapperElement.style[$tw.browser.transform] = "translateX(0px)";
-	wrapperElement.style.opacity = "1.0";
-	wrapperElement.style.height = currHeight + "px";
+	$tw.utils.setStyle(wrapperElement,[
+		{transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in-out, " +
+					"opacity " + $tw.config.preferences.animationDurationMs + " ease-out, " +
+					"height " + $tw.config.preferences.animationDurationMs + " ease-in-out"},
+		{transformOrigin: "0% 0%"},
+		{transform: "translateX(0px)"},
+		{opacity: "1.0"},
+		{height: currHeight + "px"}
+	]);
 	$tw.utils.forceLayout(wrapperElement);
-	wrapperElement.style[$tw.browser.transform] = "translateX(-" + window.innerWidth + "px)";
-	wrapperElement.style.opacity = "0.0";
-	wrapperElement.style.height = "0px";
+	$tw.utils.setStyle(wrapperElement,[
+		{transform: "translateX(-" + window.innerWidth + "px)"},
+		{opacity: "0.0"},
+		{height: "0px"}
+	]);
 	// Returning true causes the DOM node not to be deleted
 	return true;
 };

core/modules/startup.js

@@ -18,6 +18,9 @@ exports.startup = function() {
 	$tw.modules.applyMethods("global",$tw);
 	$tw.modules.applyMethods("config",$tw.config);
 	$tw.modules.applyMethods("utils",$tw.utils);
+	if($tw.browser) {
+		$tw.utils.getBrowserInfo($tw.browser);
+	}
 	$tw.version = $tw.utils.extractVersionInfo();
 	$tw.Tiddler.fieldModules = $tw.modules.getModulesByTypeAsHashmap("tiddlerfield");
 	$tw.modules.applyMethods("tiddlermethod",$tw.Tiddler.prototype);

core/modules/utils/dom/browser.js

@@ -18,7 +18,11 @@ Set style properties of an element
 	styles: ordered array of {name: value} pairs
 */
 exports.setStyle = function(element,styles) {
-
+	for(var t=0; t<styles.length; t++) {
+		for(var styleName in styles[t]) {
+			element.style[$tw.utils.convertStyleNameToPropertyName(styleName)] = styles[t][styleName];
+		}
+	}
 };
 
 /*
@@ -29,28 +33,53 @@ Converts a standard CSS property name into the local browser-specific equivalent
 
 var styleNameCache = {}; // We'll cache the style name conversions
 
-exports.convertStyleName = function(styleName) {
+exports.convertStyleNameToPropertyName = function(styleName) {
 	// Return from the cache if we can
 	if(styleNameCache[styleName]) {
 		return styleNameCache[styleName];
 	}
 	// Convert it by first removing any hyphens
-	var newStyleName = $tw.utils.unHyphenateCss(styleName);
+	var propertyName = $tw.utils.unHyphenateCss(styleName);
 	// Then check if it needs a prefix
-	if(document.body.style[newStyleName] === undefined) {
+	if(document.body.style[propertyName] === undefined) {
 		var prefixes = ["O","MS","Moz","webkit"];
 		for(var t=0; t<prefixes.length; t++) {
-			var prefixedName = prefixes[t] + newStyleName.substr(0,1).toUpperCase() + newStyleName.substr(1);
+			var prefixedName = prefixes[t] + propertyName.substr(0,1).toUpperCase() + propertyName.substr(1);
 			if(document.body.style[prefixedName] !== undefined) {
-				newStyleName = prefixedName;
+				propertyName = prefixedName;
 				break;
 			}
 		}
 	}
 	// Put it in the cache too
-	styleNameCache[styleName] = newStyleName
-	return newStyleName;
-}
+	styleNameCache[styleName] = propertyName
+	return propertyName;
+};
+
+/*
+Converts a JS format CSS property name back into the dashed form used in CSS declarations. For example:
+	"backgroundColor" --> "background-color"
+	"webkitTransform" --> "-webkit-transform"
+*/
+exports.convertPropertyNameToStyleName = function(propertyName) {
+	// Rehyphenate the name
+	var styleName = $tw.utils.hyphenateCss(propertyName);
+	// If there's a webkit prefix, add a dash (other browsers have uppercase prefixes, and so get the dash automatically)
+	if(styleName.indexOf("webkit") === 0) {
+		styleName = "-" + styleName;
+	} else if(styleName.indexOf("-m-s") === 0) {
+		styleName = "-ms" + styleName.substr(4);
+	}
+	return styleName;
+};
+
+/*
+Round trip a stylename to a property name and back again. For example:
+	"transform" --> "webkitTransform" --> "-webkit-transform"
+*/
+exports.roundTripPropertyName = function(propertyName) {
+	return $tw.utils.convertPropertyNameToStyleName($tw.utils.convertStyleNameToPropertyName(propertyName));
+};
 
 /*
 Converts a standard event name into the local browser specific equivalent. For example:
@@ -99,8 +128,8 @@ exports.convertEventName = function(eventName) {
 	return newEventName;
 };
 
-// For backwards compatibility, this will all be removed 
-var getBrowserInfo = function(info) {
+// Setup constants for the current browser
+exports.getBrowserInfo = function(info) {
 	info.prefix = document.body.style.webkitTransform !== undefined ? "webkit" : 
 						document.body.style.MozTransform !== undefined ? "Moz" :
 						document.body.style.MSTransform !== undefined ? "MS" :
@@ -133,8 +162,4 @@ var getBrowserInfo = function(info) {
 							document.fullScreen !== undefined ? "fullScreen" : "";
 };
 
-if($tw.browser) {
-	getBrowserInfo($tw.browser);
-}
-
 })();

core/modules/utils/utils.js

@@ -278,6 +278,15 @@ exports.unHyphenateCss = function(propName) {
 	});
 };
 
+/*
+Convert a camelcase CSS property name into a dashed one ("backgroundColor" --> "background-color")
+*/
+exports.hyphenateCss = function(propName) {
+	return propName.replace(/([A-Z])/g, function(match0,match1) {
+		return "-" + match1.toLowerCase();
+	});
+};
+
 /*
 Extract the version number from the meta tag or from the boot file
 */