mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-11-23 10:07:19 +00:00
Code Issues Releases Wiki Activity

Extend tm-scroll to accept CSS selector to identify the target

Browse Source
This commit is contained in:
jeremy@jermolene.com 2020-10-14 15:59:27 +01:00
parent 69c12618d9
commit 1446a1e44c
3 changed files with 30 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -49,7 +49,12 @@ Handle an event
*/
PageScroller.prototype.handleEvent = function(event) {
if(event.type === "tm-scroll") {
return this.scrollIntoView(event.target);
if(event.paramObject && event.paramObject.selector) {
this.scrollSelectorIntoView(null,event.paramObject.selector);
} else {
this.scrollIntoView(event.target);
}
return false; // Event was handled
}
return true;
};
@ -117,6 +122,14 @@ PageScroller.prototype.scrollIntoView = function(element,callback) {
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;
})();

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

@ -58,7 +58,11 @@ ScrollableWidget.prototype.handleScrollEvent = function(event) {
if(this.outerDomNode.scrollWidth <= this.outerDomNode.offsetWidth && this.outerDomNode.scrollHeight <= this.outerDomNode.offsetHeight && this.fallthrough === "yes") {
return true;
}
if(event.paramObject && event.paramObject.selector) {
this.scrollSelectorIntoView(null,event.paramObject.selector);
} else {
this.scrollIntoView(event.target);
}
return false; // Handled event
};
@ -130,6 +134,14 @@ ScrollableWidget.prototype.scrollIntoView = function(element) {
}
};
ScrollableWidget.prototype.scrollSelectorIntoView = function(baseElement,selector,callback) {
baseElement = baseElement || document.body;
var element = baseElement.querySelector(selector);
if(element) {
this.scrollIntoView(element,callback);
}
};
/*
Render this widget into the DOM
*/

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

@ -1,6 +1,6 @@
caption: tm-scroll
created: 20160425000906330
modified: 20160425001655166
modified: 20201014152456174
tags: Messages
title: WidgetMessage: tm-scroll
type: text/vnd.tiddlywiki
@ -8,6 +8,5 @@ type: text/vnd.tiddlywiki
The `tm-scroll` message causes the surrounding scrollable container to scroll to the specified DOM node into view. The `tm-scroll` is handled in various places in the core itself, but can also be handled by a [[ScrollableWidget]].
|!Name |!Description |
|target |Target DOM node the scrollable container should scroll to. |
Due to the nature of the parameter, the `tm-scroll` can only be generated within 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 |