mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-06-13 09:09:25 +00:00
Improvements to zoomable pan and zoom
This commit is contained in:
parent
e4fb532ecd
commit
99275b5425
|
@ -22,7 +22,7 @@ exports.info = {
|
||||||
};
|
};
|
||||||
|
|
||||||
exports.executeMacro = function() {
|
exports.executeMacro = function() {
|
||||||
var innerClasses = ["tw-scrollable-inner"],
|
var innerClasses = ["tw-zoomable-inner"],
|
||||||
innerAttributes = {
|
innerAttributes = {
|
||||||
"class": innerClasses,
|
"class": innerClasses,
|
||||||
style: {
|
style: {
|
||||||
|
@ -30,7 +30,7 @@ exports.executeMacro = function() {
|
||||||
position: "relative"
|
position: "relative"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
outerClasses = ["tw-scrollable","tw-scrollable-outer"],
|
outerClasses = ["tw-zoomable","tw-zoomable-outer"],
|
||||||
outerAttributes = {
|
outerAttributes = {
|
||||||
"class": outerClasses,
|
"class": outerClasses,
|
||||||
style: {
|
style: {
|
||||||
|
@ -82,7 +82,7 @@ exports.setViewPort = function(domNode) {
|
||||||
$tw.utils.setStyle(this.innerFrame.domNode,[
|
$tw.utils.setStyle(this.innerFrame.domNode,[
|
||||||
{transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in-out"},
|
{transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in-out"},
|
||||||
{transformOrigin: "0% 0%"},
|
{transformOrigin: "0% 0%"},
|
||||||
{transform: "scale(" + this.scale + ") translateX(" + this.translateX + "px) translateY(" + this.translateY + "px)"}
|
{transform: "translate(" + this.translateX * this.scale + "px," + this.translateY * this.scale + "px) scale(" + this.scale + ")"}
|
||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -122,7 +122,7 @@ exports.zoomAll = function() {
|
||||||
$tw.utils.setStyle(this.innerFrame.domNode,[
|
$tw.utils.setStyle(this.innerFrame.domNode,[
|
||||||
{transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in-out"},
|
{transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in-out"},
|
||||||
{transformOrigin: "0% 0%"},
|
{transformOrigin: "0% 0%"},
|
||||||
{transform: "scale(" + this.scale + ") translateX(" + this.translateX + "px) translateY(" + this.translateY + "px)"}
|
{transform: "translate(" + this.translateX * this.scale + "px," + this.translateY * this.scale + "px) scale(" + this.scale + ")"}
|
||||||
]);
|
]);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -138,7 +138,6 @@ exports.handleEvent = function(event) {
|
||||||
}
|
}
|
||||||
|
|
||||||
exports.handleScrollEvent = function(event) {
|
exports.handleScrollEvent = function(event) {
|
||||||
console.log("Zoomable got scroll event to",event.target);
|
|
||||||
this.setViewPort(event.target);
|
this.setViewPort(event.target);
|
||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
return false;
|
return false;
|
||||||
|
|
|
@ -6089,6 +6089,16 @@ a.tw-tiddlylink-missing {
|
||||||
box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.4);
|
box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tw-zoomable .tw-tiddler-frame {
|
||||||
|
width: auto;
|
||||||
|
padding: 30px 30px 30px 30px;
|
||||||
|
margin: 0 0px 0px 0px;
|
||||||
|
background-color: #fff;
|
||||||
|
-webkit-box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.4);
|
||||||
|
-moz-box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.4);
|
||||||
|
box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
.tw-menu-list-item {
|
.tw-menu-list-item {
|
||||||
padding-bottom: 0.5em;
|
padding-bottom: 0.5em;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
|
|
|
@ -195,6 +195,14 @@ a.tw-tiddlylink-missing {
|
||||||
width: 400px;
|
width: 400px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tw-zoomable .tw-tiddler-frame {
|
||||||
|
margin: 0px 0px 0px 0px;
|
||||||
|
padding: 30px 30px 30px 30px;
|
||||||
|
.box-shadow(1px 1px 6px rgba(0,0,0,0.4));
|
||||||
|
background-color: #fff;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
.tw-menu-list-item {
|
.tw-menu-list-item {
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
padding-bottom: 0.5em;
|
padding-bottom: 0.5em;
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
title: $:/DefaultTiddlers
|
title: $:/DefaultTiddlers
|
||||||
|
|
||||||
HelloThere
|
HelloThere
|
||||||
SidewaysView
|
|
||||||
CecilySubView
|
CecilySubView
|
||||||
Introduction
|
Introduction
|
||||||
Improvements
|
Improvements
|
||||||
|
|
Loading…
Reference in New Issue
Block a user