@egjs/flicking 4.6.3 → 4.7.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@egjs/flicking",
-	"version": "4.6.3",
+	"version": "4.7.2",
 	"description": "Everyday 30 million people experience. It's reliable, flexible and extendable carousel.",
 	"main": "dist/flicking.js",
 	"module": "dist/flicking.esm.js",
@@ -33,6 +33,7 @@
 		"demo:prebuild-version": "cpx 'dist/**/*' docs/build/release/$npm_package_version/dist --clean",
 		"demo:prebuild-latest": "cpx 'dist/**/*' docs/build/release/latest/dist --clean",
 		"demo:deploy": "npm run docs:release && npm run build && npm run demo:prebuild-version && npm run demo:prebuild-latest && gh-pages -d docs/build/ --add --remote upstream",
+		"demo:deploy-origin": "npm run docs:release && npm run build && npm run demo:prebuild-version && npm run demo:prebuild-latest && gh-pages -d docs/build/ --add --remote origin",
 		"release": "release-helper upstream",
 		"changelog": "node ./config/changelog.js",
 		"coveralls": "cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js",
@@ -135,7 +136,7 @@
 		"typescript-transform-paths": "^2.2.3"
 	},
 	"dependencies": {
-		"@egjs/axes": "^2.8.0",
+		"@egjs/axes": "^3.2.1",
 		"@egjs/component": "^3.0.1",
 		"@egjs/imready": "^1.1.3",
 		"@egjs/list-differ": "^1.0.0"

package/src/Flicking.ts

@@ -58,6 +58,7 @@ export interface FlickingOptions {
   panelsPerView: number;
   noPanelStyleOverride: boolean;
   resizeOnContentsReady: boolean;
+  nested: boolean;
 
   // EVENT
   needPanelThreshold: number;
@@ -136,6 +137,7 @@ class Flicking extends Component<FlickingEvents> {
   private _noPanelStyleOverride: FlickingOptions["noPanelStyleOverride"];
   private _resizeOnContentsReady: FlickingOptions["resizeOnContentsReady"];
   private _virtual: FlickingOptions["virtual"];
+  private _nested: FlickingOptions["nested"];
 
   private _needPanelThreshold: FlickingOptions["needPanelThreshold"];
   private _preventEventsBeforeInit: FlickingOptions["preventEventsBeforeInit"];
@@ -413,6 +415,15 @@ class Flicking extends Component<FlickingEvents> {
    * @default false
    */
   public get resizeOnContentsReady() { return this._resizeOnContentsReady; }
+  /**
+   * If you enable this option on child Flicking when the Flicking is placed inside the Flicking, the parent Flicking will move in the same direction after the child Flicking reaches the first/last panel.
+   * If the parent Flicking and child Flicking have different horizontal option, you do not need to set this option.
+   * @ko Flicking 내부에 Flicking이 배치될 때 하위 Flicking에서 이 옵션을 활성화하면 하위 Flicking이 첫/마지막 패널에 도달한 뒤부터 같은 방향으로 상위 Flicking이 움직입니다.
+   * 만약 상위 Flicking과 하위 Flicking이 서로 다른 horizontal 옵션을 가지고 있다면 이 옵션을 설정할 필요가 없습니다.
+   * @type {boolean}
+   * @default false
+   */
+  public get nested() { return this._nested; }
   // EVENTS
   /**
    * A Threshold from viewport edge before triggering `needPanel` event
@@ -677,6 +688,7 @@ class Flicking extends Component<FlickingEvents> {
   public set panelsPerView(val: FlickingOptions["panelsPerView"]) { this._panelsPerView = val; }
   public set noPanelStyleOverride(val: FlickingOptions["noPanelStyleOverride"]) { this._noPanelStyleOverride = val; }
   public set resizeOnContentsReady(val: FlickingOptions["resizeOnContentsReady"]) { this._resizeOnContentsReady = val; }
+  public set nested(val: FlickingOptions["nested"]) { this._nested = val; }
   // EVENTS
   public set needPanelThreshold(val: FlickingOptions["needPanelThreshold"]) { this._needPanelThreshold = val; }
   public set preventEventsBeforeInit(val: FlickingOptions["preventEventsBeforeInit"]) { this._preventEventsBeforeInit = val; }
@@ -768,6 +780,7 @@ class Flicking extends Component<FlickingEvents> {
     panelsPerView = -1,
     noPanelStyleOverride = false,
     resizeOnContentsReady = false,
+    nested = false,
     needPanelThreshold = 0,
     preventEventsBeforeInit = true,
     deceleration = 0.0075,
@@ -808,6 +821,7 @@ class Flicking extends Component<FlickingEvents> {
     this._panelsPerView = panelsPerView;
     this._noPanelStyleOverride = noPanelStyleOverride;
     this._resizeOnContentsReady = resizeOnContentsReady;
+    this._nested = nested;
     this._virtual = virtual;
     this._needPanelThreshold = needPanelThreshold;
     this._preventEventsBeforeInit = preventEventsBeforeInit;

package/src/control/AxesController.ts

@@ -86,7 +86,7 @@ class AxesController {
    * @type {boolean}
    * @readonly
    */
-  public get enabled() { return this._panInput?.isEnable() ?? false; }
+  public get enabled() { return this._panInput?.isEnabled() ?? false; }
   /**
    * Current position value in {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html Axes} instance
    * @ko {@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html Axes} 인스턴스 내부의 현재 좌표 값
@@ -134,6 +134,7 @@ class AxesController {
     }, {
       deceleration: flicking.deceleration,
       interruptable: flicking.interruptable,
+      nested: flicking.nested,
       easing: flicking.easing
     });
     this._panInput = new PanInput(flicking.viewport.element, {
@@ -220,7 +221,7 @@ class AxesController {
     axis.range = [controlParams.range.min, controlParams.range.max];
     axis.bounce = parseBounce(flicking.bounce, camera.size);
 
-    axes.axm.set({ [AXES.POSITION_KEY]: controlParams.position });
+    axes.axisManager.set({ [AXES.POSITION_KEY]: controlParams.position });
 
     return this;
   }
@@ -331,7 +332,7 @@ class AxesController {
         ? circulatePosition(position, camera.range.min, camera.range.max)
         : position;
 
-      axes.axm.set({ [AXES.POSITION_KEY]: newPos });
+      axes.axisManager.set({ [AXES.POSITION_KEY]: newPos });
 
       return Promise.resolve();
     } else {

package/src/renderer/Renderer.ts

@@ -384,7 +384,7 @@ abstract class Renderer {
 
     if (!resizeOnContentsReady || flicking.virtualEnabled) return;
 
-    const hasContents = (panel: Panel) => !!panel.element.querySelector("img, video");
+    const hasContents = (panel: Panel) => panel.element && !!panel.element.querySelector("img, video");
     checkingPanels = checkingPanels.filter(panel => hasContents(panel));
 
     if (checkingPanels.length <= 0) return;

package/TODO.md

@@ -1,3 +0,0 @@
-## React 18 대응
-- [] updateoffset을 미루기
-  - render가 완료되기 전에 updateOffset이 3번 호출되었음