Tweaks to the listviews

Cecily gets a bit better, and we start to handle navigation events.
Scrolling seems to still be a bit iffy

core/modules/macros/list/list.js

@@ -18,6 +18,7 @@ exports.info = {
 	params: {
 		type: {byPos: 0, type: "text"},
 		filter: {byName: true, type: "filter"},
+		history: {byName: true, type: "tiddler"},
 		template: {byName: true, type: "tiddler"},
 		templateText: {byName: true, type: "text"},
 		editTemplate: {byName: true, type: "tiddler"},
@@ -64,6 +65,7 @@ exports.executeMacro = function() {
 
 exports.postRenderInDom = function() {
 	this.listview = this.chooseListView();
+	this.history = [];
 };
 
 /*
@@ -209,8 +211,21 @@ exports.refreshInDom = function(changes) {
 			return;
 		}
 	}
+	// Reflect any changes in the list
+	this.handleListChanges(changes);
+	// Process any history list changes
+	if(this.hasParameter("history") && $tw.utils.hop(changes,this.params.history)) {
+		this.handleHistoryChanges();
+	}
+};
+
+/*
+Handle changes to the content of the list
+*/
+exports.handleListChanges = function(changes) {
 	// Get the list of tiddlers, saving the previous length
-	var prevListLength = this.list.length;
+	var t,
+		prevListLength = this.list.length;
 	this.getTiddlerList();
 	// Check if the list is empty
 	if(this.list.length === 0) {
@@ -265,4 +280,26 @@ exports.refreshInDom = function(changes) {
 	}
 };
 
+/*
+Handle any changes to the history list
+*/
+exports.handleHistoryChanges = function() {
+	// Get the history data
+	var newHistory = this.wiki.getTiddlerData(this.params.history,[]);
+	// Ignore any entries of the history that match the previous history
+	var entry = 0;
+	while(entry < newHistory.length && entry < this.history.length && newHistory[entry].title === this.history[entry].title) {
+		entry++;
+	}
+	// Navigate forwards to each of the new tiddlers
+	while(entry < newHistory.length) {
+		if(this.listview && this.listview.navigateTo) {
+			this.listview.navigateTo(newHistory[entry].title);
+		}
+		entry++;
+	}
+	// Update the history
+	this.history = newHistory;
+};
+
 })();

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

@@ -74,13 +74,16 @@ CecilyListView.prototype.lookupTiddlerInMap = function(title,domNode) {
 CecilyListView.prototype.positionTiddler = function(title,domNode) {
 	var pos = this.lookupTiddlerInMap(title,domNode),
 		scale = pos.w/domNode.offsetWidth;
-console.log("positioning",title,"domNode.offsetWidth",domNode.offsetWidth);
 	domNode.style.position = "absolute";
 	$tw.utils.setStyle(domNode,[
-		{transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in-out"},
+		{transition: ""},
 		{transformOrigin: "0% 0%"},
 		{transform: "translateX(" + pos.x + "px) translateY(" + pos.y + "px) scale(" + scale + ")"}
 	]);
+	$tw.utils.forceLayout(domNode);
+	$tw.utils.setStyle(domNode,[
+		{transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in-out, opacity " + $tw.config.preferences.animationDurationMs + " ease-out"}
+	]);
 };
 
 CecilyListView.prototype.insert = function(index) {
@@ -88,13 +91,10 @@ CecilyListView.prototype.insert = function(index) {
 		targetElement = listElementNode.domNode;
 	// Animate the insertion
 	$tw.utils.setStyle(targetElement,[
-		{transition: ""},
-		{transformOrigin: "0% 0%"},
 		{opacity: "0.0"}
 	]);
 	$tw.utils.forceLayout(targetElement);
 	$tw.utils.setStyle(targetElement,[
-		{transition: "opacity " + $tw.config.preferences.animationDurationMs + " ease-out"},
 		{opacity: "1.0"}
 	]);
 	// Position the dom node

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

@@ -16,6 +16,23 @@ function ClassicListView(listMacro) {
 	this.listMacro = listMacro;
 }
 
+ClassicListView.prototype.navigateTo = function(title) {
+	var listElementIndex = this.listMacro.findListElementByTitle(0,title),
+		listElementNode = this.listMacro.listFrame.children[listElementIndex],
+		targetElement = listElementNode.domNode;
+	// Replace any previous transition on the target element
+	$tw.utils.setStyle(targetElement,[
+		{transition: ""}
+	]);
+	$tw.utils.forceLayout(targetElement);
+	$tw.utils.setStyle(targetElement,[
+		{transform: ""},
+	]);
+	$tw.utils.forceLayout(targetElement);
+	// Scroll the target element into view
+	$tw.scroller.scrollIntoView(targetElement);
+};
+
 ClassicListView.prototype.insert = function(index) {
 	var listElementNode = this.listMacro.listFrame.children[index],
 		targetElement = listElementNode.domNode;

core/modules/macros/navigator.js

@@ -69,9 +69,9 @@ exports.eventMap["tw-navigate"] = function(event) {
 		this.wiki.setTextReference(this.params.set,event.navigateTo);
 	}
 	// Add a new record to the top of the history stack
-	this.history = this.getList(this.historyTitle);
-	this.history.push(event.navigateTo);
-	this.saveList(this.historyTitle,this.history);
+	this.history = this.wiki.getTiddlerData(this.historyTitle,[]);
+	this.history.push({title: event.navigateTo});
+	this.wiki.setTiddlerData(this.historyTitle,this.history);
 	event.stopPropagation();
 	return false;
 };
@@ -181,9 +181,9 @@ exports.eventMap["tw-NewTiddler"] = function(event) {
 	// Save the updated story
 	this.saveList(this.storyTitle,this.story);
 	// Add a new record to the top of the history stack
-	this.history = this.getList(this.historyTitle);
-	this.history.push(draftTitle);
-	this.saveList(this.historyTitle,this.history);
+	this.history = this.wiki.getTiddlerData(this.historyTitle,[]);
+	this.history.push({title: draftTitle});
+	this.wiki.setTiddlerData(this.historyTitle,this.history);
 	event.stopPropagation();
 	return false;
 };

core/styles/tiddlywiki.css

@@ -5931,8 +5931,9 @@ Cecily views
           box-shadow: inset 1px 1px 4px 1px rgba(0, 0, 0, 0.15);
 }
 
-.mediumCecily * {
+.mediumCecily .tw-list-element {
   overflow-x: auto;
+  white-space: normal;
 }
 
 .mediumCecily .tw-cecily-tiddler-frame {

core/templates/PageTemplate.tid

@@ -93,7 +93,7 @@ title: $:/templates/PageTemplate
 
 <!-- The main story references the same story and history tiddlers as the outer navigator -->
 <div class="container">
-<<list filter:"[list[$:/StoryList]]" template:"$:/templates/ViewTemplate" editTemplate:"$:/templates/EditTemplate" listview:classic >>
+<<list filter:"[list[$:/StoryList]]" history:"$:/HistoryList" template:"$:/templates/ViewTemplate" editTemplate:"$:/templates/EditTemplate" listview:classic >>
 </div>
 
 >>

cssbuild/tiddlywiki.less

@@ -153,7 +153,8 @@ Cecily views
 	background: #ccc;
 }
 
-.mediumCecily * {
+.mediumCecily .tw-list-element {
+	white-space: normal;
 	overflow-x: auto;
 }
 

tw5.com/wiki/DefaultTiddlers.tid

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