1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2025-12-06 08:48:05 +00:00

Revised implementation of scrolling behaviour

Now we use a "tw-scroll" event to request scrolling
This commit is contained in:
Jeremy Ruston
2012-11-26 16:08:52 +00:00
parent 515e0d9bf1
commit 0154b2a54e
5 changed files with 59 additions and 30 deletions

View File

@@ -23,7 +23,9 @@ ClassicListView.prototype.navigateTo = function(historyInfo) {
listElementNode = this.listMacro.listFrame.children[listElementIndex],
targetElement = listElementNode.domNode;
// Scroll the node into view
$tw.scroller.scrollIntoView(targetElement);
var scrollEvent = document.createEvent("Event");
scrollEvent.initEvent("tw-scroll",true,true);
targetElement.dispatchEvent(scrollEvent);
};
ClassicListView.prototype.insert = function(index) {

View File

@@ -35,7 +35,9 @@ SidewaysListView.prototype.navigateTo = function(historyInfo) {
listElementNode = this.listMacro.listFrame.children[listElementIndex],
targetElement = listElementNode.domNode;
// Scroll the node into view
$tw.scroller.scrollIntoView(targetElement);
var scrollEvent = document.createEvent("Event");
scrollEvent.initEvent("tw-scroll",true,true);
targetElement.dispatchEvent(scrollEvent);
};
SidewaysListView.prototype.insert = function(index) {

View File

@@ -51,21 +51,36 @@ exports.executeMacro = function() {
if(this.hasParameter("height")) {
outerAttributes.style.height = this.params.height;
}
var innerFrame = $tw.Tree.Element("div",innerAttributes,this.content),
outerFrame = $tw.Tree.Element("div",outerAttributes,[innerFrame]);
outerFrame.execute(this.parents,this.tiddlerTitle);
return outerFrame;
this.innerFrame = $tw.Tree.Element("div",innerAttributes,this.content);
this.outerFrame = $tw.Tree.Element("div",outerAttributes,[this.innerFrame],{
events: ["tw-scroll"],
eventHandler: this
});
this.outerFrame.execute(this.parents,this.tiddlerTitle);
return this.outerFrame;
};
exports.postRenderInDom = function() {
// Attach a scrollTo() method to the outer wrapper
var self = this;
this.child.children[0].domNode.scrollTo = function(bounds) {
self.scrollTo.call(self,bounds);
};
};
exports.handleEvent = function(event) {
if(event.type === "tw-scroll") {
return this.handleScrollEvent(event);
}
return true;
}
exports.scrollTo = function(bounds) {
exports.handleScrollEvent = function(event) {
var domNode = event.target,
bounds = {
left: domNode.offsetLeft,
top: domNode.offsetTop,
width: domNode.offsetWidth,
height: domNode.offsetHeight
};
// Walk up the tree adjusting the offset bounds by each offsetParent
while(domNode.offsetParent && domNode.offsetParent !== this.innerFrame.domNode) {
domNode = domNode.offsetParent;
bounds.left += domNode.offsetLeft;
bounds.top += domNode.offsetTop;
}
this.cancelScroll();
this.startTime = new Date();
this.startX = this.child.domNode.scrollLeft;
@@ -85,6 +100,8 @@ exports.scrollTo = function(bounds) {
self.child.domNode.scrollTop = self.startY + (self.endY - self.startY) * t;
}, 10);
}
event.stopPropagation();
return false;
};
exports.cancelScroll = function() {