@egjs/flicking 4.12.0-beta.7 → 4.12.0-beta.9

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/dist/flicking-inline.css

@@ -1,45 +0,0 @@
-.flicking-viewport {
-  position: relative;
-  overflow: hidden;
-}
-
-.flicking-viewport:not(.vertical) {
-  width: 100%;
-  height: 100%;
-}
-
-.flicking-viewport.vertical,
-.flicking-viewport.vertical > .flicking-camera {
-  display: inline-block;
-}
-
-.flicking-viewport.vertical.middle > .flicking-camera > * {
-  vertical-align: middle;
-}
-
-.flicking-viewport.vertical.bottom > .flicking-camera > * {
-  vertical-align: bottom;
-}
-
-.flicking-viewport.vertical > .flicking-camera > * {
-  display: block;
-}
-
-.flicking-viewport.flicking-hidden > .flicking-camera > * {
-  visibility: hidden;
-}
-
-.flicking-camera {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  z-index: 1;
-  white-space: nowrap;
-  will-change: transform;
-}
-
-.flicking-camera > * {
-  display: inline-block;
-  white-space: normal;
-  vertical-align: top;
-}

package/dist/flicking-inline.min.css

@@ -1 +0,0 @@
-.flicking-viewport{position:relative;overflow:hidden}.flicking-viewport:not(.vertical){width:100%;height:100%}.flicking-viewport.vertical,.flicking-viewport.vertical>.flicking-camera{display:inline-block}.flicking-viewport.vertical.middle>.flicking-camera>*{vertical-align:middle}.flicking-viewport.vertical.bottom>.flicking-camera>*{vertical-align:bottom}.flicking-viewport.vertical>.flicking-camera>*{display:block}.flicking-viewport.flicking-hidden>.flicking-camera>*{visibility:hidden}.flicking-camera{width:100%;height:100%;position:relative;z-index:1;white-space:nowrap;will-change:transform}.flicking-camera>*{display:inline-block;white-space:normal;vertical-align:top}

package/dist/flicking.css

@@ -1,44 +0,0 @@
-.flicking-viewport {
-  position: relative;
-  overflow: hidden;
-}
-
-.flicking-viewport.vertical {
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.flicking-viewport.vertical > .flicking-camera {
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-}
-
-.flicking-viewport.flicking-hidden > .flicking-camera > * {
-  visibility: hidden;
-}
-
-.flicking-camera {
-  width: 100%;
-  height: 100%;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  position: relative;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
-  z-index: 1;
-  will-change: transform;
-}
-
-.flicking-camera > * {
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
-}

package/dist/flicking.min.css

@@ -1 +0,0 @@
-.flicking-viewport{position:relative;overflow:hidden}.flicking-viewport.vertical{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.flicking-viewport.vertical>.flicking-camera{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.flicking-viewport.flicking-hidden>.flicking-camera>*{visibility:hidden}.flicking-camera{width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;z-index:1;will-change:transform}.flicking-camera>*{-ms-flex-negative:0;flex-shrink:0}