HTML Elements Forums Docking Layout docking focus

This topic contains 1 reply, has 2 voices, and was last updated by Avatar Hristofor 3 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #100944
    Avatar
    peter.jak
    Participant

    Hello

    Is it possible to get id/name of selected docking window?

    Let’s say I have similar layout as in your demo “Visual Studio showcase” and I want to display some menu above the docking layout with context┬ádepending on focused docking window. Is there an event when docking window gets focus?

     

    Kind Regards

    Peter

    #100945
    Avatar
    Hristofor
    Participant

    Hi peter.jak,

    The Smart.DockingLayout doesn’t have a specific event for item focusing. However there are several solutions. One of which is to use the native document.activeElement to get the currently focused element on the page. You can combine that with a click event and you will have exactly what you need. Here’s how to do it:

    
     document.querySelector('smart-docking-layout').addEventListener('click', function() {
            if(document.activeElement) {
                console.log(document.activeElement.closest('.smart-tabs-window'));
            }
        })
    

    This code will log you the currently focused Smart.TabsWindow. From there you can get it’s id,name or any other property.

    Another approach is to get all Smart.DockingLayout items via the getter items and cycle through them to find which one has the ‘active’ attribute, like so:

    
    const items = document.querySelector('smart-docking-layout').items;
    
    document.querySelector('smart-docking-layout').addEventListener('click', function() {
        console.log(items.find(item => item.hasAttribute('active')));
    })
    

    Best Regards,
    Christopher

    Smart HTML Elements Team
    https://www.htmlelements.com

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.