Vanilla JS Expand Header Buttons?

[hmpmarketing]

Hi,

Are there any examples on how to add expand / minimise buttons for the header similar to what is on

https://dockview.dev/demo?

Thanks again and loving this!!

[kosirm]

+1
This is sooo good library, kudos! I managed to programaticaly maximize, exit maximized, set float, etc. but I still have not figured out how to set these buttons in vanilla js. There is

this.accessor.options.createRightHeaderActionComponent(this.groupPanel)

in initialize function but I don't know how to include this option when creating panel?
@mathuo can you please tell me?

[hmpmarketing]

Definiltey a hack @kosirm But I got this to work, hopefully @mathuo can give a better insight :-)

for(let g of dockview.panels){
let group_id = dockview.getPanel(g.id)._group.id
let elctrl = document.createElement('div')
elctrl.id = right_controls_panel_${g.id}
elctrl.style['padding-top'] = '10px'
elctrl.style.cursor = 'pointer'
elctrl.innerHTML = <div class="group-control" style="display: flex; align-items: center; padding: 0px 8px; height: 100%; color: var(--dv-activegroup-visiblepanel-tab-color);"> <div title="Maximize View" class="action"><span class="material-symbols-outlined" style="font-size: inherit;">expand_content</span> </div></div>
elctrl.addEventListener('click', () => {
let panel_id = g.id
console.log(dockview.getPanel(panel_id).api.isMaximized())
if(dockview.getPanel(panel_id).api.isMaximized()){
dockview.getPanel(panel_id).api.exitMaximized()
}else{
dockview.getPanel(panel_id).api.maximize()
}
})

dockview.getGroup(group_id).part.tabsContainer.setRightActionsElement(elctrl)

}

You should also add switching the icon when isMaximized or not

[kosirm]

@hmpmarketing thank you, much appreciated! Will test it immediately! I thought it is like adding some option to panel when creating it... but nevermind, as far as it is working, for me is fine.

edit: working perfectly!!! thanks again

[hmpmarketing]

@kosirm anytime!

FYI, if you know how to listen to an "onReady" event (when dockview has completely loaded) let me know. I am looking around the code and I cant seem to find an onReady function.

I want to have an overlay modal (IE: loading platform....) once everything is loaded I would hide the modal. Right now, I am using timeouts but it is not perfect!

Also, I cant get the initialHeight / initialWidth to work. Im using

dockview.getPanel('panel').api.setSize({width:400})

on a settimout

[kosirm]

@hmpmarketing I'm exploring exactly same thing 😄 ... because I'm used to use events with addEventListener ...

This looks like the event which is accessible on initialization:

        if (dockview) {
            dockview.component.onDidLayoutChange = () => { console.log("hello") }
        }

Or:

const log = () => {console.log("hello")}
}
dockview.onDidLayoutChange(log);

As far as I can see DockviewReadyEvent is not exported.

[kosirm]

@hmpmarketing I have a little problem, if component is not focused, I can not change maximize icon and I don't know how to focus first?

        function setNormalIcon(panel) {
            let el = document.getElementById(panel).querySelector(".group-control")
            el.classList.remove('maximized')
            el.classList.add('normal')
        }

        function setMaxIcon(panel) {
            let el = document.getElementById(panel).querySelector(".group-control")
            el.classList.remove('normal')
            el.classList.add('maximized')
        }

        window.setButtons = () => {
            for (let g of dockview.panels) {
                let group_id = dockview.getPanel(g.id)._group.id
                console.log("group id", group_id)
                let maxButton = document.createElement('div')
                maxButton.id = `right_controls_panel_${g.id}`
                maxButton.style['padding-top'] = '10px'
                maxButton.style.cursor = 'pointer'
                maxButton.innerHTML = /*HTML*/`
            <div class="group-control normal" style="display: flex; align-items: center; padding: 0px 8px; height: 100%; color: var(--dv-activegroup-visiblepanel-tab-color);"> 
                <div title="Maximize View" class="action">
                    <span class="material-symbols-outlined" style="font-size: inherit;"></span>
                </div>
            </div>
            `
                maxButton.addEventListener('click', () => {
                    let panel_id = g.id
                    let panel = dockview.getPanel(panel_id)

                    if (panel.api.isMaximized()) {
                        panel.api.exitMaximized()
                        setNormalIcon(maxButton.id)
                    } else {
                        // how to focus first?
                        // this doesn't work
                        // dockview.focus(panel_id)
                        panel.api.maximize()
                        setMaxIcon(maxButton.id)
                    }
                })
                dockview.getGroup(group_id).part.tabsContainer.setRightActionsElement(maxButton)
            }
        }

[hmpmarketing]

@kosirm

    elctrl.addEventListener('click', () => {
        let panel_id = g.id
        console.log(dockview.getPanel(panel_id).api.isMaximized())
        if(dockview.getPanel(panel_id).api.isMaximized()){
            dockview.getPanel(panel_id).api.exitMaximized()
            document.querySelector(`#${elctrl.id} div span`).textContent = "expand_content"
        }else{
            dockview.getPanel(panel_id).api.maximize()
            document.querySelector(`#${elctrl.id} div span`).textContent = "collapse_content"
        }
    })

FYI: Im using material icons

[kosirm]

@hmpmarketing Material Icons... me too... 😄

For me it works the same:

So I want to focus it first, then maximize.

[kosirm]

I don't know it it is possible to focus panel by id, but in the meantime, async call solved it, because when it is maximized it is automatically focused.

maxButton.addEventListener('click', () => {
    let panel_id = g.id
    let panel = dockview.getPanel(panel_id)

    if (panel.api.isMaximized()) {
        panel.api.exitMaximized()
        setMinIcon(maxButton.id)
    } else {
        const max = async () => {
            panel.api.maximize();
        }
        max().then(() => setMaxIcon(maxButton.id));
    }
})