Skip to content

Commit

Permalink
feat: resize에 updatePanelOrder를 대응
Browse files Browse the repository at this point in the history
  • Loading branch information
malangfox committed Nov 15, 2023
1 parent 8151c21 commit 583246d
Show file tree
Hide file tree
Showing 3 changed files with 25 additions and 25 deletions.
1 change: 1 addition & 0 deletions src/Flicking.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1508,6 +1508,7 @@ class Flicking extends Component<FlickingEvents> {
camera.updateRange();
camera.updateAnchors();
camera.updateAdaptiveHeight();
camera.updatePanelOrder();
camera.updateOffset();
await renderer.render();

Expand Down
44 changes: 22 additions & 22 deletions src/camera/Camera.ts
Original file line number Diff line number Diff line change
Expand Up @@ -541,6 +541,28 @@ class Camera {
return this;
}

/**
* Update direction to match the {@link https://developer.mozilla.org/en-US/docs/Web/CSS/direction direction} CSS property applied to the camera element
* @ko 카메라 엘리먼트에 적용된 {@link https://developer.mozilla.org/en-US/docs/Web/CSS/direction direction} CSS 속성에 맞게 방향을 업데이트합니다
* @return {this}
*/
public updatePanelOrder(): this {
const flicking = getFlickingAttached(this._flicking);

if (!flicking.horizontal) return this;

const el = this._el;
const direction = getStyle(el).direction;
if (direction !== this._panelOrder) {
this._panelOrder = direction === ORDER.RTL ? ORDER.RTL : ORDER.LTR;
if (flicking.initialized) {
flicking.control.controller.updateDirection();
}
}

return this;
}

/**
* Reset the history of {@link Flicking#event:needPanel needPanel} events so it can be triggered again
* @ko 발생한 {@link Flicking#event:needPanel needPanel} 이벤트들을 초기화하여 다시 발생할 수 있도록 합니다
Expand Down Expand Up @@ -573,28 +595,6 @@ class Camera {
return this;
}

/**
* Update direction to match the {@link https://developer.mozilla.org/en-US/docs/Web/CSS/direction direction} CSS property applied to the camera element
* @ko 카메라 엘리먼트에 적용된 {@link https://developer.mozilla.org/en-US/docs/Web/CSS/direction direction} CSS 속성에 맞게 방향을 업데이트합니다
* @return {this}
*/
public updatePanelOrder(): this {
const flicking = getFlickingAttached(this._flicking);
if (flicking.horizontal) {
const el = this._el;
const direction = getStyle(el).direction;
if (direction !== this._panelOrder) {
this._panelOrder = direction === ORDER.RTL ? ORDER.RTL : ORDER.LTR;
if (flicking.initialized) {
flicking.control.controller.updateDirection();
this.applyTransform();
}
}
}

return this;
}

private _resetInternalValues() {
this._position = 0;
this._alignPos = 0;
Expand Down
5 changes: 2 additions & 3 deletions test/unit/camera/Camera.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -407,18 +407,17 @@ describe("Camera", () => {
expect(flicking.index).to.equal(2);
});

it("should update direction of panels", async () => {
it("should update direction of panels when resize occurs", async () => {
const viewportEl = El.viewport().setDirection("ltr").add(
El.camera()
.add(El.panel("300px"))
.add(El.panel("300px"))
.add(El.panel("300px"))
);
const flicking = await createFlicking(viewportEl);
const camera = flicking.camera;

viewportEl.setDirection("rtl");
camera.updatePanelOrder();
await flicking.resize();
await simulate(flicking.element, { deltaX: 1000 });

expect(flicking.index).to.equal(2);
Expand Down

0 comments on commit 583246d

Please sign in to comment.