Improve submenu navigation: Implement grace period for mouse movement about puter HOT 12 CLOSED

Took some digging, but I remembered this article from years ago describing creating an invisible triangle so that you're still hovering the correct menu: https://css-tricks.com/dropdown-menus-with-more-forgiving-mouse-movement-paths/#aa-get-fancy-with-a-javascript-built-triangle Not sure how easy that is to implement but it looks like there's a jQuery plugin included that you might be able to use, or learn from.

from puter.

Hi @jelveh I would love to work on this!

from puter.

Okay I've been super close, thanks @AtkinsSJ ! I have implemented the plugin but I also tweaked it in order to have the menuAim.submenuDirection detrmined in UIContextMenu.js. It works pretty seamlessly, but I'm still running into an issue that basically the first time the main menu pop ups up, it will determine if the menu is left or right and won't change until page reload. The idea is to have the menuAim.submenuDirection change each time a main menu pops up. Any help would be great. Thanks
I made a new branch you can check out here: https://github.com/Hiya-its-Aya/puter/tree/slow-sub-v2

from puter.

Sure thing! @jelveh

from puter.

Thank you! Let's go! Let me know if you need help.

from puter.

The closest I've gotten so far is I use a setTimeout to wait to add the context-menu-active class to contextMenu, so the mouseover does not trigger prematurely and gives some time for the user navigate to the submenu.

Here's the code starting from about line 150 of UIContextMenu.js:

// when mouse is over an item
    $(contextMenu).find('.context-menu-item').on('mouseover', function (e) {
         //and if conxtext menu is active
        if($(contextMenu).hasClass('context-menu-active')){
            // mark other items as inactive
            $(contextMenu).find('.context-menu-item').removeClass('context-menu-item-active');
            console.log("remove active", contextMenu)
            // mark this item as active
            $(this).addClass('context-menu-item-active');
            console.log("make active", contextMenu)
            // close any submenu that doesn't belong to this item
            $(`.context-menu[data-parent-id="${menu_id}"]`).remove();
            console.log("remove submenu", contextMenu)
            // mark this context menu as active after .7 seconds if submenu is open
            if($(this).attr('data-has-submenu') === 'true'){
                // $(contextMenu).removeClass('context-menu-active');   
                let timeout = setTimeout(() => {
                    console.log("menu is now active", contextMenu)
                    $(contextMenu).addClass('context-menu-active');
                    clearTimeout(timeout);  
                }, 300);    
            }   
        }
    })

One issue I'm having is that some items are not responding when hovered, or if I hover too fast past the items with submenus it lags and/or other submenus will pop up. I know it's becuase of the setTimeout so best solution I have is to make it 300ms. I'm sure there's somethng better but I'm trying not to abstract the whole mouseover event to keep it simple. I pushed it to my repo: https://github.com/Hiya-its-Aya/puter/tree/slow-submenu

Any sugestions would be awesome! Thanks!

from puter.

This is such an elegant solution! Thanks @AtkinsSJ

from puter.

Yes, thanks @AtkinsSJ ! I did take a look earlier today but didn't have time to implement it and looks like its's just what I need! I think this would have to be tweaked to account for both left and right since it only accounts for the submenu being on the right. Hopefully this works out!

from puter.

Awesome!
I'll look into this. @AtkinsSJ you're welcome to chime in as well.

from puter.

@Hiya-its-Aya could you submit a draft PR so that we could review it together?

from puter.

You know what @jelveh I think I got it! I'll clean it up and do a PR soon.

from puter.

Nice!! Can't wait to see it in action

from puter.