@egjs/flicking

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Source: node_modules/@egjs/component/src/component.ts | egjs::Flicking - API</title> <meta name="description" content="A module used to implement flicking interactions. With this module, you can make flicking gestures, which are ways to navigate left and right to move between panels arranged side by side." /> <meta name="keywords" content="UI Component, egjs, flicking, carousel" /> <meta name="keyword" content="UI Component, egjs, flicking, carousel" /> <meta property="og:title" content=""/> <meta property="og:type" content="website"/> <meta property="og:image" content=""/> <meta property="og:url" content=""/> <script src="scripts/prettify/prettify.js"></script> <script src="scripts/prettify/lang-css.js"></script> <script src="scripts/jquery.min.js"></script>  <link rel="canonical" href="https://naver.github.io/egjs-flicking/release/latest/doc/"/> <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css"> <link type="text/css" rel="stylesheet" href="styles/bootstrap.min.css"> <link type="text/css" rel="stylesheet" href="styles/jaguar.css"> <script> var config = {"monospaceLinks":true,"cleverLinks":true,"default":{"outputSourceFiles":true},"applicationName":"eg.Flicking","disqus":"egjs","googleAnalytics":"UA-70842526-17","openGraph":{"title":"","type":"website","image":"","site_name":"","url":""},"meta":{"title":"egjs::Flicking - API","description":"A module used to implement flicking interactions. With this module, you can make flicking gestures, which are ways to navigate left and right to move between panels arranged side by side.","keyword":"UI Component, egjs, flicking, carousel"},"linenums":true,"link":{"canonical":"https://naver.github.io/egjs-flicking/release/latest/doc/"}}; </script> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', config.googleAnalytics]); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> </head> <body> <div id="wrap" class="clearfix"> <div class="navigation"> <h3 class="applicationName"> <a href="//naver.github.io/egjs/"><img style="width:40px; height:20px;" src="img/type_white.svg"/></a>  <a href="//naver.github.io/egjs-flicking/">Flicking</a> </h3> <div class="search"> <input id="search" type="text" class="form-control input-sm" placeholder="Search Documentations"> </div> <ul class="list"> <li class="item"> <span class="title"> <a href="index.html">README</a> </span> </li>  <li class="item" data-name="eg.Flicking"> <span class="title"> <a href="eg.Flicking.html">eg.Flicking</a> </span> <ul class="members itemMembers expends"> <span class="subtitle">Members</span> <li data-name="eg.Flicking.DIRECTION"><a href="eg.Flicking.html#.DIRECTION">DIRECTION</a></li> <li data-name="eg.Flicking.EVENTS"><a href="eg.Flicking.html#.EVENTS">EVENTS</a></li> <li data-name="eg.Flicking.VERSION"><a href="eg.Flicking.html#.VERSION">VERSION</a></li> </ul> <ul class="typedefs itemMembers expends"> <span class="subtitle">Typedefs</span> <li data-name="eg.Flicking.ChangeEvent"><a href="eg.Flicking.html#.ChangeEvent">ChangeEvent</a></li> <li data-name="eg.Flicking.ContentErrorEvent"><a href="eg.Flicking.html#.ContentErrorEvent">ContentErrorEvent</a></li> <li data-name="eg.Flicking.ElementLike"><a href="eg.Flicking.html#.ElementLike">ElementLike</a></li> <li data-name="eg.Flicking.FlickingEvent"><a href="eg.Flicking.html#.FlickingEvent">FlickingEvent</a></li> <li data-name="eg.Flicking.FlickingOptions"><a href="eg.Flicking.html#.FlickingOptions">FlickingOptions</a></li> <li data-name="eg.Flicking.FlickingPanel"><a href="eg.Flicking.html#.FlickingPanel">FlickingPanel</a></li> <li data-name="eg.Flicking.FlickingStatus"><a href="eg.Flicking.html#.FlickingStatus">FlickingStatus</a></li> <li data-name="eg.Flicking.MoveTypeFreeScrollOption"><a href="eg.Flicking.html#.MoveTypeFreeScrollOption">MoveTypeFreeScrollOption</a></li> <li data-name="eg.Flicking.MoveTypeOption"><a href="eg.Flicking.html#.MoveTypeOption">MoveTypeOption</a></li> <li data-name="eg.Flicking.MoveTypeSnapOption"><a href="eg.Flicking.html#.MoveTypeSnapOption">MoveTypeSnapOption</a></li> <li data-name="eg.Flicking.NeedPanelEvent"><a href="eg.Flicking.html#.NeedPanelEvent">NeedPanelEvent</a></li> <li data-name="eg.Flicking.Plugin"><a href="eg.Flicking.html#.Plugin">Plugin</a></li> <li data-name="eg.Flicking.SelectEvent"><a href="eg.Flicking.html#.SelectEvent">SelectEvent</a></li> <li data-name="eg.Flicking.VisibleChangeEvent"><a href="eg.Flicking.html#.VisibleChangeEvent">VisibleChangeEvent</a></li> </ul> <ul class="methods itemMembers expends"> <span class="subtitle">Methods</span> <li data-name="eg.Flicking#addPlugins"><a href="eg.Flicking.html#addPlugins">addPlugins</a></li> <li data-name="eg.Flicking#append"><a href="eg.Flicking.html#append">append</a></li> <li data-name="eg.Flicking#destroy"><a href="eg.Flicking.html#destroy">destroy</a></li> <li data-name="eg.Flicking#disableInput"><a href="eg.Flicking.html#disableInput">disableInput</a></li> <li data-name="eg.Flicking#enableInput"><a href="eg.Flicking.html#enableInput">enableInput</a></li> <li data-name="eg.Flicking#getAllPanels"><a href="eg.Flicking.html#getAllPanels">getAllPanels</a></li> <li data-name="eg.Flicking#getCloneCount"><a href="eg.Flicking.html#getCloneCount">getCloneCount</a></li> <li data-name="eg.Flicking#getCurrentPanel"><a href="eg.Flicking.html#getCurrentPanel">getCurrentPanel</a></li> <li data-name="eg.Flicking#getElement"><a href="eg.Flicking.html#getElement">getElement</a></li> <li data-name="eg.Flicking#getIndex"><a href="eg.Flicking.html#getIndex">getIndex</a></li> <li data-name="eg.Flicking#getLastIndex"><a href="eg.Flicking.html#getLastIndex">getLastIndex</a></li> <li data-name="eg.Flicking#getPanel"><a href="eg.Flicking.html#getPanel">getPanel</a></li> <li data-name="eg.Flicking#getPanelCount"><a href="eg.Flicking.html#getPanelCount">getPanelCount</a></li> <li data-name="eg.Flicking#getSize"><a href="eg.Flicking.html#getSize">getSize</a></li> <li data-name="eg.Flicking#getStatus"><a href="eg.Flicking.html#getStatus">getStatus</a></li> <li data-name="eg.Flicking#getVisiblePanels"><a href="eg.Flicking.html#getVisiblePanels">getVisiblePanels</a></li> <li data-name="eg.Flicking#hasOn"><a href="eg.Flicking.html#hasOn">hasOn</a> <img src="img/i.png" width="14" title="inherited" alt="inherited"></li> <li data-name="eg.Flicking#isPlaying"><a href="eg.Flicking.html#isPlaying">isPlaying</a></li> <li data-name="eg.Flicking#moveTo"><a href="eg.Flicking.html#moveTo">moveTo</a></li> <li data-name="eg.Flicking#next"><a href="eg.Flicking.html#next">next</a></li> <li data-name="eg.Flicking#off"><a href="eg.Flicking.html#off">off</a> <img src="img/i.png" width="14" title="inherited" alt="inherited"></li> <li data-name="eg.Flicking#on"><a href="eg.Flicking.html#on">on</a> <img src="img/i.png" width="14" title="inherited" alt="inherited"></li> <li data-name="eg.Flicking#once"><a href="eg.Flicking.html#once">once</a> <img src="img/i.png" width="14" title="inherited" alt="inherited"></li> <li data-name="eg.Flicking#prepend"><a href="eg.Flicking.html#prepend">prepend</a></li> <li data-name="eg.Flicking#prev"><a href="eg.Flicking.html#prev">prev</a></li> <li data-name="eg.Flicking#remove"><a href="eg.Flicking.html#remove">remove</a></li> <li data-name="eg.Flicking#removePlugins"><a href="eg.Flicking.html#removePlugins">removePlugins</a></li> <li data-name="eg.Flicking#replace"><a href="eg.Flicking.html#replace">replace</a></li> <li data-name="eg.Flicking#resize"><a href="eg.Flicking.html#resize">resize</a></li> <li data-name="eg.Flicking#setLastIndex"><a href="eg.Flicking.html#setLastIndex">setLastIndex</a></li> <li data-name="eg.Flicking#setStatus"><a href="eg.Flicking.html#setStatus">setStatus</a></li> <li data-name="eg.Flicking#trigger"><a href="eg.Flicking.html#trigger">trigger</a> <img src="img/i.png" width="14" title="inherited" alt="inherited"></li> </ul> <ul class="events itemMembers expends"> <span class="subtitle">Events</span> <li data-name="eg.Flicking#event:change"><a href="eg.Flicking.html#event:change">change</a></li> <li data-name="eg.Flicking#event:contentError"><a href="eg.Flicking.html#event:contentError">contentError</a></li> <li data-name="eg.Flicking#event:holdEnd"><a href="eg.Flicking.html#event:holdEnd">holdEnd</a></li> <li data-name="eg.Flicking#event:holdStart"><a href="eg.Flicking.html#event:holdStart">holdStart</a></li> <li data-name="eg.Flicking#event:move"><a href="eg.Flicking.html#event:move">move</a></li> <li data-name="eg.Flicking#event:moveEnd"><a href="eg.Flicking.html#event:moveEnd">moveEnd</a></li> <li data-name="eg.Flicking#event:moveStart"><a href="eg.Flicking.html#event:moveStart">moveStart</a></li> <li data-name="eg.Flicking#event:needPanel"><a href="eg.Flicking.html#event:needPanel">needPanel</a></li> <li data-name="eg.Flicking#event:restore"><a href="eg.Flicking.html#event:restore">restore</a></li> <li data-name="eg.Flicking#event:select"><a href="eg.Flicking.html#event:select">select</a></li> <li data-name="eg.Flicking#event:visibleChange"><a href="eg.Flicking.html#event:visibleChange">visibleChange</a></li> </ul> </li> </ul> </div> <div class="main"> <h1 class="page-title" data-filename="node_modules_@egjs_component_src_component.ts.html">Source: node_modules/@egjs/component/src/component.ts</h1> <section> <article> <pre class="prettyprint source linenums"><code>/* * Copyright (c) 2015 NAVER Corp. * egjs projects are licensed under the MIT license */ function isUndefined(value: any): boolean { return typeof value === "undefined"; } interface DefaultProps<T> { eventType: string; stop: () => void; currentTarget: T; } type NotFunction = { [k: string]: unknown } & ({ bind?: never } | { call?: never }); type NoArguments = undefined | null | void | never; type EventWithRestParam = ((evt: NotFunction, ...restParam: any[]) => any); /** * Types that can be used when attaching new event definition as generic on a class * @ko 클래스 타입 등록시 사용가능한 타입 * @example * ``` * new SomeClass<{ * // Using it as object * evt0: { * param0: number; * param1: string * }; * // Using it as function with other arguments * evt1: (arg0: { * param0: number; * param1: string * }, arg1: string, arg2: boolean) => boolean; * }> * ``` */ type EventDefinition = NotFunction | NoArguments | EventWithRestParam; type EventMap = Record<string, EventDefinition>; type EventKey<T extends EventMap> = string & keyof T; type EventHash<T extends EventMap, S> = Partial<{ [K in EventKey<T>]: EventCallback<T, K, S> }>; type EventCallbackFirstParam<P, S> = P extends NoArguments ? DefaultProps<S> : P & DefaultProps<S>; type EventCallbackFunction<T extends (...params: any[]) => any, S> = T extends (firstParam?: infer F, ...restParams: infer R) => any ? (firstParam: EventCallbackFirstParam<Required<F>, S>, ...restParams: R) => any : (firstParam: DefaultProps<S>) => any; // In the on and once methods, the defaultProps must be included in the first parameter. type EventCallback<T extends EventMap, K extends EventKey<T>, S> = T[K] extends (...params: any[]) => any ? EventCallbackFunction<T[K], S> : (event: EventCallbackFirstParam<T[K], S>) => any; type EventTriggerFirstParam<T extends {}> = Pick<T, Exclude<keyof T, keyof DefaultProps<any>>> & Partial<DefaultProps<any>>; type EventDiff<T, U> = T extends U ? never : T; type EventTriggerPartialFunction<T extends (...params: any[]) => any> = T extends (firstParam: infer F, ...restParam: infer R) => any ? (firstParam?: EventTriggerFirstParam<EventDiff<F, undefined>>, ...restParams: R) => any : never; type EventTriggerRequiredFunction<T extends (...params: any[]) => any> = T extends (firstParam: infer F, ...restParam: infer R) => any ? (firstParam: EventTriggerFirstParam<F>, ...restParams: R) => any : never; type EventTriggerFunction<T extends (...params: any[]) => any> = Parameters<T> extends Required<Parameters<T>> & [any] ? EventTriggerRequiredFunction<T> : EventTriggerPartialFunction<T> type EventTriggerNoFunction<T> = T extends NoArguments ? (firstParam?: { [key: string]: never }) => any : EventTriggerFunction<(fisrtParam: EventTriggerFirstParam<T>) => any>; // You don't need to include defaultProps in the trigger method's first parameter. type EventTriggerParams<T extends EventMap, K extends EventKey<T>> = Parameters<T[K] extends (...params: any[]) => any ? EventTriggerFunction<T[K]> : EventTriggerNoFunction<T[K]>>; interface DefaultEventMap { [key: string]: (firstParam?: { [key: string]: any }, ...restParams: any[]) => any; } /** * A class used to manage events in a component * @ko 컴포넌트의 이벤트을 관리할 수 있게 하는 클래스 * @alias eg.Component */ class Component<T extends EventMap = DefaultEventMap> { /** * Version info string * @ko 버전정보 문자열 * @name VERSION * @static * @example * eg.Component.VERSION; // ex) 2.0.0 * @memberof eg.Component */ public static VERSION: string = "#__VERSION__#"; /** * @deprecated * @private */ public options: { [key: string]: any } = {}; private _eventHandler: { [keys: string]: EventCallback<T, EventKey<T>, Component<T>>[] }; /** * @support {"ie": "7+", "ch" : "latest", "ff" : "latest", "sf" : "latest", "edge" : "latest", "ios" : "7+", "an" : "2.1+ (except 3.x)"} */ constructor() { this._eventHandler = {}; } public trigger<K extends EventKey<T>>(eventName: K, ...params: EventTriggerParams<T, K>): boolean; /** * Triggers a custom event. * @ko 커스텀 이벤트를 발생시킨다 * @param {string} eventName The name of the custom event to be triggered <ko>발생할 커스텀 이벤트의 이름</ko> * @param {object} customEvent Event data to be sent when triggering a custom event <ko>커스텀 이벤트가 발생할 때 전달할 데이터</ko> * @param {any[]} restParam Additional parameters when triggering a custom event <ko>커스텀 이벤트가 발생할 때 필요시 추가적으로 전달할 데이터</ko> * @return Indicates whether the event has occurred. If the stop() method is called by a custom event handler, it will return false and prevent the event from occurring. <a href="https://github.com/naver/egjs-component/wiki/How-to-make-Component-event-design%3F">Ref</a> <ko>이벤트 발생 여부. 커스텀 이벤트 핸들러에서 stop() 메서드를 호출하면 'false'를 반환하고 이벤트 발생을 중단한다. <a href="https://github.com/naver/egjs-component/wiki/How-to-make-Component-event-design%3F">참고</a></ko> * @example * ``` * class Some extends eg.Component { * 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. * } * }); * some.on("hi", (e) => { * // `currentTarget` is component instance. * console.log(some === e.currentTarget); // true * }); * // 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 * ``` */ public trigger<K extends EventKey<T>>(eventName: K, ...params: any[]): boolean { let handlerList = this._eventHandler[eventName] || []; const hasHandlerList = handlerList.length > 0; if (!hasHandlerList) { return true; } const customEvent = params[0] || {}; const restParams = params.slice(1); // If detach method call in handler in first time then handler list calls. handlerList = handlerList.concat(); let isCanceled = false; // This should be done like this to pass previous tests (customEvent as any).eventType = eventName; (customEvent as any).stop = () => { isCanceled = true; }; (customEvent as any).currentTarget = this; let arg: any[] = [customEvent]; if (restParams.length >= 1) { arg = arg.concat(restParams); } handlerList.forEach(handler => { handler.apply(this, arg); }); return !isCanceled; } public once<K extends EventKey<T>>(eventName: K, handlerToAttach: EventCallback<T, K, this>): this; public once(eventHash: EventHash<T, this>): this; /** * Executed event just one time. * @ko 이벤트가 한번만 실행된다. * @param {string} eventName The name of the event to be attached <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 * ``` * class Some extends eg.Component { * hi() { * alert("hi"); * } * thing() { * this.once("hi", this.hi); * } * * var some = new Some(); * some.thing(); * some.trigger("hi"); * // fire alert("hi"); * some.trigger("hi"); * // Nothing happens * ``` */ public once<K extends EventKey<T>>(eventName: K | EventHash<T, this>, handlerToAttach?: EventCallback<T, K, this>): this { if (typeof eventName === "object" && isUndefined(handlerToAttach)) { const eventHash = eventName; for (const key in eventHash) { this.once((key as K), eventHash[key] as EventCallback<T, K, this>); } return this; } else if (typeof eventName === "string" && typeof handlerToAttach === "function") { const listener: any = (...args: any[]) => { handlerToAttach.apply(this, args); this.off(eventName, listener); } this.on(eventName, listener); } 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 * ``` * class Some extends eg.Component { * some() { * this.hasOn("hi");// check hi event. * } * } * ``` */ public hasOn<K extends EventKey<T>>(eventName: K): boolean { return !!this._eventHandler[eventName]; } public on<K extends EventKey<T>>(eventName: K, handlerToAttach: EventCallback<T, K, this>): this; public on(eventHash: EventHash<T, this>): this; /** * Attaches an event to a component. * @ko 컴포넌트에 이벤트를 등록한다. * @param {string} eventName The name of the event to be attached <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 * ``` * class Some extends eg.Component { * hi() { * console.log("hi"); * } * some() { * this.on("hi",this.hi); //attach event * } * } * ``` */ public on<K extends EventKey<T>>(eventName: K | EventHash<T, this>, handlerToAttach?: EventCallback<T, K, this>): this { if (typeof eventName === "object" && isUndefined(handlerToAttach)) { const eventHash = eventName; for (const name in eventHash) { this.on(name, eventHash[name] as any); } return this; } else if (typeof eventName === "string" && typeof handlerToAttach === "function") { let handlerList = this._eventHandler[eventName]; if (isUndefined(handlerList)) { this._eventHandler[eventName] = []; handlerList = this._eventHandler[eventName]; } handlerList.push(handlerToAttach as EventCallback<T, EventKey<T>, this>); } return this; } public off(eventHash?: EventHash<T, this>): this; public off<K extends EventKey<T>>(eventName: K, handlerToDetach?: EventCallback<T, K, this>): this; /** * Detaches an event from the component. * @ko 컴포넌트에 등록된 이벤트를 해제한다 * @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 * ``` * class Some extends eg.Component { * hi() { * console.log("hi"); * } * some() { * this.off("hi",this.hi); //detach event * } * } * ``` */ public off<K extends EventKey<T>>(eventName?: K | EventHash<T, this>, handlerToDetach?: EventCallback<T, K, this>): this { // 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 { const eventHash = eventName; for (const name in eventHash) { this.off(name, eventHash[name] as any); } return this; } } // Detach single event handler const handlerList = this._eventHandler[eventName as K]; if (handlerList) { let idx = 0; for (const handlerFunction of handlerList) { if (handlerFunction === handlerToDetach) { handlerList.splice(idx, 1); break; } idx++; } } return this; } } export default Component; </code></pre> </article> </section>  <div id="disqus_thread"></div> <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript> <a href="//disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>  <footer> Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 0.3.8</a> on Fri Jan 15 2021 16:14:36 GMT+0900 (Korean Standard Time) </footer> </div> </div> <script>prettyPrint();</script> <script src="scripts/main.js"></script> </body> </html>