Added new storyview called "zoomin"

core/modules/macros/story/views/zoomin.js

@@ -0,0 +1,208 @@
+/*\
+title: $:/core/modules/macros/story/views/zoomin.js
+type: application/javascript
+module-type: storyview
+
+A storyview that shows a single tiddler and navigates by zooming into links
+
+\*/
+(function(){
+
+/*jslint node: true, browser: true */
+/*global $tw: false, Node: false */
+"use strict";
+
+function Zoomin(story) {
+	// Save the story
+	this.story = story;
+	var wrapper = this.story.child.children[1].domNode;
+	// Make all the tiddlers position absolute, and hide all but the first one
+	wrapper.style.position = "relative";
+	for(var t=0; t<wrapper.children.length; t++) {
+		if(t) {
+			wrapper.children[t].style.display = "none";
+		}
+		wrapper.children[t].style.position = "absolute";
+	}
+	// Record the current tiddler node
+	this.currTiddler = this.story.child.children[1].children[0];
+	// Set up the stack of previously viewed tiddlers
+	this.prevTiddlers = [this.currTiddler.children[0].params.target];
+}
+
+/*
+Find the first descendent node that is a <<view title>> macro
+*/
+function findTitleNode(node) {
+	var r;
+	if(node.macroName && node.macroName === "view" && node.params && node.params.field && node.params.field === "title") {
+		return node;
+	}
+	if(node.children) {
+		for(var t=0; t<node.children.length; t++) {
+			r = findTitleNode(node.children[t]);
+			if(r) {
+				return r;
+			}
+		}
+	} else if(node.child) {
+		r = findTitleNode(node.child);
+		if(r) {
+			return r;
+		}
+	}
+	return null;
+}
+
+/*
+Given a tree node find the bounding rectange of its first child element
+*/
+function getNodeBounds(node) {
+	if(node && node.domNode) {
+		if(node.domNode.nodeType === Node.TEXT_NODE) {
+			return node.domNode.parentNode.getBoundingClientRect();
+		} else {
+			return node.domNode.getBoundingClientRect();
+		}
+	} else {
+		return getNodeBounds(node.child);
+	}
+}
+
+/*
+Visualise navigation to the specified tiddler macro, optionally specifying a source node for the visualisation
+	targetTiddlerNode: tree node of the tiddler macro we're navigating to
+	isNew: true if the node we're navigating to has just been added to the DOM
+	sourceNode: optional tree node that initiated the navigation
+*/
+Zoomin.prototype.navigate = function(targetTiddlerNode,isNew,sourceEvent) {
+	// Do nothing if the target tiddler is already the current tiddler
+	if(targetTiddlerNode === this.currTiddler) {
+		return;
+	}
+	// Make the new tiddler be position absolute and visible
+	targetTiddlerNode.domNode.style.position = "absolute";
+	targetTiddlerNode.domNode.style.display = "block";
+	targetTiddlerNode.domNode.style[$tw.browser.transformorigin] = "0 0";
+	targetTiddlerNode.domNode.style[$tw.browser.transform] = "translateX(0px) translateY(0px) scale(1)";
+	targetTiddlerNode.domNode.style[$tw.browser.transition] = "none";
+	// Get the position of the source node, or use the centre of the window as the source position
+	var sourceBounds;
+	if(sourceEvent && sourceEvent.navigateFrom) {
+		sourceBounds = getNodeBounds(sourceEvent.navigateFrom);
+	} else {
+		sourceBounds = {
+			left: window.innerWidth/2 - 2,
+			top: window.innerHeight/2 - 2,
+			width: 4,
+			height: 4
+		};
+	}
+	// Try to find the title node in the target tiddler
+	var titleNode = findTitleNode(targetTiddlerNode) || targetTiddlerNode;
+	// Compute the transform for the target tiddler to make the title lie over the source rectange
+	var targetBounds = getNodeBounds(targetTiddlerNode),
+		titleBounds = getNodeBounds(titleNode),
+		scale = sourceBounds.width / titleBounds.width,
+		x = sourceBounds.left - targetBounds.left - (titleBounds.left - targetBounds.left) * scale,
+		y = sourceBounds.top - targetBounds.top - (titleBounds.top - targetBounds.top) * scale;
+	// Transform the target tiddler
+	targetTiddlerNode.domNode.style[$tw.browser.transform] = "translateX(" + x + "px) translateY(" + y + "px) scale(" + scale + ")";
+	// Get the animation duration
+	var d = ($tw.config.preferences.animationDuration/1000).toFixed(8) + "s";
+	// Apply the ending transitions with a timeout to ensure that the previously applied transformations are applied first
+	var self = this,
+		currTiddler = this.currTiddler;
+	$tw.utils.nextTick(function() {
+		// Transform the target tiddler
+		var currTiddlerBounds = getNodeBounds(currTiddler),
+			x = (currTiddlerBounds.left - targetBounds.left),
+			y = (currTiddlerBounds.top - targetBounds.top);
+		targetTiddlerNode.domNode.style[$tw.browser.transition] = "-" + $tw.browser.prefix.toLowerCase() + "-transform " + d + " ease-in-out, opacity " + d + " ease-out";
+		targetTiddlerNode.domNode.style.opacity = "1.0";
+		targetTiddlerNode.domNode.style[$tw.browser.transform] = "translateX(" + x + "px) translateY(" + y + "px) scale(1)";
+		targetTiddlerNode.domNode.style.zIndex = "500";
+		// Transform the current tiddler
+		var scale = titleBounds.width / sourceBounds.width;
+		x =  titleBounds.left - targetBounds.left - (sourceBounds.left - currTiddlerBounds.left) * scale;
+		y =  titleBounds.top - targetBounds.top - (sourceBounds.top - currTiddlerBounds.top) * scale;
+		currTiddler.domNode.style[$tw.browser.transition] = "-" + $tw.browser.prefix.toLowerCase() + "-transform " + d + " ease-in-out, opacity " + d + " ease-out";
+		currTiddler.domNode.style.opacity = "0.0";
+		currTiddler.domNode.style[$tw.browser.transformorigin] = "0 0";
+		currTiddler.domNode.style[$tw.browser.transform] = "translateX(" + x + "px) translateY(" + y + "px) scale(" + scale + ")";
+		currTiddler.domNode.style.zIndex = "0";
+	});
+	// Record the new current tiddler
+	this.currTiddler = targetTiddlerNode;
+	// Save the tiddler in the stack
+	this.prevTiddlers.push(targetTiddlerNode.children[0].params.target);
+};
+
+/*
+Visualise closing a tiddler
+*/
+Zoomin.prototype.close = function(targetTiddlerNode,sourceEvent) {
+	// Remove the last entry from the navigation stack, which will be to navigate to the current tiddler
+	this.prevTiddlers.pop();
+	// Find the top entry in the navigation stack that still exists
+	var storyElementIndex,storyElement;
+	while(this.prevTiddlers.length > 0) {
+		var title = this.prevTiddlers.pop();
+		storyElementIndex = this.story.findStoryElementByTitle(0,title);
+		if(storyElementIndex !== undefined) {
+			break;
+		}
+	}
+	if(storyElementIndex !== undefined) {
+		storyElement = this.story.storyNode.children[storyElementIndex];
+	}
+	// Get the animation duration
+	var d = ($tw.config.preferences.animationDuration/1000).toFixed(8) + "s";
+	// Set up the tiddler that is being closed
+	targetTiddlerNode.domNode.style.position = "absolute";
+	targetTiddlerNode.domNode.style.display = "block";
+	targetTiddlerNode.domNode.style[$tw.browser.transformorigin] = "50% 50%";
+	targetTiddlerNode.domNode.style[$tw.browser.transform] = "translateX(0px) translateY(0px) scale(1)";
+	targetTiddlerNode.domNode.style[$tw.browser.transition] = "none";
+	targetTiddlerNode.domNode.style.zIndex = "0";
+	// Set up the tiddler we're moving back in
+	if(storyElement !== undefined) {
+		storyElement.domNode.style.position = "absolute";
+		storyElement.domNode.style.display = "block";
+		storyElement.domNode.style[$tw.browser.transformorigin] = "50% 50%";
+		storyElement.domNode.style[$tw.browser.transform] = "translateX(0px) translateY(0px) scale(10)";
+		storyElement.domNode.style[$tw.browser.transition] = "-" + $tw.browser.prefix.toLowerCase() + "-transform " + d + " ease-in-out, opacity " + d + " ease-out";
+		storyElement.domNode.style.opacity = "0.0";
+		storyElement.domNode.style.zIndex = "500";
+		// Push the tiddler we're moving back to back on the stack
+		this.prevTiddlers.push(storyElement.children[0].params.target);
+		this.currTiddler = storyElement;
+	} else {
+		this.currTiddler = null;
+	}
+	// Animate them both
+	$tw.utils.nextTick(function() {
+		// First, the tiddler we're closing
+		targetTiddlerNode.domNode.style[$tw.browser.transition] = "-" + $tw.browser.prefix.toLowerCase() + "-transform " + d + " ease-in-out, opacity " + d + " ease-out";
+		targetTiddlerNode.domNode.style.opacity = "0.0";
+		targetTiddlerNode.domNode.style[$tw.browser.transformorigin] = "50% 50%";
+		targetTiddlerNode.domNode.style[$tw.browser.transform] = "translateX(0px) translateY(0px) scale(0.1)";
+		targetTiddlerNode.domNode.style.zIndex = "0";
+		targetTiddlerNode.domNode.addEventListener($tw.browser.transitionEnd,function(event) {
+			// Delete the DOM node when the transition is over
+			if(targetTiddlerNode.domNode.parentNode) {
+				targetTiddlerNode.domNode.parentNode.removeChild(targetTiddlerNode.domNode);
+			}
+		},true);
+		// Now the tiddler we're going back to
+		if(storyElement !== undefined) {
+			storyElement.domNode.style[$tw.browser.transform] = "translateX(0px) translateY(0px) scale(1)";
+			storyElement.domNode.style.opacity = "1.0";
+		}
+	});
+	return true; // Indicate that we'll delete the DOM node
+};
+
+exports.zoomin = Zoomin;
+
+})();

