Open panels on mouse-over.

Folgore101

@masterleo29 I'm testing, it's good, very good.

mbuch

@MasterLeo29 thanks for your excellent script!

I made a few small modifications

Auto-close when you mouse over to body
Don't open if mouse exits screen before timeout period
Unique delays based on situation

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

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

Recnamoruen

So I'm using this new script that auto hides but I have also used Leo's original script for some time now and I keep running into an issue where if this script is running Javascript prompts get cut off and I cannot see the allow or deny prompts. If I remove the script it starts working properly after a reinstall. Does anyone know what could be causing this?

Hadden89

@recnamoruen It sems awkard.
Do you mean js website prompts? Could you provide an example?
(Testing the last script and seems very smooth).

Recnamoruen

@hadden89

Notice how it just ends? I've only run these custom scripts so I don't know if it happens with all of them. But if I run this custom js this happens, and I have to completely reinstall to fix it afterwards.

Folgore101

@mbuch I'm testing it and it seems to me that it works even better, if you keep on like this I might not be able to do without it anymore.

mbuch

@Recnamoruen, sorry but I do not really know what your issue might be. I made a simple page to generate javascript alerts, and they all came up correctly. Do you have just this text inside a custom.js file, and then include the custom.js at the bottom of browser.html (after bundle.js include)?

To be honest, I decided to stop using this script. All I really wanted (at the moment) was to have tabs on the left side of my screen (which is a built in setting), and for them to show just the icon, but for them to expand when I moused over so that I could actually read the titles of each tab (which unfortunately there is no default option for this). So I found this tread, and thought I could just use the "Window" popout as my tabs. But, it wasn't that great for tabs. So I tried the CSS route and got my desired functionality with the native tabs panel.

dude99

Here r my CSS mod to compliment this script, it hide the panels' #switch & shrink the activation zone to...

top section:

#panels-container.icons.overlay {max-width:0;}
#panels-container:not(:focus-within):not(:hover) #switch {opacity:0.01; max-width:7px; max-height:30%;}

middle section:

#panels-container.icons.overlay {max-width:0;}
#panels-container:not(:focus-within):not(:hover) #switch {opacity:0.01; max-width:7px; max-height:30%; top:40%;}

bottom section:

#panels-container.icons.overlay {max-width:0;}
#panels-container:not(:focus-within):not(:hover) #switch {opacity:0.01; max-width:7px; max-height:30%; top:70%;}

The idea is now you have more screen space; & u can place the pointer on the side edge of the window without activate the panel by accident, well at least 2/3 of the window's edge. This should able to prevent most of the accident.

The only quirk of this mod is it cause the #switch to "blink" when dragging item from webpage between panel to panel. Please share if anyone can come up with a better solution.

Thanks for the awesome script.

Folgore101

@mbuch I thank you again because i find this JS really comfortable.

After weeks that I'm testing it i can say that for me it works very well, the only thing i would improve is the fact that when you drag a tab in the bookmark panel, it does not respect the time set in the script if you pass over the other panels. Everything works correctly if you move the mouse over it. Even dragging text does not respect the script's time.

@dude99 Ok, i'm gonna have to test that, too.

Darthagnon

Greetings, fellow Vivaldi fans.

I'm using the following code to auto-hide the panel. I was wondering if anyone knows how to make it so that the following code applies when the panel is "switched off", rather than the current activation when the panel is "switched on".

/* Hide Sidebar/Panel Container when not hovered over
 Source: https://forum.vivaldi.net/topic/28413/open-panels-on-mouse-over/3
------------------------------------------------------------------------------------------------------------
Needs modification, so that it applies this auto-hide code when set to "Hidden" rather than visible.


*/
#panels-container.left, #panels-container.right {
    position: absolute;
    z-index: 1;
    height: 100%;
    transition: transform .15s 0s !important; /* Originally: .5s .2s */
}

#panels-container.right {right: 0}

#panels-container.left:not(:hover) {
    transform: translateX(-100%);
    transition: transform .8s 0s !important; /* Originally: 2s 1s */
	transition-delay: 2s !important;
}

#panels-container.right:not(:hover) {
    transform: translateX(100%);
    transition: transform .8s 0s!important; /* Originally: 2s 1s */
	transition-delay: 2s !important;
}

Vivrik

@MasterLeo29 nice script.
I threw in another quick functionality to the script to auto open panel by having the mouse entering the "panel toggle area".
For quick and easy access since I don't need the panel to show all the time.

    var container = document.getElementById('panels-container');
    var pSwitch = document.getElementById('panel_switch');

    function showPanel() {
        if (pSwitch.title == 'Show Panel')
            pSwitch.click();
    }

    function hidePanel() {
        if (pSwitch.title == 'Hide Panel')
            pSwitch.click();
    }

    container.addEventListener('mouseenter', showPanel);
    container.addEventListener('mouseleave', hidePanel);

