Collapse element if it falls below a given minimum width?

I’m actually using this script now and it is working as it should, albeit only in Chrome. But I can live with that. It solves my problem very nicely.
So this script changes the state of an object if the width changes beyond a certain threshold (which I have set to 275). Is it possible to change it so the state change is achieved if the width exceeds the height, i.e. instead of a hard-wired width it checks if width < height and if not then the state changes?

Sorry I keep coming back with these scripting questions. I hope I will be able to pick up some basic js after this project…

let cell = targetCells[0];
let nested = targetCells[1];

let nestedStates = nested.widget.states;

let smallNestedState = nestedStates.find( ns => ns.name == "small");
let normalNestedState = nestedStates.find( ns => ns.name == "Normal");

const ro = new ResizeObserver(entries => { 
for (let entry of entries) {
        
        if (entry.contentRect.width < 275) {
			at.changeStateOfCell(nested, smallNestedState, "");
		}
		else {
			at.changeStateOfCell(nested, normalNestedState, "");
		}
    }

});
ro.observe(cell.DOMElement);

Did you try to change this

if (entry.contentRect.width < 275)

to

if (entry.contentRect.width < entry.contentRect.height)

?

So easy? Yes, that works! Thank you!

@tim can I pick you brain once again? Is it possible to make the script react to the size of the containing element instead of the browser window?

Yes, you can get the container cell like this:

let cell = targetCells[0]
let parent = cell.container

Could you explain what should happen in your file?

Sorry I accidentally undid some changes so there were too many elements in there. Please download again now. The small rectangle inside the red rectangle should change state once the width of the parent becomes <100.
image
I think some more changes are necessary. It’s not working. Tried in Chrome.

Palette states.atype.zip (9.5 MB)

It is even easier :slight_smile: By adding another target cell, you can access it directly in the script.

1 Like

Ah, finally. I have been tying to get this to work for ages now for individual nested cells. Thanks a bunch. Awesome :slight_smile:

Ok, I hit a snag (sorry about being such a pain. I’m running towards the end of a deadline.) This only works for one instance of the object. As soon as I try and apply the script to others or simply duplicate the widget, it stops working for the duplicates. Can anything be done or is this just how it is?

Hmmm duplicating seems to work but only after a couple of refreshes. It seems to behave differently if other objects are present.

You have to check if the target cells are correct. There might be some copy/paste issues.

1 Like

So I have a container like this:
image
I have hooked up this script to the container:

let cell = targetCells[0];
let nested = targetCells[1];

let nestedStates = nested.widget.states;

let smallNestedState = nestedStates.find( ns => ns.name == "Iconized-collapsed");
let normalNestedState = nestedStates.find( ns => ns.name == "Normal");

const ro = new ResizeObserver(entries => { 
for (let entry of entries) {
        
        if (entry.contentRect.width < 60) {
			at.changeStateOfCell(nested, smallNestedState, "");
		}
		else {
			at.changeStateOfCell(nested, normalNestedState, "");
		}
    }

});
ro.observe(cell.DOMElement);

I am targeting these cells:

But only Block1 is targeted and its state changes as intended. How do I need to amend the script in order for Block2 and Block3 to change their states as well? (I am only currently trying with Block2 but it is failing)

It seems to work if I make two separate scripts…

In the script you have to reference each target cell. In your script container is target cell 0, Block 1 is 1 and Block 2 is 2. Something like this:

let container = targetCell[0];
left block1 = targetCell[1];
left block2 = targetCell[2];

You can then get the states of each target cell and change them.

let container States = container.widget.states;

You have to do this for each target cell.

1 Like

Thanks. Just out of interest: Can you recommend any particular source for self-Java’ing? I think I need to learn some basic scripting.

A great resource is the Mozilla Developer Network.

https://eloquentjavascript.net explains JavaScript quiet good and does not require prior programming knowledge.

Thanks. I’ll give it a spin!

We have internal trainings especially for scripting in Antetype. Maybe we could do it for externals as well. We will discuss it.

Would love to participate! Just reading through eloquentjavascript.net. This is incredibly well-written. I think I might get the hang of it…