136 lines
4.0 KiB
JavaScript
136 lines
4.0 KiB
JavaScript
/*\
|
|
title: $:/core/modules/utils/dom/scroller.js
|
|
type: application/javascript
|
|
module-type: utils
|
|
|
|
Module that creates a $tw.utils.Scroller object prototype that manages scrolling in the browser
|
|
|
|
\*/
|
|
(function(){
|
|
|
|
/*jslint node: true, browser: true */
|
|
/*global $tw: false */
|
|
"use strict";
|
|
|
|
/*
|
|
Event handler for when the `tm-scroll` event hits the document body
|
|
*/
|
|
var PageScroller = function() {
|
|
this.idRequestFrame = null;
|
|
this.requestAnimationFrame = window.requestAnimationFrame ||
|
|
window.webkitRequestAnimationFrame ||
|
|
window.mozRequestAnimationFrame ||
|
|
function(callback) {
|
|
return window.setTimeout(callback, 1000/60);
|
|
};
|
|
this.cancelAnimationFrame = window.cancelAnimationFrame ||
|
|
window.webkitCancelAnimationFrame ||
|
|
window.webkitCancelRequestAnimationFrame ||
|
|
window.mozCancelAnimationFrame ||
|
|
window.mozCancelRequestAnimationFrame ||
|
|
function(id) {
|
|
window.clearTimeout(id);
|
|
};
|
|
};
|
|
|
|
PageScroller.prototype.isScrolling = function() {
|
|
return this.idRequestFrame !== null;
|
|
}
|
|
|
|
PageScroller.prototype.cancelScroll = function(srcWindow) {
|
|
if(this.idRequestFrame) {
|
|
this.cancelAnimationFrame.call(srcWindow,this.idRequestFrame);
|
|
this.idRequestFrame = null;
|
|
}
|
|
};
|
|
|
|
/*
|
|
Handle an event
|
|
*/
|
|
PageScroller.prototype.handleEvent = function(event) {
|
|
if(event.type === "tm-scroll") {
|
|
if(event.paramObject && event.paramObject.selector) {
|
|
this.scrollSelectorIntoView(null,event.paramObject.selector);
|
|
} else {
|
|
this.scrollIntoView(event.target);
|
|
}
|
|
return false; // Event was handled
|
|
}
|
|
return true;
|
|
};
|
|
|
|
/*
|
|
Handle a scroll event hitting the page document
|
|
*/
|
|
PageScroller.prototype.scrollIntoView = function(element,callback) {
|
|
var self = this,
|
|
duration = $tw.utils.getAnimationDuration(),
|
|
srcWindow = element ? element.ownerDocument.defaultView : window;
|
|
// Now get ready to scroll the body
|
|
this.cancelScroll(srcWindow);
|
|
this.startTime = Date.now();
|
|
// Get the height of any position:fixed toolbars
|
|
var toolbar = srcWindow.document.querySelector(".tc-adjust-top-of-scroll"),
|
|
offset = 0;
|
|
if(toolbar) {
|
|
offset = toolbar.offsetHeight;
|
|
}
|
|
// Get the client bounds of the element and adjust by the scroll position
|
|
var getBounds = function() {
|
|
var clientBounds = typeof callback === 'function' ? callback() : element.getBoundingClientRect(),
|
|
scrollPosition = $tw.utils.getScrollPosition(srcWindow);
|
|
return {
|
|
left: clientBounds.left + scrollPosition.x,
|
|
top: clientBounds.top + scrollPosition.y - offset,
|
|
width: clientBounds.width,
|
|
height: clientBounds.height
|
|
};
|
|
},
|
|
// We'll consider the horizontal and vertical scroll directions separately via this function
|
|
// targetPos/targetSize - position and size of the target element
|
|
// currentPos/currentSize - position and size of the current scroll viewport
|
|
// returns: new position of the scroll viewport
|
|
getEndPos = function(targetPos,targetSize,currentPos,currentSize) {
|
|
var newPos = targetPos;
|
|
// If we are scrolling within 50 pixels of the top/left then snap to zero
|
|
if(newPos < 50) {
|
|
newPos = 0;
|
|
}
|
|
return newPos;
|
|
},
|
|
drawFrame = function drawFrame() {
|
|
var t;
|
|
if(duration <= 0) {
|
|
t = 1;
|
|
} else {
|
|
t = ((Date.now()) - self.startTime) / duration;
|
|
}
|
|
if(t >= 1) {
|
|
self.cancelScroll(srcWindow);
|
|
t = 1;
|
|
}
|
|
t = $tw.utils.slowInSlowOut(t);
|
|
var scrollPosition = $tw.utils.getScrollPosition(srcWindow),
|
|
bounds = getBounds(),
|
|
endX = getEndPos(bounds.left,bounds.width,scrollPosition.x,srcWindow.innerWidth),
|
|
endY = getEndPos(bounds.top,bounds.height,scrollPosition.y,srcWindow.innerHeight);
|
|
srcWindow.scrollTo(scrollPosition.x + (endX - scrollPosition.x) * t,scrollPosition.y + (endY - scrollPosition.y) * t);
|
|
if(t < 1) {
|
|
self.idRequestFrame = self.requestAnimationFrame.call(srcWindow,drawFrame);
|
|
}
|
|
};
|
|
drawFrame();
|
|
};
|
|
|
|
PageScroller.prototype.scrollSelectorIntoView = function(baseElement,selector,callback) {
|
|
baseElement = baseElement || document.body;
|
|
var element = baseElement.querySelector(selector);
|
|
if(element) {
|
|
this.scrollIntoView(element,callback);
|
|
}
|
|
};
|
|
|
|
exports.PageScroller = PageScroller;
|
|
|
|
})();
|