Lots of tweaks to list view animations

There's a regression in that navigation animations are currently not working
2024-06-28 16:23:15 +00:00 · 2012-11-03 12:34:36 +00:00 · 2012-11-03 12:34:36 +00:00 · 5443c8243a
commit 5443c8243a
parent 921162ccdf
12 changed files with 140 additions and 220 deletions
--- a/core/modules/macros/link.js
+++ b/core/modules/macros/link.js
@ -36,7 +36,7 @@ exports.handleEvent = function (event) {
 			navEvent.initEvent("tw-navigate",true,true);
 			navEvent.navigateTo = this.linkInfo.to;
 			navEvent.navigateFromNode = this;
-			navEvent.navigateFromPageRect = $tw.utils.getBoundingPageRect(this.child.domNode);
+			navEvent.navigateFromClientRect = this.child.domNode.getBoundingClientRect();
 			event.target.dispatchEvent(navEvent); 
 			event.preventDefault();
 			return false;
--- a/core/modules/macros/list/listviews/cecily.js
+++ b/core/modules/macros/list/listviews/cecily.js
@ -18,7 +18,6 @@ function CecilyListView(listMacro) {
 	// Prepare the list frame
 	var listFrame = this.listMacro.listFrame,
 		listFrameDomNode = listFrame.domNode;
-	listFrameDomNode.style.position = "relative";
 	// Position the initial list entries on the map
 	this.loadMap();
 	for(var t=0; t<listFrame.children.length; t++) {
--- a/core/modules/macros/list/listviews/classic.js
+++ b/core/modules/macros/list/listviews/classic.js
@ -14,90 +14,59 @@ Views the list as a linear sequence

 function ClassicListView(listMacro) {
 	this.listMacro = listMacro;
+	var listFrame = this.listMacro.listFrame,
+		listFrameDomNode = listFrame.domNode;
+	$tw.utils.setStyle(listFrameDomNode,[
+		{perspective: 50000},
+	]);
 }

 ClassicListView.prototype.navigateTo = function(historyInfo) {
 	var listElementIndex = this.listMacro.findListElementByTitle(0,historyInfo.title),
 		listElementNode = this.listMacro.listFrame.children[listElementIndex],
 		targetElement = listElementNode.domNode;
-	// Remove any transform on the target element
-	$tw.utils.setStyle(targetElement,[
-		{transition: "none"},
-		{transformOrigin: "0% 0%"},
-		{height: "auto"}
-	]);
 	// Get the current height of the element
 	var currHeight = targetElement.offsetHeight;
 	// Compute the start and end positions of the target element
 	var srcRect = historyInfo.fromPageRect;
 	if(!srcRect) {
-		var scrollPos = $tw.utils.getScrollPosition();
-		srcRect = {
-			left: scrollPos.x,
-			top: scrollPos.y,
-			right: scrollPos.x + window.innerWidth,
-			bottom: scrollPos.y + window.innerHeight,
-			width: window.innerWidth,
-			height: window.innerHeight
-		};
+		srcRect = {left: 0, top: 0, width: window.innerWidth, height: window.innerHeight};
 	};
-	var dstRect = $tw.utils.getBoundingPageRect(targetElement);
-	// Compute the transformations
-	var scale = srcRect.width / dstRect.width;
-	// Reset the height once the transition is over
-	targetElement.addEventListener($tw.utils.convertEventName("transitionEnd"),function(event) {
-		$tw.utils.setStyle(targetElement,[
-			{transition: "none"},
-			{height: "auto"}
-		]);
-	},false);
-	// Position the target element over the source rectangle
-	$tw.utils.setStyle(targetElement,[
-		{transform: "translateX(" + (srcRect.left-dstRect.left) + "px) translateY(" + (srcRect.top-dstRect.top) + "px) scale(" + scale + ")"},
-		{height: "0px"}
-	]);
-	$tw.utils.forceLayout(targetElement);
-	// Transition the target element to its final resting place
-	$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: "none"},
-		{height: currHeight + "px"}
-	]);
+	var dstRect = targetElement.getBoundingClientRect();
+	// $tw.sprite.fly(srcRect,dstRect,{
+	// 	text: "Flying along at the speed of pixels\n\n\nBoo",
+	// 	style: "background:red;"
+	// });
 	// Scroll the target element into view
-	$tw.scroller.scrollIntoView(dstRect);
+//	$tw.scroller.scrollIntoView(dstRect);
 };

 ClassicListView.prototype.insert = function(index) {
 	var listElementNode = this.listMacro.listFrame.children[index],
 		targetElement = listElementNode.domNode;
 	// Get the current height of the tiddler
-	var currHeight = targetElement.offsetHeight;
-	// Reset the height once the transition is over
+	var currHeight = targetElement.offsetHeight + parseInt(window.getComputedStyle(targetElement).marginTop,10);
+	// Reset the margin once the transition is over
 	targetElement.addEventListener($tw.utils.convertEventName("transitionEnd"),function(event) {
 		$tw.utils.setStyle(targetElement,[
 			{transition: "none"},
-			{height: "auto"}
+			{marginBottom: "auto"}
 		]);
 	},false);
 	// Set up the initial position of the element
 	$tw.utils.setStyle(targetElement,[
 		{transition: "none"},
-		{transformOrigin: "0% 0%"},
-		{transform: "translateX(" + window.innerWidth + "px)"},
-		{opacity: "0.0"},
-		{height: "0px"}
+		{marginBottom: (-currHeight) + "px"},
+		{opacity: "0.0"}
 	]);
 	$tw.utils.forceLayout(targetElement);
 	// Transition to the final position
 	$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"}
+		{transition: "opacity " + $tw.config.preferences.animationDurationMs + " ease-in-out, " +
+					"margin-bottom " + $tw.config.preferences.animationDurationMs + " ease-in-out"},
+		{transform: "rotateX(0deg)"},
+		{marginBottom: "0px"},
+		{opacity: "1.0"}
 	]);
 };

