Added an experimental fisheye menu chooser

I'm starting to experiment with interactive features so that I can
finalise the macro architecture. I'm trying to design for touch first;
this menu swipes in from the left

js/App.js

@@ -85,6 +85,7 @@ var App = function() {
 		}
 	}
 	// Bit of a hack to set up the macros
+	this.store.installMacro(require("./macros/chooser.js").macro);
 	this.store.installMacro(require("./macros/echo.js").macro);
 	this.store.installMacro(require("./macros/image.js").macro);
 	this.store.installMacro(require("./macros/link.js").macro);

js/macros/chooser.js

@@ -0,0 +1,105 @@
+/*\
+title: js/macros/chooser.js
+
+\*/
+(function(){
+
+/*jslint node: true */
+"use strict";
+
+var Renderer = require("../Renderer.js").Renderer,
+    Dependencies = require("../Dependencies.js").Dependencies,
+	Tiddler = require("../Tiddler.js").Tiddler,
+	utils = require("../Utils.js");
+
+function positionChooserPanel(macroNode,x,y) {
+	var domWrapper = macroNode.domNode,
+		heightWrapper = domWrapper.offsetHeight,
+		rectWrapper = domWrapper.getBoundingClientRect(),
+		domPanel = macroNode.content[0].domNode,
+		heightPanel = domPanel.offsetHeight,
+		rectPanel = domPanel.getBoundingClientRect();
+	// Make the coordinates relative to the wrapper
+	x = x - rectWrapper.left;
+	y = y - rectWrapper.top;
+	// Scale the panel to fit
+	var scaleFactor = heightWrapper/heightPanel;
+	// Scale up as we move right
+	var expandFactor = ((100+x)/100);
+	// Set up the transform
+	var scale = scaleFactor * expandFactor,
+		translate = (y / scale) - ((y/heightWrapper) * heightPanel);
+	domPanel.style.webkitTransformOrigin = "0 0";
+	domPanel.style.webkitTransform = "scale(" + scale + ") translateY(" + translate + "px)";
+}
+
+function loadContent(macroNode) {
+	var nodes = [];
+	macroNode.store.forEachTiddler("title",function(title,tiddler) {
+		nodes.push(Renderer.ElementNode("li",{},[
+				Renderer.TextNode(title)
+			]));
+	});
+	var wrapper = Renderer.ElementNode("ul",{},nodes);
+	wrapper.execute(macroNode.parents,macroNode.store.getTiddler(macroNode.tiddlerTitle));
+	macroNode.content = [wrapper];
+	macroNode.content[0].renderInDom(macroNode.domNode);
+}
+
+function removeContent(macroNode) {
+	macroNode.domNode.removeChild(macroNode.content[0].domNode);
+	macroNode.content = [];
+}
+
+exports.macro = {
+	name: "chooser",
+	wrapperTag: "div",
+	params: {
+	},
+	events: {
+		touchstart: function(event) {
+			this.domNode.style.backgroundColor = "red";
+			loadContent(this);
+			positionChooserPanel(this,event.touches[0].pageX,event.touches[0].pageY);
+			event.preventDefault();
+			return false;
+		},
+		touchmove: function(event) {
+			positionChooserPanel(this,event.touches[0].pageX,event.touches[0].pageY);
+			event.preventDefault();
+			return false;
+		},
+		touchend: function(event) {
+			this.domNode.style.backgroundColor = "blue";
+			removeContent(this);
+			event.preventDefault();
+			return false;
+		},
+		mouseover: function(event) {
+			if(event.target === this.domNode) {
+				loadContent(this);
+				positionChooserPanel(this,event.clientX,event.clientY);
+				event.preventDefault();
+				return false;
+			}
+		},
+		mousemove: function(event) {
+			positionChooserPanel(this,event.clientX,event.clientY);
+			event.preventDefault();
+			return false;
+		},
+		mouseout: function(event) {
+			if(!utils.domContains(this.domNode,event.relatedTarget)) {
+				removeContent(this);
+				event.preventDefault();
+				return false;
+			}
+		}
+	},
+	execute: function() {
+		return [];
+	}
+};
+
+})();
+

tiddlywiki5/styles.css

@@ -108,5 +108,17 @@ a.tw-tiddlylink-missing {
 	font-family: Helvetica, Arial, sans-serif;
 }
 
+.navigation-panel {
+	position: fixed;
+	top: 0;
+	left: 0;
+	height: 100%;
+	background: #ddd;
+}
 
-
+.navigation-panel div {
+	width: 100%;
+	height: 100%;
+	padding-left: 8px;
+	padding-right: 8px;
+}

tiddlywiki5/tiddlers/PageTemplate.tid

@@ -1,5 +1,8 @@
 title: PageTemplate
 
+{{navigation-panel{
+<<chooser>>
+}}}
 {{container{
 <<story story:StoryTiddlers template:SimpleTemplate>>
 }}}