mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-11-17 15:24:50 +00:00
Code Issues Releases Wiki Activity

Fixed chooser so that it works when the screen is scrolled

Browse Source 
Or indeed zoomed.
This commit is contained in:
Jeremy Ruston 2012-03-14 13:49:05 +00:00
parent 06627cc587
commit 4354c7dbe2
3 changed files with 21 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
js/macros/chooser.js
View File

@ -30,9 +30,12 @@ function showChooser(macroNode) {
} }
} }
/*
Select the appropriate chooser item given a touch/mouse position in screen coordinates
*/
function select(macroNode,y) { function select(macroNode,y) {
if(macroNode.content.length > 0) { 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]; target = macroNode.content[0].domNode.childNodes[targetIndex];
if(target) { if(target) {
deselect(macroNode); 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) { function hoverChooser(macroNode,x,y) {
if(macroNode.chooserDisplayed) { if(macroNode.chooserDisplayed) {
// Get the target element that the touch/mouse is over // Get the target element that the touch/mouse is over
select(macroNode,y); select(macroNode,y);
// Things we need for sizing and positioning the chooser // Things we need for sizing and positioning the chooser
var domWrapper = macroNode.domNode, var domPanel = macroNode.content[0].domNode,
heightWrapper = domWrapper.offsetHeight,
rectWrapper = domWrapper.getBoundingClientRect(),
domPanel = macroNode.content[0].domNode,
heightPanel = domPanel.offsetHeight, heightPanel = domPanel.offsetHeight,
widthPanel = domPanel.offsetWidth; widthPanel = domPanel.offsetWidth;
// Make the coordinates relative to the wrapper // Position the chooser div to account for scrolling
x = x - rectWrapper.left; macroNode.content[0].domNode.style.top = window.pageYOffset + "px";
y = y - rectWrapper.top;
// Scale the panel to fit // Scale the panel to fit
var scaleFactor = heightWrapper/heightPanel; var scaleFactor = window.innerHeight/heightPanel;
// Scale up as we move right // Scale up as we move right
var expandFactor = x > 50 ? (x/50) : 1; var expandFactor = x > 50 ? (x/50) : 1;
// Set up the transform // Set up the transform
var scale = scaleFactor * expandFactor, var scale = scaleFactor * expandFactor,
translateX = 0, //x > 50 ? 0 : -(((50-x)/50) * widthPanel) / scale, 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.webkitTransformOrigin = "0 0";
domPanel.style.webkitTransform = "scale(" + scale + ") translateX(" + translateX + "px) translateY(" + translateY + "px)"; domPanel.style.webkitTransform = "scale(" + scale + ") translateX(" + translateX + "px) translateY(" + translateY + "px)";
} }

15
tiddlywiki5/styles.css
View File

@ -1,3 +1,7 @@
body {
position: relative;
}
.title { .title {
font-weight: bold; font-weight: bold;
font-size: 40px; font-size: 40px;
@ -110,20 +114,17 @@ a.tw-tiddlylink-missing {
font-family: Helvetica, Arial, sans-serif; font-family: Helvetica, Arial, sans-serif;
} }
.navigation-panel { .navigation-panel div {
position: absolute; position: absolute;
top: 0;
left: 0; left: 0;
top: 0;
min-width: 16px; min-width: 16px;
height: 100%; height: 100%;
} }
.navigation-panel div {
width: 100%;
height: 100%;
}
.navigation-panel div ul { .navigation-panel div ul {
position: absolute;
left: 0;
margin: 0 0 0 0; margin: 0 0 0 0;
padding: 0px 4px 0px 4px; padding: 0px 4px 0px 4px;
list-style: none; list-style: none;

2
tiddlywiki5/tiddlers/PageTemplate.tid
View File

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