mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-11-29 12:59:56 +00:00
Code Issues Releases Wiki Activity

Defer scrollable widget updating bound tiddler for 100ms

Browse Source 
See discussion https://talk.tiddlywiki.org/t/5-3-2pre-scroll-binding/8570/3?u=jeremyruston
This commit is contained in:
Jeremy Ruston 2023-11-29 18:06:54 +00:00
parent c61c34e9df
commit f7359671aa
2 changed files with 6 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -12,6 +12,8 @@ Scrollable widget
/*global $tw: false */ /*global $tw: false */
"use strict"; "use strict";
var DEBOUNCE_INTERVAL = 100; // Delay after last scroll event before updating the bound tiddler
var Widget = require("$:/core/modules/widgets/widget.js").widget; var Widget = require("$:/core/modules/widgets/widget.js").widget;
var ScrollableWidget = function(parseTreeNode,options) { var ScrollableWidget = function(parseTreeNode,options) {
@ -179,10 +181,10 @@ ScrollableWidget.prototype.render = function(parent,nextSibling) {
var timeout; var timeout;
this.outerDomNode.addEventListener("scroll",function(event) { this.outerDomNode.addEventListener("scroll",function(event) {
if(timeout) { if(timeout) {
window.cancelAnimationFrame(timeout); clearTimeout(timeout);
timeout = null; timeout = null;
} }
timeout = window.requestAnimationFrame(function() { timeout = setTimeout(function() {
var existingTiddler = self.wiki.getTiddler(self.scrollableBind), var existingTiddler = self.wiki.getTiddler(self.scrollableBind),
newTiddlerFields = { newTiddlerFields = {
title: self.scrollableBind, title: self.scrollableBind,
@ -192,7 +194,7 @@ ScrollableWidget.prototype.render = function(parent,nextSibling) {
if(!existingTiddler || (existingTiddler.fields["title"] !== newTiddlerFields["title"]) || (existingTiddler.fields["scroll-left"] !== newTiddlerFields["scroll-left"] || existingTiddler.fields["scroll-top"] !== newTiddlerFields["scroll-top"])) { if(!existingTiddler || (existingTiddler.fields["title"] !== newTiddlerFields["title"]) || (existingTiddler.fields["scroll-left"] !== newTiddlerFields["scroll-left"] || existingTiddler.fields["scroll-top"] !== newTiddlerFields["scroll-top"])) {
self.wiki.addTiddler(new $tw.Tiddler(existingTiddler,newTiddlerFields)); self.wiki.addTiddler(new $tw.Tiddler(existingTiddler,newTiddlerFields));
} }
}); },DEBOUNCE_INTERVAL);
}); });
} }
}; };

2
editions/tw5.com/tiddlers/widgets/ScrollableWidget.tid
View File

@ -18,7 +18,7 @@ The content of the `<$scrollable>` widget is displayed within a pair of wrapper
|fallthrough |See below | |fallthrough |See below |
|bind |<<.from-version "5.3.2">> Optional title of tiddler to which the scroll position should be bound | |bind |<<.from-version "5.3.2">> Optional title of tiddler to which the scroll position should be bound |
Binding the scroll position to a tiddler automatically copies the scroll coordinates into the `scroll-left` and `scroll-top` fields as scrolling occurs. Conversely, setting those field values will automatically cause the scrollable to scroll if it can. Binding the scroll position to a tiddler automatically copies the scroll coordinates into the `scroll-left` and `scroll-top` fields after scrolling occurs. Conversely, setting those field values will automatically cause the scrollable to scroll if it can.
<$macrocall $name=".note" _="""If a scrollable widget can't handle the `tm-scroll` message because the inner DIV fits within the outer DIV, then by default the message falls through to the parent widget. Setting the ''fallthrough'' attribute to `no` prevents this behaviour."""/> <$macrocall $name=".note" _="""If a scrollable widget can't handle the `tm-scroll` message because the inner DIV fits within the outer DIV, then by default the message falls through to the parent widget. Setting the ''fallthrough'' attribute to `no` prevents this behaviour."""/>