mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-10-04 18:00:44 +00:00
Code Issues Releases Wiki Activity

Improvements to the zooming navigator

Browse Source
This commit is contained in:
Jeremy Ruston 2012-03-20 13:30:59 +00:00
parent 492ab00577
commit b10727f556
2 changed files with 46 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
js/macros/zoomer.js
View File

@ -12,38 +12,60 @@ var Renderer = require("../Renderer.js").Renderer,
Tiddler = require("../Tiddler.js").Tiddler,
utils = require("../Utils.js");
function startZoomer(macroNode) {
function startZoomer(macroNode,x,y) {
macroNode.inZoomer = true;
macroNode.startX = x;
macroNode.startY = y;
utils.addClass(document.body,"in-zoomer");
}
function stopZoomer(macroNode) {
var newScrollY = macroNode.yFactor * (macroNode.bodyHeight - macroNode.windowHeight);
macroNode.inZoomer = false;
window.scrollTo(0,newScrollY);
document.body.style.webkitTransform = "translateY(" + newScrollY * macroNode.xFactor + "px) " +
"scale(" + macroNode.scale + ") " +
"translateY(" + ((macroNode.windowHeight / macroNode.scale) - macroNode.bodyHeight) * macroNode.yFactor * macroNode.xFactor + "px)";
utils.removeClass(document.body,"in-zoomer");
document.body.style.webkitTransform = "scale(1)";
document.body.style.webkitTransform = "translateY(0) scale(1) translateY(0)";
}
/*
Set the position of the chooser panel within its wrapper given a touch/mouse position in screen coordinates
Zoom the body element 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;
// Some shortcuts
macroNode.bodyWidth = document.body.offsetWidth;
macroNode.bodyHeight = document.body.offsetHeight;
macroNode.windowWidth = window.innerWidth;
macroNode.windowHeight = window.innerHeight;
// Compute the scale factor for fitting the entire page into the window. This is
// the scale factor we'll use when the touch is far to the left
macroNode.minScale = macroNode.windowHeight / macroNode.bodyHeight;
if(macroNode.minScale < 0.1) {
// Don't scale to less than 10% of original size
macroNode.minScale = 0.1;
} else if(macroNode.minScale > 1) {
// Nor should we scale up if the body is shorter than the window
macroNode.minScale = 1;
}
// Nothing to shift horizontally
var translateX = 0;
// Start by offsetting to compensate for the current scroll position
var translateY = (window.scrollY / scale);
// We divide the screen into two horizontal zones divided by the right edge of the body at maximum zoom (ie minimum scale)
macroNode.splitPos = macroNode.windowWidth/2 + (macroNode.bodyWidth * macroNode.minScale)/2;
// Compute the 0->1 ratio (from right to left) of the position of the touch within the right zone
macroNode.xFactor = (macroNode.windowWidth - x) / (macroNode.windowWidth - macroNode.splitPos);
if(macroNode.xFactor > 1) {
macroNode.xFactor = 1;
}
// And the 0->1 ration (from top to bottom) of the position of the touch down the screen
macroNode.yFactor = y/macroNode.windowHeight;
// Now interpolate the scale
macroNode.scale = (macroNode.minScale - 1) * macroNode.xFactor + 1;
// Apply the transform
document.body.style.webkitTransform = "scale(" + scale + ") translateX(" + translateX + "px) translateY(" + translateY + "px)";
document.body.style.webkitTransform = "translateY(" + window.scrollY * macroNode.xFactor + "px) " +
"scale(" + macroNode.scale + ") " +
"translateY(" + ((macroNode.windowHeight / macroNode.scale) - macroNode.bodyHeight) * macroNode.yFactor * macroNode.xFactor + "px)";
}
exports.macro = {
@ -53,13 +75,13 @@ exports.macro = {
},
events: {
touchstart: function(event) {
startZoomer(this);
hoverZoomer(this,event.touches[0].screenX,event.touches[0].screenY);
startZoomer(this,event.touches[0].clientX,event.touches[0].clientY);
hoverZoomer(this,event.touches[0].clientX,event.touches[0].clientY);
event.preventDefault();
return false;
},
touchmove: function(event) {
hoverZoomer(this,event.touches[0].screenX,event.touches[0].screenY);
hoverZoomer(this,event.touches[0].clientX,event.touches[0].clientY);
event.preventDefault();
return false;
},

6
tiddlywiki5/shadows/css/styles.css
View File

@ -8,6 +8,10 @@ body {
line-height: 48px;
}
img {
max-width: 100%;
}
a.tw-tiddlylink-external::before {
content: "\27a0\00a0";
}
@ -158,7 +162,7 @@ body.in-zoomer {
}
body.in-zoomer .zoomer-panel div {
background: rgba(236,128,75,0.5);
background: rgba(235,235,235,0.5);
}
body.in-zoomer iframe {