Open panels on mouse-over.

[luetage]

@Folgore101 I just tested the mod with #browser instead of .toolbar-addressbar and opening panels with hover works for me. Hard to tell what’s going wrong, maybe test the mod without any other mods running first, to make sure nothing else interferes.

[Folgore101]

@luetage Yes, in a new installation it works correctly. As soon as i have some time i do the tests by activating one mod at a time.

Thank you.

Update.
The problem was caused by some part of the code that i modified in various attempts to make it work, copied the code and made the @luetage modification and now everything works correctly.

Thanks again for the support.

[brianhuahin]

My objective is to be able to mouse left hover over the panel switch area and for it to open. Then mouse right and hover to close the panel.
I have been reading this dialogue since it began and would appreciate it some one could bring together all the various iterations into one that I can copy to my custom.js
I have 3.3.2022.45 installed.

[dude99]

@brianhuahin This is the version I use, compile from @mbuch & @oudstand codes.

/* Automate overlay panel */
function panelMouseOver(autoHide, delay_show, delay_change, delay_hide)
{
    var buttons = document.getElementById('switch').getElementsByTagName('button');
    var show_token   = null;
    var activeButton = null;

    /* Stop timer if mouse exits screen */
    document.addEventListener("mouseout", function(e) {
        clearTimeout(show_token);
    });

    /* Do auto-hide if applicable */
    if (autoHide)
    {
        var content = document.getElementById("webview-container").onmouseover = function()
        {
            if (!document.getElementById("panels-container").getAttribute('class').includes("icons"))
            {
                clearTimeout(show_token);
                setTimeout(function() {
                    if (activeButton && (activeButton.getAttribute('class').includes("active")))
                    {
                        activeButton.click();
                        activeButton = null;
                    }
                }, delay_hide);
            }
        };
    }


    function activeButtonIndex()
    {
        for (let i = 0; i < buttons.length - 2; i++)
        {
            if (buttons[i].getAttribute('class').includes('active'))
            {
                return i;
            }
        }
        return -1;
    }

    function setActive(index, doDelay)
    {
        clearTimeout(show_token);
        var delay = 0;
        if (doDelay)
        {
            delay = (activeButtonIndex() < 250) ? delay_show : delay_change;
        }
        show_token = setTimeout(function() {
            var newButton = buttons[index];
            if (!newButton.getAttribute('class').includes('active'))
            {
                activeButton = newButton;
                activeButton.click();
                panel = index;
            }
        }, delay);
    }

    function setListeners()
    {
        for (let index = 0; index < buttons.length - 2; index++) 
        {
            buttons[index].onmouseover = function() {setActive(index, true);};
            buttons[index].onmouseout  = function() {clearTimeout(show_token);};
            buttons[index].ondragover  = function() {setActive(index, false);};
        }
    }

    setListeners();
}

function addObserver() {
    const switchPanel = document.getElementById('switch');
    const config = {
        childList: true,
        subtree: true
    };
    const callback = function (mutationList, observer) {
        for (let mutation of mutationList) {
            if (mutation.type === 'childList') {
                panelMouseOver(true, 200, 180, 350);
            }
        }
    };
    const observer = new MutationObserver(callback);
    observer.observe(switchPanel, config);
};

setTimeout(function pwait() {
    var adr = document.querySelector("#browser");
    if (adr != null) {
        panelMouseOver(true, 200, 180, 350);
		addObserver();
    }
    else {
        setTimeout(pwait, 400);
    }
}, 400);

Then I use this mod to hide the switch: https://forum.vivaldi.net/post/378402

[luetage]

@dude99 No no no, this is all wrong. You can’t call your base function pwait, that’s just ridiculous, it’s always been wait. And who allowed you to set the timeout to 400ms? That’s just a random number no one likes. Believe me, it will make your code worse. Set it to 300 like a decent human being. All that being said, you obviously get extra nostalgia points for the adr != null part, that’s classy. Fine coding right there friend!

[dude99]

@luetage Can you correct 'em with proper code? I'm no js guru, so I just make changes according to my limited understanding of js. LOL

I change wait to pwait because there are multiple js stuffed into one & I worry all the different wait will go nuts.

adr != null ain't my code, I copy it from @oudstand, & I have no idea what's wrong with it... LOL

[luetage]

@dude99 I’m just trolling, sorry :p But for the love of god, set the timeout to 300ms or we will all have bad luck for the next 2 to 3 decades.

[brianhuahin]

Dude99
I am still confused, not the virus I am pleased to say.

I have added the code you provided from @mbuch & @oudstand and I cant get it to work.
The code at https://forum.vivaldi.net/post/378402, does that replace the @mbuch & @oudstand or is it a stand alone?
The video of the panel switching from https://forum.vivaldi.net/post/378402 is exactly what I want but that will not fly either.

I have successfully used js code to auto switch to Tabs on Hover so the mods to browser.html and the addition of a .js file with the same name as in browser is not beyond me.

Could my problem be that I am using version 3.3.2022.45 of Vivaldi.

[dude99]

@brianhuahin said in Open panels on mouse-over.:

The code at https://forum.vivaldi.net/post/378402, does that replace the @mbuch & @oudstand or is it a stand alone?

