@egjs/flicking
Version:
Everyday 30 million people experience. It's reliable, flexible and extendable carousel.
1,372 lines (1,352 loc) • 550 kB
JavaScript
/*
Copyright (c) 2015-present NAVER Corp.
name: @egjs/flicking
license: MIT
author: NAVER Corp.
repository: https://github.com/naver/egjs-flicking
version: 4.13.1
*/
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Flicking = factory());
})(this, (function () { 'use strict';
/******************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise, SuppressedError, Symbol */
var extendStatics$3 = function (d, b) {
extendStatics$3 = Object.setPrototypeOf || {
__proto__: []
} instanceof Array && function (d, b) {
d.__proto__ = b;
} || function (d, b) {
for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];
};
return extendStatics$3(d, b);
};
function __extends$3(d, b) {
if (typeof b !== "function" && b !== null) throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics$3(d, b);
function __() {
this.constructor = d;
}
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var __assign$2 = function () {
__assign$2 = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign$2.apply(this, arguments);
};
function __awaiter(thisArg, _arguments, P, generator) {
function adopt(value) {
return value instanceof P ? value : new P(function (resolve) {
resolve(value);
});
}
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) {
try {
step(generator.next(value));
} catch (e) {
reject(e);
}
}
function rejected(value) {
try {
step(generator["throw"](value));
} catch (e) {
reject(e);
}
}
function step(result) {
result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
}
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
}
function __generator(thisArg, body) {
var _ = {
label: 0,
sent: function () {
if (t[0] & 1) throw t[1];
return t[1];
},
trys: [],
ops: []
},
f,
y,
t,
g;
return g = {
next: verb(0),
"throw": verb(1),
"return": verb(2)
}, typeof Symbol === "function" && (g[Symbol.iterator] = function () {
return this;
}), g;
function verb(n) {
return function (v) {
return step([n, v]);
};
}
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (g && (g = 0, op[0] && (_ = 0)), _) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0:
case 1:
t = op;
break;
case 4:
_.label++;
return {
value: op[1],
done: false
};
case 5:
_.label++;
y = op[1];
op = [0];
continue;
case 7:
op = _.ops.pop();
_.trys.pop();
continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
_ = 0;
continue;
}
if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
_.label = op[1];
break;
}
if (op[0] === 6 && _.label < t[1]) {
_.label = t[1];
t = op;
break;
}
if (t && _.label < t[2]) {
_.label = t[2];
_.ops.push(op);
break;
}
if (t[2]) _.ops.pop();
_.trys.pop();
continue;
}
op = body.call(thisArg, _);
} catch (e) {
op = [6, e];
y = 0;
} finally {
f = t = 0;
}
if (op[0] & 5) throw op[1];
return {
value: op[0] ? op[1] : void 0,
done: true
};
}
}
function __values$1(o) {
var s = typeof Symbol === "function" && Symbol.iterator,
m = s && o[s],
i = 0;
if (m) return m.call(o);
if (o && typeof o.length === "number") return {
next: function () {
if (o && i >= o.length) o = void 0;
return {
value: o && o[i++],
done: !o
};
}
};
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
}
function __read$1(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o),
r,
ar = [],
e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
} catch (error) {
e = {
error: error
};
} finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
} finally {
if (e) throw e.error;
}
}
return ar;
}
/** @deprecated */
function __spread$1() {
for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read$1(arguments[i]));
return ar;
}
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
var e = new Error(message);
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
};
/*
Copyright (c) NAVER Corp.
name: @egjs/component
license: MIT
author: NAVER Corp.
repository: https://github.com/naver/egjs-component
version: 3.0.4
*/
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
function __values(o) {
var s = typeof Symbol === "function" && Symbol.iterator,
m = s && o[s],
i = 0;
if (m) return m.call(o);
if (o && typeof o.length === "number") return {
next: function () {
if (o && i >= o.length) o = void 0;
return {
value: o && o[i++],
done: !o
};
}
};
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
}
function __read(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o),
r,
ar = [],
e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
} catch (error) {
e = {
error: error
};
} finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
} finally {
if (e) throw e.error;
}
}
return ar;
}
function __spread() {
for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
return ar;
}
/*
* Copyright (c) 2015 NAVER Corp.
* egjs projects are licensed under the MIT license
*/
var isUndefined = function (value) {
return typeof value === "undefined";
};
// This class name is not matched to file name intentionally
/**
* Event class to provide additional properties
* @ko Component에서 추가적인 프로퍼티를 제공하는 이벤트 클래스
*/
var ComponentEvent = /*#__PURE__*/function () {
/**
* Create a new instance of ComponentEvent.
* @ko ComponentEvent의 새로운 인스턴스를 생성한다.
* @param eventType The name of the event.<ko>이벤트 이름.</ko>
* @param props An object that contains additional event properties.<ko>추가적인 이벤트 프로퍼티 오브젝트.</ko>
*/
function ComponentEvent(eventType, props) {
var e_1, _a;
this._canceled = false;
if (props) {
try {
for (var _b = __values(Object.keys(props)), _c = _b.next(); !_c.done; _c = _b.next()) {
var key = _c.value;
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
this[key] = props[key];
}
} catch (e_1_1) {
e_1 = {
error: e_1_1
};
} finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
} finally {
if (e_1) throw e_1.error;
}
}
}
this.eventType = eventType;
}
/**
* Stop the event. {@link ComponentEvent#isCanceled} will return `true` after.
* @ko 이벤트를 중단한다. 이후 {@link ComponentEvent#isCanceled}가 `true`를 반환한다.
*/
var __proto = ComponentEvent.prototype;
__proto.stop = function () {
this._canceled = true;
};
/**
* Returns a boolean value that indicates whether {@link ComponentEvent#stop} is called before.
* @ko {@link ComponentEvent#stop}이 호출되었는지 여부를 반환한다.
* @return {boolean} A boolean value that indicates whether {@link ComponentEvent#stop} is called before.<ko>이전에 {@link ComponentEvent#stop}이 불려졌는지 여부를 반환한다.</ko>
*/
__proto.isCanceled = function () {
return this._canceled;
};
return ComponentEvent;
}();
/**
* A class used to manage events in a component
* @ko 컴포넌트의 이벤트을 관리할 수 있게 하는 클래스
*/
var Component = /*#__PURE__*/function () {
/**
* @support {"ie": "7+", "ch" : "latest", "ff" : "latest", "sf" : "latest", "edge" : "latest", "ios" : "7+", "an" : "2.1+ (except 3.x)"}
*/
function Component() {
this._eventHandler = {};
}
/**
* Trigger a custom event.
* @ko 커스텀 이벤트를 발생시킨다
* @param {string | ComponentEvent} event The name of the custom event to be triggered or an instance of the ComponentEvent<ko>발생할 커스텀 이벤트의 이름 또는 ComponentEvent의 인스턴스</ko>
* @param {any[]} params Event data to be sent when triggering a custom event <ko>커스텀 이벤트가 발생할 때 전달할 데이터</ko>
* @return An instance of the component itself<ko>컴포넌트 자신의 인스턴스</ko>
* @example
* ```ts
* import Component, { ComponentEvent } from "@egjs/component";
*
* class Some extends Component<{
* beforeHi: ComponentEvent<{ foo: number; bar: string }>;
* hi: { foo: { a: number; b: boolean } };
* someEvent: (foo: number, bar: string) => void;
* someOtherEvent: void; // When there's no event argument
* }> {
* some(){
* if(this.trigger("beforeHi")){ // When event call to stop return false.
* this.trigger("hi");// fire hi event.
* }
* }
* }
*
* const some = new Some();
* some.on("beforeHi", e => {
* if(condition){
* e.stop(); // When event call to stop, `hi` event not call.
* }
* // `currentTarget` is component instance.
* console.log(some === e.currentTarget); // true
*
* typeof e.foo; // number
* typeof e.bar; // string
* });
* some.on("hi", e => {
* typeof e.foo.b; // boolean
* });
* // If you want to more know event design. You can see article.
* // https://github.com/naver/egjs-component/wiki/How-to-make-Component-event-design%3F
* ```
*/
var __proto = Component.prototype;
__proto.trigger = function (event) {
var params = [];
for (var _i = 1; _i < arguments.length; _i++) {
params[_i - 1] = arguments[_i];
}
var eventName = event instanceof ComponentEvent ? event.eventType : event;
var handlers = __spread(this._eventHandler[eventName] || []);
if (handlers.length <= 0) {
return this;
}
if (event instanceof ComponentEvent) {
event.currentTarget = this;
handlers.forEach(function (handler) {
handler(event);
});
} else {
handlers.forEach(function (handler) {
// eslint-disable-next-line @typescript-eslint/no-unsafe-call
handler.apply(void 0, __spread(params));
});
}
return this;
};
/**
* Executed event just one time.
* @ko 이벤트가 한번만 실행된다.
* @param {string} eventName The name of the event to be attached or an event name - event handler mapped object.<ko>등록할 이벤트의 이름 또는 이벤트 이름-핸들러 오브젝트</ko>
* @param {function} handlerToAttach The handler function of the event to be attached <ko>등록할 이벤트의 핸들러 함수</ko>
* @return An instance of the component itself<ko>컴포넌트 자신의 인스턴스</ko>
* @example
* ```ts
* import Component, { ComponentEvent } from "@egjs/component";
*
* class Some extends Component<{
* hi: ComponentEvent;
* }> {
* hi() {
* alert("hi");
* }
* thing() {
* this.once("hi", this.hi);
* }
* }
*
* var some = new Some();
* some.thing();
* some.trigger(new ComponentEvent("hi"));
* // fire alert("hi");
* some.trigger(new ComponentEvent("hi"));
* // Nothing happens
* ```
*/
__proto.once = function (eventName, handlerToAttach) {
var _this = this;
if (typeof eventName === "object" && isUndefined(handlerToAttach)) {
var eventHash = eventName;
for (var key in eventHash) {
this.once(key, eventHash[key]);
}
return this;
} else if (typeof eventName === "string" && typeof handlerToAttach === "function") {
var listener_1 = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
// eslint-disable-next-line @typescript-eslint/no-unsafe-call
handlerToAttach.apply(void 0, __spread(args));
_this.off(eventName, listener_1);
};
this.on(eventName, listener_1);
}
return this;
};
/**
* Checks whether an event has been attached to a component.
* @ko 컴포넌트에 이벤트가 등록됐는지 확인한다.
* @param {string} eventName The name of the event to be attached <ko>등록 여부를 확인할 이벤트의 이름</ko>
* @return {boolean} Indicates whether the event is attached. <ko>이벤트 등록 여부</ko>
* @example
* ```ts
* import Component from "@egjs/component";
*
* class Some extends Component<{
* hi: void;
* }> {
* some() {
* this.hasOn("hi");// check hi event.
* }
* }
* ```
*/
__proto.hasOn = function (eventName) {
return !!this._eventHandler[eventName];
};
/**
* Attaches an event to a component.
* @ko 컴포넌트에 이벤트를 등록한다.
* @param {string} eventName The name of the event to be attached or an event name - event handler mapped object.<ko>등록할 이벤트의 이름 또는 이벤트 이름-핸들러 오브젝트</ko>
* @param {function} handlerToAttach The handler function of the event to be attached <ko>등록할 이벤트의 핸들러 함수</ko>
* @return An instance of a component itself<ko>컴포넌트 자신의 인스턴스</ko>
* @example
* ```ts
* import Component, { ComponentEvent } from "@egjs/component";
*
* class Some extends Component<{
* hi: void;
* }> {
* hi() {
* console.log("hi");
* }
* some() {
* this.on("hi",this.hi); //attach event
* }
* }
* ```
*/
__proto.on = function (eventName, handlerToAttach) {
if (typeof eventName === "object" && isUndefined(handlerToAttach)) {
var eventHash = eventName;
for (var name in eventHash) {
this.on(name, eventHash[name]);
}
return this;
} else if (typeof eventName === "string" && typeof handlerToAttach === "function") {
var handlerList = this._eventHandler[eventName];
if (isUndefined(handlerList)) {
this._eventHandler[eventName] = [];
handlerList = this._eventHandler[eventName];
}
handlerList.push(handlerToAttach);
}
return this;
};
/**
* Detaches an event from the component.<br/>If the `eventName` is not given this will detach all event handlers attached.<br/>If the `handlerToDetach` is not given, this will detach all event handlers for `eventName`.
* @ko 컴포넌트에 등록된 이벤트를 해제한다.<br/>`eventName`이 주어지지 않았을 경우 모든 이벤트 핸들러를 제거한다.<br/>`handlerToAttach`가 주어지지 않았을 경우 `eventName`에 해당하는 모든 이벤트 핸들러를 제거한다.
* @param {string?} eventName The name of the event to be detached <ko>해제할 이벤트의 이름</ko>
* @param {function?} handlerToDetach The handler function of the event to be detached <ko>해제할 이벤트의 핸들러 함수</ko>
* @return An instance of a component itself <ko>컴포넌트 자신의 인스턴스</ko>
* @example
* ```ts
* import Component, { ComponentEvent } from "@egjs/component";
*
* class Some extends Component<{
* hi: void;
* }> {
* hi() {
* console.log("hi");
* }
* some() {
* this.off("hi",this.hi); //detach event
* }
* }
* ```
*/
__proto.off = function (eventName, handlerToDetach) {
var e_1, _a;
// Detach all event handlers.
if (isUndefined(eventName)) {
this._eventHandler = {};
return this;
}
// Detach all handlers for eventname or detach event handlers by object.
if (isUndefined(handlerToDetach)) {
if (typeof eventName === "string") {
delete this._eventHandler[eventName];
return this;
} else {
var eventHash = eventName;
for (var name in eventHash) {
this.off(name, eventHash[name]);
}
return this;
}
}
// Detach single event handler
var handlerList = this._eventHandler[eventName];
if (handlerList) {
var idx = 0;
try {
for (var handlerList_1 = __values(handlerList), handlerList_1_1 = handlerList_1.next(); !handlerList_1_1.done; handlerList_1_1 = handlerList_1.next()) {
var handlerFunction = handlerList_1_1.value;
if (handlerFunction === handlerToDetach) {
handlerList.splice(idx, 1);
if (handlerList.length <= 0) {
delete this._eventHandler[eventName];
}
break;
}
idx++;
}
} catch (e_1_1) {
e_1 = {
error: e_1_1
};
} finally {
try {
if (handlerList_1_1 && !handlerList_1_1.done && (_a = handlerList_1.return)) _a.call(handlerList_1);
} finally {
if (e_1) throw e_1.error;
}
}
}
return this;
};
/**
* Version info string
* @ko 버전정보 문자열
* @name VERSION
* @static
* @example
* Component.VERSION; // ex) 3.0.0
* @memberof Component
*/
Component.VERSION = "3.0.4";
return Component;
}();
/*
* Copyright (c) 2015 NAVER Corp.
* egjs projects are licensed under the MIT license
*/
// eslint-disable-next-line @typescript-eslint/naming-convention, @typescript-eslint/no-unsafe-assignment
var ComponentEvent$1 = ComponentEvent;
/*
* Copyright (c) 2015 NAVER Corp.
* egjs projects are licensed under the MIT license
*/
/* eslint-disable @typescript-eslint/restrict-template-expressions */
/**
* Error codes of {@link FlickingError}. Below are the conditions where each error code occurs.
* @ko {@link FlickingError}의 에러 코드. 아래는 각각의 에러 코드가 발생하는 조건입니다.
* @name ERROR_CODE
* @constant
* @type object
* @property {number} WRONG_TYPE Parameter type is wrong<ko>패러미터의 타입이 잘못되었을 경우</ko>
* @property {number} ELEMENT_NOT_FOUND Element is not found inside page with the given CSS selector<ko>주어진 CSS selector로 페이지 내에서 해당 엘리먼트를 찾지 못했을 경우</ko>
* @property {number} VAL_MUST_NOT_NULL Expected non-null value, but given `null` or `undefined`<ko>값을 기대했으나, `null`이나 `undefined`를 받은 경우</ko>
* @property {number} NOT_ATTACHED_TO_FLICKING When Flicking's component is not initialized (i.e. {@link Flicking#init} is not called)<ko>Flicking 내부 컴포넌트가 초기화되지 않은 경우 ({@link Flicking#init}이 호출되지 않은 경우)</ko>
* @property {number} WRONG_OPTION One of the options is wrong<ko>옵션들 중 잘못된 값이 있을 때</ko>
* @property {number} INDEX_OUT_OF_RANGE When the given index is out of possible range<ko>인덱스가 주어진 범위를 벗어난 경우</ko>
* @property {number} POSITION_NOT_REACHABLE When {@link Control#moveToPosition}'s position parameter is out of possible range.<ko>{@link Control#moveToPosition}의 `position` 패러미터가 도달 가능한 범위를 벗어난 경우</ko>
* @property {number} TRANSFORM_NOT_SUPPORTED CSS `transform` property is not available(<=IE8) <ko>CSS `transform` 속성을 사용할 수 없는 경우(<=IE8)</ko>
* @property {number} STOP_CALLED_BY_USER When the event's `stop()` is called by user.<ko>사용자에 의해 이벤트의 `stop()`이 호출된 경우</ko>
* @property {number} ANIMATION_INTERRUPTED When the animation is interrupted by user.<ko>사용자에 의해 애니메이션이 중단된 경우</ko>
* @property {number} ANIMATION_ALREADY_PLAYING When the animation is already playing.<ko>현재 애니메이션이 이미 진행중인 경우</ko>
* @property {number} NOT_ALLOWED_IN_FRAMEWORK When the non-allowed method is called from frameworks (React, Angular, Vue...)
* <ko>프레임워크(React, Angular, Vue ...)에서 사용 불가능한 메소드를 호출했을 경우</ko>
* @property {number} NOT_INITIALIZED When the {@link Flicking#init} is not called before but is needed<ko>{@link Flicking#init}의 호출이 필요하나, 아직 호출되지 않았을 경우</ko>
* @property {number} NO_ACTIVE When there're no active panel that flicking has selected. This may be due to the absence of any panels<ko>현재 Flicking이 선택한 패널이 없을 경우. 일반적으로 패널이 하나도 없는 경우에 발생할 수 있습니다</ko>
* @property {number} NOT_ALLOWED_IN_VIRTUAL When the non-allowed method is called while the virtual option is enabled<ko>virtual 옵션이 활성화된 상태에서 사용 불가능한 메소드가 호출되었을 경우</ko>
*/
var CODE = {
WRONG_TYPE: 0,
ELEMENT_NOT_FOUND: 1,
VAL_MUST_NOT_NULL: 2,
NOT_ATTACHED_TO_FLICKING: 3,
WRONG_OPTION: 4,
INDEX_OUT_OF_RANGE: 5,
POSITION_NOT_REACHABLE: 6,
TRANSFORM_NOT_SUPPORTED: 7,
STOP_CALLED_BY_USER: 8,
ANIMATION_INTERRUPTED: 9,
ANIMATION_ALREADY_PLAYING: 10,
NOT_ALLOWED_IN_FRAMEWORK: 11,
NOT_INITIALIZED: 12,
NO_ACTIVE: 13,
NOT_ALLOWED_IN_VIRTUAL: 14
};
var MESSAGE = {
WRONG_TYPE: function (wrongVal, correctTypes) {
return wrongVal + "(" + typeof wrongVal + ") is not a " + correctTypes.map(function (type) {
return "\"" + type + "\"";
}).join(" or ") + ".";
},
ELEMENT_NOT_FOUND: function (selector) {
return "Element with selector \"" + selector + "\" not found.";
},
VAL_MUST_NOT_NULL: function (val, name) {
return name + " should be provided. Given: " + val;
},
NOT_ATTACHED_TO_FLICKING: "This module is not attached to the Flicking instance. \"init()\" should be called first.",
WRONG_OPTION: function (optionName, val) {
return "Option \"" + optionName + "\" is not in correct format, given: " + val;
},
INDEX_OUT_OF_RANGE: function (val, min, max) {
return "Index \"" + val + "\" is out of range: should be between " + min + " and " + max + ".";
},
POSITION_NOT_REACHABLE: function (position) {
return "Position \"" + position + "\" is not reachable.";
},
TRANSFORM_NOT_SUPPORTED: "Browser does not support CSS transform.",
STOP_CALLED_BY_USER: "Event stop() is called by user.",
ANIMATION_INTERRUPTED: "Animation is interrupted by user input.",
ANIMATION_ALREADY_PLAYING: "Animation is already playing.",
NOT_ALLOWED_IN_FRAMEWORK: "This behavior is not allowed in the frameworks like React, Vue, or Angular.",
NOT_INITIALIZED: "Flicking is not initialized yet, call init() first.",
NO_ACTIVE: "There's no active panel that Flicking has selected. This may be due to the absence of any panels.",
NOT_ALLOWED_IN_VIRTUAL: "This behavior is not allowed when the virtual option is enabled"
};
/*
* Copyright (c) 2015 NAVER Corp.
* egjs projects are licensed under the MIT license
*/
/**
* Event type object with event name strings of {@link Flicking}
* @ko {@link Flicking}의 이벤트 이름 문자열들을 담은 객체
* @type {object}
* @property {"holdStart"} HOLD_START holdStart event<ko>holdStart 이벤트</ko>
* @property {"holdEnd"} HOLD_END holdEnd event<ko>holdEnd 이벤트</ko>
* @property {"moveStart"} MOVE_START moveStart event<ko>moveStart 이벤트</ko>
* @property {"move"} MOVE move event<ko>move 이벤트</ko>
* @property {"moveEnd"} MOVE_END moveEnd event<ko>moveEnd 이벤트</ko>
* @property {"willChange"} WILL_CHANGE willChange event<ko>willChange 이벤트</ko>
* @property {"changed"} CHANGED changed event<ko>changed 이벤트</ko>
* @property {"willRestore"} WILL_RESTORE willRestore event<ko>willRestore 이벤트</ko>
* @property {"restored"} RESTORED restored event<ko>restored 이벤트</ko>
* @property {"select"} SELECT select event<ko>select 이벤트</ko>
* @property {"needPanel"} NEED_PANEL needPanel event<ko>needPanel 이벤트</ko>
* @property {"panelChange"} PANEL_CHANGE panelChange event<ko>panelChange 이벤트</ko>
* @example
* ```ts
* import { EVENTS } from "@egjs/flicking";
* EVENTS.MOVE_START; // "moveStart"
* ```
*/
var EVENTS = {
READY: "ready",
BEFORE_RESIZE: "beforeResize",
AFTER_RESIZE: "afterResize",
HOLD_START: "holdStart",
HOLD_END: "holdEnd",
MOVE_START: "moveStart",
MOVE: "move",
MOVE_END: "moveEnd",
WILL_CHANGE: "willChange",
CHANGED: "changed",
WILL_RESTORE: "willRestore",
RESTORED: "restored",
SELECT: "select",
NEED_PANEL: "needPanel",
VISIBLE_CHANGE: "visibleChange",
REACH_EDGE: "reachEdge",
PANEL_CHANGE: "panelChange"
};
/**
* An object with all possible predefined literal string for the {@link Flicking#align align} option
* @ko {@link Flicking#align align} 옵션에 사용되는 미리 정의된 리터럴 상수들을 담고 있는 객체
* @type {object}
* @property {"prev"} PREV left/top align<ko>좌/상 정렬</ko>
* @property {"center"} CENTER center align<ko>중앙 정렬</ko>
* @property {"next"} NEXT right/bottom align<ko>우/하 정렬</ko>
*/
var ALIGN = {
PREV: "prev",
CENTER: "center",
NEXT: "next"
};
/**
* An object of directions
* @ko 방향을 나타내는 값들을 담고 있는 객체
* @type {object}
* @property {"PREV"} PREV "left" when {@link Flicking#horizontal horizontal} is true, and "top" when {@link Flicking#horizontal horizontal} is false
* <ko>{@link Flicking#horizontal horizontal}가 `true`일 경우 왼쪽, {@link Flicking#horizontal horizontal}가 `false`일 경우 위쪽을 의미합니다</ko>
* @property {"NEXT"} NEXT "right" when {@link Flicking#horizontal horizontal} is true, and "bottom" when {@link Flicking#horizontal horizontal} is false
* <ko>{@link Flicking#horizontal horizontal}가 `true`일 경우 오른쪽, {@link Flicking#horizontal horizontal}가 `false`일 경우 아래쪽을 의미합니다</ko>
* @property {null} NONE This value usually means it's the same position<ko>주로 제자리인 경우를 의미합니다</ko>
*/
var DIRECTION = {
PREV: "PREV",
NEXT: "NEXT",
NONE: null
};
/**
* An object with all possible {@link Flicking#moveType moveType}s
* @ko Flicking이 제공하는 {@link Flicking#moveType moveType}들을 담고 있는 객체
* @type {object}
* @property {"snap"} SNAP Flicking's {@link Flicking#moveType moveType} that enables {@link SnapControl} as a Flicking's {@link Flicking#control control}
* <ko>Flicking의 {@link Flicking#control control}을 {@link SnapControl}로 설정하게 하는 {@link Flicking#moveType moveType}</ko>
* @property {"freeScroll"} FREE_SCROLL Flicking's {@link Flicking#moveType moveType} that enables {@link FreeControl} as a Flicking's {@link Flicking#control control}
* <ko>Flicking의 {@link Flicking#control control}을 {@link FreeControl}로 설정하게 하는 {@link Flicking#moveType moveType}</ko>
* @property {"strict"} STRICT Flicking's {@link Flicking#moveType moveType} that enables {@link StrictControl} as a Flicking's {@link Flicking#control control}
* <ko>Flicking의 {@link Flicking#control control}을 {@link StrictControl}로 설정하게 하는 {@link Flicking#moveType moveType}</ko>
*/
var MOVE_TYPE = {
SNAP: "snap",
FREE_SCROLL: "freeScroll",
STRICT: "strict"
};
var CLASS = {
VIEWPORT: "flicking-viewport",
CAMERA: "flicking-camera",
VERTICAL: "vertical",
HIDDEN: "flicking-hidden",
DEFAULT_VIRTUAL: "flicking-panel"
};
/**
* An object with all possible {@link Flicking#circularFallback circularFallback}s
* @ko Flicking의 {@link Flicking#circularFallback circularFallback}에 설정 가능한 값들을 담고 있는 객체
* @type {object}
* @property {string} LINEAR "linear"
* @property {string} BOUND "bound"
*/
var CIRCULAR_FALLBACK = {
LINEAR: "linear",
BOUND: "bound"
};
/**
* An object for identifying {@link https://developer.mozilla.org/en-US/docs/Web/CSS/direction direction} CSS property applied to the camera element(`.flicking-camera`)
* @ko 카메라 엘리먼트(`.flicking-camera`)에 적용된 {@link https://developer.mozilla.org/en-US/docs/Web/CSS/direction direction} CSS 속성을 구분하기 위한 객체
* @type {object}
* @property {string} LTR "ltr"
* @property {string} RTL "rtl"
*/
var ORDER = {
LTR: "ltr",
RTL: "rtl"
};
/**
* An object that contains the direction that {@link Flicking} is moving
* @ko {@link Flicking}이 움직이는 방향을 담고 있는 객체
* @type {object}
* @property {"horizontal"} HORIZONTAL horizontal<ko>수평 방향</ko>
* @property {"vertical"} VERTICAL vertical<ko>수직 방향</ko>
*/
var MOVE_DIRECTION = {
HORIZONTAL: "horizontal",
VERTICAL: "vertical"
};
var Constants = {
__proto__: null,
EVENTS: EVENTS,
ALIGN: ALIGN,
DIRECTION: DIRECTION,
MOVE_TYPE: MOVE_TYPE,
CLASS: CLASS,
CIRCULAR_FALLBACK: CIRCULAR_FALLBACK,
ORDER: ORDER,
MOVE_DIRECTION: MOVE_DIRECTION,
ERROR_CODE: CODE
};
// eslint-disable-next-line @typescript-eslint/ban-types
var merge = function (target) {
var sources = [];
for (var _i = 1; _i < arguments.length; _i++) {
sources[_i - 1] = arguments[_i];
}
sources.forEach(function (source) {
Object.keys(source).forEach(function (key) {
target[key] = source[key];
});
});
return target;
};
var getElement = function (el, parent) {
var targetEl = null;
if (isString(el)) {
var parentEl = parent ? parent : document;
var queryResult = parentEl.querySelector(el);
if (!queryResult) {
throw new FlickingError(MESSAGE.ELEMENT_NOT_FOUND(el), CODE.ELEMENT_NOT_FOUND);
}
targetEl = queryResult;
} else if (el && el.nodeType === Node.ELEMENT_NODE) {
targetEl = el;
}
if (!targetEl) {
throw new FlickingError(MESSAGE.WRONG_TYPE(el, ["HTMLElement", "string"]), CODE.WRONG_TYPE);
}
return targetEl;
};
var checkExistence = function (value, nameOnErrMsg) {
if (value == null) {
throw new FlickingError(MESSAGE.VAL_MUST_NOT_NULL(value, nameOnErrMsg), CODE.VAL_MUST_NOT_NULL);
}
};
var clamp$1 = function (x, min, max) {
return Math.max(Math.min(x, max), min);
};
var getFlickingAttached = function (val) {
if (!val) {
throw new FlickingError(MESSAGE.NOT_ATTACHED_TO_FLICKING, CODE.NOT_ATTACHED_TO_FLICKING);
}
return val;
};
var toArray$2 = function (iterable) {
return [].slice.call(iterable);
};
var parseAlign$1 = function (align, size) {
var alignPoint;
if (isString(align)) {
switch (align) {
case ALIGN.PREV:
alignPoint = 0;
break;
case ALIGN.CENTER:
alignPoint = 0.5 * size;
break;
case ALIGN.NEXT:
alignPoint = size;
break;
default:
alignPoint = parseArithmeticSize(align, size);
if (alignPoint == null) {
throw new FlickingError(MESSAGE.WRONG_OPTION("align", align), CODE.WRONG_OPTION);
}
}
} else {
alignPoint = align;
}
return alignPoint;
};
var parseBounce = function (bounce, size) {
var parsedBounce;
if (Array.isArray(bounce)) {
parsedBounce = bounce.map(function (val) {
return parseArithmeticSize(val, size);
});
} else {
var parsedVal = parseArithmeticSize(bounce, size);
parsedBounce = [parsedVal, parsedVal];
}
return parsedBounce.map(function (val) {
if (val == null) {
throw new FlickingError(MESSAGE.WRONG_OPTION("bounce", bounce), CODE.WRONG_OPTION);
}
return val;
});
};
var parseArithmeticSize = function (cssValue, base) {
var parsed = parseArithmeticExpression(cssValue);
if (parsed == null) return null;
return parsed.percentage * base + parsed.absolute;
};
var parseArithmeticExpression = function (cssValue) {
var cssRegex = /(?:(\+|\-)\s*)?(\d+(?:\.\d+)?(%|px)?)/g;
if (typeof cssValue === "number") {
return {
percentage: 0,
absolute: cssValue
};
}
var parsed = {
percentage: 0,
absolute: 0
};
var idx = 0;
var matchResult = cssRegex.exec(cssValue);
while (matchResult != null) {
var sign = matchResult[1];
var value = matchResult[2];
var unit = matchResult[3];
var parsedValue = parseFloat(value);
if (idx <= 0) {
sign = sign || "+";
}
// Return default value for values not in good form
if (!sign) {
return null;
}
var signMultiplier = sign === "+" ? 1 : -1;
if (unit === "%") {
parsed.percentage += signMultiplier * (parsedValue / 100);
} else {
parsed.absolute += signMultiplier * parsedValue;
}
// Match next occurrence
++idx;
matchResult = cssRegex.exec(cssValue);
}
// None-matched
if (idx === 0) {
return null;
}
return parsed;
};
var parseCSSSizeValue = function (val) {
return isString(val) ? val : val + "px";
};
var parsePanelAlign = function (align) {
return typeof align === "object" ? align.panel : align;
};
var getDirection$1 = function (start, end) {
if (start === end) return DIRECTION.NONE;
return start < end ? DIRECTION.NEXT : DIRECTION.PREV;
};
var parseElement = function (element) {
if (!Array.isArray(element)) {
element = [element];
}
var elements = [];
element.forEach(function (el) {
if (isString(el)) {
var tempDiv = document.createElement("div");
tempDiv.innerHTML = el;
elements.push.apply(elements, __spread$1(toArray$2(tempDiv.children)));
while (tempDiv.firstChild) {
tempDiv.removeChild(tempDiv.firstChild);
}
} else if (el && el.nodeType === Node.ELEMENT_NODE) {
elements.push(el);
} else {
throw new FlickingError(MESSAGE.WRONG_TYPE(el, ["HTMLElement", "string"]), CODE.WRONG_TYPE);
}
});
return elements;
};
var getMinusCompensatedIndex = function (idx, max) {
return idx < 0 ? clamp$1(idx + max, 0, max) : clamp$1(idx, 0, max);
};
var includes = function (array, target) {
var e_1, _a;
try {
for (var array_1 = __values$1(array), array_1_1 = array_1.next(); !array_1_1.done; array_1_1 = array_1.next()) {
var val = array_1_1.value;
if (val === target) return true;
}
} catch (e_1_1) {
e_1 = {
error: e_1_1
};
} finally {
try {
if (array_1_1 && !array_1_1.done && (_a = array_1.return)) _a.call(array_1);
} finally {
if (e_1) throw e_1.error;
}
}
return false;
};
var isString = function (val) {
return typeof val === "string";
};
var circulatePosition = function (pos, min, max) {
var size = max - min;
if (pos < min) {
var offset = (min - pos) % size;
pos = max - offset;
} else if (pos > max) {
var offset = (pos - max) % size;
pos = min + offset;
}
return pos;
};
var find$1 = function (array, checker) {
var e_2, _a;
try {
for (var array_2 = __values$1(array), array_2_1 = array_2.next(); !array_2_1.done; array_2_1 = array_2.next()) {
var val = array_2_1.value;
if (checker(val)) {
return val;
}
}
} catch (e_2_1) {
e_2 = {
error: e_2_1
};
} finally {
try {
if (array_2_1 && !array_2_1.done && (_a = array_2.return)) _a.call(array_2);
} finally {
if (e_2) throw e_2.error;
}
}
return null;
};
var findRight = function (array, checker) {
for (var idx = array.length - 1; idx >= 0; idx--) {
var val = array[idx];
if (checker(val)) {
return val;
}
}
return null;
};
var findIndex = function (array, checker) {
for (var idx = 0; idx < array.length; idx++) {
if (checker(array[idx])) {
return idx;
}
}
return -1;
};
var getProgress = function (pos, prev, next) {
return (pos - prev) / (next - prev);
};
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
var getStyle = function (el) {
if (!el) {
return {};
}
return window.getComputedStyle(el) || el.currentStyle;
};
var setSize = function (el, _a) {
var width = _a.width,
height = _a.height;
if (!el) {
return;
}
if (width != null) {
if (isString(width)) {
el.style.width = width;
} else {
el.style.width = width + "px";
}
}
if (height != null) {
if (isString(height)) {
el.style.height = height;
} else {
el.style.height = height + "px";
}
}
};
var isBetween = function (val, min, max) {
return val >= min && val <= max;
};
var circulateIndex = function (index, max) {
if (index >= max) {
return index % max;
} else if (index < 0) {
return getMinusCompensatedIndex((index + 1) % max - 1, max);
} else {
return index;
}
};
var range = function (end) {
var arr = new Array(end);
for (var i = 0; i < end; i++) {
arr[i] = i;
}
return arr;
};
var getElementSize = function (_a) {
var el = _a.el,
horizontal = _a.horizontal,
useFractionalSize = _a.useFractionalSize,
useOffset = _a.useOffset,
style = _a.style;
var size = 0;
if (useFractionalSize) {
var baseSize = parseFloat(horizontal ? style.width : style.height) || 0;
var isBorderBoxSizing = style.boxSizing === "border-box";
var border = horizontal ? parseFloat(style.borderLeftWidth || "0") + parseFloat(style.borderRightWidth || "0") : parseFloat(style.borderTopWidth || "0") + parseFloat(style.borderBottomWidth || "0");
if (isBorderBoxSizing) {
size = useOffset ? baseSize : baseSize - border;
} else {
var padding = horizontal ? parseFloat(style.paddingLeft || "0") + parseFloat(style.paddingRight || "0") : parseFloat(style.paddingTop || "0") + parseFloat(style.paddingBottom || "0");
size = useOffset ? baseSize + padding + border : baseSize + padding;
}
} else {
var sizeStr = horizontal ? "Width" : "Height";
size = useOffset ? el["offset" + sizeStr] : el["client" + sizeStr];
}
return Math.max(size, 0);
};
var setPrototypeOf = Object.setPrototypeOf || function (obj, proto) {
obj.__proto__ = proto;
return obj;
};
var camelize = function (str) {
return str.replace(/[\s-_]([a-z])/g, function (all, letter) {
return letter.toUpperCase();
});
};
var getDataAttributes = function (element, attributePrefix) {
var dataAttributes = {};
var attributes = element.attributes;
var length = attributes.length;
for (var i = 0; i < length; ++i) {
var attribute = attributes[i];
var name_1 = attribute.name,
value = attribute.value;
if (name_1.indexOf(attributePrefix) === -1) {
continue;
}
dataAttributes[camelize(name_1.replace(attributePrefix, ""))] = value;
}
return dataAttributes;
};
var Utils = {
__proto__: null,
merge: merge,
getElement: getElement,
checkExistence: checkExistence,
clamp: clamp$1,
getFlickingAttached: getFlickingAttached,
toArray: toArray$2,
parseAlign: parseAlign$1,
parseBounce: parseBounce,
parseArithmeticSize: parseArithmeticSize,
parseArithmeticExpression: parseArithmeticExpression,
parseCSSSizeValue: parseCSSSizeValue,
parsePanelAlign: parsePanelAlign,
getDirection: getDirection$1,
parseElement: parseElement,
getMinusCompensatedIndex: getMinusCompensatedIndex,
includes: includes,
isString: isString,
circulatePosition: circulatePosition,
find: find$1,
findRight: findRight,
findIndex: findIndex,
getProgress: getProgress,
getStyle: getStyle,
setSize: setSize,
isBetween: isBetween,
circulateIndex: circulateIndex,
range: range,
getElementSize: getElementSize,
setPrototypeOf: setPrototypeOf,
camelize: camelize,
getDataAttributes: getDataAttributes
};
/*
* Copyright (c) 2015 NAVER Corp.
* egjs projects are licensed under the MIT license
*/
/**
* Special type of known error that {@link Flicking} throws.
* @ko Flicking 내부에서 알려진 오류 발생시 throw되는 에러
* @property {number} code Error code<ko>에러 코드</ko>
* @property {string} message Error message<ko>에러 메시지</ko>
* @see {@link ERROR_CODE ERROR_CODE}
* @example
* ```ts
* import Flicking, { FlickingError, ERROR_CODES } from "@egjs/flicking";
* try {
* const flicking = new Flicking(".flicking-viewport")
* } catch (e) {
* if (e instanceof FlickingError && e.code === ERROR_CODES.ELEMENT_NOT_FOUND) {
* console.error("Element not found")
* }
* }
* ```
*/
var FlickingError = /*#__PURE__*/function (_super) {
__extends$3(FlickingError, _super);
/**
* @param message Error message<ko>에러 메시지</ko>
* @param code Error code<ko>에러 코드</ko>
*/
function FlickingError(message, code) {
var _this = _super.call(this, message) || this;
setPrototypeOf(_this, FlickingError.prototype);
_this.name = "FlickingError";
_this.code = code;
return _this;
}
return FlickingError;
}(Error);
/**
* A component that manages viewport size
* @ko 뷰포트 크기 정보를 담당하는 컴포넌트
*/
var Viewport = /*#__PURE__*/function () {
/**
* @param el A viewport element<ko>뷰포트 엘리먼트</ko>
*/
function Viewport(flicking, el) {
this._flicking = flicking;
this._el = el;
this._width = 0;
this._height = 0;
this._padding = {
left: 0,
right: 0,
top: 0,
bottom: 0
};
this._isBorderBoxSizing = false;
}
var __proto = Viewport.prototype;
Object.defineProperty(__proto, "element", {
/**
* A viewport(root) element
* @ko 뷰포트(root) 엘리먼트
* @type {HTMLElement}
* @readonly
*/
get: function () {
return this._el;
},
enumerable: false,
configurable: true
});
Object.defineProperty(__proto, "width", {
/**
* Viewport width, without paddings
* @ko 뷰포트 너비
* @type {number}
* @readonly
*/
get: function () {
return this._width - this._padding.left - this._padding.right;
},
enumerable: false,
configurable: true
});
Object.defineProperty(__proto, "height", {
/**
* Viewport height, without paddings
* @ko 뷰포트 높이
* @type {number}
* @readonly
*/
get: function () {
return this._height - this._padding.top - this._padding.bottom;
},
enumerable: false,
configurable: true
});
Object.defineProperty(__proto, "padding", {
/**
* Viewport paddings
* @ko 뷰포트 CSS padding 값
* @type {object}
* @property {number} left CSS `padding-left`
* @property {number} right CSS `padding-right`
* @property {number} top CSS `padding-top`
* @property {number} bottom CSS `padding-bottom`
* @readonly
*/
get: function () {
return this._padding;
},
enumerable: false,
configurable: true
});
/**
* Change viewport's size.
* This will change the actual size of `.flicking-viewport` element by changing its CSS width/height property
* @ko 뷰포트 크기를 변경합니다.
* `.flicking-viewport` 엘리먼트에 해당 크기의 CSS width/height를 적용합니다
* @param {object} [size] New viewport size<ko>새 뷰포트 크기</ko>
* @param {number|string} [size.width] CSS string or number(in px)<ko>CSS 문자열 또는 숫자(px)</ko>
* @param {number|string} [size.height] CSS string or number(in px)<ko>CSS 문자열 또는 숫자(px)</ko>
*/
__proto.setSize = function (_a) {
var width = _a.width,
height = _a.height;
var el = this._el;
var padding = this._padding;
var isBorderBoxSizing = this._isBorderBoxSizing;
if (width != null) {
if (isString(width)) {
el.style.width = width;
} else {
var newWidth = isBorderBoxSizing ? width + padding.left + padding.right : width;
el.style.width = newWidth + "px";
}
}
if (height != null) {
if (isString(height)) {
el.style.height = height;
} else {
var newHeight = isBorderBoxSizing ? height + padding.top + padding.bottom : height;
el.style.height = newHeight + "px";
}
}