Foldable panel

[schroef]

Im doubting you know the asnwer otherwise i would have seen it on your website. I noticed the HDR Toning dialog in Photoshop has this nice folding panel

i was wondering how this could be done or what the code is. Im believe this is a plugin so im not sure this even ScriptUI

[joonaspaakko]

That's not necessarily true. There are properties here and there that SDB doesn't have, like for instance titleLayout (these are usually edge cases that the user could easily add manually after the dialog has been exported), but in this case I would think this collapsible panel is a custom thing.

I'm pretty certain that if it is a panel property, it's not mentioned in any of the documentation. Could even be one of those PS specific things. Not sure if I've seen that in other applications. It wouldn't surprise me if it was an undocumented property that you could use if you could find out what it is.

It could also be a "hacked together solution", but I'm actually not sure how achievable that would be for us regular folk. I'm thinking... if you could attach a click event to the panel title or border, it should then be possible to put the chevron in the title and swap it and the height of the panel on click (perhaps hide its children too). What is certain is that you can make something similar yourself, but perhaps not with the panel item.

[schroef]

It looks indeed like the panel but with folding capabilities. I tried coming up with method of recreating, but i find that hard, since it looks like a panel. The border across and then also all kinds of other buttons and sliders inside of it.

I was thinking of perhaps a different approach, say a more minimal version with only a plus or minus icon before a static text. When i click it, it will expand the main dialog for x-amount height. Thats not that hard.

Issue is that when setting items to visible = false. Something is still adding margin. The more items i set to visible false, the more empty space i get

[joonaspaakko]

Yes, you probably can't make something that looks the same, but functionally you can get there.

The visible property works much like visibility: hidden; in CSS, as is evident. As far as I know, it's only helpful when used with the property orientation and value stack. The javascript tools guide pdf should have something about that... but basically it stacks all child items on top of each other. So then you just hide all except one and as long as you swap the visible item, you got some sort of swappable content going on, but the parent item will be as big as it's biggest child item at all times.

The vertical tab item in SDB uses it and that is a custom thing straight from ScripUI for dummies pdf or at least modeled after that example.

I tried to make something close to your example but couldn't quite get there... It should serve as some sort of example for you

/*
Code for Import https://scriptui.joonas.me — (Triple click to select): 
{"activeId":12,"items":{"item-0":{"id":0,"type":"Dialog","parentId":false,"style":{"enabled":true,"varName":null,"windowType":"Dialog","creationProps":{"su1PanelCoordinates":false,"maximizeButton":false,"minimizeButton":false,"independent":false,"closeButton":true,"borderless":false,"resizeable":false},"text":"Dialog","preferredSize":[0,0],"margins":16,"orientation":"column","spacing":10,"alignChildren":["center","top"]}},"item-5":{"id":5,"type":"Group","parentId":0,"style":{"enabled":true,"varName":"collapsibleWrapper","preferredSize":[348,0],"margins":16,"orientation":"column","spacing":10,"alignChildren":["fill","center"],"alignment":null}},"item-7":{"id":7,"type":"Panel","parentId":5,"style":{"enabled":true,"varName":"collapsible","creationProps":{"borderStyle":"etched","su1PanelCoordinates":false},"text":"Collapsible","preferredSize":[0,0],"margins":10,"orientation":"column","spacing":10,"alignChildren":["fill","top"],"alignment":null}},"item-10":{"id":10,"type":"StaticText","parentId":7,"style":{"enabled":true,"varName":null,"creationProps":{"truncate":"none","multiline":false,"scrolling":false},"softWrap":true,"text":"Praesent suscipit malesuada orci, in venenatis nisi euismod vel. Aliquam tristique maximus augue in condimentum.","justify":"left","preferredSize":[0,0],"alignment":null,"helpTip":null}},"item-11":{"id":11,"type":"Panel","parentId":5,"style":{"enabled":true,"varName":"collapsible","creationProps":{"borderStyle":"etched","su1PanelCoordinates":false},"text":"Collapsible","preferredSize":[0,0],"margins":10,"orientation":"column","spacing":10,"alignChildren":["fill","top"],"alignment":null}},"item-12":{"id":12,"type":"StaticText","parentId":11,"style":{"enabled":true,"varName":null,"creationProps":{"truncate":"none","multiline":false,"scrolling":false},"softWrap":true,"text":"CLICK HERE, consectetur adipiscing elit. Sed a purus quis justo semper elementum vitae sit amet est. Praesent suscipit malesuada orci, in venenatis nisi euismod vel. Aliquam tristique maximus augue in condimentum.","justify":"left","preferredSize":[0,0],"alignment":null,"helpTip":null}}},"order":[0,5,11,12,7,10],"settings":{"importJSON":true,"indentSize":false,"cepExport":false,"includeCSSJS":true,"showDialog":true,"functionWrapper":false,"afterEffectsDockable":false,"itemReferenceList":"None"}}
*/ 

