kopia lustrzana https://github.com/miklobit/TiddlyWiki5
Remove zoomer and chooser
Jeremy Ruston
rodzic
55783a8f5d
commit
6c636a671d
|
|
@ -1,149 +0,0 @@
|
|||
/*\
|
||||
title: $:/core/modules/macros/chooser.js
|
||||
type: application/javascript
|
||||
module-type: macro
|
||||
|
||||
Zooming chooser macro
|
||||
|
||||
\*/
|
||||
(function(){
|
||||
|
||||
/*jslint node: true, browser: true */
|
||||
/*global $tw: false */
|
||||
"use strict";
|
||||
|
||||
exports.info = {
|
||||
name: "chooser",
|
||||
params: {
|
||||
}
|
||||
};
|
||||
|
||||
exports.showChooser = function() {
|
||||
if(!this.chooserDisplayed) {
|
||||
this.chooserDisplayed = true;
|
||||
this.child.children[0].children = [];
|
||||
for(var t=0; t<this.content.length; t++) {
|
||||
var node = this.content[t].clone();
|
||||
node.execute(this.parents,this.tiddlerTitle);
|
||||
node.renderInDom(this.child.children[0].domNode);
|
||||
this.child.children[0].children.push(node);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/*
|
||||
Set the position of the chooser panel within its wrapper given a touch/mouse position in screen coordinates
|
||||
*/
|
||||
exports.hoverChooser = function(x,y) {
|
||||
if(this.chooserDisplayed) {
|
||||
// Get the target element that the touch/mouse is over
|
||||
// this.select(y);
|
||||
// Things we need for sizing and positioning the chooser
|
||||
var domPanel = this.child.children[0].domNode,
|
||||
heightPanel = domPanel.offsetHeight,
|
||||
widthPanel = domPanel.offsetWidth;
|
||||
// Position the chooser div to account for scrolling
|
||||
domPanel.style.top = window.pageYOffset + "px";
|
||||
// Scale the panel to fit
|
||||
var scaleFactor = window.innerHeight/heightPanel;
|
||||
// Scale up as we move right
|
||||
var expandFactor = x > 50 ? ((x+150)/200) : 1;
|
||||
// Set up the transform
|
||||
var scale = scaleFactor * expandFactor,
|
||||
translateX = x > 16 ? 0 : -(((16-x)/16) * widthPanel) / scale,
|
||||
translateY = (y / scale) - ((y/window.innerHeight) * heightPanel);
|
||||
domPanel.style[$tw.browser.transformorigin] = "0 0";
|
||||
domPanel.style[$tw.browser.transform] = "scale(" + scale + ") translateX(" + translateX + "px) translateY(" + translateY + "px)";
|
||||
}
|
||||
};
|
||||
|
||||
exports.hideChooser = function() {
|
||||
if(this.chooserDisplayed) {
|
||||
// this.deselect();
|
||||
this.chooserDisplayed = false;
|
||||
while(this.child.children[0].domNode.hasChildNodes()) {
|
||||
this.child.children[0].domNode.removeChild(this.child.children[0].domNode.firstChild);
|
||||
}
|
||||
this.child.children[0].children = [];
|
||||
}
|
||||
};
|
||||
|
||||
exports.handleEvent = function(event) {
|
||||
switch(event.type) {
|
||||
case "touchstart":
|
||||
this.showChooser();
|
||||
this.hoverChooser(event.touches[0].clientX,event.touches[0].clientY);
|
||||
event.preventDefault();
|
||||
return false;
|
||||
case "touchmove":
|
||||
this.hoverChooser(event.touches[0].clientX,event.touches[0].clientY);
|
||||
event.preventDefault();
|
||||
return false;
|
||||
case "touchend":
|
||||
// this.action();
|
||||
this.hideChooser();
|
||||
event.preventDefault();
|
||||
return false;
|
||||
case "mouseover":
|
||||
if(event.target === this.child.domNode) {
|
||||
this.showChooser();
|
||||
this.hoverChooser(event.clientX,event.clientY);
|
||||
event.preventDefault();
|
||||
return false;
|
||||
}
|
||||
break;
|
||||
case "mousemove":
|
||||
this.hoverChooser(event.clientX,event.clientY);
|
||||
event.preventDefault();
|
||||
return false;
|
||||
case "mouseup":
|
||||
// this.action();
|
||||
this.hideChooser();
|
||||
event.preventDefault();
|
||||
return false;
|
||||
case "mouseout":
|
||||
if(!$tw.utils.domContains(this.child.domNode,event.relatedTarget)) {
|
||||
this.hideChooser();
|
||||
event.preventDefault();
|
||||
return false;
|
||||
}
|
||||
break;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
exports.executeMacro = function() {
|
||||
this.chooserDisplayed = false;
|
||||
var wrapperAttributes = {
|
||||
style: {
|
||||
"position": "absolute",
|
||||
"left": "0",
|
||||
"top": "0",
|
||||
"min-width": "16px",
|
||||
"z-index": "2000",
|
||||
"height": "100%" // Makes the height the same as the body, since the body is position:relative
|
||||
}
|
||||
},
|
||||
innerAttributes = {
|
||||
style: {
|
||||
"margin": "0 0 0 0",
|
||||
"padding": "0px 4px 0px 4px",
|
||||
"top": "0",
|
||||
"min-width": "16px",
|
||||
"background": "#ddd",
|
||||
"z-index": "2000",
|
||||
"border-right": "1px solid #aaa"
|
||||
}
|
||||
};
|
||||
if(this.classes) {
|
||||
wrapperAttributes["class"] = this.classes.slice(0);
|
||||
}
|
||||
return $tw.Tree.Element("div",wrapperAttributes,[
|
||||
$tw.Tree.Element("div",innerAttributes,[])
|
||||
],{
|
||||
events: ["touchstart","touchmove","touchend","mouseover","mousemove","mouseup","mouseout"],
|
||||
eventHandler: this
|
||||
});
|
||||
};
|
||||
|
||||
})();
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
{
|
||||
"title": "$:/plugins/tiddlywiki/zoomigator",
|
||||
"description": "Enables touch devices to swipe in from the right to zoom out to a birds eye view for navigating within the page",
|
||||
"author": "JeremyRuston",
|
||||
"version": "0.0.0",
|
||||
"coreVersion": ">=5.0.0",
|
||||
"source": "http://tiddlywiki.com/core/plugins/zoomigator"
|
||||
}
|
||||
|
|
@ -1,120 +0,0 @@
|
|||
/*\
|
||||
title: $:/plugins/tiddlywiki/zoomigator/zoomigator.js
|
||||
type: application/javascript
|
||||
module-type: macro
|
||||
|
||||
Zooming navigator macro
|
||||
|
||||
\*/
|
||||
(function(){
|
||||
|
||||
/*jslint node: true, browser: true */
|
||||
/*global $tw: false */
|
||||
"use strict";
|
||||
|
||||
exports.info = {
|
||||
name: "zoomigator",
|
||||
params: {
|
||||
}
|
||||
};
|
||||
|
||||
exports.startZoomigator = function(x,y) {
|
||||
this.inZoomigator = true;
|
||||
this.startX = x;
|
||||
this.startY = y;
|
||||
$tw.utils.addClass(document.body,"in-zoomigator");
|
||||
};
|
||||
|
||||
/*
|
||||
Zoom the body element given a touch/mouse position in screen coordinates
|
||||
*/
|
||||
exports.hoverZoomigator = function(x,y) {
|
||||
// Put the transform origin at the top in the middle
|
||||
document.body.style[$tw.browser.transformorigin] = "50% 0";
|
||||
// Some shortcuts
|
||||
this.bodyWidth = document.body.offsetWidth;
|
||||
this.bodyHeight = document.body.offsetHeight;
|
||||
this.windowWidth = window.innerWidth;
|
||||
this.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
|
||||
this.minScale = this.windowHeight / this.bodyHeight;
|
||||
if(this.minScale < 0.1) {
|
||||
// Don't scale to less than 10% of original size
|
||||
this.minScale = 0.1;
|
||||
} else if(this.minScale > 1) {
|
||||
// Nor should we scale up if the body is shorter than the window
|
||||
this.minScale = 1;
|
||||
}
|
||||
// We divide the screen into two horizontal zones divided by the right edge of the body at maximum zoom (ie minimum scale)
|
||||
this.splitPos = this.windowWidth/2 + (this.bodyWidth * this.minScale)/2;
|
||||
// Compute the 0->1 ratio (from right to left) of the position of the touch within the right zone
|
||||
this.xFactor = (this.windowWidth - x) / (this.windowWidth - this.splitPos);
|
||||
if(this.xFactor > 1) {
|
||||
this.xFactor = 1;
|
||||
}
|
||||
// And the 0->1 ratio (from top to bottom) of the position of the touch down the screen
|
||||
this.yFactor = y/this.windowHeight;
|
||||
// Now interpolate the scale
|
||||
this.scale = (this.minScale - 1) * this.xFactor + 1;
|
||||
// Apply the transform. The malarkey with .toFixed() is because otherwise we might get numbers in
|
||||
// exponential notation (such as 5.1e-15) that are illegal in CSS
|
||||
var preTranslateY = window.scrollY * this.xFactor,
|
||||
scale = this.scale,
|
||||
postTranslateY = ((this.windowHeight / this.scale) - this.bodyHeight) * this.yFactor * this.xFactor;
|
||||
var transform = "translateY(" + preTranslateY.toFixed(8) + "px) " +
|
||||
"scale(" + scale.toFixed(8) + ") " +
|
||||
"translateY(" + postTranslateY.toFixed(8) + "px)";
|
||||
document.body.style[$tw.browser.transform] = transform;
|
||||
};
|
||||
|
||||
exports.stopZoomigator = function() {
|
||||
var newScrollY = this.yFactor * (this.bodyHeight - this.windowHeight);
|
||||
this.inZoomigator = false;
|
||||
window.scrollTo(0,newScrollY);
|
||||
document.body.style[$tw.browser.transform] = "translateY(" + newScrollY * this.xFactor + "px) " +
|
||||
"scale(" + this.scale + ") " +
|
||||
"translateY(" + ((this.windowHeight / this.scale) - this.bodyHeight) * this.yFactor * this.xFactor + "px)";
|
||||
$tw.utils.removeClass(document.body,"in-zoomigator");
|
||||
document.body.style[$tw.browser.transform] = "translateY(0) scale(1) translateY(0)";
|
||||
};
|
||||
|
||||
exports.handleEvent = function(event) {
|
||||
switch(event.type) {
|
||||
case "touchstart":
|
||||
this.startZoomigator(event.touches[0].clientX,event.touches[0].clientY);
|
||||
this.hoverZoomigator(event.touches[0].clientX,event.touches[0].clientY);
|
||||
event.preventDefault();
|
||||
return false;
|
||||
case "touchmove":
|
||||
this.hoverZoomigator(event.touches[0].clientX,event.touches[0].clientY);
|
||||
event.preventDefault();
|
||||
return false;
|
||||
case "touchend":
|
||||
this.stopZoomigator();
|
||||
event.preventDefault();
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
exports.executeMacro = function() {
|
||||
this.inZoomigator = false;
|
||||
var attributes = {
|
||||
style: {
|
||||
"position": "absolute",
|
||||
"right": "0",
|
||||
"top": "0",
|
||||
"min-width": "16px",
|
||||
"height": "100%" // Makes the height the same as the body, since the body is position:relative
|
||||
}
|
||||
};
|
||||
if(this.classes) {
|
||||
attributes["class"] = this.classes.slice(0);
|
||||
}
|
||||
return $tw.Tree.Element("div",attributes,[],{
|
||||
events: ["touchstart","touchmove","touchend"],
|
||||
eventHandler: this
|
||||
});
|
||||
};
|
||||
|
||||
})();
|
||||
Ładowanie…
Reference in New Issue