Improve storyview error detection

Fixes #912

core/modules/storyviews/classic.js

@@ -25,6 +25,10 @@ ClassicStoryView.prototype.navigateTo = function(historyInfo) {
 	}
 	var listItemWidget = this.listWidget.children[listElementIndex],
 		targetElement = listItemWidget.findFirstDomNode();
+	// Abandon if the list entry isn't a DOM element (it might be a text node)
+	if(!(targetElement instanceof Element)) {
+		return;
+	}
 	// Scroll the node into view
 	this.listWidget.dispatchEvent({type: "tm-scroll", target: targetElement});
 };
@@ -32,6 +36,10 @@ ClassicStoryView.prototype.navigateTo = function(historyInfo) {
 ClassicStoryView.prototype.insert = function(widget) {
 	var targetElement = widget.findFirstDomNode(),
 		duration = $tw.utils.getAnimationDuration();
+	// Abandon if the list entry isn't a DOM element (it might be a text node)
+	if(!(targetElement instanceof Element)) {
+		return;
+	}
 	// Get the current height of the tiddler
 	var computedStyle = window.getComputedStyle(targetElement),
 		currMarginBottom = parseInt(computedStyle.marginBottom,10),
@@ -62,7 +70,15 @@ ClassicStoryView.prototype.insert = function(widget) {
 
 ClassicStoryView.prototype.remove = function(widget) {
 	var targetElement = widget.findFirstDomNode(),
-		duration = $tw.utils.getAnimationDuration();
+		duration = $tw.utils.getAnimationDuration(),
+		removeElement = function() {
+			widget.removeChildDomNodes();
+		};
+	// Abandon if the list entry isn't a DOM element (it might be a text node)
+	if(!(targetElement instanceof Element)) {
+		removeElement();
+		return;
+	}
 	// Get the current height of the tiddler
 	var currWidth = targetElement.offsetWidth,
 		computedStyle = window.getComputedStyle(targetElement),
@@ -70,9 +86,7 @@ ClassicStoryView.prototype.remove = function(widget) {
 		currMarginTop = parseInt(computedStyle.marginTop,10),
 		currHeight = targetElement.offsetHeight + currMarginTop;
 	// Remove the dom nodes of the widget at the end of the transition
-	setTimeout(function() {
-		widget.removeChildDomNodes();
-	},duration);
+	setTimeout(removeElement,duration);
 	// Animate the closure
 	$tw.utils.setStyle(targetElement,[
 		{transition: "none"},

core/modules/storyviews/pop.js

@@ -23,6 +23,10 @@ PopStoryView.prototype.navigateTo = function(historyInfo) {
 	}
 	var listItemWidget = this.listWidget.children[listElementIndex],
 		targetElement = listItemWidget.findFirstDomNode();
+	// Abandon if the list entry isn't a DOM element (it might be a text node)
+	if(!(targetElement instanceof Element)) {
+		return;
+	}
 	// Scroll the node into view
 	this.listWidget.dispatchEvent({type: "tm-scroll", target: targetElement});
 };
@@ -30,6 +34,10 @@ PopStoryView.prototype.navigateTo = function(historyInfo) {
 PopStoryView.prototype.insert = function(widget) {
 	var targetElement = widget.findFirstDomNode(),
 		duration = $tw.utils.getAnimationDuration();
+	// Abandon if the list entry isn't a DOM element (it might be a text node)
+	if(!(targetElement instanceof Element)) {
+		return;
+	}
 	// Reset once the transition is over
 	setTimeout(function() {
 		$tw.utils.setStyle(targetElement,[
@@ -55,13 +63,19 @@ PopStoryView.prototype.insert = function(widget) {
 
 PopStoryView.prototype.remove = function(widget) {
 	var targetElement = widget.findFirstDomNode(),
-		duration = $tw.utils.getAnimationDuration();
+		duration = $tw.utils.getAnimationDuration(),
+		removeElement = function() {
+			if(targetElement.parentNode) {
+				widget.removeChildDomNodes();
+			}
+		};
+	// Abandon if the list entry isn't a DOM element (it might be a text node)
+	if(!(targetElement instanceof Element)) {
+		removeElement();
+		return;
+	}
 	// Remove the element at the end of the transition
-	setTimeout(function() {
-		if(targetElement.parentNode) {
-			widget.removeChildDomNodes();
-		}
-	},duration);
+	setTimeout(removeElement,duration);
 	// Animate the closure
 	$tw.utils.setStyle(targetElement,[
 		{transition: "none"},

core/modules/storyviews/zoomin.js

@@ -26,6 +26,10 @@ var ZoominListView = function(listWidget) {
 	// Make all the tiddlers position absolute, and hide all but the top (or first) one
 	$tw.utils.each(this.listWidget.children,function(itemWidget,index) {
 		var domNode = itemWidget.findFirstDomNode();
+		// Abandon if the list entry isn't a DOM element (it might be a text node)
+		if(!(domNode instanceof Element)) {
+			return;
+		}
 		if(targetTiddler !== itemWidget.parseTreeNode.itemTitle || (!targetTiddler && index)) {
 			domNode.style.display = "none";
 		} else {
@@ -43,6 +47,10 @@ ZoominListView.prototype.navigateTo = function(historyInfo) {
 	}
 	var listItemWidget = this.listWidget.children[listElementIndex],
 		targetElement = listItemWidget.findFirstDomNode();
+	// Abandon if the list entry isn't a DOM element (it might be a text node)
+	if(!(targetElement instanceof Element)) {
+		return;
+	}
 	// Make the new tiddler be position absolute and visible so that we can measure it
 	$tw.utils.setStyle(targetElement,[
 		{position: "absolute"},
@@ -121,6 +129,10 @@ function findTitleDomNode(widget,targetClass) {
 
 ZoominListView.prototype.insert = function(widget) {
 	var targetElement = widget.findFirstDomNode();
+	// Abandon if the list entry isn't a DOM element (it might be a text node)
+	if(!(targetElement instanceof Element)) {
+		return;
+	}
 	// Make the newly inserted node position absolute and hidden
 	$tw.utils.setStyle(targetElement,[
 		{display: "none"},
@@ -130,7 +142,15 @@ ZoominListView.prototype.insert = function(widget) {
 
 ZoominListView.prototype.remove = function(widget) {
 	var targetElement = widget.findFirstDomNode(),
-		duration = $tw.utils.getAnimationDuration();
+		duration = $tw.utils.getAnimationDuration(),
+		removeElement = function() {
+			widget.removeChildDomNodes();
+		};
+	// Abandon if the list entry isn't a DOM element (it might be a text node)
+	if(!(targetElement instanceof Element)) {
+		removeElement();
+		return;
+	}
 	// Set up the tiddler that is being closed
 	$tw.utils.setStyle(targetElement,[
 		{position: "absolute"},
@@ -170,10 +190,7 @@ ZoominListView.prototype.remove = function(widget) {
 		{opacity: "0"},
 		{zIndex: "0"}
 	]);
-	setTimeout(function() {
-		// Delete the DOM node when the transition is over
-		widget.removeChildDomNodes();
-	},duration);
+	setTimeout(removeElement,duration);
 	// Now the tiddler we're going back to
 	if(toWidgetDomNode) {
 		$tw.utils.setStyle(toWidgetDomNode,[

editions/tw5.com/tiddlers/widgets/ListWidget.tid

@@ -40,6 +40,8 @@ The `storyview` attribute specifies the name of an optional module that can anim
 * `zoomin`: just renders the current tiddler from the list, with a zoom animation for navigating between tiddlers
 * `pop`: shrinks items in and out of place
 
+In order for the storyviews to animate correctly each entry in the list should be a single block mode DOM element.
+
 !! Handling history and navigation
 
 The optional `history` attribute specifies the name of a tiddler that is used to track the current tiddler for navigation purposes. When the history tiddler changes the list view responds by telling the listview to handle navigating to the new tiddler. See the NavigationMechanism for more details.