// DIALOG
// ======
var dialog = new Window("dialog"); 
    dialog.text = "Dialog"; 
    dialog.orientation = "column"; 
    dialog.alignChildren = ["center","top"]; 
    dialog.spacing = 10; 
    dialog.margins = 16; 

// COLLAPSIBLEWRAPPER
// ==================
var collapsibleWrapper = dialog.add("group", undefined, {name: "collapsibleWrapper"}); 
    collapsibleWrapper.preferredSize.width = 348; 
    collapsibleWrapper.orientation = "column"; 
    collapsibleWrapper.alignChildren = ["fill","center"]; 
    collapsibleWrapper.spacing = 10; 
    collapsibleWrapper.margins = 16; 

// COLLAPSIBLE
// ===========
var collapsible = collapsibleWrapper.add("panel", undefined, undefined, {name: "collapsible"}); 
    collapsible.text = "Collapsible"; 
    collapsible.orientation = "column"; 
    collapsible.alignChildren = ["fill","top"]; 
    collapsible.spacing = 10; 
    collapsible.margins = 10; 

var statictext1 = collapsible.add("group"); 
    statictext1.orientation = "column"; 
    statictext1.alignChildren = ["left","center"]; 
    statictext1.spacing = 0; 

    statictext1.add("statictext", undefined, "CLICK HERE, consectetur adipiscing elit. Sed a purus", {name: "statictext1"}); 
    statictext1.add("statictext", undefined, "quis justo semper elementum vitae sit amet est.", {name: "statictext1"}); 
    statictext1.add("statictext", undefined, "Praesent suscipit malesuada orci, in venenatis nisi", {name: "statictext1"}); 
    statictext1.add("statictext", undefined, "euismod vel. Aliquam tristique maximus augue in", {name: "statictext1"}); 
    statictext1.add("statictext", undefined, "condimentum.", {name: "statictext1"}); 

// COLLAPSIBLE1
// ============
var collapsible1 = collapsibleWrapper.add("panel", undefined, undefined, {name: "collapsible1"}); 
    collapsible1.text = "Collapsible"; 
    collapsible1.orientation = "column"; 
    collapsible1.alignChildren = ["fill","top"]; 
    collapsible1.spacing = 10; 
    collapsible1.margins = 10; 

var statictext2 = collapsible1.add("group"); 
    statictext2.orientation = "column"; 
    statictext2.alignChildren = ["left","center"]; 
    statictext2.spacing = 0; 

    statictext2.add("statictext", undefined, "Praesent suscipit malesuada orci, in venenatis nisi", {name: "statictext2"}); 
    statictext2.add("statictext", undefined, "euismod vel. Aliquam tristique maximus augue in", {name: "statictext2"}); 
    statictext2.add("statictext", undefined, "condimentum.", {name: "statictext2"}); 



// CUSTOMIZATION

collapsible1.collapsed = true; // Make one panel collapsed by default1

// On show because can't get the initial item bounds otherwise
dialog.onShow = function() {
  addClickEvents( collapsibleWrapper );
}

function addClickEvents( wrapper ) {
  for ( var i=0; i < wrapper.children.length; i++  ) {
    
    var collapsiblePanel = wrapper.children[i];
    collapsiblePanel.cleanText = collapsiblePanel.text;
    var collapsedIcon = '\u3009';
    var expandedIcon = '\uFE40';
    function swapIcon( item, icon ) { item.text = icon + item.cleanText; }
    
    // SET INTIAL STATE
    if ( collapsiblePanel.collapsed ) {
      swapIcon( collapsiblePanel, collapsedIcon);
      toggle(collapsiblePanel); // Apparently collapsing it with max size initially makes it smaller... Maybe removing and adding items would work better...
    }
    else swapIcon( collapsiblePanel, expandedIcon);
    
     function toggle( item ) {
        var collapseHeight = 15;
        var height = item.maximumSize.height;
        var isExpanded = height !== collapseHeight;
        if ( isExpanded ) item.rememberHeight = item.bounds.height;
        
        swapIcon( item, isExpanded ? collapsedIcon : expandedIcon); // text doesn't update here...
        item.collapsed = !isExpanded;
        item.maximumSize.height = isExpanded ? collapseHeight : item.rememberHeight;
        dialog.layout.layout(true);
     }
    
    // ADD EVENT LISTENER
    collapsiblePanel.addEventListener('click', function( e ) {
      
      toggle( e.target.parent );
      
      // Tried to make the panel and title clickable while ignoring what's in it.
      // This worked in ESTK and to a lesser degree in PS CS 6 and not at all in PS CC 2019
      // var targetItem = e.target;
      // var name= targetItem.properties.name;
      // var isCollapsible = name.match(/^collapsible/);
      //if ( isCollapsible ) toggle( targetItem );
      
    });

  }
}

dialog.show();

[schroef]

That's really awesome you took the time yourself to look at it. I'll have look at this code.

Many thanks!

[irenepc]

Just chiming in to say I was recently able to achieve this with some iconbuttons and toggling the contents to hide/show and also resize to 0. So it can be done, but definitely diy.