@ -105,32 +74,29 @@ ClassicListView.prototype.remove = function(index) {
 	var listElementNode = this.listMacro.listFrame.children[index],
 		targetElement = listElementNode.domNode;
 	// Get the current height of the tiddler
-	var currHeight = targetElement.offsetHeight;
-	// Put a wrapper around the dom node we're closing
-	var wrapperElement = document.createElement("div");
-	targetElement.parentNode.insertBefore(wrapperElement,targetElement);
-	wrapperElement.appendChild(targetElement);
+	var currWidth = targetElement.offsetWidth,
+		currHeight = targetElement.offsetHeight + parseInt(window.getComputedStyle(targetElement).marginTop,10);
 	// Attach an event handler for the end of the transition
-	wrapperElement.addEventListener($tw.utils.convertEventName("transitionEnd"),function(event) {
-		if(wrapperElement.parentNode) {
-			wrapperElement.parentNode.removeChild(wrapperElement);
+	targetElement.addEventListener($tw.utils.convertEventName("transitionEnd"),function(event) {
+		if(targetElement.parentNode) {
+			targetElement.parentNode.removeChild(targetElement);
 		}
 	},false);
 	// Animate the closure
-	$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%"},
+	$tw.utils.setStyle(targetElement,[
+		{transition: "none"},
 		{transform: "translateX(0px)"},
-		{opacity: "1.0"},
-		{height: currHeight + "px"}
+		{marginBottom:  "0px"},
+		{opacity: "1.0"}
 	]);
-	$tw.utils.forceLayout(wrapperElement);
-	$tw.utils.setStyle(wrapperElement,[
-		{transform: "translateX(-" + window.innerWidth + "px)"},
-		{opacity: "0.0"},
-		{height: "0px"}
+	$tw.utils.forceLayout(targetElement);
+	$tw.utils.setStyle(targetElement,[
+		{transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in-out, " +
+					"opacity " + $tw.config.preferences.animationDurationMs + " ease-in-out, " +
+					"margin-bottom " + $tw.config.preferences.animationDurationMs + " ease-in-out"},
+		{transform: "translateX(" + currWidth + "px)"},
+		{marginBottom: (-currHeight) + "px"},
+		{opacity: "0.0"}
 	]);
 	// Returning true causes the DOM node not to be deleted
 	return true;
--- a/core/modules/macros/list/listviews/sideways.js
+++ b/core/modules/macros/list/listviews/sideways.js
@ -14,54 +14,27 @@ Views the list as a sideways linear sequence

 function SidewaysListView(listMacro) {
 	this.listMacro = listMacro;
+	// Prepare the list frame
+	var listFrame = this.listMacro.listFrame,
+		listFrameDomNode = listFrame.domNode;
+	for(var t=0; t<listFrame.children.length; t++) {
+		var title = listFrame.children[t].listElementInfo.title,
+			domNode = listFrame.children[t].domNode;
+		$tw.utils.setStyle(domNode,[
+			{verticalAlign: "top"},
+			{display: "inline-block"}
+		]);
+	}
 }

-SidewaysListView.prototype.navigateTo = function(historyInfo) {
-	var listElementIndex = this.listMacro.findListElementByTitle(0,historyInfo.title),
-		listElementNode = this.listMacro.listFrame.children[listElementIndex],
-		targetElement = listElementNode.domNode,
-		currWidth = targetElement.offsetWidth;
-	// Compute the start and end positions of the target element
-	var srcRect = historyInfo.fromPageRect;
-	if(!srcRect) {
-		var scrollPos = $tw.utils.getScrollPosition();
-		srcRect = {
-			left: scrollPos.x,
-			top: scrollPos.y,
-			right: scrollPos.x + window.innerWidth,
-			bottom: scrollPos.y + window.innerHeight,
-			width: window.innerWidth,
-			height: window.innerHeight
-		};
-	};
-	var dstRect = $tw.utils.getBoundingPageRect(targetElement);
-	// Compute the transformations
-	var scale = srcRect.width / dstRect.width;
-	// Position the target element over the source rectangle
-	$tw.utils.setStyle(targetElement,[
-		{transition: "none"},
-		{transform: "translateX(" + (srcRect.left-dstRect.left) + "px) translateY(" + (srcRect.top-dstRect.top) + "px) scale(" + scale + ")"},
-		{marginRight: (-currWidth) + "px"}
-	]);
-	$tw.utils.forceLayout(targetElement);
-	// Transition the target element to its final resting place
-	$tw.utils.setStyle(targetElement,[
-		{transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in-out, " +
-					"opacity " + $tw.config.preferences.animationDurationMs + " ease-out, " +
-					"margin-right " + $tw.config.preferences.animationDurationMs + " ease-in-out"},
-		{transform: "none"},
-		{marginRight: "0px"}
-	]);
-	// Scroll the target element into view
-	//$tw.scroller.scrollIntoView(dstRect);
-};
-
 SidewaysListView.prototype.insert = function(index) {
 	var listElementNode = this.listMacro.listFrame.children[index],
 		targetElement = listElementNode.domNode,
-		currWidth = targetElement.offsetWidth;
+		currWidth = targetElement.offsetWidth + parseInt(window.getComputedStyle(targetElement).marginLeft,10);
 	// Set up the initial position of the element
 	$tw.utils.setStyle(targetElement,[
+		{verticalAlign: "top"},
+		{display: "inline-block"},
 		{transition: "none"},
 		{opacity: "0.0"},
 		{marginRight: (-currWidth) + "px"}
@ -79,7 +52,7 @@ SidewaysListView.prototype.insert = function(index) {
 SidewaysListView.prototype.remove = function(index) {
 	var listElementNode = this.listMacro.listFrame.children[index],
 		targetElement = listElementNode.domNode,
-		currWidth = targetElement.offsetWidth;
+		currWidth = targetElement.offsetWidth + parseInt(window.getComputedStyle(targetElement).marginLeft,10);
 	// Attach an event handler for the end of the transition
 	targetElement.addEventListener($tw.utils.convertEventName("transitionEnd"),function(event) {
 		if(targetElement.parentNode) {
--- a/core/modules/macros/navigator.js
+++ b/core/modules/macros/navigator.js
@ -75,7 +75,7 @@ exports.eventMap["tw-navigate"] = function(event) {
 	}
 	// Add a new record to the top of the history stack
 	this.history = this.wiki.getTiddlerData(this.historyTitle,[]);
-	this.history.push({title: event.navigateTo, fromPageRect: event.navigateFromPageRect});
+	this.history.push({title: event.navigateTo, fromPageRect: event.navigateFromClientRect});
 	this.wiki.setTiddlerData(this.historyTitle,this.history);
 	event.stopPropagation();
 	return false;
--- a/core/modules/macros/scrollable.js
+++ b/core/modules/macros/scrollable.js
@ -0,0 +1,62 @@
+/*\
+title: $:/core/modules/macros/scrollable.js
+type: application/javascript
+module-type: macro
+
+Creates a scrollable frame around its content
+
+\*/
+(function(){
+
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
+
+exports.info = {
+	name: "scrollable",
+	params: {
+		width: {byName: true, type: "text"},
+		height: {byName: true, type: "text"},
+		"class": {byName: true, type: "text"}
+	}
+};
+
+exports.executeMacro = function() {
+	var innerClasses = ["tw-scrollable-inner"],
+		innerAttributes = {
+			"class": innerClasses,
+			style: {
+				overflow: "visible",
+				position: "relative"
+			}
+		},
+		outerClasses = ["tw-scrollable","tw-scrollable-outer"],
+		outerAttributes = {
+			"class": outerClasses,
+			style: {
+				overflow: "scroll",
+				"white-space": "nowrap"
+			}
+		};
+	if(this.hasParameter("class")) {
+		outerClasses.push(this.params["class"]);
+	}
+	if(this.classes) {
+		$tw.utils.pushTop(outerClasses,this.classes);
+	}
+	if(this.hasParameter("width")) {
+		outerAttributes.style.width = this.params["width"];
+	}
+	if(this.hasParameter("height")) {
+		outerAttributes.style.height = this.params["height"];
+	}
+	var innerFrame = $tw.Tree.Element("div",innerAttributes,this.content),
+		outerFrame = $tw.Tree.Element("div",outerAttributes,[innerFrame]);
+	outerFrame.execute(this.parents,this.tiddlerTitle);
+	return outerFrame;
+};
+
+exports.postRenderInDom = function() {
+};
+
+})();
--- a/core/modules/utils/dom/scroller.js
+++ b/core/modules/utils/dom/scroller.js
@ -30,8 +30,7 @@ Scroller.prototype.cancel = function() {
 };

 /*
-Smoothly scroll an element back into view if needed
-	element: element or clientrect object
+Smoothly scroll an element into view if needed
 */
 Scroller.prototype.scrollIntoView = function(element) {
 	var elementBounds = element instanceof HTMLElement ? $tw.utils.getBoundingPageRect(element) : element,
--- a/core/styles/tiddlywiki.css
+++ b/core/styles/tiddlywiki.css
@ -6037,65 +6037,25 @@ a.tw-tiddlylink-missing {
  font-style: inherit;
 }

-/*
-Cecily views
-*/
+.tw-sideways-item {
+  width: 300px;
+}

-.mediumCecilyView {
-  width: 100%;
-  height: 400px;
-  padding: 10px 10px 10px 10px;
-  overflow: scroll;
-  white-space: nowrap;
+.tw-list-element {
+  white-space: normal;
+}
+
+.tw-scrollable-outer {
  background: #ccc;
  -webkit-box-shadow: inset 1px 1px 4px 1px rgba(0, 0, 0, 0.15);
     -moz-box-shadow: inset 1px 1px 4px 1px rgba(0, 0, 0, 0.15);
          box-shadow: inset 1px 1px 4px 1px rgba(0, 0, 0, 0.15);
-  -webkit-overflow-scrolling: touch;
 }

-.mediumCecilyView .tw-list-element {
-  overflow: auto;
-  white-space: normal;
-}
-
-.mediumCecilyView .tw-cecily-tiddler-frame {
-  width: 400px;
-  padding: 30px 30px 30px 30px;
-  background-color: #fff;
-  -webkit-box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.4);
-     -moz-box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.4);
-          box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.4);
-}
-
-/*
-Sideways views
-*/
-
-.mediumSidewaysView {
-  width: 100%;
-  height: 400px;
-  padding: 10px 10px 10px 10px;
-  overflow: scroll;
-  white-space: nowrap;
-  background: #ccc;
-  -webkit-box-shadow: inset 1px 1px 4px 1px rgba(0, 0, 0, 0.15);
-     -moz-box-shadow: inset 1px 1px 4px 1px rgba(0, 0, 0, 0.15);
-          box-shadow: inset 1px 1px 4px 1px rgba(0, 0, 0, 0.15);
-  -webkit-overflow-scrolling: touch;
-}
-
-.mediumSidewaysView .tw-list-element {
-  overflow: auto;
-  white-space: normal;
-}
-
-.mediumSidewaysView .tw-sideways-tiddler-frame {
-  display: inline-block;
+.tw-scrollable .tw-tiddler-frame {
  width: 400px;
  padding: 30px 30px 30px 30px;
  margin: 10px 10px 10px 10px;
-  vertical-align: top;
  background-color: #fff;
  -webkit-box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.4);
     -moz-box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.4);
--- a/core/templates/ViewTemplate.tid
+++ b/core/templates/ViewTemplate.tid
@ -1,7 +1,6 @@
 title: $:/templates/ViewTemplate
 modifier: JeremyRuston

-<div class="tw-tiddler-frame">
 <div class="title">
 	<span><<view title>></span> <span> <<reveal state:[[$:/EditMode]] type:match text:yes>< <<button EditTiddler class:"btn-invisible"><[img[$:/core/images/edit-button.svg]]>> >> </span>
 	<<button close class:"btn-invisible pull-right"><[img[$:/core/images/close-button.svg]]>>
@ -13,4 +12,3 @@ modifier: JeremyRuston
 <div class="body">
 	<<view text wikified>>
 </div>
-</div>
--- a/cssbuild/tiddlywiki.less
+++ b/cssbuild/tiddlywiki.less
@ -142,56 +142,19 @@ a.tw-tiddlylink-missing {
 	font-style: inherit;
 }

-/*
-Cecily views
-*/
+.tw-list-element {
+	white-space: normal;
+}

-.mediumCecilyView {
-	overflow: scroll;
-	-webkit-overflow-scrolling: touch;
-	white-space: nowrap;
+.tw-scrollable-outer {
 	.box-shadow(inset 1px 1px 4px 1px rgba(0, 0, 0, 0.15));
 	background: #ccc;
-	padding: 10px 10px 10px 10px;
-	width: 100%;
-	height: 400px;
 }

-.mediumCecilyView .tw-list-element {
-	white-space: normal;
-	overflow: auto;
+.tw-scrollable-inner {
 }

-.mediumCecilyView .tw-cecily-tiddler-frame {
-	padding: 30px 30px 30px 30px;
-	.box-shadow(1px 1px 6px rgba(0,0,0,0.4));
-	background-color: #fff;
-	width: 400px;
-}
-
-/*
-Sideways views
-*/
-
-.mediumSidewaysView {
-	overflow: scroll;
-	-webkit-overflow-scrolling: touch;
-	white-space: nowrap;
-	.box-shadow(inset 1px 1px 4px 1px rgba(0, 0, 0, 0.15));
-	background: #ccc;
-	padding: 10px 10px 10px 10px;
-	width: 100%;
-	height: 400px;
-}
-
-.mediumSidewaysView .tw-list-element {
-	white-space: normal;
-	overflow: auto;
-}
-
-.mediumSidewaysView .tw-sideways-tiddler-frame {
-	vertical-align: top;
-	display: inline-block;
+.tw-scrollable .tw-tiddler-frame {
 	margin: 10px 10px 10px 10px;
 	padding: 30px 30px 30px 30px;
 	.box-shadow(1px 1px 6px rgba(0,0,0,0.4));
--- a/tw5.com/tiddlers/samples/CecilyView.tid
+++ b/tw5.com/tiddlers/samples/CecilyView.tid
@ -2,6 +2,6 @@ title: CecilyView

 "Cecily" provides a customisable ZoomableUserInterface to your tiddlers.

-{{mediumCecilyView{
-<<list filter:"[list[$:/StoryList]]" history:"$:/HistoryList" template:"CecilyTemplate" listview:cecily itemClass:"tw-cecily-tiddler-frame">>
-}}}
+<<scrollable width:"100%" height:"400px"><
+<<list filter:"[list[$:/StoryList]]" history:"$:/HistoryList" template:"CecilyTemplate" listview:cecily itemClass:"tw-tiddler-frame">>
+>>
--- a/tw5.com/tiddlers/samples/SidewaysView.tid
+++ b/tw5.com/tiddlers/samples/SidewaysView.tid
@ -2,6 +2,6 @@ title: SidewaysView

 This view shows your tiddlers stacked horizontally.

-{{mediumSidewaysView{
-<<list filter:"[list[$:/StoryList]]" history:"$:/HistoryList" template:"CecilyTemplate" listview:sideways itemClass:"tw-sideways-tiddler-frame">>
-}}}
+<<scrollable width:"100%" height:"400px"><
+<<list filter:"[list[$:/StoryList]]" history:"$:/HistoryList" template:"CecilyTemplate" listview:sideways itemClass:"tw-tiddler-frame">>
+>>