From 1446a1e44cd084b0905f3fdcd8b339f23edf2384 Mon Sep 17 00:00:00 2001 From: "jeremy@jermolene.com" Date: Wed, 14 Oct 2020 15:59:27 +0100 Subject: [PATCH] Extend tm-scroll to accept CSS selector to identify the target --- core/modules/utils/dom/scroller.js | 15 ++++++++++++++- core/modules/widgets/scrollable.js | 14 +++++++++++++- .../messages/WidgetMessage_ tm-scroll.tid | 7 +++---- 3 files changed, 30 insertions(+), 6 deletions(-) diff --git a/core/modules/utils/dom/scroller.js b/core/modules/utils/dom/scroller.js index 167067add..3f4c71cef 100644 --- a/core/modules/utils/dom/scroller.js +++ b/core/modules/utils/dom/scroller.js @@ -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; })(); diff --git a/core/modules/widgets/scrollable.js b/core/modules/widgets/scrollable.js index 97f0dcdf1..93f81310a 100644 --- a/core/modules/widgets/scrollable.js +++ b/core/modules/widgets/scrollable.js @@ -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; } - 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 }; @@ -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 */ diff --git a/editions/tw5.com/tiddlers/messages/WidgetMessage_ tm-scroll.tid b/editions/tw5.com/tiddlers/messages/WidgetMessage_ tm-scroll.tid index d703d4ac7..99b613422 100644 --- a/editions/tw5.com/tiddlers/messages/WidgetMessage_ tm-scroll.tid +++ b/editions/tw5.com/tiddlers/messages/WidgetMessage_ tm-scroll.tid @@ -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 |