mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-11-27 20:10:03 +00:00
115 lines
3.0 KiB
JavaScript
115 lines
3.0 KiB
JavaScript
/*\
|
|
title: $:/core/modules/macros/scrollable.js
|
|
type: application/javascript
|
|
module-type: macro
|
|
|
|
Creates a scrollable frame around its content
|
|
|
|
\*/
|
|
(function(){
|
|
|
|
/*jslint node: true, browser: true */
|
|
/*global $tw: false */
|
|
"use strict";
|
|
|
|
exports.info = {
|
|
name: "scrollable",
|
|
params: {
|
|
width: {byName: true, type: "text"},
|
|
height: {byName: true, type: "text"},
|
|
"class": {byName: true, type: "text"}
|
|
}
|
|
};
|
|
|
|
exports.executeMacro = function() {
|
|
var innerClasses = ["tw-scrollable-inner"],
|
|
innerAttributes = {
|
|
"class": innerClasses,
|
|
style: {
|
|
overflow: "visible",
|
|
position: "relative"
|
|
}
|
|
},
|
|
outerClasses = ["tw-scrollable","tw-scrollable-outer"],
|
|
outerAttributes = {
|
|
"class": outerClasses,
|
|
style: {
|
|
overflow: "auto",
|
|
"-webkit-overflow-scrolling": "touch",
|
|
"white-space": "nowrap"
|
|
}
|
|
};
|
|
if(this.hasParameter("class")) {
|
|
outerClasses.push(this.params["class"]);
|
|
}
|
|
if(this.classes) {
|
|
$tw.utils.pushTop(outerClasses,this.classes);
|
|
}
|
|
if(this.hasParameter("width")) {
|
|
outerAttributes.style.width = this.params.width;
|
|
}
|
|
if(this.hasParameter("height")) {
|
|
outerAttributes.style.height = this.params.height;
|
|
}
|
|
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.handleEvent = function(event) {
|
|
if(event.type === "tw-scroll") {
|
|
return this.handleScrollEvent(event);
|
|
}
|
|
return true;
|
|
}
|
|
|
|
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;
|
|
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 = $tw.utils.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);
|
|
}
|
|
event.stopPropagation();
|
|
return false;
|
|
};
|
|
|
|
exports.cancelScroll = function() {
|
|
if(this.scrollTimerId) {
|
|
window.clearInterval(this.scrollTimerId);
|
|
this.scrollTimerId = null;
|
|
}
|
|
};
|
|
|
|
})();
|