Set the container height on every resize.

This commit is contained in:
Dermot Duffy
2023-09-04 20:31:20 -07:00
parent 07bc6391ec
commit 25150be36b
2 changed files with 25 additions and 5 deletions
@@ -97,7 +97,7 @@ function AutoSize(): AutoSizeType {
}
function resizeHandler(entries: ResizeObserverEntry[]): void {
let callReInit = false;
let resize = false;
for (const entry of entries) {
const newDimensions: SlideDimensions = {
@@ -113,12 +113,12 @@ function AutoSize(): AutoSizeType {
oldDimensions?.width !== newDimensions.width)
) {
previousDimensions.set(entry.target, newDimensions);
callReInit = true;
resize = true;
}
}
if (callReInit) {
reInitController?.reinit();
if (resize) {
debouncedSetContainerHeight();
}
}
@@ -143,6 +143,8 @@ function AutoSize(): AutoSizeType {
if (!isNaN(highest) && highest > 0) {
emblaApi.containerNode().style.maxHeight = `${highest}px`;
}
reInitController?.reinit();
}
const self: AutoSizeType = {
@@ -69,18 +69,36 @@ describe('AutoSize', () => {
it('should correctly handle resize', () => {
const plugin = AutoSize();
const parent = createParent();
const emblaApi = createEmblaApiInstance({ containerNode: parent });
const children = createTestSlideNodes();
const emblaApi = createEmblaApiInstance({
containerNode: parent,
selectedScrollSnap: 0,
slideNodes: children,
slideRegistry: [[0]],
});
plugin.init(emblaApi, createTestEmblaOptionHandler());
children[0].getBoundingClientRect = vi.fn().mockReturnValue({
width: 200,
height: 800,
});
callResizeHandler([{ target: parent, width: 10, height: 20 }]);
callResizeHandler([{ target: parent, width: 10, height: 20 }]);
callResizeHandler([{ target: parent, width: 10, height: 20 }]);
expect(parent.style.maxHeight).toBe('800px');
expect(emblaApi.reInit).toBeCalledTimes(1);
children[0].getBoundingClientRect = vi.fn().mockReturnValue({
width: 200,
height: 600,
});
callResizeHandler([{ target: parent, width: 20, height: 40 }]);
expect(parent.style.maxHeight).toBe('600px');
expect(emblaApi.reInit).toBeCalledTimes(2);
});