I would like to close the right dock when the dock down is open.
Is there a way to detect when a dock is open ?
Can you add a system.perspective.closeDock to the event that opens the bottom dock?
bottom dock is open by the user with the dock handle...
Unfortunately, I don't think you can achieve this using the dock handle.
You could use some js injection for that i guess, if you want to dabble into that
1 Like
You could try using a custom property that indicates when a each dock is open. When opening a new dock write zeros to the other values and force them to close based on the value.
When the dock is open by the user with the handle, you can't detect anything...
OnStartup is only executed the fisrt time the dock is loaded.
As @victordcq I think that only a JS hack can be used to achieve this.
This would definitely be a nice feature to have: a prop to flag if the dock is in view or not
3 Likes
Do you need to know what the dock is named or just if a top dock is open?
Im guessing a name too since you have 2 right docks eh...
Perhaps just knowing when a dock is open could be enought, because in that case we can call closeDock for all dock.
1 Like
Eh its not much different. i was trying to get it to work in session props, but i didnt find a way to edit session props from client.
Get this component into one of your shared docks.
Your docks will have to have a dock-id.
Should generate a list in the view.custom (of the dock you placed this in) with all the open dock id's.
You can make a onchange script on this custom prop to handle the rest:)
markdown component
[
{
"type": "ia.display.markdown",
"version": 0,
"props": {
"style": {
"flex": "--neutral-40"
},
"markdown": {
"escapeHtml": false
}
},
"meta": {
"name": "Markdown"
},
"position": {
"x": 122,
"y": 181,
"height": 200,
"width": 200
},
"custom": {
},
"propConfig": {
"props.source": {
"binding": {
"type": "expr",
"config": {
"expression": "\"openDocks\""
},
"transforms": [
{
"code": "\t#make the propName the key to write too in the view.custom \n\tpropName = value\n\tcode = \"\"\"<img style='display:none' src='/favicon.ico' onload=\\\"\n\t\t\t\tconst view = [...window.__client.page.views._data.values()].find(view => view.value.mountPath == this.closest('[data-component-path]').getAttributeNode('data-component-path').value.split('.')[0]).value; \t\t\n\t\t\t\tfunction getOpenDocks(){\n\t\t\t\t\tconst openDocks = [];\n\t\t\t\t\tfor (const side of ['top','right','bottom','left']){\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\tArray.from(document.querySelectorAll('.docked-view-'+side)).filter(x=> !x.style.getPropertyValue(side).startsWith('-')).forEach(d => {\n\t\t\t\t\t\t\t\tconst id = d.querySelector('[data-dock-id]').getAttribute('data-dock-id');\n\t\t\t\t\t\t\t\tif(id){\n\t\t\t\t\t\t\t\t\topenDocks.push(id);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t});\t\t\t\t\t\t\n\t\t\t\t\t}\n\t\t\t\t\tview.custom.write('\"\"\"+propName+\"\"\"',openDocks);\n\t\t\t\t};\n\t\t\t\tconst callbackDock = (mutationList, observer) => {\n\t\t\t\t\tgetOpenDocks();\n\t\t\t\t};\n\t\t\t\tconst observerDocks = new MutationObserver(callbackDock); \n\t\t\t\tconst docks = document.querySelectorAll('.docked-view');\n\t\t\t\tdocks.forEach(dock => observerDocks.observe(dock, { attributes: true, childList: false, subtree: false }));\t\n\t\t\t\tgetOpenDocks();\t\n\t\\\"></img>\"\"\".replace(\"\\n\", \"\").replace(\"\\t\", \"\")\n\treturn code\n\t",
"type": "script"
}
]
}
}
}
}
]
2 Likes
Thanks a lot,
I've pasted a markdown with your example in my dock left.
All the dock have dock-id.
I display the custom prop, but the list stay empty ?
its in the view.custom, not on the markdown
oh i did copy some random xx custom prop on the markdown, that does nothing, ill edit it out to avoid confusion
1 Like
Sorry, I probably missing something obvious,
my openDocks list stay empty...
Dock id "left" is an example or I can use another dock id name ?
the id can be whatever
Could you run this code in the inspector (ctrl+shift+i) console of your browser
for (const side of ['top','right','bottom','left']){
Array.from(document.querySelectorAll('.docked-view-'+side)).forEach(d=>console.log(d,d.children[0]));
}
run it a couple of times with different docks open/closed (and note which are open/closed for the different runs)
1 Like
It seems not to follows the docks opened and closed.
Perhaps it' becouse , I have several right dock ?
The left and top seem weird, do these have an id too?
Could you press on the arrow of one of these?(twice)
and maybe the right one too i guess
Yes all my docks have an id: left, top, down, help, dock-notif
perhaps I need to change the "reserved" ids.
for (const side of ['top','right','bottom','left']){
Array.from(document.querySelectorAll('.docked-view-'+side)).forEach(d=>console.log(d,d.children[0]));
}
VM29:2 <div class="docked-view docked-view-top " style="height: 112px; top: 0px; left: 0px; z-index: 11000;">…</div> <span></span>
VM29:2 <div class="docked-view docked-view-right " style="width: 500px; right: -500px; top: 112px; height: calc(100% - 282px); z-index: 11000;"><div class="toggle-wrapper wrapper-right" data-dock-id="help" style="top: 0px; height: calc(100% - 282px); right: 100%;">flex<div data-view-index="0" class="view-toggle toggle-right toggle-visible ia_dockedView__handle react-draggable" style="touch-action: none; margin-top: 0px; transform: translate(0px, 0px);">…</div></div><div class="toggle-wrapper wrapper-right" data-dock-id="dock-notif" style="top: 0px; height: calc(100% - 282px); right: 100%;">flex<div data-view-index="1" class="view-toggle toggle-right toggle-visible ia_dockedView__handle react-draggable" style="touch-action: none; margin-top: 112px; transform: translate(0px, 0px);">…</div></div><div class="content-wrapper view-parent">flex<div data-component="ia.container.flex" data-component-path="R[0].0" class="psc-STD/bgDock flex-container responsive-container ia_container--primary view" style="overflow: auto; flex-flow: column; place-content: stretch flex-start; align-items: stretch; display: none;"><div data-component="ia.container.flex" data-component-path="R[0].0:0" class="flex-container responsive-container ia_container--primary" style="overflow: auto; flex-flow: row; place-content: stretch flex-end; align-items: stretch; flex: 0 1 40px;">…</div>flex<div data-component="ia.container.flex" data-component-path="R[0].0:1" class="flex-container responsive-container ia_container--primary" style="overflow: auto; flex-flow: row; place-content: stretch flex-start; align-items: stretch; flex: 1 1 200px;">…</div>flex<div data-component="ia.container.flex" data-component-path="R[0].0:2" class="flex-container responsive-container ia_container--primary" style="overflow: auto; flex-flow: row; place-content: stretch flex-start; align-items: stretch; flex: 0 1 25%;"></div>flex</div><div data-component="ia.container.flex" data-component-path="R[1].0" class="psc-STD/bgDock flex-container responsive-container ia_container--primary view" style="overflow: auto; flex-flow: column; place-content: stretch flex-start; align-items: stretch; display: none;">…</div><div class="dock-border"></div>flex</div></div> <div class="toggle-wrapper wrapper-right" data-dock-id="help" style="top: 0px; height: calc(100% - 282px); right: 100%;">…</div>flex
VM29:2 <div class="docked-view docked-view-bottom dock-cover-shadow-bottom" style="height: 170px; bottom: 0px; left: 0px; z-index: 11010;"><div class="toggle-wrapper wrapper-bottom" data-dock-id="down" style="width: 100%; left: 0px; bottom: 100%;">…</div>flex<div class="content-wrapper view-parent">…</div>flex</div> <div class="toggle-wrapper wrapper-bottom" data-dock-id="down" style="width: 100%; left: 0px; bottom: 100%;">…</div>flex
VM29:2 <div class="docked-view docked-view-left " style="width: 200px; left: 0px; top: 112px; height: calc(100% - 282px); z-index: 11000;"><span></span><div class="content-wrapper view-parent">…</div>flex</div> <span></span>
undefined
uh this format is terrible to read, just a screenshot like i did is fine 
Just checked and the double dock does indeed behave differently, but not in the way you see, so there is something else going on too xd
