1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2025-04-24 19:53:13 +00:00

More enhancements to listview animations

Now we've got navigation scrolling back
This commit is contained in:
Jeremy Ruston 2012-11-03 16:14:00 +00:00
parent 5443c8243a
commit 3d747499cb
9 changed files with 82 additions and 28 deletions

View File

@ -25,20 +25,8 @@ ClassicListView.prototype.navigateTo = function(historyInfo) {
var listElementIndex = this.listMacro.findListElementByTitle(0,historyInfo.title),
listElementNode = this.listMacro.listFrame.children[listElementIndex],
targetElement = listElementNode.domNode;
// Get the current height of the element
var currHeight = targetElement.offsetHeight;
// Compute the start and end positions of the target element
var srcRect = historyInfo.fromPageRect;
if(!srcRect) {
srcRect = {left: 0, top: 0, width: window.innerWidth, height: window.innerHeight};
};
var dstRect = targetElement.getBoundingClientRect();
// $tw.sprite.fly(srcRect,dstRect,{
// text: "Flying along at the speed of pixels\n\n\nBoo",
// style: "background:red;"
// });
// Scroll the target element into view
// $tw.scroller.scrollIntoView(dstRect);
// Scroll the node into view
$tw.scroller.scrollIntoView(targetElement);
};
ClassicListView.prototype.insert = function(index) {

View File

@ -27,6 +27,14 @@ function SidewaysListView(listMacro) {
}
}
SidewaysListView.prototype.navigateTo = function(historyInfo) {
var listElementIndex = this.listMacro.findListElementByTitle(0,historyInfo.title),
listElementNode = this.listMacro.listFrame.children[listElementIndex],
targetElement = listElementNode.domNode;
// Scroll the node into view
$tw.scroller.scrollIntoView(targetElement);
};
SidewaysListView.prototype.insert = function(index) {
var listElementNode = this.listMacro.listFrame.children[index],
targetElement = listElementNode.domNode,

View File

@ -35,6 +35,7 @@ exports.executeMacro = function() {
"class": outerClasses,
style: {
overflow: "scroll",
webkitOverflowScrolling: "touch",
"white-space": "nowrap"
}
};
@ -57,6 +58,44 @@ exports.executeMacro = function() {
};
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);
};
};
var slowInSlowOut = function(t) {
return (1 - ((Math.cos(t * Math.PI) + 1) / 2));
};
exports.scrollTo = function(bounds) {
this.cancelScroll();
this.startTime = new Date();
this.startX = this.child.domNode.scrollLeft;
this.startY = this.child.domNode.scrollTop;
this.endX = bounds.left;
this.endY = bounds.top;
if((this.endX < this.startX) || (this.endX > (this.startX + this.child.domNode.offsetWidth)) || (this.endY < this.startY) || (this.endY > (this.startY + this.child.domNode.offsetHeight))) {
var self = this;
this.scrollTimerId = window.setInterval(function() {
var t = ((new Date()) - self.startTime) / $tw.config.preferences.animationDuration;
if(t >= 1) {
self.cancelScroll();
t = 1;
}
t = slowInSlowOut(t);
self.child.domNode.scrollLeft = self.startX + (self.endX - self.startX) * t
self.child.domNode.scrollTop = self.startY + (self.endY - self.startY) * t;
}, 10);
}
};
exports.cancelScroll = function() {
if(this.scrollTimerId) {
window.clearInterval(this.scrollTimerId);
this.scrollTimerId = null;
}
};
})();

View File

@ -30,17 +30,35 @@ Scroller.prototype.cancel = function() {
};
/*
Smoothly scroll an element into view if needed
Smoothly scroll an tree node into view if needed
*/
Scroller.prototype.scrollIntoView = function(element) {
var elementBounds = element instanceof HTMLElement ? $tw.utils.getBoundingPageRect(element) : element,
scrollPosition = $tw.utils.getScrollPosition();
Scroller.prototype.scrollIntoView = function(domNode) {
// Get the offset bounds of the element
var 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 = domNode.offsetParent;
// If the node is scrollable, tell it to scroll
if(domNode.scrollTo) {
domNode.scrollTo(bounds);
return;
}
bounds.left += domNode.offsetLeft;
bounds.top += domNode.offsetTop;
}
// If we got to the top of the tree then we need to scroll the body
var scrollPosition = $tw.utils.getScrollPosition();
this.cancel();
this.startTime = new Date();
this.startX = scrollPosition.x;
this.startY = scrollPosition.y;
this.endX = elementBounds.left;
this.endY = elementBounds.top;
this.endX = bounds.left;
this.endY = bounds.top;
if((this.endX < this.startX) || (this.endX > (this.startX + window.innerWidth)) || (this.endY < this.startY) || (this.endY > (this.startY + window.innerHeight))) {
var self = this;
this.timerId = window.setInterval(function() {

View File

@ -6037,15 +6037,11 @@ a.tw-tiddlylink-missing {
font-style: inherit;
}
.tw-sideways-item {
width: 300px;
}
.tw-list-element {
white-space: normal;
}
.tw-scrollable-outer {
.tw-well {
background: #ccc;
-webkit-box-shadow: inset 1px 1px 4px 1px rgba(0, 0, 0, 0.15);
-moz-box-shadow: inset 1px 1px 4px 1px rgba(0, 0, 0, 0.15);

View File

@ -97,7 +97,9 @@ title: $:/templates/PageTemplate
<div class="row">
<div class="span2">
<div style="position:fixed;">
<<scrollable width:"104px"><
<<list filter:"[list[$:/StoryList]]" history:"$:/HistoryList" listview:classic >>
>>
</div>
</div>
<div class="span10">

View File

@ -146,11 +146,14 @@ a.tw-tiddlylink-missing {
white-space: normal;
}
.tw-scrollable-outer {
.tw-well {
.box-shadow(inset 1px 1px 4px 1px rgba(0, 0, 0, 0.15));
background: #ccc;
}
.tw-scrollable-outer {
}
.tw-scrollable-inner {
}

View File

@ -2,6 +2,6 @@ title: CecilyView
"Cecily" provides a customisable ZoomableUserInterface to your tiddlers.
<<scrollable width:"100%" height:"400px"><
<<scrollable width:"100%" height:"400px" class:"tw-well"><
<<list filter:"[list[$:/StoryList]]" history:"$:/HistoryList" template:"CecilyTemplate" listview:cecily itemClass:"tw-tiddler-frame">>
>>

View File

@ -2,6 +2,6 @@ title: SidewaysView
This view shows your tiddlers stacked horizontally.
<<scrollable width:"100%" height:"400px"><
<<scrollable width:"100%" height:"400px" class:"tw-well"><
<<list filter:"[list[$:/StoryList]]" history:"$:/HistoryList" template:"CecilyTemplate" listview:sideways itemClass:"tw-tiddler-frame">>
>>