kopia lustrzana https://github.com/miklobit/TiddlyWiki5
Smooth scrolling for the sideways storyview
rodzic
c5292567dd
commit
250f9411da
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
};
|
||||
|
||||
})();
|
||||
|
|
Ładowanie…
Reference in New Issue