Open panels on mouse-over.

dude99

@luetage This https://forum.vivaldi.net/post/242658, maybe someone can improve it so that it reapply when the buttons inside #switch changes? That's just my guess, I'm no JS guru, so... you are right.

nomadic

@dude99 @oudstand Might be a case for a mutation observer or a function override like that fancy solution @luetage recently posted here.

oudstand

@nomadic Thank you for your suggestions!
I could fix this problem through adding this function:

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);
};

The method get called once within the setTimeout method.

setTimeout(function wait() {
    var adr = document.querySelector(".toolbar-addressbar.toolbar");
    if (adr != null) {
        panelMouseOver(true, 100, 50, 250);
        addObserver(); // <--- added this line
    } else {
        setTimeout(wait, 300);
    }
}, 300);

luetage

@oudstand Oh, that’s good. I just took a look at it, felt comfortless and was about to rewrite the whole thing from ground up when I read your post. I guess that’s not needed anymore ^^

luetage

@nomadic That fancy solution isn’t mine, @tam710562 wrote a version of it when my statusbar mod got messed up in an update. Been using this interception tool ever since. One widely used code snippet of mine is the timeout function to wait for browser load. I was just new to js and set it arbitrarily to 300ms. Ever since then everyone calls their functions after this timespan, it stuck for no reason (lol).

nomadic

@luetage Yep, lol, I am guilty of copying that. It works and every mod seemed to be doing it too, so I figured must be the right thing to use.

The only change I started to make is to use setInterval() and clearInterval() instead of calling the wait function again because recursion assignments from years past still give me nightmares . Even just mentioning Fibonacci elevates my heart rate a bit.

const LUETAGE_NUMBER = 300;

let intervalID = setInterval(function() {
    let browser = document.getElementById("browser");
    if (browser) {
      exampleFunction();
      clearInterval(intervalID);
    }
  }, LUETAGE_NUMBER);

oudstand

I had problem where a panel was opened but not set as activeButton. So I made this workaround. I don't know if it is nice, but here it is:
I've added this function:

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

and I call it here:

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(); // <--- here
                    if (activeButton && (activeButton.getAttribute('class').includes("active"))) {
                        activeButton.click();
                        activeButton = null;
                    }
                }, delay_hide);
            }
        };
    }

What do you think?

Folgore101

Help, this mod https://forum.vivaldi.net/topic/28413/open-panels-on-mouse-over/22?_=1597602387112 no longer works with the last Snapshot 3.3.2009.3.
I tried to check the UI to see if there were any changes but i don't notice anything, someone when he has a moment can check?

Thank you.

luetage

@Folgore101 Mod uses .toolbar-addressbar when waiting for load. Wait for #browser instead and it will work.

Folgore101

@luetage Thanks, it works better now.

Folgore101

@luetage I was too hasty.
It works when you drag tabs to the bookmark panel, but when you hover the mouse nothing happens.
I think I've edited the file correctly, the affected line is: var adr = document.querySelector("#browser");

PS: Modifying: buttons[index].onmouseover = function() {setActive(index, true);}; in false also works with mouseover but does not respect the times.

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.

Open panels on mouse-over.

◊ More CSS Mod ◊

◊ More CSS Mod ◊

◊ More CSS Mod ◊

◊ More CSS Mod ◊