mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2025-10-31 07:32:59 +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
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, Tiddler = require("../Tiddler.js").Tiddler,
utils = require("../Utils.js"); utils = require("../Utils.js");
function startZoomer(macroNode) { function startZoomer(macroNode,x,y) {
macroNode.inZoomer = true; macroNode.inZoomer = true;
macroNode.startX = x;
macroNode.startY = y;
utils.addClass(document.body,"in-zoomer"); utils.addClass(document.body,"in-zoomer");
} }
function stopZoomer(macroNode) { function stopZoomer(macroNode) {
var newScrollY = macroNode.yFactor * (macroNode.bodyHeight - macroNode.windowHeight);
macroNode.inZoomer = false; 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"); 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) { function hoverZoomer(macroNode,x,y) {
// Put the transform origin at the top in the middle // Put the transform origin at the top in the middle
document.body.style.webkitTransformOrigin = "50% 0"; document.body.style.webkitTransformOrigin = "50% 0";
// Compute the scale factor for fitting the entire page into the window // Some shortcuts
var scaleToFit = window.innerHeight / document.body.offsetHeight; macroNode.bodyWidth = document.body.offsetWidth;
// Start with a scale factor determined by how far in from the right we are macroNode.bodyHeight = document.body.offsetHeight;
var scale = (window.innerWidth - (window.innerWidth - x) * 2) / window.innerWidth; macroNode.windowWidth = window.innerWidth;
// Don't scale any smaller than needed to fit the entire page macroNode.windowHeight = window.innerHeight;
if(scale < scaleToFit) { // Compute the scale factor for fitting the entire page into the window. This is
scale = scaleToFit; // 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 // We divide the screen into two horizontal zones divided by the right edge of the body at maximum zoom (ie minimum scale)
var translateX = 0; macroNode.splitPos = macroNode.windowWidth/2 + (macroNode.bodyWidth * macroNode.minScale)/2;
// Start by offsetting to compensate for the current scroll position // Compute the 0->1 ratio (from right to left) of the position of the touch within the right zone
var translateY = (window.scrollY / scale); 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 // 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 = { exports.macro = {
@@ -53,13 +75,13 @@ exports.macro = {
}, },
events: { events: {
touchstart: function(event) { touchstart: function(event) {
startZoomer(this); startZoomer(this,event.touches[0].clientX,event.touches[0].clientY);
hoverZoomer(this,event.touches[0].screenX,event.touches[0].screenY); hoverZoomer(this,event.touches[0].clientX,event.touches[0].clientY);
event.preventDefault(); event.preventDefault();
return false; return false;
}, },
touchmove: function(event) { 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(); event.preventDefault();
return false; return false;
}, },

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

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