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 { function resizeHandler(entries: ResizeObserverEntry[]): void {
let callReInit = false; let resize = false;
for (const entry of entries) { for (const entry of entries) {
const newDimensions: SlideDimensions = { const newDimensions: SlideDimensions = {
@@ -113,12 +113,12 @@ function AutoSize(): AutoSizeType {
oldDimensions?.width !== newDimensions.width) oldDimensions?.width !== newDimensions.width)
) { ) {
previousDimensions.set(entry.target, newDimensions); previousDimensions.set(entry.target, newDimensions);
callReInit = true; resize = true;
} }
} }
if (callReInit) { if (resize) {
reInitController?.reinit(); debouncedSetContainerHeight();
} }
} }
@@ -143,6 +143,8 @@ function AutoSize(): AutoSizeType {
if (!isNaN(highest) && highest > 0) { if (!isNaN(highest) && highest > 0) {
emblaApi.containerNode().style.maxHeight = `${highest}px`; emblaApi.containerNode().style.maxHeight = `${highest}px`;
} }
reInitController?.reinit();
} }
const self: AutoSizeType = { const self: AutoSizeType = {
@@ -69,18 +69,36 @@ describe('AutoSize', () => {
it('should correctly handle resize', () => { it('should correctly handle resize', () => {
const plugin = AutoSize(); const plugin = AutoSize();
const parent = createParent(); 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()); 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 }]); 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); expect(emblaApi.reInit).toBeCalledTimes(1);
children[0].getBoundingClientRect = vi.fn().mockReturnValue({
width: 200,
height: 600,
});
callResizeHandler([{ target: parent, width: 20, height: 40 }]); callResizeHandler([{ target: parent, width: 20, height: 40 }]);
expect(parent.style.maxHeight).toBe('600px');
expect(emblaApi.reInit).toBeCalledTimes(2); expect(emblaApi.reInit).toBeCalledTimes(2);
}); });