@egjs/flicking 4.12.0-beta.7 → 4.12.0-beta.9
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.
- package/declaration/CrossFlicking.d.ts +44 -4
- package/declaration/camera/Camera.d.ts +1 -0
- package/dist/flicking.cjs.js +233 -198
- package/dist/flicking.cjs.js.map +1 -1
- package/dist/flicking.esm.js +232 -199
- package/dist/flicking.esm.js.map +1 -1
- package/dist/flicking.js +232 -198
- package/dist/flicking.js.map +1 -1
- package/dist/flicking.min.js +2 -2
- package/dist/flicking.min.js.map +1 -1
- package/dist/flicking.pkgd.js +234 -200
- package/dist/flicking.pkgd.js.map +1 -1
- package/dist/flicking.pkgd.min.js +2 -2
- package/dist/flicking.pkgd.min.js.map +1 -1
- package/package.json +2 -2
- package/sass/flicking.sass +13 -0
- package/src/CrossFlicking.ts +261 -228
- package/src/camera/Camera.ts +24 -4
- package/dist/flicking-inline.css +0 -45
- package/dist/flicking-inline.min.css +0 -1
- package/dist/flicking.css +0 -44
- package/dist/flicking.min.css +0 -1
package/dist/flicking.esm.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.0-beta.
|
|
7
|
+
version: 4.12.0-beta.9
|
|
8
8
|
*/
|
|
9
9
|
import Component, { ComponentEvent } from '@egjs/component';
|
|
10
10
|
import Axes, { PanInput } from '@egjs/axes';
|
|
@@ -3744,6 +3744,7 @@ var Camera = /*#__PURE__*/function () {
|
|
|
3744
3744
|
var _this = this;
|
|
3745
3745
|
var _b = (_a === void 0 ? {} : _a).align,
|
|
3746
3746
|
align = _b === void 0 ? ALIGN.CENTER : _b;
|
|
3747
|
+
this._lookedOffset = 0;
|
|
3747
3748
|
this._checkTranslateSupport = function () {
|
|
3748
3749
|
var e_1, _a;
|
|
3749
3750
|
var transforms = ["webkitTransform", "msTransform", "MozTransform", "OTransform", "transform"];
|
|
@@ -4103,6 +4104,8 @@ var Camera = /*#__PURE__*/function () {
|
|
|
4103
4104
|
*/
|
|
4104
4105
|
__proto.lookAt = function (pos) {
|
|
4105
4106
|
var _this = this;
|
|
4107
|
+
var prevOffset = this._offset;
|
|
4108
|
+
var isChangedOffset = this._lookedOffset !== prevOffset;
|
|
4106
4109
|
var flicking = getFlickingAttached(this._flicking);
|
|
4107
4110
|
var prevPos = this._position;
|
|
4108
4111
|
this._position = pos;
|
|
@@ -4113,7 +4116,12 @@ var Camera = /*#__PURE__*/function () {
|
|
|
4113
4116
|
if (toggled) {
|
|
4114
4117
|
void flicking.renderer.render().then(function () {
|
|
4115
4118
|
_this.updateOffset();
|
|
4119
|
+
_this._lookedOffset = _this._offset;
|
|
4116
4120
|
});
|
|
4121
|
+
} else if (isChangedOffset) {
|
|
4122
|
+
// sync offset for renderOnlyVisible on resize
|
|
4123
|
+
this.updateOffset();
|
|
4124
|
+
this._lookedOffset = this._offset;
|
|
4117
4125
|
} else {
|
|
4118
4126
|
this.applyTransform();
|
|
4119
4127
|
}
|
|
@@ -4288,8 +4296,8 @@ var Camera = /*#__PURE__*/function () {
|
|
|
4288
4296
|
return this;
|
|
4289
4297
|
};
|
|
4290
4298
|
/**
|
|
4291
|
-
* Update Viewport's height to
|
|
4292
|
-
* @ko 현재
|
|
4299
|
+
* Update Viewport's height to visible panel's max height
|
|
4300
|
+
* @ko 현재 활성화된 패널과 보이는 패널의 최대 높이와 동일하도록 뷰포트의 높이를 업데이트합니다
|
|
4293
4301
|
* @throws {FlickingError}
|
|
4294
4302
|
* {@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} When {@link Camera#init init} is not called before
|
|
4295
4303
|
* <ko>{@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} {@link Camera#init init}이 이전에 호출되지 않은 경우</ko>
|
|
@@ -4299,9 +4307,17 @@ var Camera = /*#__PURE__*/function () {
|
|
|
4299
4307
|
__proto.updateAdaptiveHeight = function () {
|
|
4300
4308
|
var flicking = getFlickingAttached(this._flicking);
|
|
4301
4309
|
var activePanel = flicking.control.activePanel;
|
|
4302
|
-
|
|
4310
|
+
var visiblePanels = flicking.visiblePanels;
|
|
4311
|
+
var selectedPanels = __spread(visiblePanels);
|
|
4312
|
+
if (activePanel) {
|
|
4313
|
+
selectedPanels.push(activePanel);
|
|
4314
|
+
}
|
|
4315
|
+
if (!flicking.horizontal || !flicking.adaptive || !selectedPanels.length) return;
|
|
4316
|
+
var maxHeight = Math.max.apply(Math, __spread(selectedPanels.map(function (panel) {
|
|
4317
|
+
return panel.height;
|
|
4318
|
+
})));
|
|
4303
4319
|
flicking.viewport.setSize({
|
|
4304
|
-
height:
|
|
4320
|
+
height: maxHeight
|
|
4305
4321
|
});
|
|
4306
4322
|
};
|
|
4307
4323
|
/**
|
|
@@ -4372,6 +4388,7 @@ var Camera = /*#__PURE__*/function () {
|
|
|
4372
4388
|
};
|
|
4373
4389
|
__proto._resetInternalValues = function () {
|
|
4374
4390
|
this._position = 0;
|
|
4391
|
+
this._lookedOffset = 0;
|
|
4375
4392
|
this._alignPos = 0;
|
|
4376
4393
|
this._offset = 0;
|
|
4377
4394
|
this._circularOffset = 0;
|
|
@@ -7893,119 +7910,143 @@ var Flicking = /*#__PURE__*/function (_super) {
|
|
|
7893
7910
|
* Flicking.VERSION; // ex) 4.0.0
|
|
7894
7911
|
* ```
|
|
7895
7912
|
*/
|
|
7896
|
-
Flicking.VERSION = "4.12.0-beta.
|
|
7913
|
+
Flicking.VERSION = "4.12.0-beta.9";
|
|
7897
7914
|
return Flicking;
|
|
7898
7915
|
}(Component);
|
|
7899
7916
|
|
|
7900
|
-
|
|
7901
|
-
|
|
7902
|
-
|
|
7903
|
-
|
|
7904
|
-
|
|
7905
|
-
|
|
7906
|
-
|
|
7907
|
-
|
|
7908
|
-
|
|
7909
|
-
*/
|
|
7917
|
+
var SIDE_EVENTS = {
|
|
7918
|
+
HOLD_START: "sideHoldStart",
|
|
7919
|
+
HOLD_END: "sideHoldEnd",
|
|
7920
|
+
MOVE_START: "sideMoveStart",
|
|
7921
|
+
MOVE: "sideMove",
|
|
7922
|
+
MOVE_END: "sideMoveEnd",
|
|
7923
|
+
WILL_CHANGE: "sideWillChange",
|
|
7924
|
+
CHANGED: "sideChanged"
|
|
7925
|
+
};
|
|
7910
7926
|
var CrossFlicking = /*#__PURE__*/function (_super) {
|
|
7911
7927
|
__extends(CrossFlicking, _super);
|
|
7912
|
-
// Options Setter
|
|
7913
|
-
// public set align(val: FlickingOptions["align"]) {
|
|
7914
|
-
// this._align = val;
|
|
7915
|
-
// }
|
|
7916
7928
|
function CrossFlicking(root, options) {
|
|
7917
|
-
if (options === void 0) {
|
|
7918
|
-
options = {};
|
|
7919
|
-
}
|
|
7920
7929
|
var _this = _super.call(this, root, options) || this;
|
|
7930
|
+
_this._syncToCategory = function (index, outerIndex) {
|
|
7931
|
+
if (_this._disableIndexSync) {
|
|
7932
|
+
return;
|
|
7933
|
+
}
|
|
7934
|
+
_this.stopAnimation();
|
|
7935
|
+
_this._sideFlicking.forEach(function (child, i) {
|
|
7936
|
+
var _a = _this._sideState[i],
|
|
7937
|
+
start = _a.start,
|
|
7938
|
+
end = _a.end;
|
|
7939
|
+
if (start <= index && end >= index && outerIndex !== i) {
|
|
7940
|
+
child.stopAnimation();
|
|
7941
|
+
void child.moveTo(index, 0);
|
|
7942
|
+
void _this.moveTo(i, 0);
|
|
7943
|
+
}
|
|
7944
|
+
});
|
|
7945
|
+
};
|
|
7946
|
+
_this._setDraggable = function (direction, draggable) {
|
|
7947
|
+
if (!_this._disableSlideOnHold) {
|
|
7948
|
+
return;
|
|
7949
|
+
}
|
|
7950
|
+
var threshold = draggable ? _this.dragThreshold && _this.dragThreshold >= 10 ? _this.dragThreshold : 10 : Infinity;
|
|
7951
|
+
if (direction === MOVE_DIRECTION.HORIZONTAL === _this.horizontal) {
|
|
7952
|
+
_this.dragThreshold = threshold;
|
|
7953
|
+
} else if (direction === MOVE_DIRECTION.VERTICAL === _this.horizontal) {
|
|
7954
|
+
_this._sideFlicking.forEach(function (child) {
|
|
7955
|
+
child.dragThreshold = threshold;
|
|
7956
|
+
});
|
|
7957
|
+
}
|
|
7958
|
+
};
|
|
7959
|
+
_this._setPreviousSideIndex = function () {
|
|
7960
|
+
_this._sideFlicking.forEach(function (child, i) {
|
|
7961
|
+
var _a = _this._sideState[i],
|
|
7962
|
+
start = _a.start,
|
|
7963
|
+
end = _a.end;
|
|
7964
|
+
if (_this._preserveIndex) {
|
|
7965
|
+
if (_this._nextIndex !== i) {
|
|
7966
|
+
if (child.index < start) {
|
|
7967
|
+
child.stopAnimation();
|
|
7968
|
+
void child.moveTo(start, 0);
|
|
7969
|
+
} else if (child.index > end) {
|
|
7970
|
+
child.stopAnimation();
|
|
7971
|
+
void child.moveTo(end, 0);
|
|
7972
|
+
}
|
|
7973
|
+
}
|
|
7974
|
+
} else {
|
|
7975
|
+
if (_this._nextIndex !== i) {
|
|
7976
|
+
void child.moveTo(start, 0);
|
|
7977
|
+
}
|
|
7978
|
+
}
|
|
7979
|
+
});
|
|
7980
|
+
};
|
|
7921
7981
|
_this._onHorizontalHoldStart = function () {
|
|
7922
|
-
_this.
|
|
7982
|
+
_this._setDraggable(MOVE_DIRECTION.HORIZONTAL, true);
|
|
7923
7983
|
_this._moveDirection = null;
|
|
7924
7984
|
};
|
|
7925
7985
|
_this._onHorizontalMove = function (e) {
|
|
7926
7986
|
if (e.isTrusted && !_this._moveDirection) {
|
|
7927
|
-
_this.
|
|
7928
|
-
child.dragThreshold = Infinity;
|
|
7929
|
-
});
|
|
7987
|
+
_this._setDraggable(MOVE_DIRECTION.VERTICAL, false);
|
|
7930
7988
|
_this._moveDirection = MOVE_DIRECTION.HORIZONTAL;
|
|
7931
7989
|
}
|
|
7932
7990
|
};
|
|
7933
7991
|
_this._onHorizontalMoveEnd = function (e) {
|
|
7934
7992
|
var visiblePanels = _this.visiblePanels;
|
|
7935
|
-
_this._sideFlicking.forEach(function (child) {
|
|
7936
|
-
child.dragThreshold = 10;
|
|
7937
|
-
});
|
|
7938
|
-
_this._moveDirection = null;
|
|
7939
7993
|
if (visiblePanels.length > 1) {
|
|
7940
7994
|
_this._nextIndex = e.direction === "NEXT" ? visiblePanels[1].index : visiblePanels[0].index;
|
|
7941
7995
|
} else {
|
|
7942
7996
|
_this._nextIndex = visiblePanels[0].index;
|
|
7943
7997
|
}
|
|
7944
|
-
|
|
7945
|
-
_this.
|
|
7946
|
-
|
|
7947
|
-
|
|
7948
|
-
|
|
7949
|
-
end = _a.end;
|
|
7950
|
-
if (child.index < start) {
|
|
7951
|
-
child.stopAnimation();
|
|
7952
|
-
void child.moveTo(start, 0);
|
|
7953
|
-
} else if (child.index > end) {
|
|
7954
|
-
child.stopAnimation();
|
|
7955
|
-
void child.moveTo(end, 0);
|
|
7956
|
-
}
|
|
7957
|
-
}
|
|
7998
|
+
_this._setDraggable(MOVE_DIRECTION.VERTICAL, true);
|
|
7999
|
+
_this._moveDirection = null;
|
|
8000
|
+
// _syncToCategory에서 완전히 가로 이동이 이루어지기 전에 세로 방향 index가 변하는 경우가 있어 requestAnimationFrame 처리
|
|
8001
|
+
requestAnimationFrame(function () {
|
|
8002
|
+
return _this._setPreviousSideIndex();
|
|
7958
8003
|
});
|
|
7959
8004
|
if (e.isTrusted) {
|
|
7960
8005
|
_this._syncToCategory(_this._sideFlicking[_this._nextIndex].index, _this._nextIndex);
|
|
7961
8006
|
}
|
|
7962
8007
|
};
|
|
7963
8008
|
_this._onSideHoldStart = function () {
|
|
7964
|
-
_this.
|
|
7965
|
-
child.dragThreshold = 10;
|
|
7966
|
-
});
|
|
8009
|
+
_this._setDraggable(MOVE_DIRECTION.VERTICAL, true);
|
|
7967
8010
|
_this._moveDirection = null;
|
|
7968
8011
|
};
|
|
7969
8012
|
_this._onSideMove = function (e) {
|
|
7970
8013
|
if (e.isTrusted && !_this._moveDirection) {
|
|
7971
|
-
_this.
|
|
8014
|
+
_this._setDraggable(MOVE_DIRECTION.HORIZONTAL, false);
|
|
7972
8015
|
_this._moveDirection = MOVE_DIRECTION.VERTICAL;
|
|
7973
8016
|
}
|
|
7974
8017
|
};
|
|
7975
8018
|
_this._onSideMoveEnd = function () {
|
|
7976
|
-
_this.
|
|
8019
|
+
_this._setDraggable(MOVE_DIRECTION.HORIZONTAL, true);
|
|
7977
8020
|
_this._moveDirection = null;
|
|
7978
8021
|
};
|
|
7979
8022
|
_this._onSideChanged = function (e) {
|
|
7980
|
-
// this.visiblePanels.length
|
|
7981
|
-
//
|
|
8023
|
+
// If this.visiblePanels.length >= 2, it means that horizontal flicking is being dragged.
|
|
8024
|
+
// In this case, syncToCategory in _onHorizontalMoveEnd will fire after moving finishes, so we don't fire it here.
|
|
7982
8025
|
if (_this.visiblePanels.length < 2 && _this._sideFlicking[_this.index] === e.currentTarget) {
|
|
7983
8026
|
_this._syncToCategory(e.index, _this.index);
|
|
7984
8027
|
}
|
|
7985
8028
|
};
|
|
8029
|
+
var _a = options.sideOptions,
|
|
8030
|
+
sideOptions = _a === void 0 ? {} : _a,
|
|
8031
|
+
_b = options.preserveIndex,
|
|
8032
|
+
preserveIndex = _b === void 0 ? true : _b,
|
|
8033
|
+
_c = options.disableSlideOnHold,
|
|
8034
|
+
disableSlideOnHold = _c === void 0 ? true : _c,
|
|
8035
|
+
_d = options.disableIndexSync,
|
|
8036
|
+
disableIndexSync = _d === void 0 ? false : _d;
|
|
7986
8037
|
// Internal states
|
|
7987
|
-
_this._sideState = _this._createSideState();
|
|
7988
8038
|
_this._moveDirection = null;
|
|
7989
8039
|
_this._nextIndex = 0;
|
|
7990
8040
|
// Bind options
|
|
7991
|
-
_this._sideOptions =
|
|
7992
|
-
|
|
7993
|
-
_this.
|
|
8041
|
+
_this._sideOptions = sideOptions;
|
|
8042
|
+
_this._preserveIndex = preserveIndex;
|
|
8043
|
+
_this._disableSlideOnHold = disableSlideOnHold;
|
|
8044
|
+
_this._disableIndexSync = disableIndexSync;
|
|
7994
8045
|
return _this;
|
|
7995
8046
|
}
|
|
7996
8047
|
var __proto = CrossFlicking.prototype;
|
|
7997
8048
|
Object.defineProperty(__proto, "sideFlicking", {
|
|
7998
8049
|
// Components
|
|
7999
|
-
/**
|
|
8000
|
-
* {@link Control} instance of the Flicking
|
|
8001
|
-
* @ko 현재 Flicking에 활성화된 {@link Control} 인스턴스
|
|
8002
|
-
* @type {Control}
|
|
8003
|
-
* @default SnapControl
|
|
8004
|
-
* @readonly
|
|
8005
|
-
* @see Control
|
|
8006
|
-
* @see SnapControl
|
|
8007
|
-
* @see FreeControl
|
|
8008
|
-
*/
|
|
8009
8050
|
get: function () {
|
|
8010
8051
|
return this._sideFlicking;
|
|
8011
8052
|
},
|
|
@@ -8013,16 +8054,6 @@ var CrossFlicking = /*#__PURE__*/function (_super) {
|
|
|
8013
8054
|
configurable: true
|
|
8014
8055
|
});
|
|
8015
8056
|
Object.defineProperty(__proto, "sideState", {
|
|
8016
|
-
// Internal States
|
|
8017
|
-
/**
|
|
8018
|
-
* Whether Flicking's {@link Flicking#init init()} is called.
|
|
8019
|
-
* This is `true` when {@link Flicking#init init()} is called, and is `false` after calling {@link Flicking#destroy destroy()}.
|
|
8020
|
-
* @ko Flicking의 {@link Flicking#init init()}이 호출되었는지를 나타내는 멤버 변수.
|
|
8021
|
-
* 이 값은 {@link Flicking#init init()}이 호출되었으면 `true`로 변하고, {@link Flicking#destroy destroy()}호출 이후에 다시 `false`로 변경됩니다.
|
|
8022
|
-
* @type {boolean}
|
|
8023
|
-
* @default false
|
|
8024
|
-
* @readonly
|
|
8025
|
-
*/
|
|
8026
8057
|
get: function () {
|
|
8027
8058
|
return this._sideState;
|
|
8028
8059
|
},
|
|
@@ -8031,42 +8062,58 @@ var CrossFlicking = /*#__PURE__*/function (_super) {
|
|
|
8031
8062
|
});
|
|
8032
8063
|
Object.defineProperty(__proto, "sideOptions", {
|
|
8033
8064
|
// Options Getter
|
|
8034
|
-
/**
|
|
8035
|
-
* Change active panel index on mouse/touch hold while animating.
|
|
8036
|
-
* `index` of the `willChange`/`willRestore` event will be used as new index.
|
|
8037
|
-
* @ko 애니메이션 도중 마우스/터치 입력시 현재 활성화된 패널의 인덱스를 변경합니다.
|
|
8038
|
-
* `willChange`/`willRestore` 이벤트의 `index`값이 새로운 인덱스로 사용될 것입니다.
|
|
8039
|
-
* @type {FlickingOptions}
|
|
8040
|
-
* @default undefined
|
|
8041
|
-
* @see {@link https://naver.github.io/egjs-flicking/Options#changeonhold changeOnHold ( Options )}
|
|
8042
|
-
*/
|
|
8043
8065
|
get: function () {
|
|
8044
8066
|
return this._sideOptions;
|
|
8045
8067
|
},
|
|
8068
|
+
// Options Setter
|
|
8069
|
+
set: function (val) {
|
|
8070
|
+
this._sideOptions = val;
|
|
8071
|
+
},
|
|
8072
|
+
enumerable: false,
|
|
8073
|
+
configurable: true
|
|
8074
|
+
});
|
|
8075
|
+
Object.defineProperty(__proto, "preserveIndex", {
|
|
8076
|
+
get: function () {
|
|
8077
|
+
return this._preserveIndex;
|
|
8078
|
+
},
|
|
8079
|
+
set: function (val) {
|
|
8080
|
+
this._preserveIndex = val;
|
|
8081
|
+
},
|
|
8082
|
+
enumerable: false,
|
|
8083
|
+
configurable: true
|
|
8084
|
+
});
|
|
8085
|
+
Object.defineProperty(__proto, "disableSlideOnHold", {
|
|
8086
|
+
get: function () {
|
|
8087
|
+
return this._disableSlideOnHold;
|
|
8088
|
+
},
|
|
8089
|
+
set: function (val) {
|
|
8090
|
+
this._disableSlideOnHold = val;
|
|
8091
|
+
},
|
|
8092
|
+
enumerable: false,
|
|
8093
|
+
configurable: true
|
|
8094
|
+
});
|
|
8095
|
+
Object.defineProperty(__proto, "disableIndexSync", {
|
|
8096
|
+
get: function () {
|
|
8097
|
+
return this._disableIndexSync;
|
|
8098
|
+
},
|
|
8099
|
+
set: function (val) {
|
|
8100
|
+
this._disableIndexSync = val;
|
|
8101
|
+
},
|
|
8046
8102
|
enumerable: false,
|
|
8047
8103
|
configurable: true
|
|
8048
8104
|
});
|
|
8049
|
-
/**
|
|
8050
|
-
* Initialize Flicking and move to the default index
|
|
8051
|
-
* This is automatically called on Flicking's constructor when `autoInit` is true(default)
|
|
8052
|
-
* @ko Flicking을 초기화하고, 디폴트 인덱스로 이동합니다
|
|
8053
|
-
* 이 메소드는 `autoInit` 옵션이 true(default)일 경우 Flicking이 생성될 때 자동으로 호출됩니다
|
|
8054
|
-
* @fires Flicking#ready
|
|
8055
|
-
* @return {Promise<void>}
|
|
8056
|
-
*/
|
|
8057
8105
|
__proto.init = function () {
|
|
8058
8106
|
var _this = this;
|
|
8059
8107
|
return _super.prototype.init.call(this).then(function () {
|
|
8060
|
-
|
|
8108
|
+
_this._sideState = _this._createSideState();
|
|
8109
|
+
_this._sideFlicking = _this._createSideFlicking();
|
|
8110
|
+
_this._addComponentEvents();
|
|
8061
8111
|
});
|
|
8062
8112
|
};
|
|
8063
|
-
/**
|
|
8064
|
-
* Destroy Flicking and remove all event handlers
|
|
8065
|
-
* @ko Flicking과 하위 컴포넌트들을 초기 상태로 되돌리고, 부착된 모든 이벤트 핸들러를 제거합니다
|
|
8066
|
-
* @return {void}
|
|
8067
|
-
*/
|
|
8068
8113
|
__proto.destroy = function () {
|
|
8069
|
-
|
|
8114
|
+
this._sideFlicking.forEach(function (flicking) {
|
|
8115
|
+
flicking.destroy();
|
|
8116
|
+
});
|
|
8070
8117
|
_super.prototype.destroy.call(this);
|
|
8071
8118
|
};
|
|
8072
8119
|
__proto._addComponentEvents = function () {
|
|
@@ -8074,110 +8121,110 @@ var CrossFlicking = /*#__PURE__*/function (_super) {
|
|
|
8074
8121
|
this.on(EVENTS.HOLD_START, this._onHorizontalHoldStart);
|
|
8075
8122
|
this.on(EVENTS.MOVE, this._onHorizontalMove);
|
|
8076
8123
|
this.on(EVENTS.MOVE_END, this._onHorizontalMoveEnd);
|
|
8077
|
-
this._sideFlicking.forEach(function (flicking) {
|
|
8124
|
+
this._sideFlicking.forEach(function (flicking, mainIndex) {
|
|
8078
8125
|
flicking.on(EVENTS.HOLD_START, _this._onSideHoldStart);
|
|
8079
8126
|
flicking.on(EVENTS.MOVE, _this._onSideMove);
|
|
8080
8127
|
flicking.on(EVENTS.MOVE_END, _this._onSideMoveEnd);
|
|
8081
8128
|
flicking.on(EVENTS.CHANGED, _this._onSideChanged);
|
|
8129
|
+
Object.keys(SIDE_EVENTS).forEach(function (name) {
|
|
8130
|
+
flicking.on(EVENTS[name], function (event) {
|
|
8131
|
+
_this.trigger(new ComponentEvent(SIDE_EVENTS[name], __assign({
|
|
8132
|
+
mainIndex: mainIndex
|
|
8133
|
+
}, event)));
|
|
8134
|
+
});
|
|
8135
|
+
});
|
|
8082
8136
|
});
|
|
8083
8137
|
};
|
|
8084
8138
|
__proto._createSideState = function () {
|
|
8085
|
-
var _this = this;
|
|
8086
|
-
// data-index로 분류하기 전에 임시로 모든 children에 대해 side flicking으로 해보자.
|
|
8087
|
-
// panels에 data-attributes가 붙어있을 때와 안 붙어있을 때를 다르게 처리
|
|
8088
|
-
// 붙어있다면 가상의 viewport들을 index 갯수만큼 만들어줘야 한다
|
|
8089
8139
|
var viewportEl = this.element;
|
|
8090
8140
|
var cameraEl = this.camera.element;
|
|
8091
8141
|
var panels = toArray(cameraEl.children);
|
|
8092
|
-
var sideState = [];
|
|
8093
|
-
var sidePanels = "";
|
|
8094
|
-
// check data attribute exists
|
|
8095
|
-
var groupKeys = [];
|
|
8096
|
-
var groupPanels = {};
|
|
8097
|
-
var sideCamera = document.createElement("div");
|
|
8098
|
-
sideCamera.classList.add(CLASS.CAMERA);
|
|
8099
8142
|
var isCrossStructure = getDataAttributes(viewportEl, "data-cross-").structure;
|
|
8143
|
+
var sideState = [];
|
|
8100
8144
|
if (!isCrossStructure) {
|
|
8101
|
-
|
|
8102
|
-
|
|
8103
|
-
var groupKey = getDataAttributes(panel, "data-cross-").groupkey;
|
|
8104
|
-
if (groupKey && !includes(groupKeys, groupKey)) {
|
|
8105
|
-
groupKeys.push(groupKey);
|
|
8106
|
-
groupPanels[groupKey] = [panel];
|
|
8107
|
-
} else if (groupKey) {
|
|
8108
|
-
groupPanels[groupKey].push(panel);
|
|
8109
|
-
}
|
|
8110
|
-
});
|
|
8145
|
+
var groupPanels = this._getGroupFromAttribute(panels);
|
|
8146
|
+
var groupKeys = Object.keys(groupPanels);
|
|
8111
8147
|
if (groupKeys.length) {
|
|
8112
|
-
sideState =
|
|
8113
|
-
var start = state.length ? +state[state.length - 1].end + 1 : 0;
|
|
8114
|
-
var element = groupPanels[key].reduce(function (el, panel) {
|
|
8115
|
-
sidePanels += panel.outerHTML;
|
|
8116
|
-
el.innerHTML += panel.outerHTML;
|
|
8117
|
-
return el;
|
|
8118
|
-
}, document.createElement("div"));
|
|
8119
|
-
return __spread(state, [{
|
|
8120
|
-
key: key,
|
|
8121
|
-
start: start,
|
|
8122
|
-
end: start + groupPanels[key].length - 1,
|
|
8123
|
-
element: element
|
|
8124
|
-
}]);
|
|
8125
|
-
}, []);
|
|
8148
|
+
sideState = this._getSideStateFromGroup(groupPanels);
|
|
8126
8149
|
this.remove(0, this.panelCount - groupKeys.length);
|
|
8127
|
-
sideState.forEach(function (_, i) {
|
|
8128
|
-
var panel = _this.camera.children[i];
|
|
8129
|
-
Array.from(panel.attributes).forEach(function (attribute) {
|
|
8130
|
-
return panel.removeAttribute(attribute.name);
|
|
8131
|
-
});
|
|
8132
|
-
});
|
|
8133
8150
|
} else {
|
|
8134
|
-
sideState =
|
|
8135
|
-
var start = state.length ? +state[state.length - 1].end + 1 : 0;
|
|
8136
|
-
sidePanels += panel.innerHTML;
|
|
8137
|
-
return __spread(state, [{
|
|
8138
|
-
key: i.toString(),
|
|
8139
|
-
start: start,
|
|
8140
|
-
end: start + panel.children.length - 1,
|
|
8141
|
-
element: panel
|
|
8142
|
-
}]);
|
|
8143
|
-
}, []);
|
|
8151
|
+
sideState = this._getSideStateFromPanels(panels);
|
|
8144
8152
|
}
|
|
8145
|
-
|
|
8146
|
-
sideState.forEach(function (_, i) {
|
|
8147
|
-
var panel = _this.camera.children[i];
|
|
8148
|
-
[CLASS.VIEWPORT, CLASS.VERTICAL].forEach(function (className) {
|
|
8149
|
-
if (!panel.classList.contains(className)) {
|
|
8150
|
-
panel.classList.add(className);
|
|
8151
|
-
}
|
|
8152
|
-
});
|
|
8153
|
-
panel.innerHTML = sideCamera.outerHTML;
|
|
8154
|
-
});
|
|
8153
|
+
this._createCrossStructure(sideState);
|
|
8155
8154
|
} else {
|
|
8156
|
-
|
|
8157
|
-
var groupKey = getDataAttributes(panel, "data-cross-").groupkey;
|
|
8158
|
-
if (groupKey && !includes(groupKeys, groupKey)) {
|
|
8159
|
-
groupKeys.push(groupKey);
|
|
8160
|
-
groupPanels[groupKey] = [panel];
|
|
8161
|
-
} else if (groupKey) {
|
|
8162
|
-
groupPanels[groupKey].push(panel);
|
|
8163
|
-
}
|
|
8164
|
-
});
|
|
8165
|
-
sideState = groupKeys.reduce(function (state, key) {
|
|
8166
|
-
var start = state.length ? +state[state.length - 1].end + 1 : 0;
|
|
8167
|
-
var element = groupPanels[key].reduce(function (el, panel) {
|
|
8168
|
-
el.innerHTML += panel.outerHTML;
|
|
8169
|
-
return el;
|
|
8170
|
-
}, document.createElement("div"));
|
|
8171
|
-
return __spread(state, [{
|
|
8172
|
-
key: key,
|
|
8173
|
-
start: start,
|
|
8174
|
-
end: start + groupPanels[key].length - 1,
|
|
8175
|
-
element: element
|
|
8176
|
-
}]);
|
|
8177
|
-
}, []);
|
|
8155
|
+
sideState = this._getSideStateFromCrossStructure(panels);
|
|
8178
8156
|
}
|
|
8157
|
+
void this.resize();
|
|
8179
8158
|
return sideState;
|
|
8180
8159
|
};
|
|
8160
|
+
__proto._createCrossStructure = function (sideState) {
|
|
8161
|
+
var _this = this;
|
|
8162
|
+
var sideCamera = document.createElement("div");
|
|
8163
|
+
var sidePanels = "";
|
|
8164
|
+
sideCamera.classList.add(CLASS.CAMERA);
|
|
8165
|
+
sideState.forEach(function (state, i) {
|
|
8166
|
+
var panel = _this.camera.children[i];
|
|
8167
|
+
sidePanels += state.element.innerHTML;
|
|
8168
|
+
Array.from(panel.attributes).forEach(function (attribute) {
|
|
8169
|
+
return panel.removeAttribute(attribute.name);
|
|
8170
|
+
});
|
|
8171
|
+
});
|
|
8172
|
+
sideCamera.innerHTML = sidePanels;
|
|
8173
|
+
sideState.forEach(function (_, i) {
|
|
8174
|
+
var panel = _this.camera.children[i];
|
|
8175
|
+
[CLASS.VIEWPORT, CLASS.VERTICAL].forEach(function (className) {
|
|
8176
|
+
if (!panel.classList.contains(className)) {
|
|
8177
|
+
panel.classList.add(className);
|
|
8178
|
+
}
|
|
8179
|
+
});
|
|
8180
|
+
panel.innerHTML = sideCamera.outerHTML;
|
|
8181
|
+
});
|
|
8182
|
+
this.element.setAttribute("data-cross-structure", "true");
|
|
8183
|
+
};
|
|
8184
|
+
__proto._getGroupFromAttribute = function (panels) {
|
|
8185
|
+
var groupKeys = [];
|
|
8186
|
+
var groupPanels = {};
|
|
8187
|
+
panels.forEach(function (panel) {
|
|
8188
|
+
var groupKey = getDataAttributes(panel, "data-cross-").groupkey;
|
|
8189
|
+
if (groupKey && !includes(groupKeys, groupKey)) {
|
|
8190
|
+
groupKeys.push(groupKey);
|
|
8191
|
+
groupPanels[groupKey] = [panel];
|
|
8192
|
+
} else if (groupKey) {
|
|
8193
|
+
groupPanels[groupKey].push(panel);
|
|
8194
|
+
}
|
|
8195
|
+
});
|
|
8196
|
+
return groupPanels;
|
|
8197
|
+
};
|
|
8198
|
+
__proto._getSideStateFromGroup = function (groupPanels) {
|
|
8199
|
+
return Object.keys(groupPanels).reduce(function (state, key) {
|
|
8200
|
+
var start = state.length ? +state[state.length - 1].end + 1 : 0;
|
|
8201
|
+
var element = groupPanels[key].reduce(function (el, panel) {
|
|
8202
|
+
el.innerHTML += panel.outerHTML;
|
|
8203
|
+
return el;
|
|
8204
|
+
}, document.createElement("div"));
|
|
8205
|
+
return __spread(state, [{
|
|
8206
|
+
key: key,
|
|
8207
|
+
start: start,
|
|
8208
|
+
end: start + groupPanels[key].length - 1,
|
|
8209
|
+
element: element
|
|
8210
|
+
}]);
|
|
8211
|
+
}, []);
|
|
8212
|
+
};
|
|
8213
|
+
__proto._getSideStateFromPanels = function (panels) {
|
|
8214
|
+
return panels.reduce(function (state, panel, i) {
|
|
8215
|
+
var start = state.length ? +state[state.length - 1].end + 1 : 0;
|
|
8216
|
+
return __spread(state, [{
|
|
8217
|
+
key: i.toString(),
|
|
8218
|
+
start: start,
|
|
8219
|
+
end: start + panel.children.length - 1,
|
|
8220
|
+
element: panel
|
|
8221
|
+
}]);
|
|
8222
|
+
}, []);
|
|
8223
|
+
};
|
|
8224
|
+
__proto._getSideStateFromCrossStructure = function (panels) {
|
|
8225
|
+
var groupPanels = this._getGroupFromAttribute(panels);
|
|
8226
|
+
return this._getSideStateFromGroup(groupPanels);
|
|
8227
|
+
};
|
|
8181
8228
|
__proto._createSideFlicking = function () {
|
|
8182
8229
|
var _this = this;
|
|
8183
8230
|
return this.sideState.map(function (state, i) {
|
|
@@ -8188,20 +8235,6 @@ var CrossFlicking = /*#__PURE__*/function (_super) {
|
|
|
8188
8235
|
}));
|
|
8189
8236
|
});
|
|
8190
8237
|
};
|
|
8191
|
-
__proto._syncToCategory = function (index, outerIndex) {
|
|
8192
|
-
var _this = this;
|
|
8193
|
-
this.stopAnimation();
|
|
8194
|
-
this._sideFlicking.forEach(function (child, i) {
|
|
8195
|
-
var _a = _this._sideState[i],
|
|
8196
|
-
start = _a.start,
|
|
8197
|
-
end = _a.end;
|
|
8198
|
-
if (start <= index && end >= index && outerIndex !== i) {
|
|
8199
|
-
child.stopAnimation();
|
|
8200
|
-
void child.moveTo(index, 0);
|
|
8201
|
-
void _this.moveTo(i, 0);
|
|
8202
|
-
}
|
|
8203
|
-
});
|
|
8204
|
-
};
|
|
8205
8238
|
return CrossFlicking;
|
|
8206
8239
|
}(Flicking);
|
|
8207
8240
|
|
|
@@ -8419,5 +8452,5 @@ var parseAlign = function (alignVal) {
|
|
|
8419
8452
|
* egjs projects are licensed under the MIT license
|
|
8420
8453
|
*/
|
|
8421
8454
|
|
|
8422
|
-
export { ALIGN, AnchorPoint, AnimatingState, AxesController, BoundCameraMode, CIRCULAR_FALLBACK, CLASS, Camera, CircularCameraMode, Control, CrossFlicking, DIRECTION, DisabledState, DraggingState, CODE as ERROR_CODE, EVENTS, ExternalRenderer, FlickingError, FreeControl, HoldingState, IdleState, LinearCameraMode, MOVE_DIRECTION, MOVE_TYPE, NormalRenderingStrategy, ORDER, Panel, Renderer, SnapControl, State, StateMachine, StrictControl, VanillaElementProvider, VanillaRenderer, Viewport, VirtualElementProvider, VirtualManager, VirtualPanel, VirtualRenderingStrategy, camelize, checkExistence, circulateIndex, circulatePosition, clamp, Flicking as default, find, findIndex, findRight, getDataAttributes, getDefaultCameraTransform, getDirection, getElement, getElementSize, getFlickingAttached, getMinusCompensatedIndex, getProgress, getRenderingPanels, getStyle, includes, isBetween, isString, merge, parseAlign$1 as parseAlign, parseArithmeticExpression, parseArithmeticSize, parseBounce, parseCSSSizeValue, parseElement, parsePanelAlign, range, setPrototypeOf, setSize, sync, toArray, withFlickingMethods };
|
|
8455
|
+
export { ALIGN, AnchorPoint, AnimatingState, AxesController, BoundCameraMode, CIRCULAR_FALLBACK, CLASS, Camera, CircularCameraMode, Control, CrossFlicking, DIRECTION, DisabledState, DraggingState, CODE as ERROR_CODE, EVENTS, ExternalRenderer, FlickingError, FreeControl, HoldingState, IdleState, LinearCameraMode, MOVE_DIRECTION, MOVE_TYPE, NormalRenderingStrategy, ORDER, Panel, Renderer, SIDE_EVENTS, SnapControl, State, StateMachine, StrictControl, VanillaElementProvider, VanillaRenderer, Viewport, VirtualElementProvider, VirtualManager, VirtualPanel, VirtualRenderingStrategy, camelize, checkExistence, circulateIndex, circulatePosition, clamp, Flicking as default, find, findIndex, findRight, getDataAttributes, getDefaultCameraTransform, getDirection, getElement, getElementSize, getFlickingAttached, getMinusCompensatedIndex, getProgress, getRenderingPanels, getStyle, includes, isBetween, isString, merge, parseAlign$1 as parseAlign, parseArithmeticExpression, parseArithmeticSize, parseBounce, parseCSSSizeValue, parseElement, parsePanelAlign, range, setPrototypeOf, setSize, sync, toArray, withFlickingMethods };
|
|
8423
8456
|
//# sourceMappingURL=flicking.esm.js.map
|