luci-mod-status: fix syslog / dmesg scroll for some themes
authorMiguel Angel Mulero Martinez <migmul@gmail.com>
Wed, 27 Mar 2024 09:16:22 +0000 (10:16 +0100)
committerPaul Donald <newtwen+github@gmail.com>
Wed, 27 Mar 2024 16:14:53 +0000 (17:14 +0100)
The actual code moves the scroll in the window. This works for the bootstrap theme, because the scroll is at window level. But this does not work for other themes, like material.

This commit changes the move of the scroll by "focusing" the window in the opposite button element in the syslog / dmesg page. In this way the move is automatically done by the browser.

Another solution is to "search" in the parent until we find the scroll and move it, but seems less solid.

Signed-off-by: Miguel Angel Mulero Martinez <migmul@gmail.com>
(cherry picked from commit 1164d276081a30923197299cacede3c6f4dce16e)

modules/luci-mod-status/htdocs/luci-static/resources/view/status/dmesg.js
modules/luci-mod-status/htdocs/luci-static/resources/view/status/syslog.js

index 89e2000abda6fc3d7460d343f0c5a1227f1d8d75..acddf454f58c1a50507e4be187f45cee4fd5ea02 100644 (file)
@@ -22,7 +22,7 @@ return view.extend({
                        }, _('Scroll to tail', 'scroll to bottom (the tail) of the log file')
                );
                scrollDownButton.addEventListener('click', function() {
-                       window.scrollTo(0, document.body.scrollHeight);
+                       scrollUpButton.focus();
                });
 
                var scrollUpButton = E('button', { 
@@ -31,7 +31,7 @@ return view.extend({
                        }, _('Scroll to head', 'scroll to top (the head) of the log file')
                );
                scrollUpButton.addEventListener('click', function() {
-                       window.scrollTo(0, 0);
+                       scrollDownButton.focus();
                });
 
                return E([], [
index d3de8af756b02a9e41455754a30c4325139660d7..6ef7d09c70bd7ff94343515a29cd38bd5d853e36 100644 (file)
@@ -28,7 +28,7 @@ return view.extend({
                        }, _('Scroll to tail', 'scroll to bottom (the tail) of the log file')
                );
                scrollDownButton.addEventListener('click', function() {
-                       window.scrollTo(0, document.body.scrollHeight);
+                       scrollUpButton.focus();
                });
 
                var scrollUpButton = E('button', { 
@@ -37,7 +37,7 @@ return view.extend({
                        }, _('Scroll to head', 'scroll to top (the head) of the log file')
                );
                scrollUpButton.addEventListener('click', function() {
-                       window.scrollTo(0, 0);
+                       scrollDownButton.focus();
                });
 
                return E([], [