tw5.com/tiddlers/HelloThere.tid

@@ -5,11 +5,16 @@ type: text/x-tiddlywiki
 
 Welcome to TiddlyWiki5, a reboot of TiddlyWiki, the venerable, reusable non-linear personal web notebook [[first released in 2004|History]]. It is a complete interactive wiki that can run from a single HTML file in the browser or as a powerful [[node.js application|node.js]].
 
-TiddlyWiki offers a radically improved way of managing your data compared to traditional documents and emails. The fundamental idea is that information is more useful and reusable if we cut up into the [[smallest semantically meaningful chunks|Tiddlers]] and use links, tags and macros to model the structured relationships between them.  TiddlyWiki aims to provide a fluid interface for working with tiddlers, allowing them to be aggregated and composed into longer narratives.
+TiddlyWiki offers a radically better way of managing your data compared to traditional documents and emails. The fundamental idea is that information is more useful and reusable if we cut up into the smallest semantically meaningful chunks -- [[tiddlers|Tiddlers]] -- and use links, tags and macros to model the structured relationships between them.  TiddlyWiki aims to provide a fluid interface for working with tiddlers, allowing them to be aggregated and composed into longer narratives.
 
-TiddlyWiki5 is at an incomplete early alpha stage, and is not yet ready for general use. But it's the best possible time to get involved and support its future development. You can:
+TiddlyWiki5 has many [[improvements|Improvements]] over the original. It is currently at an early alpha stage, and is not yet ready for general use. But it's the best possible time to get involved and support its future development. You can:
 
 * Explore its features online at http://alpha.tiddlywiki.com/
 * Get involved in the [[development on GitHub|https://github.com/Jermolene/TiddlyWiki5]]
 * Join the discussions on [[the TiddlyWikiDev Google Group|http://groups.google.com/group/TiddlyWikiDev]]
 * Follow [[@TiddlyWiki on Twitter|http://twitter.com/#!/TiddlyWiki]] for the latest news
+
+<<hide tiddler:[[$:/CurrentView]] notequal:zoomin><
+<<tiddler target:Introduction>>
+
+>>

tw5.com/wiki/CurrentView.tid

@@ -0,0 +1,3 @@
+title: $:/CurrentView
+
+zoomin