Open panels on mouse-over.

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.

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?

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...

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