@egjs/flicking 4.12.0-beta.1 → 4.12.0-beta.11

package/src/camera/Camera.ts

@@ -32,6 +32,7 @@ class Camera {
   private _mode: CameraMode;
   private _el: HTMLElement;
   private _transform: string;
+  private _lookedOffset = 0;
   private _position: number;
   private _alignPos: number;
   private _offset: number;
@@ -292,6 +293,8 @@ class Camera {
    * @return {this}
    */
   public lookAt(pos: number): void {
+    const prevOffset = this._offset;
+    const isChangedOffset = this._lookedOffset !== prevOffset;
     const flicking = getFlickingAttached(this._flicking);
     const prevPos = this._position;
 
@@ -304,7 +307,12 @@ class Camera {
     if (toggled) {
       void flicking.renderer.render().then(() => {
         this.updateOffset();
+        this._lookedOffset = this._offset;
       });
+    } else if (isChangedOffset) {
+      // sync offset for renderOnlyVisible on resize
+      this.updateOffset();
+      this._lookedOffset = this._offset;
     } else {
       this.applyTransform();
     }
@@ -502,8 +510,8 @@ class Camera {
   }
 
   /**
-   * Update Viewport's height to active panel's height
-   * @ko 현재 선택된 패널의 높이와 동일하도록 뷰포트의 높이를 업데이트합니다
+   * Update Viewport's height to visible panel's max height
+   * @ko 현재 활성화된 패널과 보이는 패널의 최대 높이와 동일하도록 뷰포트의 높이를 업데이트합니다
    * @throws {FlickingError}
    * {@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} When {@link Camera#init init} is not called before
    * <ko>{@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} {@link Camera#init init}이 이전에 호출되지 않은 경우</ko>
@@ -513,11 +521,22 @@ class Camera {
   public updateAdaptiveHeight() {
     const flicking = getFlickingAttached(this._flicking);
     const activePanel = flicking.control.activePanel;
+    const visiblePanels = flicking.visiblePanels;
+
+    const selectedPanels = [...visiblePanels];
+
+    if (activePanel) {
+      selectedPanels.push(activePanel);
+    }
+
+    if (!flicking.horizontal || !flicking.adaptive || !selectedPanels.length) return;
+
+
+    const maxHeight = Math.max(...selectedPanels.map(panel => panel.height));
 
-    if (!flicking.horizontal || !flicking.adaptive || !activePanel) return;
 
     flicking.viewport.setSize({
-      height: activePanel.height
+      height: maxHeight
     });
   }
 
@@ -599,6 +618,7 @@ class Camera {
 
   private _resetInternalValues() {
     this._position = 0;
+    this._lookedOffset = 0;
     this._alignPos = 0;
     this._offset = 0;
     this._circularOffset = 0;

package/src/const/external.ts

@@ -94,6 +94,8 @@ export const MOVE_TYPE = {
 } as const;
 
 export const CLASS = {
+  VIEWPORT: "flicking-viewport",
+  CAMERA: "flicking-camera",
   VERTICAL: "vertical",
   HIDDEN: "flicking-hidden",
   DEFAULT_VIRTUAL: "flicking-panel"

package/src/control/states/HoldingState.ts

@@ -39,6 +39,10 @@ class HoldingState extends State {
 
     const inputEvent = axesEvent.inputEvent as { offsetX: number; offsetY: number };
 
+    if (!inputEvent) {
+      return;
+    }
+
     const offset = flicking.horizontal
       ? inputEvent.offsetX
       : inputEvent.offsetY;

package/src/core/panel/Panel.ts

@@ -321,6 +321,10 @@ class Panel {
       useFractionalSize
     } = flicking;
 
+    if (!el) {
+      return this;
+    }
+
     if (cached) {
       this._size = cached.size;
       this._margin = { ...cached.margin };

package/src/index.ts

@@ -4,6 +4,7 @@
  */
 import Flicking from "./Flicking";
 import type { FlickingOptions, FlickingEvents } from "./Flicking";
+import type { CrossFlickingOptions } from "./CrossFlicking";
 
 export * from "./CrossFlicking";
 
@@ -17,6 +18,6 @@ export * from "./utils";
 
 export * from "./type/event";
 export * from "./type/external";
-export type { FlickingOptions, FlickingEvents };
+export type { FlickingOptions, FlickingEvents, CrossFlickingOptions };
 
 export default Flicking;

package/src/utils.ts

@@ -349,3 +349,24 @@ export const setPrototypeOf = Object.setPrototypeOf || ((obj, proto) => {
   obj.__proto__ = proto;
   return obj;
 });
+
+export const camelize = (str: string): string => {
+  return str.replace(/[\s-_]([a-z])/g, (all, letter) => letter.toUpperCase());
+};
+
+export const getDataAttributes = (element: HTMLElement, attributePrefix: string): Record<string, string> => {
+  const dataAttributes: Record<string, string> = {};
+  const attributes = element.attributes;
+  const length = attributes.length;
+
+  for (let i = 0; i < length; ++i) {
+    const attribute = attributes[i];
+    const { name, value } = attribute;
+    if (name.indexOf(attributePrefix) === -1) {
+      continue;
+    }
+    dataAttributes[camelize(name.replace(attributePrefix, ""))] = value;
+  }
+
+  return dataAttributes;
+};