From 4354c7dbe25fc28f30611dea2d37fab1cc1f8194 Mon Sep 17 00:00:00 2001
From: Jeremy Ruston <jeremy@osmosoft.com>
Date: Wed, 14 Mar 2012 13:49:05 +0000
Subject: [PATCH] Fixed chooser so that it works when the screen is scrolled

Or indeed zoomed.
---
 js/macros/chooser.js                  | 22 ++++++++++++----------
 tiddlywiki5/styles.css                | 15 ++++++++-------
 tiddlywiki5/tiddlers/PageTemplate.tid |  2 +-
 3 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/js/macros/chooser.js b/js/macros/chooser.js
index 434dd8e2b..78621ef1d 100644
--- a/js/macros/chooser.js
+++ b/js/macros/chooser.js
@@ -30,9 +30,12 @@ function showChooser(macroNode) {
 	}
 }
 
+/*
+Select the appropriate chooser item given a touch/mouse position in screen coordinates
+*/
 function select(macroNode,y) {
 	if(macroNode.content.length > 0) {
-		var targetIndex = Math.floor(macroNode.content[0].domNode.childNodes.length * (y/macroNode.domNode.offsetHeight)),
+		var targetIndex = Math.floor(macroNode.content[0].domNode.childNodes.length * (y/window.innerHeight)),
 			target = macroNode.content[0].domNode.childNodes[targetIndex];
 		if(target) {
 			deselect(macroNode);
@@ -58,28 +61,27 @@ function action(macroNode) {
 	}
 }
 
+/*
+Set the position of the chooser panel within its wrapper given a touch/mouse position in screen coordinates
+*/
 function hoverChooser(macroNode,x,y) {
 	if(macroNode.chooserDisplayed) {
 		// Get the target element that the touch/mouse is over
 		select(macroNode,y);
 		// Things we need for sizing and positioning the chooser
-		var domWrapper = macroNode.domNode,
-			heightWrapper = domWrapper.offsetHeight,
-			rectWrapper = domWrapper.getBoundingClientRect(),
-			domPanel = macroNode.content[0].domNode,
+		var domPanel = macroNode.content[0].domNode,
 			heightPanel = domPanel.offsetHeight,
 			widthPanel = domPanel.offsetWidth;
-		// Make the coordinates relative to the wrapper
-		x = x - rectWrapper.left;
-		y = y - rectWrapper.top;
+		// Position the chooser div to account for scrolling
+		macroNode.content[0].domNode.style.top = window.pageYOffset + "px";
 		// Scale the panel to fit
-		var scaleFactor = heightWrapper/heightPanel;
+		var scaleFactor = window.innerHeight/heightPanel;
 		// Scale up as we move right
 		var expandFactor = x > 50 ? (x/50) : 1;
 		// Set up the transform
 		var scale = scaleFactor * expandFactor,
 			translateX = 0, //x > 50 ? 0 : -(((50-x)/50) * widthPanel) / scale,
-			translateY = (y / scale) - ((y/heightWrapper) * heightPanel);
+			translateY = (y / scale) - ((y/window.innerHeight) * heightPanel);
 		domPanel.style.webkitTransformOrigin = "0 0";
 		domPanel.style.webkitTransform = "scale(" + scale + ") translateX(" + translateX + "px) translateY(" + translateY + "px)";
 	}
diff --git a/tiddlywiki5/styles.css b/tiddlywiki5/styles.css
index 4331de666..ea0a0bb77 100644
--- a/tiddlywiki5/styles.css
+++ b/tiddlywiki5/styles.css
@@ -1,3 +1,7 @@
+body {
+	position: relative;
+}
+
 .title {
 	font-weight: bold;
 	font-size: 40px;
@@ -110,20 +114,17 @@ a.tw-tiddlylink-missing {
 	font-family: Helvetica, Arial, sans-serif;
 }
 
-.navigation-panel {
+.navigation-panel div {
 	position: absolute;
-	top: 0;
 	left: 0;
+	top: 0;
 	min-width: 16px;
 	height: 100%;
 }
 
-.navigation-panel div {
-	width: 100%;
-	height: 100%;
-}
-
 .navigation-panel div ul {
+	position: absolute;
+	left: 0;
 	margin: 0 0 0 0;
 	padding: 0px 4px 0px 4px;
 	list-style: none;
diff --git a/tiddlywiki5/tiddlers/PageTemplate.tid b/tiddlywiki5/tiddlers/PageTemplate.tid
index 840847f05..f50073921 100644
--- a/tiddlywiki5/tiddlers/PageTemplate.tid
+++ b/tiddlywiki5/tiddlers/PageTemplate.tid
@@ -3,6 +3,6 @@ title: PageTemplate
 {{navigation-panel{
 <<chooser>>
 }}}
-{{container{
+{{container-fluid{
 <<story story:StoryTiddlers template:SimpleTemplate>>
 }}}
\ No newline at end of file