Set the container height on every resize.
This commit is contained in:
@@ -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);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user