@egjs/flicking 4.12.0-beta.1 → 4.12.0-beta.10
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 +62 -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 +319 -122
- package/dist/flicking.cjs.js.map +1 -1
- package/dist/flicking.esm.js +313 -122
- package/dist/flicking.esm.js.map +1 -1
- package/dist/flicking.js +316 -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 +1083 -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 +3 -2
- package/sass/flicking.sass +13 -0
- package/src/CrossFlicking.ts +330 -143
- package/src/camera/Camera.ts +24 -4
- package/src/const/external.ts +2 -0
- package/src/index.ts +2 -1
- package/src/utils.ts +21 -0
- 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.10
|
|
8
8
|
*/
|
|
9
9
|
import Component, { ComponentEvent } from '@egjs/component';
|
|
10
10
|
import Axes, { PanInput } from '@egjs/axes';
|
|
@@ -385,6 +385,8 @@ var MOVE_TYPE = {
|
|
|
385
385
|
STRICT: "strict"
|
|
386
386
|
};
|
|
387
387
|
var CLASS = {
|
|
388
|
+
VIEWPORT: "flicking-viewport",
|
|
389
|
+
CAMERA: "flicking-camera",
|
|
388
390
|
VERTICAL: "vertical",
|
|
389
391
|
HIDDEN: "flicking-hidden",
|
|
390
392
|
DEFAULT_VIRTUAL: "flicking-panel"
|
|
@@ -736,6 +738,26 @@ var setPrototypeOf = Object.setPrototypeOf || function (obj, proto) {
|
|
|
736
738
|
obj.__proto__ = proto;
|
|
737
739
|
return obj;
|
|
738
740
|
};
|
|
741
|
+
var camelize = function (str) {
|
|
742
|
+
return str.replace(/[\s-_]([a-z])/g, function (all, letter) {
|
|
743
|
+
return letter.toUpperCase();
|
|
744
|
+
});
|
|
745
|
+
};
|
|
746
|
+
var getDataAttributes = function (element, attributePrefix) {
|
|
747
|
+
var dataAttributes = {};
|
|
748
|
+
var attributes = element.attributes;
|
|
749
|
+
var length = attributes.length;
|
|
750
|
+
for (var i = 0; i < length; ++i) {
|
|
751
|
+
var attribute = attributes[i];
|
|
752
|
+
var name_1 = attribute.name,
|
|
753
|
+
value = attribute.value;
|
|
754
|
+
if (name_1.indexOf(attributePrefix) === -1) {
|
|
755
|
+
continue;
|
|
756
|
+
}
|
|
757
|
+
dataAttributes[camelize(name_1.replace(attributePrefix, ""))] = value;
|
|
758
|
+
}
|
|
759
|
+
return dataAttributes;
|
|
760
|
+
};
|
|
739
761
|
|
|
740
762
|
/*
|
|
741
763
|
* Copyright (c) 2015 NAVER Corp.
|
|
@@ -3722,6 +3744,7 @@ var Camera = /*#__PURE__*/function () {
|
|
|
3722
3744
|
var _this = this;
|
|
3723
3745
|
var _b = (_a === void 0 ? {} : _a).align,
|
|
3724
3746
|
align = _b === void 0 ? ALIGN.CENTER : _b;
|
|
3747
|
+
this._lookedOffset = 0;
|
|
3725
3748
|
this._checkTranslateSupport = function () {
|
|
3726
3749
|
var e_1, _a;
|
|
3727
3750
|
var transforms = ["webkitTransform", "msTransform", "MozTransform", "OTransform", "transform"];
|
|
@@ -4081,6 +4104,8 @@ var Camera = /*#__PURE__*/function () {
|
|
|
4081
4104
|
*/
|
|
4082
4105
|
__proto.lookAt = function (pos) {
|
|
4083
4106
|
var _this = this;
|
|
4107
|
+
var prevOffset = this._offset;
|
|
4108
|
+
var isChangedOffset = this._lookedOffset !== prevOffset;
|
|
4084
4109
|
var flicking = getFlickingAttached(this._flicking);
|
|
4085
4110
|
var prevPos = this._position;
|
|
4086
4111
|
this._position = pos;
|
|
@@ -4091,7 +4116,12 @@ var Camera = /*#__PURE__*/function () {
|
|
|
4091
4116
|
if (toggled) {
|
|
4092
4117
|
void flicking.renderer.render().then(function () {
|
|
4093
4118
|
_this.updateOffset();
|
|
4119
|
+
_this._lookedOffset = _this._offset;
|
|
4094
4120
|
});
|
|
4121
|
+
} else if (isChangedOffset) {
|
|
4122
|
+
// sync offset for renderOnlyVisible on resize
|
|
4123
|
+
this.updateOffset();
|
|
4124
|
+
this._lookedOffset = this._offset;
|
|
4095
4125
|
} else {
|
|
4096
4126
|
this.applyTransform();
|
|
4097
4127
|
}
|
|
@@ -4266,8 +4296,8 @@ var Camera = /*#__PURE__*/function () {
|
|
|
4266
4296
|
return this;
|
|
4267
4297
|
};
|
|
4268
4298
|
/**
|
|
4269
|
-
* Update Viewport's height to
|
|
4270
|
-
* @ko 현재
|
|
4299
|
+
* Update Viewport's height to visible panel's max height
|
|
4300
|
+
* @ko 현재 활성화된 패널과 보이는 패널의 최대 높이와 동일하도록 뷰포트의 높이를 업데이트합니다
|
|
4271
4301
|
* @throws {FlickingError}
|
|
4272
4302
|
* {@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} When {@link Camera#init init} is not called before
|
|
4273
4303
|
* <ko>{@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} {@link Camera#init init}이 이전에 호출되지 않은 경우</ko>
|
|
@@ -4277,9 +4307,17 @@ var Camera = /*#__PURE__*/function () {
|
|
|
4277
4307
|
__proto.updateAdaptiveHeight = function () {
|
|
4278
4308
|
var flicking = getFlickingAttached(this._flicking);
|
|
4279
4309
|
var activePanel = flicking.control.activePanel;
|
|
4280
|
-
|
|
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
|
+
})));
|
|
4281
4319
|
flicking.viewport.setSize({
|
|
4282
|
-
height:
|
|
4320
|
+
height: maxHeight
|
|
4283
4321
|
});
|
|
4284
4322
|
};
|
|
4285
4323
|
/**
|
|
@@ -4350,6 +4388,7 @@ var Camera = /*#__PURE__*/function () {
|
|
|
4350
4388
|
};
|
|
4351
4389
|
__proto._resetInternalValues = function () {
|
|
4352
4390
|
this._position = 0;
|
|
4391
|
+
this._lookedOffset = 0;
|
|
4353
4392
|
this._alignPos = 0;
|
|
4354
4393
|
this._offset = 0;
|
|
4355
4394
|
this._circularOffset = 0;
|
|
@@ -7871,180 +7910,332 @@ var Flicking = /*#__PURE__*/function (_super) {
|
|
|
7871
7910
|
* Flicking.VERSION; // ex) 4.0.0
|
|
7872
7911
|
* ```
|
|
7873
7912
|
*/
|
|
7874
|
-
Flicking.VERSION = "4.12.0-beta.
|
|
7913
|
+
Flicking.VERSION = "4.12.0-beta.10";
|
|
7875
7914
|
return Flicking;
|
|
7876
7915
|
}(Component);
|
|
7877
7916
|
|
|
7878
|
-
|
|
7879
|
-
|
|
7880
|
-
|
|
7881
|
-
|
|
7882
|
-
|
|
7883
|
-
|
|
7884
|
-
|
|
7885
|
-
|
|
7886
|
-
|
|
7887
|
-
*/
|
|
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
|
+
};
|
|
7888
7926
|
var CrossFlicking = /*#__PURE__*/function (_super) {
|
|
7889
7927
|
__extends(CrossFlicking, _super);
|
|
7890
|
-
|
|
7891
|
-
|
|
7892
|
-
|
|
7893
|
-
|
|
7894
|
-
|
|
7895
|
-
|
|
7896
|
-
|
|
7897
|
-
|
|
7898
|
-
|
|
7928
|
+
function CrossFlicking(root, options) {
|
|
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 dragThreshold = _this._originalDragThreshold;
|
|
7951
|
+
var threshold = draggable ? dragThreshold && dragThreshold >= 10 ? dragThreshold : 10 : Infinity;
|
|
7952
|
+
if (direction === MOVE_DIRECTION.HORIZONTAL === _this.horizontal) {
|
|
7953
|
+
_this.dragThreshold = threshold;
|
|
7954
|
+
} else if (direction === MOVE_DIRECTION.VERTICAL === _this.horizontal) {
|
|
7955
|
+
_this._sideFlicking.forEach(function (child) {
|
|
7956
|
+
child.dragThreshold = threshold;
|
|
7957
|
+
});
|
|
7958
|
+
}
|
|
7959
|
+
};
|
|
7960
|
+
_this._setPreviousSideIndex = function () {
|
|
7961
|
+
_this._sideFlicking.forEach(function (child, i) {
|
|
7962
|
+
var _a = _this._sideState[i],
|
|
7963
|
+
start = _a.start,
|
|
7964
|
+
end = _a.end;
|
|
7965
|
+
if (_this._preserveIndex) {
|
|
7966
|
+
if (_this._nextIndex !== i) {
|
|
7967
|
+
if (child.index < start) {
|
|
7968
|
+
child.stopAnimation();
|
|
7969
|
+
void child.moveTo(start, 0);
|
|
7970
|
+
} else if (child.index > end) {
|
|
7971
|
+
child.stopAnimation();
|
|
7972
|
+
void child.moveTo(end, 0);
|
|
7973
|
+
}
|
|
7974
|
+
}
|
|
7975
|
+
} else {
|
|
7976
|
+
if (_this._nextIndex !== i) {
|
|
7977
|
+
void child.moveTo(start, 0);
|
|
7978
|
+
}
|
|
7979
|
+
}
|
|
7980
|
+
});
|
|
7981
|
+
};
|
|
7899
7982
|
_this._onHorizontalHoldStart = function () {
|
|
7900
|
-
_this.
|
|
7983
|
+
_this._setDraggable(MOVE_DIRECTION.HORIZONTAL, true);
|
|
7901
7984
|
_this._moveDirection = null;
|
|
7902
7985
|
};
|
|
7903
7986
|
_this._onHorizontalMove = function (e) {
|
|
7904
7987
|
if (e.isTrusted && !_this._moveDirection) {
|
|
7905
|
-
_this.
|
|
7906
|
-
child.dragThreshold = Infinity;
|
|
7907
|
-
});
|
|
7988
|
+
_this._setDraggable(MOVE_DIRECTION.VERTICAL, false);
|
|
7908
7989
|
_this._moveDirection = MOVE_DIRECTION.HORIZONTAL;
|
|
7909
7990
|
}
|
|
7910
7991
|
};
|
|
7911
7992
|
_this._onHorizontalMoveEnd = function (e) {
|
|
7912
7993
|
var visiblePanels = _this.visiblePanels;
|
|
7913
|
-
_this._verticalFlicking.forEach(function (child) {
|
|
7914
|
-
child.dragThreshold = 10;
|
|
7915
|
-
});
|
|
7916
|
-
_this._moveDirection = null;
|
|
7917
7994
|
if (visiblePanels.length > 1) {
|
|
7918
7995
|
_this._nextIndex = e.direction === "NEXT" ? visiblePanels[1].index : visiblePanels[0].index;
|
|
7919
7996
|
} else {
|
|
7920
7997
|
_this._nextIndex = visiblePanels[0].index;
|
|
7921
7998
|
}
|
|
7922
|
-
_this.
|
|
7923
|
-
|
|
7924
|
-
|
|
7925
|
-
|
|
7926
|
-
|
|
7927
|
-
if (child.index < start) {
|
|
7928
|
-
child.stopAnimation();
|
|
7929
|
-
void child.moveTo(start, 0);
|
|
7930
|
-
} else if (child.index > end) {
|
|
7931
|
-
child.stopAnimation();
|
|
7932
|
-
void child.moveTo(end, 0);
|
|
7933
|
-
}
|
|
7934
|
-
}
|
|
7999
|
+
_this._setDraggable(MOVE_DIRECTION.VERTICAL, true);
|
|
8000
|
+
_this._moveDirection = null;
|
|
8001
|
+
// _syncToCategory에서 완전히 가로 이동이 이루어지기 전에 세로 방향 index가 변하는 경우가 있어 requestAnimationFrame 처리
|
|
8002
|
+
requestAnimationFrame(function () {
|
|
8003
|
+
return _this._setPreviousSideIndex();
|
|
7935
8004
|
});
|
|
7936
8005
|
if (e.isTrusted) {
|
|
7937
|
-
_this._syncToCategory(_this.
|
|
8006
|
+
_this._syncToCategory(_this._sideFlicking[_this._nextIndex].index, _this._nextIndex);
|
|
7938
8007
|
}
|
|
7939
8008
|
};
|
|
7940
|
-
_this.
|
|
7941
|
-
_this.
|
|
7942
|
-
child.dragThreshold = 10;
|
|
7943
|
-
});
|
|
8009
|
+
_this._onSideHoldStart = function () {
|
|
8010
|
+
_this._setDraggable(MOVE_DIRECTION.VERTICAL, true);
|
|
7944
8011
|
_this._moveDirection = null;
|
|
7945
8012
|
};
|
|
7946
|
-
_this.
|
|
8013
|
+
_this._onSideMove = function (e) {
|
|
7947
8014
|
if (e.isTrusted && !_this._moveDirection) {
|
|
7948
|
-
_this.
|
|
8015
|
+
_this._setDraggable(MOVE_DIRECTION.HORIZONTAL, false);
|
|
7949
8016
|
_this._moveDirection = MOVE_DIRECTION.VERTICAL;
|
|
7950
8017
|
}
|
|
7951
8018
|
};
|
|
7952
|
-
_this.
|
|
7953
|
-
_this.
|
|
8019
|
+
_this._onSideMoveEnd = function () {
|
|
8020
|
+
_this._setDraggable(MOVE_DIRECTION.HORIZONTAL, true);
|
|
7954
8021
|
_this._moveDirection = null;
|
|
7955
8022
|
};
|
|
7956
|
-
_this.
|
|
7957
|
-
// this.visiblePanels.length
|
|
7958
|
-
//
|
|
7959
|
-
if (_this.visiblePanels.length < 2 && _this.
|
|
8023
|
+
_this._onSideChanged = function (e) {
|
|
8024
|
+
// If this.visiblePanels.length >= 2, it means that horizontal flicking is being dragged.
|
|
8025
|
+
// In this case, syncToCategory in _onHorizontalMoveEnd will fire after moving finishes, so we don't fire it here.
|
|
8026
|
+
if (_this.visiblePanels.length < 2 && _this._sideFlicking[_this.index] === e.currentTarget) {
|
|
7960
8027
|
_this._syncToCategory(e.index, _this.index);
|
|
7961
8028
|
}
|
|
7962
8029
|
};
|
|
8030
|
+
var _a = options.sideOptions,
|
|
8031
|
+
sideOptions = _a === void 0 ? {} : _a,
|
|
8032
|
+
_b = options.preserveIndex,
|
|
8033
|
+
preserveIndex = _b === void 0 ? true : _b,
|
|
8034
|
+
_c = options.disableSlideOnHold,
|
|
8035
|
+
disableSlideOnHold = _c === void 0 ? true : _c,
|
|
8036
|
+
_d = options.disableIndexSync,
|
|
8037
|
+
disableIndexSync = _d === void 0 ? false : _d;
|
|
7963
8038
|
// Internal states
|
|
7964
|
-
_this._verticalState = [];
|
|
7965
8039
|
_this._moveDirection = null;
|
|
7966
8040
|
_this._nextIndex = 0;
|
|
8041
|
+
_this._originalDragThreshold = _this.dragThreshold;
|
|
7967
8042
|
// Bind options
|
|
7968
|
-
_this.
|
|
8043
|
+
_this._sideOptions = sideOptions;
|
|
8044
|
+
_this._preserveIndex = preserveIndex;
|
|
8045
|
+
_this._disableSlideOnHold = disableSlideOnHold;
|
|
8046
|
+
_this._disableIndexSync = disableIndexSync;
|
|
7969
8047
|
return _this;
|
|
7970
|
-
// Create core components
|
|
7971
|
-
// this._viewport = new Viewport(this, getElement(root));
|
|
7972
8048
|
}
|
|
7973
8049
|
var __proto = CrossFlicking.prototype;
|
|
7974
|
-
Object.defineProperty(__proto, "
|
|
8050
|
+
Object.defineProperty(__proto, "sideFlicking", {
|
|
7975
8051
|
// Components
|
|
7976
|
-
/**
|
|
7977
|
-
* Change active panel index on mouse/touch hold while animating.
|
|
7978
|
-
* `index` of the `willChange`/`willRestore` event will be used as new index.
|
|
7979
|
-
* @ko 애니메이션 도중 마우스/터치 입력시 현재 활성화된 패널의 인덱스를 변경합니다.
|
|
7980
|
-
* `willChange`/`willRestore` 이벤트의 `index`값이 새로운 인덱스로 사용될 것입니다.
|
|
7981
|
-
* @type {FlickingOptions}
|
|
7982
|
-
* @default undefined
|
|
7983
|
-
* @see {@link https://naver.github.io/egjs-flicking/Options#changeonhold changeOnHold ( Options )}
|
|
7984
|
-
*/
|
|
7985
8052
|
get: function () {
|
|
7986
|
-
return this.
|
|
8053
|
+
return this._sideFlicking;
|
|
8054
|
+
},
|
|
8055
|
+
enumerable: false,
|
|
8056
|
+
configurable: true
|
|
8057
|
+
});
|
|
8058
|
+
Object.defineProperty(__proto, "sideState", {
|
|
8059
|
+
get: function () {
|
|
8060
|
+
return this._sideState;
|
|
8061
|
+
},
|
|
8062
|
+
enumerable: false,
|
|
8063
|
+
configurable: true
|
|
8064
|
+
});
|
|
8065
|
+
Object.defineProperty(__proto, "sideOptions", {
|
|
8066
|
+
// Options Getter
|
|
8067
|
+
get: function () {
|
|
8068
|
+
return this._sideOptions;
|
|
8069
|
+
},
|
|
8070
|
+
// Options Setter
|
|
8071
|
+
set: function (val) {
|
|
8072
|
+
this._sideOptions = val;
|
|
8073
|
+
},
|
|
8074
|
+
enumerable: false,
|
|
8075
|
+
configurable: true
|
|
8076
|
+
});
|
|
8077
|
+
Object.defineProperty(__proto, "preserveIndex", {
|
|
8078
|
+
get: function () {
|
|
8079
|
+
return this._preserveIndex;
|
|
8080
|
+
},
|
|
8081
|
+
set: function (val) {
|
|
8082
|
+
this._preserveIndex = val;
|
|
8083
|
+
},
|
|
8084
|
+
enumerable: false,
|
|
8085
|
+
configurable: true
|
|
8086
|
+
});
|
|
8087
|
+
Object.defineProperty(__proto, "disableSlideOnHold", {
|
|
8088
|
+
get: function () {
|
|
8089
|
+
return this._disableSlideOnHold;
|
|
8090
|
+
},
|
|
8091
|
+
set: function (val) {
|
|
8092
|
+
this._disableSlideOnHold = val;
|
|
8093
|
+
},
|
|
8094
|
+
enumerable: false,
|
|
8095
|
+
configurable: true
|
|
8096
|
+
});
|
|
8097
|
+
Object.defineProperty(__proto, "disableIndexSync", {
|
|
8098
|
+
get: function () {
|
|
8099
|
+
return this._disableIndexSync;
|
|
8100
|
+
},
|
|
8101
|
+
set: function (val) {
|
|
8102
|
+
this._disableIndexSync = val;
|
|
7987
8103
|
},
|
|
7988
8104
|
enumerable: false,
|
|
7989
8105
|
configurable: true
|
|
7990
8106
|
});
|
|
7991
|
-
/**
|
|
7992
|
-
* Initialize Flicking and move to the default index
|
|
7993
|
-
* This is automatically called on Flicking's constructor when `autoInit` is true(default)
|
|
7994
|
-
* @ko Flicking을 초기화하고, 디폴트 인덱스로 이동합니다
|
|
7995
|
-
* 이 메소드는 `autoInit` 옵션이 true(default)일 경우 Flicking이 생성될 때 자동으로 호출됩니다
|
|
7996
|
-
* @fires Flicking#ready
|
|
7997
|
-
* @return {Promise<void>}
|
|
7998
|
-
*/
|
|
7999
8107
|
__proto.init = function () {
|
|
8000
8108
|
var _this = this;
|
|
8001
8109
|
return _super.prototype.init.call(this).then(function () {
|
|
8002
|
-
|
|
8003
|
-
|
|
8004
|
-
|
|
8005
|
-
|
|
8006
|
-
|
|
8007
|
-
|
|
8008
|
-
|
|
8009
|
-
|
|
8010
|
-
|
|
8011
|
-
|
|
8012
|
-
|
|
8013
|
-
|
|
8014
|
-
|
|
8015
|
-
|
|
8110
|
+
_this._sideState = _this._createSideState();
|
|
8111
|
+
_this._sideFlicking = _this._createSideFlicking();
|
|
8112
|
+
_this._addComponentEvents();
|
|
8113
|
+
});
|
|
8114
|
+
};
|
|
8115
|
+
__proto.destroy = function () {
|
|
8116
|
+
this._sideFlicking.forEach(function (flicking) {
|
|
8117
|
+
flicking.destroy();
|
|
8118
|
+
});
|
|
8119
|
+
_super.prototype.destroy.call(this);
|
|
8120
|
+
};
|
|
8121
|
+
__proto._addComponentEvents = function () {
|
|
8122
|
+
var _this = this;
|
|
8123
|
+
this.on(EVENTS.HOLD_START, this._onHorizontalHoldStart);
|
|
8124
|
+
this.on(EVENTS.MOVE, this._onHorizontalMove);
|
|
8125
|
+
this.on(EVENTS.MOVE_END, this._onHorizontalMoveEnd);
|
|
8126
|
+
this._sideFlicking.forEach(function (flicking, mainIndex) {
|
|
8127
|
+
flicking.on(EVENTS.HOLD_START, _this._onSideHoldStart);
|
|
8128
|
+
flicking.on(EVENTS.MOVE, _this._onSideMove);
|
|
8129
|
+
flicking.on(EVENTS.MOVE_END, _this._onSideMoveEnd);
|
|
8130
|
+
flicking.on(EVENTS.CHANGED, _this._onSideChanged);
|
|
8131
|
+
Object.keys(SIDE_EVENTS).forEach(function (name) {
|
|
8132
|
+
flicking.on(EVENTS[name], function (event) {
|
|
8133
|
+
_this.trigger(new ComponentEvent(SIDE_EVENTS[name], __assign({
|
|
8134
|
+
mainIndex: mainIndex
|
|
8135
|
+
}, event)));
|
|
8136
|
+
});
|
|
8016
8137
|
});
|
|
8017
|
-
|
|
8018
|
-
|
|
8019
|
-
|
|
8020
|
-
|
|
8021
|
-
|
|
8022
|
-
|
|
8138
|
+
});
|
|
8139
|
+
};
|
|
8140
|
+
__proto._createSideState = function () {
|
|
8141
|
+
var viewportEl = this.element;
|
|
8142
|
+
var cameraEl = this.camera.element;
|
|
8143
|
+
var panels = toArray(cameraEl.children);
|
|
8144
|
+
var isCrossStructure = getDataAttributes(viewportEl, "data-cross-").structure;
|
|
8145
|
+
var sideState = [];
|
|
8146
|
+
if (!isCrossStructure) {
|
|
8147
|
+
var groupPanels = this._getGroupFromAttribute(panels);
|
|
8148
|
+
var groupKeys = Object.keys(groupPanels);
|
|
8149
|
+
if (groupKeys.length) {
|
|
8150
|
+
sideState = this._getSideStateFromGroup(groupPanels);
|
|
8151
|
+
this.remove(0, this.panelCount - groupKeys.length);
|
|
8152
|
+
} else {
|
|
8153
|
+
sideState = this._getSideStateFromPanels(panels);
|
|
8154
|
+
}
|
|
8155
|
+
this._createCrossStructure(sideState);
|
|
8156
|
+
} else {
|
|
8157
|
+
sideState = this._getSideStateFromCrossStructure(panels);
|
|
8158
|
+
}
|
|
8159
|
+
void this.resize();
|
|
8160
|
+
return sideState;
|
|
8161
|
+
};
|
|
8162
|
+
__proto._createCrossStructure = function (sideState) {
|
|
8163
|
+
var _this = this;
|
|
8164
|
+
var sideCamera = document.createElement("div");
|
|
8165
|
+
var sidePanels = "";
|
|
8166
|
+
sideCamera.classList.add(CLASS.CAMERA);
|
|
8167
|
+
sideState.forEach(function (state, i) {
|
|
8168
|
+
var panel = _this.camera.children[i];
|
|
8169
|
+
sidePanels += state.element.innerHTML;
|
|
8170
|
+
Array.from(panel.attributes).forEach(function (attribute) {
|
|
8171
|
+
return panel.removeAttribute(attribute.name);
|
|
8023
8172
|
});
|
|
8024
|
-
|
|
8025
|
-
|
|
8026
|
-
|
|
8027
|
-
_this.
|
|
8028
|
-
|
|
8029
|
-
|
|
8030
|
-
|
|
8031
|
-
|
|
8173
|
+
});
|
|
8174
|
+
sideCamera.innerHTML = sidePanels;
|
|
8175
|
+
sideState.forEach(function (_, i) {
|
|
8176
|
+
var panel = _this.camera.children[i];
|
|
8177
|
+
[CLASS.VIEWPORT, CLASS.VERTICAL].forEach(function (className) {
|
|
8178
|
+
if (!panel.classList.contains(className)) {
|
|
8179
|
+
panel.classList.add(className);
|
|
8180
|
+
}
|
|
8032
8181
|
});
|
|
8182
|
+
panel.innerHTML = sideCamera.outerHTML;
|
|
8033
8183
|
});
|
|
8184
|
+
this.element.setAttribute("data-cross-structure", "true");
|
|
8034
8185
|
};
|
|
8035
|
-
__proto.
|
|
8036
|
-
var
|
|
8037
|
-
|
|
8038
|
-
|
|
8039
|
-
var
|
|
8040
|
-
|
|
8041
|
-
|
|
8042
|
-
|
|
8043
|
-
|
|
8044
|
-
|
|
8045
|
-
void _this.moveTo(i, 0);
|
|
8186
|
+
__proto._getGroupFromAttribute = function (panels) {
|
|
8187
|
+
var groupKeys = [];
|
|
8188
|
+
var groupPanels = {};
|
|
8189
|
+
panels.forEach(function (panel) {
|
|
8190
|
+
var groupKey = getDataAttributes(panel, "data-cross-").groupkey;
|
|
8191
|
+
if (groupKey && !includes(groupKeys, groupKey)) {
|
|
8192
|
+
groupKeys.push(groupKey);
|
|
8193
|
+
groupPanels[groupKey] = [panel];
|
|
8194
|
+
} else if (groupKey) {
|
|
8195
|
+
groupPanels[groupKey].push(panel);
|
|
8046
8196
|
}
|
|
8047
8197
|
});
|
|
8198
|
+
return groupPanels;
|
|
8199
|
+
};
|
|
8200
|
+
__proto._getSideStateFromGroup = function (groupPanels) {
|
|
8201
|
+
return Object.keys(groupPanels).reduce(function (state, key) {
|
|
8202
|
+
var start = state.length ? +state[state.length - 1].end + 1 : 0;
|
|
8203
|
+
var element = groupPanels[key].reduce(function (el, panel) {
|
|
8204
|
+
el.innerHTML += panel.outerHTML;
|
|
8205
|
+
return el;
|
|
8206
|
+
}, document.createElement("div"));
|
|
8207
|
+
return __spread(state, [{
|
|
8208
|
+
key: key,
|
|
8209
|
+
start: start,
|
|
8210
|
+
end: start + groupPanels[key].length - 1,
|
|
8211
|
+
element: element
|
|
8212
|
+
}]);
|
|
8213
|
+
}, []);
|
|
8214
|
+
};
|
|
8215
|
+
__proto._getSideStateFromPanels = function (panels) {
|
|
8216
|
+
return panels.reduce(function (state, panel, i) {
|
|
8217
|
+
var start = state.length ? +state[state.length - 1].end + 1 : 0;
|
|
8218
|
+
return __spread(state, [{
|
|
8219
|
+
key: i.toString(),
|
|
8220
|
+
start: start,
|
|
8221
|
+
end: start + panel.children.length - 1,
|
|
8222
|
+
element: panel
|
|
8223
|
+
}]);
|
|
8224
|
+
}, []);
|
|
8225
|
+
};
|
|
8226
|
+
__proto._getSideStateFromCrossStructure = function (panels) {
|
|
8227
|
+
var groupPanels = this._getGroupFromAttribute(panels);
|
|
8228
|
+
return this._getSideStateFromGroup(groupPanels);
|
|
8229
|
+
};
|
|
8230
|
+
__proto._createSideFlicking = function () {
|
|
8231
|
+
var _this = this;
|
|
8232
|
+
return this.sideState.map(function (state, i) {
|
|
8233
|
+
return new Flicking(_this.camera.children[i], __assign(__assign({}, _this.sideOptions), {
|
|
8234
|
+
horizontal: false,
|
|
8235
|
+
panelsPerView: 1,
|
|
8236
|
+
defaultIndex: state.start
|
|
8237
|
+
}));
|
|
8238
|
+
});
|
|
8048
8239
|
};
|
|
8049
8240
|
return CrossFlicking;
|
|
8050
8241
|
}(Flicking);
|
|
@@ -8263,5 +8454,5 @@ var parseAlign = function (alignVal) {
|
|
|
8263
8454
|
* egjs projects are licensed under the MIT license
|
|
8264
8455
|
*/
|
|
8265
8456
|
|
|
8266
|
-
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, checkExistence, circulateIndex, circulatePosition, clamp, Flicking as default, find, findIndex, findRight, 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 };
|
|
8457
|
+
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 };
|
|
8267
8458
|
//# sourceMappingURL=flicking.esm.js.map
|