fix: scroll too slow if tiddler already appear

This commit is contained in:
linonetwo 2023-09-16 15:33:03 +08:00
parent c0b6b7988a
commit 3bcd822c97
1 changed files with 25 additions and 14 deletions

View File

@ -37,21 +37,19 @@ BlockIdWidget.prototype.hookNavigatedEvent = function(event) {
if(!event || !event.toBlockId) return event; if(!event || !event.toBlockId) return event;
if(event.toBlockId !== this.id) return event; if(event.toBlockId !== this.id) return event;
var baseElement = event.event && event.event.target ? event.event.target.ownerDocument : document; var baseElement = event.event && event.event.target ? event.event.target.ownerDocument : document;
var duration = $tw.utils.getAnimationDuration(); var element = this._getTargetElement(baseElement);
var self = this; if(element) {
// we have enabled `navigateSuppressNavigation` to avoid collision with scroll effect of `tm-navigate`, but need to wait for tiddler dom stably added to the story view. // if tiddler is already in the story view, just move to it.
setTimeout(function() { this._scrollToBlockAndHighlight(element);
var element = self._getTargetElement(baseElement); } else {
if(!element) return; var self = this;
// toggle class to trigger highlight animation // Here we still need to wait for extra time after `duration`, so tiddler dom is actually added to the story view.
$tw.utils.removeClass(element,"tc-focus-highlight"); var duration = $tw.utils.getAnimationDuration() + 50;
element.scrollIntoView({ behavior: "smooth", block: "center", inline: "nearest" });
element.focus({ focusVisible: true });
// Using setTimeout to ensure the removal takes effect before adding the class again.
setTimeout(function() { setTimeout(function() {
$tw.utils.addClass(element,"tc-focus-highlight"); element = self._getTargetElement(baseElement);
}, 50); self._scrollToBlockAndHighlight(element);
}, duration); }, duration);
}
return false; return false;
}; };
@ -69,6 +67,19 @@ BlockIdWidget.prototype._getTargetElement = function(baseElement) {
return element; return element;
}; };
BlockIdWidget.prototype._scrollToBlockAndHighlight = function(element) {
if(!element) return;
// toggle class to trigger highlight animation
$tw.utils.removeClass(element,"tc-focus-highlight");
// We enable the `navigateSuppressNavigation` in LinkWidget when sending `tm-navigate`, otherwise `tm-navigate` will force move to the title
element.scrollIntoView({ behavior: "smooth", block: "center", inline: "nearest" });
element.focus({ focusVisible: true });
// Using setTimeout to ensure the removal takes effect before adding the class again.
setTimeout(function() {
$tw.utils.addClass(element,"tc-focus-highlight");
}, 50);
};
BlockIdWidget.prototype.removeChildDomNodes = function() { BlockIdWidget.prototype.removeChildDomNodes = function() {
$tw.hooks.removeHook("th-focus-selector",this.hookNavigatedEvent); $tw.hooks.removeHook("th-focus-selector",this.hookNavigatedEvent);
}; };