mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2025-07-03 10:32:50 +00:00
Code Issues Releases Wiki Activity

Add support to tm-scroll message for scrolling without animating (#6410)

Browse Source 
* feat: add support for animationDuration attribute of paramObject for tm-scroll message

* docs: added docs for animationDuration attribute of tm-scroll message

* fix: use .utils.hop instead of Object.hasOwnProperty()

* fix: do not check if object before calling utils.hop()

* fix: syntax
This commit is contained in:
Saq Imtiaz 2022-01-24 10:44:04 +01:00 committed by GitHub
parent d823856082
commit 9fce8153df
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 25 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
core/modules/utils/dom/scroller.js
View File

@ -49,10 +49,14 @@ Handle an event
*/ */
PageScroller.prototype.handleEvent = function(event) { PageScroller.prototype.handleEvent = function(event) {
if(event.type === "tm-scroll") { if(event.type === "tm-scroll") {
var options = {};
if($tw.utils.hop(event.paramObject,"animationDuration")) {
options.animationDuration = event.paramObject.animationDuration;
}
if(event.paramObject && event.paramObject.selector) { if(event.paramObject && event.paramObject.selector) {
this.scrollSelectorIntoView(null,event.paramObject.selector); this.scrollSelectorIntoView(null,event.paramObject.selector,null,options);
} else { } else {
this.scrollIntoView(event.target); this.scrollIntoView(event.target,null,options);
} }
return false; // Event was handled return false; // Event was handled
} }
@ -62,9 +66,9 @@ PageScroller.prototype.handleEvent = function(event) {
/* /*
Handle a scroll event hitting the page document Handle a scroll event hitting the page document
*/ */
PageScroller.prototype.scrollIntoView = function(element,callback) { PageScroller.prototype.scrollIntoView = function(element,callback,options) {
var self = this, var self = this,
duration = $tw.utils.getAnimationDuration(), duration = $tw.utils.hop(options,"animationDuration") ? parseInt(options.animationDuration) : $tw.utils.getAnimationDuration(),
srcWindow = element ? element.ownerDocument.defaultView : window; srcWindow = element ? element.ownerDocument.defaultView : window;
// Now get ready to scroll the body // Now get ready to scroll the body
this.cancelScroll(srcWindow); this.cancelScroll(srcWindow);
@ -122,11 +126,11 @@ PageScroller.prototype.scrollIntoView = function(element,callback) {
drawFrame(); drawFrame();
}; };
PageScroller.prototype.scrollSelectorIntoView = function(baseElement,selector,callback) { PageScroller.prototype.scrollSelectorIntoView = function(baseElement,selector,callback,options) {
baseElement = baseElement || document.body; baseElement = baseElement || document.body;
var element = baseElement.querySelector(selector); var element = baseElement.querySelector(selector);
if(element) { if(element) {
this.scrollIntoView(element,callback); this.scrollIntoView(element,callback,options);
} }
}; };

16
core/modules/widgets/scrollable.js
View File

@ -38,10 +38,14 @@ ScrollableWidget.prototype.handleScrollEvent = function(event) {
if(this.outerDomNode.scrollWidth <= this.outerDomNode.offsetWidth && this.outerDomNode.scrollHeight <= this.outerDomNode.offsetHeight && this.fallthrough === "yes") { if(this.outerDomNode.scrollWidth <= this.outerDomNode.offsetWidth && this.outerDomNode.scrollHeight <= this.outerDomNode.offsetHeight && this.fallthrough === "yes") {
return true; return true;
} }
var options = {};
if($tw.utils.hop(event.paramObject,"animationDuration")) {
options.animationDuration = event.paramObject.animationDuration;
}
if(event.paramObject && event.paramObject.selector) { if(event.paramObject && event.paramObject.selector) {
this.scrollSelectorIntoView(null,event.paramObject.selector); this.scrollSelectorIntoView(null,event.paramObject.selector,null,options);
} else { } else {
this.scrollIntoView(event.target); this.scrollIntoView(event.target,null,options);
} }
return false; // Handled event return false; // Handled event
}; };
@ -49,8 +53,8 @@ ScrollableWidget.prototype.handleScrollEvent = function(event) {
/* /*
Scroll an element into view Scroll an element into view
*/ */
ScrollableWidget.prototype.scrollIntoView = function(element) { ScrollableWidget.prototype.scrollIntoView = function(element,callback,options) {
var duration = $tw.utils.getAnimationDuration(), var duration = $tw.utils.hop(options,"animationDuration") ? parseInt(options.animationDuration) : $tw.utils.getAnimationDuration(),
srcWindow = element ? element.ownerDocument.defaultView : window; srcWindow = element ? element.ownerDocument.defaultView : window;
this.cancelScroll(); this.cancelScroll();
this.startTime = Date.now(); this.startTime = Date.now();
@ -114,11 +118,11 @@ ScrollableWidget.prototype.scrollIntoView = function(element) {
} }
}; };
ScrollableWidget.prototype.scrollSelectorIntoView = function(baseElement,selector,callback) { ScrollableWidget.prototype.scrollSelectorIntoView = function(baseElement,selector,callback,options) {
baseElement = baseElement || document.body; baseElement = baseElement || document.body;
var element = baseElement.querySelector(selector); var element = baseElement.querySelector(selector);
if(element) { if(element) {
this.scrollIntoView(element,callback); this.scrollIntoView(element,callback,options);
} }
}; };

3
editions/tw5.com/tiddlers/messages/WidgetMessage_ tm-scroll.tid
View File

@ -10,3 +10,6 @@ The `tm-scroll` message causes the surrounding scrollable container to scroll to
|!Name |!Description | |!Name |!Description |
|target |Target DOM node the scrollable container should scroll to (note that this parameter can only be set via JavaScript code) | |target |Target DOM node the scrollable container should scroll to (note that this parameter can only be set via JavaScript code) |
|selector |<<.from-version "5.1.23">> Optional string [[CSS selector|https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors]] as an alternate means of identifying the target DOM node | |selector |<<.from-version "5.1.23">> Optional string [[CSS selector|https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors]] as an alternate means of identifying the target DOM node |
|animationDuration |<<.from-version "5.2.2">> Optional number specifying the animation duration in milliseconds for the scrolling. Defaults to the [[global animation duration|$:/config/AnimationDuration]]. |
<<.tip "Set `animationDuration` to `0` to scroll without animation">>