Just add this somewhere inside the main setTimeout.
Also made the switch floating for smoother transitions instead of it pushing the content.

#panels-container {
    width: 10px !important
}

#switch {
    position: absolute;
    width: 34px;
    top: 0px;
    bottom: 0px;
}

#panels-container.right #switch {
    right: 10px;
}

#panels-container.left #switch {
    left: 10px
}

Xophile

Hi everyone!

First of all, very new user to Vivaldi here. Absolutely love it so far, especially the customization.

I'm very new to "modding". Is this for custom.css or am I doing something wrong for this to work?

I would really like this function and preferably when the panel is "inactive".

What should I copy and paste and to which file to have this customization?

Thanks for your help and patience to a new user.

//Matt

Folgore101

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

Hi everyone!

First of all, very new user to Vivaldi here. Absolutely love it so far, especially the customization.

I'm very new to "modding". Is this for custom.css or am I doing something wrong for this to work?

I would really like this function and preferably when the panel is "inactive".

What should I copy and paste and to which file to have this customization?

Thanks for your help and patience to a new user.

//Matt

Hi, i'm using that of @mbuch and to make it work you need to do the following steps (for Windows, for Linux i can't give you the paths):

Close Vivaldi;
Go to C:\Program Files\Vivaldi\Application\2.11.1789.3\resources\vivaldi (the number changes according to the version of Vivaldi installed);
Create a text file and then paste in it the code of the mod you are interested (you will need administrator privileges to work in this folder);
Rename the file you just created with a meaningful name with the extension .js, i, for example, called him "open-panels-on-mouse-over.js";
Open the file browser.html and after the line "<script src="bundle.js"></script>" add "<script src="open-panels-on-mouse-over.js"></script> and saves;
Start Vivaldi and the mod works.

Xophile

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

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

Hi everyone!

First of all, very new user to Vivaldi here. Absolutely love it so far, especially the customization.

I'm very new to "modding". Is this for custom.css or am I doing something wrong for this to work?

I would really like this function and preferably when the panel is "inactive".

What should I copy and paste and to which file to have this customization?

Thanks for your help and patience to a new user.

//Matt

Hi, i'm using that of @mbuch and to make it work you need to do the following steps (for Windows, for Linux i can't give you the paths):

Close Vivaldi;

Go to C:\Program Files\Vivaldi\Application\2.11.1789.3\resources\vivaldi (the number changes according to the version of Vivaldi installed);

Create a text file and then paste in it the code of the mod you are interested (you will need administrator privileges to work in this folder);

Rename the file you just created with a meaningful name with the extension .js, i, for example, called him "open-panels-on-mouse-over.js";

Open the file browser.html and after the line "<script src="bundle.js"></script>" add "<script src="open-panels-on-mouse-over.js"></script> and saves;

Start Vivaldi and the mod works.

Hi Folgore101!

Sorry for a very late reply!

I got the basic functionality to work, thanks for you help! Strangely Vivaldi is not installed in "Program Files" on my PC, instead I found it here:
C:\Users\XXXX\AppData\Local\Vivaldi\Application\2.11.1811.3\resources\vivaldi

I can't get the panel to be invisible and then open up on mouse over to the left of the screen, that would have been awesome. I tried copying the code provided in this thread in Notepad++ but maybe I am messing things up as I am not a programmer.

Please let me know hot to get to show/hide by mouse-over.

Thanks

Fing3rz

I'm using @mbuch version of the script and it's fantastic! Thanks btw. I wish I knew about this when he posted it almost TWO years ago. How has this functionality not made it into the main build yet?!

However, one addition I would like to see is the ability to hover anywhere on the panel bar to open the last used panel. Or the option to extend the vertical size of the buttons(bookmarks, downloads, notes, etc.).

oudstand

@mbuch great work! The only problem I have is, that it isn't fully working after adding or removing a panel.

dude99

@oudstand reboot the browser, that's the weakness for most js mod. JS usually only applied once onload, so if you alter the GUI after it's applied, it might break the mod.

oudstand

@dude99 thanks, good to know!

luetage

@dude99 This isn’t true for most js mods, it’s rather the exception. That’s only the case if there is an error in the mod, or it’s too complex to achieve with plain js in combination with Vivaldi’s node.js. Anyway, whenever you want to add functionality, javascript is needed. CSS can only style and toggle stuff.

So, I don’t know what code you both are talking about, but it’s likely fixable.

oudstand

@luetage I'm talking about, that the mod isn't working for a panel which gets added to the side panel without restarting the browser. When a panel gets removed, the hovering is also not working correctly anymore.

Open panels on mouse-over.

Sorry, I'm currently hiatus from updating any of my CSS mod until further notice...

Sorry, I'm currently hiatus from updating any of my CSS mod until further notice...