Open panels on mouse-over.

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 · Win: Snapshot Vivaldi 7.1.3554.3

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

nafumofu

Refactoring of code.
Added ability to automatically close panels in fixed view mode.

// https://forum.vivaldi.net/topic/28413/open-panels-on-mouse-over/22?_=1593504963587
(async () => {
    'use strict';
    
    const config = {
        // WebView にマウスポインターが入るか、WebView にフォーカスが移ると自動的にパネルを閉じる (true: 有効, false: 無効)
        // Automatically close the panel when the mouse pointer enters the WebView or when the focus moves to the WebView (true: enabled, false: disabled)
        auto_close: true,
        
        // 固定表示モードで自動的にパネルを閉じる (true: 有効, false: 無効)
        // Automatically close the panel in fixed display mode (true: enabled, false: disabled)
        close_fixed: false,
        
        // パネルを開くまでの遅延時間 (ミリ秒)
        // Delay time before opening the panel (milliseconds)
        open_delay: 100,
        
        // パネルを切り替えるまでの遅延時間 (ミリ秒)
        // Delay time before switching the panel (milliseconds)
        switch_delay: 50,
        
        // パネルを閉じるまでの遅延時間 (ミリ秒)
        // Delay time before closing the panel (milliseconds)
        close_delay: 250,
    };
    
    const addStyleSheet = (css) => {
        const styleSheet = new CSSStyleSheet();
        styleSheet.replaceSync(css);
        document.adoptedStyleSheets = [...document.adoptedStyleSheets, styleSheet];
    };
    
    const fixWebViewMouseEvent = () => {
        addStyleSheet(`
            #main:has(#panels-container:hover) #webview-container {
                pointer-events: none !important;
            }
        `);
    };
    
    const waitForElement = (selector, startNode=document) => {
        return new Promise((resolve) => {
            const timerId = setInterval(() => {
                const elem = startNode.querySelector(selector);
                
                if (elem) {
                    clearInterval(timerId);
                    resolve(elem);
                }
            }, 100);
        });
    };
    
    const 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 }));
    };
    
    const getActiveButton = () => document.querySelector('#panels .active > button');
    
    const togglePanel = (button, doDelay) => {
        const delay = doDelay ? (getActiveButton() ? config.switch_delay : config.open_delay) : 0;
        
        clearTimeout(showToken);
        showToken = setTimeout(() => {
            simulateClick(button);
        }, delay);
    };
    
    const closePanel = () => {
        if (!config.close_fixed && !document.querySelector('#panels-container.overlay')) return;
        
        setTimeout(() => {
            const activeButton = getActiveButton();
            if (activeButton) {
                simulateClick(activeButton);
            }
        }, config.close_delay);
    };
    
    const isPanelButton = (element) => element.matches('button:is([name^="Panel"], [name^="WEBPANEL_"]):not([name="PanelWeb"])');
    
    let showToken;
    const panelMouseOver = () => {
        const eventHandler = (event) => {
            if (isPanelButton(event.target) && !event.altKey && !event.ctrlKey && !event.shiftKey && !event.metaKey) {
                switch(event.type) {
                    case 'mouseenter':
                        togglePanel(event.target, true);
                        break;
                    case 'mouseleave':
                        clearTimeout(showToken);
                        break;
                    case 'dragenter':
                        togglePanel(event.target, false);
                        break;
                }
            }
        };
        
        if (config.auto_close) {
            document.querySelector('#webview-container').addEventListener('mouseenter', closePanel);
            document.querySelector('#webview-container').addEventListener('animationstart', event => {
                if (event.target.matches('webview') && event.animationName === 'delay_visibility') {
                    closePanel();
                }
            });
        }
        
        const panels = document.querySelector('#panels');
        panels.addEventListener('mouseenter', eventHandler, { capture: true });
        panels.addEventListener('mouseleave', eventHandler, { capture: true });
        panels.addEventListener('dragenter', eventHandler, { capture: true });
    };
    
    await waitForElement('#browser');
    fixWebViewMouseEvent();
    panelMouseOver();
})();

AndreASA

Hey there, first of all I'm a newbie when it comes to programming but I'm really looking after a way to implement some sort of "open panel on mouse over" functionality in Vivaldi. Can anyone kindly explain to me how to install or save this script?

Hadden89

@AndreASA https://forum.vivaldi.net/topic/10549/modding-vivaldi?page=1

AndreASA

@Hadden89 oh, thanks, I think the JS custom worked here but I thought it would open/hide the side panel on mouse over, not the apps IN the panel. Is that it or am I doing something wrong? The behavior I'm looking for is similar to Arc, Zen and other modern browsers, where one can hover the mouse to the side to reveal the side panel and right after the mouse leaves that area the side panel hides.

storylord

@nafumofu thx for refactoring, a question since I use deepl or the internal translation pane - it doesn't close when the focus is lost. I think it is because you have text field to fill out. Could it be possible to change the code that this hovering panels also close after focus is lost (cursor moving back to the website content )

nafumofu

@storylord
Do you mean closing the panel when the focus is shifted from the panel to WebView by keyboard operation?

nafumofu

https://forum.vivaldi.net/post/765695
FIX: Panel does not close when focus is shifted to WebView by keyboard operation.

storylord

@nafumofu I've made a video of what I mean, the same behavior is with the translation panel of Vivaldi

Video

nafumofu

@storylord
I tested with Win11 and Win10 and could not reproduce that issue.
Can you reproduce that problem with the new profile?

storylord

@nafumofu
I'm sorry for late reply. I test it at my work ( I use my own Vivaldi Profil there ) and got the same result. But if you couldn't reporoduce it I'm pretty sure it's a fault by myself or by modifications which I use. Thanks for further investigations and your time