The js code I posted is a compilation of both codes, so you only need to use my code without the other 2, because they are all the same except mine is a complete combination of both. I'm using it right now, so it's working as intended.
\

The video of the panel switching from https://forum.vivaldi.net/post/378402 is exactly what I want but that will not fly either.

The code in this thread is a JS mod, the other one is a CSS mod, they are 2 different mod that should be install separately. You need to do THIS (read Vivaldi 2.6 and above section) for CSS mod. Also, u need to enabled Floating panel & Auto close inactive panel for both mod to work like in the demo.
\

Could my problem be that I am using version 3.3.2022.45 of Vivaldi.

I don't think so, I'm currently using the lastest stable version also. I suggest you install the js mod in this thread first, if it work properly then install the other CSS mod & restart the browser to test both mod together.

[brianhuahin]

@dude99
Hi
Pleased to report all working. Stupid typo on my part.
Thank-you for all your help.

Regards
Brian

[oudstand]

@brianhuahin hey, this is my .js file. I'm also on the latest Vivaldi version and it is working without any problem

// https://forum.vivaldi.net/topic/28413/open-panels-on-mouse-over/22?_=1593504963587
function panelMouseOver(autoHide, delay_show, delay_change, delay_hide) {
    var buttons = document.getElementById('switch').getElementsByTagName('button');
    var show_token = null;
    var activeButton = null;

    /* Stop timer if mouse exits screen */
    document.addEventListener("mouseout", function (e) {
        clearTimeout(show_token);
    });

    /* Do auto-hide if applicable */
    if (autoHide) {
        var content = document.getElementById("webview-container").onmouseover = function () {
            if (!document.getElementById("panels-container").getAttribute('class').includes("icons")) {
                clearTimeout(show_token);
                setTimeout(function () {
                	activeButton = activeButton ? activeButton : getActiveButton();
                    if (activeButton && (activeButton.getAttribute('class').includes("active"))) {
                        activeButton.click();
                        activeButton = null;
                    }
                }, delay_hide);
            }
        };
    }


    function activeButtonIndex() {
        for (let i = 0; i < buttons.length - 2; i++) {
            if (buttons[i].getAttribute('class').includes('active')) {
                return i;
            }
        }
        return -1;
    }

    function getActiveButton() {
    	if(buttons[activeButtonIndex()]) {
    		return buttons[activeButtonIndex()];
    	}
    	return null;
    }

    function setActive(index, doDelay) {
        clearTimeout(show_token);
        var delay = 0;
        if (doDelay) {
            delay = (activeButtonIndex() < 0) ? delay_show : delay_change;
        }
        show_token = setTimeout(function () {
            var newButton = buttons[index];
            if (!newButton.getAttribute('class').includes('active')) {
                activeButton = newButton;
                activeButton.click();
                panel = index;
            }
        }, delay);
    }

    function setListeners() {
        for (let index = 0; index < buttons.length - 2; index++) {
            buttons[index].onmouseover = function () {
                setActive(index, true);
            };
            buttons[index].onmouseout = function () {
                clearTimeout(show_token);
            };
            buttons[index].ondragover = function () {
                setActive(index, false);
            };
        }
    }

    setListeners();
}

function addObserver() {
    const switchPanel = document.getElementById('switch');
    const config = {
        childList: true,
        subtree: true
    };
    const callback = function (mutationList, observer) {
        for (let mutation of mutationList) {
            if (mutation.type === 'childList') {
                panelMouseOver(true, 100, 50, 250);
            }
        }
    };
    const observer = new MutationObserver(callback);
    observer.observe(switchPanel, config);
};

setTimeout(function wait() {
    const browser = document.getElementById('browser');
    if (browser) {
        panelMouseOver(true, 100, 50, 250);
        addObserver();
    } else {
        setTimeout(wait, 300);
    }
}, 300);

[brianhuahin]

@oudstand
Thank you for your reply the issue I had has been solved. My fat fingers.

Regards
Brian

[oudstand]

@brianhuahin No problem I didn't noticed that there was a fourth page before I wrote my answer

[stardepp]

@oudstand Is there perhaps a way to add a feature to this mod that allows you to pin a panel when needed so that it doesn't automatically hide?

[Folgore101]

@stardepp Click on it before it opens automatically and stays open.

[stardepp]

@folgore101 said in Open panels on mouse-over.:

@stardepp Click on it before it opens automatically and stays open.

Unfortunately, this does not work for me.

[Folgore101]

@stardepp Maybe try extending the time, i put:

panelMouseOver(true, 1400, 1500, 800);

[stardepp]

@folgore101 said in Open panels on mouse-over.:

@stardepp Maybe try extending the time, i put:

panelMouseOver(true, 1400, 1500, 800);

Thanks for this tip, but where exactly do I paste this code?

[Folgore101]

@stardepp Open the js file with notepad++ or a similar program, go to the bottom of the file and find the line panelMouseOver, the 3 values are the times of the function delay_show, delay_change, delay_hide.
The defaults are 100, 50, 250, if they are too short you may not be able to click in time and the panel won't stay open, i hypothesize that it is the problem.

[stardepp]