@egjs/flicking 4.12.0-beta.1 → 4.12.0-beta.11
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 +66 -14
- package/declaration/camera/Camera.d.ts +1 -0
- package/declaration/const/external.d.ts +2 -0
- package/declaration/index.d.ts +2 -1
- package/declaration/utils.d.ts +2 -0
- package/dist/flicking.cjs.js +327 -122
- package/dist/flicking.cjs.js.map +1 -1
- package/dist/flicking.css +5 -5
- package/dist/flicking.esm.js +321 -122
- package/dist/flicking.esm.js.map +1 -1
- package/dist/flicking.js +324 -122
- 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 +1091 -882
- 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 +4 -3
- package/sass/flicking.sass +13 -0
- package/src/CrossFlicking.ts +336 -143
- package/src/camera/Camera.ts +24 -4
- package/src/const/external.ts +2 -0
- package/src/control/states/HoldingState.ts +4 -0
- package/src/core/panel/Panel.ts +4 -0
- package/src/index.ts +2 -1
- package/src/utils.ts +21 -0
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.0-beta.
|
|
7
|
+
version: 4.12.0-beta.11
|
|
8
8
|
*/
|
|
9
9
|
'use strict';
|
|
10
10
|
|
|
@@ -387,6 +387,8 @@ var MOVE_TYPE = {
|
|
|
387
387
|
STRICT: "strict"
|
|
388
388
|
};
|
|
389
389
|
var CLASS = {
|
|
390
|
+
VIEWPORT: "flicking-viewport",
|
|
391
|
+
CAMERA: "flicking-camera",
|
|
390
392
|
VERTICAL: "vertical",
|
|
391
393
|
HIDDEN: "flicking-hidden",
|
|
392
394
|
DEFAULT_VIRTUAL: "flicking-panel"
|
|
@@ -738,6 +740,26 @@ var setPrototypeOf = Object.setPrototypeOf || function (obj, proto) {
|
|
|
738
740
|
obj.__proto__ = proto;
|
|
739
741
|
return obj;
|
|
740
742
|
};
|
|
743
|
+
var camelize = function (str) {
|
|
744
|
+
return str.replace(/[\s-_]([a-z])/g, function (all, letter) {
|
|
745
|
+
return letter.toUpperCase();
|
|
746
|
+
});
|
|
747
|
+
};
|
|
748
|
+
var getDataAttributes = function (element, attributePrefix) {
|
|
749
|
+
var dataAttributes = {};
|
|
750
|
+
var attributes = element.attributes;
|
|
751
|
+
var length = attributes.length;
|
|
752
|
+
for (var i = 0; i < length; ++i) {
|
|
753
|
+
var attribute = attributes[i];
|
|
754
|
+
var name_1 = attribute.name,
|
|
755
|
+
value = attribute.value;
|
|
756
|
+
if (name_1.indexOf(attributePrefix) === -1) {
|
|
757
|
+
continue;
|
|
758
|
+
}
|
|
759
|
+
dataAttributes[camelize(name_1.replace(attributePrefix, ""))] = value;
|
|
760
|
+
}
|
|
761
|
+
return dataAttributes;
|
|
762
|
+
};
|
|
741
763
|
|
|
742
764
|
/*
|
|
743
765
|
* Copyright (c) 2015 NAVER Corp.
|
|
@@ -1570,6 +1592,9 @@ var HoldingState = /*#__PURE__*/function (_super) {
|
|
|
1570
1592
|
axesEvent = ctx.axesEvent,
|
|
1571
1593
|
transitTo = ctx.transitTo;
|
|
1572
1594
|
var inputEvent = axesEvent.inputEvent;
|
|
1595
|
+
if (!inputEvent) {
|
|
1596
|
+
return;
|
|
1597
|
+
}
|
|
1573
1598
|
var offset = flicking.horizontal ? inputEvent.offsetX : inputEvent.offsetY;
|
|
1574
1599
|
var moveStartEvent = new Component.ComponentEvent(EVENTS.MOVE_START, {
|
|
1575
1600
|
isTrusted: axesEvent.isTrusted,
|
|
@@ -3724,6 +3749,7 @@ var Camera = /*#__PURE__*/function () {
|
|
|
3724
3749
|
var _this = this;
|
|
3725
3750
|
var _b = (_a === void 0 ? {} : _a).align,
|
|
3726
3751
|
align = _b === void 0 ? ALIGN.CENTER : _b;
|
|
3752
|
+
this._lookedOffset = 0;
|
|
3727
3753
|
this._checkTranslateSupport = function () {
|
|
3728
3754
|
var e_1, _a;
|
|
3729
3755
|
var transforms = ["webkitTransform", "msTransform", "MozTransform", "OTransform", "transform"];
|
|
@@ -4083,6 +4109,8 @@ var Camera = /*#__PURE__*/function () {
|
|
|
4083
4109
|
*/
|
|
4084
4110
|
__proto.lookAt = function (pos) {
|
|
4085
4111
|
var _this = this;
|
|
4112
|
+
var prevOffset = this._offset;
|
|
4113
|
+
var isChangedOffset = this._lookedOffset !== prevOffset;
|
|
4086
4114
|
var flicking = getFlickingAttached(this._flicking);
|
|
4087
4115
|
var prevPos = this._position;
|
|
4088
4116
|
this._position = pos;
|
|
@@ -4093,7 +4121,12 @@ var Camera = /*#__PURE__*/function () {
|
|
|
4093
4121
|
if (toggled) {
|
|
4094
4122
|
void flicking.renderer.render().then(function () {
|
|
4095
4123
|
_this.updateOffset();
|
|
4124
|
+
_this._lookedOffset = _this._offset;
|
|
4096
4125
|
});
|
|
4126
|
+
} else if (isChangedOffset) {
|
|
4127
|
+
// sync offset for renderOnlyVisible on resize
|
|
4128
|
+
this.updateOffset();
|
|
4129
|
+
this._lookedOffset = this._offset;
|
|
4097
4130
|
} else {
|
|
4098
4131
|
this.applyTransform();
|
|
4099
4132
|
}
|
|
@@ -4268,8 +4301,8 @@ var Camera = /*#__PURE__*/function () {
|
|
|
4268
4301
|
return this;
|
|
4269
4302
|
};
|
|
4270
4303
|
/**
|
|
4271
|
-
* Update Viewport's height to
|
|
4272
|
-
* @ko 현재
|
|
4304
|
+
* Update Viewport's height to visible panel's max height
|
|
4305
|
+
* @ko 현재 활성화된 패널과 보이는 패널의 최대 높이와 동일하도록 뷰포트의 높이를 업데이트합니다
|
|
4273
4306
|
* @throws {FlickingError}
|
|
4274
4307
|
* {@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} When {@link Camera#init init} is not called before
|
|
4275
4308
|
* <ko>{@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} {@link Camera#init init}이 이전에 호출되지 않은 경우</ko>
|
|
@@ -4279,9 +4312,17 @@ var Camera = /*#__PURE__*/function () {
|
|
|
4279
4312
|
__proto.updateAdaptiveHeight = function () {
|
|
4280
4313
|
var flicking = getFlickingAttached(this._flicking);
|
|
4281
4314
|
var activePanel = flicking.control.activePanel;
|
|
4282
|
-
|
|
4315
|
+
var visiblePanels = flicking.visiblePanels;
|
|
4316
|
+
var selectedPanels = __spread(visiblePanels);
|
|
4317
|
+
if (activePanel) {
|
|
4318
|
+
selectedPanels.push(activePanel);
|
|
4319
|
+
}
|
|
4320
|
+
if (!flicking.horizontal || !flicking.adaptive || !selectedPanels.length) return;
|
|
4321
|
+
var maxHeight = Math.max.apply(Math, __spread(selectedPanels.map(function (panel) {
|
|
4322
|
+
return panel.height;
|
|
4323
|
+
})));
|
|
4283
4324
|
flicking.viewport.setSize({
|
|
4284
|
-
height:
|
|
4325
|
+
height: maxHeight
|
|
4285
4326
|
});
|
|
4286
4327
|
};
|
|
4287
4328
|
/**
|
|
@@ -4352,6 +4393,7 @@ var Camera = /*#__PURE__*/function () {
|
|
|
4352
4393
|
};
|
|
4353
4394
|
__proto._resetInternalValues = function () {
|
|
4354
4395
|
this._position = 0;
|
|
4396
|
+
this._lookedOffset = 0;
|
|
4355
4397
|
this._alignPos = 0;
|
|
4356
4398
|
this._offset = 0;
|
|
4357
4399
|
this._circularOffset = 0;
|
|
@@ -5412,6 +5454,9 @@ var Panel = /*#__PURE__*/function () {
|
|
|
5412
5454
|
var flicking = this._flicking;
|
|
5413
5455
|
var horizontal = flicking.horizontal,
|
|
5414
5456
|
useFractionalSize = flicking.useFractionalSize;
|
|
5457
|
+
if (!el) {
|
|
5458
|
+
return this;
|
|
5459
|
+
}
|
|
5415
5460
|
if (cached) {
|
|
5416
5461
|
this._size = cached.size;
|
|
5417
5462
|
this._margin = __assign({}, cached.margin);
|
|
@@ -7873,180 +7918,334 @@ var Flicking = /*#__PURE__*/function (_super) {
|
|
|
7873
7918
|
* Flicking.VERSION; // ex) 4.0.0
|
|
7874
7919
|
* ```
|
|
7875
7920
|
*/
|
|
7876
|
-
Flicking.VERSION = "4.12.0-beta.
|
|
7921
|
+
Flicking.VERSION = "4.12.0-beta.11";
|
|
7877
7922
|
return Flicking;
|
|
7878
7923
|
}(Component);
|
|
7879
7924
|
|
|
7880
|
-
|
|
7881
|
-
|
|
7882
|
-
|
|
7883
|
-
|
|
7884
|
-
|
|
7885
|
-
|
|
7886
|
-
|
|
7887
|
-
|
|
7888
|
-
|
|
7889
|
-
|
|
7925
|
+
var SIDE_EVENTS = {
|
|
7926
|
+
HOLD_START: "sideHoldStart",
|
|
7927
|
+
HOLD_END: "sideHoldEnd",
|
|
7928
|
+
MOVE_START: "sideMoveStart",
|
|
7929
|
+
MOVE: "sideMove",
|
|
7930
|
+
MOVE_END: "sideMoveEnd",
|
|
7931
|
+
WILL_CHANGE: "sideWillChange",
|
|
7932
|
+
CHANGED: "sideChanged",
|
|
7933
|
+
WILL_RESTORE: "sideWillRestore",
|
|
7934
|
+
RESTORED: "sideRestored"
|
|
7935
|
+
};
|
|
7890
7936
|
var CrossFlicking = /*#__PURE__*/function (_super) {
|
|
7891
7937
|
__extends(CrossFlicking, _super);
|
|
7892
|
-
|
|
7893
|
-
|
|
7894
|
-
|
|
7895
|
-
|
|
7896
|
-
|
|
7897
|
-
|
|
7898
|
-
|
|
7899
|
-
|
|
7900
|
-
|
|
7938
|
+
function CrossFlicking(root, options) {
|
|
7939
|
+
var _this = _super.call(this, root, options) || this;
|
|
7940
|
+
_this._syncToCategory = function (index, outerIndex) {
|
|
7941
|
+
if (_this._disableIndexSync) {
|
|
7942
|
+
return;
|
|
7943
|
+
}
|
|
7944
|
+
_this.stopAnimation();
|
|
7945
|
+
_this._sideFlicking.forEach(function (child, i) {
|
|
7946
|
+
var _a = _this._sideState[i],
|
|
7947
|
+
start = _a.start,
|
|
7948
|
+
end = _a.end;
|
|
7949
|
+
if (start <= index && end >= index && outerIndex !== i) {
|
|
7950
|
+
child.stopAnimation();
|
|
7951
|
+
void child.moveTo(index, 0);
|
|
7952
|
+
void _this.moveTo(i, 0);
|
|
7953
|
+
}
|
|
7954
|
+
});
|
|
7955
|
+
};
|
|
7956
|
+
_this._setDraggable = function (direction, draggable) {
|
|
7957
|
+
if (!_this._disableSlideOnHold) {
|
|
7958
|
+
return;
|
|
7959
|
+
}
|
|
7960
|
+
var dragThreshold = _this._originalDragThreshold;
|
|
7961
|
+
var threshold = draggable ? dragThreshold && dragThreshold >= 10 ? dragThreshold : 10 : Infinity;
|
|
7962
|
+
if (direction === MOVE_DIRECTION.HORIZONTAL === _this.horizontal) {
|
|
7963
|
+
_this.dragThreshold = threshold;
|
|
7964
|
+
} else if (direction === MOVE_DIRECTION.VERTICAL === _this.horizontal) {
|
|
7965
|
+
_this._sideFlicking.forEach(function (child) {
|
|
7966
|
+
child.dragThreshold = threshold;
|
|
7967
|
+
});
|
|
7968
|
+
}
|
|
7969
|
+
};
|
|
7970
|
+
_this._setPreviousSideIndex = function () {
|
|
7971
|
+
_this._sideFlicking.forEach(function (child, i) {
|
|
7972
|
+
var _a = _this._sideState[i],
|
|
7973
|
+
start = _a.start,
|
|
7974
|
+
end = _a.end;
|
|
7975
|
+
if (_this._preserveIndex) {
|
|
7976
|
+
if (_this._nextIndex !== i) {
|
|
7977
|
+
if (child.index < start) {
|
|
7978
|
+
child.stopAnimation();
|
|
7979
|
+
void child.moveTo(start, 0);
|
|
7980
|
+
} else if (child.index > end) {
|
|
7981
|
+
child.stopAnimation();
|
|
7982
|
+
void child.moveTo(end, 0);
|
|
7983
|
+
}
|
|
7984
|
+
}
|
|
7985
|
+
} else {
|
|
7986
|
+
if (_this._nextIndex !== i) {
|
|
7987
|
+
void child.moveTo(start, 0);
|
|
7988
|
+
}
|
|
7989
|
+
}
|
|
7990
|
+
});
|
|
7991
|
+
};
|
|
7901
7992
|
_this._onHorizontalHoldStart = function () {
|
|
7902
|
-
_this.
|
|
7993
|
+
_this._setDraggable(MOVE_DIRECTION.HORIZONTAL, true);
|
|
7903
7994
|
_this._moveDirection = null;
|
|
7904
7995
|
};
|
|
7905
7996
|
_this._onHorizontalMove = function (e) {
|
|
7906
7997
|
if (e.isTrusted && !_this._moveDirection) {
|
|
7907
|
-
_this.
|
|
7908
|
-
child.dragThreshold = Infinity;
|
|
7909
|
-
});
|
|
7998
|
+
_this._setDraggable(MOVE_DIRECTION.VERTICAL, false);
|
|
7910
7999
|
_this._moveDirection = MOVE_DIRECTION.HORIZONTAL;
|
|
7911
8000
|
}
|
|
7912
8001
|
};
|
|
7913
8002
|
_this._onHorizontalMoveEnd = function (e) {
|
|
7914
8003
|
var visiblePanels = _this.visiblePanels;
|
|
7915
|
-
_this._verticalFlicking.forEach(function (child) {
|
|
7916
|
-
child.dragThreshold = 10;
|
|
7917
|
-
});
|
|
7918
|
-
_this._moveDirection = null;
|
|
7919
8004
|
if (visiblePanels.length > 1) {
|
|
7920
8005
|
_this._nextIndex = e.direction === "NEXT" ? visiblePanels[1].index : visiblePanels[0].index;
|
|
7921
8006
|
} else {
|
|
7922
8007
|
_this._nextIndex = visiblePanels[0].index;
|
|
7923
8008
|
}
|
|
7924
|
-
_this.
|
|
7925
|
-
|
|
7926
|
-
|
|
7927
|
-
|
|
7928
|
-
|
|
7929
|
-
if (child.index < start) {
|
|
7930
|
-
child.stopAnimation();
|
|
7931
|
-
void child.moveTo(start, 0);
|
|
7932
|
-
} else if (child.index > end) {
|
|
7933
|
-
child.stopAnimation();
|
|
7934
|
-
void child.moveTo(end, 0);
|
|
7935
|
-
}
|
|
7936
|
-
}
|
|
8009
|
+
_this._setDraggable(MOVE_DIRECTION.VERTICAL, true);
|
|
8010
|
+
_this._moveDirection = null;
|
|
8011
|
+
// _syncToCategory에서 완전히 가로 이동이 이루어지기 전에 세로 방향 index가 변하는 경우가 있어 requestAnimationFrame 처리
|
|
8012
|
+
requestAnimationFrame(function () {
|
|
8013
|
+
return _this._setPreviousSideIndex();
|
|
7937
8014
|
});
|
|
7938
8015
|
if (e.isTrusted) {
|
|
7939
|
-
_this._syncToCategory(_this.
|
|
8016
|
+
_this._syncToCategory(_this._sideFlicking[_this._nextIndex].index, _this._nextIndex);
|
|
7940
8017
|
}
|
|
7941
8018
|
};
|
|
7942
|
-
_this.
|
|
7943
|
-
_this.
|
|
7944
|
-
child.dragThreshold = 10;
|
|
7945
|
-
});
|
|
8019
|
+
_this._onSideHoldStart = function () {
|
|
8020
|
+
_this._setDraggable(MOVE_DIRECTION.VERTICAL, true);
|
|
7946
8021
|
_this._moveDirection = null;
|
|
7947
8022
|
};
|
|
7948
|
-
_this.
|
|
8023
|
+
_this._onSideMove = function (e) {
|
|
7949
8024
|
if (e.isTrusted && !_this._moveDirection) {
|
|
7950
|
-
_this.
|
|
8025
|
+
_this._setDraggable(MOVE_DIRECTION.HORIZONTAL, false);
|
|
7951
8026
|
_this._moveDirection = MOVE_DIRECTION.VERTICAL;
|
|
7952
8027
|
}
|
|
7953
8028
|
};
|
|
7954
|
-
_this.
|
|
7955
|
-
_this.
|
|
8029
|
+
_this._onSideMoveEnd = function () {
|
|
8030
|
+
_this._setDraggable(MOVE_DIRECTION.HORIZONTAL, true);
|
|
7956
8031
|
_this._moveDirection = null;
|
|
7957
8032
|
};
|
|
7958
|
-
_this.
|
|
7959
|
-
// this.visiblePanels.length
|
|
7960
|
-
//
|
|
7961
|
-
if (_this.visiblePanels.length < 2 && _this.
|
|
8033
|
+
_this._onSideChanged = function (e) {
|
|
8034
|
+
// If this.visiblePanels.length >= 2, it means that horizontal flicking is being dragged.
|
|
8035
|
+
// In this case, syncToCategory in _onHorizontalMoveEnd will fire after moving finishes, so we don't fire it here.
|
|
8036
|
+
if (_this.visiblePanels.length < 2 && _this._sideFlicking[_this.index] === e.currentTarget) {
|
|
7962
8037
|
_this._syncToCategory(e.index, _this.index);
|
|
7963
8038
|
}
|
|
7964
8039
|
};
|
|
8040
|
+
var _a = options.sideOptions,
|
|
8041
|
+
sideOptions = _a === void 0 ? {} : _a,
|
|
8042
|
+
_b = options.preserveIndex,
|
|
8043
|
+
preserveIndex = _b === void 0 ? true : _b,
|
|
8044
|
+
_c = options.disableSlideOnHold,
|
|
8045
|
+
disableSlideOnHold = _c === void 0 ? true : _c,
|
|
8046
|
+
_d = options.disableIndexSync,
|
|
8047
|
+
disableIndexSync = _d === void 0 ? false : _d;
|
|
7965
8048
|
// Internal states
|
|
7966
|
-
_this._verticalState = [];
|
|
7967
8049
|
_this._moveDirection = null;
|
|
7968
8050
|
_this._nextIndex = 0;
|
|
8051
|
+
_this._originalDragThreshold = _this.dragThreshold;
|
|
7969
8052
|
// Bind options
|
|
7970
|
-
_this.
|
|
8053
|
+
_this._sideOptions = sideOptions;
|
|
8054
|
+
_this._preserveIndex = preserveIndex;
|
|
8055
|
+
_this._disableSlideOnHold = disableSlideOnHold;
|
|
8056
|
+
_this._disableIndexSync = disableIndexSync;
|
|
7971
8057
|
return _this;
|
|
7972
|
-
// Create core components
|
|
7973
|
-
// this._viewport = new Viewport(this, getElement(root));
|
|
7974
8058
|
}
|
|
7975
8059
|
var __proto = CrossFlicking.prototype;
|
|
7976
|
-
Object.defineProperty(__proto, "
|
|
8060
|
+
Object.defineProperty(__proto, "sideFlicking", {
|
|
7977
8061
|
// Components
|
|
7978
|
-
/**
|
|
7979
|
-
* Change active panel index on mouse/touch hold while animating.
|
|
7980
|
-
* `index` of the `willChange`/`willRestore` event will be used as new index.
|
|
7981
|
-
* @ko 애니메이션 도중 마우스/터치 입력시 현재 활성화된 패널의 인덱스를 변경합니다.
|
|
7982
|
-
* `willChange`/`willRestore` 이벤트의 `index`값이 새로운 인덱스로 사용될 것입니다.
|
|
7983
|
-
* @type {FlickingOptions}
|
|
7984
|
-
* @default undefined
|
|
7985
|
-
* @see {@link https://naver.github.io/egjs-flicking/Options#changeonhold changeOnHold ( Options )}
|
|
7986
|
-
*/
|
|
7987
8062
|
get: function () {
|
|
7988
|
-
return this.
|
|
8063
|
+
return this._sideFlicking;
|
|
8064
|
+
},
|
|
8065
|
+
enumerable: false,
|
|
8066
|
+
configurable: true
|
|
8067
|
+
});
|
|
8068
|
+
Object.defineProperty(__proto, "sideState", {
|
|
8069
|
+
get: function () {
|
|
8070
|
+
return this._sideState;
|
|
8071
|
+
},
|
|
8072
|
+
enumerable: false,
|
|
8073
|
+
configurable: true
|
|
8074
|
+
});
|
|
8075
|
+
Object.defineProperty(__proto, "sideOptions", {
|
|
8076
|
+
// Options Getter
|
|
8077
|
+
get: function () {
|
|
8078
|
+
return this._sideOptions;
|
|
8079
|
+
},
|
|
8080
|
+
// Options Setter
|
|
8081
|
+
set: function (val) {
|
|
8082
|
+
this._sideOptions = val;
|
|
8083
|
+
},
|
|
8084
|
+
enumerable: false,
|
|
8085
|
+
configurable: true
|
|
8086
|
+
});
|
|
8087
|
+
Object.defineProperty(__proto, "preserveIndex", {
|
|
8088
|
+
get: function () {
|
|
8089
|
+
return this._preserveIndex;
|
|
8090
|
+
},
|
|
8091
|
+
set: function (val) {
|
|
8092
|
+
this._preserveIndex = val;
|
|
8093
|
+
},
|
|
8094
|
+
enumerable: false,
|
|
8095
|
+
configurable: true
|
|
8096
|
+
});
|
|
8097
|
+
Object.defineProperty(__proto, "disableSlideOnHold", {
|
|
8098
|
+
get: function () {
|
|
8099
|
+
return this._disableSlideOnHold;
|
|
8100
|
+
},
|
|
8101
|
+
set: function (val) {
|
|
8102
|
+
this._disableSlideOnHold = val;
|
|
8103
|
+
},
|
|
8104
|
+
enumerable: false,
|
|
8105
|
+
configurable: true
|
|
8106
|
+
});
|
|
8107
|
+
Object.defineProperty(__proto, "disableIndexSync", {
|
|
8108
|
+
get: function () {
|
|
8109
|
+
return this._disableIndexSync;
|
|
8110
|
+
},
|
|
8111
|
+
set: function (val) {
|
|
8112
|
+
this._disableIndexSync = val;
|
|
7989
8113
|
},
|
|
7990
8114
|
enumerable: false,
|
|
7991
8115
|
configurable: true
|
|
7992
8116
|
});
|
|
7993
|
-
/**
|
|
7994
|
-
* Initialize Flicking and move to the default index
|
|
7995
|
-
* This is automatically called on Flicking's constructor when `autoInit` is true(default)
|
|
7996
|
-
* @ko Flicking을 초기화하고, 디폴트 인덱스로 이동합니다
|
|
7997
|
-
* 이 메소드는 `autoInit` 옵션이 true(default)일 경우 Flicking이 생성될 때 자동으로 호출됩니다
|
|
7998
|
-
* @fires Flicking#ready
|
|
7999
|
-
* @return {Promise<void>}
|
|
8000
|
-
*/
|
|
8001
8117
|
__proto.init = function () {
|
|
8002
8118
|
var _this = this;
|
|
8003
8119
|
return _super.prototype.init.call(this).then(function () {
|
|
8004
|
-
|
|
8005
|
-
|
|
8006
|
-
|
|
8007
|
-
|
|
8008
|
-
|
|
8009
|
-
|
|
8010
|
-
|
|
8011
|
-
|
|
8012
|
-
|
|
8013
|
-
|
|
8014
|
-
|
|
8015
|
-
|
|
8016
|
-
|
|
8017
|
-
|
|
8120
|
+
_this._sideState = _this._createSideState();
|
|
8121
|
+
_this._sideFlicking = _this._createSideFlicking();
|
|
8122
|
+
_this._addComponentEvents();
|
|
8123
|
+
});
|
|
8124
|
+
};
|
|
8125
|
+
__proto.destroy = function () {
|
|
8126
|
+
this._sideFlicking.forEach(function (flicking) {
|
|
8127
|
+
flicking.destroy();
|
|
8128
|
+
});
|
|
8129
|
+
_super.prototype.destroy.call(this);
|
|
8130
|
+
};
|
|
8131
|
+
__proto._addComponentEvents = function () {
|
|
8132
|
+
var _this = this;
|
|
8133
|
+
this.on(EVENTS.HOLD_START, this._onHorizontalHoldStart);
|
|
8134
|
+
this.on(EVENTS.MOVE, this._onHorizontalMove);
|
|
8135
|
+
this.on(EVENTS.MOVE_END, this._onHorizontalMoveEnd);
|
|
8136
|
+
this._sideFlicking.forEach(function (flicking, mainIndex) {
|
|
8137
|
+
flicking.on(EVENTS.HOLD_START, _this._onSideHoldStart);
|
|
8138
|
+
flicking.on(EVENTS.MOVE, _this._onSideMove);
|
|
8139
|
+
flicking.on(EVENTS.MOVE_END, _this._onSideMoveEnd);
|
|
8140
|
+
flicking.on(EVENTS.CHANGED, _this._onSideChanged);
|
|
8141
|
+
Object.keys(SIDE_EVENTS).forEach(function (name) {
|
|
8142
|
+
flicking.on(EVENTS[name], function (event) {
|
|
8143
|
+
_this.trigger(new Component.ComponentEvent(SIDE_EVENTS[name], __assign({
|
|
8144
|
+
mainIndex: mainIndex
|
|
8145
|
+
}, event)));
|
|
8146
|
+
});
|
|
8018
8147
|
});
|
|
8019
|
-
|
|
8020
|
-
|
|
8021
|
-
|
|
8022
|
-
|
|
8023
|
-
|
|
8024
|
-
|
|
8148
|
+
});
|
|
8149
|
+
};
|
|
8150
|
+
__proto._createSideState = function () {
|
|
8151
|
+
var viewportEl = this.element;
|
|
8152
|
+
var cameraEl = this.camera.element;
|
|
8153
|
+
var panels = toArray(cameraEl.children);
|
|
8154
|
+
var isCrossStructure = getDataAttributes(viewportEl, "data-cross-").structure;
|
|
8155
|
+
var sideState = [];
|
|
8156
|
+
if (!isCrossStructure) {
|
|
8157
|
+
var groupPanels = this._getGroupFromAttribute(panels);
|
|
8158
|
+
var groupKeys = Object.keys(groupPanels);
|
|
8159
|
+
if (groupKeys.length) {
|
|
8160
|
+
sideState = this._getSideStateFromGroup(groupPanels);
|
|
8161
|
+
this.remove(0, this.panelCount - groupKeys.length);
|
|
8162
|
+
} else {
|
|
8163
|
+
sideState = this._getSideStateFromPanels(panels);
|
|
8164
|
+
}
|
|
8165
|
+
this._createCrossStructure(sideState);
|
|
8166
|
+
} else {
|
|
8167
|
+
sideState = this._getSideStateFromCrossStructure(panels);
|
|
8168
|
+
}
|
|
8169
|
+
void this.resize();
|
|
8170
|
+
return sideState;
|
|
8171
|
+
};
|
|
8172
|
+
__proto._createCrossStructure = function (sideState) {
|
|
8173
|
+
var _this = this;
|
|
8174
|
+
var sideCamera = document.createElement("div");
|
|
8175
|
+
var sidePanels = "";
|
|
8176
|
+
sideCamera.classList.add(CLASS.CAMERA);
|
|
8177
|
+
sideState.forEach(function (state, i) {
|
|
8178
|
+
var panel = _this.camera.children[i];
|
|
8179
|
+
sidePanels += state.element.innerHTML;
|
|
8180
|
+
Array.from(panel.attributes).forEach(function (attribute) {
|
|
8181
|
+
return panel.removeAttribute(attribute.name);
|
|
8025
8182
|
});
|
|
8026
|
-
|
|
8027
|
-
|
|
8028
|
-
|
|
8029
|
-
_this.
|
|
8030
|
-
|
|
8031
|
-
|
|
8032
|
-
|
|
8033
|
-
|
|
8183
|
+
});
|
|
8184
|
+
sideCamera.innerHTML = sidePanels;
|
|
8185
|
+
sideState.forEach(function (_, i) {
|
|
8186
|
+
var panel = _this.camera.children[i];
|
|
8187
|
+
[CLASS.VIEWPORT, CLASS.VERTICAL].forEach(function (className) {
|
|
8188
|
+
if (!panel.classList.contains(className)) {
|
|
8189
|
+
panel.classList.add(className);
|
|
8190
|
+
}
|
|
8034
8191
|
});
|
|
8192
|
+
panel.innerHTML = sideCamera.outerHTML;
|
|
8035
8193
|
});
|
|
8194
|
+
this.element.setAttribute("data-cross-structure", "true");
|
|
8036
8195
|
};
|
|
8037
|
-
__proto.
|
|
8038
|
-
var
|
|
8039
|
-
|
|
8040
|
-
|
|
8041
|
-
var
|
|
8042
|
-
|
|
8043
|
-
|
|
8044
|
-
|
|
8045
|
-
|
|
8046
|
-
|
|
8047
|
-
void _this.moveTo(i, 0);
|
|
8196
|
+
__proto._getGroupFromAttribute = function (panels) {
|
|
8197
|
+
var groupKeys = [];
|
|
8198
|
+
var groupPanels = {};
|
|
8199
|
+
panels.forEach(function (panel) {
|
|
8200
|
+
var groupKey = getDataAttributes(panel, "data-cross-").groupkey;
|
|
8201
|
+
if (groupKey && !includes(groupKeys, groupKey)) {
|
|
8202
|
+
groupKeys.push(groupKey);
|
|
8203
|
+
groupPanels[groupKey] = [panel];
|
|
8204
|
+
} else if (groupKey) {
|
|
8205
|
+
groupPanels[groupKey].push(panel);
|
|
8048
8206
|
}
|
|
8049
8207
|
});
|
|
8208
|
+
return groupPanels;
|
|
8209
|
+
};
|
|
8210
|
+
__proto._getSideStateFromGroup = function (groupPanels) {
|
|
8211
|
+
return Object.keys(groupPanels).reduce(function (state, key) {
|
|
8212
|
+
var start = state.length ? +state[state.length - 1].end + 1 : 0;
|
|
8213
|
+
var element = groupPanels[key].reduce(function (el, panel) {
|
|
8214
|
+
el.innerHTML += panel.outerHTML;
|
|
8215
|
+
return el;
|
|
8216
|
+
}, document.createElement("div"));
|
|
8217
|
+
return __spread(state, [{
|
|
8218
|
+
key: key,
|
|
8219
|
+
start: start,
|
|
8220
|
+
end: start + groupPanels[key].length - 1,
|
|
8221
|
+
element: element
|
|
8222
|
+
}]);
|
|
8223
|
+
}, []);
|
|
8224
|
+
};
|
|
8225
|
+
__proto._getSideStateFromPanels = function (panels) {
|
|
8226
|
+
return panels.reduce(function (state, panel, i) {
|
|
8227
|
+
var start = state.length ? +state[state.length - 1].end + 1 : 0;
|
|
8228
|
+
return __spread(state, [{
|
|
8229
|
+
key: i.toString(),
|
|
8230
|
+
start: start,
|
|
8231
|
+
end: start + panel.children.length - 1,
|
|
8232
|
+
element: panel
|
|
8233
|
+
}]);
|
|
8234
|
+
}, []);
|
|
8235
|
+
};
|
|
8236
|
+
__proto._getSideStateFromCrossStructure = function (panels) {
|
|
8237
|
+
var groupPanels = this._getGroupFromAttribute(panels);
|
|
8238
|
+
return this._getSideStateFromGroup(groupPanels);
|
|
8239
|
+
};
|
|
8240
|
+
__proto._createSideFlicking = function () {
|
|
8241
|
+
var _this = this;
|
|
8242
|
+
return this.sideState.map(function (state, i) {
|
|
8243
|
+
return new Flicking(_this.camera.children[i], __assign(__assign({}, _this.sideOptions), {
|
|
8244
|
+
horizontal: false,
|
|
8245
|
+
panelsPerView: 1,
|
|
8246
|
+
defaultIndex: state.start
|
|
8247
|
+
}));
|
|
8248
|
+
});
|
|
8050
8249
|
};
|
|
8051
8250
|
return CrossFlicking;
|
|
8052
8251
|
}(Flicking);
|
|
@@ -8268,6 +8467,7 @@ var parseAlign = function (alignVal) {
|
|
|
8268
8467
|
var modules = {
|
|
8269
8468
|
__proto__: null,
|
|
8270
8469
|
'default': Flicking,
|
|
8470
|
+
SIDE_EVENTS: SIDE_EVENTS,
|
|
8271
8471
|
CrossFlicking: CrossFlicking,
|
|
8272
8472
|
VanillaElementProvider: VanillaElementProvider,
|
|
8273
8473
|
VirtualElementProvider: VirtualElementProvider,
|
|
@@ -8339,7 +8539,9 @@ var modules = {
|
|
|
8339
8539
|
circulateIndex: circulateIndex,
|
|
8340
8540
|
range: range,
|
|
8341
8541
|
getElementSize: getElementSize,
|
|
8342
|
-
setPrototypeOf: setPrototypeOf
|
|
8542
|
+
setPrototypeOf: setPrototypeOf,
|
|
8543
|
+
camelize: camelize,
|
|
8544
|
+
getDataAttributes: getDataAttributes
|
|
8343
8545
|
};
|
|
8344
8546
|
|
|
8345
8547
|
/*
|
|
@@ -8379,6 +8581,7 @@ exports.NormalRenderingStrategy = NormalRenderingStrategy;
|
|
|
8379
8581
|
exports.ORDER = ORDER;
|
|
8380
8582
|
exports.Panel = Panel;
|
|
8381
8583
|
exports.Renderer = Renderer;
|
|
8584
|
+
exports.SIDE_EVENTS = SIDE_EVENTS;
|
|
8382
8585
|
exports.SnapControl = SnapControl;
|
|
8383
8586
|
exports.State = State;
|
|
8384
8587
|
exports.StateMachine = StateMachine;
|
|
@@ -8390,6 +8593,7 @@ exports.VirtualElementProvider = VirtualElementProvider;
|
|
|
8390
8593
|
exports.VirtualManager = VirtualManager;
|
|
8391
8594
|
exports.VirtualPanel = VirtualPanel;
|
|
8392
8595
|
exports.VirtualRenderingStrategy = VirtualRenderingStrategy;
|
|
8596
|
+
exports.camelize = camelize;
|
|
8393
8597
|
exports.checkExistence = checkExistence;
|
|
8394
8598
|
exports.circulateIndex = circulateIndex;
|
|
8395
8599
|
exports.circulatePosition = circulatePosition;
|
|
@@ -8398,6 +8602,7 @@ exports["default"] = Flicking;
|
|
|
8398
8602
|
exports.find = find;
|
|
8399
8603
|
exports.findIndex = findIndex;
|
|
8400
8604
|
exports.findRight = findRight;
|
|
8605
|
+
exports.getDataAttributes = getDataAttributes;
|
|
8401
8606
|
exports.getDefaultCameraTransform = getDefaultCameraTransform;
|
|
8402
8607
|
exports.getDirection = getDirection;
|
|
8403
8608
|
exports.getElement = getElement;
|