@egjs/flicking 4.12.1-beta.2 → 4.12.1-beta.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/debug/example/index.html +82 -0
  2. package/declaration/Flicking.d.ts +3 -2
  3. package/dist/flicking.cjs.js +40 -13
  4. package/dist/flicking.cjs.js.map +1 -1
  5. package/dist/flicking.esm.js +40 -13
  6. package/dist/flicking.esm.js.map +1 -1
  7. package/dist/flicking.js +40 -13
  8. package/dist/flicking.js.map +1 -1
  9. package/dist/flicking.min.js +2 -2
  10. package/dist/flicking.min.js.map +1 -1
  11. package/dist/flicking.pkgd.js +43 -31
  12. package/dist/flicking.pkgd.js.map +1 -1
  13. package/dist/flicking.pkgd.min.js +2 -2
  14. package/dist/flicking.pkgd.min.js.map +1 -1
  15. package/package.json +2 -2
  16. package/src/Flicking.ts +449 -200
  17. package/src/control/SnapControl.ts +1 -3
  18. package/src/core/AutoResizer.ts +40 -11
package/debug/example/index.html ADDED
@@ -0,0 +1,82 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Flicking Basic Demo</title>
7
+ <link rel="stylesheet" href="../../dist/flicking.css" />
8
+ <style>
9
+ .flicking-viewport {
10
+ width: 500px;
11
+ height: 300px;
12
+ margin: 0 auto;
13
+ }
14
+ .panel {
15
+ width: 200px;
16
+ height: 300px;
17
+ margin-right: 10px;
18
+ display: flex;
19
+ align-items: center;
20
+ justify-content: center;
21
+ font-size: 24px;
22
+ color: white;
23
+ }
24
+ .navigation {
25
+ text-align: center;
26
+ margin-top: 20px;
27
+ }
28
+ .navigation button {
29
+ margin: 0 5px;
30
+ padding: 5px 10px;
31
+ }
32
+ </style>
33
+ </head>
34
+ <body>
35
+ <div class="flicking-viewport">
36
+ <div class="flicking-camera">
37
+ <div class="panel" style="background-color: #f44336">Panel 1</div>
38
+ <div class="panel" style="background-color: #2196f3">Panel 2</div>
39
+ <div class="panel" style="background-color: #4caf50">Panel 3</div>
40
+ <div class="panel" style="background-color: #ffc107">Panel 4</div>
41
+ <div class="panel" style="background-color: #9c27b0">Panel 5</div>
42
+ </div>
43
+ </div>
44
+ <div class="navigation">
45
+ <button id="prev">Previous</button>
46
+ <button id="next">Next</button>
47
+ </div>
48
+
49
+ <script src="../../dist/flicking.pkgd.js"></script>
50
+ <script>
51
+ document.addEventListener("DOMContentLoaded", () => {
52
+ const flicking = new Flicking(".flicking-viewport", {
53
+ circular: false,
54
+ moveType: "snap",
55
+ align: "center",
56
+ defaultIndex: 0,
57
+ });
58
+
59
+ // Navigation buttons
60
+ const prevButton = document.getElementById("prev");
61
+ const nextButton = document.getElementById("next");
62
+
63
+ prevButton.addEventListener("click", () => {
64
+ flicking.prev();
65
+ });
66
+
67
+ nextButton.addEventListener("click", () => {
68
+ flicking.next();
69
+ });
70
+
71
+ // Update button states based on current index
72
+ flicking.on("moveEnd", () => {
73
+ prevButton.disabled = flicking.index === 0;
74
+ nextButton.disabled = flicking.index === flicking.panels.length - 1;
75
+ });
76
+
77
+ // Initial button state
78
+ prevButton.disabled = true;
79
+ });
80
+ </script>
81
+ </body>
82
+ </html>
package/declaration/Flicking.d.ts CHANGED
@@ -120,6 +120,7 @@ declare class Flicking extends Component<FlickingEvents> {
120
120
  private _renderExternal;
121
121
  private _initialized;
122
122
  private _plugins;
123
+ private _isResizing;
123
124
  get control(): Control;
124
125
  get camera(): Camera;
125
126
  get renderer(): Renderer;
@@ -208,7 +209,7 @@ declare class Flicking extends Component<FlickingEvents> {
208
209
  set renderOnlyVisible(val: FlickingOptions["renderOnlyVisible"]);
209
210
  set autoResize(val: FlickingOptions["autoResize"]);
210
211
  set useResizeObserver(val: FlickingOptions["useResizeObserver"]);
211
- constructor(root: HTMLElement | string, { align, defaultIndex, horizontal, circular, circularFallback, bound, adaptive, panelsPerView, noPanelStyleOverride, resizeOnContentsReady, nested, needPanelThreshold, preventEventsBeforeInit, deceleration, duration, easing, inputType, moveType, threshold, dragThreshold, interruptable, bounce, iOSEdgeSwipeThreshold, preventClickOnDrag, preventDefaultOnDrag, disableOnInit, changeOnHold, renderOnlyVisible, virtual, autoInit, autoResize, useResizeObserver, resizeDebounce, maxResizeDebounce, useFractionalSize, externalRenderer, renderExternal }?: Partial<FlickingOptions>);
212
+ constructor(root: HTMLElement | string, { align, defaultIndex, horizontal, circular, circularFallback, bound, adaptive, panelsPerView, noPanelStyleOverride, resizeOnContentsReady, nested, needPanelThreshold, preventEventsBeforeInit, deceleration, duration, easing, inputType, moveType, threshold, dragThreshold, interruptable, bounce, iOSEdgeSwipeThreshold, preventClickOnDrag, preventDefaultOnDrag, disableOnInit, changeOnHold, renderOnlyVisible, virtual, autoInit, autoResize, useResizeObserver, resizeDebounce, maxResizeDebounce, useFractionalSize, externalRenderer, renderExternal, }?: Partial<FlickingOptions>);
212
213
  init(): Promise<void>;
213
214
  destroy(): void;
214
215
  prev(duration?: number): Promise<void>;
@@ -219,7 +220,7 @@ declare class Flicking extends Component<FlickingEvents> {
219
220
  getPanel(index: number): Panel | null;
220
221
  enableInput(): this;
221
222
  disableInput(): this;
222
- getStatus({ index, position, includePanelHTML, visiblePanelsOnly }?: Partial<{
223
+ getStatus({ index, position, includePanelHTML, visiblePanelsOnly, }?: Partial<{
223
224
  index: boolean;
224
225
  position: boolean;
225
226
  includePanelHTML: boolean;
package/dist/flicking.cjs.js CHANGED
@@ -4,7 +4,7 @@ name: @egjs/flicking
4
4
  license: MIT
5
5
  author: NAVER Corp.
6
6
  repository: https://github.com/naver/egjs-flicking
7
- version: 4.12.1-beta.2
7
+ version: 4.12.2-beta.0
8
8
  */
9
9
  'use strict';
10
10
 
@@ -949,10 +949,25 @@ var Viewport = /*#__PURE__*/function () {
949
949
  var AutoResizer = /*#__PURE__*/function () {
950
950
  function AutoResizer(flicking) {
951
951
  var _this = this;
952
- this._onResize = function () {
952
+ this._onResize = function (entries) {
953
953
  var flicking = _this._flicking;
954
954
  var resizeDebounce = flicking.resizeDebounce;
955
955
  var maxResizeDebounce = flicking.maxResizeDebounce;
956
+ if (entries.length) {
957
+ var resizeEntryInfo = entries[0].contentRect;
958
+ var beforeSize = {
959
+ width: flicking.viewport.width,
960
+ height: flicking.viewport.height
961
+ };
962
+ var afterSize = {
963
+ width: resizeEntryInfo.width,
964
+ height: resizeEntryInfo.height
965
+ };
966
+ // resize 이벤트가 발생했으나 이전과 width, height의 변화가 없다면 이후 로직을 진행하지 않는다.
967
+ if (beforeSize.height === afterSize.height && beforeSize.width === afterSize.width) {
968
+ return;
969
+ }
970
+ }
956
971
  if (resizeDebounce <= 0) {
957
972
  void flicking.resize();
958
973
  } else {
@@ -978,12 +993,12 @@ var AutoResizer = /*#__PURE__*/function () {
978
993
  // eslint-disable-next-line @typescript-eslint/member-ordering
979
994
  this._skipFirstResize = function () {
980
995
  var isFirstResize = true;
981
- return function () {
996
+ return function (entries) {
982
997
  if (isFirstResize) {
983
998
  isFirstResize = false;
984
999
  return;
985
1000
  }
986
- _this._onResize();
1001
+ _this._onResize(entries);
987
1002
  };
988
1003
  }();
989
1004
  this._flicking = flicking;
@@ -1001,6 +1016,7 @@ var AutoResizer = /*#__PURE__*/function () {
1001
1016
  configurable: true
1002
1017
  });
1003
1018
  __proto.enable = function () {
1019
+ var _this = this;
1004
1020
  var flicking = this._flicking;
1005
1021
  var viewport = flicking.viewport;
1006
1022
  if (this._enabled) {
@@ -1008,23 +1024,32 @@ var AutoResizer = /*#__PURE__*/function () {
1008
1024
  }
1009
1025
  if (flicking.useResizeObserver && !!window.ResizeObserver) {
1010
1026
  var viewportSizeNot0 = viewport.width !== 0 || viewport.height !== 0;
1011
- var resizeObserver = viewportSizeNot0 ? new ResizeObserver(this._skipFirstResize) : new ResizeObserver(this._onResize);
1027
+ var resizeObserver = viewportSizeNot0 ? new ResizeObserver(function (entries) {
1028
+ return _this._skipFirstResize(entries);
1029
+ }) : new ResizeObserver(function (entries) {
1030
+ return _this._onResize(entries);
1031
+ });
1012
1032
  resizeObserver.observe(flicking.viewport.element);
1013
1033
  this._resizeObserver = resizeObserver;
1014
1034
  } else {
1015
- window.addEventListener("resize", this._onResize);
1035
+ window.addEventListener("resize", function () {
1036
+ return _this._onResize([]);
1037
+ });
1016
1038
  }
1017
1039
  this._enabled = true;
1018
1040
  return this;
1019
1041
  };
1020
1042
  __proto.disable = function () {
1043
+ var _this = this;
1021
1044
  if (!this._enabled) return this;
1022
1045
  var resizeObserver = this._resizeObserver;
1023
1046
  if (resizeObserver) {
1024
1047
  resizeObserver.disconnect();
1025
1048
  this._resizeObserver = null;
1026
1049
  } else {
1027
- window.removeEventListener("resize", this._onResize);
1050
+ window.removeEventListener("resize", function () {
1051
+ return _this._onResize([]);
1052
+ });
1028
1053
  }
1029
1054
  this._enabled = false;
1030
1055
  return this;
@@ -2915,9 +2940,8 @@ var SnapControl = /*#__PURE__*/function (_super) {
2915
2940
  if (snapDelta >= snapThreshold && snapDelta > 0) {
2916
2941
  // Move to anchor at position
2917
2942
  targetAnchor = this._findSnappedAnchor(position, anchorAtCamera);
2918
- } else if (absPosDelta >= flicking.threshold && absPosDelta > 0 && anchorAtCamera === activeAnchor) {
2943
+ } else if (absPosDelta >= flicking.threshold && absPosDelta > 0) {
2919
2944
  // Move to the adjacent panel
2920
- // console.log("moveToPosition anchorAtCamera activeAnchor absPosDelta", camera.position, anchorAtCamera, activeAnchor, absPosDelta, snapThreshold)
2921
2945
  targetAnchor = this._findAdjacentAnchor(position, posDelta, anchorAtCamera);
2922
2946
  } else {
2923
2947
  // Fallback to nearest panel from current camera
@@ -2992,7 +3016,6 @@ var SnapControl = /*#__PURE__*/function (_super) {
2992
3016
  return anchorIncludePosition;
2993
3017
  }
2994
3018
  }
2995
- // console.log("_findAdjacentAnchor", position, posDelta, anchorAtCamera)
2996
3019
  var adjacentAnchor = (_a = posDelta > 0 ? camera.getNextAnchor(anchorAtCamera) : camera.getPrevAnchor(anchorAtCamera)) !== null && _a !== void 0 ? _a : anchorAtCamera;
2997
3020
  return adjacentAnchor;
2998
3021
  };
@@ -6113,6 +6136,7 @@ var Flicking = /*#__PURE__*/function (_super) {
6113
6136
  // Internal states
6114
6137
  _this._initialized = false;
6115
6138
  _this._plugins = [];
6139
+ _this._isResizing = false;
6116
6140
  // Bind options
6117
6141
  _this._align = align;
6118
6142
  _this._defaultIndex = defaultIndex;
@@ -7652,6 +7676,8 @@ var Flicking = /*#__PURE__*/function (_super) {
7652
7676
  return __generator(this, function (_a) {
7653
7677
  switch (_a.label) {
7654
7678
  case 0:
7679
+ if (this._isResizing) return [2 /*return*/];
7680
+ this._isResizing = true;
7655
7681
  viewport = this._viewport;
7656
7682
  renderer = this._renderer;
7657
7683
  camera = this._camera;
@@ -7704,6 +7730,7 @@ var Flicking = /*#__PURE__*/function (_super) {
7704
7730
  sizeChanged: sizeChanged,
7705
7731
  element: viewport.element
7706
7732
  }));
7733
+ this._isResizing = false;
7707
7734
  return [2 /*return*/];
7708
7735
  }
7709
7736
  });
@@ -7831,7 +7858,7 @@ var Flicking = /*#__PURE__*/function (_super) {
7831
7858
  __proto._createCamera = function () {
7832
7859
  if (this._circular && this._bound) {
7833
7860
  // eslint-disable-next-line no-console
7834
- console.warn("\"circular\" and \"bound\" option cannot be used together, ignoring bound.");
7861
+ console.warn('"circular" and "bound" option cannot be used together, ignoring bound.');
7835
7862
  }
7836
7863
  return new Camera(this, {
7837
7864
  align: this._align
@@ -7841,7 +7868,7 @@ var Flicking = /*#__PURE__*/function (_super) {
7841
7868
  var externalRenderer = this._externalRenderer;
7842
7869
  if (this._virtual && this._panelsPerView <= 0) {
7843
7870
  // eslint-disable-next-line no-console
7844
- console.warn("\"virtual\" and \"panelsPerView\" option should be used together, ignoring virtual.");
7871
+ console.warn('"virtual" and "panelsPerView" option should be used together, ignoring virtual.');
7845
7872
  }
7846
7873
  return externalRenderer ? externalRenderer : this._renderExternal ? this._createExternalRenderer() : this._createVanillaRenderer();
7847
7874
  };
@@ -7923,7 +7950,7 @@ var Flicking = /*#__PURE__*/function (_super) {
7923
7950
  * Flicking.VERSION; // ex) 4.0.0
7924
7951
  * ```
7925
7952
  */
7926
- Flicking.VERSION = "4.12.1-beta.2";
7953
+ Flicking.VERSION = "4.12.2-beta.0";
7927
7954
  return Flicking;
7928
7955
  }(Component);
7929
7956