Open panels on mouse-over.

[shifte]

@barbudo2005
Thanks for your video.

a while back, I did the same thing as you.

https://forum.vivaldi.net/post/543582

[rafamaja]

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

https://forum.vivaldi.net/topic/28413/open-panels-on-mouse-over/22?_=1593504963587

I'm green, I have little knowledge .... where should I paste it ... what file to edit ... please tell me the path ... Thanks.

[dude99]

@nafumofu TQVM!!!

[shoust]

For the CSS version, mine is not perfect, but it gets the icons to appear again on the side.
Change this part from

#panels-container.overlay {width:0 !important;}

to

#panels-container.overlay.icons:not(:hover) {width:0 !important;}

[oudstand]

@nafumofu thank you very much, I really missed this mod!

But how did you know it was pointerdown and pointerup? I've tried a lot of combinations of dispatchEvent with click, mousedown and mouseup, but I missed the pointer.

[nafumofu]

@oudstand I use DeepL to read and write English, so my explanation may not come across well.

I removed the mouse events from the #app element one by one from the developer tools and verified that the panel button clicks worked.

[oudstand]

@nafumofu ah nice idea, thanks for that!

[Codyin]

Fixed to work with 6.0, auto open with a mouse gesture

#panels-container.left,
#panels-container.right {
  position: absolute;
  z-index: 1;
  height: 100%;
  transition: transform 0.15s 0s !important;
}
#panels-container.right {
  right: 0;
}
#panels-container.left:not(:hover) {
  transform: translateX(-100%);
  transition: transform 0.8s 0s !important;
  contain: unset !important;
}
#panels-container.right:not(:hover) {
  transform: translateX(100%);
  transition: transform 0.8s 0s !important;
  contain: unset !important;
}

[ybjrepnfr]

@nafumofu hello. i've been using your code since april this year, & it's great. it still works in 6.3.3120.3. there is one unfortunate side-effect though, which interferes with a basic function of vivaldi i've used since 2015.

if i am adding an active tab to my bookmarks, rather than use the bookmark dropdown menu in the address bar, i often find it more convenient to open the bookmark panel then drag the tab via its address bar padlock icon into the bookmark panel & therein position it in the desired place in the hierarchy.

at least, that's what i used to do, & which used to work fine, before i began using this mod. with this mod active, however, i find it hard or impossible to still do that. dragging the tab down & across to the bm panel icon opens the panel [per the mod] but it instantly closes again too fast for me to actually place the tab in the hierarchy.

the only way i have found that does work, but which is so inconvenient as to be impractical, is that before i begin trying to create a new bm by this dragging & dropping, i need to go to Settings, & temporarily disable the floating panel option... then afterwards, re-enable it.

do you, or does anyone else, have a more elegant solution pls?

---

Ha, this; me too! https://forum.vivaldi.net/post/241057

---

UPDATE:
this seems like it might help a bit:
https://forum.vivaldi.net/post/696112

[nafumofu]

The code has been cleaned up and corrected.
Some bugs have also been fixed.

// https://forum.vivaldi.net/topic/28413/open-panels-on-mouse-over/22?_=1593504963587
(function() {
    'use strict';
    
    function panelMouseOver(autoHide, delay_show, delay_change, delay_hide) {
        function simulateClick(element) {
            element.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, pointerId: 1 }));
            element.dispatchEvent(new PointerEvent('mousedown', { bubbles: true, detail: 1 }));
            element.dispatchEvent(new PointerEvent('pointerup', { bubbles: true, pointerId: 1 }));
            element.dispatchEvent(new PointerEvent('mouseup', { bubbles: true, detail: 1 }));
            element.dispatchEvent(new PointerEvent('click', { bubbles: true }));
        }
        
        function getActiveButton() {
            return document.querySelector('#switch .active > button');
        }
        
        function setActive(button, doDelay) {
            clearTimeout(show_token);
            const delay = doDelay ? (!getActiveButton() ? delay_show : delay_change) : 0;
            show_token = setTimeout(function() {
                simulateClick(button);
            }, delay);
        }
        
        function hidePanel() {
            if (document.querySelector('#panels-container.overlay:not(.icons)')) {
                setTimeout(function() {
                    const activeButton = getActiveButton();
                    if (activeButton) {
                        simulateClick(activeButton);
                    }
                }, delay_hide);
            }
        }
        
        function isPanelButton(element) {
            return element.matches('button:is([name^="Panel"], [name^="WEBPANEL_"]):not([name="PanelWeb"])');
        }
        
        function setListeners() {
            function eventHandler(event) {
                if (isPanelButton(event.target) && !event.altKey && !event.ctrlKey && !event.shiftKey && !event.metaKey) {
                    switch(event.type) {
                        case 'mouseenter':
                            setActive(event.target, true);
                            break;
                        case 'mouseleave':
                            clearTimeout(show_token);
                            break;
                        case 'dragenter':
                            setActive(event.target, false);
                            break;
                    }
                }
            }
            
            if (autoHide) {
                document.querySelector('#webview-container').addEventListener('mouseenter', hidePanel);
            }
            const panelSwitch = document.querySelector('#switch');
            panelSwitch.addEventListener('mouseenter', eventHandler, { capture: true });
            panelSwitch.addEventListener('mouseleave', eventHandler, { capture: true });
            panelSwitch.addEventListener('dragenter', eventHandler, { capture: true });
        }
        
        let show_token = null;
        setListeners();
    }
    
    setTimeout(function waitMouseOver() {
        const browser = document.querySelector('#browser');
        if (browser) {
            panelMouseOver(true, 100, 50, 250);
        } else {
            setTimeout(waitMouseOver, 300);
        }
    }, 300);
})();

Edit: Disable while modifier key is pressed.

[ybjrepnfr]

@nafumofu oh this is so lovely thanks; it now works beautifully again, thus making manual bookmarking as i'd described simple & reliable once again ... no more frustrating "slamming shut", or even worse, high frequency open close open close open close like before. i wonder how long before the v devs will damage or break it again, heehee

[deniose]

@nafumofu Doesn't work for me,what would be the reason?

[rrsch]

Basic question... where do I put the js file? I'm on Vivaldi 6.2 for Mac.

Another post I read said to look in the App's package contents/resources. but I don't see any folders that look like they're for js.

Anyone know?

[TbGbe]

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

where do I put the js file?

See this (long) thread
https://forum.vivaldi.net/topic/10549/modding-vivaldi

[rrsch]

This post is deleted!

[aleksod]

@Darthagnon Works like a charm, pretty incredible, thank you so much! Now the utility of Arc Browser is more questionable.

[Truemotion]

@nafumofu
Great. But the focus stays on the hidden panel, after you press a shortcut to show/hide a panel.
How can we focus the page back after without an additional shortcut?

[n8chavez]

@nafumofu is there a way to modify this so that the panel closes whenever the mouse in not on the panel, rather than clicking the corresponding panel button?

[nafumofu]

@n8chavez
Are you saying that you want to close a panel with a mouse out, even if the panel's overlay mode is disabled?

[n8chavez]

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

@n8chavez
Are you saying that you want to close a panel with a mouse out, even if the panel's overlay mode is disabled?

Well, yes. The way it works now the mouse needs be be hovered over the activate panel again in order for it to close. Except that the panel switching is very sensitive and the panel switches quite easily and unintentionally. That makes closing the panel not so easy. Having the panels close with a mouse-out would be easier.