@egjs/flicking 4.12.1-beta.1 → 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 (17) hide show
  1. package/debug/example/index.html +82 -0
  2. package/declaration/Flicking.d.ts +3 -2
  3. package/dist/flicking.cjs.js +39 -10
  4. package/dist/flicking.cjs.js.map +1 -1
  5. package/dist/flicking.esm.js +39 -10
  6. package/dist/flicking.esm.js.map +1 -1
  7. package/dist/flicking.js +39 -10
  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 +39 -10
  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 +1 -1
  16. package/src/Flicking.ts +449 -200
  17. 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.1
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;
@@ -6111,6 +6136,7 @@ var Flicking = /*#__PURE__*/function (_super) {
6111
6136
  // Internal states
6112
6137
  _this._initialized = false;
6113
6138
  _this._plugins = [];
6139
+ _this._isResizing = false;
6114
6140
  // Bind options
6115
6141
  _this._align = align;
6116
6142
  _this._defaultIndex = defaultIndex;
@@ -7650,6 +7676,8 @@ var Flicking = /*#__PURE__*/function (_super) {
7650
7676
  return __generator(this, function (_a) {
7651
7677
  switch (_a.label) {
7652
7678
  case 0:
7679
+ if (this._isResizing) return [2 /*return*/];
7680
+ this._isResizing = true;
7653
7681
  viewport = this._viewport;
7654
7682
  renderer = this._renderer;
7655
7683
  camera = this._camera;
@@ -7702,6 +7730,7 @@ var Flicking = /*#__PURE__*/function (_super) {
7702
7730
  sizeChanged: sizeChanged,
7703
7731
  element: viewport.element
7704
7732
  }));
7733
+ this._isResizing = false;
7705
7734
  return [2 /*return*/];
7706
7735
  }
7707
7736
  });
@@ -7829,7 +7858,7 @@ var Flicking = /*#__PURE__*/function (_super) {
7829
7858
  __proto._createCamera = function () {
7830
7859
  if (this._circular && this._bound) {
7831
7860
  // eslint-disable-next-line no-console
7832
- 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.');
7833
7862
  }
7834
7863
  return new Camera(this, {
7835
7864
  align: this._align
@@ -7839,7 +7868,7 @@ var Flicking = /*#__PURE__*/function (_super) {
7839
7868
  var externalRenderer = this._externalRenderer;
7840
7869
  if (this._virtual && this._panelsPerView <= 0) {
7841
7870
  // eslint-disable-next-line no-console
7842
- 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.');
7843
7872
  }
7844
7873
  return externalRenderer ? externalRenderer : this._renderExternal ? this._createExternalRenderer() : this._createVanillaRenderer();
7845
7874
  };
@@ -7921,7 +7950,7 @@ var Flicking = /*#__PURE__*/function (_super) {
7921
7950
  * Flicking.VERSION; // ex) 4.0.0
7922
7951
  * ```
7923
7952
  */
7924
- Flicking.VERSION = "4.12.1-beta.1";
7953
+ Flicking.VERSION = "4.12.2-beta.0";
7925
7954
  return Flicking;
7926
7955
  }(Component);
7927
7956