mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-06-24 06:13:17 +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) { PageScroller.prototype.handleEvent = function(event) {
if(event.type === "tm-scroll") { 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; return true;
}; };
@ -117,6 +122,14 @@ PageScroller.prototype.scrollIntoView = function(element,callback) {
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; exports.PageScroller = PageScroller;
})(); })();

14
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") { if(this.outerDomNode.scrollWidth <= this.outerDomNode.offsetWidth && this.outerDomNode.scrollHeight <= this.outerDomNode.offsetHeight && this.fallthrough === "yes") {
return true; return true;
} }
this.scrollIntoView(event.target); if(event.paramObject && event.paramObject.selector) {
this.scrollSelectorIntoView(null,event.paramObject.selector);
} else {
this.scrollIntoView(event.target);
}
return false; // Handled event 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 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 caption: tm-scroll
created: 20160425000906330 created: 20160425000906330
modified: 20160425001655166 modified: 20201014152456174
tags: Messages tags: Messages
title: WidgetMessage: tm-scroll title: WidgetMessage: tm-scroll
type: text/vnd.tiddlywiki 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]]. 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 | |!Name |!Description |
|target |Target DOM node the scrollable container should scroll to. | |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 |
Due to the nature of the parameter, the `tm-scroll` can only be generated within javascript code.