mirrors
/
TiddlyWiki5
mirror of https://github.com/Jermolene/TiddlyWiki5
1
0
Fork 0
Code Issues Releases Wiki Activity

Smooth scrolling for the sideways storyview

This commit is contained in:
Jeremy Ruston 2012-06-20 22:20:48 +01:00
parent c5292567dd
commit 250f9411da
3 changed files with 34 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
core/modules/macros/story/views/classic.js
View File

@ -12,40 +12,6 @@ A storyview that shows a sequence of tiddlers and navigates by smoothly scrollin
/*global $tw: false */
"use strict";
function slowInSlowOut(t) {
return (1 - ((Math.cos(t * Math.PI) + 1) / 2));
}
function animateScroll(startX,startY,endX,endY,duration) {
var startTime = new Date(),
timerId = window.setInterval(function() {
var t = ((new Date()) - startTime) / duration;
if(t >= 1) {
window.clearInterval(timerId);
t = 1;
}
t = slowInSlowOut(t);
var x = startX + (endX - startX) * t,
y = startY + (endY - startY) * t;
window.scrollTo(x,y);
}, 10);
}
/*
Smoothly scroll an element back into view if needed
*/
function scrollIntoView(element) {
var x = element.offsetLeft,
y = element.offsetTop,
winWidth = window.innerWidth,
winHeight = window.innerHeight,
scrollLeft = window.scrollX || document.documentElement.scrollLeft,
scrollTop = window.scrollY || document.documentElement.scrollTop;
if((x < scrollLeft) || (x > (scrollLeft + winWidth)) || (y < scrollTop) || (y > (scrollTop + winHeight))) {
animateScroll(scrollLeft,scrollTop,x,y,$tw.config.preferences.animationDuration);
}
}
function ClassicScroller(story) {
this.story = story;
}
@ -57,7 +23,7 @@ Visualise navigation to the specified tiddler macro, optionally specifying a sou
sourceNode: optional tree node that initiated the navigation
*/
ClassicScroller.prototype.navigate = function(targetTiddlerNode,isNew,sourceEvent) {
scrollIntoView(targetTiddlerNode.domNode);
$tw.utils.scrollIntoView(targetTiddlerNode.domNode);
};
exports.classic = ClassicScroller;

1
core/modules/macros/story/views/sideways.js
View File

@ -38,6 +38,7 @@ Visualise navigation to the specified tiddler macro, optionally specifying a sou
*/
SidewaysView.prototype.navigate = function(targetTiddlerNode,isNew,sourceEvent) {
setStoryElementStyles(targetTiddlerNode.domNode);
$tw.utils.scrollIntoView(targetTiddlerNode.domNode);
};
exports.sideways = SidewaysView;

32
core/modules/utils.dom.js
View File

@ -75,4 +75,36 @@ exports.applyStyleSheet = function(id,css) {
}
};
/*
Smoothly scroll an element back into view if needed
*/
exports.scrollIntoView = function(element) {
var slowInSlowOut = function(t) {
return (1 - ((Math.cos(t * Math.PI) + 1) / 2));
},
animateScroll = function(startX,startY,endX,endY,duration) {
var startTime = new Date(),
timerId = window.setInterval(function() {
var t = ((new Date()) - startTime) / duration;
if(t >= 1) {
window.clearInterval(timerId);
t = 1;
}
t = slowInSlowOut(t);
var x = startX + (endX - startX) * t,
y = startY + (endY - startY) * t;
window.scrollTo(x,y);
}, 10);
},
x = element.offsetLeft,
y = element.offsetTop,
winWidth = window.innerWidth,
winHeight = window.innerHeight,
scrollLeft = window.scrollX || document.documentElement.scrollLeft,
scrollTop = window.scrollY || document.documentElement.scrollTop;
if((x < scrollLeft) || (x > (scrollLeft + winWidth)) || (y < scrollTop) || (y > (scrollTop + winHeight))) {
animateScroll(scrollLeft,scrollTop,x,y,$tw.config.preferences.animationDuration);
}
};
})();