topic Monitor shell panel status collapsed/expanded in Calcite Design System Questions

Monitor shell panel status collapsed/expanded

LefterisKoumis — Tue, 20 Aug 2024 00:24:36 GMT

I have this shell panel

<calcite-shell-panel slot="panel-start" position="start" id="shell-panel-start">

and want to monitor whether it's expended or not.

So I use JS reactiveutils but it doesn't seem to work.

const shellPanel = document.getElementById("shell-panel-start"); reactiveUtils.watch( () => shellPanel.collapsed, () => { console.log("collapsed"); });

Re: Monitor shell panel status collapsed/expanded

MattDriscoll — Tue, 20 Aug 2024 16:55:03 GMT

Hi @LefterisKoumis,

Are you referring to the "collapsed" property on the "calcite-shell-panel"?

There are no UI elements in the component that a user would click to toggle this property. If it is being toggled, its likely being done programmatically somewhere in your code. If that's the case, you should be able to track the state of it there.

I will create an issue to add an event to listen for when this property changes.

Issue: https://github.com/Esri/calcite-design-system/issues/10116

Re: Monitor shell panel status collapsed/expanded

LefterisKoumis — Wed, 21 Aug 2024 02:34:45 GMT

Yes, I am. Thank you for creating the issue. I also saw that after comments from your colleagues you closed it. ☹️ One of them said "Action Bar Actions that toggle the collapsed state or the Panel close event, etc." could monitor the state of the shell panel. That's correct. But also, I am using the shell panel to display the feature widget that displays the popup when a feature is clicked on. At each time I have to monitor the width of the table that is on the calcite-panel slot "panel-bottom". An event to monitor the state of the calcite shell slot "panel-start" would make it a lot easier to manage and less code to write.

Re: Monitor shell panel status collapsed/expanded

MattDriscoll — Wed, 21 Aug 2024 15:44:21 GMT

Thanks @LefterisKoumis. I'll pass the feedback along.