Suggestion: Add mouse wheel scrolling support for File Manager tabs

Webmin
1
SYSTEM INFORMATION
Version Webmin 2.653
Version Usermin 2.552
Version Virtualmin 8.1.0 GPL
Version Apache 2.4.68

Hi,

On the “File Manager” page, would it be possible to add this code so that I (or users) can use the mouse wheel to scroll through the tab bar when there are too many tabs open?

const tabs = document.querySelector('.nav-tabs');

tabs.addEventListener('wheel', (e) => {
    if (Math.abs(e.deltaY) > 0) {
        e.preventDefault();

        tabs.scrollLeft += e.deltaY;
    }
}, { passive: false });

It would make tab management much easier.

You can type this code in the console while you are on the File Manager page, and the tabs will move left or right depending on the direction you scroll the mouse wheel.

Do you find this more convenient? Personally, I do. I like it.

2

Just add your code to the script file in the theme settings (extensions). Adding code to that file is mostly safe from overwrites when virtualmin/webmin is up dated so put your code there and forget about it

3

Ah, I had never noticed that it was possible to add code into a theme.

it is probably applied globally to all pages. It would be better to only target /filemin/index.cgi in the URL and maybe create a system so that the script loads only after the File Manager has finished loading.

4

Maybe the tabs in the file manager page has an id, if it does select the element by id rather than class

5

It works with the Theme > Extensions configuration > script.js :

(function () {

    if (window.__navTabsWheelInstalled) {
        return;
    }
    window.__navTabsWheelInstalled = true;

    document.addEventListener('wheel', (e) => {
        const navTabs = e.target.closest('body.file-manager .nav-tabs');
        if (!navTabs) {
            return;
        }

        e.preventDefault();
        navTabs.scrollLeft += e.deltaY;
    }, { passive: false });

})();

I’m happy, it will be easier to manage the tabs.

6

Glad you sorted it