mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-09-06 20:46:57 +00:00
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
This commit is contained in:
parent
3d4e92568f
commit
492ab00577
@ -93,6 +93,7 @@ var App = function() {
|
|||||||
this.store.installMacro(require("./macros/version.js").macro);
|
this.store.installMacro(require("./macros/version.js").macro);
|
||||||
this.store.installMacro(require("./macros/video.js").macro);
|
this.store.installMacro(require("./macros/video.js").macro);
|
||||||
this.store.installMacro(require("./macros/view.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
|
// Set up navigation if we're in the browser
|
||||||
if(this.isBrowser) {
|
if(this.isBrowser) {
|
||||||
// Open the PageTemplate
|
// Open the PageTemplate
|
||||||
|
79
js/macros/zoomer.js
Normal file
79
js/macros/zoomer.js
Normal file
@ -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 [];
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
})();
|
||||||
|
|
@ -119,7 +119,7 @@ a.tw-tiddlylink-missing {
|
|||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
min-width: 16px;
|
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 {
|
.navigation-panel div ul {
|
||||||
@ -141,3 +141,26 @@ a.tw-tiddlylink-missing {
|
|||||||
background: #a55;
|
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;
|
||||||
|
}
|
||||||
|
@ -1,8 +1,6 @@
|
|||||||
title: PageTemplate
|
title: PageTemplate
|
||||||
|
|
||||||
{{navigation-panel{
|
{{navigation-panel{<<chooser>>}}}{{zoomer-panel{<<zoomer>>}}}
|
||||||
<<chooser>>
|
|
||||||
}}}
|
|
||||||
{{container-fluid{
|
{{container-fluid{
|
||||||
<<story story:StoryTiddlers template:SimpleTemplate>>
|
<<story story:StoryTiddlers template:SimpleTemplate>>
|
||||||
}}}
|
}}}
|
Loading…
Reference in New Issue
Block a user