Updates to CecilyView and browser.js

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

@@ -24,8 +24,6 @@ function CecilyListView(listMacro) {
 	this.newTiddlerPosition = {x: 0, y: 0};
 	// Position the initial list entries on the map
 	this.loadMap();
-	this.map.positions["HelloThere"] = {x: 250, y: 50, w: 300, h: 300};
-	this.saveMap();
 	for(var t=0; t<listFrameDomNode.children.length; t++) {
 		var title = this.listMacro.listFrame.children[t].listElementInfo.title,
 			domNode = listFrameDomNode.children[t];
@@ -61,7 +59,7 @@ CecilyListView.prototype.lookupTiddlerInMap = function(title,domNode) {
 				w: 300,
 				h: 300
 			};
-			this.newTiddlerPosition.x += domNode.offsetWidth;
+			this.newTiddlerPosition.x += 320;
 			break;
 	}
 	// Return the position
@@ -74,9 +72,14 @@ CecilyListView.prototype.lookupTiddlerInMap = function(title,domNode) {
 };
 
 CecilyListView.prototype.positionTiddler = function(title,domNode) {
-	var pos = this.lookupTiddlerInMap(title,domNode);
+	var pos = this.lookupTiddlerInMap(title,domNode),
+		scale = pos.w/domNode.offsetWidth;
 	domNode.style.position = "absolute";
-	domNode.style[$tw.browser.transform] = "translateX(" + pos.x + "px) translateY(" + pos.y + "px)";
+	$tw.utils.setStyle(domNode,[
+		{transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in-out"},
+		{transformOrigin: "0% 0%"},
+		{transform: "scale(" + scale + ") translateX(" + pos.x + "px) translateY(" + pos.y + "px)"}
+	]);
 };
 
 CecilyListView.prototype.insert = function(index) {

core/modules/utils/dom/browser.js

@@ -118,7 +118,7 @@ exports.convertEventName = function(eventName) {
 	var newEventName = eventName,
 		mappings = eventNameMappings[eventName];
 	if(mappings) {
-		var convertedProperty = $tw.utils.convertStyleName(mappings.correspondingCssProperty);
+		var convertedProperty = $tw.utils.convertStyleNameToPropertyName(mappings.correspondingCssProperty);
 		if(mappings.mappings[convertedProperty]) {
 			newEventName = mappings.mappings[convertedProperty];
 		}
@@ -130,27 +130,6 @@ exports.convertEventName = function(eventName) {
 
 // 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" :
-						document.body.style.OTransform !== undefined ? "O" : "";
-	info.transition = info.prefix + "Transition";
-	info.transform = info.prefix + "Transform";
-	info.transformorigin = info.prefix + "TransformOrigin";
-	info.transitionEnd = {		
-				"": "transitionEnd",
-				"O": "oTransitionEnd",
-				"MS": "msTransitionEnd",
-				"Moz": "transitionend",
-				"webkit": "webkitTransitionEnd"
-			}[info.prefix];
-	info.animationEnd = {		
-				"": "animationEnd",
-				"O": "oAnimationEnd",
-				"MS": "msAnimationEnd",
-				"Moz": "animationend",
-				"webkit": "webkitAnimationEnd"
-			}[info.prefix];
 	info.requestFullScreen = document.body.webkitRequestFullScreen !== undefined ? "webkitRequestFullScreen" :
 							document.body.mozRequestFullScreen !== undefined ? "mozRequestFullScreen" :
 							document.body.requestFullScreen !== undefined ? "requestFullScreen" : "";

core/modules/utils/dom/modal.js

@@ -90,10 +90,15 @@ Modal.prototype.display = function(title) {
 		// Force layout and animate the modal message away
 		$tw.utils.forceLayout(modalBackdrop);
 		$tw.utils.forceLayout(modalWrapper);
-		modalBackdrop.style.opacity = 0;
+		$tw.utils.setStyle(modalBackdrop,[
-		modalWrapper.style[$tw.browser.transform] = "translateY(" + window.innerHeight + "px)";
+			{opacity: "0"}
+		]);
+		$tw.utils.setStyle(modalWrapper,[
+			{transform: "translateY(" + window.innerHeight + "px)"}
+		]);
 		// Set up an event for the transition end
-		modalWrapper.addEventListener($tw.browser.transitionEnd,function(event) {
+console.log("Listening for ",$tw.utils.convertEventName("transitionEnd"))
+		modalWrapper.addEventListener($tw.utils.convertEventName("transitionEnd"),function(event) {
 			if(wrapper.parentNode) {
 				// Remove the modal message from the DOM
 				document.body.removeChild(wrapper);
@@ -104,20 +109,32 @@ Modal.prototype.display = function(title) {
 		return false;
 	},false);
 	// Set the initial styles for the message
-	modalBackdrop.style.opacity = 0;
+	$tw.utils.setStyle(modalBackdrop,[
-	modalWrapper.style[$tw.browser.transformorigin] = "0% 0%";
+		{opacity: "0"}
-	modalWrapper.style[$tw.browser.transform] = "translateY(" + (-window.innerHeight) + "px)";
+	]);
+	$tw.utils.setStyle(modalWrapper,[
+		{transformOrigin: "0% 0%"},
+		{transform: "translateY(" + (-window.innerHeight) + "px)"}
+	]);
 	// Put the message into the document
 	document.body.appendChild(wrapper);
 	// Set up animation for the styles
-	modalBackdrop.style[$tw.browser.transition] = "opacity " + d + " ease-out";
+	$tw.utils.setStyle(modalBackdrop,[
-	modalWrapper.style[$tw.browser.transition] = "-" + $tw.browser.prefix.toLowerCase() + "-transform " + d + " ease-in-out";
+		{transition: "opacity " + d + " ease-out"}
+	]);
+	$tw.utils.setStyle(modalWrapper,[
+		{transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in-out"},
+	]);
 	// Force layout
 	$tw.utils.forceLayout(modalBackdrop);
 	$tw.utils.forceLayout(modalWrapper);
 	// Set final animated styles
-	modalBackdrop.style.opacity = 1;
+	$tw.utils.setStyle(modalBackdrop,[
-	modalWrapper.style[$tw.browser.transform] = "translateY(0px)";
+		{opacity: "1"}
+	]);
+	$tw.utils.setStyle(modalWrapper,[
+		{transform: "translateY(0px)"}
+	]);
 };
 
 exports.Modal = Modal;

tw5.com/tiddlers/Introduction.tid

@@ -14,3 +14,4 @@ Here are a few features of TiddlyWiki that you can explore:
 * Browse the list of AllTiddlers or the ShadowTiddlers
 * Examine the example [[bitmap images|Motovun Jack.jpg]] and [[SVG images|Motovun Jack.svg]]
 * Explore the RoadMap of TiddlyWiki5's ongoing development
+* Play with the new CecilyView

tw5.com/tiddlers/samples/CecilyView.tid

@@ -1,3 +1,5 @@
 title: CecilyView
 
-<<list filter:"[tag[docs]]" template:"$:/templates/ViewTemplate" listview:cecily>>
+"Cecily" provides a customisable ZoomableUserInterface to your tiddlers.
+
+<<list filter:"[tag[introduction]]" template:"$:/templates/ViewTemplate" listview:cecily>>

tw5.com/wiki/DefaultTiddlers.tid

@@ -1,7 +1,6 @@
 title: $:/DefaultTiddlers
 
 HelloThere
-CecilyView
 Introduction
 Improvements
 Docs