Fossil SCM
Integrated a debouncer into the window-resize monitor callbacks used by the diff table views and /chat to eliminate a flurry of UI resizing while resizing a window, per suggestion from Florian in [forum:7807e0dbcca1dc45 | forum post 7807e0dbcca1dc45].
Commit
df0e2ca16877a093f0b9d707d48db241ced1b5068758ad55c4d657da330046ba
Parent
db54f4b7066c564…
3 files changed
+30
+1
-1
+2
-6
+30
| --- src/fossil.bootstrap.js | ||
| +++ src/fossil.bootstrap.js | ||
| @@ -289,6 +289,36 @@ | ||
| 289 | 289 | const t = document.querySelector('title'); |
| 290 | 290 | if(t) t.innerText = title; |
| 291 | 291 | return this; |
| 292 | 292 | }; |
| 293 | 293 | |
| 294 | + /** | |
| 295 | + Returns a function, that, as long as it continues to be invoked, | |
| 296 | + will not be triggered. The function will be called after it stops | |
| 297 | + being called for N milliseconds. If `immediate` is passed, call | |
| 298 | + the callback immediately and hinder future invocations until at | |
| 299 | + least the given time has passed. | |
| 300 | + | |
| 301 | + If passed only 1 argument, or passed a falsy 2nd argument, | |
| 302 | + the default wait time set in this function's $defaultDelay | |
| 303 | + property is used. | |
| 304 | + | |
| 305 | + Source: underscore.js, by way of https://davidwalsh.name/javascript-debounce-function | |
| 306 | + */ | |
| 307 | + F.debounce = function f(func, wait, immediate) { | |
| 308 | + var timeout; | |
| 309 | + if(!wait) wait = f.$defaultDelay; | |
| 310 | + return function() { | |
| 311 | + const context = this, args = Array.prototype.slice.call(arguments); | |
| 312 | + const later = function() { | |
| 313 | + timeout = undefined; | |
| 314 | + if(!immediate) func.apply(context, args); | |
| 315 | + }; | |
| 316 | + const callNow = immediate && !timeout; | |
| 317 | + clearTimeout(timeout); | |
| 318 | + timeout = setTimeout(later, wait); | |
| 319 | + if(callNow) func.apply(context, args); | |
| 320 | + }; | |
| 321 | + }; | |
| 322 | + F.debounce.$defaultDelay = 500 /*arbitrary*/; | |
| 323 | + | |
| 294 | 324 | })(window); |
| 295 | 325 |
| --- src/fossil.bootstrap.js | |
| +++ src/fossil.bootstrap.js | |
| @@ -289,6 +289,36 @@ | |
| 289 | const t = document.querySelector('title'); |
| 290 | if(t) t.innerText = title; |
| 291 | return this; |
| 292 | }; |
| 293 | |
| 294 | })(window); |
| 295 |
| --- src/fossil.bootstrap.js | |
| +++ src/fossil.bootstrap.js | |
| @@ -289,6 +289,36 @@ | |
| 289 | const t = document.querySelector('title'); |
| 290 | if(t) t.innerText = title; |
| 291 | return this; |
| 292 | }; |
| 293 | |
| 294 | /** |
| 295 | Returns a function, that, as long as it continues to be invoked, |
| 296 | will not be triggered. The function will be called after it stops |
| 297 | being called for N milliseconds. If `immediate` is passed, call |
| 298 | the callback immediately and hinder future invocations until at |
| 299 | least the given time has passed. |
| 300 | |
| 301 | If passed only 1 argument, or passed a falsy 2nd argument, |
| 302 | the default wait time set in this function's $defaultDelay |
| 303 | property is used. |
| 304 | |
| 305 | Source: underscore.js, by way of https://davidwalsh.name/javascript-debounce-function |
| 306 | */ |
| 307 | F.debounce = function f(func, wait, immediate) { |
| 308 | var timeout; |
| 309 | if(!wait) wait = f.$defaultDelay; |
| 310 | return function() { |
| 311 | const context = this, args = Array.prototype.slice.call(arguments); |
| 312 | const later = function() { |
| 313 | timeout = undefined; |
| 314 | if(!immediate) func.apply(context, args); |
| 315 | }; |
| 316 | const callNow = immediate && !timeout; |
| 317 | clearTimeout(timeout); |
| 318 | timeout = setTimeout(later, wait); |
| 319 | if(callNow) func.apply(context, args); |
| 320 | }; |
| 321 | }; |
| 322 | F.debounce.$defaultDelay = 500 /*arbitrary*/; |
| 323 | |
| 324 | })(window); |
| 325 |
+1
-1
| --- src/fossil.diff.js | ||
| +++ src/fossil.diff.js | ||
| @@ -737,7 +737,7 @@ | ||
| 737 | 737 | window.fossil.page.tweakSbsDiffs = function(){ |
| 738 | 738 | document.querySelectorAll('table.splitdiff').forEach((e)=>Diff.initTableDiff(e)); |
| 739 | 739 | Diff.checkTableWidth(); |
| 740 | 740 | }; |
| 741 | 741 | Diff.initTableDiff().checkTableWidth(); |
| 742 | - window.addEventListener('resize', ()=>Diff.checkTableWidth()); | |
| 742 | + window.addEventListener('resize', F.debounce(()=>Diff.checkTableWidth())); | |
| 743 | 743 | }, false); |
| 744 | 744 |
| --- src/fossil.diff.js | |
| +++ src/fossil.diff.js | |
| @@ -737,7 +737,7 @@ | |
| 737 | window.fossil.page.tweakSbsDiffs = function(){ |
| 738 | document.querySelectorAll('table.splitdiff').forEach((e)=>Diff.initTableDiff(e)); |
| 739 | Diff.checkTableWidth(); |
| 740 | }; |
| 741 | Diff.initTableDiff().checkTableWidth(); |
| 742 | window.addEventListener('resize', ()=>Diff.checkTableWidth()); |
| 743 | }, false); |
| 744 |
| --- src/fossil.diff.js | |
| +++ src/fossil.diff.js | |
| @@ -737,7 +737,7 @@ | |
| 737 | window.fossil.page.tweakSbsDiffs = function(){ |
| 738 | document.querySelectorAll('table.splitdiff').forEach((e)=>Diff.initTableDiff(e)); |
| 739 | Diff.checkTableWidth(); |
| 740 | }; |
| 741 | Diff.initTableDiff().checkTableWidth(); |
| 742 | window.addEventListener('resize', F.debounce(()=>Diff.checkTableWidth())); |
| 743 | }, false); |
| 744 |
+2
-6
| --- src/fossil.page.chat.js | ||
| +++ src/fossil.page.chat.js | ||
| @@ -113,18 +113,14 @@ | ||
| 113 | 113 | contentArea); |
| 114 | 114 | console.debug("Set input max height to: ", |
| 115 | 115 | f.chat.e.inputX.style.maxHeight); |
| 116 | 116 | } |
| 117 | 117 | }; |
| 118 | - var doit; | |
| 119 | - window.addEventListener('resize',function(ev){ | |
| 120 | - clearTimeout(doit); | |
| 121 | - doit = setTimeout(resized, 100); | |
| 122 | - }, false); | |
| 118 | + resized.$disabled = true/*gets deleted when setup is finished*/; | |
| 119 | + window.addEventListener('resize', F.debounce(resized, 250), false); | |
| 123 | 120 | return resized; |
| 124 | 121 | })(); |
| 125 | - ForceResizeKludge.$disabled = true/*gets deleted when setup is finished*/; | |
| 126 | 122 | fossil.FRK = ForceResizeKludge/*for debugging*/; |
| 127 | 123 | const Chat = ForceResizeKludge.chat = (function(){ |
| 128 | 124 | const cs = { |
| 129 | 125 | verboseErrors: false /* if true then certain, mostly extraneous, |
| 130 | 126 | error messages may be sent to the console. */, |
| 131 | 127 |
| --- src/fossil.page.chat.js | |
| +++ src/fossil.page.chat.js | |
| @@ -113,18 +113,14 @@ | |
| 113 | contentArea); |
| 114 | console.debug("Set input max height to: ", |
| 115 | f.chat.e.inputX.style.maxHeight); |
| 116 | } |
| 117 | }; |
| 118 | var doit; |
| 119 | window.addEventListener('resize',function(ev){ |
| 120 | clearTimeout(doit); |
| 121 | doit = setTimeout(resized, 100); |
| 122 | }, false); |
| 123 | return resized; |
| 124 | })(); |
| 125 | ForceResizeKludge.$disabled = true/*gets deleted when setup is finished*/; |
| 126 | fossil.FRK = ForceResizeKludge/*for debugging*/; |
| 127 | const Chat = ForceResizeKludge.chat = (function(){ |
| 128 | const cs = { |
| 129 | verboseErrors: false /* if true then certain, mostly extraneous, |
| 130 | error messages may be sent to the console. */, |
| 131 |
| --- src/fossil.page.chat.js | |
| +++ src/fossil.page.chat.js | |
| @@ -113,18 +113,14 @@ | |
| 113 | contentArea); |
| 114 | console.debug("Set input max height to: ", |
| 115 | f.chat.e.inputX.style.maxHeight); |
| 116 | } |
| 117 | }; |
| 118 | resized.$disabled = true/*gets deleted when setup is finished*/; |
| 119 | window.addEventListener('resize', F.debounce(resized, 250), false); |
| 120 | return resized; |
| 121 | })(); |
| 122 | fossil.FRK = ForceResizeKludge/*for debugging*/; |
| 123 | const Chat = ForceResizeKludge.chat = (function(){ |
| 124 | const cs = { |
| 125 | verboseErrors: false /* if true then certain, mostly extraneous, |
| 126 | error messages may be sent to the console. */, |
| 127 |