@egjs/flicking 4.13.2-beta.1 → 4.14.0
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/core-packages-link.js +53 -16
- package/debug/reactive/index.html +240 -0
- package/declaration/index.d.ts +1 -0
- package/declaration/reactive/index.d.ts +25 -0
- package/dist/flicking.cjs.js +199 -10
- package/dist/flicking.cjs.js.map +1 -1
- package/dist/flicking.esm.js +193 -8
- package/dist/flicking.esm.js.map +1 -1
- package/dist/flicking.js +203 -12
- 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 +527 -26
- 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/src/index.ts +1 -0
- package/src/index.umd.ts +2 -0
- package/src/reactive/index.ts +326 -0
- package/debug/example/index.html +0 -82
package/dist/flicking.pkgd.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.
|
|
7
|
+
version: 4.14.0
|
|
8
8
|
*/
|
|
9
9
|
(function (global, factory) {
|
|
10
10
|
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
|
@@ -1089,7 +1089,7 @@ version: 4.13.2-beta.1
|
|
|
1089
1089
|
}
|
|
1090
1090
|
return -1;
|
|
1091
1091
|
};
|
|
1092
|
-
var getProgress = function (pos, prev, next) {
|
|
1092
|
+
var getProgress$1 = function (pos, prev, next) {
|
|
1093
1093
|
return (pos - prev) / (next - prev);
|
|
1094
1094
|
};
|
|
1095
1095
|
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
|
|
@@ -1210,7 +1210,7 @@ version: 4.13.2-beta.1
|
|
|
1210
1210
|
find: find$1,
|
|
1211
1211
|
findRight: findRight,
|
|
1212
1212
|
findIndex: findIndex,
|
|
1213
|
-
getProgress: getProgress,
|
|
1213
|
+
getProgress: getProgress$1,
|
|
1214
1214
|
getStyle: getStyle,
|
|
1215
1215
|
setSize: setSize,
|
|
1216
1216
|
isBetween: isBetween,
|
|
@@ -2252,6 +2252,20 @@ version: 4.13.2-beta.1
|
|
|
2252
2252
|
function keys(obj) {
|
|
2253
2253
|
return Object.keys(obj);
|
|
2254
2254
|
}
|
|
2255
|
+
/**
|
|
2256
|
+
* @hidden
|
|
2257
|
+
*/
|
|
2258
|
+
|
|
2259
|
+
function isObject(val) {
|
|
2260
|
+
return typeof val === "object";
|
|
2261
|
+
}
|
|
2262
|
+
/**
|
|
2263
|
+
* @hidden
|
|
2264
|
+
*/
|
|
2265
|
+
|
|
2266
|
+
function isFunction(val) {
|
|
2267
|
+
return typeof val === "function";
|
|
2268
|
+
}
|
|
2255
2269
|
|
|
2256
2270
|
/**
|
|
2257
2271
|
* cfcs
|
|
@@ -2301,6 +2315,15 @@ version: 4.13.2-beta.1
|
|
|
2301
2315
|
|
|
2302
2316
|
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
2303
2317
|
}
|
|
2318
|
+
function __spreadArray(to, from, pack) {
|
|
2319
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
2320
|
+
if (ar || !(i in from)) {
|
|
2321
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
2322
|
+
ar[i] = from[i];
|
|
2323
|
+
}
|
|
2324
|
+
}
|
|
2325
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
2326
|
+
}
|
|
2304
2327
|
|
|
2305
2328
|
/**
|
|
2306
2329
|
* cfcs
|
|
@@ -2629,6 +2652,56 @@ version: 4.13.2-beta.1
|
|
|
2629
2652
|
var prototype = Constructor.prototype;
|
|
2630
2653
|
injectReactiveSubscribe(prototype);
|
|
2631
2654
|
}
|
|
2655
|
+
|
|
2656
|
+
/**
|
|
2657
|
+
* cfcs
|
|
2658
|
+
* Copyright (c) 2022-present NAVER Corp.
|
|
2659
|
+
* MIT license
|
|
2660
|
+
*/
|
|
2661
|
+
|
|
2662
|
+
function makeReactiveObject(setup, all) {
|
|
2663
|
+
var result = isFunction(setup) ? setup() : setup;
|
|
2664
|
+
var reactiveObject = {};
|
|
2665
|
+
defineObservers(reactiveObject);
|
|
2666
|
+
keys(result).forEach(function (name) {
|
|
2667
|
+
var value = result[name];
|
|
2668
|
+
|
|
2669
|
+
if (isObserver(value)) {
|
|
2670
|
+
setObserver(reactiveObject, name, value);
|
|
2671
|
+
} else {
|
|
2672
|
+
setObserver(reactiveObject, name, observe(value));
|
|
2673
|
+
}
|
|
2674
|
+
|
|
2675
|
+
Observe(name)(reactiveObject, name);
|
|
2676
|
+
});
|
|
2677
|
+
injectReactiveSubscribe(reactiveObject);
|
|
2678
|
+
return reactiveObject;
|
|
2679
|
+
}
|
|
2680
|
+
/**
|
|
2681
|
+
* @description Make the return value of the corresponding object or function a reactive object.
|
|
2682
|
+
* @category Reactive
|
|
2683
|
+
* @param setup - The target object or function to which reactive is applied
|
|
2684
|
+
* @returns Makes all values into reactive objects.
|
|
2685
|
+
* @example
|
|
2686
|
+
* ```ts
|
|
2687
|
+
* import { reactive } from "@cfcs/core";
|
|
2688
|
+
*
|
|
2689
|
+
* const obj = reactive({
|
|
2690
|
+
* value1: 1,
|
|
2691
|
+
* value2: 2,
|
|
2692
|
+
* });
|
|
2693
|
+
*
|
|
2694
|
+
* obj.subscribe("value1", value1 => {
|
|
2695
|
+
* console.log(value1);
|
|
2696
|
+
* });
|
|
2697
|
+
* obj.value1 = 2;
|
|
2698
|
+
* ```
|
|
2699
|
+
*/
|
|
2700
|
+
|
|
2701
|
+
|
|
2702
|
+
function reactive(setup) {
|
|
2703
|
+
return makeReactiveObject(setup);
|
|
2704
|
+
}
|
|
2632
2705
|
/**
|
|
2633
2706
|
* @description Creates a mutable ref object. You can access the `.current` value and detect the value change through `.subscribe`.
|
|
2634
2707
|
* @category Reactive
|
|
@@ -2656,6 +2729,37 @@ version: 4.13.2-beta.1
|
|
|
2656
2729
|
function computed(computedCallback) {
|
|
2657
2730
|
return new ComputedObserver(computedCallback);
|
|
2658
2731
|
}
|
|
2732
|
+
|
|
2733
|
+
/**
|
|
2734
|
+
* cfcs
|
|
2735
|
+
* Copyright (c) 2022-present NAVER Corp.
|
|
2736
|
+
* MIT license
|
|
2737
|
+
*/
|
|
2738
|
+
/**
|
|
2739
|
+
* @hidden
|
|
2740
|
+
*/
|
|
2741
|
+
|
|
2742
|
+
function withReactiveMethods(ref, methods) {
|
|
2743
|
+
var obj = {};
|
|
2744
|
+
|
|
2745
|
+
if (!methods) {
|
|
2746
|
+
return obj;
|
|
2747
|
+
}
|
|
2748
|
+
|
|
2749
|
+
methods.forEach(function (name) {
|
|
2750
|
+
obj[name] = function () {
|
|
2751
|
+
var args = [];
|
|
2752
|
+
|
|
2753
|
+
for (var _i = 0; _i < arguments.length; _i++) {
|
|
2754
|
+
args[_i] = arguments[_i];
|
|
2755
|
+
}
|
|
2756
|
+
|
|
2757
|
+
var current = ref.current || ref.value;
|
|
2758
|
+
return current[name].apply(current, args);
|
|
2759
|
+
};
|
|
2760
|
+
});
|
|
2761
|
+
return obj;
|
|
2762
|
+
}
|
|
2659
2763
|
/**
|
|
2660
2764
|
* @hidden
|
|
2661
2765
|
*/
|
|
@@ -2709,6 +2813,227 @@ version: 4.13.2-beta.1
|
|
|
2709
2813
|
|
|
2710
2814
|
return observers[name];
|
|
2711
2815
|
}
|
|
2816
|
+
/**
|
|
2817
|
+
* @hidden
|
|
2818
|
+
*/
|
|
2819
|
+
|
|
2820
|
+
function setObserver(instance, name, observer) {
|
|
2821
|
+
var observers = getObservers(instance);
|
|
2822
|
+
observers[name] = observer;
|
|
2823
|
+
}
|
|
2824
|
+
/**
|
|
2825
|
+
* @description Whether that object is an observer instance
|
|
2826
|
+
* @category Reactive
|
|
2827
|
+
*/
|
|
2828
|
+
|
|
2829
|
+
function isObserver(val) {
|
|
2830
|
+
return val && isObject(val) && "current" in val && "subscribe" in val && "unsubscribe" in val;
|
|
2831
|
+
}
|
|
2832
|
+
|
|
2833
|
+
/**
|
|
2834
|
+
* @category Reactive
|
|
2835
|
+
* @hidden
|
|
2836
|
+
*/
|
|
2837
|
+
|
|
2838
|
+
function adaptReactive(adapter, props) {
|
|
2839
|
+
var objectAdapter = isFunction(adapter) ? {
|
|
2840
|
+
setup: adapter
|
|
2841
|
+
} : adapter;
|
|
2842
|
+
|
|
2843
|
+
function getProps() {
|
|
2844
|
+
var _a, _b, _c, _d, _e;
|
|
2845
|
+
|
|
2846
|
+
return (_e = (_c = (_a = props === null || props === void 0 ? void 0 : props()) !== null && _a !== void 0 ? _a : (_b = objectAdapter.props) === null || _b === void 0 ? void 0 : _b.call(objectAdapter)) !== null && _c !== void 0 ? _c : (_d = objectAdapter.data) === null || _d === void 0 ? void 0 : _d.call(objectAdapter)) !== null && _e !== void 0 ? _e : {};
|
|
2847
|
+
}
|
|
2848
|
+
|
|
2849
|
+
var eventEmitter = new Component();
|
|
2850
|
+
var mountedHooks = [];
|
|
2851
|
+
var initHooks = [];
|
|
2852
|
+
var destroyHooks = [];
|
|
2853
|
+
var onHooks = [];
|
|
2854
|
+
var instanceRef = {
|
|
2855
|
+
current: null
|
|
2856
|
+
};
|
|
2857
|
+
var offHooksList = [];
|
|
2858
|
+
var initialState = null;
|
|
2859
|
+
var eventNames = [];
|
|
2860
|
+
var methodNames = [];
|
|
2861
|
+
|
|
2862
|
+
var onMounted = function (callback) {
|
|
2863
|
+
mountedHooks.push(callback);
|
|
2864
|
+
};
|
|
2865
|
+
|
|
2866
|
+
var onInit = function (callback) {
|
|
2867
|
+
initHooks.push(callback);
|
|
2868
|
+
};
|
|
2869
|
+
|
|
2870
|
+
var onDestroy = function (callback) {
|
|
2871
|
+
destroyHooks.push(callback);
|
|
2872
|
+
};
|
|
2873
|
+
|
|
2874
|
+
var on = function (callback) {
|
|
2875
|
+
onHooks.push(callback);
|
|
2876
|
+
};
|
|
2877
|
+
|
|
2878
|
+
var emit = function (eventName) {
|
|
2879
|
+
var params = [];
|
|
2880
|
+
|
|
2881
|
+
for (var _i = 1; _i < arguments.length; _i++) {
|
|
2882
|
+
params[_i - 1] = arguments[_i];
|
|
2883
|
+
}
|
|
2884
|
+
|
|
2885
|
+
eventEmitter.trigger.apply(eventEmitter, __spreadArray([eventName], params, false));
|
|
2886
|
+
};
|
|
2887
|
+
|
|
2888
|
+
var setInitialState = function (state) {
|
|
2889
|
+
initialState = state;
|
|
2890
|
+
};
|
|
2891
|
+
|
|
2892
|
+
var setEvents = function (events) {
|
|
2893
|
+
eventNames = events;
|
|
2894
|
+
};
|
|
2895
|
+
|
|
2896
|
+
var setMethods = function (methods) {
|
|
2897
|
+
methodNames = methods;
|
|
2898
|
+
};
|
|
2899
|
+
|
|
2900
|
+
if (objectAdapter.setup) {
|
|
2901
|
+
instanceRef.current = objectAdapter.setup({
|
|
2902
|
+
getProps: getProps,
|
|
2903
|
+
setInitialState: setInitialState,
|
|
2904
|
+
setEvents: setEvents,
|
|
2905
|
+
setMethods: setMethods,
|
|
2906
|
+
onMounted: onMounted,
|
|
2907
|
+
onDestroy: onDestroy,
|
|
2908
|
+
onInit: onInit,
|
|
2909
|
+
emit: emit,
|
|
2910
|
+
on: on
|
|
2911
|
+
}) || null;
|
|
2912
|
+
}
|
|
2913
|
+
|
|
2914
|
+
if (objectAdapter.created) {
|
|
2915
|
+
instanceRef.current = objectAdapter.created(getProps()) || null;
|
|
2916
|
+
}
|
|
2917
|
+
|
|
2918
|
+
if (objectAdapter.events) {
|
|
2919
|
+
setEvents(objectAdapter.events);
|
|
2920
|
+
}
|
|
2921
|
+
|
|
2922
|
+
if (objectAdapter.state) {
|
|
2923
|
+
setInitialState(objectAdapter.state);
|
|
2924
|
+
}
|
|
2925
|
+
|
|
2926
|
+
if (objectAdapter.methods) {
|
|
2927
|
+
setMethods(objectAdapter.methods);
|
|
2928
|
+
}
|
|
2929
|
+
|
|
2930
|
+
if (objectAdapter.mounted) {
|
|
2931
|
+
onMounted(objectAdapter.mounted);
|
|
2932
|
+
}
|
|
2933
|
+
|
|
2934
|
+
if (objectAdapter.destroy) {
|
|
2935
|
+
destroyHooks.push(objectAdapter.destroy);
|
|
2936
|
+
}
|
|
2937
|
+
|
|
2938
|
+
if (objectAdapter.init) {
|
|
2939
|
+
initHooks.push(objectAdapter.init);
|
|
2940
|
+
}
|
|
2941
|
+
|
|
2942
|
+
if (objectAdapter.on) {
|
|
2943
|
+
onHooks.push(function (instance, eventName, listener) {
|
|
2944
|
+
var off = objectAdapter.on(instance, eventName, listener);
|
|
2945
|
+
return function () {
|
|
2946
|
+
var _a;
|
|
2947
|
+
|
|
2948
|
+
off && off();
|
|
2949
|
+
(_a = objectAdapter.off) === null || _a === void 0 ? void 0 : _a.call(objectAdapter, instance, eventName, listener);
|
|
2950
|
+
};
|
|
2951
|
+
});
|
|
2952
|
+
}
|
|
2953
|
+
|
|
2954
|
+
return {
|
|
2955
|
+
events: function () {
|
|
2956
|
+
return eventNames;
|
|
2957
|
+
},
|
|
2958
|
+
state: function () {
|
|
2959
|
+
var inst = instanceRef.current;
|
|
2960
|
+
|
|
2961
|
+
if (initialState) {
|
|
2962
|
+
return initialState;
|
|
2963
|
+
}
|
|
2964
|
+
|
|
2965
|
+
if (inst) {
|
|
2966
|
+
var observers_1 = getObservers(inst);
|
|
2967
|
+
setInitialState(keys(observers_1).reduce(function (prev, cur) {
|
|
2968
|
+
prev[cur] = observers_1[cur].current;
|
|
2969
|
+
return prev;
|
|
2970
|
+
}, {}));
|
|
2971
|
+
}
|
|
2972
|
+
|
|
2973
|
+
return initialState || {};
|
|
2974
|
+
},
|
|
2975
|
+
instance: function () {
|
|
2976
|
+
return instanceRef.current;
|
|
2977
|
+
},
|
|
2978
|
+
mounted: function () {
|
|
2979
|
+
var props = getProps();
|
|
2980
|
+
mountedHooks.forEach(function (hook) {
|
|
2981
|
+
instanceRef.current = hook(props, instanceRef.current) || instanceRef.current;
|
|
2982
|
+
});
|
|
2983
|
+
},
|
|
2984
|
+
init: function () {
|
|
2985
|
+
// on events
|
|
2986
|
+
var instance = instanceRef.current;
|
|
2987
|
+
var props = getProps();
|
|
2988
|
+
offHooksList = eventNames.map(function (eventName) {
|
|
2989
|
+
var listener = function () {
|
|
2990
|
+
var _a;
|
|
2991
|
+
|
|
2992
|
+
var params = [];
|
|
2993
|
+
|
|
2994
|
+
for (var _i = 0; _i < arguments.length; _i++) {
|
|
2995
|
+
params[_i] = arguments[_i];
|
|
2996
|
+
}
|
|
2997
|
+
|
|
2998
|
+
(_a = eventEmitter).trigger.apply(_a, __spreadArray([eventName], params, false));
|
|
2999
|
+
};
|
|
3000
|
+
|
|
3001
|
+
var instance = instanceRef.current;
|
|
3002
|
+
return onHooks.map(function (hook) {
|
|
3003
|
+
return hook(instance, eventName, listener);
|
|
3004
|
+
}).filter(Boolean);
|
|
3005
|
+
}); // init
|
|
3006
|
+
|
|
3007
|
+
initHooks.forEach(function (hook) {
|
|
3008
|
+
hook(instance, props);
|
|
3009
|
+
});
|
|
3010
|
+
},
|
|
3011
|
+
destroy: function () {
|
|
3012
|
+
// off events
|
|
3013
|
+
offHooksList.forEach(function (offHooks) {
|
|
3014
|
+
offHooks.forEach(function (hook) {
|
|
3015
|
+
hook();
|
|
3016
|
+
});
|
|
3017
|
+
}); // destroy
|
|
3018
|
+
|
|
3019
|
+
eventEmitter.off();
|
|
3020
|
+
var instance = instanceRef.current;
|
|
3021
|
+
var props = getProps();
|
|
3022
|
+
destroyHooks.forEach(function (hook) {
|
|
3023
|
+
hook(instance, props);
|
|
3024
|
+
});
|
|
3025
|
+
},
|
|
3026
|
+
methods: function () {
|
|
3027
|
+
return withReactiveMethods(instanceRef, methodNames);
|
|
3028
|
+
},
|
|
3029
|
+
on: function (eventName, listener) {
|
|
3030
|
+
eventEmitter.on(eventName, listener);
|
|
3031
|
+
},
|
|
3032
|
+
off: function (eventName, listener) {
|
|
3033
|
+
eventEmitter.off(eventName, listener);
|
|
3034
|
+
}
|
|
3035
|
+
};
|
|
3036
|
+
}
|
|
2712
3037
|
|
|
2713
3038
|
/**
|
|
2714
3039
|
* cfcs
|
|
@@ -2779,7 +3104,7 @@ version: 4.13.2-beta.1
|
|
|
2779
3104
|
license: MIT
|
|
2780
3105
|
author: NAVER Corp.
|
|
2781
3106
|
repository: https://github.com/naver/egjs-axes
|
|
2782
|
-
version: 3.9.
|
|
3107
|
+
version: 3.9.1
|
|
2783
3108
|
*/
|
|
2784
3109
|
|
|
2785
3110
|
/*! *****************************************************************************
|
|
@@ -3705,19 +4030,6 @@ version: 4.13.2-beta.1
|
|
|
3705
4030
|
var deltaTime = latestInterval ? timeStamp - latestInterval.timestamp : 0;
|
|
3706
4031
|
var velocityX = prevEvent ? prevEvent.velocityX : 0;
|
|
3707
4032
|
var velocityY = prevEvent ? prevEvent.velocityY : 0;
|
|
3708
|
-
var directionX = prevEvent ? prevEvent.directionX : 1;
|
|
3709
|
-
var directionY = prevEvent ? prevEvent.directionY : 1;
|
|
3710
|
-
// If offset is 0, it inherits the direction of the previous event.
|
|
3711
|
-
if (offsetX > 0) {
|
|
3712
|
-
directionX = 1;
|
|
3713
|
-
} else if (offsetX < 0) {
|
|
3714
|
-
directionX = -1;
|
|
3715
|
-
}
|
|
3716
|
-
if (offsetY > 0) {
|
|
3717
|
-
directionY = 1;
|
|
3718
|
-
} else if (offsetY < 0) {
|
|
3719
|
-
directionY = -1;
|
|
3720
|
-
}
|
|
3721
4033
|
if (!latestInterval || deltaTime >= VELOCITY_INTERVAL) {
|
|
3722
4034
|
if (latestInterval) {
|
|
3723
4035
|
_a = [(deltaX - latestInterval.deltaX) / deltaTime, (deltaY - latestInterval.deltaY) / deltaTime], velocityX = _a[0], velocityY = _a[1];
|
|
@@ -3737,8 +4049,6 @@ version: 4.13.2-beta.1
|
|
|
3737
4049
|
deltaY: deltaY,
|
|
3738
4050
|
offsetX: offsetX,
|
|
3739
4051
|
offsetY: offsetY,
|
|
3740
|
-
directionX: directionX,
|
|
3741
|
-
directionY: directionY,
|
|
3742
4052
|
velocityX: velocityX,
|
|
3743
4053
|
velocityY: velocityY,
|
|
3744
4054
|
preventSystemEvent: true
|
|
@@ -5202,7 +5512,7 @@ version: 4.13.2-beta.1
|
|
|
5202
5512
|
* eg.Axes.VERSION; // ex) 3.3.3
|
|
5203
5513
|
* ```
|
|
5204
5514
|
*/
|
|
5205
|
-
Axes.VERSION = "3.9.
|
|
5515
|
+
Axes.VERSION = "3.9.1";
|
|
5206
5516
|
/* eslint-enable */
|
|
5207
5517
|
/**
|
|
5208
5518
|
* @name TRANSFORM
|
|
@@ -5553,7 +5863,7 @@ version: 4.13.2-beta.1
|
|
|
5553
5863
|
this._detachWindowEvent(activeEvent);
|
|
5554
5864
|
clearTimeout(this._rightEdgeTimer);
|
|
5555
5865
|
var prevEvent = activeEvent.prevEvent;
|
|
5556
|
-
var velocity = this._isOverThreshold ? this._getOffset([Math.abs(prevEvent.velocityX) * prevEvent.
|
|
5866
|
+
var velocity = this._isOverThreshold ? this._getOffset([Math.abs(prevEvent.velocityX) * (prevEvent.offsetX < 0 ? -1 : 1), Math.abs(prevEvent.velocityY) * (prevEvent.offsetY < 0 ? -1 : 1)], [useDirection(DIRECTION_HORIZONTAL, this._direction), useDirection(DIRECTION_VERTICAL, this._direction)]) : [0, 0];
|
|
5557
5867
|
activeEvent.onRelease();
|
|
5558
5868
|
this._observer.release(this, prevEvent, velocity);
|
|
5559
5869
|
};
|
|
@@ -8361,7 +8671,7 @@ version: 4.13.2-beta.1
|
|
|
8361
8671
|
if (prevPosition > panelPos) {
|
|
8362
8672
|
prevPosition -= rangeDiff;
|
|
8363
8673
|
}
|
|
8364
|
-
return nearestPanel.index - 1 + getProgress(position, prevPosition, panelPos);
|
|
8674
|
+
return nearestPanel.index - 1 + getProgress$1(position, prevPosition, panelPos);
|
|
8365
8675
|
} else {
|
|
8366
8676
|
var nextPanel = nearestPanel.next();
|
|
8367
8677
|
var nextPosition = nextPanel ? nextPanel.position + nextPanel.offset : nextRange + bounceSize[1];
|
|
@@ -8369,7 +8679,7 @@ version: 4.13.2-beta.1
|
|
|
8369
8679
|
if (nextPosition < panelPos) {
|
|
8370
8680
|
nextPosition += rangeDiff;
|
|
8371
8681
|
}
|
|
8372
|
-
return nearestPanel.index + getProgress(position, panelPos, nextPosition);
|
|
8682
|
+
return nearestPanel.index + getProgress$1(position, panelPos, nextPosition);
|
|
8373
8683
|
}
|
|
8374
8684
|
},
|
|
8375
8685
|
enumerable: false,
|
|
@@ -10595,10 +10905,10 @@ version: 4.13.2-beta.1
|
|
|
10595
10905
|
}
|
|
10596
10906
|
if (camPos < position) {
|
|
10597
10907
|
var disappearPosNext = position + (camera.size - camera.alignPosition) + alignPosition;
|
|
10598
|
-
return -getProgress(camPos, position, disappearPosNext);
|
|
10908
|
+
return -getProgress$1(camPos, position, disappearPosNext);
|
|
10599
10909
|
} else {
|
|
10600
10910
|
var disappearPosPrev = position - (camera.alignPosition + this._size - alignPosition);
|
|
10601
|
-
return 1 - getProgress(camPos, disappearPosPrev, position);
|
|
10911
|
+
return 1 - getProgress$1(camPos, disappearPosPrev, position);
|
|
10602
10912
|
}
|
|
10603
10913
|
},
|
|
10604
10914
|
enumerable: false,
|
|
@@ -13246,7 +13556,7 @@ version: 4.13.2-beta.1
|
|
|
13246
13556
|
* Flicking.VERSION; // ex) 4.0.0
|
|
13247
13557
|
* ```
|
|
13248
13558
|
*/
|
|
13249
|
-
Flicking.VERSION = "4.
|
|
13559
|
+
Flicking.VERSION = "4.14.0";
|
|
13250
13560
|
return Flicking;
|
|
13251
13561
|
}(Component);
|
|
13252
13562
|
|
|
@@ -13833,6 +14143,196 @@ version: 4.13.2-beta.1
|
|
|
13833
14143
|
getDefaultCameraTransform: getDefaultCameraTransform
|
|
13834
14144
|
};
|
|
13835
14145
|
|
|
14146
|
+
// Check if Flicking has reached the first panel
|
|
14147
|
+
var getIsReachStart = function (flicking) {
|
|
14148
|
+
return !flicking.circular && flicking.index === 0;
|
|
14149
|
+
};
|
|
14150
|
+
// Check if Flicking has reached the last panel
|
|
14151
|
+
var getIsReachEnd = function (flicking) {
|
|
14152
|
+
return !flicking.circular && flicking.index === flicking.panelCount - 1;
|
|
14153
|
+
};
|
|
14154
|
+
// Get the total number of panels
|
|
14155
|
+
var getTotalPanelCount = function (flicking) {
|
|
14156
|
+
return flicking.panelCount;
|
|
14157
|
+
};
|
|
14158
|
+
// Get the current active panel index
|
|
14159
|
+
var getCurrentPanelIndex = function (flicking) {
|
|
14160
|
+
return flicking.index;
|
|
14161
|
+
};
|
|
14162
|
+
// Calculate the overall scroll progress percentage based on the current camera position
|
|
14163
|
+
var getProgress = function (flicking) {
|
|
14164
|
+
var cam = flicking.camera;
|
|
14165
|
+
var progressRatio = (cam.position - cam.range.min) / (cam.range.max - cam.range.min);
|
|
14166
|
+
var percent = Math.min(Math.max(progressRatio, 0), 1) * 100;
|
|
14167
|
+
return percent;
|
|
14168
|
+
};
|
|
14169
|
+
// Calculate the progress between panels including decimal values
|
|
14170
|
+
var getIndexProgress = function (flicking) {
|
|
14171
|
+
var cam = flicking.camera;
|
|
14172
|
+
var anchorPoints = cam.anchorPoints;
|
|
14173
|
+
var length = anchorPoints.length;
|
|
14174
|
+
var cameraPosition = cam.position;
|
|
14175
|
+
var isCircular = flicking.circularEnabled;
|
|
14176
|
+
var indexProgress = 0;
|
|
14177
|
+
var _a = cam.range,
|
|
14178
|
+
min = _a.min,
|
|
14179
|
+
max = _a.max;
|
|
14180
|
+
var firstAnchorPoint = anchorPoints[0];
|
|
14181
|
+
var lastAnchorPoint = anchorPoints[length - 1];
|
|
14182
|
+
var distanceLastToFirst = max - lastAnchorPoint.position + (firstAnchorPoint.position - min);
|
|
14183
|
+
anchorPoints.some(function (anchorPoint, index) {
|
|
14184
|
+
var anchorPosition = anchorPoint.position;
|
|
14185
|
+
var nextAnchorPoint = anchorPoints[index + 1];
|
|
14186
|
+
if (index === 0 && cameraPosition <= anchorPosition) {
|
|
14187
|
+
if (isCircular) {
|
|
14188
|
+
indexProgress = (cameraPosition - anchorPosition) / distanceLastToFirst;
|
|
14189
|
+
} else {
|
|
14190
|
+
indexProgress = (cameraPosition - anchorPosition) / anchorPoint.panel.size;
|
|
14191
|
+
}
|
|
14192
|
+
} else if (index === length - 1 && cameraPosition >= anchorPosition) {
|
|
14193
|
+
if (isCircular) {
|
|
14194
|
+
indexProgress = index + (cameraPosition - anchorPosition) / distanceLastToFirst;
|
|
14195
|
+
} else {
|
|
14196
|
+
indexProgress = index + (cameraPosition - anchorPosition) / anchorPoint.panel.size;
|
|
14197
|
+
}
|
|
14198
|
+
} else if (nextAnchorPoint && anchorPosition <= cameraPosition && cameraPosition <= nextAnchorPoint.position) {
|
|
14199
|
+
indexProgress = index + (cameraPosition - anchorPosition) / (nextAnchorPoint.position - anchorPosition);
|
|
14200
|
+
} else {
|
|
14201
|
+
return false;
|
|
14202
|
+
}
|
|
14203
|
+
return true;
|
|
14204
|
+
});
|
|
14205
|
+
return indexProgress;
|
|
14206
|
+
};
|
|
14207
|
+
/**
|
|
14208
|
+
* Internal reactive API adapter for Flicking that manages state and event listeners
|
|
14209
|
+
* This adapter is used internally by framework-specific packages (react-flicking, vue-flicking, etc.)
|
|
14210
|
+
* to provide reactive API support. Users rarely need to use this directly.
|
|
14211
|
+
* @ko Flicking의 상태와 이벤트 리스너를 관리하는 내부 반응형 API 어댑터
|
|
14212
|
+
* 이 어댑터는 react-flicking, vue-flicking 등의 프레임워크별 패키지에서 내부적으로 사용되어
|
|
14213
|
+
* 반응형 API 지원을 제공합니다. 사용자가 직접 사용할 일은 거의 없습니다.
|
|
14214
|
+
* @param onInit - Callback when reactive object is initialized<ko>반응형 객체가 초기화될 때 호출되는 콜백</ko>
|
|
14215
|
+
* @param onDestroy - Callback when reactive object is destroyed<ko>반응형 객체가 파괴될 때 호출되는 콜백</ko>
|
|
14216
|
+
* @param setMethods - Function to set available methods<ko>사용 가능한 메서드를 설정하는 함수</ko>
|
|
14217
|
+
* @returns Reactive object with Flicking state and methods<ko>Flicking 상태와 메서드를 포함한 반응형 객체</ko>
|
|
14218
|
+
*/
|
|
14219
|
+
var flickingReactiveAPIAdapter = function (_a) {
|
|
14220
|
+
var _b, _c, _d;
|
|
14221
|
+
var onInit = _a.onInit,
|
|
14222
|
+
onDestroy = _a.onDestroy,
|
|
14223
|
+
setMethods = _a.setMethods,
|
|
14224
|
+
getProps = _a.getProps;
|
|
14225
|
+
var flicking;
|
|
14226
|
+
// Move to a specific panel index
|
|
14227
|
+
var moveTo = function (i) {
|
|
14228
|
+
if (flicking == null) {
|
|
14229
|
+
return Promise.reject(new Error("Flicking instance is not available"));
|
|
14230
|
+
}
|
|
14231
|
+
if (flicking === null || flicking === void 0 ? void 0 : flicking.animating) {
|
|
14232
|
+
return Promise.resolve();
|
|
14233
|
+
}
|
|
14234
|
+
return flicking.moveTo(i);
|
|
14235
|
+
};
|
|
14236
|
+
setMethods(["moveTo"]);
|
|
14237
|
+
var options = getProps().options;
|
|
14238
|
+
// options를 고려하지 않고 초기값을 설정해도 동작에는 아무런 문제가 없으나, 이 시점의 초기값과 컴포넌트 init 단계에서의 초기값이 다르면 화면 리렌더링이 발생할 수 있으므로
|
|
14239
|
+
// 이렇게 미리 옵션을 통해서 예측할 수 있는 부분들은 맞춰둔다.
|
|
14240
|
+
var reactiveObj = reactive({
|
|
14241
|
+
isReachStart: (options === null || options === void 0 ? void 0 : options.defaultIndex) ? (options === null || options === void 0 ? void 0 : options.defaultIndex) === 0 : true,
|
|
14242
|
+
isReachEnd: (options === null || options === void 0 ? void 0 : options.totalPanelCount) && (options === null || options === void 0 ? void 0 : options.defaultIndex) ? options.defaultIndex === options.totalPanelCount - 1 : false,
|
|
14243
|
+
totalPanelCount: (_b = options === null || options === void 0 ? void 0 : options.totalPanelCount) !== null && _b !== void 0 ? _b : 0,
|
|
14244
|
+
currentPanelIndex: (_c = options === null || options === void 0 ? void 0 : options.defaultIndex) !== null && _c !== void 0 ? _c : 0,
|
|
14245
|
+
progress: 0,
|
|
14246
|
+
indexProgress: (_d = options === null || options === void 0 ? void 0 : options.defaultIndex) !== null && _d !== void 0 ? _d : 0,
|
|
14247
|
+
moveTo: moveTo
|
|
14248
|
+
});
|
|
14249
|
+
// Update state when panel changes
|
|
14250
|
+
var onChanged = function () {
|
|
14251
|
+
if (flicking === undefined) return;
|
|
14252
|
+
reactiveObj.isReachStart = getIsReachStart(flicking);
|
|
14253
|
+
reactiveObj.isReachEnd = getIsReachEnd(flicking);
|
|
14254
|
+
reactiveObj.currentPanelIndex = getCurrentPanelIndex(flicking);
|
|
14255
|
+
};
|
|
14256
|
+
// Update state when panel count changes
|
|
14257
|
+
var onPanelChange = function () {
|
|
14258
|
+
if (flicking === undefined) return;
|
|
14259
|
+
onChanged();
|
|
14260
|
+
reactiveObj.totalPanelCount = getTotalPanelCount(flicking);
|
|
14261
|
+
};
|
|
14262
|
+
// Update progress when camera moves
|
|
14263
|
+
var onMove = function () {
|
|
14264
|
+
if (flicking === undefined) return;
|
|
14265
|
+
reactiveObj.progress = getProgress(flicking);
|
|
14266
|
+
reactiveObj.indexProgress = getIndexProgress(flicking);
|
|
14267
|
+
};
|
|
14268
|
+
onInit(function (inst, data) {
|
|
14269
|
+
flicking = data.flicking;
|
|
14270
|
+
if (flicking === undefined) return;
|
|
14271
|
+
reactiveObj.isReachStart = getIsReachStart(flicking);
|
|
14272
|
+
reactiveObj.isReachEnd = getIsReachEnd(flicking);
|
|
14273
|
+
reactiveObj.currentPanelIndex = getCurrentPanelIndex(flicking);
|
|
14274
|
+
reactiveObj.progress = getProgress(flicking);
|
|
14275
|
+
reactiveObj.totalPanelCount = getTotalPanelCount(flicking);
|
|
14276
|
+
flicking === null || flicking === void 0 ? void 0 : flicking.on("changed", onChanged);
|
|
14277
|
+
flicking === null || flicking === void 0 ? void 0 : flicking.on("panelChange", onPanelChange);
|
|
14278
|
+
flicking === null || flicking === void 0 ? void 0 : flicking.on("move", onMove);
|
|
14279
|
+
});
|
|
14280
|
+
onDestroy(function () {
|
|
14281
|
+
flicking === null || flicking === void 0 ? void 0 : flicking.off("changed", onChanged);
|
|
14282
|
+
flicking === null || flicking === void 0 ? void 0 : flicking.off("panelChange", onPanelChange);
|
|
14283
|
+
flicking === null || flicking === void 0 ? void 0 : flicking.off("move", onMove);
|
|
14284
|
+
});
|
|
14285
|
+
return reactiveObj;
|
|
14286
|
+
};
|
|
14287
|
+
/**
|
|
14288
|
+
* Connect Flicking instance to reactive API
|
|
14289
|
+
* @ko Flicking 인스턴스를 반응형 API에 연결합니다
|
|
14290
|
+
* @param {Flicking} flicking - Flicking instance to connect<ko>연결할 Flicking 인스턴스</ko>
|
|
14291
|
+
* @param {FlickingReactiveAPIOptions} [options] - Flicking options<ko>Flicking 옵션</ko>
|
|
14292
|
+
* @returns {FlickingReactiveObject} Reactive object with Flicking state and methods<ko>Flicking 상태와 메서드를 포함한 반응형 객체</ko>
|
|
14293
|
+
* @example
|
|
14294
|
+
* ```js
|
|
14295
|
+
* import Flicking, { connectFlickingReactiveAPI } from "@egjs/flicking";
|
|
14296
|
+
*
|
|
14297
|
+
* const flicking = new Flicking("#el");
|
|
14298
|
+
* const reactiveObj = connectFlickingReactiveAPI(flicking);
|
|
14299
|
+
*
|
|
14300
|
+
* // Access reactive state
|
|
14301
|
+
* console.log("Current panel:", reactiveObj.currentPanelIndex);
|
|
14302
|
+
* console.log("Progress:", reactiveObj.progress + "%");
|
|
14303
|
+
* console.log("Is at start:", reactiveObj.isReachStart);
|
|
14304
|
+
* console.log("Is at end:", reactiveObj.isReachEnd);
|
|
14305
|
+
* console.log("Total panels:", reactiveObj.totalPanelCount);
|
|
14306
|
+
* console.log("Index progress:", reactiveObj.indexProgress);
|
|
14307
|
+
*
|
|
14308
|
+
* // Subscribe to state changes
|
|
14309
|
+
* reactiveObj.subscribe("currentPanelIndex", (nextValue) => {
|
|
14310
|
+
* console.log("Panel changed to:", nextValue);
|
|
14311
|
+
* });
|
|
14312
|
+
*
|
|
14313
|
+
* // Use reactive methods
|
|
14314
|
+
* reactiveObj.moveTo(2); // Move to third panel
|
|
14315
|
+
* ```
|
|
14316
|
+
*/
|
|
14317
|
+
var connectFlickingReactiveAPI = function (flicking, options) {
|
|
14318
|
+
var obj = adaptReactive(flickingReactiveAPIAdapter, function () {
|
|
14319
|
+
return {
|
|
14320
|
+
flicking: flicking,
|
|
14321
|
+
options: options
|
|
14322
|
+
};
|
|
14323
|
+
});
|
|
14324
|
+
obj.mounted();
|
|
14325
|
+
var instance = obj.instance();
|
|
14326
|
+
obj.init();
|
|
14327
|
+
return instance;
|
|
14328
|
+
};
|
|
14329
|
+
|
|
14330
|
+
var FlickingReactiveAPI = {
|
|
14331
|
+
__proto__: null,
|
|
14332
|
+
flickingReactiveAPIAdapter: flickingReactiveAPIAdapter,
|
|
14333
|
+
connectFlickingReactiveAPI: connectFlickingReactiveAPI
|
|
14334
|
+
};
|
|
14335
|
+
|
|
13836
14336
|
/*
|
|
13837
14337
|
* Copyright (c) 2015 NAVER Corp.
|
|
13838
14338
|
* egjs projects are licensed under the MIT license
|
|
@@ -13845,6 +14345,7 @@ version: 4.13.2-beta.1
|
|
|
13845
14345
|
merge(Flicking, CFC);
|
|
13846
14346
|
merge(Flicking, Utils);
|
|
13847
14347
|
merge(Flicking, CrossFlicking$1);
|
|
14348
|
+
merge(Flicking, FlickingReactiveAPI);
|
|
13848
14349
|
|
|
13849
14350
|
return Flicking;
|
|
13850
14351
|
|