Collapse element if it falls below a given minimum width?

Is there a way to toggle the state of an element if it falls below a required minimum width? Think a horizontal group consisting of a logo and a label. If the label gets cut off, I want its container to collapse to zero width.
I was semi-successful with the scroll event but that requires for the element to be actually scrolled. It doesn’t seem to do the trick if the scroll bar is untouched.

Not sure if I understand it correclty, but you might add a breakpoint and define specific states for each breakpoint.

Breakpoints only relate to the page width of course.

For a specific element you will have to do this with JavaScript.

breakpoint.zip (215.3 KB)

A simple breakpoint example. If the screen is resized below 600px, the color of the cell changes.

Thanks, Tim. I know break points for the whole canvas but what I was tying to achieve was meant for a single element. I want elements within that element to change their state if the width of said element falls below a certain threshold. I hope it makes sense…

This is only possible with JS. I attached a simple example. The state of the element changes if the size falls below 600px.

The ResizeObserver API used in the script is currently not supported by Safari (only Technology Preview), but works in Chrome.

let cell = targetCells[0];
let states = cell.widget.states;
let smallState = states.find( s => s.name == "small");
let normalState = states.find( s => s.name == "Normal");


const ro = new ResizeObserver(entries => { 
for (let entry of entries) {
        
        if (entry.contentRect.width < 600) {
            at.changeStateOfCell(entry.target.figure, smallState, "");
        }
		else {
			at.changeStateOfCell(entry.target.figure, normalState, "");
		}
    }

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

resize 2.zip (262.6 KB)

Thanks Tim. So, the script changes the container whose width falls below 600px. Fantastic. Now, instead of changing the container, I need to target a number of nested widgets whose state should change to small if the width of this container falls below 1400. This would allow for complete responsiveness on a much finer level. Is this possible?

BTW just tell me to shut up if this is getting too much. Antetype has already saved me hundreds of hours in making this prototype (as compared to Origami). I am achieving the exact behaviour of a desktop app with a splash screen that comes up and then disappears as the main app launches. Thanks to the scripting you guys provided, I have a resizable app window which I can move around and resize. And I’m only test-driving this.

Everything is possible :wink:

You can also change states of nested widgets.

resize 3.zip (300.6 KB)

Here you will have to adapt the script for all buttons individually, which isn’t very elegant. It would be better to do it for all buttons in general.

Using breakpoints would be more elegant, but that would require your application window to be the body of the page and not a floating element with the “faked” desktop background.

Hey @tim I just tried your example but nothing seems to be happening. I tried live preview and Chrome.

As I wrote above, the ResizeObserver API I use in the script is not yet supported in Safari. You have to preview in Chrome or Firefox. Safari Technology Preview already supports it, so it won’t take too long.

I tried in Chrome. It did not work there either. I was thinking maybe you uploaded an older version?

resize 4.zip (311.3 KB)

Ok, please try this one. It works for me.

This one works! Brilliant, thanks.

Ok, I think using break points might prove to be the wiser strategy here. I just can’t get the hang of it. I want this group of icons
image
To go to this state
image
(I assigned a red fill to the containers just for debugging)
once the canvas reaches the break point of 600px.
Whatever I do - I cannot get it to work for these widgets. Is this not meant how it’s supposed to work?
No problem if not, I can work around it for the sake of my prototype but if it can be made to work I would love to know how…

A “Small” state is not needed. Just activate the Normal and Mouse Over state in the small breakpoint and style them. Please check the attached file.

If you style, you have to be in the respective breakpoint, otherwise you won’t the the result.

Breakpoint Test.atype.zip (407.3 KB)

Aaaargh… that simple? :slight_smile:

:wink: Please be aware that right now breakpoints are not heavily tested. You will probably have to reload more often to see the styling. Would be really interesting to get your feedback here.

My prototype is now rather substantial and I was debating whether to go for the break points or just keep it static. If it works it is a very intriguing concept though so I have decided to give it a go. I saw some wonkyness earlier on but I’ll see how it goes. Thanks for all you help so far!