Added the experimental zooming navigator

It doesn't work properly yet. Swipe in from the right edge of the
screen to try it. iPad/iPhone only at the moment

js/App.js

@@ -93,6 +93,7 @@ var App = function() {
 	this.store.installMacro(require("./macros/version.js").macro);
 	this.store.installMacro(require("./macros/video.js").macro);
 	this.store.installMacro(require("./macros/view.js").macro);
+	this.store.installMacro(require("./macros/zoomer.js").macro);
 	// Set up navigation if we're in the browser
 	if(this.isBrowser) {
 		// Open the PageTemplate

js/macros/zoomer.js

@@ -0,0 +1,79 @@
+/*\
+title: js/macros/zoomer.js
+
+\*/
+(function(){
+
+/*jslint node: true, browser: true */
+"use strict";
+
+var Renderer = require("../Renderer.js").Renderer,
+    Dependencies = require("../Dependencies.js").Dependencies,
+	Tiddler = require("../Tiddler.js").Tiddler,
+	utils = require("../Utils.js");
+
+function startZoomer(macroNode) {
+	macroNode.inZoomer = true;
+	utils.addClass(document.body,"in-zoomer");
+}
+
+function stopZoomer(macroNode) {
+	macroNode.inZoomer = false;
+	utils.removeClass(document.body,"in-zoomer");
+	document.body.style.webkitTransform = "scale(1)";
+}
+
+/*
+Set the position of the chooser panel within its wrapper given a touch/mouse position in screen coordinates
+*/
+function hoverZoomer(macroNode,x,y) {
+	// Put the transform origin at the top in the middle
+	document.body.style.webkitTransformOrigin = "50% 0";
+	// Compute the scale factor for fitting the entire page into the window
+	var scaleToFit = window.innerHeight / document.body.offsetHeight;
+	// Start with a scale factor determined by how far in from the right we are
+	var scale = (window.innerWidth - (window.innerWidth - x) * 2) / window.innerWidth;
+	// Don't scale any smaller than needed to fit the entire page
+	if(scale < scaleToFit) {
+		scale = scaleToFit;
+	}
+	// Nothing to shift horizontally
+	var translateX = 0;
+	// Start by offsetting to compensate for the current scroll position
+	var translateY = (window.scrollY / scale); 
+	// Apply the transform
+	document.body.style.webkitTransform = "scale(" + scale + ") translateX(" + translateX + "px) translateY(" + translateY + "px)";
+
+}
+
+exports.macro = {
+	name: "zoomer",
+	wrapperTag: "div",
+	params: {
+	},
+	events: {
+		touchstart: function(event) {
+			startZoomer(this);
+			hoverZoomer(this,event.touches[0].screenX,event.touches[0].screenY);
+			event.preventDefault();
+			return false;
+		},
+		touchmove: function(event) {
+			hoverZoomer(this,event.touches[0].screenX,event.touches[0].screenY);
+			event.preventDefault();
+			return false;
+		},
+		touchend: function(event) {
+			stopZoomer(this);
+			event.preventDefault();
+			return false;
+		}
+	},
+	execute: function() {
+		this.inZoomer = false;
+		return [];
+	}
+};
+
+})();
+

tiddlywiki5/shadows/css/styles.css

@@ -119,7 +119,7 @@ a.tw-tiddlylink-missing {
 	left: 0;
 	top: 0;
 	min-width: 16px;
-	height: 100%;
+	height: 100%; /* Makes the element the same height as the body, since the body is position: relative */
 }
 
 .navigation-panel div ul {
@@ -141,3 +141,26 @@ a.tw-tiddlylink-missing {
 	background: #a55;
 }
 
+body {
+	-webkit-transition: -webkit-transform 0.3s ease-in-out;
+}
+
+body.in-zoomer {
+	-webkit-transition: none;
+}
+
+.zoomer-panel div {
+	position: absolute;
+	right: 0;
+	top: 0;
+	min-width: 16px;
+	height: 100%; /* Makes the element the same height as the body, since the body is position: relative */
+}
+
+body.in-zoomer .zoomer-panel div {
+	background: rgba(236,128,75,0.5);
+}
+
+body.in-zoomer iframe {
+	visibility: hidden;
+}

tiddlywiki5/shadows/templates/PageTemplate.tid

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