Close a dock when opening another - detect when a dock is open?

Oh wait does your top/left dock not have the toggle button?

Yeah thats is... for some reason the ID is only attached to the toggle button...
I'll take another look at this tmw. But it looks like we will only be able to detect docks with a handle. (if you care about the id)

Yes, exactly dock top and left are alwals visible, no toogle button !

This should do it for multiple docks on the same side, it will not find the docks without handlers though. But you dont want to close those anyways.

markdown 'js' binding
	#make the propName the key to write too in the view.custom 
	propName = value
	code =  """<img style='display:none' src='/favicon.ico' onload=\"
				const 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; 		
				function getOpenDocks(){
					const openDocks = [];
					for (const side of ['top','right','bottom','left']){										
					    const sidedocks = Array.from(document.querySelectorAll('.docked-view-'+side));
					    for (const sd of sidedocks){
					        const ids = sd.querySelectorAll('[data-dock-id]');
					        if (ids.length == 1 && !sd.style.getPropertyValue(side).startsWith('-')){
					            openDocks.push(ids[0].getAttribute('data-dock-id'));
					        }else if (ids.length > 1){					        	
					            const indexId = [...sd.querySelectorAll('.content-wrapper.view-parent > .view')]?.findIndex(x => !x.style?.display);	
					            if(indexId > -1){
    					            openDocks.push(ids[indexId].getAttribute('data-dock-id'));
                                }
					        }
					    }					   
					}					
					view.custom.write('"""+propName+"""',openDocks);
				};
				const callbackDock = (mutationList, observer) => {
					getOpenDocks();
				};
				const observerDocks = new MutationObserver(callbackDock); 
				const docks = document.querySelectorAll('.docked-view, .docked-view > div >.view');
				docks.forEach(dock => observerDocks.observe(dock, { attributes: true, childList: false, subtree: false }));	
				getOpenDocks();	
	\"></img>""".replace("\n", "").replace("\t", "")
	return code
	
Markdown

[ { "type": "ia.display.markdown", "version": 0, "props": { "style": { "flex": "--neutral-40" }, "markdown": { "escapeHtml": false } }, "meta": { "name": "Markdown" }, "position": { "x": 88, "y": 251, "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 const sidedocks = Array.from(document.querySelectorAll('.docked-view-'+side));\n\t\t\t\t\t for (const sd of sidedocks){\n\t\t\t\t\t const ids = sd.querySelectorAll('[data-dock-id]');\n\t\t\t\t\t if (ids.length == 1 && !sd.style.getPropertyValue(side).startsWith('-')){\n\t\t\t\t\t openDocks.push(ids[0].getAttribute('data-dock-id'));\n\t\t\t\t\t }else if (ids.length > 1){\t\t\t\t\t \t\n\t\t\t\t\t const indexId = [...sd.querySelectorAll('.content-wrapper.view-parent > .view')]?.findIndex(x => !x.style?.display);\t\n\t\t\t\t\t if(indexId > -1){\n \t\t\t\t\t openDocks.push(ids[indexId].getAttribute('data-dock-id'));\n }\n\t\t\t\t\t }\n\t\t\t\t\t }\t\t\t\t\t \n\t\t\t\t\t}\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, .docked-view > div >.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" } ] } } } } ]

Thanks a lot ! I still have some case where the list is not ok.
On the left I have 2 onDemand shared docks, and for some pages I add 2 more docks onDemand.
In that case when I select one added Dock (like DOCK_TREE_EQT or DOCK_SAVE_DATA) and I close it, the dock name stay on the list.

Right ondemand docks also has no id sigh, unless you also give it the handle button...

oke i found a way to get all id's, gimme a sec to write it in a script :mage:

@mazeyrat that should do it, found a way to use perspectives client functions.
One of these days i'll also find the session settings maybe xd Than we wouldnt need the markdown, but no luck yet, its quite a maze to go through without any docks :stuck_out_tongue: ...

js
	#make the propName the key to write too in the view.custom 
	propName = value
	code =  """<img style='display:none' src='/favicon.ico' onload=\"
				const 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; 		
				function getOpenDocks(){
					const openDocks = [];
					for (const side of ['top','right','bottom','left']){										
					    const dock =  window.__client.mounts?.docks?.get(side);					    
                        if(dock?.expanded){
                            openDocks.push(dock?.currentViewIndex?.observers?.values()?.next()?.value?.value?.id);                            
                        }				   
					}					
					view.custom.write('"""+propName+"""',openDocks);
				};
				const callbackDock = (mutationList, observer) => {
					getOpenDocks();
				};
				const observerDocks = new MutationObserver(callbackDock); 
				const docks = document.querySelectorAll('.docked-view, .docked-view > div >.view');
				docks.forEach(dock => observerDocks.observe(dock, { attributes: true, childList: false, subtree: false }));	
				getOpenDocks();	
	\"></img>""".replace("\n", "").replace("\t", "")
	return code
	
markdown
[
  {
    "type": "ia.display.markdown",
    "version": 0,
    "props": {
      "style": {
        "flex": "--neutral-40"
      },
      "markdown": {
        "escapeHtml": false
      }
    },
    "meta": {
      "name": "Markdown_0"
    },
    "position": {
      "x": 88,
      "y": 251,
      "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    const dock =  window.__client.mounts?.docks?.get(side);\t\t\t\t\t    \n                        if(dock?.expanded){\n                            openDocks.push(dock?.currentViewIndex?.observers?.values()?.next()?.value?.value?.id);                            \n                        }\t\t\t\t   \n\t\t\t\t\t}\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, .docked-view > div >.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"
            }
          ]
        }
      }
    }
  }
]
1 Like