@egjs/flicking - npm Package Compare versions

Comparing version 3.0.0-beta to 3.0.0-beta2

declaration/components/Panel.d.ts

@@ -1,11 +0,8 @@
-import { FlickingPanel } from "../types";
-import Viewport from "./Viewport";
 declare class Panel {
     private prevPanel;
     private nextPanel;
-    private viewport;
     private element;
     private state;
     private original?;
-    constructor(element: HTMLElement, index: number, viewport: Viewport, options: {
+    constructor(element: HTMLElement, index: number, options: {
         horizontal: boolean;
@@ -15,3 +12,2 @@ anchorExpression: string;
     });
-    update(updateFunction: (element: HTMLElement) => any): void;
     resize(): void;
@@ -29,2 +25,4 @@ destroy(): void;
     isClone(): boolean;
+    getCloneIndex(): number;
+    getClonedPanels(): Panel[];
     getIdenticalPanels(): Panel[];
@@ -34,5 +32,5 @@ setPosition(pos: number): void;
     setNextPanel(panel: Panel | null): void;
-    clone(): Panel;
-    toReadonlyVersion(): FlickingPanel;
+    clone(cloneIndex: number): Panel;
+    removeClonedPanelsAfter(start: number): void;
 }
 export default Panel;

declaration/components/Viewport.d.ts

 import Panel from "./Panel";
-import Axes from "@egjs/axes";
-import { FlickingOptions, FlickingPanel } from "../types";
-import Flicking from "../Flicking";
+import { FlickingOptions, FlickingPanel, FlickingStatus } from "../types";
 export default class Viewport {
-    flicking: Flicking;
     private axes;
@@ -13,3 +10,5 @@ private panInput;
     private clonedPanels;
+    private axesHandlers;
     private state;
+    private options;
     constructor(viewportElement: HTMLElement, cameraElement: HTMLElement, options: FlickingOptions);
@@ -19,3 +18,3 @@ moveTo(panel: FlickingPanel, axesEvent: any, duration?: number): void;
     resize(): void;
-    findNearestPanel(): Panel | undefined;
+    findNearestPanel(): Panel;
     findPanelOf(element: HTMLElement): Panel | undefined;
@@ -26,4 +25,5 @@ findNearestIdenticalPanel(panel: Panel): Panel;
     disable(): void;
-    adjustSize(): void;
+    updateAdaptiveSize(): void;
     destroy(): void;
+    restore(status: FlickingStatus): void;
     getPanelCount(): number;
@@ -40,4 +40,6 @@ getPanel(index: number): Panel | null;
     };
+    getScrollAreaSize(): number;
     getHangerPosition(): number;
     getCameraPosition(): number;
+    getAllPanels(includeClone?: boolean): Panel[];
     connectAxesHandler(handler: {
@@ -47,14 +49,21 @@ [key: string]: (event: {
         }) => any;
-    }): Axes;
-    appendPanelElement(element: HTMLElement): void;
+    }): void;
+    pause(): void;
+    resume(): void;
     private build();
     private applyCSSValue();
-    private placePanels();
+    private setAxesInstance();
+    private createPanels();
     private clonePanels();
-    private replacePanels();
+    private relocatePanels();
     private chainPanels();
-    private setAxesInstance();
     private moveToDefaultPanel();
     private isOutOfBound();
     private canSetBoundMode();
+    private updateSize();
+    private updateOriginalPanelPositions();
+    private updateScrollArea();
+    private updateCameraPosition();
+    private makeNewPanInput();
+    private appendPanelElement(element);
 }

declaration/consts.d.ts

@@ -1,5 +0,3 @@
-import { FlickingState, FlickingOptions, EventType, Direction, MovingState } from "./types";
+import { FlickingOptions, EventType, Direction, AxesEventType, StateType } from "./types";
 export declare const DEFAULT_OPTIONS: Readonly<FlickingOptions>;
-export declare const MOVING_STATE: MovingState;
-export declare const DEFAULT_STATE: Readonly<FlickingState>;
 export declare const DEFAULT_VIEWPORT_CSS: {
@@ -21,2 +19,4 @@ position: string;
 export declare const EVENTS: EventType;
+export declare const AXES_EVENTS: AxesEventType;
+export declare const STATE_TYPE: StateType;
 export declare const DIRECTION: Direction;
@@ -23,0 +23,0 @@ export declare const TRANSFORM: {

declaration/Flicking.d.ts

 import Component from "@egjs/component";
-import { FlickingOptions, FlickingEvent, Direction, EventType, FlickingPanel } from "./types";
+import { FlickingOptions, Direction, EventType, FlickingPanel, FlickingStatus, Plugin } from "./types";
 declare class Flicking extends Component {
@@ -7,5 +7,8 @@ static VERSION: string;
     static EVENTS: EventType;
-    private state;
+    options: FlickingOptions;
+    private stateMachine;
     private wrapper;
     private viewport;
+    private eventContext;
+    private plugins;
     constructor(element: HTMLElement | string, options?: Partial<FlickingOptions>);
@@ -20,2 +23,4 @@ prev(duration?: number): this;
     getPanel(index: number): FlickingPanel | null;
+    getAllPanels(includeClone?: boolean): FlickingPanel[];
+    getVisiblePanels(): FlickingPanel[];
     getPanelCount(): number;
@@ -25,4 +30,8 @@ isPlaying(): boolean;
     disableInput(): this;
+    getStatus(): Readonly<FlickingStatus>;
+    setStatus(status: FlickingStatus): void;
+    addPlugins(plugins: Plugin | Plugin[]): this;
+    removePlugins(plugins: Plugin | Plugin[]): this;
     destroy(): void;
-    trigger<T extends FlickingEvent>(eventName: string, params?: Partial<T>): boolean;
+    resize(): this;
     private build(options);
@@ -32,10 +41,9 @@ private setInitialState(options);
     private listenInput();
-    private stopMoving();
-    private onAxesHold(e);
-    private onAxesChange(e);
-    private onAxesRelease(e);
-    private onAxesAnimationEnd(e);
-    private onAxesFinish(e);
-    private moveToPanelProgramatic(panel, duration?);
+    private listenResize();
+    private triggerEvent;
+    private moveCamera;
+    private stopCamera;
+    private moveToPanel;
+    private castToReadonlyPanel;
 }
 export default Flicking;

declaration/types.d.ts

@@ -1,2 +0,5 @@
-import Panel from "./components/Panel";
+import Flicking from "./Flicking";
+import Viewport from "./components/Viewport";
+import StateMachine from "./components/StateMachine";
+export declare type ValueOf<T> = T[keyof T];
 export interface FlickingOptions {
@@ -14,2 +17,3 @@ classPrefix: string;
     bounce: number | string | [number | string, number | string];
+    autoResize: boolean;
     adaptive: boolean;
@@ -21,19 +25,13 @@ zIndex: number;
     anchor: string;
+    gap: number;
+    snap: number;
 }
-export interface FlickingState {
-    options: FlickingOptions;
-    currentPanelIndex: number;
-    panelMovingTo?: Panel;
-    movingDirection?: keyof Direction;
-    movingState: keyof MovingState;
-    moveStartTriggered: boolean;
-    lastHoldingDelta: number;
+export interface FlickingStatus {
+    index: number;
+    panels: Array<{
+        html: string;
+        index: number;
+    }>;
+    position: number;
 }
-export interface MovingState {
-    readonly IDLE: "IDLE";
-    readonly HOLDING: "HOLDING";
-    readonly DRAGGING: "DRAGGING";
-    readonly MOVING: "MOVING";
-    readonly DISABLED: "DISABLED";
-}
 export interface OriginalStyle {
@@ -49,2 +47,4 @@ className: string | null;
     readonly size: number;
+    readonly progress: number;
+    readonly outsetProgress: number;
     focus: (duration?: number) => void;
@@ -73,7 +73,9 @@ update: (updateFunction: (element: HTMLElement) => void) => void;
     panel: FlickingPanel;
+    progress: number;
     isTrusted: boolean;
     holding: boolean;
     stop: () => void;
-    direction?: keyof Direction;
+    direction: ValueOf<Direction> | null;
     axesEvent?: any;
+    currentTarget: Flicking;
 }
@@ -88,1 +90,33 @@ export interface ChangeEvent extends FlickingEvent {
 }
+export interface StateType {
+    readonly IDLE: 0;
+    readonly HOLDING: 1;
+    readonly DRAGGING: 2;
+    readonly ANIMATING: 3;
+    readonly DISABLED: 4;
+}
+export interface AxesEventType {
+    readonly HOLD: "hold";
+    readonly CHANGE: "change";
+    readonly RELEASE: "release";
+    readonly ANIMATION_END: "animationEnd";
+    readonly FINISH: "finish";
+}
+export interface TriggerCallback {
+    onSuccess(callback: () => void): TriggerCallback;
+    onStopped(callback: () => void): TriggerCallback;
+}
+export interface FlickingContext {
+    flicking: Flicking;
+    viewport: Viewport;
+    transitTo: StateMachine["transitTo"];
+    triggerEvent: Flicking["triggerEvent"];
+    moveCamera: Flicking["moveCamera"];
+    stopCamera: Flicking["stopCamera"];
+    moveToPanel: Flicking["moveToPanel"];
+    castToReadonlyPanel: Flicking["castToReadonlyPanel"];
+}
+export interface Plugin {
+    init(flicking: Flicking): void;
+    destroy(flicking: Flicking): void;
+}

declaration/utils.d.ts

@@ -18,1 +18,2 @@ export declare function merge(target: object, ...srcs: object[]): object;
 export declare function parseArithmeticExpression(cssValue: number | string, base: number, defaultVal?: number): number;
+export declare function getProgress(pos: number, range: number[]): number;

dist/flicking.min.js

@@ -7,5 +7,5 @@ /*
 https://github.com/naver/egjs-flicking
-@version 3.0.0-dev
+@version 3.0.0-beta2
 */
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("@egjs/component"),require("@egjs/axes")):"function"==typeof define&&define.amd?define(["@egjs/component","@egjs/axes"],e):((t=t||self).eg=t.eg||{},t.eg.Flicking=e(t.eg.Component,t.eg.Axes))}(this,function(t,h){"use strict";var i=function(t,e){return(i=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(t,e)};function l(i){for(var t=[],e=1;e<arguments.length;e++)t[e-1]=arguments[e];return t.forEach(function(n){Object.keys(n).forEach(function(t){var e=n[t];i[t]=e})}),i}var a=function(){var t={webkitTransform:"-webkit-transform",msTransform:"-ms-transform",MozTransform:"-moz-transform",OTransform:"-o-transform",transform:"transform"},e=document.documentElement.style,n="";for(var i in t)i in e&&(n=i);if(!n)throw new Error("Browser doesn't support CSS3 2D Transforms.");var o=document.createElement("div");document.documentElement.insertBefore(o,null),o.style[n]="translate3d(1px, 1px, 1px)";var r=window.getComputedStyle(o).getPropertyValue(t[n]);o.parentElement.removeChild(o);var s={name:n,has3d:0<r.length&&"none"!==r};return a=function(){return s},s};function s(e,n){Object.keys(n).forEach(function(t){e.style[t]=n[t]})}function v(t,e,n){return Math.max(Math.min(t,n),e)}function c(t,e,n){return e<=t&&t<n}function u(t,e,n){var i=null!=n?n:e/2,o=/(?:(\+|\-)\s*)?(\d+(?:\.\d+)?(%|px)?)/g;if("number"==typeof t)return v(t,0,e);for(var r=0,s=0,a=o.exec(t);null!=a;){var l=a[1],h=a[2],c=a[3],u=parseFloat(h);if(r<=0&&(l=l||"+"),!l)return i;"%"===c&&(u=u/100*e),s+="+"===l?u:-u,++r,a=o.exec(t)}return 0===r?i:v(s,0,e)}var d={classPrefix:"eg-flick",deceleration:6e-4,horizontal:!0,circular:!1,threshold:40,duration:100,panelEffect:function(t){return 1-Math.pow(1-t,3)},defaultIndex:0,inputType:["touch","mouse"],thresholdAngle:45,bounce:10,adaptive:!1,zIndex:2e3,bound:!1,overflow:!1,hanger:"50%",anchor:"50%"},w="IDLE",p="HOLDING",T="DRAGGING",y="MOVING",I="DISABLED",n={options:d,currentPanelIndex:d.defaultIndex,movingDirection:void 0,movingState:w,moveStartTriggered:!1,lastHoldingDelta:0},o={position:"relative",zIndex:d.zIndex,width:"100%",height:"100%",willChange:"transform",overflow:"hidden"},r={width:"100%",height:"100%"},g={position:"absolute"},b={HOLD_START:"holdStart",HOLD_END:"holdEnd",MOVE_START:"moveStart",MOVE:"move",MOVE_END:"moveEnd",CHANGE:"change",RESTORE:"restore",SELECT:"select"},z={PREV:"PREV",NEXT:"NEXT"},f=a(),P=function(){function o(t,e,n,i){var o,r;this.element=t,this.viewport=n,this.state={index:e,horizontal:i.horizontal,position:0,anchorExpression:i.anchorExpression,relativeAnchorPosition:0,size:0,clonedPanels:[],isClone:!1,originalStyle:{className:t.getAttribute("class")||null,style:t.getAttribute("style")||null},cachedBbox:null},i.classPrefix&&(o=t,r=i.classPrefix+"-panel",o.classList?o.classList.add(r):o.className.indexOf(r)<0&&(o.className=(o.className+" "+r).replace(/\s{2,}/g," "))),s(this.element,g),this.resize()}var t=o.prototype;return t.update=function(t){var e=this.state;e.isClone?this.original.update(t):[this.element].concat(e.clonedPanels.map(function(t){return t.element})).forEach(t)},t.resize=function(){var t=this.state;t.cachedBbox=null;var e=this.getBbox();t.size=t.horizontal?e.width:e.height},t.destroy=function(){var t=this.element,e=this.state.originalStyle;for(var n in e.className?t.setAttribute("class",e.className):t.removeAttribute("class"),e.style?t.setAttribute("style",e.style):t.removeAttribute("style"),this)this[n]=null},t.getElement=function(){return this.element},t.getAnchorPosition=function(){return this.state.position+this.state.relativeAnchorPosition},t.getRelativeAnchorPosition=function(){return this.state.relativeAnchorPosition},t.getIndex=function(){return this.state.index},t.getPosition=function(){return this.state.position},t.getSize=function(){return this.state.size},t.getPrevPanel=function(){return this.prevPanel},t.getNextPanel=function(){return this.nextPanel},t.getBbox=function(){var t=this.state;return t.cachedBbox||(t.cachedBbox=this.element.getBoundingClientRect()),t.cachedBbox},t.isClone=function(){return this.state.isClone},t.getIdenticalPanels=function(){var t=this.state;return t.isClone?this.original.getIdenticalPanels():[this].concat(t.clonedPanels)},t.setPosition=function(t){var e=this.state,n=this.element.style;e.position=t,e.horizontal?n.left=t+"px":n.top=t+"px",e.relativeAnchorPosition=u(e.anchorExpression,e.size)},t.setPrevPanel=function(t){this.prevPanel=t},t.setNextPanel=function(t){this.nextPanel=t},t.clone=function(){var t=this.state,e=this.viewport,n=this.element.cloneNode(!0),i=new o(n,t.index,e,{anchorExpression:t.anchorExpression,horizontal:t.horizontal});return i.original=this,i.state.isClone=!0,i.state.size=t.size,e.appendPanelElement(n),t.clonedPanels.push(i),i},t.toReadonlyVersion=function(){var s=this.state,a=this;return{element:this.element,index:s.index,position:s.position,anchorPosition:s.position+s.relativeAnchorPosition,size:s.size,focus:function(t){var e=a.viewport,n=e.flicking,i=e.getCameraPosition()+e.getHangerPosition(),o=s.position+s.relativeAnchorPosition;if(i!==o){var r=o<i?z.PREV:z.NEXT;n.trigger(b.CHANGE,{index:this.index,panel:this,direction:r,prevIndex:e.getIndex(),prevPanel:e.getCurrentPanel().toReadonlyVersion(),isTrusted:!1})||(a.viewport.moveTo(this,null,t),null!=t&&t<=0&&n.trigger(b.MOVE_END,{direction:r,isTrusted:!1}))}},update:this.update.bind(this),prev:function(){var t=a.prevPanel;if(null==t)return null;var e=t.toReadonlyVersion();if(this.position<e.position){for(var n=e.position,i=a.viewport.getScrollArea(),o=i.next-i.prev;n-=o,this.position<n;);return l({},e,{position:n,anchorPosition:n+t.state.relativeAnchorPosition})}return e},next:function(){var t=a.nextPanel;if(null==t)return null;var e=t.toReadonlyVersion();if(this.position>e.position){for(var n=e.position,i=a.viewport.getScrollArea(),o=i.next-i.prev;n+=o,this.position>n;);return l({},e,{position:n,anchorPosition:n+t.state.relativeAnchorPosition})}return e}}},o}(),m=function(){function t(t,e,n){this.viewportElement=t,this.cameraElement=e,this.state={index:n.defaultIndex,size:-1,position:0,hangerPosition:0,scrollArea:{prev:-1,next:-1},translate:f,options:n},this.build()}var e=t.prototype;return e.moveTo=function(t,e,n){void 0===n&&(n=this.state.options.duration);var i=this.state,o=t.anchorPosition-i.hangerPosition;o=this.canSetBoundMode()?v(o,i.scrollArea.prev,i.scrollArea.next):o,i.index=t.index,e?e.setTo({flick:o},n):this.axes.setTo({flick:o},n)},e.moveCamera=function(t){var e=this.state;t=Math.round(t);var n=e.translate.name,i=(e.options.horizontal?[-t,0]:[0,-t]).map(function(t){return t+"px"}).join(", ");this.cameraElement.style[n]=e.translate.has3d?"translate3d("+i+", 0px)":"translate("+i+")",e.position=t},e.resize=function(){var t=this.viewportElement.getBoundingClientRect(),e=this.state,n=e.options,i=this.panels;i.forEach(function(t){return t.resize()}),this.adjustSize(),e.size=e.options.horizontal?t.width:t.height,e.hangerPosition=u(n.hanger,e.size);var o=i[0],r=i[i.length-1],s=e.hangerPosition;this.canSetBoundMode()?e.scrollArea={prev:o.getPosition(),next:r.getPosition()+r.getSize()-e.size}:e.scrollArea={prev:o.getAnchorPosition()-s,next:r.getAnchorPosition()-s}},e.findNearestPanel=function(){var t=this.state,e=t.scrollArea,n=t.position+t.hangerPosition;if(this.isOutOfBound())return t.position<e.prev?this.panels[0]:this.panels[this.panels.length-1];for(var i=0,o=this.panels.concat(this.clonedPanels);i<o.length;i++){var r=o[i],s=r.getPosition();if(c(n,s,s+r.getSize()))return r}},e.findPanelOf=function(t){for(var e=0,n=this.panels.concat(this.clonedPanels);e<n.length;e++){var i=n[e];if(i.getElement().contains(t))return i}},e.findNearestIdenticalPanel=function(t){var e=this.state,i=t,o=1/0,r=e.position+e.hangerPosition;return t.getIdenticalPanels().forEach(function(t){var e=t.getAnchorPosition(),n=Math.abs(e-r);n<o&&(i=t,o=n)}),i},e.findShortestPositionToPanel=function(t){var e=this.state,n=e.options,i=t.getAnchorPosition(),o=Math.abs(e.position+e.hangerPosition-i),r=e.scrollArea.next-e.scrollArea.prev;if(n.circular)return o<=r-o?i-e.hangerPosition:i>e.position+e.hangerPosition?i-e.hangerPosition-r:i-e.hangerPosition+r;var s=i-e.hangerPosition;return this.canSetBoundMode()?v(s,e.scrollArea.prev,e.scrollArea.next):s},e.enable=function(){this.panInput.enable()},e.disable=function(){this.panInput.disable()},e.adjustSize=function(){var t,e=this.state.options,i=e.horizontal;if(e.adaptive){var n=this.getCurrentPanel().getBbox();t=i?n.height:n.width}else{t=this.panels.reduce(function(t,e){var n=e.getBbox();return Math.max(t,i?n.height:n.width)},0)}var o=this.viewportElement.style;i?(o.height=t+"px",o.minHeight="100%"):(o.width=t+"px",o.minWidth="100%")},e.destroy=function(){var t=this.viewportElement,e=t.parentElement;for(var n in e.removeChild(t),this.axes.destroy(),this.panInput.destroy(),this.panels.forEach(function(t){e.appendChild(t.getElement()),t.destroy()}),this)this[n]=null},e.getPanelCount=function(){return this.panels.length},e.getPanel=function(t){return c(t,0,this.panels.length)?this.panels[t]:null},e.getCurrentPanel=function(){return this.panels[this.state.index]},e.getIndex=function(){return this.state.index},e.getPrevIndex=function(){var t=this.state,e=t.index-1;return e<0&&(e=t.options.circular?this.panels.length-1:-1),e},e.getNextIndex=function(){var t=this.state,e=t.index+1;return e>=this.panels.length&&(e=t.options.circular?0:-1),e},e.getSize=function(){return this.state.size},e.getScrollArea=function(){return this.state.scrollArea},e.getHangerPosition=function(){return this.state.hangerPosition},e.getCameraPosition=function(){return this.state.position},e.connectAxesHandler=function(t){var e=this.state.options.horizontal;return this.axes.on(t).connect(e?["flick",""]:["","flick"],this.panInput)},e.appendPanelElement=function(t){this.cameraElement.appendChild(t)},e.build=function(){this.applyCSSValue(),this.placePanels(),this.resize(),this.state.options.circular&&(this.clonePanels(),this.replacePanels()),this.chainPanels(),this.setAxesInstance(),this.moveToDefaultPanel()},e.applyCSSValue=function(){var t=this.state.options,e=this.viewportElement,n=this.cameraElement,i=t.classPrefix;e.className=i+"-viewport",n.className=i+"-camera",s(e,o),s(n,r),t.zIndex&&(e.style.zIndex=""+t.zIndex),t.overflow&&(e.style.overflow="visible")},e.placePanels=function(){var t,n=this,i=this.state.options,e=this.cameraElement.children;if(!e||!e.length)throw new Error("There're no panel elements.");this.panels=(t=e,[].slice.call(t)).map(function(t,e){return new P(t,e,n,{horizontal:i.horizontal,classPrefix:i.classPrefix,anchorExpression:i.anchor})}),this.clonedPanels=[];var o=0;this.panels.forEach(function(t){var e=o,n=t.getSize();t.setPosition(e),o+=n})},e.clonePanels=function(){var t=this.state,e=this.panels,o=this.clonedPanels,n=t.size,i=e[e.length-1],r=i.getPosition()+i.getSize();t.scrollArea={prev:t.scrollArea.prev,next:r+e[0].getRelativeAnchorPosition()-t.hangerPosition};for(var s=t.scrollArea,a=s.next+n-s.prev,l=r,h=function(){var i=l;e.forEach(function(t){var e=i+t.getPosition(),n=t.clone();n.setPosition(e),o.push(n)}),l+=r};h(),l<=a;);},e.replacePanels=function(){for(var t=this.state,e=this.panels,n=this.clonedPanels,i=t.scrollArea.next+t.size,o=e[0].getPosition(),r=0,s=n.concat().reverse();r<s.length;r++){var a=s[r],l=a.getPosition(),h=o-a.getSize();if(l<=i)break;a.setPosition(h),o=h}},e.chainPanels=function(){var o=this.panels.concat(this.clonedPanels);if(o.forEach(function(t,e){var n=0<e?o[e-1]:null,i=e<o.length-1?o[e+1]:null;t.setPrevPanel(n),t.setNextPanel(i)}),this.state.options.circular){var t=o[0],e=o[o.length-1];t.setPrevPanel(e),e.setNextPanel(t)}},e.setAxesInstance=function(){var t,e=this.state,n=e.options,i=e.scrollArea,o=e.size,r=n.horizontal,s=n.bounce,a=s;if((t=s)&&t.constructor===Array)a=s.map(function(t){return u(t,o,d.bounce)});else{var l=u(s,o,d.bounce);a=[l,l]}this.axes=new h({flick:{range:[i.prev,i.next],circular:n.circular,bounce:a}},{easing:n.panelEffect,deceleration:n.deceleration,interruptable:!0}),this.panInput=new h.PanInput(this.viewportElement,{inputType:n.inputType,thresholdAngle:n.thresholdAngle,scale:r?[-1,0]:[0,-1]})},e.moveToDefaultPanel=function(){var t=this.state,e=v(t.options.defaultIndex,0,this.panels.length-1),n=this.panels[e],i=this.findShortestPositionToPanel(n);t.index=e,this.moveCamera(i),this.axes.setTo({flick:i},0)},e.isOutOfBound=function(){var t=this.state,e=t.scrollArea;return!t.options.circular&&(t.position<e.prev||t.position>e.next)},e.canSetBoundMode=function(){var t=this.state,e=t.options,n=this.panels,i=n[n.length-1],o=i.getPosition()+i.getSize();return e.bound&&!e.circular&&o>=t.size},t}();return function(r){function t(t,e){void 0===e&&(e={});var n,i=r.call(this)||this;if("string"==typeof t){if(!(n=document.querySelector(t)))throw new Error("Base element doesn't exist.")}else{if(!t.nodeName||1!==t.nodeType)throw new Error("Element should be provided in string or HTMLElement.");n=t}return i.wrapper=n,i.build(e),i}!function(t,e){function n(){this.constructor=t}i(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}(t,r);var e=t.prototype;return e.prev=function(t){var e=this.viewport.getCurrentPanel().getPrevPanel();return e&&this.moveToPanelProgramatic(e,t),this},e.next=function(t){var e=this.viewport.getCurrentPanel().getNextPanel();return e&&this.moveToPanelProgramatic(e,t),this},e.moveTo=function(t,e){var n=this.viewport.getPanel(t);return n&&this.moveToPanelProgramatic(n,e),this},e.getIndex=function(){return this.viewport.getIndex()},e.getPrevIndex=function(){return this.viewport.getPrevIndex()},e.getNextIndex=function(){return this.viewport.getNextIndex()},e.getCurrentPanel=function(){return this.viewport.getCurrentPanel().toReadonlyVersion()},e.getPanel=function(t){var e=this.viewport.getPanel(t);return e?e.toReadonlyVersion():null},e.getPanelCount=function(){return this.viewport.getPanelCount()},e.isPlaying=function(){return this.state.movingState!==w},e.enableInput=function(){return this.viewport.enable(),this},e.disableInput=function(){return this.viewport.disable(),this},e.destroy=function(){for(var t in this.off(),this.viewport.destroy(),this)this[t]=null},e.trigger=function(t,e){void 0===e&&(e={});var n=this.state,i=n.movingState===p||n.movingState===T,o=this.viewport.getCurrentPanel();return e.direction&&(n.movingDirection=e.direction),t===b.MOVE_END&&(n.moveStartTriggered=!1,n.options.adaptive&&this.viewport.adjustSize()),!r.prototype.trigger.call(this,t,l({type:t,index:o.getIndex(),panel:o.toReadonlyVersion(),holding:i},e))},e.build=function(t){this.setInitialState(t),this.initViewport(),this.listenInput()},e.setInitialState=function(t){var e=l({},n);e.options=l({},d,t),this.state=e},e.initViewport=function(){var t=this.wrapper,e=this.state.options,n=t.children;if(!n||!n.length)throw new Error("Given base element doesn't have proper DOM structure to be initialized.");for(var i=document.createElement("div"),o=t.firstChild;o;)i.appendChild(o),o=t.firstChild;var r=document.createElement("div");r.appendChild(i),t.appendChild(r),this.viewport=new m(r,i,e);var s=this.viewport;s.flicking=this,e.defaultIndex=v(e.defaultIndex,0,s.getPanelCount()-1)},e.listenInput=function(){this.viewport.connectAxesHandler({hold:this.onAxesHold.bind(this),change:this.onAxesChange.bind(this),release:this.onAxesRelease.bind(this),animationEnd:this.onAxesAnimationEnd.bind(this),finish:this.onAxesFinish.bind(this)})},e.stopMoving=function(){var t=this.state;t.panelMovingTo=void 0,t.movingState=w,t.movingDirection=void 0,t.lastHoldingDelta=0},e.onAxesHold=function(t){var e=this.state;e.movingState!==I&&(this.trigger(b.HOLD_START,{axesEvent:t,holding:!0,isTrusted:!0})?e.movingState=I:(e.movingState=e.movingState!==y?p:T,e.movingDirection=void 0,e.lastHoldingDelta=0))},e.onAxesChange=function(t){var e=this.state,n=this.viewport,i=t.pos.flick,o=t.inputEvent?e.options.horizontal?t.inputEvent.deltaX:t.inputEvent.deltaY:0;if(e.movingState!==I&&t.delta.flick){var r=o<e.lastHoldingDelta?z.NEXT:z.PREV;if(!e.moveStartTriggered){if(e.moveStartTriggered=!0,this.trigger(b.MOVE_START,{axesEvent:t,direction:e.movingState===p?r:e.movingDirection,isTrusted:t.isTrusted}))return this.stopMoving(),void(e.movingState=I);e.movingState=e.movingState===p?T:e.movingState}e.movingState===T&&(e.movingDirection=r,e.lastHoldingDelta=o);var s=this.viewport.getCameraPosition();return n.moveCamera(i),this.trigger(b.MOVE,{axesEvent:t,direction:e.movingDirection,isTrusted:t.isTrusted})?(n.moveCamera(s),this.stopMoving(),void(e.movingState=I)):void 0}},e.onAxesRelease=function(t){var e=this.state,n=e.options,i=this.viewport;if(e.movingState!==I){var o=n.horizontal?t.inputEvent.deltaX:t.inputEvent.deltaY,r=o<0,s=Math.abs(o),a=t.inputEvent.deltaX?Math.abs(180*Math.atan(t.inputEvent.deltaY/t.inputEvent.deltaX)/Math.PI):90,l=i.getCurrentPanel(),h=e.movingState===T,c=s>=n.threshold&&(n.horizontal?a<=n.thresholdAngle:a>n.thresholdAngle);if(e.movingState=y,this.trigger(b.HOLD_END,{axesEvent:t,holding:!1,direction:e.movingDirection,isTrusted:!0}),!c){if(!h){var u=i.getCameraPosition(),v=t.inputEvent.srcEvent.target,d=i.findPanelOf(v);if(d){var p=d.getPosition(),g=u<p?z.NEXT:p<u?z.PREV:void 0;e.movingState=w,this.trigger(b.SELECT,{axesEvent:t,direction:g,isTrusted:!0,selectedIndex:d.getIndex(),selectedPanel:d.toReadonlyVersion()})}else t.setTo({flick:u},0),this.stopMoving();return}if(e.panelMovingTo)return void this.viewport.moveTo(e.panelMovingTo.toReadonlyVersion(),t)}var f=r?l.getSize()-l.getRelativeAnchorPosition():l.getRelativeAnchorPosition();f=Math.max(f,n.threshold);var P=i.getCameraPosition()+i.getHangerPosition(),m=l;if(c)if(s<=f){var x=r?l.getNextPanel():l.getPrevPanel();if(n.circular){var E=l.getIdenticalPanels()[1];(A=Math.abs(l.getAnchorPosition()-P)>Math.abs(E.getAnchorPosition()-P))&&(x=r?E.getNextPanel():E.getPrevPanel())}m=null!=x?x:l}else m=i.findNearestPanel();else if(n.circular){E=l.getIdenticalPanels()[1];var A=Math.abs(l.getAnchorPosition()-P)>Math.abs(E.getAnchorPosition()-P);!r&&A&&(m=E)}var S=c?b.CHANGE:b.RESTORE;if(c&&!n.circular&&m===l&&(S=b.RESTORE),this.trigger(S,{index:m.getIndex(),panel:m.toReadonlyVersion(),prevIndex:S===b.CHANGE?l.getIndex():void 0,prevPanel:S===b.CHANGE?l.toReadonlyVersion():void 0,axesEvent:t,direction:e.movingDirection,isTrusted:!0}))return this.stopMoving(),void(e.movingState=I);e.panelMovingTo=m,this.viewport.moveTo(m.toReadonlyVersion(),t)}},e.onAxesAnimationEnd=function(t){var e=this.state;e.movingState!==I&&this.trigger(b.MOVE_END,{axesEvent:t,direction:e.movingDirection,isTrusted:t.isTrusted})},e.onAxesFinish=function(t){this.stopMoving()},e.moveToPanelProgramatic=function(t,e){void 0===e&&(e=this.state.options.duration);var n=this.state,i=this.viewport,o=i.getIndex();if(t&&n.movingState===w&&t.getIndex()!==o){var r=i.findShortestPositionToPanel(t),s=i.getCameraPosition(),a=s<r?z.NEXT:r<s?z.PREV:void 0;if(this.state.movingState=y,this.state.movingDirection=a,!this.trigger(b.CHANGE,{index:t.getIndex(),panel:t.toReadonlyVersion(),prevIndex:i.getIndex(),prevPanel:i.getCurrentPanel().toReadonlyVersion(),direction:a,isTrusted:!1})){var l=i.findNearestIdenticalPanel(t);this.viewport.moveTo(l.toReadonlyVersion(),null,e),e<=0&&(this.trigger(b.MOVE_END,{direction:a,isTrusted:!1}),this.stopMoving())}}},t.VERSION="3.0.0-dev",t.DIRECTION=z,t.EVENTS=b,t}(t)});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("@egjs/component"),require("@egjs/axes")):"function"==typeof define&&define.amd?define(["@egjs/component","@egjs/axes"],e):((t=t||self).eg=t.eg||{},t.eg.Flicking=e(t.eg.Component,t.eg.Axes))}(this,function(t,o){"use strict";var i=function(t,e){return(i=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(t,e)};function r(t,e){function n(){this.constructor=t}i(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}function p(i){for(var t=[],e=1;e<arguments.length;e++)t[e-1]=arguments[e];return t.forEach(function(n){Object.keys(n).forEach(function(t){var e=n[t];i[t]=e})}),i}var s=function(){var t={webkitTransform:"-webkit-transform",msTransform:"-ms-transform",MozTransform:"-moz-transform",OTransform:"-o-transform",transform:"transform"},e=document.documentElement.style,n="";for(var i in t)i in e&&(n=i);if(!n)throw new Error("Browser doesn't support CSS3 2D Transforms.");var o=document.createElement("div");document.documentElement.insertBefore(o,null),o.style[n]="translate3d(1px, 1px, 1px)";var r=window.getComputedStyle(o).getPropertyValue(t[n]);o.parentElement.removeChild(o);var a={name:n,has3d:0<r.length&&"none"!==r};return s=function(){return a},a};function a(e,n){Object.keys(n).forEach(function(t){e.style[t]=n[t]})}function f(t,e,n){return Math.max(Math.min(t,n),e)}function d(t,e,n){return e<=t&&t<=n}function g(t,e,n){var i=null!=n?n:e/2,o=/(?:(\+|\-)\s*)?(\d+(?:\.\d+)?(%|px)?)/g;if("number"==typeof t)return f(t,0,e);for(var r=0,a=0,s=o.exec(t);null!=s;){var l=s[1],c=s[2],h=s[3],u=parseFloat(c);if(r<=0&&(l=l||"+"),!l)return i;"%"===h&&(u=u/100*e),a+="+"===l?u:-u,++r,s=o.exec(t)}return 0===r?i:f(a,0,e)}function y(t,e){var n=e[0],i=e[1],o=e[2];return i<t?o-i?(t-i)/(o-i):(t-n)/(o-n):t<i?i-n?(t-i)/(i-n):(t-n)/(o-n):0}var v={classPrefix:"eg-flick",deceleration:.0075,horizontal:!0,circular:!1,threshold:40,duration:100,panelEffect:function(t){return 1-Math.pow(1-t,3)},defaultIndex:0,inputType:["touch","mouse"],thresholdAngle:45,bounce:10,autoResize:!1,adaptive:!1,zIndex:2e3,bound:!1,overflow:!1,hanger:"50%",anchor:"50%",gap:0,snap:1},l={position:"relative",zIndex:v.zIndex,width:"100%",height:"100%",willChange:"transform",overflow:"hidden"},c={width:"100%",height:"100%"},h={position:"absolute"},N={HOLD_START:"holdStart",HOLD_END:"holdEnd",MOVE_START:"moveStart",MOVE:"move",MOVE_END:"moveEnd",CHANGE:"change",RESTORE:"restore",SELECT:"select"},P={HOLD:"hold",CHANGE:"change",RELEASE:"release",ANIMATION_END:"animationEnd",FINISH:"finish"},u=0,m=1,x=2,M=3,R=4,E={PREV:"PREV",NEXT:"NEXT"},A=s(),S=function(){function i(t,e,n){var i,o;this.element=t,this.state={index:e,horizontal:n.horizontal,position:0,anchorExpression:n.anchorExpression,relativeAnchorPosition:0,size:0,clonedPanels:[],isClone:!1,cloneIndex:-1,originalStyle:{className:t.getAttribute("class")||null,style:t.getAttribute("style")||null},cachedBbox:null},n.classPrefix&&(i=t,o=n.classPrefix+"-panel",i.classList?i.classList.add(o):i.className.indexOf(o)<0&&(i.className=(i.className+" "+o).replace(/\s{2,}/g," "))),a(this.element,h),this.resize()}var t=i.prototype;return t.resize=function(){var t=this.state;t.cachedBbox=null;var e=this.getBbox();t.size=t.horizontal?e.width:e.height,t.isClone||t.clonedPanels.forEach(function(t){return t.resize()})},t.destroy=function(){var t=this.element,e=this.state.originalStyle;for(var n in e.className?t.setAttribute("class",e.className):t.removeAttribute("class"),e.style?t.setAttribute("style",e.style):t.removeAttribute("style"),this)this[n]=null},t.getElement=function(){return this.element},t.getAnchorPosition=function(){return this.state.position+this.state.relativeAnchorPosition},t.getRelativeAnchorPosition=function(){return this.state.relativeAnchorPosition},t.getIndex=function(){return this.state.index},t.getPosition=function(){return this.state.position},t.getSize=function(){return this.state.size},t.getPrevPanel=function(){return this.prevPanel},t.getNextPanel=function(){return this.nextPanel},t.getBbox=function(){var t=this.state;return t.cachedBbox||(t.cachedBbox=this.element.getBoundingClientRect()),t.cachedBbox},t.isClone=function(){return this.state.isClone},t.getCloneIndex=function(){return this.state.cloneIndex},t.getClonedPanels=function(){return this.state.clonedPanels},t.getIdenticalPanels=function(){var t=this.state;return t.isClone?this.original.getIdenticalPanels():[this].concat(t.clonedPanels)},t.setPosition=function(t){var e=this.state,n=this.element.style;e.position=t,e.horizontal?n.left=t+"px":n.top=t+"px",e.relativeAnchorPosition=g(e.anchorExpression,e.size)},t.setPrevPanel=function(t){this.prevPanel=t},t.setNextPanel=function(t){this.nextPanel=t},t.clone=function(t){var e=this.state,n=new i(this.element.cloneNode(!0),e.index,{anchorExpression:e.anchorExpression,horizontal:e.horizontal});return n.original=this,n.state.isClone=!0,n.state.cloneIndex=t,n.state.size=e.size,e.clonedPanels.push(n),n},t.removeClonedPanelsAfter=function(t){for(var e=0,n=this.state.clonedPanels.splice(t);e<n.length;e++){var i=n[e].getElement();i.parentNode.removeChild(i)}},i}(),T=function(){function t(t,e,n){this.clonedPanels=[],this.viewportElement=t,this.cameraElement=e,this.state={index:n.defaultIndex,size:0,position:0,hangerPosition:0,scrollArea:{prev:0,next:0},translate:A},this.options=n,this.build()}var e=t.prototype;return e.moveTo=function(t,e,n){void 0===n&&(n=this.options.duration);var i=this.state,o=t.anchorPosition-i.hangerPosition;o=this.canSetBoundMode()?f(o,i.scrollArea.prev,i.scrollArea.next):o,i.index=t.index,e&&e.setTo?e.setTo({flick:o},n):this.axes.setTo({flick:o},n)},e.moveCamera=function(t){var e=this.state,n=e.translate.name,i=(this.options.horizontal?[-t,0]:[0,-t]).map(function(t){return Math.round(t)+"px"}).join(", ");this.cameraElement.style[n]=e.translate.has3d?"translate3d("+i+", 0px)":"translate("+i+")",e.position=t},e.resize=function(){this.updateSize(),this.updateOriginalPanelPositions(),this.updateAdaptiveSize(),this.updateScrollArea(),this.options.circular&&(this.clonePanels(),this.relocatePanels()),this.chainPanels(),this.updateCameraPosition()},e.findNearestPanel=function(){var t=this.state,e=this.panels,n=this.clonedPanels,i=t.scrollArea,o=t.position+t.hangerPosition;if(this.isOutOfBound())return t.position<i.prev?e[0]:e[e.length-1];for(var r,a=1/0,s=0,l=e.concat(n);s<l.length;s++){var c=l[s],h=c.getPosition(),u=h+c.getSize(),f=d(o,h,u)?0:Math.min(Math.abs(h-o),Math.abs(u-o));if(a<f)break;a=f,r=c}return r},e.findPanelOf=function(t){for(var e=0,n=this.panels.concat(this.clonedPanels);e<n.length;e++){var i=n[e];if(i.getElement().contains(t))return i}},e.findNearestIdenticalPanel=function(t){var e=this.state,i=t,o=1/0,r=e.position+e.hangerPosition;return t.getIdenticalPanels().forEach(function(t){var e=t.getAnchorPosition(),n=Math.abs(e-r);n<o&&(i=t,o=n)}),i},e.findShortestPositionToPanel=function(t){var e=this.state,n=this.options,i=t.getAnchorPosition(),o=Math.abs(e.position+e.hangerPosition-i),r=e.scrollArea.next-e.scrollArea.prev;if(n.circular)return o<=r-o?i-e.hangerPosition:i>e.position+e.hangerPosition?i-e.hangerPosition-r:i-e.hangerPosition+r;var a=i-e.hangerPosition;return this.canSetBoundMode()?f(a,e.scrollArea.prev,e.scrollArea.next):a},e.enable=function(){this.panInput.enable()},e.disable=function(){this.panInput.disable()},e.updateAdaptiveSize=function(){var t,e=this.options,i=e.horizontal;if(e.adaptive){var n=this.getCurrentPanel().getBbox();t=i?n.height:n.width}else{t=this.panels.reduce(function(t,e){var n=e.getBbox();return Math.max(t,i?n.height:n.width)},0)}var o=this.viewportElement.style;i?(o.height=t+"px",o.minHeight="100%",o.width="100%"):(o.width=t+"px",o.minWidth="100%",o.height="100%")},e.destroy=function(){var t=this.viewportElement,e=t.parentElement;for(var n in e.removeChild(t),this.axes.destroy(),this.panInput.destroy(),this.panels.forEach(function(t){e.appendChild(t.getElement()),t.destroy()}),this)this[n]=null},e.restore=function(t){var e=t.panels,n=this.cameraElement;n.innerHTML=e.map(function(t){return t.html}).join(""),this.viewportElement.appendChild(n),this.state.index=t.index,this.moveCamera(t.position),this.panels=[],this.clonedPanels=[],this.createPanels(),this.resize()},e.getPanelCount=function(){return this.panels.length},e.getPanel=function(t){return d(t,0,this.panels.length-1)?this.panels[t]:null},e.getCurrentPanel=function(){return this.panels[this.state.index]},e.getIndex=function(){return this.state.index},e.getPrevIndex=function(){var t=this.state.index-1;return t<0&&(t=this.options.circular?this.panels.length-1:-1),t},e.getNextIndex=function(){var t=this.state.index+1;return t>=this.panels.length&&(t=this.options.circular?0:-1),t},e.getSize=function(){return this.state.size},e.getScrollArea=function(){return this.state.scrollArea},e.getScrollAreaSize=function(){var t=this.state.scrollArea;return t.next-t.prev},e.getHangerPosition=function(){return this.state.hangerPosition},e.getCameraPosition=function(){return this.state.position},e.getAllPanels=function(t){var e=this.panels;return t?e.concat(this.clonedPanels):e},e.connectAxesHandler=function(t){var e=this.axes;this.axesHandlers=t,e.on(t),this.resume()},e.pause=function(){this.axes.off()},e.resume=function(){this.axes.on(this.axesHandlers)},e.build=function(){this.applyCSSValue(),this.setAxesInstance(),this.createPanels(),this.resize(),this.moveToDefaultPanel()},e.applyCSSValue=function(){var t=this.options,e=this.viewportElement,n=this.cameraElement,i=t.classPrefix;e.className=i+"-viewport",n.className=i+"-camera",a(e,l),a(n,c),t.zIndex&&(e.style.zIndex=""+t.zIndex),t.overflow&&(e.style.overflow="visible")},e.setAxesInstance=function(){var t=this.state,e=this.options,n=t.scrollArea,i=e.horizontal;this.axes=new o({flick:{range:[n.prev,n.next],circular:e.circular,bounce:[0,0]}},{easing:e.panelEffect,deceleration:e.deceleration,interruptable:!0}),this.panInput=this.makeNewPanInput(),this.axes.connect(i?["flick",""]:["","flick"],this.panInput)},e.createPanels=function(){var t,e=this.state,n=this.options,i=this.cameraElement.children;if(!i||!i.length)throw new Error("There're no panel elements.");this.panels=(t=i,[].slice.call(t)).map(function(t,e){return new S(t,e,{horizontal:n.horizontal,classPrefix:n.classPrefix,anchorExpression:n.anchor})}),e.index=f(e.index,0,this.panels.length-1)},e.clonePanels=function(){var i=this,t=this.state,e=this.panels,o=this.clonedPanels,n=t.size,r=e[e.length-1],a=r.getPosition()+r.getSize()+this.options.gap,s=n+e[0].getRelativeAnchorPosition(),l=o[o.length-1],c=Math.ceil(s/a),h=l?l.getCloneIndex()+1:0;if(h<c)for(var u=function(n){e.forEach(function(t){var e=t.clone(n);i.appendPanelElement(e.getElement()),o.push(e)})},f=h;f<c;f++)u(f);else c<h&&(e.forEach(function(t){t.removeClonedPanelsAfter(c)}),this.clonedPanels.splice(c*e.length))},e.relocatePanels=function(){var t=this.state,e=this.options,n=this.panels,i=this.clonedPanels,o=t.scrollArea,r=o.next+t.size,a=(o.prev,n[0]),s=n[n.length-1];if(a){for(var l=s.getPosition()+s.getSize()+e.gap,c=0,h=i;c<h.length;c++){var u=(v=h[c]).getIdenticalPanels()[0],f=l*(v.getCloneIndex()+1)+u.getPosition();v.setPosition(f)}for(var p=a.getPosition(),d=0,g=i.concat().reverse();d<g.length;d++){var v,P=(v=g[d]).getPosition(),m=p-v.getSize()-e.gap;if(P<=r)break;v.setPosition(m),p=m}}},e.chainPanels=function(){var o=this.panels.concat(this.clonedPanels);if(o.forEach(function(t,e){var n=0<e?o[e-1]:null,i=e<o.length-1?o[e+1]:null;t.setPrevPanel(n),t.setNextPanel(i)}),this.options.circular){var t=o[0],e=o[o.length-1];t.setPrevPanel(e),e.setNextPanel(t)}},e.moveToDefaultPanel=function(){var t=this.state,e=f(this.options.defaultIndex,0,this.panels.length-1),n=this.panels[e].getAnchorPosition()-t.hangerPosition;n=this.canSetBoundMode()?f(n,t.scrollArea.prev,t.scrollArea.next):n,t.index=e,this.moveCamera(n),this.axes.setTo({flick:n},0)},e.isOutOfBound=function(){var t=this.state,e=t.scrollArea;return!this.options.circular&&(t.position<e.prev||t.position>e.next)},e.canSetBoundMode=function(){var t=this.state,e=this.options,n=this.panels,i=n[n.length-1],o=i.getPosition()+i.getSize();return e.bound&&!e.circular&&o>=t.size},e.updateSize=function(){var t=this.state,e=this.options,n=this.viewportElement;e.horizontal||(n.style.width="",n.style.minWidth="");var i=n.getBoundingClientRect();t.size=e.horizontal?i.width:i.height,t.hangerPosition=g(e.hanger,t.size)},e.updateOriginalPanelPositions=function(){var i=this.options.gap,t=this.panels,o=0;t.forEach(function(t){t.resize();var e=o,n=t.getSize();t.setPosition(e),o+=n+i})},e.updateScrollArea=function(){var t=this.state,e=this.panels,n=this.options,i=this.axes,o=e[0],r=e[e.length-1],a=t.hangerPosition;if(this.canSetBoundMode())t.scrollArea={prev:o.getPosition(),next:r.getPosition()+r.getSize()-t.size};else if(n.circular){var s=r.getPosition()+r.getSize()+n.gap;t.scrollArea={prev:o.getAnchorPosition()-a,next:s+o.getRelativeAnchorPosition()-a}}else t.scrollArea={prev:o.getAnchorPosition()-a,next:r.getAnchorPosition()-a};var l,c=t.size,h=n.bounce,u=h;if((l=h)&&l.constructor===Array)u=h.map(function(t){return g(t,c,v.bounce)});else{var f=g(h,c,v.bounce);u=[f,f]}i.axis.flick.range=[t.scrollArea.prev,t.scrollArea.next],i.axis.flick.bounce=u},e.updateCameraPosition=function(){var t=this.state,e=this.panels,n=this.axes,i=e[t.index].getAnchorPosition()-t.hangerPosition;this.canSetBoundMode()&&(i=f(i,t.scrollArea.prev,t.scrollArea.next)),this.moveCamera(i),this.pause(),n.setTo({flick:i},0),this.resume()},e.makeNewPanInput=function(){var t=this.options;return new o.PanInput(this.viewportElement,{inputType:t.inputType,thresholdAngle:t.thresholdAngle,scale:t.horizontal?[-1,0]:[0,-1]})},e.appendPanelElement=function(t){this.cameraElement.appendChild(t)},t}(),e=function(){function t(){this.delta=0,this.direction=null,this.targetPanel=null}var e=t.prototype;return e.onEnter=function(t){this.delta=t.delta,this.direction=t.direction,this.targetPanel=t.targetPanel},e.onExit=function(t){},e.onHold=function(t,e){},e.onChange=function(t,e){},e.onRelease=function(t,e){},e.onAnimationEnd=function(t,e){},e.onFinish=function(t,e){},t}(),C=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.type=u,t.holding=!1,t.playing=!1,t}r(t,e);var n=t.prototype;return n.onEnter=function(){this.direction=null,this.targetPanel=null,this.delta=0},n.onHold=function(t,e){var n=e.triggerEvent,i=e.transitTo;n(N.HOLD_START,t,!0).onSuccess(function(){i(m)}).onStopped(function(){i(R)})},n.onChange=function(t,e){var n=e.triggerEvent,i=e.transitTo;n(N.MOVE_START,t,!1).onSuccess(function(){i(M).onChange(t,e)}).onStopped(function(){i(R)})},t}(e),w=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.type=m,t.holding=!0,t.playing=!0,t.releaseEvent=null,t}r(t,e);var n=t.prototype;return n.onChange=function(t,e){var n=e.flicking,i=e.triggerEvent,o=e.transitTo,r=n.options.horizontal?t.inputEvent.offsetX:t.inputEvent.offsetY;this.direction=r<0?E.NEXT:E.PREV,i(N.MOVE_START,t,!0).onSuccess(function(){o(x).onChange(t,e)}).onStopped(function(){o(R)})},n.onRelease=function(t,e){var n=e.viewport,i=e.triggerEvent,o=e.transitTo;if(i(N.HOLD_END,t,!0),0!==t.delta.flick)return t.setTo({flick:n.getCameraPosition()},0),void o(u);this.releaseEvent=t},n.onFinish=function(t,e){var n=e.viewport,i=e.triggerEvent,o=e.transitTo,r=e.castToReadonlyPanel;if(o(u),this.releaseEvent){var a=this.releaseEvent.inputEvent.srcEvent.target,s=n.findPanelOf(a),l=n.getCameraPosition();if(s){var c=s.getPosition();i(N.SELECT,null,!0,{direction:l<c?E.NEXT:c<l?E.PREV:null,selectedIndex:s.getIndex(),selectedPanel:r(s)})}}},t}(e),z=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.type=x,t.holding=!0,t.playing=!0,t}r(t,e);var n=t.prototype;return n.onEnter=function(t){e.prototype.onEnter.call(this,t),this.delta=0},n.onChange=function(t,e){var n=e.moveCamera,i=e.transitTo;t.delta.flick&&n(t).onStopped(function(){i(R)})},n.onRelease=function(t,e){var n=e.flicking,i=e.viewport,o=e.triggerEvent,r=e.moveToPanel,a=e.castToReadonlyPanel,s=e.transitTo,l=e.stopCamera,c=this.delta,h=n.options,u=0<c,f=Math.abs(c),p=t.inputEvent.deltaX?Math.abs(180*Math.atan(t.inputEvent.deltaY/t.inputEvent.deltaX)/Math.PI):90,d=f>=h.threshold&&(h.horizontal?p<=h.thresholdAngle:p>h.thresholdAngle);if(o(N.HOLD_END,t,!0),!d&&this.targetPanel)return i.moveTo(this.targetPanel,t),void s(M);var g=i.getCurrentPanel(),v=i.getCameraPosition()+i.getHangerPosition(),P=h.gap/2,m=u?g.getSize()-g.getRelativeAnchorPosition()+P:g.getRelativeAnchorPosition()+P;m=Math.max(m,h.threshold);var x,E=Math.abs(t.delta.flick),A=h.snap,S=h.duration,T=a(g);if(d){var y=0;if(m<=E){for(var C=T.position;Math.abs(T.position-C)<E&&y<A;){var w=u?T.next():T.prev();if(!w)break;T=w,++y}1<y&&(x=Math.min(S*y,Math.max(t.duration,S)))}if(y<=1)if(f<=m){var z=u?g.getNextPanel():g.getPrevPanel();if(h.circular){var I=g.getIdenticalPanels()[1];(b=Math.abs(g.getAnchorPosition()-v)>Math.abs(I.getAnchorPosition()-v))&&(z=u?I.getNextPanel():I.getPrevPanel())}T=a(null!=z?z:g)}else T=a(i.findNearestPanel())}else if(h.circular){I=g.getIdenticalPanels()[1];var b=Math.abs(g.getAnchorPosition()-v)>Math.abs(I.getAnchorPosition()-v);!u&&b&&(T=a(I))}r(T,!d||!h.circular&&T.position===g.getPosition()?N.RESTORE:N.CHANGE,t,x).onSuccess(function(){s(M)}).onStopped(function(){s(R),l(t)})},t}(e),I=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.type=M,t.holding=!1,t.playing=!0,t}r(t,e);var n=t.prototype;return n.onHold=function(t,e){var n=e.triggerEvent,i=e.transitTo;n(N.HOLD_START,t,!0).onSuccess(function(){i(x)}).onStopped(function(){i(R)})},n.onChange=function(t,e){var n=e.moveCamera,i=e.transitTo;t.delta.flick&&n(t).onStopped(function(){i(R)})},n.onFinish=function(t,e){var n=e.flicking,i=e.viewport,o=e.triggerEvent,r=e.transitTo,a=t&&t.isTrusted;o(N.MOVE_END,t,a),n.options.adaptive&&i.updateAdaptiveSize(),r(u)},t}(e),b=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.type=R,t.holding=!1,t.playing=!0,t}r(t,e);var n=t.prototype;return n.onAnimationEnd=function(t,e){(0,e.transitTo)(u)},n.onRelease=function(t,e){var n=e.transitTo;0===t.delta.flick&&n(u)},t}(e),n=function(){function t(){var i=this;this.state=new C,this.transitTo=function(t){var e=i.state;if(e.type!==t){var n=void 0;switch(t){case u:n=new C;break;case m:n=new w;break;case x:n=new z;break;case M:n=new I;break;case R:n=new b}e.onExit(n),n.onEnter(e),i.state=n}return i.state}}var e=t.prototype;return e.fire=function(t,e,n){var i=this.state;switch(t){case P.HOLD:i.onHold(e,n);break;case P.CHANGE:i.onChange(e,n);break;case P.RELEASE:i.onRelease(e,n);break;case P.ANIMATION_END:i.onAnimationEnd(e,n);break;case P.FINISH:i.onFinish(e,n)}},e.getState=function(){return this.state},t}();return function(f){function t(t,e){void 0===e&&(e={});var n,T=f.call(this)||this;if(T.plugins=[],T.triggerEvent=function(t,e,n,i){void 0===i&&(i={});var o=T.viewport,r=T.stateMachine.getState(),a=o.getCurrentPanel(),s=o.getScrollArea(),l=s.prev,c=s.next,h=y(o.getCameraPosition(),[l,l,c]);T.options.circular&&(h%=1);var u=!f.prototype.trigger.call(T,t,p({type:t,index:a.getIndex(),panel:T.castToReadonlyPanel(a),direction:r.direction,holding:r.holding,progress:h,axesEvent:e,isTrusted:n},i));return{onSuccess:function(t){return u||t(),this},onStopped:function(t){return u&&t(),this}}},T.moveCamera=function(t){var e=T.viewport,n=T.stateMachine.getState(),i=T.options,o=t.pos.flick;if(t.isTrusted&&n.holding){var r=(i.horizontal?t.inputEvent.offsetX:t.inputEvent.offsetY)<0,a=e.getCameraPosition(),s=o-a,l=r===o<a;if(i.circular&&l){var c=e.getScrollAreaSize();s=-Math.sign(s)*(c-Math.abs(s))}var h=0===s?n.direction:0<s?E.NEXT:E.PREV;n.delta+=s,n.direction=h}var u=e.getCameraPosition();return e.moveCamera(o),T.triggerEvent(N.MOVE,t,t.isTrusted).onStopped(function(){e.moveCamera(u)})},T.stopCamera=function(t){var e=T.viewport;t&&t.setTo&&t.setTo({flick:e.getCameraPosition()},0),T.stateMachine.transitTo(u)},T.moveToPanel=function(e,t,n,i){void 0===i&&(i=T.options.duration);var o,r=T.viewport,a=T.stateMachine,s=r.getCurrentPanel(),l=e.anchorPosition-r.getHangerPosition(),c=r.getCameraPosition(),h=null!==n,u=c<l?E.NEXT:E.PREV;return(o=t===N.CHANGE?T.triggerEvent(N.CHANGE,n,h,{index:e.index,panel:e,direction:u,prevIndex:s.getIndex(),prevPanel:T.castToReadonlyPanel(s)}):T.triggerEvent(N.RESTORE,n,h)).onSuccess(function(){var t=a.getState();t.targetPanel=e,t.direction=u,r.moveTo(e,n,i)}),i<=0&&a.fire(P.FINISH,null,T.eventContext),o},T.castToReadonlyPanel=function(i,o){void 0===o&&(o=i.getPosition());var r=T,t=T.options.circular,a=T.viewport,e=i.getSize(),n=i.getRelativeAnchorPosition(),s=a.getCameraPosition(),l=a.getHangerPosition(),c=s+l,h=T.viewport.findNearestPanel(),u=h.getPosition()>=c||!h.getNextPanel(),f=(u?h.getPrevPanel():h)||h,p=(u?h:h.getNextPanel())||h,d=a.getScrollAreaSize(),g=f.getAnchorPosition(),v=p.getAnchorPosition();v<g&&(g<c?v+=d:g-=d);var P=[g,g,v],m=[-e,l-n,a.getSize()],x=T.getPanelCount(),E=f.getCloneIndex(),A=(t?Math.floor(o/d)*x:0)+i.getIndex()-y(c,P)-(f.getIndex()+(E+1)*x),S=y(o-s,m);return{element:i.getElement(),index:i.getIndex(),position:o,progress:A,outsetProgress:S,anchorPosition:o+i.getRelativeAnchorPosition(),size:i.getSize(),focus:function(t){a.getCameraPosition()+a.getHangerPosition()!==i.getAnchorPosition()&&r.moveToPanel(this,N.CHANGE,null,t)},update:function(e){i.getIdenticalPanels().forEach(function(t){return e(t.getElement())})},prev:function(){var t=i.getPrevPanel();if(null==t)return null;for(var e=a.getScrollAreaSize(),n=t.getPosition();o<n;)n-=e;return r.castToReadonlyPanel(t,n)},next:function(){var t=i.getNextPanel();if(null==t)return null;for(var e=a.getScrollAreaSize(),n=t.getPosition();n<o;)n+=e;return r.castToReadonlyPanel(t,n)}}},"string"==typeof t){if(!(n=document.querySelector(t)))throw new Error("Base element doesn't exist.")}else{if(!t.nodeName||1!==t.nodeType)throw new Error("Element should be provided in string or HTMLElement.");n=t}return T.wrapper=n,T.build(e),T}r(t,f);var e=t.prototype;return e.prev=function(t){return this.moveTo(this.viewport.getPrevIndex(),t)},e.next=function(t){return this.moveTo(this.viewport.getNextIndex(),t)},e.moveTo=function(t,e){var n=this.viewport,i=n.getPanel(t);if(i){var o=this.stateMachine.getState(),r=n.getIndex();if(!(o.type===u&&i.getIndex()!==r))return this;var a=this.castToReadonlyPanel(n.findNearestIdenticalPanel(i));this.moveToPanel(a,N.CHANGE,null,e)}return this},e.getIndex=function(){return this.viewport.getIndex()},e.getPrevIndex=function(){return this.viewport.getPrevIndex()},e.getNextIndex=function(){return this.viewport.getNextIndex()},e.getCurrentPanel=function(){return this.castToReadonlyPanel(this.viewport.getCurrentPanel())},e.getPanel=function(t){var e=this.viewport.getPanel(t);return e?this.castToReadonlyPanel(e):null},e.getAllPanels=function(t){var e=this;return this.viewport.getAllPanels(t).map(function(t){return e.castToReadonlyPanel(t)})},e.getVisiblePanels=function(){return this.getAllPanels(!0).filter(function(t){var e=t.outsetProgress;return-1<e&&e<1})},e.getPanelCount=function(){return this.viewport.getPanelCount()},e.isPlaying=function(){return this.stateMachine.getState().playing},e.enableInput=function(){return this.viewport.enable(),this},e.disableInput=function(){return this.viewport.disable(),this},e.getStatus=function(){var t=this.viewport.getAllPanels().map(function(t){return{html:t.getElement().outerHTML,index:t.getIndex()}});return{index:this.getIndex(),panels:t,position:this.viewport.getCameraPosition()}},e.setStatus=function(t){this.viewport.restore(t)},e.addPlugins=function(t){var e=this,n=[].concat(t);return n.forEach(function(t){t.init(e)}),this.plugins=this.plugins.concat(n),this},e.removePlugins=function(t){var n=this,i=this.plugins;return[].concat(t).forEach(function(t){var e=i.indexOf(t);-1<e&&i.splice(e,1),t.destroy(n)}),this},e.destroy=function(){var e=this;for(var t in this.off(),this.viewport.destroy(),this.plugins.forEach(function(t){t.destroy(e)}),this)this[t]=null},e.resize=function(){return this.viewport.resize(),this},e.build=function(t){this.setInitialState(t),this.initViewport(),this.listenInput(),this.listenResize()},e.setInitialState=function(t){this.options=p({},v,t),this.stateMachine=new n},e.initViewport=function(){var t=this.wrapper,e=this.options,n=t.children;if(!n||!n.length)throw new Error("Given base element doesn't have proper DOM structure to be initialized.");for(var i=document.createElement("div"),o=t.firstChild;o;)i.appendChild(o),o=t.firstChild;var r=document.createElement("div");r.appendChild(i),t.appendChild(r),this.viewport=new T(r,i,e)},e.listenInput=function(){var n=this,i=n.stateMachine;n.eventContext={flicking:n,viewport:n.viewport,transitTo:i.transitTo,triggerEvent:n.triggerEvent,moveCamera:n.moveCamera,stopCamera:n.stopCamera,moveToPanel:n.moveToPanel,castToReadonlyPanel:n.castToReadonlyPanel};var o={},t=function(t){var e=P[t];o[e]=function(t){return i.fire(e,t,n.eventContext)}};for(var e in P)t(e);n.viewport.connectAxesHandler(o)},e.listenResize=function(){var t=this;this.options.autoResize&&window.addEventListener("resize",function(){t.resize()})},t.VERSION="3.0.0-beta2",t.DIRECTION=E,t.EVENTS=N,t}(t)});
 //# sourceMappingURL=flicking.min.js.map

dist/flicking.pkgd.min.js

@@ -7,3 +7,3 @@ /*
 https://github.com/naver/egjs-flicking
-@version 3.0.0-dev
+@version 3.0.0-beta2
 All-in-one packaged file for ease use of '@egjs/flicking' with below dependencies.
@@ -14,3 +14,3 @@ - @egjs/axes ^2.5.9, @egjs/component ^2.1.2
 */
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):((t=t||self).eg=t.eg||{},t.eg.Flicking=e())}(this,function(){"use strict";var i=function(t,e){return(i=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(t,e)};function a(t){return void 0===t}var t=function(){var t=function(){function t(){this._eventHandler={},this.options={}}var e=t.prototype;return e.trigger=function(t,e){void 0===e&&(e={});var n=this._eventHandler[t]||[];if(!(0<n.length))return!0;n=n.concat(),e.eventType=t;var i=!1,r=[e],o=0;e.stop=function(){i=!0},e.currentTarget=this;for(var s=arguments.length,a=new Array(2<s?s-2:0),h=2;h<s;h++)a[h-2]=arguments[h];for(1<=a.length&&(r=r.concat(a)),o=0;n[o];o++)n[o].apply(this,r);return!i},e.once=function(r,o){if("object"==typeof r&&a(o)){var t,e=r;for(t in e)this.once(t,e[t]);return this}if("string"==typeof r&&"function"==typeof o){var s=this;this.on(r,function t(){for(var e=arguments.length,n=new Array(e),i=0;i<e;i++)n[i]=arguments[i];o.apply(s,n),s.off(r,t)})}return this},e.hasOn=function(t){return!!this._eventHandler[t]},e.on=function(t,e){if("object"==typeof t&&a(e)){var n,i=t;for(n in i)this.on(n,i[n]);return this}if("string"==typeof t&&"function"==typeof e){var r=this._eventHandler[t];a(r)&&(this._eventHandler[t]=[],r=this._eventHandler[t]),r.push(e)}return this},e.off=function(t,e){if(a(t))return this._eventHandler={},this;if(a(e)){if("string"==typeof t)return this._eventHandler[t]=void 0,this;var n,i=t;for(n in i)this.off(n,i[n]);return this}var r,o,s=this._eventHandler[t];if(s)for(r=0;void 0!==(o=s[r]);r++)if(o===e){s=s.splice(r,1);break}return this},t}();return t.VERSION="2.1.2",t}();function h(i){for(var t=[],e=1;e<arguments.length;e++)t[e-1]=arguments[e];return t.forEach(function(n){Object.keys(n).forEach(function(t){var e=n[t];i[t]=e})}),i}var u=function(){var t={webkitTransform:"-webkit-transform",msTransform:"-ms-transform",MozTransform:"-moz-transform",OTransform:"-o-transform",transform:"transform"},e=document.documentElement.style,n="";for(var i in t)i in e&&(n=i);if(!n)throw new Error("Browser doesn't support CSS3 2D Transforms.");var r=document.createElement("div");document.documentElement.insertBefore(r,null),r.style[n]="translate3d(1px, 1px, 1px)";var o=window.getComputedStyle(r).getPropertyValue(t[n]);r.parentElement.removeChild(r);var s={name:n,has3d:0<o.length&&"none"!==o};return u=function(){return s},s};function s(e,n){Object.keys(n).forEach(function(t){e.style[t]=n[t]})}function p(t,e,n){return Math.max(Math.min(t,n),e)}function c(t,e,n){return e<=t&&t<n}function l(t,e,n){var i=null!=n?n:e/2,r=/(?:(\+|\-)\s*)?(\d+(?:\.\d+)?(%|px)?)/g;if("number"==typeof t)return p(t,0,e);for(var o=0,s=0,a=r.exec(t);null!=a;){var h=a[1],u=a[2],c=a[3],l=parseFloat(u);if(o<=0&&(h=h||"+"),!h)return i;"%"===c&&(l=l/100*e),s+="+"===h?l:-l,++o,a=r.exec(t)}return 0===o?i:p(s,0,e)}var f={classPrefix:"eg-flick",deceleration:6e-4,horizontal:!0,circular:!1,threshold:40,duration:100,panelEffect:function(t){return 1-Math.pow(1-t,3)},defaultIndex:0,inputType:["touch","mouse"],thresholdAngle:45,bounce:10,adaptive:!1,zIndex:2e3,bound:!1,overflow:!1,hanger:"50%",anchor:"50%"},b="IDLE",v="HOLDING",w="DRAGGING",A="MOVING",I="DISABLED",n={options:f,currentPanelIndex:f.defaultIndex,movingDirection:void 0,movingState:b,moveStartTriggered:!1,lastHoldingDelta:0},r={position:"relative",zIndex:f.zIndex,width:"100%",height:"100%",willChange:"transform",overflow:"hidden"},o={width:"100%",height:"100%"},d={position:"absolute"},S={HOLD_START:"holdStart",HOLD_END:"holdEnd",MOVE_START:"moveStart",MOVE:"move",MOVE_END:"moveEnd",CHANGE:"change",RESTORE:"restore",SELECT:"select"},C={PREV:"PREV",NEXT:"NEXT"},m=u(),g=function(){function r(t,e,n,i){var r,o;this.element=t,this.viewport=n,this.state={index:e,horizontal:i.horizontal,position:0,anchorExpression:i.anchorExpression,relativeAnchorPosition:0,size:0,clonedPanels:[],isClone:!1,originalStyle:{className:t.getAttribute("class")||null,style:t.getAttribute("style")||null},cachedBbox:null},i.classPrefix&&(r=t,o=i.classPrefix+"-panel",r.classList?r.classList.add(o):r.className.indexOf(o)<0&&(r.className=(r.className+" "+o).replace(/\s{2,}/g," "))),s(this.element,d),this.resize()}var t=r.prototype;return t.update=function(t){var e=this.state;e.isClone?this.original.update(t):[this.element].concat(e.clonedPanels.map(function(t){return t.element})).forEach(t)},t.resize=function(){var t=this.state;t.cachedBbox=null;var e=this.getBbox();t.size=t.horizontal?e.width:e.height},t.destroy=function(){var t=this.element,e=this.state.originalStyle;for(var n in e.className?t.setAttribute("class",e.className):t.removeAttribute("class"),e.style?t.setAttribute("style",e.style):t.removeAttribute("style"),this)this[n]=null},t.getElement=function(){return this.element},t.getAnchorPosition=function(){return this.state.position+this.state.relativeAnchorPosition},t.getRelativeAnchorPosition=function(){return this.state.relativeAnchorPosition},t.getIndex=function(){return this.state.index},t.getPosition=function(){return this.state.position},t.getSize=function(){return this.state.size},t.getPrevPanel=function(){return this.prevPanel},t.getNextPanel=function(){return this.nextPanel},t.getBbox=function(){var t=this.state;return t.cachedBbox||(t.cachedBbox=this.element.getBoundingClientRect()),t.cachedBbox},t.isClone=function(){return this.state.isClone},t.getIdenticalPanels=function(){var t=this.state;return t.isClone?this.original.getIdenticalPanels():[this].concat(t.clonedPanels)},t.setPosition=function(t){var e=this.state,n=this.element.style;e.position=t,e.horizontal?n.left=t+"px":n.top=t+"px",e.relativeAnchorPosition=l(e.anchorExpression,e.size)},t.setPrevPanel=function(t){this.prevPanel=t},t.setNextPanel=function(t){this.nextPanel=t},t.clone=function(){var t=this.state,e=this.viewport,n=this.element.cloneNode(!0),i=new r(n,t.index,e,{anchorExpression:t.anchorExpression,horizontal:t.horizontal});return i.original=this,i.state.isClone=!0,i.state.size=t.size,e.appendPanelElement(n),t.clonedPanels.push(i),i},t.toReadonlyVersion=function(){var s=this.state,a=this;return{element:this.element,index:s.index,position:s.position,anchorPosition:s.position+s.relativeAnchorPosition,size:s.size,focus:function(t){var e=a.viewport,n=e.flicking,i=e.getCameraPosition()+e.getHangerPosition(),r=s.position+s.relativeAnchorPosition;if(i!==r){var o=r<i?C.PREV:C.NEXT;n.trigger(S.CHANGE,{index:this.index,panel:this,direction:o,prevIndex:e.getIndex(),prevPanel:e.getCurrentPanel().toReadonlyVersion(),isTrusted:!1})||(a.viewport.moveTo(this,null,t),null!=t&&t<=0&&n.trigger(S.MOVE_END,{direction:o,isTrusted:!1}))}},update:this.update.bind(this),prev:function(){var t=a.prevPanel;if(null==t)return null;var e=t.toReadonlyVersion();if(this.position<e.position){for(var n=e.position,i=a.viewport.getScrollArea(),r=i.next-i.prev;n-=r,this.position<n;);return h({},e,{position:n,anchorPosition:n+t.state.relativeAnchorPosition})}return e},next:function(){var t=a.nextPanel;if(null==t)return null;var e=t.toReadonlyVersion();if(this.position>e.position){for(var n=e.position,i=a.viewport.getScrollArea(),r=i.next-i.prev;n+=r,this.position>n;);return h({},e,{position:n,anchorPosition:n+t.state.relativeAnchorPosition})}return e}}},r}();function x(){return(x=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t}).apply(this,arguments)}function P(t,e){t.prototype=Object.create(e.prototype),(t.prototype.constructor=t).__proto__=e}function y(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}var E,T="function"!=typeof Object.assign?function(t){if(null==t)throw new TypeError("Cannot convert undefined or null to object");for(var e=Object(t),n=1;n<arguments.length;n++){var i=arguments[n];if(null!=i)for(var r in i)i.hasOwnProperty(r)&&(e[r]=i[r])}return e}:Object.assign,O=["","webkit","Moz","MS","ms","o"],e="undefined"==typeof document?{style:{}}:document.createElement("div"),_="function",z=Math.round,D=Math.abs,M=Date.now;function R(t,e){for(var n,i,r=e[0].toUpperCase()+e.slice(1),o=0;o<O.length;){if((i=(n=O[o])?n+r:e)in t)return i;o++}}E="undefined"==typeof window?{}:window;var N=R(e.style,"touchAction"),H=void 0!==N;var V="compute",X="auto",k="manipulation",j="none",Y="pan-x",F="pan-y",B=function(){if(!H)return!1;var e={},n=E.CSS&&E.CSS.supports;return["auto","manipulation","pan-y","pan-x","pan-x pan-y","none"].forEach(function(t){return e[t]=!n||E.CSS.supports("touch-action",t)}),e}(),L="ontouchstart"in E,q=void 0!==R(E,"PointerEvent"),W=L&&/mobile|tablet|ip(ad|hone|od)|android/i.test(navigator.userAgent),G="touch",U="mouse",Q=25,Z=1,J=4,K=8,$=1,tt=2,et=4,nt=8,it=16,rt=tt|et,ot=nt|it,st=rt|ot,at=["x","y"],ht=["clientX","clientY"];function ut(t,e,n){var i;if(t)if(t.forEach)t.forEach(e,n);else if(void 0!==t.length)for(i=0;i<t.length;)e.call(n,t[i],i,t),i++;else for(i in t)t.hasOwnProperty(i)&&e.call(n,t[i],i,t)}function ct(t,e){return typeof t===_?t.apply(e&&e[0]||void 0,e):t}function lt(t,e){return-1<t.indexOf(e)}var pt=function(){function t(t,e){this.manager=t,this.set(e)}var e=t.prototype;return e.set=function(t){t===V&&(t=this.compute()),H&&this.manager.element.style&&B[t]&&(this.manager.element.style[N]=t),this.actions=t.toLowerCase().trim()},e.update=function(){this.set(this.manager.options.touchAction)},e.compute=function(){var e=[];return ut(this.manager.recognizers,function(t){ct(t.options.enable,[t])&&(e=e.concat(t.getTouchAction()))}),function(t){if(lt(t,j))return j;var e=lt(t,Y),n=lt(t,F);return e&&n?j:e||n?e?Y:F:lt(t,k)?k:X}(e.join(" "))},e.preventDefaults=function(t){var e=t.srcEvent,n=t.offsetDirection;if(this.manager.session.prevented)e.preventDefault();else{var i=this.actions,r=lt(i,j)&&!B[j],o=lt(i,F)&&!B[F],s=lt(i,Y)&&!B[Y];if(r){var a=1===t.pointers.length,h=t.distance<2,u=t.deltaTime<250;if(a&&h&&u)return}if(!s||!o)return r||o&&n&rt||s&&n&ot?this.preventSrc(e):void 0}},e.preventSrc=function(t){this.manager.session.prevented=!0,t.preventDefault()},t}();function ft(t,e){for(;t;){if(t===e)return!0;t=t.parentNode}return!1}function vt(t){var e=t.length;if(1===e)return{x:z(t[0].clientX),y:z(t[0].clientY)};for(var n=0,i=0,r=0;r<e;)n+=t[r].clientX,i+=t[r].clientY,r++;return{x:z(n/e),y:z(i/e)}}function dt(t){for(var e=[],n=0;n<t.pointers.length;)e[n]={clientX:z(t.pointers[n].clientX),clientY:z(t.pointers[n].clientY)},n++;return{timeStamp:M(),pointers:e,center:vt(e),deltaX:t.deltaX,deltaY:t.deltaY}}function mt(t,e,n){n||(n=at);var i=e[n[0]]-t[n[0]],r=e[n[1]]-t[n[1]];return Math.sqrt(i*i+r*r)}function gt(t,e,n){n||(n=at);var i=e[n[0]]-t[n[0]],r=e[n[1]]-t[n[1]];return 180*Math.atan2(r,i)/Math.PI}function xt(t,e){return t===e?$:D(t)>=D(e)?t<0?tt:et:e<0?nt:it}function Pt(t,e,n){return{x:e/t||0,y:n/t||0}}function yt(t,e){var n=t.session,i=e.pointers,r=i.length;n.firstInput||(n.firstInput=dt(e)),1<r&&!n.firstMultiple?n.firstMultiple=dt(e):1===r&&(n.firstMultiple=!1);var o,s,a,h,u,c,l=n.firstInput,p=n.firstMultiple,f=p?p.center:l.center,v=e.center=vt(i);e.timeStamp=M(),e.deltaTime=e.timeStamp-l.timeStamp,e.angle=gt(f,v),e.distance=mt(f,v),o=n,a=(s=e).center,h=o.offsetDelta||{},u=o.prevDelta||{},c=o.prevInput||{},s.eventType!==Z&&c.eventType!==J||(u=o.prevDelta={x:c.deltaX||0,y:c.deltaY||0},h=o.offsetDelta={x:a.x,y:a.y}),s.deltaX=u.x+(a.x-h.x),s.deltaY=u.y+(a.y-h.y),e.offsetDirection=xt(e.deltaX,e.deltaY);var d,m,g,x,P=Pt(e.deltaTime,e.deltaX,e.deltaY);e.overallVelocityX=P.x,e.overallVelocityY=P.y,e.overallVelocity=D(P.x)>D(P.y)?P.x:P.y,e.scale=p?(d=p.pointers,mt((m=i)[0],m[1],ht)/mt(d[0],d[1],ht)):1,e.rotation=p?(g=p.pointers,gt((x=i)[1],x[0],ht)+gt(g[1],g[0],ht)):0,e.maxPointers=n.prevInput?e.pointers.length>n.prevInput.maxPointers?e.pointers.length:n.prevInput.maxPointers:e.pointers.length,function(t,e){var n,i,r,o,s=t.lastInterval||e,a=e.timeStamp-s.timeStamp;if(e.eventType!==K&&(Q<a||void 0===s.velocity)){var h=e.deltaX-s.deltaX,u=e.deltaY-s.deltaY,c=Pt(a,h,u);i=c.x,r=c.y,n=D(c.x)>D(c.y)?c.x:c.y,o=xt(h,u),t.lastInterval=e}else n=s.velocity,i=s.velocityX,r=s.velocityY,o=s.direction;e.velocity=n,e.velocityX=i,e.velocityY=r,e.direction=o}(n,e);var y=t.element;ft(e.srcEvent.target,y)&&(y=e.srcEvent.target),e.target=y}function Et(t,e,n){var i=n.pointers.length,r=n.changedPointers.length,o=e&Z&&i-r==0,s=e&(J|K)&&i-r==0;n.isFirst=!!o,n.isFinal=!!s,o&&(t.session={}),n.eventType=e,yt(t,n),t.emit("hammer.input",n),t.recognize(n),t.session.prevInput=n}function Tt(t){return t.trim().split(/\s+/g)}function bt(e,t,n){ut(Tt(t),function(t){e.addEventListener(t,n,!1)})}function wt(e,t,n){ut(Tt(t),function(t){e.removeEventListener(t,n,!1)})}function At(t){var e=t.ownerDocument||t;return e.defaultView||e.parentWindow||window}var It=function(){function t(e,t){var n=this;this.manager=e,this.callback=t,this.element=e.element,this.target=e.options.inputTarget,this.domHandler=function(t){ct(e.options.enable,[e])&&n.handler(t)},this.init()}var e=t.prototype;return e.handler=function(){},e.init=function(){this.evEl&&bt(this.element,this.evEl,this.domHandler),this.evTarget&&bt(this.target,this.evTarget,this.domHandler),this.evWin&&bt(At(this.element),this.evWin,this.domHandler)},e.destroy=function(){this.evEl&&wt(this.element,this.evEl,this.domHandler),this.evTarget&&wt(this.target,this.evTarget,this.domHandler),this.evWin&&wt(At(this.element),this.evWin,this.domHandler)},t}();function St(t,e,n){if(t.indexOf&&!n)return t.indexOf(e);for(var i=0;i<t.length;){if(n&&t[i][n]==e||!n&&t[i]===e)return i;i++}return-1}var Ct={pointerdown:Z,pointermove:2,pointerup:J,pointercancel:K,pointerout:K},Ot={2:G,3:"pen",4:U,5:"kinect"},_t="pointerdown",zt="pointermove pointerup pointercancel";E.MSPointerEvent&&!E.PointerEvent&&(_t="MSPointerDown",zt="MSPointerMove MSPointerUp MSPointerCancel");var Dt=function(n){function i(){var t,e=i.prototype;return e.evEl=_t,e.evWin=zt,(t=n.apply(this,arguments)||this).store=t.manager.session.pointerEvents=[],t}return P(i,n),i.prototype.handler=function(t){var e=this.store,n=!1,i=t.type.toLowerCase().replace("ms",""),r=Ct[i],o=Ot[t.pointerType]||t.pointerType,s=o===G,a=St(e,t.pointerId,"pointerId");r&Z&&(0===t.button||s)?a<0&&(e.push(t),a=e.length-1):r&(J|K)&&(n=!0),a<0||(e[a]=t,this.callback(this.manager,r,{pointers:e,changedPointers:[t],pointerType:o,srcEvent:t}),n&&e.splice(a,1))},i}(It);function Mt(t){return Array.prototype.slice.call(t,0)}function Rt(t,n,e){for(var i=[],r=[],o=0;o<t.length;){var s=n?t[o][n]:t[o];St(r,s)<0&&i.push(t[o]),r[o]=s,o++}return e&&(i=n?i.sort(function(t,e){return t[n]>e[n]}):i.sort()),i}var Nt={touchstart:Z,touchmove:2,touchend:J,touchcancel:K},Ht=function(t){function e(){return e.prototype.evTarget="touchstart touchmove touchend touchcancel",e.prototype.targetIds={},t.apply(this,arguments)||this}return P(e,t),e.prototype.handler=function(t){var e=Nt[t.type],n=function(t,e){var n,i,r=Mt(t.touches),o=this.targetIds;if(e&(2|Z)&&1===r.length)return o[r[0].identifier]=!0,[r,r];var s=Mt(t.changedTouches),a=[],h=this.target;if(i=r.filter(function(t){return ft(t.target,h)}),e===Z)for(n=0;n<i.length;)o[i[n].identifier]=!0,n++;n=0;for(;n<s.length;)o[s[n].identifier]&&a.push(s[n]),e&(J|K)&&delete o[s[n].identifier],n++;return a.length?[Rt(i.concat(a),"identifier",!0),a]:void 0}.call(this,t,e);n&&this.callback(this.manager,e,{pointers:n[0],changedPointers:n[1],pointerType:G,srcEvent:t})},e}(It);var Vt={mousedown:Z,mousemove:2,mouseup:J},Xt=function(n){function i(){var t,e=i.prototype;return e.evEl="mousedown",e.evWin="mousemove mouseup",(t=n.apply(this,arguments)||this).pressed=!1,t}return P(i,n),i.prototype.handler=function(t){var e=Vt[t.type];e&Z&&0===t.button&&(this.pressed=!0),2&e&&1!==t.which&&(e=J),this.pressed&&(e&J&&(this.pressed=!1),this.callback(this.manager,e,{pointers:[t],changedPointers:[t],pointerType:U,srcEvent:t}))},i}(It),kt=2500,jt=25;function Yt(t){var e=t.changedPointers[0];if(e.identifier===this.primaryTouch){var n={x:e.clientX,y:e.clientY},i=this.lastTouches;this.lastTouches.push(n);setTimeout(function(){var t=i.indexOf(n);-1<t&&i.splice(t,1)},kt)}}var Ft=function(){return function(n){function t(t,e){var o;return(o=n.call(this,t,e)||this).handler=function(t,e,n){var i=n.pointerType===G,r=n.pointerType===U;if(!(r&&n.sourceCapabilities&&n.sourceCapabilities.firesTouchEvents)){if(i)(function(t,e){t&Z?(this.primaryTouch=e.changedPointers[0].identifier,Yt.call(this,e)):t&(J|K)&&Yt.call(this,e)}).call(y(y(o)),e,n);else if(r&&function(t){for(var e=t.srcEvent.clientX,n=t.srcEvent.clientY,i=0;i<this.lastTouches.length;i++){var r=this.lastTouches[i],o=Math.abs(e-r.x),s=Math.abs(n-r.y);if(o<=jt&&s<=jt)return!0}return!1}.call(y(y(o)),n))return;o.callback(t,e,n)}},o.touch=new Ht(o.manager,o.handler),o.mouse=new Xt(o.manager,o.handler),o.primaryTouch=null,o.lastTouches=[],o}return P(t,n),t.prototype.destroy=function(){this.touch.destroy(),this.mouse.destroy()},t}(It)}();function Bt(t,e,n){return!!Array.isArray(t)&&(ut(t,n[e],n),!0)}var Lt=1;function qt(t,e){var n=e.manager;return n?n.get(t):t}function Wt(t){return 16&t?"cancel":8&t?"end":4&t?"move":2&t?"start":""}var Gt=function(){function t(t){void 0===t&&(t={}),this.options=x({enable:!0},t),this.id=Lt++,this.manager=null,this.state=1,this.simultaneous={},this.requireFail=[]}var e=t.prototype;return e.set=function(t){return T(this.options,t),this.manager&&this.manager.touchAction.update(),this},e.recognizeWith=function(t){if(Bt(t,"recognizeWith",this))return this;var e=this.simultaneous;return e[(t=qt(t,this)).id]||(e[t.id]=t).recognizeWith(this),this},e.dropRecognizeWith=function(t){return Bt(t,"dropRecognizeWith",this)||(t=qt(t,this),delete this.simultaneous[t.id]),this},e.requireFailure=function(t){if(Bt(t,"requireFailure",this))return this;var e=this.requireFail;return-1===St(e,t=qt(t,this))&&(e.push(t),t.requireFailure(this)),this},e.dropRequireFailure=function(t){if(Bt(t,"dropRequireFailure",this))return this;t=qt(t,this);var e=St(this.requireFail,t);return-1<e&&this.requireFail.splice(e,1),this},e.hasRequireFailures=function(){return 0<this.requireFail.length},e.canRecognizeWith=function(t){return!!this.simultaneous[t.id]},e.emit=function(e){var n=this,t=this.state;function i(t){n.manager.emit(t,e)}t<8&&i(n.options.event+Wt(t)),i(n.options.event),e.additionalEvent&&i(e.additionalEvent),8<=t&&i(n.options.event+Wt(t))},e.tryEmit=function(t){if(this.canEmit())return this.emit(t);this.state=32},e.canEmit=function(){for(var t=0;t<this.requireFail.length;){if(!(33&this.requireFail[t].state))return!1;t++}return!0},e.recognize=function(t){var e=T({},t);if(!ct(this.options.enable,[this,e]))return this.reset(),void(this.state=32);56&this.state&&(this.state=1),this.state=this.process(e),30&this.state&&this.tryEmit(e)},e.process=function(t){},e.getTouchAction=function(){},e.reset=function(){},t}(),Ut={domEvents:!1,touchAction:V,enable:!0,inputTarget:null,inputClass:null,preset:[],cssProps:{userSelect:"none",touchSelect:"none",touchCallout:"none",contentZooming:"none",userDrag:"none",tapHighlightColor:"rgba(0,0,0,0)"}};function Qt(n,i){var r,o=n.element;o.style&&(ut(n.options.cssProps,function(t,e){r=R(o.style,e),o.style[r]=i?(n.oldCssProps[r]=o.style[r],t):n.oldCssProps[r]||""}),i||(n.oldCssProps={}))}var Zt=function(){function t(t,e){var n,i=this;this.options=T({},Ut,e||{}),this.options.inputTarget=this.options.inputTarget||t,this.handlers={},this.session={},this.recognizers=[],this.oldCssProps={},this.element=t,this.input=new((n=this).options.inputClass||(q?Dt:W?Ht:L?Ft:Xt))(n,Et),this.touchAction=new pt(this,this.options.touchAction),Qt(this,!0),ut(this.options.recognizers,function(t){var e=i.add(new t[0](t[1]));t[2]&&e.recognizeWith(t[2]),t[3]&&e.requireFailure(t[3])},this)}var e=t.prototype;return e.set=function(t){return T(this.options,t),t.touchAction&&this.touchAction.update(),t.inputTarget&&(this.input.destroy(),this.input.target=t.inputTarget,this.input.init()),this},e.stop=function(t){this.session.stopped=t?2:1},e.recognize=function(t){var e=this.session;if(!e.stopped){var n;this.touchAction.preventDefaults(t);var i=this.recognizers,r=e.curRecognizer;(!r||r&&8&r.state)&&(r=e.curRecognizer=null);for(var o=0;o<i.length;)n=i[o],2===e.stopped||r&&n!==r&&!n.canRecognizeWith(r)?n.reset():n.recognize(t),!r&&14&n.state&&(r=e.curRecognizer=n),o++}},e.get=function(t){if(t instanceof Gt)return t;for(var e=this.recognizers,n=0;n<e.length;n++)if(e[n].options.event===t)return e[n];return null},e.add=function(t){if(Bt(t,"add",this))return this;var e=this.get(t.options.event);return e&&this.remove(e),this.recognizers.push(t),(t.manager=this).touchAction.update(),t},e.remove=function(t){if(Bt(t,"remove",this))return this;var e=this.get(t);if(t){var n=this.recognizers,i=St(n,e);-1!==i&&(n.splice(i,1),this.touchAction.update())}return this},e.on=function(t,e){if(void 0===t||void 0===e)return this;var n=this.handlers;return ut(Tt(t),function(t){n[t]=n[t]||[],n[t].push(e)}),this},e.off=function(t,e){if(void 0===t)return this;var n=this.handlers;return ut(Tt(t),function(t){e?n[t]&&n[t].splice(St(n[t],e),1):delete n[t]}),this},e.emit=function(t,e){var n,i,r;this.options.domEvents&&(n=t,i=e,(r=document.createEvent("Event")).initEvent(n,!0,!0),(r.gesture=i).target.dispatchEvent(r));var o=this.handlers[t]&&this.handlers[t].slice();if(o&&o.length){e.type=t,e.preventDefault=function(){e.srcEvent.preventDefault()};for(var s=0;s<o.length;)o[s](e),s++}},e.destroy=function(){this.element&&Qt(this,!1),this.handlers={},this.session={},this.input.destroy(),this.element=null},t}();var Jt=function(e){function t(t){return void 0===t&&(t={}),e.call(this,x({pointers:1},t))||this}P(t,e);var n=t.prototype;return n.attrTest=function(t){var e=this.options.pointers;return 0===e||t.pointers.length===e},n.process=function(t){var e=this.state,n=t.eventType,i=6&e,r=this.attrTest(t);return i&&(n&K||!r)?16|e:i||r?n&J?8|e:2&e?4|e:2:32},t}(Gt);function Kt(t){return t===it?"down":t===nt?"up":t===tt?"left":t===et?"right":""}var $t=function(n){function t(t){var e;return void 0===t&&(t={}),(e=n.call(this,x({event:"pan",threshold:10,pointers:1,direction:st},t))||this).pX=null,e.pY=null,e}P(t,n);var e=t.prototype;return e.getTouchAction=function(){var t=this.options.direction,e=[];return t&rt&&e.push(F),t&ot&&e.push(Y),e},e.directionTest=function(t){var e=this.options,n=!0,i=t.distance,r=t.direction,o=t.deltaX,s=t.deltaY;return r&e.direction||(i=e.direction&rt?(r=0===o?$:o<0?tt:et,n=o!==this.pX,Math.abs(t.deltaX)):(r=0===s?$:s<0?nt:it,n=s!==this.pY,Math.abs(t.deltaY))),t.direction=r,n&&i>e.threshold&&r&e.direction},e.attrTest=function(t){return Jt.prototype.attrTest.call(this,t)&&(2&this.state||!(2&this.state)&&this.directionTest(t))},e.emit=function(t){this.pX=t.deltaX,this.pY=t.deltaY;var e=Kt(t.direction);e&&(t.additionalEvent=this.options.event+e),n.prototype.emit.call(this,t)},t}(Jt),te=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])};var ee=Object.assign||function(t){for(var e,n=1,i=arguments.length;n<i;n++)for(var r in e=arguments[n])Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t};function ne(t,e,n,i){var r=t,o=[n[0]?e[0]:i?e[0]-i[0]:e[0],n[1]?e[1]:i?e[1]+i[1]:e[1]];return r=Math.max(o[0],r),+(r=Math.min(o[1],r)).toFixed(5)}function ie(t,e){return t<e[0]||t>e[1]}function re(t,e,n){return n[1]&&t>e[1]||n[0]&&t<e[0]}function oe(t,e,n){var i=t,r=e[0],o=e[1],s=o-r;return n[1]&&o<t&&(i=(i-o)%s+r),n[0]&&t<r&&(i=(i-r)%s+o),+i.toFixed(5)}function se(t,e){for(var n in t)if(t[n]!==e[n])return!1;return!0}var ae,he=function(){function t(t,e){var n=this;this.axis=t,this.options=e,this._complementOptions(),this._pos=Object.keys(this.axis).reduce(function(t,e){return t[e]=n.axis[e].range[0],t},{})}var e=t.prototype;return e._complementOptions=function(){var r=this;Object.keys(this.axis).forEach(function(i){r.axis[i]=ee({range:[0,100],bounce:[0,0],circular:[!1,!1]},r.axis[i]),["bounce","circular"].forEach(function(t){var e=r.axis,n=e[i][t];/string|number|boolean/.test(typeof n)&&(e[i][t]=[n,n])})})},e.getDelta=function(t,e){var n=this.get(t);return this.map(this.get(e),function(t,e){return t-n[e]})},e.get=function(t){var n=this;return t&&Array.isArray(t)?t.reduce(function(t,e){return e&&e in n._pos&&(t[e]=n._pos[e]),t},{}):ee({},this._pos,t||{})},e.moveTo=function(n){var i=this,t=this.map(this._pos,function(t,e){return e in n?n[e]-i._pos[e]:0});return this.set(n),{pos:ee({},this._pos),delta:t}},e.set=function(t){for(var e in t)e&&e in this._pos&&(this._pos[e]=t[e])},e.every=function(t,e){var n=this.axis;for(var i in t)if(i&&!e(t[i],i,n[i]))return!1;return!0},e.filter=function(t,e){var n={},i=this.axis;for(var r in t)r&&e(t[r],r,i[r])&&(n[r]=t[r]);return n},e.map=function(t,e){var n={},i=this.axis;for(var r in t)r&&(n[r]=e(t[r],r,i[r]));return n},e.isOutside=function(t){return!this.every(t?this.get(t):this._pos,function(t,e,n){return!ie(t,n.range)})},t}();function ue(t){for(var e=[],n=0,i=t.length;n<i;n++)e.push(t[n]);return e}var ce=(ae="undefined"==typeof window?{}:window).requestAnimationFrame||ae.webkitRequestAnimationFrame,le=ae.cancelAnimationFrame||ae.webkitCancelAnimationFrame;if(ce&&!le){var pe={},fe=ce;ce=function(e){var n=fe(function(t){pe[n]&&e(t)});return pe[n]=!0,n},le=function(t){delete pe[t]}}else ce&&le||(ce=function(t){return ae.setTimeout(function(){t(ae.performance&&ae.performance.now&&ae.performance.now()||(new Date).getTime())},16)},le=ae.clearTimeout);function ve(t,e,n){return Math.max(Math.min(t,n),e)}var de=function(){function t(t){var e=t.options,n=t.itm,i=t.em,r=t.axm;this.options=e,this.itm=n,this.em=i,this.axm=r,this.animationEnd=this.animationEnd.bind(this)}var e=t.prototype;return e.getDuration=function(o,t,e){var n,s=this;if(void 0!==e)n=e;else{var i=this.axm.map(t,function(t,e){return n=Math.abs(Math.abs(t)-Math.abs(o[e])),i=s.options.deceleration,(r=Math.sqrt(n/i*2))<100?0:r;var n,i,r});n=Object.keys(i).reduce(function(t,e){return Math.max(t,i[e])},-1/0)}return ve(n,this.options.minimumDuration,this.options.maximumDuration)},e.createAnimationParam=function(t,e,n){var i=this.axm.get(),r=t,o=n&&n.event||null;return{depaPos:i,destPos:r,duration:ve(e,this.options.minimumDuration,this.options.maximumDuration),delta:this.axm.getDelta(i,r),inputEvent:o,input:n&&n.input||null,isTrusted:!!o,done:this.animationEnd}},e.grab=function(t,e){if(this._animateParam&&t.length){var n=this.axm.get(t),i=this.axm.map(n,function(t,e,n){return oe(t,n.range,n.circular)});this.axm.every(i,function(t,e){return n[e]===t})||this.em.triggerChange(i,e,!!e),this._animateParam=null,this._raf&&(r=this._raf,le(r)),this._raf=null,this.em.triggerAnimationEnd(!(!e||!e.event))}var r},e.getEventInfo=function(){return this._animateParam&&this._animateParam.input&&this._animateParam.inputEvent?{input:this._animateParam.input,event:this._animateParam.inputEvent}:null},e.restore=function(t){var e=this.axm.get(),n=this.axm.map(e,function(t,e,n){return Math.min(n.range[1],Math.max(n.range[0],t))});this.animateTo(n,this.getDuration(e,n),t)},e.animationEnd=function(){var t=this.getEventInfo();this._animateParam=null;var e=this.axm.filter(this.axm.get(),function(t,e,n){return re(t,n.range,n.circular)});0<Object.keys(e).length&&this.setTo(this.axm.map(e,function(t,e,n){return oe(t,n.range,n.circular)})),this.itm.setInterrupt(!1),this.em.triggerAnimationEnd(!!t),this.axm.isOutside()?this.restore(t):this.em.triggerFinish(!!t)},e.animateLoop=function(e,n){if(this._animateParam=ee({},e),this._animateParam.startTime=(new Date).getTime(),e.duration){var i=this._animateParam,r=this;!function t(){if(r._raf=null,1<=r.frame(i))return se(e.destPos,r.axm.get(Object.keys(e.destPos)))||r.em.triggerChange(e.destPos),void n();r._raf=ce(t)}()}else this.em.triggerChange(e.destPos),n()},e.getUserControll=function(t){var e=t.setTo();return e.destPos=this.axm.get(e.destPos),e.duration=ve(e.duration,this.options.minimumDuration,this.options.maximumDuration),e},e.animateTo=function(t,e,n){var i=this,r=this.createAnimationParam(t,e,n),o=ee({},r.depaPos),s=this.em.triggerAnimationStart(r),a=this.getUserControll(r);if(!s&&this.axm.every(a.destPos,function(t,e,n){return re(t,n.range,n.circular)})&&console.warn("You can't stop the 'animation' event when 'circular' is true."),s&&!se(a.destPos,o)){var h=n&&n.event||null;this.animateLoop({depaPos:o,destPos:a.destPos,duration:a.duration,delta:this.axm.getDelta(o,a.destPos),isTrusted:!!h,inputEvent:h,input:n&&n.input||null},function(){return i.animationEnd()})}},e.frame=function(i){var t=(new Date).getTime()-i.startTime,r=this.easing(t/i.duration),e=i.depaPos;return e=this.axm.map(e,function(t,e,n){return oe(t+=i.delta[e]*r,n.range,n.circular)}),this.em.triggerChange(e),r},e.easing=function(t){return 1<t?1:this.options.easing(t)},e.setTo=function(t,i){void 0===i&&(i=0);var e=Object.keys(t);this.grab(e);var n=this.axm.get(e);if(se(t,n))return this;this.itm.setInterrupt(!0);var r=this.axm.filter(t,function(t,e){return n[e]!==t});return Object.keys(r).length&&(se(r=this.axm.map(r,function(t,e,n){return n.circular&&(n.circular[0]||n.circular[1])?0<i?t:oe(t,n.range,n.circular):ne(t,n.range,n.circular)}),n)||(0<i?this.animateTo(r,i):(this.em.triggerChange(r),this.itm.setInterrupt(!1)))),this},e.setBy=function(n,t){return void 0===t&&(t=0),this.setTo(this.axm.map(this.axm.get(Object.keys(n)),function(t,e){return t+n[e]}),t)},t}(),me=function(){function t(t){this.axes=t}var e=t.prototype;return e.triggerHold=function(t,e){this.axes.trigger("hold",{pos:t,input:e.input||null,inputEvent:e.event||null,isTrusted:!0})},e.triggerRelease=function(t){t.setTo=this.createUserControll(t.destPos,t.duration),this.axes.trigger("release",t)},e.triggerChange=function(t,e,n){void 0===e&&(e=null),void 0===n&&(n=!1);var i=this.am.getEventInfo(),r=this.am.axm.moveTo(t),o=e&&e.event||i&&i.event||null,s={pos:r.pos,delta:r.delta,holding:n,inputEvent:o,isTrusted:!!o,input:e&&e.input||i&&i.input||null,set:o?this.createUserControll(r.pos):function(){}};this.axes.trigger("change",s),o&&this.am.axm.set(s.set().destPos)},e.triggerAnimationStart=function(t){return t.setTo=this.createUserControll(t.destPos,t.duration),this.axes.trigger("animationStart",t)},e.triggerAnimationEnd=function(t){void 0===t&&(t=!1),this.axes.trigger("animationEnd",{isTrusted:t})},e.triggerFinish=function(t){void 0===t&&(t=!1),this.axes.trigger("finish",{isTrusted:t})},e.createUserControll=function(t,e){void 0===e&&(e=0);var n={destPos:ee({},t),duration:e};return function(t,e){return t&&(n.destPos=ee({},t)),void 0!==e&&(n.duration=e),n}},e.setAnimationManager=function(t){this.am=t},e.destroy=function(){this.axes.off()},t}(),ge=function(){function t(t){this.options=t,this._prevented=!1}var e=t.prototype;return e.isInterrupting=function(){return this.options.interruptable||this._prevented},e.isInterrupted=function(){return!this.options.interruptable&&this._prevented},e.setInterrupt=function(t){!this.options.interruptable&&(this._prevented=t)},t}(),xe=function(){function t(t){var e=t.options,n=t.itm,i=t.em,r=t.axm,o=t.am;this.isOutside=!1,this.moveDistance=null,this.options=e,this.itm=n,this.em=i,this.axm=r,this.am=o}var e=t.prototype;return e.atOutside=function(t){var s=this;if(this.isOutside)return this.axm.map(t,function(t,e,n){var i=n.range[0]-n.bounce[0],r=n.range[1]+n.bounce[1];return r<t?r:t<i?i:t});var a=this.am.easing(1e-5)/1e-5;return this.axm.map(t,function(t,e,n){var i=n.range[0],r=n.range[1],o=n.bounce;return t<i?i-s.am.easing((i-t)/(o[0]*a))*o[0]:r<t?r+s.am.easing((t-r)/(o[1]*a))*o[1]:t})},e.get=function(t){return this.axm.get(t.axes)},e.hold=function(t,e){if(!this.itm.isInterrupted()&&t.axes.length){var n={input:t,event:e};this.itm.setInterrupt(!0),this.am.grab(t.axes,n),!this.moveDistance&&this.em.triggerHold(this.axm.get(),n),this.isOutside=this.axm.isOutside(t.axes),this.moveDistance=this.axm.get(t.axes)}},e.change=function(t,e,n){if(this.itm.isInterrupting()&&!this.axm.every(n,function(t){return 0===t})){var i,r=this.axm.get(t.axes);i=this.axm.map(this.moveDistance||r,function(t,e){return t+(n[e]||0)}),this.moveDistance&&(this.moveDistance=i),i=this.axm.map(i,function(t,e,n){return oe(t,n.range,n.circular)}),this.isOutside&&this.axm.every(r,function(t,e,n){return!ie(t,n.range)})&&(this.isOutside=!1),i=this.atOutside(i),this.em.triggerChange(i,{input:t,event:e},!0)}},e.release=function(t,e,n,i){if(this.itm.isInterrupting()&&this.moveDistance){var r=this.axm.get(t.axes),o=this.axm.get(),s=this.axm.get(this.axm.map(n,function(t,e,n){return n.circular&&(n.circular[0]||n.circular[1])?r[e]+t:ne(r[e]+t,n.range,n.circular,n.bounce)})),a=this.am.getDuration(s,r,i);0===a&&(s=ee({},o));var h={depaPos:o,destPos:s,duration:a,delta:this.axm.getDelta(o,s),inputEvent:e,input:t,isTrusted:!0};this.em.triggerRelease(h),this.moveDistance=null;var u=this.am.getUserControll(h),c=se(u.destPos,o),l={input:t,event:e};c||0===u.duration?(!c&&this.em.triggerChange(u.destPos,l,!0),this.itm.setInterrupt(!1),this.axm.isOutside()?this.am.restore(l):this.em.triggerFinish(!0)):this.am.animateTo(u.destPos,u.duration,l)}},t}(),Pe=function(){if("undefined"==typeof document)return"";for(var t=(document.head||document.getElementsByTagName("head")[0]).style,e=["transform","webkitTransform","msTransform","mozTransform"],n=0,i=e.length;n<i;n++)if(e[n]in t)return e[n];return""}(),ye=function(r){function t(t,e,n){void 0===t&&(t={});var i=r.call(this)||this;return i.axis=t,i._inputs=[],i.options=ee({easing:function(t){return 1-Math.pow(1-t,3)},interruptable:!0,maximumDuration:1/0,minimumDuration:0,deceleration:6e-4},e),i.itm=new ge(i.options),i.axm=new he(i.axis,i.options),i.em=new me(i),i.am=new de(i),i.io=new xe(i),i.em.setAnimationManager(i.am),n&&i.em.triggerChange(n),i}!function(t,e){function n(){this.constructor=t}te(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}(t,r);var e=t.prototype;return e.connect=function(t,e){var n;if(n="string"==typeof t?t.split(" "):t.concat(),~this._inputs.indexOf(e)&&this.disconnect(e),"hammer"in e){var i=this._inputs.filter(function(t){return t.hammer&&t.element===e.element});i.length&&(e.hammer=i[0].hammer)}return e.mapAxes(n),e.connect(this.io),this._inputs.push(e),this},e.disconnect=function(t){if(t){var e=this._inputs.indexOf(t);0<=e&&(this._inputs[e].disconnect(),this._inputs.splice(e,1))}else this._inputs.forEach(function(t){return t.disconnect()}),this._inputs=[];return this},e.get=function(t){return this.axm.get(t)},e.setTo=function(t,e){return void 0===e&&(e=0),this.am.setTo(t,e),this},e.setBy=function(t,e){return void 0===e&&(e=0),this.am.setBy(t,e),this},e.isBounceArea=function(t){return this.axm.isOutside(t)},e.destroy=function(){this.disconnect(),this.em.destroy()},t.VERSION="2.5.9",t.TRANSFORM=Pe,t.DIRECTION_NONE=$,t.DIRECTION_LEFT=tt,t.DIRECTION_RIGHT=et,t.DIRECTION_UP=nt,t.DIRECTION_DOWN=it,t.DIRECTION_HORIZONTAL=rt,t.DIRECTION_VERTICAL=ot,t.DIRECTION_ALL=st,t}(t),Ee="PointerEvent"in ae||"MSPointerEvent"in ae,Te="ontouchstart"in ae,be="_EGJS_AXES_INPUTTYPE_";function we(i,t){return t.reduce(function(t,e,n){return i[n]&&(t[i[n]]=e),t},{})}function Ae(t,e,n){return n?!!(e===st||e&t&&n&t):!!(e&t)}var Ie=function(){function t(t,e){if(this.axes=[],this.hammer=null,this.element=null,this.panRecognizer=null,void 0===Zt)throw new Error("The Hammerjs must be loaded before eg.Axes.PanInput.\nhttp://hammerjs.github.io/");this.element=function e(t,n){var i;if(void 0===n&&(n=!1),"string"==typeof t){if(t.match(/^<([a-z]+)\s*([^>]*)>/)){var r=document.createElement("div");r.innerHTML=t,i=ue(r.childNodes)}else i=ue(document.querySelectorAll(t));n||(i=1<=i.length?i[0]:void 0)}else t===ae?i=t:!t.nodeName||1!==t.nodeType&&9!==t.nodeType?"jQuery"in ae&&t instanceof jQuery||t.constructor.prototype.jquery?i=n?t.toArray():t.get(0):Array.isArray(t)&&(i=t.map(function(t){return e(t)}),n||(i=1<=i.length?i[0]:void 0)):i=t;return i}(t),this.options=ee({inputType:["touch","mouse","pointer"],scale:[1,1],thresholdAngle:45,threshold:0,hammerManagerOptions:{cssProps:{userSelect:"none",touchSelect:"none",touchCallout:"none",userDrag:"none"}}},e),this.onHammerInput=this.onHammerInput.bind(this),this.onPanmove=this.onPanmove.bind(this),this.onPanend=this.onPanend.bind(this)}var e=t.prototype;return e.mapAxes=function(t){var e=!!t[0],n=!!t[1];this._direction=e&&n?st:e?rt:n?ot:$,this.axes=t},e.connect=function(t){var e={direction:this._direction,threshold:this.options.threshold};if(this.hammer)this.removeRecognizer(),this.dettachEvent();else{var n=this.element[be];n||(n=String(Math.round(Math.random()*(new Date).getTime())));var i=function(t){void 0===t&&(t=[]);var e=!1,n=!1,i=!1;return t.forEach(function(t){switch(t){case"mouse":n=!0;break;case"touch":e=Te;break;case"pointer":i=Ee}}),i?Dt:e&&n?Ft:e?Ht:n?Xt:null}(this.options.inputType);if(!i)throw new Error("Wrong inputType parameter!");this.hammer=function(t,e){try{return new Zt(t,ee({},e))}catch(t){return null}}(this.element,ee({inputClass:i},this.options.hammerManagerOptions)),this.element[be]=n}return this.panRecognizer=new $t(e),this.hammer.add(this.panRecognizer),this.attachEvent(t),this},e.disconnect=function(){return this.removeRecognizer(),this.hammer&&this.dettachEvent(),this._direction=$,this},e.destroy=function(){this.disconnect(),this.hammer&&0===this.hammer.recognizers.length&&this.hammer.destroy(),delete this.element[be],this.element=null,this.hammer=null},e.enable=function(){return this.hammer&&(this.hammer.get("pan").options.enable=!0),this},e.disable=function(){return this.hammer&&(this.hammer.get("pan").options.enable=!1),this},e.isEnable=function(){return!(!this.hammer||!this.hammer.get("pan").options.enable)},e.removeRecognizer=function(){this.hammer&&this.panRecognizer&&(this.hammer.remove(this.panRecognizer),this.panRecognizer=null)},e.onHammerInput=function(t){this.isEnable()&&(t.isFirst?this.observer.hold(this,t):t.isFinal&&this.onPanend(t))},e.onPanmove=function(t){var e=function(t,e){if(e<0||90<e)return $;var n=Math.abs(t);return e<n&&n<180-e?ot:rt}(t.angle,this.options.thresholdAngle),n=this.hammer.session.prevInput;t.offsetY=n?(t.offsetX=t.deltaX-n.deltaX,t.deltaY-n.deltaY):t.offsetX=0;var i=this.getOffset([t.offsetX,t.offsetY],[Ae(rt,this._direction,e),Ae(ot,this._direction,e)]),r=i.some(function(t){return 0!==t});r&&(t.srcEvent.preventDefault(),t.srcEvent.stopPropagation()),(t.preventSystemEvent=r)&&this.observer.change(this,t,we(this.axes,i))},e.onPanend=function(t){var e,n,i,r,o=this.getOffset([Math.abs(t.velocityX)*(t.deltaX<0?-1:1),Math.abs(t.velocityY)*(t.deltaY<0?-1:1)],[Ae(rt,this._direction),Ae(ot,this._direction)]);e=o,n=this.observer.options.deceleration,i=Math.sqrt(e[0]*e[0]+e[1]*e[1]),r=Math.abs(i/-n),o=[e[0]/2*r,e[1]/2*r],this.observer.release(this,t,we(this.axes,o))},e.attachEvent=function(t){this.observer=t,this.hammer.on("hammer.input",this.onHammerInput).on("panstart panmove",this.onPanmove)},e.dettachEvent=function(){this.hammer.off("hammer.input",this.onHammerInput).off("panstart panmove",this.onPanmove),this.observer=null},e.getOffset=function(t,e){var n=[0,0],i=this.options.scale;return e[0]&&(n[0]=t[0]*i[0]),e[1]&&(n[1]=t[1]*i[1]),n},t}(),Se=function(){function t(t,e,n){this.viewportElement=t,this.cameraElement=e,this.state={index:n.defaultIndex,size:-1,position:0,hangerPosition:0,scrollArea:{prev:-1,next:-1},translate:m,options:n},this.build()}var e=t.prototype;return e.moveTo=function(t,e,n){void 0===n&&(n=this.state.options.duration);var i=this.state,r=t.anchorPosition-i.hangerPosition;r=this.canSetBoundMode()?p(r,i.scrollArea.prev,i.scrollArea.next):r,i.index=t.index,e?e.setTo({flick:r},n):this.axes.setTo({flick:r},n)},e.moveCamera=function(t){var e=this.state;t=Math.round(t);var n=e.translate.name,i=(e.options.horizontal?[-t,0]:[0,-t]).map(function(t){return t+"px"}).join(", ");this.cameraElement.style[n]=e.translate.has3d?"translate3d("+i+", 0px)":"translate("+i+")",e.position=t},e.resize=function(){var t=this.viewportElement.getBoundingClientRect(),e=this.state,n=e.options,i=this.panels;i.forEach(function(t){return t.resize()}),this.adjustSize(),e.size=e.options.horizontal?t.width:t.height,e.hangerPosition=l(n.hanger,e.size);var r=i[0],o=i[i.length-1],s=e.hangerPosition;this.canSetBoundMode()?e.scrollArea={prev:r.getPosition(),next:o.getPosition()+o.getSize()-e.size}:e.scrollArea={prev:r.getAnchorPosition()-s,next:o.getAnchorPosition()-s}},e.findNearestPanel=function(){var t=this.state,e=t.scrollArea,n=t.position+t.hangerPosition;if(this.isOutOfBound())return t.position<e.prev?this.panels[0]:this.panels[this.panels.length-1];for(var i=0,r=this.panels.concat(this.clonedPanels);i<r.length;i++){var o=r[i],s=o.getPosition();if(c(n,s,s+o.getSize()))return o}},e.findPanelOf=function(t){for(var e=0,n=this.panels.concat(this.clonedPanels);e<n.length;e++){var i=n[e];if(i.getElement().contains(t))return i}},e.findNearestIdenticalPanel=function(t){var e=this.state,i=t,r=1/0,o=e.position+e.hangerPosition;return t.getIdenticalPanels().forEach(function(t){var e=t.getAnchorPosition(),n=Math.abs(e-o);n<r&&(i=t,r=n)}),i},e.findShortestPositionToPanel=function(t){var e=this.state,n=e.options,i=t.getAnchorPosition(),r=Math.abs(e.position+e.hangerPosition-i),o=e.scrollArea.next-e.scrollArea.prev;if(n.circular)return r<=o-r?i-e.hangerPosition:i>e.position+e.hangerPosition?i-e.hangerPosition-o:i-e.hangerPosition+o;var s=i-e.hangerPosition;return this.canSetBoundMode()?p(s,e.scrollArea.prev,e.scrollArea.next):s},e.enable=function(){this.panInput.enable()},e.disable=function(){this.panInput.disable()},e.adjustSize=function(){var t,e=this.state.options,i=e.horizontal;if(e.adaptive){var n=this.getCurrentPanel().getBbox();t=i?n.height:n.width}else{t=this.panels.reduce(function(t,e){var n=e.getBbox();return Math.max(t,i?n.height:n.width)},0)}var r=this.viewportElement.style;i?(r.height=t+"px",r.minHeight="100%"):(r.width=t+"px",r.minWidth="100%")},e.destroy=function(){var t=this.viewportElement,e=t.parentElement;for(var n in e.removeChild(t),this.axes.destroy(),this.panInput.destroy(),this.panels.forEach(function(t){e.appendChild(t.getElement()),t.destroy()}),this)this[n]=null},e.getPanelCount=function(){return this.panels.length},e.getPanel=function(t){return c(t,0,this.panels.length)?this.panels[t]:null},e.getCurrentPanel=function(){return this.panels[this.state.index]},e.getIndex=function(){return this.state.index},e.getPrevIndex=function(){var t=this.state,e=t.index-1;return e<0&&(e=t.options.circular?this.panels.length-1:-1),e},e.getNextIndex=function(){var t=this.state,e=t.index+1;return e>=this.panels.length&&(e=t.options.circular?0:-1),e},e.getSize=function(){return this.state.size},e.getScrollArea=function(){return this.state.scrollArea},e.getHangerPosition=function(){return this.state.hangerPosition},e.getCameraPosition=function(){return this.state.position},e.connectAxesHandler=function(t){var e=this.state.options.horizontal;return this.axes.on(t).connect(e?["flick",""]:["","flick"],this.panInput)},e.appendPanelElement=function(t){this.cameraElement.appendChild(t)},e.build=function(){this.applyCSSValue(),this.placePanels(),this.resize(),this.state.options.circular&&(this.clonePanels(),this.replacePanels()),this.chainPanels(),this.setAxesInstance(),this.moveToDefaultPanel()},e.applyCSSValue=function(){var t=this.state.options,e=this.viewportElement,n=this.cameraElement,i=t.classPrefix;e.className=i+"-viewport",n.className=i+"-camera",s(e,r),s(n,o),t.zIndex&&(e.style.zIndex=""+t.zIndex),t.overflow&&(e.style.overflow="visible")},e.placePanels=function(){var t,n=this,i=this.state.options,e=this.cameraElement.children;if(!e||!e.length)throw new Error("There're no panel elements.");this.panels=(t=e,[].slice.call(t)).map(function(t,e){return new g(t,e,n,{horizontal:i.horizontal,classPrefix:i.classPrefix,anchorExpression:i.anchor})}),this.clonedPanels=[];var r=0;this.panels.forEach(function(t){var e=r,n=t.getSize();t.setPosition(e),r+=n})},e.clonePanels=function(){var t=this.state,e=this.panels,r=this.clonedPanels,n=t.size,i=e[e.length-1],o=i.getPosition()+i.getSize();t.scrollArea={prev:t.scrollArea.prev,next:o+e[0].getRelativeAnchorPosition()-t.hangerPosition};for(var s=t.scrollArea,a=s.next+n-s.prev,h=o,u=function(){var i=h;e.forEach(function(t){var e=i+t.getPosition(),n=t.clone();n.setPosition(e),r.push(n)}),h+=o};u(),h<=a;);},e.replacePanels=function(){for(var t=this.state,e=this.panels,n=this.clonedPanels,i=t.scrollArea.next+t.size,r=e[0].getPosition(),o=0,s=n.concat().reverse();o<s.length;o++){var a=s[o],h=a.getPosition(),u=r-a.getSize();if(h<=i)break;a.setPosition(u),r=u}},e.chainPanels=function(){var r=this.panels.concat(this.clonedPanels);if(r.forEach(function(t,e){var n=0<e?r[e-1]:null,i=e<r.length-1?r[e+1]:null;t.setPrevPanel(n),t.setNextPanel(i)}),this.state.options.circular){var t=r[0],e=r[r.length-1];t.setPrevPanel(e),e.setNextPanel(t)}},e.setAxesInstance=function(){var t,e=this.state,n=e.options,i=e.scrollArea,r=e.size,o=n.horizontal,s=n.bounce,a=s;if((t=s)&&t.constructor===Array)a=s.map(function(t){return l(t,r,f.bounce)});else{var h=l(s,r,f.bounce);a=[h,h]}this.axes=new ye({flick:{range:[i.prev,i.next],circular:n.circular,bounce:a}},{easing:n.panelEffect,deceleration:n.deceleration,interruptable:!0}),this.panInput=new Ie(this.viewportElement,{inputType:n.inputType,thresholdAngle:n.thresholdAngle,scale:o?[-1,0]:[0,-1]})},e.moveToDefaultPanel=function(){var t=this.state,e=p(t.options.defaultIndex,0,this.panels.length-1),n=this.panels[e],i=this.findShortestPositionToPanel(n);t.index=e,this.moveCamera(i),this.axes.setTo({flick:i},0)},e.isOutOfBound=function(){var t=this.state,e=t.scrollArea;return!t.options.circular&&(t.position<e.prev||t.position>e.next)},e.canSetBoundMode=function(){var t=this.state,e=t.options,n=this.panels,i=n[n.length-1],r=i.getPosition()+i.getSize();return e.bound&&!e.circular&&r>=t.size},t}();return function(o){function t(t,e){void 0===e&&(e={});var n,i=o.call(this)||this;if("string"==typeof t){if(!(n=document.querySelector(t)))throw new Error("Base element doesn't exist.")}else{if(!t.nodeName||1!==t.nodeType)throw new Error("Element should be provided in string or HTMLElement.");n=t}return i.wrapper=n,i.build(e),i}!function(t,e){function n(){this.constructor=t}i(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}(t,o);var e=t.prototype;return e.prev=function(t){var e=this.viewport.getCurrentPanel().getPrevPanel();return e&&this.moveToPanelProgramatic(e,t),this},e.next=function(t){var e=this.viewport.getCurrentPanel().getNextPanel();return e&&this.moveToPanelProgramatic(e,t),this},e.moveTo=function(t,e){var n=this.viewport.getPanel(t);return n&&this.moveToPanelProgramatic(n,e),this},e.getIndex=function(){return this.viewport.getIndex()},e.getPrevIndex=function(){return this.viewport.getPrevIndex()},e.getNextIndex=function(){return this.viewport.getNextIndex()},e.getCurrentPanel=function(){return this.viewport.getCurrentPanel().toReadonlyVersion()},e.getPanel=function(t){var e=this.viewport.getPanel(t);return e?e.toReadonlyVersion():null},e.getPanelCount=function(){return this.viewport.getPanelCount()},e.isPlaying=function(){return this.state.movingState!==b},e.enableInput=function(){return this.viewport.enable(),this},e.disableInput=function(){return this.viewport.disable(),this},e.destroy=function(){for(var t in this.off(),this.viewport.destroy(),this)this[t]=null},e.trigger=function(t,e){void 0===e&&(e={});var n=this.state,i=n.movingState===v||n.movingState===w,r=this.viewport.getCurrentPanel();return e.direction&&(n.movingDirection=e.direction),t===S.MOVE_END&&(n.moveStartTriggered=!1,n.options.adaptive&&this.viewport.adjustSize()),!o.prototype.trigger.call(this,t,h({type:t,index:r.getIndex(),panel:r.toReadonlyVersion(),holding:i},e))},e.build=function(t){this.setInitialState(t),this.initViewport(),this.listenInput()},e.setInitialState=function(t){var e=h({},n);e.options=h({},f,t),this.state=e},e.initViewport=function(){var t=this.wrapper,e=this.state.options,n=t.children;if(!n||!n.length)throw new Error("Given base element doesn't have proper DOM structure to be initialized.");for(var i=document.createElement("div"),r=t.firstChild;r;)i.appendChild(r),r=t.firstChild;var o=document.createElement("div");o.appendChild(i),t.appendChild(o),this.viewport=new Se(o,i,e);var s=this.viewport;s.flicking=this,e.defaultIndex=p(e.defaultIndex,0,s.getPanelCount()-1)},e.listenInput=function(){this.viewport.connectAxesHandler({hold:this.onAxesHold.bind(this),change:this.onAxesChange.bind(this),release:this.onAxesRelease.bind(this),animationEnd:this.onAxesAnimationEnd.bind(this),finish:this.onAxesFinish.bind(this)})},e.stopMoving=function(){var t=this.state;t.panelMovingTo=void 0,t.movingState=b,t.movingDirection=void 0,t.lastHoldingDelta=0},e.onAxesHold=function(t){var e=this.state;e.movingState!==I&&(this.trigger(S.HOLD_START,{axesEvent:t,holding:!0,isTrusted:!0})?e.movingState=I:(e.movingState=e.movingState!==A?v:w,e.movingDirection=void 0,e.lastHoldingDelta=0))},e.onAxesChange=function(t){var e=this.state,n=this.viewport,i=t.pos.flick,r=t.inputEvent?e.options.horizontal?t.inputEvent.deltaX:t.inputEvent.deltaY:0;if(e.movingState!==I&&t.delta.flick){var o=r<e.lastHoldingDelta?C.NEXT:C.PREV;if(!e.moveStartTriggered){if(e.moveStartTriggered=!0,this.trigger(S.MOVE_START,{axesEvent:t,direction:e.movingState===v?o:e.movingDirection,isTrusted:t.isTrusted}))return this.stopMoving(),void(e.movingState=I);e.movingState=e.movingState===v?w:e.movingState}e.movingState===w&&(e.movingDirection=o,e.lastHoldingDelta=r);var s=this.viewport.getCameraPosition();return n.moveCamera(i),this.trigger(S.MOVE,{axesEvent:t,direction:e.movingDirection,isTrusted:t.isTrusted})?(n.moveCamera(s),this.stopMoving(),void(e.movingState=I)):void 0}},e.onAxesRelease=function(t){var e=this.state,n=e.options,i=this.viewport;if(e.movingState!==I){var r=n.horizontal?t.inputEvent.deltaX:t.inputEvent.deltaY,o=r<0,s=Math.abs(r),a=t.inputEvent.deltaX?Math.abs(180*Math.atan(t.inputEvent.deltaY/t.inputEvent.deltaX)/Math.PI):90,h=i.getCurrentPanel(),u=e.movingState===w,c=s>=n.threshold&&(n.horizontal?a<=n.thresholdAngle:a>n.thresholdAngle);if(e.movingState=A,this.trigger(S.HOLD_END,{axesEvent:t,holding:!1,direction:e.movingDirection,isTrusted:!0}),!c){if(!u){var l=i.getCameraPosition(),p=t.inputEvent.srcEvent.target,f=i.findPanelOf(p);if(f){var v=f.getPosition(),d=l<v?C.NEXT:v<l?C.PREV:void 0;e.movingState=b,this.trigger(S.SELECT,{axesEvent:t,direction:d,isTrusted:!0,selectedIndex:f.getIndex(),selectedPanel:f.toReadonlyVersion()})}else t.setTo({flick:l},0),this.stopMoving();return}if(e.panelMovingTo)return void this.viewport.moveTo(e.panelMovingTo.toReadonlyVersion(),t)}var m=o?h.getSize()-h.getRelativeAnchorPosition():h.getRelativeAnchorPosition();m=Math.max(m,n.threshold);var g=i.getCameraPosition()+i.getHangerPosition(),x=h;if(c)if(s<=m){var P=o?h.getNextPanel():h.getPrevPanel();if(n.circular){var y=h.getIdenticalPanels()[1];(E=Math.abs(h.getAnchorPosition()-g)>Math.abs(y.getAnchorPosition()-g))&&(P=o?y.getNextPanel():y.getPrevPanel())}x=null!=P?P:h}else x=i.findNearestPanel();else if(n.circular){y=h.getIdenticalPanels()[1];var E=Math.abs(h.getAnchorPosition()-g)>Math.abs(y.getAnchorPosition()-g);!o&&E&&(x=y)}var T=c?S.CHANGE:S.RESTORE;if(c&&!n.circular&&x===h&&(T=S.RESTORE),this.trigger(T,{index:x.getIndex(),panel:x.toReadonlyVersion(),prevIndex:T===S.CHANGE?h.getIndex():void 0,prevPanel:T===S.CHANGE?h.toReadonlyVersion():void 0,axesEvent:t,direction:e.movingDirection,isTrusted:!0}))return this.stopMoving(),void(e.movingState=I);e.panelMovingTo=x,this.viewport.moveTo(x.toReadonlyVersion(),t)}},e.onAxesAnimationEnd=function(t){var e=this.state;e.movingState!==I&&this.trigger(S.MOVE_END,{axesEvent:t,direction:e.movingDirection,isTrusted:t.isTrusted})},e.onAxesFinish=function(t){this.stopMoving()},e.moveToPanelProgramatic=function(t,e){void 0===e&&(e=this.state.options.duration);var n=this.state,i=this.viewport,r=i.getIndex();if(t&&n.movingState===b&&t.getIndex()!==r){var o=i.findShortestPositionToPanel(t),s=i.getCameraPosition(),a=s<o?C.NEXT:o<s?C.PREV:void 0;if(this.state.movingState=A,this.state.movingDirection=a,!this.trigger(S.CHANGE,{index:t.getIndex(),panel:t.toReadonlyVersion(),prevIndex:i.getIndex(),prevPanel:i.getCurrentPanel().toReadonlyVersion(),direction:a,isTrusted:!1})){var h=i.findNearestIdenticalPanel(t);this.viewport.moveTo(h.toReadonlyVersion(),null,e),e<=0&&(this.trigger(S.MOVE_END,{direction:a,isTrusted:!1}),this.stopMoving())}}},t.VERSION="3.0.0-dev",t.DIRECTION=C,t.EVENTS=S,t}(t)});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):((t=t||self).eg=t.eg||{},t.eg.Flicking=e())}(this,function(){"use strict";var i=function(t,e){return(i=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(t,e)};function r(t,e){function n(){this.constructor=t}i(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}function a(t){return void 0===t}var t=function(){var t=function(){function t(){this._eventHandler={},this.options={}}var e=t.prototype;return e.trigger=function(t,e){void 0===e&&(e={});var n=this._eventHandler[t]||[];if(!(0<n.length))return!0;n=n.concat(),e.eventType=t;var i=!1,r=[e],o=0;e.stop=function(){i=!0},e.currentTarget=this;for(var s=arguments.length,a=new Array(2<s?s-2:0),u=2;u<s;u++)a[u-2]=arguments[u];for(1<=a.length&&(r=r.concat(a)),o=0;n[o];o++)n[o].apply(this,r);return!i},e.once=function(r,o){if("object"==typeof r&&a(o)){var t,e=r;for(t in e)this.once(t,e[t]);return this}if("string"==typeof r&&"function"==typeof o){var s=this;this.on(r,function t(){for(var e=arguments.length,n=new Array(e),i=0;i<e;i++)n[i]=arguments[i];o.apply(s,n),s.off(r,t)})}return this},e.hasOn=function(t){return!!this._eventHandler[t]},e.on=function(t,e){if("object"==typeof t&&a(e)){var n,i=t;for(n in i)this.on(n,i[n]);return this}if("string"==typeof t&&"function"==typeof e){var r=this._eventHandler[t];a(r)&&(this._eventHandler[t]=[],r=this._eventHandler[t]),r.push(e)}return this},e.off=function(t,e){if(a(t))return this._eventHandler={},this;if(a(e)){if("string"==typeof t)return this._eventHandler[t]=void 0,this;var n,i=t;for(n in i)this.off(n,i[n]);return this}var r,o,s=this._eventHandler[t];if(s)for(r=0;void 0!==(o=s[r]);r++)if(o===e){s=s.splice(r,1);break}return this},t}();return t.VERSION="2.1.2",t}();function f(i){for(var t=[],e=1;e<arguments.length;e++)t[e-1]=arguments[e];return t.forEach(function(n){Object.keys(n).forEach(function(t){var e=n[t];i[t]=e})}),i}var u=function(){var t={webkitTransform:"-webkit-transform",msTransform:"-ms-transform",MozTransform:"-moz-transform",OTransform:"-o-transform",transform:"transform"},e=document.documentElement.style,n="";for(var i in t)i in e&&(n=i);if(!n)throw new Error("Browser doesn't support CSS3 2D Transforms.");var r=document.createElement("div");document.documentElement.insertBefore(r,null),r.style[n]="translate3d(1px, 1px, 1px)";var o=window.getComputedStyle(r).getPropertyValue(t[n]);r.parentElement.removeChild(r);var s={name:n,has3d:0<o.length&&"none"!==o};return u=function(){return s},s};function o(e,n){Object.keys(n).forEach(function(t){e.style[t]=n[t]})}function p(t,e,n){return Math.max(Math.min(t,n),e)}function v(t,e,n){return e<=t&&t<=n}function d(t,e,n){var i=null!=n?n:e/2,r=/(?:(\+|\-)\s*)?(\d+(?:\.\d+)?(%|px)?)/g;if("number"==typeof t)return p(t,0,e);for(var o=0,s=0,a=r.exec(t);null!=a;){var u=a[1],h=a[2],c=a[3],l=parseFloat(h);if(o<=0&&(u=u||"+"),!u)return i;"%"===c&&(l=l/100*e),s+="+"===u?l:-l,++o,a=r.exec(t)}return 0===o?i:p(s,0,e)}function w(t,e){var n=e[0],i=e[1],r=e[2];return i<t?r-i?(t-i)/(r-i):(t-n)/(r-n):t<i?i-n?(t-i)/(i-n):(t-n)/(r-n):0}var g={classPrefix:"eg-flick",deceleration:.0075,horizontal:!0,circular:!1,threshold:40,duration:100,panelEffect:function(t){return 1-Math.pow(1-t,3)},defaultIndex:0,inputType:["touch","mouse"],thresholdAngle:45,bounce:10,autoResize:!1,adaptive:!1,zIndex:2e3,bound:!1,overflow:!1,hanger:"50%",anchor:"50%",gap:0,snap:1},s={position:"relative",zIndex:g.zIndex,width:"100%",height:"100%",willChange:"transform",overflow:"hidden"},h={width:"100%",height:"100%"},c={position:"absolute"},O={HOLD_START:"holdStart",HOLD_END:"holdEnd",MOVE_START:"moveStart",MOVE:"move",MOVE_END:"moveEnd",CHANGE:"change",RESTORE:"restore",SELECT:"select"},m={HOLD:"hold",CHANGE:"change",RELEASE:"release",ANIMATION_END:"animationEnd",FINISH:"finish"},l=0,P=1,x=2,M=3,_=4,y={PREV:"PREV",NEXT:"NEXT"},E=u(),T=function(){function i(t,e,n){var i,r;this.element=t,this.state={index:e,horizontal:n.horizontal,position:0,anchorExpression:n.anchorExpression,relativeAnchorPosition:0,size:0,clonedPanels:[],isClone:!1,cloneIndex:-1,originalStyle:{className:t.getAttribute("class")||null,style:t.getAttribute("style")||null},cachedBbox:null},n.classPrefix&&(i=t,r=n.classPrefix+"-panel",i.classList?i.classList.add(r):i.className.indexOf(r)<0&&(i.className=(i.className+" "+r).replace(/\s{2,}/g," "))),o(this.element,c),this.resize()}var t=i.prototype;return t.resize=function(){var t=this.state;t.cachedBbox=null;var e=this.getBbox();t.size=t.horizontal?e.width:e.height,t.isClone||t.clonedPanels.forEach(function(t){return t.resize()})},t.destroy=function(){var t=this.element,e=this.state.originalStyle;for(var n in e.className?t.setAttribute("class",e.className):t.removeAttribute("class"),e.style?t.setAttribute("style",e.style):t.removeAttribute("style"),this)this[n]=null},t.getElement=function(){return this.element},t.getAnchorPosition=function(){return this.state.position+this.state.relativeAnchorPosition},t.getRelativeAnchorPosition=function(){return this.state.relativeAnchorPosition},t.getIndex=function(){return this.state.index},t.getPosition=function(){return this.state.position},t.getSize=function(){return this.state.size},t.getPrevPanel=function(){return this.prevPanel},t.getNextPanel=function(){return this.nextPanel},t.getBbox=function(){var t=this.state;return t.cachedBbox||(t.cachedBbox=this.element.getBoundingClientRect()),t.cachedBbox},t.isClone=function(){return this.state.isClone},t.getCloneIndex=function(){return this.state.cloneIndex},t.getClonedPanels=function(){return this.state.clonedPanels},t.getIdenticalPanels=function(){var t=this.state;return t.isClone?this.original.getIdenticalPanels():[this].concat(t.clonedPanels)},t.setPosition=function(t){var e=this.state,n=this.element.style;e.position=t,e.horizontal?n.left=t+"px":n.top=t+"px",e.relativeAnchorPosition=d(e.anchorExpression,e.size)},t.setPrevPanel=function(t){this.prevPanel=t},t.setNextPanel=function(t){this.nextPanel=t},t.clone=function(t){var e=this.state,n=new i(this.element.cloneNode(!0),e.index,{anchorExpression:e.anchorExpression,horizontal:e.horizontal});return n.original=this,n.state.isClone=!0,n.state.cloneIndex=t,n.state.size=e.size,e.clonedPanels.push(n),n},t.removeClonedPanelsAfter=function(t){for(var e=0,n=this.state.clonedPanels.splice(t);e<n.length;e++){var i=n[e].getElement();i.parentNode.removeChild(i)}},i}();function b(){return(b=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t}).apply(this,arguments)}function A(t,e){t.prototype=Object.create(e.prototype),(t.prototype.constructor=t).__proto__=e}function C(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}var I,S="function"!=typeof Object.assign?function(t){if(null==t)throw new TypeError("Cannot convert undefined or null to object");for(var e=Object(t),n=1;n<arguments.length;n++){var i=arguments[n];if(null!=i)for(var r in i)i.hasOwnProperty(r)&&(e[r]=i[r])}return e}:Object.assign,z=["","webkit","Moz","MS","ms","o"],e="undefined"==typeof document?{style:{}}:document.createElement("div"),n="function",R=Math.round,N=Math.abs,D=Date.now;function H(t,e){for(var n,i,r=e[0].toUpperCase()+e.slice(1),o=0;o<z.length;){if((i=(n=z[o])?n+r:e)in t)return i;o++}}I="undefined"==typeof window?{}:window;var k=H(e.style,"touchAction"),X=void 0!==k;var F="compute",Y="auto",j="manipulation",L="none",V="pan-x",B="pan-y",q=function(){if(!X)return!1;var e={},n=I.CSS&&I.CSS.supports;return["auto","manipulation","pan-y","pan-x","pan-x pan-y","none"].forEach(function(t){return e[t]=!n||I.CSS.supports("touch-action",t)}),e}(),W="ontouchstart"in I,G=void 0!==H(I,"PointerEvent"),U=W&&/mobile|tablet|ip(ad|hone|od)|android/i.test(navigator.userAgent),Q="touch",Z="mouse",J=25,K=1,$=4,tt=8,et=1,nt=2,it=4,rt=8,ot=16,st=nt|it,at=rt|ot,ut=st|at,ht=["x","y"],ct=["clientX","clientY"];function lt(t,e,n){var i;if(t)if(t.forEach)t.forEach(e,n);else if(void 0!==t.length)for(i=0;i<t.length;)e.call(n,t[i],i,t),i++;else for(i in t)t.hasOwnProperty(i)&&e.call(n,t[i],i,t)}function pt(t,e){return typeof t===n?t.apply(e&&e[0]||void 0,e):t}function ft(t,e){return-1<t.indexOf(e)}var vt=function(){function t(t,e){this.manager=t,this.set(e)}var e=t.prototype;return e.set=function(t){t===F&&(t=this.compute()),X&&this.manager.element.style&&q[t]&&(this.manager.element.style[k]=t),this.actions=t.toLowerCase().trim()},e.update=function(){this.set(this.manager.options.touchAction)},e.compute=function(){var e=[];return lt(this.manager.recognizers,function(t){pt(t.options.enable,[t])&&(e=e.concat(t.getTouchAction()))}),function(t){if(ft(t,L))return L;var e=ft(t,V),n=ft(t,B);return e&&n?L:e||n?e?V:B:ft(t,j)?j:Y}(e.join(" "))},e.preventDefaults=function(t){var e=t.srcEvent,n=t.offsetDirection;if(this.manager.session.prevented)e.preventDefault();else{var i=this.actions,r=ft(i,L)&&!q[L],o=ft(i,B)&&!q[B],s=ft(i,V)&&!q[V];if(r){var a=1===t.pointers.length,u=t.distance<2,h=t.deltaTime<250;if(a&&u&&h)return}if(!s||!o)return r||o&&n&st||s&&n&at?this.preventSrc(e):void 0}},e.preventSrc=function(t){this.manager.session.prevented=!0,t.preventDefault()},t}();function dt(t,e){for(;t;){if(t===e)return!0;t=t.parentNode}return!1}function gt(t){var e=t.length;if(1===e)return{x:R(t[0].clientX),y:R(t[0].clientY)};for(var n=0,i=0,r=0;r<e;)n+=t[r].clientX,i+=t[r].clientY,r++;return{x:R(n/e),y:R(i/e)}}function mt(t){for(var e=[],n=0;n<t.pointers.length;)e[n]={clientX:R(t.pointers[n].clientX),clientY:R(t.pointers[n].clientY)},n++;return{timeStamp:D(),pointers:e,center:gt(e),deltaX:t.deltaX,deltaY:t.deltaY}}function Pt(t,e,n){n||(n=ht);var i=e[n[0]]-t[n[0]],r=e[n[1]]-t[n[1]];return Math.sqrt(i*i+r*r)}function xt(t,e,n){n||(n=ht);var i=e[n[0]]-t[n[0]],r=e[n[1]]-t[n[1]];return 180*Math.atan2(r,i)/Math.PI}function yt(t,e){return t===e?et:N(t)>=N(e)?t<0?nt:it:e<0?rt:ot}function Et(t,e,n){return{x:e/t||0,y:n/t||0}}function Tt(t,e){var n=t.session,i=e.pointers,r=i.length;n.firstInput||(n.firstInput=mt(e)),1<r&&!n.firstMultiple?n.firstMultiple=mt(e):1===r&&(n.firstMultiple=!1);var o,s,a,u,h,c,l=n.firstInput,p=n.firstMultiple,f=p?p.center:l.center,v=e.center=gt(i);e.timeStamp=D(),e.deltaTime=e.timeStamp-l.timeStamp,e.angle=xt(f,v),e.distance=Pt(f,v),o=n,a=(s=e).center,u=o.offsetDelta||{},h=o.prevDelta||{},c=o.prevInput||{},s.eventType!==K&&c.eventType!==$||(h=o.prevDelta={x:c.deltaX||0,y:c.deltaY||0},u=o.offsetDelta={x:a.x,y:a.y}),s.deltaX=h.x+(a.x-u.x),s.deltaY=h.y+(a.y-u.y),e.offsetDirection=yt(e.deltaX,e.deltaY);var d,g,m,P,x=Et(e.deltaTime,e.deltaX,e.deltaY);e.overallVelocityX=x.x,e.overallVelocityY=x.y,e.overallVelocity=N(x.x)>N(x.y)?x.x:x.y,e.scale=p?(d=p.pointers,Pt((g=i)[0],g[1],ct)/Pt(d[0],d[1],ct)):1,e.rotation=p?(m=p.pointers,xt((P=i)[1],P[0],ct)+xt(m[1],m[0],ct)):0,e.maxPointers=n.prevInput?e.pointers.length>n.prevInput.maxPointers?e.pointers.length:n.prevInput.maxPointers:e.pointers.length,function(t,e){var n,i,r,o,s=t.lastInterval||e,a=e.timeStamp-s.timeStamp;if(e.eventType!==tt&&(J<a||void 0===s.velocity)){var u=e.deltaX-s.deltaX,h=e.deltaY-s.deltaY,c=Et(a,u,h);i=c.x,r=c.y,n=N(c.x)>N(c.y)?c.x:c.y,o=yt(u,h),t.lastInterval=e}else n=s.velocity,i=s.velocityX,r=s.velocityY,o=s.direction;e.velocity=n,e.velocityX=i,e.velocityY=r,e.direction=o}(n,e);var y=t.element;dt(e.srcEvent.target,y)&&(y=e.srcEvent.target),e.target=y}function bt(t,e,n){var i=n.pointers.length,r=n.changedPointers.length,o=e&K&&i-r==0,s=e&($|tt)&&i-r==0;n.isFirst=!!o,n.isFinal=!!s,o&&(t.session={}),n.eventType=e,Tt(t,n),t.emit("hammer.input",n),t.recognize(n),t.session.prevInput=n}function wt(t){return t.trim().split(/\s+/g)}function At(e,t,n){lt(wt(t),function(t){e.addEventListener(t,n,!1)})}function Ct(e,t,n){lt(wt(t),function(t){e.removeEventListener(t,n,!1)})}function It(t){var e=t.ownerDocument||t;return e.defaultView||e.parentWindow||window}var St=function(){function t(e,t){var n=this;this.manager=e,this.callback=t,this.element=e.element,this.target=e.options.inputTarget,this.domHandler=function(t){pt(e.options.enable,[e])&&n.handler(t)},this.init()}var e=t.prototype;return e.handler=function(){},e.init=function(){this.evEl&&At(this.element,this.evEl,this.domHandler),this.evTarget&&At(this.target,this.evTarget,this.domHandler),this.evWin&&At(It(this.element),this.evWin,this.domHandler)},e.destroy=function(){this.evEl&&Ct(this.element,this.evEl,this.domHandler),this.evTarget&&Ct(this.target,this.evTarget,this.domHandler),this.evWin&&Ct(It(this.element),this.evWin,this.domHandler)},t}();function zt(t,e,n){if(t.indexOf&&!n)return t.indexOf(e);for(var i=0;i<t.length;){if(n&&t[i][n]==e||!n&&t[i]===e)return i;i++}return-1}var Ot={pointerdown:K,pointermove:2,pointerup:$,pointercancel:tt,pointerout:tt},Mt={2:Q,3:"pen",4:Z,5:"kinect"},_t="pointerdown",Rt="pointermove pointerup pointercancel";I.MSPointerEvent&&!I.PointerEvent&&(_t="MSPointerDown",Rt="MSPointerMove MSPointerUp MSPointerCancel");var Nt=function(n){function i(){var t,e=i.prototype;return e.evEl=_t,e.evWin=Rt,(t=n.apply(this,arguments)||this).store=t.manager.session.pointerEvents=[],t}return A(i,n),i.prototype.handler=function(t){var e=this.store,n=!1,i=t.type.toLowerCase().replace("ms",""),r=Ot[i],o=Mt[t.pointerType]||t.pointerType,s=o===Q,a=zt(e,t.pointerId,"pointerId");r&K&&(0===t.button||s)?a<0&&(e.push(t),a=e.length-1):r&($|tt)&&(n=!0),a<0||(e[a]=t,this.callback(this.manager,r,{pointers:e,changedPointers:[t],pointerType:o,srcEvent:t}),n&&e.splice(a,1))},i}(St);function Dt(t){return Array.prototype.slice.call(t,0)}function Ht(t,n,e){for(var i=[],r=[],o=0;o<t.length;){var s=n?t[o][n]:t[o];zt(r,s)<0&&i.push(t[o]),r[o]=s,o++}return e&&(i=n?i.sort(function(t,e){return t[n]>e[n]}):i.sort()),i}var kt={touchstart:K,touchmove:2,touchend:$,touchcancel:tt},Xt=function(t){function e(){return e.prototype.evTarget="touchstart touchmove touchend touchcancel",e.prototype.targetIds={},t.apply(this,arguments)||this}return A(e,t),e.prototype.handler=function(t){var e=kt[t.type],n=function(t,e){var n,i,r=Dt(t.touches),o=this.targetIds;if(e&(2|K)&&1===r.length)return o[r[0].identifier]=!0,[r,r];var s=Dt(t.changedTouches),a=[],u=this.target;if(i=r.filter(function(t){return dt(t.target,u)}),e===K)for(n=0;n<i.length;)o[i[n].identifier]=!0,n++;n=0;for(;n<s.length;)o[s[n].identifier]&&a.push(s[n]),e&($|tt)&&delete o[s[n].identifier],n++;return a.length?[Ht(i.concat(a),"identifier",!0),a]:void 0}.call(this,t,e);n&&this.callback(this.manager,e,{pointers:n[0],changedPointers:n[1],pointerType:Q,srcEvent:t})},e}(St);var Ft={mousedown:K,mousemove:2,mouseup:$},Yt=function(n){function i(){var t,e=i.prototype;return e.evEl="mousedown",e.evWin="mousemove mouseup",(t=n.apply(this,arguments)||this).pressed=!1,t}return A(i,n),i.prototype.handler=function(t){var e=Ft[t.type];e&K&&0===t.button&&(this.pressed=!0),2&e&&1!==t.which&&(e=$),this.pressed&&(e&$&&(this.pressed=!1),this.callback(this.manager,e,{pointers:[t],changedPointers:[t],pointerType:Z,srcEvent:t}))},i}(St),jt=2500,Lt=25;function Vt(t){var e=t.changedPointers[0];if(e.identifier===this.primaryTouch){var n={x:e.clientX,y:e.clientY},i=this.lastTouches;this.lastTouches.push(n);setTimeout(function(){var t=i.indexOf(n);-1<t&&i.splice(t,1)},jt)}}var Bt=function(){return function(n){function t(t,e){var o;return(o=n.call(this,t,e)||this).handler=function(t,e,n){var i=n.pointerType===Q,r=n.pointerType===Z;if(!(r&&n.sourceCapabilities&&n.sourceCapabilities.firesTouchEvents)){if(i)(function(t,e){t&K?(this.primaryTouch=e.changedPointers[0].identifier,Vt.call(this,e)):t&($|tt)&&Vt.call(this,e)}).call(C(C(o)),e,n);else if(r&&function(t){for(var e=t.srcEvent.clientX,n=t.srcEvent.clientY,i=0;i<this.lastTouches.length;i++){var r=this.lastTouches[i],o=Math.abs(e-r.x),s=Math.abs(n-r.y);if(o<=Lt&&s<=Lt)return!0}return!1}.call(C(C(o)),n))return;o.callback(t,e,n)}},o.touch=new Xt(o.manager,o.handler),o.mouse=new Yt(o.manager,o.handler),o.primaryTouch=null,o.lastTouches=[],o}return A(t,n),t.prototype.destroy=function(){this.touch.destroy(),this.mouse.destroy()},t}(St)}();function qt(t,e,n){return!!Array.isArray(t)&&(lt(t,n[e],n),!0)}var Wt=1;function Gt(t,e){var n=e.manager;return n?n.get(t):t}function Ut(t){return 16&t?"cancel":8&t?"end":4&t?"move":2&t?"start":""}var Qt=function(){function t(t){void 0===t&&(t={}),this.options=b({enable:!0},t),this.id=Wt++,this.manager=null,this.state=1,this.simultaneous={},this.requireFail=[]}var e=t.prototype;return e.set=function(t){return S(this.options,t),this.manager&&this.manager.touchAction.update(),this},e.recognizeWith=function(t){if(qt(t,"recognizeWith",this))return this;var e=this.simultaneous;return e[(t=Gt(t,this)).id]||(e[t.id]=t).recognizeWith(this),this},e.dropRecognizeWith=function(t){return qt(t,"dropRecognizeWith",this)||(t=Gt(t,this),delete this.simultaneous[t.id]),this},e.requireFailure=function(t){if(qt(t,"requireFailure",this))return this;var e=this.requireFail;return-1===zt(e,t=Gt(t,this))&&(e.push(t),t.requireFailure(this)),this},e.dropRequireFailure=function(t){if(qt(t,"dropRequireFailure",this))return this;t=Gt(t,this);var e=zt(this.requireFail,t);return-1<e&&this.requireFail.splice(e,1),this},e.hasRequireFailures=function(){return 0<this.requireFail.length},e.canRecognizeWith=function(t){return!!this.simultaneous[t.id]},e.emit=function(e){var n=this,t=this.state;function i(t){n.manager.emit(t,e)}t<8&&i(n.options.event+Ut(t)),i(n.options.event),e.additionalEvent&&i(e.additionalEvent),8<=t&&i(n.options.event+Ut(t))},e.tryEmit=function(t){if(this.canEmit())return this.emit(t);this.state=32},e.canEmit=function(){for(var t=0;t<this.requireFail.length;){if(!(33&this.requireFail[t].state))return!1;t++}return!0},e.recognize=function(t){var e=S({},t);if(!pt(this.options.enable,[this,e]))return this.reset(),void(this.state=32);56&this.state&&(this.state=1),this.state=this.process(e),30&this.state&&this.tryEmit(e)},e.process=function(t){},e.getTouchAction=function(){},e.reset=function(){},t}(),Zt={domEvents:!1,touchAction:F,enable:!0,inputTarget:null,inputClass:null,preset:[],cssProps:{userSelect:"none",touchSelect:"none",touchCallout:"none",contentZooming:"none",userDrag:"none",tapHighlightColor:"rgba(0,0,0,0)"}};function Jt(n,i){var r,o=n.element;o.style&&(lt(n.options.cssProps,function(t,e){r=H(o.style,e),o.style[r]=i?(n.oldCssProps[r]=o.style[r],t):n.oldCssProps[r]||""}),i||(n.oldCssProps={}))}var Kt=function(){function t(t,e){var n,i=this;this.options=S({},Zt,e||{}),this.options.inputTarget=this.options.inputTarget||t,this.handlers={},this.session={},this.recognizers=[],this.oldCssProps={},this.element=t,this.input=new((n=this).options.inputClass||(G?Nt:U?Xt:W?Bt:Yt))(n,bt),this.touchAction=new vt(this,this.options.touchAction),Jt(this,!0),lt(this.options.recognizers,function(t){var e=i.add(new t[0](t[1]));t[2]&&e.recognizeWith(t[2]),t[3]&&e.requireFailure(t[3])},this)}var e=t.prototype;return e.set=function(t){return S(this.options,t),t.touchAction&&this.touchAction.update(),t.inputTarget&&(this.input.destroy(),this.input.target=t.inputTarget,this.input.init()),this},e.stop=function(t){this.session.stopped=t?2:1},e.recognize=function(t){var e=this.session;if(!e.stopped){var n;this.touchAction.preventDefaults(t);var i=this.recognizers,r=e.curRecognizer;(!r||r&&8&r.state)&&(r=e.curRecognizer=null);for(var o=0;o<i.length;)n=i[o],2===e.stopped||r&&n!==r&&!n.canRecognizeWith(r)?n.reset():n.recognize(t),!r&&14&n.state&&(r=e.curRecognizer=n),o++}},e.get=function(t){if(t instanceof Qt)return t;for(var e=this.recognizers,n=0;n<e.length;n++)if(e[n].options.event===t)return e[n];return null},e.add=function(t){if(qt(t,"add",this))return this;var e=this.get(t.options.event);return e&&this.remove(e),this.recognizers.push(t),(t.manager=this).touchAction.update(),t},e.remove=function(t){if(qt(t,"remove",this))return this;var e=this.get(t);if(t){var n=this.recognizers,i=zt(n,e);-1!==i&&(n.splice(i,1),this.touchAction.update())}return this},e.on=function(t,e){if(void 0===t||void 0===e)return this;var n=this.handlers;return lt(wt(t),function(t){n[t]=n[t]||[],n[t].push(e)}),this},e.off=function(t,e){if(void 0===t)return this;var n=this.handlers;return lt(wt(t),function(t){e?n[t]&&n[t].splice(zt(n[t],e),1):delete n[t]}),this},e.emit=function(t,e){var n,i,r;this.options.domEvents&&(n=t,i=e,(r=document.createEvent("Event")).initEvent(n,!0,!0),(r.gesture=i).target.dispatchEvent(r));var o=this.handlers[t]&&this.handlers[t].slice();if(o&&o.length){e.type=t,e.preventDefault=function(){e.srcEvent.preventDefault()};for(var s=0;s<o.length;)o[s](e),s++}},e.destroy=function(){this.element&&Jt(this,!1),this.handlers={},this.session={},this.input.destroy(),this.element=null},t}();var $t=function(e){function t(t){return void 0===t&&(t={}),e.call(this,b({pointers:1},t))||this}A(t,e);var n=t.prototype;return n.attrTest=function(t){var e=this.options.pointers;return 0===e||t.pointers.length===e},n.process=function(t){var e=this.state,n=t.eventType,i=6&e,r=this.attrTest(t);return i&&(n&tt||!r)?16|e:i||r?n&$?8|e:2&e?4|e:2:32},t}(Qt);function te(t){return t===ot?"down":t===rt?"up":t===nt?"left":t===it?"right":""}var ee=function(n){function t(t){var e;return void 0===t&&(t={}),(e=n.call(this,b({event:"pan",threshold:10,pointers:1,direction:ut},t))||this).pX=null,e.pY=null,e}A(t,n);var e=t.prototype;return e.getTouchAction=function(){var t=this.options.direction,e=[];return t&st&&e.push(B),t&at&&e.push(V),e},e.directionTest=function(t){var e=this.options,n=!0,i=t.distance,r=t.direction,o=t.deltaX,s=t.deltaY;return r&e.direction||(i=e.direction&st?(r=0===o?et:o<0?nt:it,n=o!==this.pX,Math.abs(t.deltaX)):(r=0===s?et:s<0?rt:ot,n=s!==this.pY,Math.abs(t.deltaY))),t.direction=r,n&&i>e.threshold&&r&e.direction},e.attrTest=function(t){return $t.prototype.attrTest.call(this,t)&&(2&this.state||!(2&this.state)&&this.directionTest(t))},e.emit=function(t){this.pX=t.deltaX,this.pY=t.deltaY;var e=te(t.direction);e&&(t.additionalEvent=this.options.event+e),n.prototype.emit.call(this,t)},t}($t),ne=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])};var ie=Object.assign||function(t){for(var e,n=1,i=arguments.length;n<i;n++)for(var r in e=arguments[n])Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t};function re(t,e,n,i){var r=t,o=[n[0]?e[0]:i?e[0]-i[0]:e[0],n[1]?e[1]:i?e[1]+i[1]:e[1]];return r=Math.max(o[0],r),+(r=Math.min(o[1],r)).toFixed(5)}function oe(t,e){return t<e[0]||t>e[1]}function se(t,e,n){return n[1]&&t>e[1]||n[0]&&t<e[0]}function ae(t,e,n){var i=t,r=e[0],o=e[1],s=o-r;return n[1]&&o<t&&(i=(i-o)%s+r),n[0]&&t<r&&(i=(i-r)%s+o),+i.toFixed(5)}function ue(t,e){for(var n in t)if(t[n]!==e[n])return!1;return!0}var he,ce=function(){function t(t,e){var n=this;this.axis=t,this.options=e,this._complementOptions(),this._pos=Object.keys(this.axis).reduce(function(t,e){return t[e]=n.axis[e].range[0],t},{})}var e=t.prototype;return e._complementOptions=function(){var r=this;Object.keys(this.axis).forEach(function(i){r.axis[i]=ie({range:[0,100],bounce:[0,0],circular:[!1,!1]},r.axis[i]),["bounce","circular"].forEach(function(t){var e=r.axis,n=e[i][t];/string|number|boolean/.test(typeof n)&&(e[i][t]=[n,n])})})},e.getDelta=function(t,e){var n=this.get(t);return this.map(this.get(e),function(t,e){return t-n[e]})},e.get=function(t){var n=this;return t&&Array.isArray(t)?t.reduce(function(t,e){return e&&e in n._pos&&(t[e]=n._pos[e]),t},{}):ie({},this._pos,t||{})},e.moveTo=function(n){var i=this,t=this.map(this._pos,function(t,e){return e in n?n[e]-i._pos[e]:0});return this.set(n),{pos:ie({},this._pos),delta:t}},e.set=function(t){for(var e in t)e&&e in this._pos&&(this._pos[e]=t[e])},e.every=function(t,e){var n=this.axis;for(var i in t)if(i&&!e(t[i],i,n[i]))return!1;return!0},e.filter=function(t,e){var n={},i=this.axis;for(var r in t)r&&e(t[r],r,i[r])&&(n[r]=t[r]);return n},e.map=function(t,e){var n={},i=this.axis;for(var r in t)r&&(n[r]=e(t[r],r,i[r]));return n},e.isOutside=function(t){return!this.every(t?this.get(t):this._pos,function(t,e,n){return!oe(t,n.range)})},t}();function le(t){for(var e=[],n=0,i=t.length;n<i;n++)e.push(t[n]);return e}var pe=(he="undefined"==typeof window?{}:window).requestAnimationFrame||he.webkitRequestAnimationFrame,fe=he.cancelAnimationFrame||he.webkitCancelAnimationFrame;if(pe&&!fe){var ve={},de=pe;pe=function(e){var n=de(function(t){ve[n]&&e(t)});return ve[n]=!0,n},fe=function(t){delete ve[t]}}else pe&&fe||(pe=function(t){return he.setTimeout(function(){t(he.performance&&he.performance.now&&he.performance.now()||(new Date).getTime())},16)},fe=he.clearTimeout);function ge(t,e,n){return Math.max(Math.min(t,n),e)}var me=function(){function t(t){var e=t.options,n=t.itm,i=t.em,r=t.axm;this.options=e,this.itm=n,this.em=i,this.axm=r,this.animationEnd=this.animationEnd.bind(this)}var e=t.prototype;return e.getDuration=function(o,t,e){var n,s=this;if(void 0!==e)n=e;else{var i=this.axm.map(t,function(t,e){return n=Math.abs(Math.abs(t)-Math.abs(o[e])),i=s.options.deceleration,(r=Math.sqrt(n/i*2))<100?0:r;var n,i,r});n=Object.keys(i).reduce(function(t,e){return Math.max(t,i[e])},-1/0)}return ge(n,this.options.minimumDuration,this.options.maximumDuration)},e.createAnimationParam=function(t,e,n){var i=this.axm.get(),r=t,o=n&&n.event||null;return{depaPos:i,destPos:r,duration:ge(e,this.options.minimumDuration,this.options.maximumDuration),delta:this.axm.getDelta(i,r),inputEvent:o,input:n&&n.input||null,isTrusted:!!o,done:this.animationEnd}},e.grab=function(t,e){if(this._animateParam&&t.length){var n=this.axm.get(t),i=this.axm.map(n,function(t,e,n){return ae(t,n.range,n.circular)});this.axm.every(i,function(t,e){return n[e]===t})||this.em.triggerChange(i,e,!!e),this._animateParam=null,this._raf&&(r=this._raf,fe(r)),this._raf=null,this.em.triggerAnimationEnd(!(!e||!e.event))}var r},e.getEventInfo=function(){return this._animateParam&&this._animateParam.input&&this._animateParam.inputEvent?{input:this._animateParam.input,event:this._animateParam.inputEvent}:null},e.restore=function(t){var e=this.axm.get(),n=this.axm.map(e,function(t,e,n){return Math.min(n.range[1],Math.max(n.range[0],t))});this.animateTo(n,this.getDuration(e,n),t)},e.animationEnd=function(){var t=this.getEventInfo();this._animateParam=null;var e=this.axm.filter(this.axm.get(),function(t,e,n){return se(t,n.range,n.circular)});0<Object.keys(e).length&&this.setTo(this.axm.map(e,function(t,e,n){return ae(t,n.range,n.circular)})),this.itm.setInterrupt(!1),this.em.triggerAnimationEnd(!!t),this.axm.isOutside()?this.restore(t):this.em.triggerFinish(!!t)},e.animateLoop=function(e,n){if(this._animateParam=ie({},e),this._animateParam.startTime=(new Date).getTime(),e.duration){var i=this._animateParam,r=this;!function t(){if(r._raf=null,1<=r.frame(i))return ue(e.destPos,r.axm.get(Object.keys(e.destPos)))||r.em.triggerChange(e.destPos),void n();r._raf=pe(t)}()}else this.em.triggerChange(e.destPos),n()},e.getUserControll=function(t){var e=t.setTo();return e.destPos=this.axm.get(e.destPos),e.duration=ge(e.duration,this.options.minimumDuration,this.options.maximumDuration),e},e.animateTo=function(t,e,n){var i=this,r=this.createAnimationParam(t,e,n),o=ie({},r.depaPos),s=this.em.triggerAnimationStart(r),a=this.getUserControll(r);if(!s&&this.axm.every(a.destPos,function(t,e,n){return se(t,n.range,n.circular)})&&console.warn("You can't stop the 'animation' event when 'circular' is true."),s&&!ue(a.destPos,o)){var u=n&&n.event||null;this.animateLoop({depaPos:o,destPos:a.destPos,duration:a.duration,delta:this.axm.getDelta(o,a.destPos),isTrusted:!!u,inputEvent:u,input:n&&n.input||null},function(){return i.animationEnd()})}},e.frame=function(i){var t=(new Date).getTime()-i.startTime,r=this.easing(t/i.duration),e=i.depaPos;return e=this.axm.map(e,function(t,e,n){return ae(t+=i.delta[e]*r,n.range,n.circular)}),this.em.triggerChange(e),r},e.easing=function(t){return 1<t?1:this.options.easing(t)},e.setTo=function(t,i){void 0===i&&(i=0);var e=Object.keys(t);this.grab(e);var n=this.axm.get(e);if(ue(t,n))return this;this.itm.setInterrupt(!0);var r=this.axm.filter(t,function(t,e){return n[e]!==t});return Object.keys(r).length&&(ue(r=this.axm.map(r,function(t,e,n){return n.circular&&(n.circular[0]||n.circular[1])?0<i?t:ae(t,n.range,n.circular):re(t,n.range,n.circular)}),n)||(0<i?this.animateTo(r,i):(this.em.triggerChange(r),this.itm.setInterrupt(!1)))),this},e.setBy=function(n,t){return void 0===t&&(t=0),this.setTo(this.axm.map(this.axm.get(Object.keys(n)),function(t,e){return t+n[e]}),t)},t}(),Pe=function(){function t(t){this.axes=t}var e=t.prototype;return e.triggerHold=function(t,e){this.axes.trigger("hold",{pos:t,input:e.input||null,inputEvent:e.event||null,isTrusted:!0})},e.triggerRelease=function(t){t.setTo=this.createUserControll(t.destPos,t.duration),this.axes.trigger("release",t)},e.triggerChange=function(t,e,n){void 0===e&&(e=null),void 0===n&&(n=!1);var i=this.am.getEventInfo(),r=this.am.axm.moveTo(t),o=e&&e.event||i&&i.event||null,s={pos:r.pos,delta:r.delta,holding:n,inputEvent:o,isTrusted:!!o,input:e&&e.input||i&&i.input||null,set:o?this.createUserControll(r.pos):function(){}};this.axes.trigger("change",s),o&&this.am.axm.set(s.set().destPos)},e.triggerAnimationStart=function(t){return t.setTo=this.createUserControll(t.destPos,t.duration),this.axes.trigger("animationStart",t)},e.triggerAnimationEnd=function(t){void 0===t&&(t=!1),this.axes.trigger("animationEnd",{isTrusted:t})},e.triggerFinish=function(t){void 0===t&&(t=!1),this.axes.trigger("finish",{isTrusted:t})},e.createUserControll=function(t,e){void 0===e&&(e=0);var n={destPos:ie({},t),duration:e};return function(t,e){return t&&(n.destPos=ie({},t)),void 0!==e&&(n.duration=e),n}},e.setAnimationManager=function(t){this.am=t},e.destroy=function(){this.axes.off()},t}(),xe=function(){function t(t){this.options=t,this._prevented=!1}var e=t.prototype;return e.isInterrupting=function(){return this.options.interruptable||this._prevented},e.isInterrupted=function(){return!this.options.interruptable&&this._prevented},e.setInterrupt=function(t){!this.options.interruptable&&(this._prevented=t)},t}(),ye=function(){function t(t){var e=t.options,n=t.itm,i=t.em,r=t.axm,o=t.am;this.isOutside=!1,this.moveDistance=null,this.options=e,this.itm=n,this.em=i,this.axm=r,this.am=o}var e=t.prototype;return e.atOutside=function(t){var s=this;if(this.isOutside)return this.axm.map(t,function(t,e,n){var i=n.range[0]-n.bounce[0],r=n.range[1]+n.bounce[1];return r<t?r:t<i?i:t});var a=this.am.easing(1e-5)/1e-5;return this.axm.map(t,function(t,e,n){var i=n.range[0],r=n.range[1],o=n.bounce;return t<i?i-s.am.easing((i-t)/(o[0]*a))*o[0]:r<t?r+s.am.easing((t-r)/(o[1]*a))*o[1]:t})},e.get=function(t){return this.axm.get(t.axes)},e.hold=function(t,e){if(!this.itm.isInterrupted()&&t.axes.length){var n={input:t,event:e};this.itm.setInterrupt(!0),this.am.grab(t.axes,n),!this.moveDistance&&this.em.triggerHold(this.axm.get(),n),this.isOutside=this.axm.isOutside(t.axes),this.moveDistance=this.axm.get(t.axes)}},e.change=function(t,e,n){if(this.itm.isInterrupting()&&!this.axm.every(n,function(t){return 0===t})){var i,r=this.axm.get(t.axes);i=this.axm.map(this.moveDistance||r,function(t,e){return t+(n[e]||0)}),this.moveDistance&&(this.moveDistance=i),i=this.axm.map(i,function(t,e,n){return ae(t,n.range,n.circular)}),this.isOutside&&this.axm.every(r,function(t,e,n){return!oe(t,n.range)})&&(this.isOutside=!1),i=this.atOutside(i),this.em.triggerChange(i,{input:t,event:e},!0)}},e.release=function(t,e,n,i){if(this.itm.isInterrupting()&&this.moveDistance){var r=this.axm.get(t.axes),o=this.axm.get(),s=this.axm.get(this.axm.map(n,function(t,e,n){return n.circular&&(n.circular[0]||n.circular[1])?r[e]+t:re(r[e]+t,n.range,n.circular,n.bounce)})),a=this.am.getDuration(s,r,i);0===a&&(s=ie({},o));var u={depaPos:o,destPos:s,duration:a,delta:this.axm.getDelta(o,s),inputEvent:e,input:t,isTrusted:!0};this.em.triggerRelease(u),this.moveDistance=null;var h=this.am.getUserControll(u),c=ue(h.destPos,o),l={input:t,event:e};c||0===h.duration?(!c&&this.em.triggerChange(h.destPos,l,!0),this.itm.setInterrupt(!1),this.axm.isOutside()?this.am.restore(l):this.em.triggerFinish(!0)):this.am.animateTo(h.destPos,h.duration,l)}},t}(),Ee=function(){if("undefined"==typeof document)return"";for(var t=(document.head||document.getElementsByTagName("head")[0]).style,e=["transform","webkitTransform","msTransform","mozTransform"],n=0,i=e.length;n<i;n++)if(e[n]in t)return e[n];return""}(),Te=function(r){function t(t,e,n){void 0===t&&(t={});var i=r.call(this)||this;return i.axis=t,i._inputs=[],i.options=ie({easing:function(t){return 1-Math.pow(1-t,3)},interruptable:!0,maximumDuration:1/0,minimumDuration:0,deceleration:6e-4},e),i.itm=new xe(i.options),i.axm=new ce(i.axis,i.options),i.em=new Pe(i),i.am=new me(i),i.io=new ye(i),i.em.setAnimationManager(i.am),n&&i.em.triggerChange(n),i}!function(t,e){function n(){this.constructor=t}ne(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}(t,r);var e=t.prototype;return e.connect=function(t,e){var n;if(n="string"==typeof t?t.split(" "):t.concat(),~this._inputs.indexOf(e)&&this.disconnect(e),"hammer"in e){var i=this._inputs.filter(function(t){return t.hammer&&t.element===e.element});i.length&&(e.hammer=i[0].hammer)}return e.mapAxes(n),e.connect(this.io),this._inputs.push(e),this},e.disconnect=function(t){if(t){var e=this._inputs.indexOf(t);0<=e&&(this._inputs[e].disconnect(),this._inputs.splice(e,1))}else this._inputs.forEach(function(t){return t.disconnect()}),this._inputs=[];return this},e.get=function(t){return this.axm.get(t)},e.setTo=function(t,e){return void 0===e&&(e=0),this.am.setTo(t,e),this},e.setBy=function(t,e){return void 0===e&&(e=0),this.am.setBy(t,e),this},e.isBounceArea=function(t){return this.axm.isOutside(t)},e.destroy=function(){this.disconnect(),this.em.destroy()},t.VERSION="2.5.9",t.TRANSFORM=Ee,t.DIRECTION_NONE=et,t.DIRECTION_LEFT=nt,t.DIRECTION_RIGHT=it,t.DIRECTION_UP=rt,t.DIRECTION_DOWN=ot,t.DIRECTION_HORIZONTAL=st,t.DIRECTION_VERTICAL=at,t.DIRECTION_ALL=ut,t}(t),be="PointerEvent"in he||"MSPointerEvent"in he,we="ontouchstart"in he,Ae="_EGJS_AXES_INPUTTYPE_";function Ce(i,t){return t.reduce(function(t,e,n){return i[n]&&(t[i[n]]=e),t},{})}function Ie(t,e,n){return n?!!(e===ut||e&t&&n&t):!!(e&t)}var Se=function(){function t(t,e){if(this.axes=[],this.hammer=null,this.element=null,this.panRecognizer=null,void 0===Kt)throw new Error("The Hammerjs must be loaded before eg.Axes.PanInput.\nhttp://hammerjs.github.io/");this.element=function e(t,n){var i;if(void 0===n&&(n=!1),"string"==typeof t){if(t.match(/^<([a-z]+)\s*([^>]*)>/)){var r=document.createElement("div");r.innerHTML=t,i=le(r.childNodes)}else i=le(document.querySelectorAll(t));n||(i=1<=i.length?i[0]:void 0)}else t===he?i=t:!t.nodeName||1!==t.nodeType&&9!==t.nodeType?"jQuery"in he&&t instanceof jQuery||t.constructor.prototype.jquery?i=n?t.toArray():t.get(0):Array.isArray(t)&&(i=t.map(function(t){return e(t)}),n||(i=1<=i.length?i[0]:void 0)):i=t;return i}(t),this.options=ie({inputType:["touch","mouse","pointer"],scale:[1,1],thresholdAngle:45,threshold:0,hammerManagerOptions:{cssProps:{userSelect:"none",touchSelect:"none",touchCallout:"none",userDrag:"none"}}},e),this.onHammerInput=this.onHammerInput.bind(this),this.onPanmove=this.onPanmove.bind(this),this.onPanend=this.onPanend.bind(this)}var e=t.prototype;return e.mapAxes=function(t){var e=!!t[0],n=!!t[1];this._direction=e&&n?ut:e?st:n?at:et,this.axes=t},e.connect=function(t){var e={direction:this._direction,threshold:this.options.threshold};if(this.hammer)this.removeRecognizer(),this.dettachEvent();else{var n=this.element[Ae];n||(n=String(Math.round(Math.random()*(new Date).getTime())));var i=function(t){void 0===t&&(t=[]);var e=!1,n=!1,i=!1;return t.forEach(function(t){switch(t){case"mouse":n=!0;break;case"touch":e=we;break;case"pointer":i=be}}),i?Nt:e&&n?Bt:e?Xt:n?Yt:null}(this.options.inputType);if(!i)throw new Error("Wrong inputType parameter!");this.hammer=function(t,e){try{return new Kt(t,ie({},e))}catch(t){return null}}(this.element,ie({inputClass:i},this.options.hammerManagerOptions)),this.element[Ae]=n}return this.panRecognizer=new ee(e),this.hammer.add(this.panRecognizer),this.attachEvent(t),this},e.disconnect=function(){return this.removeRecognizer(),this.hammer&&this.dettachEvent(),this._direction=et,this},e.destroy=function(){this.disconnect(),this.hammer&&0===this.hammer.recognizers.length&&this.hammer.destroy(),delete this.element[Ae],this.element=null,this.hammer=null},e.enable=function(){return this.hammer&&(this.hammer.get("pan").options.enable=!0),this},e.disable=function(){return this.hammer&&(this.hammer.get("pan").options.enable=!1),this},e.isEnable=function(){return!(!this.hammer||!this.hammer.get("pan").options.enable)},e.removeRecognizer=function(){this.hammer&&this.panRecognizer&&(this.hammer.remove(this.panRecognizer),this.panRecognizer=null)},e.onHammerInput=function(t){this.isEnable()&&(t.isFirst?this.observer.hold(this,t):t.isFinal&&this.onPanend(t))},e.onPanmove=function(t){var e=function(t,e){if(e<0||90<e)return et;var n=Math.abs(t);return e<n&&n<180-e?at:st}(t.angle,this.options.thresholdAngle),n=this.hammer.session.prevInput;t.offsetY=n?(t.offsetX=t.deltaX-n.deltaX,t.deltaY-n.deltaY):t.offsetX=0;var i=this.getOffset([t.offsetX,t.offsetY],[Ie(st,this._direction,e),Ie(at,this._direction,e)]),r=i.some(function(t){return 0!==t});r&&(t.srcEvent.preventDefault(),t.srcEvent.stopPropagation()),(t.preventSystemEvent=r)&&this.observer.change(this,t,Ce(this.axes,i))},e.onPanend=function(t){var e,n,i,r,o=this.getOffset([Math.abs(t.velocityX)*(t.deltaX<0?-1:1),Math.abs(t.velocityY)*(t.deltaY<0?-1:1)],[Ie(st,this._direction),Ie(at,this._direction)]);e=o,n=this.observer.options.deceleration,i=Math.sqrt(e[0]*e[0]+e[1]*e[1]),r=Math.abs(i/-n),o=[e[0]/2*r,e[1]/2*r],this.observer.release(this,t,Ce(this.axes,o))},e.attachEvent=function(t){this.observer=t,this.hammer.on("hammer.input",this.onHammerInput).on("panstart panmove",this.onPanmove)},e.dettachEvent=function(){this.hammer.off("hammer.input",this.onHammerInput).off("panstart panmove",this.onPanmove),this.observer=null},e.getOffset=function(t,e){var n=[0,0],i=this.options.scale;return e[0]&&(n[0]=t[0]*i[0]),e[1]&&(n[1]=t[1]*i[1]),n},t}(),ze=function(){function t(t,e,n){this.clonedPanels=[],this.viewportElement=t,this.cameraElement=e,this.state={index:n.defaultIndex,size:0,position:0,hangerPosition:0,scrollArea:{prev:0,next:0},translate:E},this.options=n,this.build()}var e=t.prototype;return e.moveTo=function(t,e,n){void 0===n&&(n=this.options.duration);var i=this.state,r=t.anchorPosition-i.hangerPosition;r=this.canSetBoundMode()?p(r,i.scrollArea.prev,i.scrollArea.next):r,i.index=t.index,e&&e.setTo?e.setTo({flick:r},n):this.axes.setTo({flick:r},n)},e.moveCamera=function(t){var e=this.state,n=e.translate.name,i=(this.options.horizontal?[-t,0]:[0,-t]).map(function(t){return Math.round(t)+"px"}).join(", ");this.cameraElement.style[n]=e.translate.has3d?"translate3d("+i+", 0px)":"translate("+i+")",e.position=t},e.resize=function(){this.updateSize(),this.updateOriginalPanelPositions(),this.updateAdaptiveSize(),this.updateScrollArea(),this.options.circular&&(this.clonePanels(),this.relocatePanels()),this.chainPanels(),this.updateCameraPosition()},e.findNearestPanel=function(){var t=this.state,e=this.panels,n=this.clonedPanels,i=t.scrollArea,r=t.position+t.hangerPosition;if(this.isOutOfBound())return t.position<i.prev?e[0]:e[e.length-1];for(var o,s=1/0,a=0,u=e.concat(n);a<u.length;a++){var h=u[a],c=h.getPosition(),l=c+h.getSize(),p=v(r,c,l)?0:Math.min(Math.abs(c-r),Math.abs(l-r));if(s<p)break;s=p,o=h}return o},e.findPanelOf=function(t){for(var e=0,n=this.panels.concat(this.clonedPanels);e<n.length;e++){var i=n[e];if(i.getElement().contains(t))return i}},e.findNearestIdenticalPanel=function(t){var e=this.state,i=t,r=1/0,o=e.position+e.hangerPosition;return t.getIdenticalPanels().forEach(function(t){var e=t.getAnchorPosition(),n=Math.abs(e-o);n<r&&(i=t,r=n)}),i},e.findShortestPositionToPanel=function(t){var e=this.state,n=this.options,i=t.getAnchorPosition(),r=Math.abs(e.position+e.hangerPosition-i),o=e.scrollArea.next-e.scrollArea.prev;if(n.circular)return r<=o-r?i-e.hangerPosition:i>e.position+e.hangerPosition?i-e.hangerPosition-o:i-e.hangerPosition+o;var s=i-e.hangerPosition;return this.canSetBoundMode()?p(s,e.scrollArea.prev,e.scrollArea.next):s},e.enable=function(){this.panInput.enable()},e.disable=function(){this.panInput.disable()},e.updateAdaptiveSize=function(){var t,e=this.options,i=e.horizontal;if(e.adaptive){var n=this.getCurrentPanel().getBbox();t=i?n.height:n.width}else{t=this.panels.reduce(function(t,e){var n=e.getBbox();return Math.max(t,i?n.height:n.width)},0)}var r=this.viewportElement.style;i?(r.height=t+"px",r.minHeight="100%",r.width="100%"):(r.width=t+"px",r.minWidth="100%",r.height="100%")},e.destroy=function(){var t=this.viewportElement,e=t.parentElement;for(var n in e.removeChild(t),this.axes.destroy(),this.panInput.destroy(),this.panels.forEach(function(t){e.appendChild(t.getElement()),t.destroy()}),this)this[n]=null},e.restore=function(t){var e=t.panels,n=this.cameraElement;n.innerHTML=e.map(function(t){return t.html}).join(""),this.viewportElement.appendChild(n),this.state.index=t.index,this.moveCamera(t.position),this.panels=[],this.clonedPanels=[],this.createPanels(),this.resize()},e.getPanelCount=function(){return this.panels.length},e.getPanel=function(t){return v(t,0,this.panels.length-1)?this.panels[t]:null},e.getCurrentPanel=function(){return this.panels[this.state.index]},e.getIndex=function(){return this.state.index},e.getPrevIndex=function(){var t=this.state.index-1;return t<0&&(t=this.options.circular?this.panels.length-1:-1),t},e.getNextIndex=function(){var t=this.state.index+1;return t>=this.panels.length&&(t=this.options.circular?0:-1),t},e.getSize=function(){return this.state.size},e.getScrollArea=function(){return this.state.scrollArea},e.getScrollAreaSize=function(){var t=this.state.scrollArea;return t.next-t.prev},e.getHangerPosition=function(){return this.state.hangerPosition},e.getCameraPosition=function(){return this.state.position},e.getAllPanels=function(t){var e=this.panels;return t?e.concat(this.clonedPanels):e},e.connectAxesHandler=function(t){var e=this.axes;this.axesHandlers=t,e.on(t),this.resume()},e.pause=function(){this.axes.off()},e.resume=function(){this.axes.on(this.axesHandlers)},e.build=function(){this.applyCSSValue(),this.setAxesInstance(),this.createPanels(),this.resize(),this.moveToDefaultPanel()},e.applyCSSValue=function(){var t=this.options,e=this.viewportElement,n=this.cameraElement,i=t.classPrefix;e.className=i+"-viewport",n.className=i+"-camera",o(e,s),o(n,h),t.zIndex&&(e.style.zIndex=""+t.zIndex),t.overflow&&(e.style.overflow="visible")},e.setAxesInstance=function(){var t=this.state,e=this.options,n=t.scrollArea,i=e.horizontal;this.axes=new Te({flick:{range:[n.prev,n.next],circular:e.circular,bounce:[0,0]}},{easing:e.panelEffect,deceleration:e.deceleration,interruptable:!0}),this.panInput=this.makeNewPanInput(),this.axes.connect(i?["flick",""]:["","flick"],this.panInput)},e.createPanels=function(){var t,e=this.state,n=this.options,i=this.cameraElement.children;if(!i||!i.length)throw new Error("There're no panel elements.");this.panels=(t=i,[].slice.call(t)).map(function(t,e){return new T(t,e,{horizontal:n.horizontal,classPrefix:n.classPrefix,anchorExpression:n.anchor})}),e.index=p(e.index,0,this.panels.length-1)},e.clonePanels=function(){var i=this,t=this.state,e=this.panels,r=this.clonedPanels,n=t.size,o=e[e.length-1],s=o.getPosition()+o.getSize()+this.options.gap,a=n+e[0].getRelativeAnchorPosition(),u=r[r.length-1],h=Math.ceil(a/s),c=u?u.getCloneIndex()+1:0;if(c<h)for(var l=function(n){e.forEach(function(t){var e=t.clone(n);i.appendPanelElement(e.getElement()),r.push(e)})},p=c;p<h;p++)l(p);else h<c&&(e.forEach(function(t){t.removeClonedPanelsAfter(h)}),this.clonedPanels.splice(h*e.length))},e.relocatePanels=function(){var t=this.state,e=this.options,n=this.panels,i=this.clonedPanels,r=t.scrollArea,o=r.next+t.size,s=(r.prev,n[0]),a=n[n.length-1];if(s){for(var u=a.getPosition()+a.getSize()+e.gap,h=0,c=i;h<c.length;h++){var l=(g=c[h]).getIdenticalPanels()[0],p=u*(g.getCloneIndex()+1)+l.getPosition();g.setPosition(p)}for(var f=s.getPosition(),v=0,d=i.concat().reverse();v<d.length;v++){var g,m=(g=d[v]).getPosition(),P=f-g.getSize()-e.gap;if(m<=o)break;g.setPosition(P),f=P}}},e.chainPanels=function(){var r=this.panels.concat(this.clonedPanels);if(r.forEach(function(t,e){var n=0<e?r[e-1]:null,i=e<r.length-1?r[e+1]:null;t.setPrevPanel(n),t.setNextPanel(i)}),this.options.circular){var t=r[0],e=r[r.length-1];t.setPrevPanel(e),e.setNextPanel(t)}},e.moveToDefaultPanel=function(){var t=this.state,e=p(this.options.defaultIndex,0,this.panels.length-1),n=this.panels[e].getAnchorPosition()-t.hangerPosition;n=this.canSetBoundMode()?p(n,t.scrollArea.prev,t.scrollArea.next):n,t.index=e,this.moveCamera(n),this.axes.setTo({flick:n},0)},e.isOutOfBound=function(){var t=this.state,e=t.scrollArea;return!this.options.circular&&(t.position<e.prev||t.position>e.next)},e.canSetBoundMode=function(){var t=this.state,e=this.options,n=this.panels,i=n[n.length-1],r=i.getPosition()+i.getSize();return e.bound&&!e.circular&&r>=t.size},e.updateSize=function(){var t=this.state,e=this.options,n=this.viewportElement;e.horizontal||(n.style.width="",n.style.minWidth="");var i=n.getBoundingClientRect();t.size=e.horizontal?i.width:i.height,t.hangerPosition=d(e.hanger,t.size)},e.updateOriginalPanelPositions=function(){var i=this.options.gap,t=this.panels,r=0;t.forEach(function(t){t.resize();var e=r,n=t.getSize();t.setPosition(e),r+=n+i})},e.updateScrollArea=function(){var t=this.state,e=this.panels,n=this.options,i=this.axes,r=e[0],o=e[e.length-1],s=t.hangerPosition;if(this.canSetBoundMode())t.scrollArea={prev:r.getPosition(),next:o.getPosition()+o.getSize()-t.size};else if(n.circular){var a=o.getPosition()+o.getSize()+n.gap;t.scrollArea={prev:r.getAnchorPosition()-s,next:a+r.getRelativeAnchorPosition()-s}}else t.scrollArea={prev:r.getAnchorPosition()-s,next:o.getAnchorPosition()-s};var u,h=t.size,c=n.bounce,l=c;if((u=c)&&u.constructor===Array)l=c.map(function(t){return d(t,h,g.bounce)});else{var p=d(c,h,g.bounce);l=[p,p]}i.axis.flick.range=[t.scrollArea.prev,t.scrollArea.next],i.axis.flick.bounce=l},e.updateCameraPosition=function(){var t=this.state,e=this.panels,n=this.axes,i=e[t.index].getAnchorPosition()-t.hangerPosition;this.canSetBoundMode()&&(i=p(i,t.scrollArea.prev,t.scrollArea.next)),this.moveCamera(i),this.pause(),n.setTo({flick:i},0),this.resume()},e.makeNewPanInput=function(){var t=this.options;return new Se(this.viewportElement,{inputType:t.inputType,thresholdAngle:t.thresholdAngle,scale:t.horizontal?[-1,0]:[0,-1]})},e.appendPanelElement=function(t){this.cameraElement.appendChild(t)},t}(),Oe=function(){function t(){this.delta=0,this.direction=null,this.targetPanel=null}var e=t.prototype;return e.onEnter=function(t){this.delta=t.delta,this.direction=t.direction,this.targetPanel=t.targetPanel},e.onExit=function(t){},e.onHold=function(t,e){},e.onChange=function(t,e){},e.onRelease=function(t,e){},e.onAnimationEnd=function(t,e){},e.onFinish=function(t,e){},t}(),Me=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.type=l,t.holding=!1,t.playing=!1,t}r(t,e);var n=t.prototype;return n.onEnter=function(){this.direction=null,this.targetPanel=null,this.delta=0},n.onHold=function(t,e){var n=e.triggerEvent,i=e.transitTo;n(O.HOLD_START,t,!0).onSuccess(function(){i(P)}).onStopped(function(){i(_)})},n.onChange=function(t,e){var n=e.triggerEvent,i=e.transitTo;n(O.MOVE_START,t,!1).onSuccess(function(){i(M).onChange(t,e)}).onStopped(function(){i(_)})},t}(Oe),_e=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.type=P,t.holding=!0,t.playing=!0,t.releaseEvent=null,t}r(t,e);var n=t.prototype;return n.onChange=function(t,e){var n=e.flicking,i=e.triggerEvent,r=e.transitTo,o=n.options.horizontal?t.inputEvent.offsetX:t.inputEvent.offsetY;this.direction=o<0?y.NEXT:y.PREV,i(O.MOVE_START,t,!0).onSuccess(function(){r(x).onChange(t,e)}).onStopped(function(){r(_)})},n.onRelease=function(t,e){var n=e.viewport,i=e.triggerEvent,r=e.transitTo;if(i(O.HOLD_END,t,!0),0!==t.delta.flick)return t.setTo({flick:n.getCameraPosition()},0),void r(l);this.releaseEvent=t},n.onFinish=function(t,e){var n=e.viewport,i=e.triggerEvent,r=e.transitTo,o=e.castToReadonlyPanel;if(r(l),this.releaseEvent){var s=this.releaseEvent.inputEvent.srcEvent.target,a=n.findPanelOf(s),u=n.getCameraPosition();if(a){var h=a.getPosition();i(O.SELECT,null,!0,{direction:u<h?y.NEXT:h<u?y.PREV:null,selectedIndex:a.getIndex(),selectedPanel:o(a)})}}},t}(Oe),Re=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.type=x,t.holding=!0,t.playing=!0,t}r(t,e);var n=t.prototype;return n.onEnter=function(t){e.prototype.onEnter.call(this,t),this.delta=0},n.onChange=function(t,e){var n=e.moveCamera,i=e.transitTo;t.delta.flick&&n(t).onStopped(function(){i(_)})},n.onRelease=function(t,e){var n=e.flicking,i=e.viewport,r=e.triggerEvent,o=e.moveToPanel,s=e.castToReadonlyPanel,a=e.transitTo,u=e.stopCamera,h=this.delta,c=n.options,l=0<h,p=Math.abs(h),f=t.inputEvent.deltaX?Math.abs(180*Math.atan(t.inputEvent.deltaY/t.inputEvent.deltaX)/Math.PI):90,v=p>=c.threshold&&(c.horizontal?f<=c.thresholdAngle:f>c.thresholdAngle);if(r(O.HOLD_END,t,!0),!v&&this.targetPanel)return i.moveTo(this.targetPanel,t),void a(M);var d=i.getCurrentPanel(),g=i.getCameraPosition()+i.getHangerPosition(),m=c.gap/2,P=l?d.getSize()-d.getRelativeAnchorPosition()+m:d.getRelativeAnchorPosition()+m;P=Math.max(P,c.threshold);var x,y=Math.abs(t.delta.flick),E=c.snap,T=c.duration,b=s(d);if(v){var w=0;if(P<=y){for(var A=b.position;Math.abs(b.position-A)<y&&w<E;){var C=l?b.next():b.prev();if(!C)break;b=C,++w}1<w&&(x=Math.min(T*w,Math.max(t.duration,T)))}if(w<=1)if(p<=P){var I=l?d.getNextPanel():d.getPrevPanel();if(c.circular){var S=d.getIdenticalPanels()[1];(z=Math.abs(d.getAnchorPosition()-g)>Math.abs(S.getAnchorPosition()-g))&&(I=l?S.getNextPanel():S.getPrevPanel())}b=s(null!=I?I:d)}else b=s(i.findNearestPanel())}else if(c.circular){S=d.getIdenticalPanels()[1];var z=Math.abs(d.getAnchorPosition()-g)>Math.abs(S.getAnchorPosition()-g);!l&&z&&(b=s(S))}o(b,!v||!c.circular&&b.position===d.getPosition()?O.RESTORE:O.CHANGE,t,x).onSuccess(function(){a(M)}).onStopped(function(){a(_),u(t)})},t}(Oe),Ne=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.type=M,t.holding=!1,t.playing=!0,t}r(t,e);var n=t.prototype;return n.onHold=function(t,e){var n=e.triggerEvent,i=e.transitTo;n(O.HOLD_START,t,!0).onSuccess(function(){i(x)}).onStopped(function(){i(_)})},n.onChange=function(t,e){var n=e.moveCamera,i=e.transitTo;t.delta.flick&&n(t).onStopped(function(){i(_)})},n.onFinish=function(t,e){var n=e.flicking,i=e.viewport,r=e.triggerEvent,o=e.transitTo,s=t&&t.isTrusted;r(O.MOVE_END,t,s),n.options.adaptive&&i.updateAdaptiveSize(),o(l)},t}(Oe),De=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.type=_,t.holding=!1,t.playing=!0,t}r(t,e);var n=t.prototype;return n.onAnimationEnd=function(t,e){(0,e.transitTo)(l)},n.onRelease=function(t,e){var n=e.transitTo;0===t.delta.flick&&n(l)},t}(Oe),He=function(){function t(){var i=this;this.state=new Me,this.transitTo=function(t){var e=i.state;if(e.type!==t){var n=void 0;switch(t){case l:n=new Me;break;case P:n=new _e;break;case x:n=new Re;break;case M:n=new Ne;break;case _:n=new De}e.onExit(n),n.onEnter(e),i.state=n}return i.state}}var e=t.prototype;return e.fire=function(t,e,n){var i=this.state;switch(t){case m.HOLD:i.onHold(e,n);break;case m.CHANGE:i.onChange(e,n);break;case m.RELEASE:i.onRelease(e,n);break;case m.ANIMATION_END:i.onAnimationEnd(e,n);break;case m.FINISH:i.onFinish(e,n)}},e.getState=function(){return this.state},t}();return function(p){function t(t,e){void 0===e&&(e={});var n,b=p.call(this)||this;if(b.plugins=[],b.triggerEvent=function(t,e,n,i){void 0===i&&(i={});var r=b.viewport,o=b.stateMachine.getState(),s=r.getCurrentPanel(),a=r.getScrollArea(),u=a.prev,h=a.next,c=w(r.getCameraPosition(),[u,u,h]);b.options.circular&&(c%=1);var l=!p.prototype.trigger.call(b,t,f({type:t,index:s.getIndex(),panel:b.castToReadonlyPanel(s),direction:o.direction,holding:o.holding,progress:c,axesEvent:e,isTrusted:n},i));return{onSuccess:function(t){return l||t(),this},onStopped:function(t){return l&&t(),this}}},b.moveCamera=function(t){var e=b.viewport,n=b.stateMachine.getState(),i=b.options,r=t.pos.flick;if(t.isTrusted&&n.holding){var o=(i.horizontal?t.inputEvent.offsetX:t.inputEvent.offsetY)<0,s=e.getCameraPosition(),a=r-s,u=o===r<s;if(i.circular&&u){var h=e.getScrollAreaSize();a=-Math.sign(a)*(h-Math.abs(a))}var c=0===a?n.direction:0<a?y.NEXT:y.PREV;n.delta+=a,n.direction=c}var l=e.getCameraPosition();return e.moveCamera(r),b.triggerEvent(O.MOVE,t,t.isTrusted).onStopped(function(){e.moveCamera(l)})},b.stopCamera=function(t){var e=b.viewport;t&&t.setTo&&t.setTo({flick:e.getCameraPosition()},0),b.stateMachine.transitTo(l)},b.moveToPanel=function(e,t,n,i){void 0===i&&(i=b.options.duration);var r,o=b.viewport,s=b.stateMachine,a=o.getCurrentPanel(),u=e.anchorPosition-o.getHangerPosition(),h=o.getCameraPosition(),c=null!==n,l=h<u?y.NEXT:y.PREV;return(r=t===O.CHANGE?b.triggerEvent(O.CHANGE,n,c,{index:e.index,panel:e,direction:l,prevIndex:a.getIndex(),prevPanel:b.castToReadonlyPanel(a)}):b.triggerEvent(O.RESTORE,n,c)).onSuccess(function(){var t=s.getState();t.targetPanel=e,t.direction=l,o.moveTo(e,n,i)}),i<=0&&s.fire(m.FINISH,null,b.eventContext),r},b.castToReadonlyPanel=function(i,r){void 0===r&&(r=i.getPosition());var o=b,t=b.options.circular,s=b.viewport,e=i.getSize(),n=i.getRelativeAnchorPosition(),a=s.getCameraPosition(),u=s.getHangerPosition(),h=a+u,c=b.viewport.findNearestPanel(),l=c.getPosition()>=h||!c.getNextPanel(),p=(l?c.getPrevPanel():c)||c,f=(l?c:c.getNextPanel())||c,v=s.getScrollAreaSize(),d=p.getAnchorPosition(),g=f.getAnchorPosition();g<d&&(d<h?g+=v:d-=v);var m=[d,d,g],P=[-e,u-n,s.getSize()],x=b.getPanelCount(),y=p.getCloneIndex(),E=(t?Math.floor(r/v)*x:0)+i.getIndex()-w(h,m)-(p.getIndex()+(y+1)*x),T=w(r-a,P);return{element:i.getElement(),index:i.getIndex(),position:r,progress:E,outsetProgress:T,anchorPosition:r+i.getRelativeAnchorPosition(),size:i.getSize(),focus:function(t){s.getCameraPosition()+s.getHangerPosition()!==i.getAnchorPosition()&&o.moveToPanel(this,O.CHANGE,null,t)},update:function(e){i.getIdenticalPanels().forEach(function(t){return e(t.getElement())})},prev:function(){var t=i.getPrevPanel();if(null==t)return null;for(var e=s.getScrollAreaSize(),n=t.getPosition();r<n;)n-=e;return o.castToReadonlyPanel(t,n)},next:function(){var t=i.getNextPanel();if(null==t)return null;for(var e=s.getScrollAreaSize(),n=t.getPosition();n<r;)n+=e;return o.castToReadonlyPanel(t,n)}}},"string"==typeof t){if(!(n=document.querySelector(t)))throw new Error("Base element doesn't exist.")}else{if(!t.nodeName||1!==t.nodeType)throw new Error("Element should be provided in string or HTMLElement.");n=t}return b.wrapper=n,b.build(e),b}r(t,p);var e=t.prototype;return e.prev=function(t){return this.moveTo(this.viewport.getPrevIndex(),t)},e.next=function(t){return this.moveTo(this.viewport.getNextIndex(),t)},e.moveTo=function(t,e){var n=this.viewport,i=n.getPanel(t);if(i){var r=this.stateMachine.getState(),o=n.getIndex();if(!(r.type===l&&i.getIndex()!==o))return this;var s=this.castToReadonlyPanel(n.findNearestIdenticalPanel(i));this.moveToPanel(s,O.CHANGE,null,e)}return this},e.getIndex=function(){return this.viewport.getIndex()},e.getPrevIndex=function(){return this.viewport.getPrevIndex()},e.getNextIndex=function(){return this.viewport.getNextIndex()},e.getCurrentPanel=function(){return this.castToReadonlyPanel(this.viewport.getCurrentPanel())},e.getPanel=function(t){var e=this.viewport.getPanel(t);return e?this.castToReadonlyPanel(e):null},e.getAllPanels=function(t){var e=this;return this.viewport.getAllPanels(t).map(function(t){return e.castToReadonlyPanel(t)})},e.getVisiblePanels=function(){return this.getAllPanels(!0).filter(function(t){var e=t.outsetProgress;return-1<e&&e<1})},e.getPanelCount=function(){return this.viewport.getPanelCount()},e.isPlaying=function(){return this.stateMachine.getState().playing},e.enableInput=function(){return this.viewport.enable(),this},e.disableInput=function(){return this.viewport.disable(),this},e.getStatus=function(){var t=this.viewport.getAllPanels().map(function(t){return{html:t.getElement().outerHTML,index:t.getIndex()}});return{index:this.getIndex(),panels:t,position:this.viewport.getCameraPosition()}},e.setStatus=function(t){this.viewport.restore(t)},e.addPlugins=function(t){var e=this,n=[].concat(t);return n.forEach(function(t){t.init(e)}),this.plugins=this.plugins.concat(n),this},e.removePlugins=function(t){var n=this,i=this.plugins;return[].concat(t).forEach(function(t){var e=i.indexOf(t);-1<e&&i.splice(e,1),t.destroy(n)}),this},e.destroy=function(){var e=this;for(var t in this.off(),this.viewport.destroy(),this.plugins.forEach(function(t){t.destroy(e)}),this)this[t]=null},e.resize=function(){return this.viewport.resize(),this},e.build=function(t){this.setInitialState(t),this.initViewport(),this.listenInput(),this.listenResize()},e.setInitialState=function(t){this.options=f({},g,t),this.stateMachine=new He},e.initViewport=function(){var t=this.wrapper,e=this.options,n=t.children;if(!n||!n.length)throw new Error("Given base element doesn't have proper DOM structure to be initialized.");for(var i=document.createElement("div"),r=t.firstChild;r;)i.appendChild(r),r=t.firstChild;var o=document.createElement("div");o.appendChild(i),t.appendChild(o),this.viewport=new ze(o,i,e)},e.listenInput=function(){var n=this,i=n.stateMachine;n.eventContext={flicking:n,viewport:n.viewport,transitTo:i.transitTo,triggerEvent:n.triggerEvent,moveCamera:n.moveCamera,stopCamera:n.stopCamera,moveToPanel:n.moveToPanel,castToReadonlyPanel:n.castToReadonlyPanel};var r={},t=function(t){var e=m[t];r[e]=function(t){return i.fire(e,t,n.eventContext)}};for(var e in m)t(e);n.viewport.connectAxesHandler(r)},e.listenResize=function(){var t=this;this.options.autoResize&&window.addEventListener("resize",function(){t.resize()})},t.VERSION="3.0.0-beta2",t.DIRECTION=y,t.EVENTS=O,t}(t)});
 //# sourceMappingURL=flicking.pkgd.min.js.map

package.json

 {
-  "name": "@egjs/flicking",
-  "version": "3.0.0-beta",
-  "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.",
-  "main": "dist/flicking.js",
-  "module": "dist/flicking.esm.js",
-  "sideEffects": false,
-  "es2015": "src/Flicking.js",
-  "types": "declaration/index.d.ts",
-  "scripts": {
-    "start": "rollup -c -w",
-    "build": "rm -rf ./dist ./declaration && rollup -c && npm run declaration && npm run printsizes",
-    "declaration": "rm -rf declaration && tsc -p tsconfig.declaration.json",
-    "printsizes": "print-sizes ./dist --exclude=\\.map",
-    "test": "karma start",
-    "test:chrome": "karma start --chrome",
-    "coverage": "karma start --coverage && print-coveralls --sort=desc",
-    "lint": "tslint -c tslint.json 'src/**/*.ts'",
-    "jsdoc": "rm -rf ./doc && jsdoc -c jsdoc.json",
-    "demo:build": "npm run build && cpx 'dist/**/*' demo/release/latest/dist --clean",
-    "demo:prebuild-version": "cpx 'dist/**/*' demo/release/$npm_package_version/dist --clean && cpx 'doc/**/*' demo/release/$npm_package_version/doc --clean",
-    "demo:prebuild-latest": "cpx 'dist/**/*' demo/release/latest/dist --clean && cpx 'doc/**/*' demo/release/latest/doc --clean",
-    "demo:origin": "npm run build && npm run jsdoc && npm run demo:prebuild-version && npm run demo:prebuild-latest && gh-pages -d demo/",
-    "demo:deploy": "npm run build && npm run jsdoc && npm run demo:prebuild-version && npm run demo:prebuild-latest && gh-pages -d demo/ --add --remote oss",
-    "demo:setup": "cpx 'node_modules/@egjs/common-demo/**/*' 'demo/' && rm demo/package.json",
-    "release": "node config/release.js",
-    "changelog": "node ./config/changelog.js",
-    "coveralls": "cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://oss.navercorp.com/egjs/egjs-flicking"
-  },
-  "author": {
-    "name": "NAVER Corp."
-  },
-  "namespace": {
-    "eg": "eg"
-  },
-  "homepage": "https://github.com/naver/egjs-flicking",
-  "bugs": {
-    "url": "https://github.com/naver/egjs-flicking/issues"
-  },
-  "license": "MIT",
-  "devDependencies": {
-    "@daybrush/jsdoc": "^0.3.6-rc4",
-    "@types/karma-chai": "^0.1.1",
-    "@types/mocha": "^5.2.5",
-    "@types/sinon": "^7.0.3",
-    "chai": "^4.2.0",
-    "chalk": "^2.4.2",
-    "coveralls": "^3.0.2",
-    "cpx": "^1.5.0",
-    "egjs-jsdoc-template": "^1.4.4",
-    "fs-extra": "^7.0.1",
-    "gh-pages": "^2.0.1",
-    "hammer-simulator": "0.0.1",
-    "husky": "^1.3.1",
-    "karma": "^3.1.4",
-    "karma-chai": "^0.1.0",
-    "karma-chrome-launcher": "^2.2.0",
-    "karma-mocha": "^1.3.0",
-    "karma-mocha-reporter": "^2.2.5",
-    "karma-sinon": "^1.0.5",
-    "karma-typescript": "^4.0.0",
-    "mocha": "^5.2.0",
-    "print-coveralls": "^1.2.2",
-    "print-sizes": "0.0.3",
-    "rollup": "^1.1.0",
-    "rollup-plugin-node-resolve": "^4.0.0",
-    "rollup-plugin-prototype-minify": "^1.0.5",
-    "rollup-plugin-replace": "^2.1.0",
-    "rollup-plugin-typescript": "^1.0.0",
-    "rollup-plugin-uglify": "^6.0.1",
-    "sinon": "^7.2.3",
-    "sync-exec": "^0.6.2",
-    "ts-mock-imports": "^1.2.2",
-    "tslint": "^5.12.1",
-    "tslint-consistent-codestyle": "^1.15.0",
-    "tslint-eslint-rules": "^5.4.0",
-    "typescript": "^2.8.4"
-  },
-  "dependencies": {
-    "@egjs/axes": "^2.5.9",
-    "@egjs/component": "^2.1.2"
-  },
-  "husky": {
-    "hooks": {
-      "commit-msg": "node config/validate-commit-msg.js",
-      "pre-push": "npm run lint"
-    }
-  }
+	"name": "@egjs/flicking",
+	"version": "3.0.0-beta2",
+	"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.",
+	"main": "dist/flicking.js",
+	"module": "dist/flicking.esm.js",
+	"sideEffects": false,
+	"es2015": "src/Flicking.js",
+	"types": "declaration/index.d.ts",
+	"scripts": {
+		"start": "rollup -c -w",
+		"build": "rm -rf ./dist ./declaration && rollup -c && npm run declaration && npm run printsizes",
+		"declaration": "rm -rf declaration && tsc -p tsconfig.declaration.json",
+		"printsizes": "print-sizes ./dist --exclude=\\.map",
+		"test": "karma start",
+		"test:chrome": "karma start --chrome",
+		"coverage": "karma start --coverage && print-coveralls --sort=desc",
+		"lint": "tslint -c tslint.json 'src/**/*.ts'",
+		"jsdoc": "rm -rf ./doc && jsdoc -c jsdoc.json",
+		"demo:build": "npm run build && cpx 'dist/**/*' demo/release/latest/dist --clean",
+		"demo:prebuild-version": "cpx 'dist/**/*' demo/release/$npm_package_version/dist --clean && cpx 'doc/**/*' demo/release/$npm_package_version/doc --clean",
+		"demo:prebuild-latest": "cpx 'dist/**/*' demo/release/latest/dist --clean && cpx 'doc/**/*' demo/release/latest/doc --clean",
+		"demo:origin": "npm run build && npm run jsdoc && npm run demo:prebuild-version && npm run demo:prebuild-latest && gh-pages -d demo/",
+		"demo:deploy": "npm run build && npm run jsdoc && npm run demo:prebuild-version && npm run demo:prebuild-latest && gh-pages -d demo/ --add --remote oss",
+		"demo:setup": "cpx 'node_modules/@egjs/common-demo/**/*' 'demo/' && rm demo/package.json",
+		"release": "release-helper oss",
+		"changelog": "node ./config/changelog.js",
+		"coveralls": "cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js"
+	},
+	"repository": {
+		"type": "git",
+		"url": "https://oss.navercorp.com/egjs/egjs-flicking"
+	},
+	"author": {
+		"name": "NAVER Corp."
+	},
+	"namespace": {
+		"eg": "eg"
+	},
+	"homepage": "https://github.com/naver/egjs-flicking",
+	"bugs": {
+		"url": "https://github.com/naver/egjs-flicking/issues"
+	},
+	"license": "MIT",
+	"devDependencies": {
+		"@daybrush/jsdoc": "^0.3.7-rc3",
+		"@egjs/release-helper": "0.0.3",
+		"@types/karma-chai": "^0.1.1",
+		"@types/mocha": "^5.2.5",
+		"@types/sinon": "^7.0.3",
+		"chai": "^4.2.0",
+		"chalk": "^2.4.2",
+		"coveralls": "^3.0.2",
+		"cpx": "^1.5.0",
+		"egjs-jsdoc-template": "^1.4.4",
+		"fs-extra": "^7.0.1",
+		"gh-pages": "^2.0.1",
+		"hammer-simulator": "0.0.1",
+		"husky": "^1.3.1",
+		"karma": "^3.1.4",
+		"karma-chai": "^0.1.0",
+		"karma-chrome-launcher": "^2.2.0",
+		"karma-mocha": "^1.3.0",
+		"karma-mocha-reporter": "^2.2.5",
+		"karma-sinon": "^1.0.5",
+		"karma-typescript": "^4.0.0",
+		"karma-viewport": "^1.0.4",
+		"mocha": "^5.2.0",
+		"print-coveralls": "^1.2.2",
+		"print-sizes": "0.0.3",
+		"rollup": "^1.1.0",
+		"rollup-plugin-node-resolve": "^4.0.0",
+		"rollup-plugin-prototype-minify": "^1.0.5",
+		"rollup-plugin-replace": "^2.1.0",
+		"rollup-plugin-typescript": "^1.0.0",
+		"rollup-plugin-uglify": "^6.0.1",
+		"sinon": "^7.2.3",
+		"sync-exec": "^0.6.2",
+		"ts-mock-imports": "^1.2.2",
+		"tslint": "^5.12.1",
+		"tslint-consistent-codestyle": "^1.15.0",
+		"tslint-eslint-rules": "^5.4.0",
+		"typescript": "^2.8.4"
+	},
+	"dependencies": {
+		"@egjs/axes": "^2.5.9",
+		"@egjs/component": "^2.1.2"
+	},
+	"husky": {
+		"hooks": {
+			"commit-msg": "node config/validate-commit-msg.js",
+			"pre-push": "npm run lint"
+		}
+	}
 }

src/components/Panel.ts

@@ -1,5 +0,4 @@
-import { OriginalStyle, FlickingPanel, ChangeEvent } from "../types";
-import { DEFAULT_PANEL_CSS, EVENTS, DIRECTION } from "../consts";
-import { addClass, applyCSS, parseArithmeticExpression, merge } from "../utils";
-import Viewport from "./Viewport";
+import { OriginalStyle } from "../types";
+import { DEFAULT_PANEL_CSS } from "../consts";
+import { addClass, applyCSS, parseArithmeticExpression } from "../utils";
 
@@ -10,3 +9,2 @@ class Panel {
 
-  private viewport: Viewport;
   private element: HTMLElement;
@@ -21,2 +19,5 @@ private state: {
     isClone: boolean;
+    // Index of cloned panel, zero-based integer(original: -1, cloned: [0, 1, 2, ...])
+    // if cloneIndex is 0, that means it's first cloned panel of original panel
+    cloneIndex: number;
     originalStyle: OriginalStyle;
@@ -31,3 +32,2 @@ clonedPanels: Panel[];
     index: number,
-    viewport: Viewport,
     options: {
@@ -40,3 +40,2 @@ horizontal: boolean,
     this.element = element;
-    this.viewport = viewport;
 
@@ -52,2 +51,3 @@ this.state = {
       isClone: false,
+      cloneIndex: -1,
       originalStyle: {
@@ -69,14 +69,2 @@ className: element.getAttribute("class") || null,
 
-  public update(updateFunction: (element: HTMLElement) => any): void {
-    const state = this.state;
-    // Call original's update function if current panel is cloned one
-    if (state.isClone) {
-      this.original!.update(updateFunction);
-      return;
-    }
-
-    // Call update function for all elements including cloned ones
-    [this.element, ...state.clonedPanels.map(panel => panel.element)].forEach(updateFunction);
-  }
-
   public resize(): void {
@@ -93,2 +81,6 @@ const state = this.state;
       : bbox.height;
+
+    if (!state.isClone) {
+      state.clonedPanels.forEach(panel => panel.resize());
+    }
   }
@@ -157,2 +149,10 @@
 
+  public getCloneIndex(): number {
+    return this.state.cloneIndex;
+  }
+
+  public getClonedPanels(): Panel[] {
+    return this.state.clonedPanels;
+  }
+
   public getIdenticalPanels(): Panel[] {
@@ -185,8 +185,7 @@ const state = this.state;
 
-  public clone(): Panel {
+  public clone(cloneIndex: number): Panel {
     const state = this.state;
-    const viewport = this.viewport;
 
     const cloneElement = this.element.cloneNode(true) as HTMLElement;
-    const clonedPanel = new Panel(cloneElement, state.index, viewport, {
+    const clonedPanel = new Panel(cloneElement, state.index, {
       anchorExpression: state.anchorExpression,
@@ -198,7 +197,6 @@ horizontal: state.horizontal,
     clonedPanel.state.isClone = true;
+    clonedPanel.state.cloneIndex = cloneIndex;
     // Can't calc size as it didn't appended to other element yet
     // So manually set size for it
     clonedPanel.state.size = state.size;
-
-    viewport.appendPanelElement(cloneElement);
     state.clonedPanels.push(clonedPanel);
@@ -209,100 +207,9 @@
 
-  public toReadonlyVersion(): FlickingPanel {
-    const state = this.state;
-    const originalPanel = this;
+  public removeClonedPanelsAfter(start: number): void {
+    const removedPanels = this.state.clonedPanels.splice(start);
 
-    return {
-      element: this.element,
-      index: state.index,
-      position: state.position,
-      anchorPosition: state.position + state.relativeAnchorPosition,
-      size: state.size,
-      focus(this: FlickingPanel, duration?: number): void {
-        const viewport = originalPanel.viewport;
-        const flicking = viewport.flicking;
-
-        const hangerPosition = viewport.getCameraPosition() + viewport.getHangerPosition();
-        const anchorPosition = state.position + state.relativeAnchorPosition;
-        if (hangerPosition === anchorPosition) {
-          return;
-        }
-
-        const direction = hangerPosition > anchorPosition
-          ? DIRECTION.PREV
-          : DIRECTION.NEXT;
-
-        const changeCanceled = flicking.trigger(EVENTS.CHANGE, {
-          index: this.index,
-          panel: this,
-          direction,
-          prevIndex: viewport.getIndex(),
-          prevPanel: viewport.getCurrentPanel().toReadonlyVersion(),
-          isTrusted: false,
-        } as ChangeEvent);
-
-        if (changeCanceled) {
-          return;
-        }
-
-        originalPanel.viewport.moveTo(this, null, duration);
-
-        if (duration != null && duration <= 0) {
-          flicking.trigger(EVENTS.MOVE_END, {
-            direction,
-            isTrusted: false,
-          });
-        }
-      },
-      update: this.update.bind(this),
-      prev(this: FlickingPanel): FlickingPanel | null {
-        const originalPrevPanel = originalPanel.prevPanel;
-        if (originalPrevPanel == null) {
-          return null;
-        }
-
-        const prevPanel = originalPrevPanel.toReadonlyVersion();
-
-        if (this.position < prevPanel.position) {
-          let newPosition = prevPanel.position;
-          const scrollArea = originalPanel.viewport.getScrollArea();
-          const scrollAreaSize = scrollArea.next - scrollArea.prev;
-
-          do {
-            newPosition -= scrollAreaSize;
-          } while (this.position < newPosition);
-
-          return merge({}, prevPanel, {
-            position: newPosition,
-            anchorPosition: newPosition + originalPrevPanel.state.relativeAnchorPosition,
-          }) as FlickingPanel;
-        }
-
-        return prevPanel;
-      },
-      next(this: FlickingPanel): FlickingPanel | null {
-        const originalNextPanel = originalPanel.nextPanel;
-        if (originalNextPanel == null) {
-          return null;
-        }
-
-        const nextPanel = originalNextPanel.toReadonlyVersion();
-
-        if (this.position > nextPanel.position) {
-          let newPosition = nextPanel.position;
-          const scrollArea = originalPanel.viewport.getScrollArea();
-          const scrollAreaSize = scrollArea.next - scrollArea.prev;
-
-          do {
-            newPosition += scrollAreaSize;
-          } while (this.position > newPosition);
-
-          return merge({}, nextPanel, {
-            position: newPosition,
-            anchorPosition: newPosition + originalNextPanel.state.relativeAnchorPosition,
-          }) as FlickingPanel;
-        }
-
-        return nextPanel;
-      },
-    };
+    for (const panel of removedPanels) {
+      const element = panel.getElement();
+      element.parentNode!.removeChild(element);
+    }
   }
@@ -309,0 +216,0 @@ }

src/components/Viewport.ts

@@ -5,8 +5,5 @@ import Panel from "./Panel";
 import Axes, { PanInput } from "@egjs/axes";
-import { FlickingOptions, FlickingPanel } from "../types";
-import Flicking from "../Flicking";
+import { FlickingOptions, FlickingPanel, FlickingStatus } from "../types";
 
 export default class Viewport {
-  public flicking: Flicking;
-
   private axes: Axes;
@@ -19,4 +16,6 @@ private panInput: PanInput;
   private panels: Panel[];
-  private clonedPanels: Panel[];
+  private clonedPanels: Panel[] = [];
 
+  private axesHandlers: {[key: string]: any};
+
   private state: {
@@ -35,4 +34,4 @@ index: number;
     };
-    options: FlickingOptions;
   };
+  private options: FlickingOptions;
 
@@ -49,12 +48,12 @@ constructor(
       index: options.defaultIndex,
-      size: -1,
+      size: 0,
       position: 0,
       hangerPosition: 0,
       scrollArea: {
-        prev: -1,
-        next: -1,
+        prev: 0,
+        next: 0,
       },
       translate: TRANSFORM,
-      options,
     };
+    this.options = options;
 
@@ -64,3 +63,3 @@ this.build();
 
-  public moveTo(panel: FlickingPanel, axesEvent: any, duration: number = this.state.options.duration): void {
+  public moveTo(panel: FlickingPanel, axesEvent: any, duration: number = this.options.duration): void {
     const state = this.state;
@@ -74,3 +73,3 @@ let targetPos = panel.anchorPosition - state.hangerPosition;
     state.index = panel.index;
-    axesEvent
+    (axesEvent && axesEvent.setTo)
       ? axesEvent.setTo({ flick: targetPos }, duration)
@@ -82,8 +81,7 @@ : this.axes.setTo({ flick: targetPos }, duration);
     const state = this.state;
-    pos = Math.round(pos);
 
     const transform = state.translate.name;
-    const moveVector = state.options.horizontal
+    const moveVector = this.options.horizontal
       ? [-pos, 0] : [0, -pos];
-    const moveCoord = moveVector.map(coord => `${coord}px`).join(", ");
+    const moveCoord = moveVector.map(coord => `${Math.round(coord)}px`).join(", ");
 
@@ -99,40 +97,22 @@ this.cameraElement.style[transform] = state.translate.has3d
   public resize(): void {
-    const bbox = this.viewportElement.getBoundingClientRect();
-    const state = this.state;
-    const options = state.options;
-    const panels = this.panels;
+    this.updateSize();
+    this.updateOriginalPanelPositions();
+    this.updateAdaptiveSize();
+    this.updateScrollArea();
 
-    panels.forEach(panel => panel.resize());
+    // Clone panels in circular mode
+    if (this.options.circular) {
+      this.clonePanels();
+      this.relocatePanels();
+    }
 
-    this.adjustSize();
-
-    state.size = state.options.horizontal
-      ? bbox.width
-      : bbox.height;
-
-    state.hangerPosition = parseArithmeticExpression(options.hanger, state.size);
-
-    // Set viewport scrollable area
-    const firstPanel = panels[0];
-    const lastPanel = panels[panels.length - 1];
-    const hangerPos = state.hangerPosition;
-
-    // TODO: Consider circular case
-    if (this.canSetBoundMode()) {
-      state.scrollArea = {
-        prev: firstPanel.getPosition(),
-        next: lastPanel.getPosition() + lastPanel.getSize() - state.size,
-      };
-    } else {
-      state.scrollArea = {
-        prev: firstPanel.getAnchorPosition() - hangerPos,
-        next: lastPanel.getAnchorPosition() - hangerPos,
-      };
-    }
+    this.chainPanels();
+    this.updateCameraPosition();
   }
 
   // Find nearest anchor from current hanger position
-  // FIXME: exclude "undefined"
-  public findNearestPanel(): Panel | undefined {
+  public findNearestPanel(): Panel {
     const state = this.state;
+    const panels = this.panels;
+    const clonedPanels = this.clonedPanels;
     const scrollArea = state.scrollArea;
@@ -143,15 +123,30 @@ const currentHangerPosition = state.position + state.hangerPosition;
       return state.position < scrollArea.prev
-        ? this.panels[0]
-        : this.panels[this.panels.length - 1];
+        ? panels[0]
+        : panels[panels.length - 1];
     }
 
-    for (const panel of [...this.panels, ...this.clonedPanels]) {
-      const panelPosition = panel.getPosition();
-      const panelSize = panel.getSize();
+    const allPanels = [...panels, ...clonedPanels];
+    let minimumDistance = Infinity;
+    let nearestPanel: Panel;
 
-      // TODO: apply "gap" option
-      if (isBetween(currentHangerPosition, panelPosition, panelPosition + panelSize)) {
-        return panel;
+    for (const panel of allPanels) {
+      const prevPosition = panel.getPosition();
+      const nextPosition = prevPosition + panel.getSize();
+
+      // Use shortest distance from panel's range
+      const distance = isBetween(currentHangerPosition, prevPosition, nextPosition)
+        ? 0
+        : Math.min(
+          Math.abs(prevPosition - currentHangerPosition),
+          Math.abs(nextPosition - currentHangerPosition),
+        );
+
+      if (distance > minimumDistance) {
+        break;
       }
+      minimumDistance = distance;
+      nearestPanel = panel;
     }
+
+    return nearestPanel!;
   }
@@ -191,3 +186,3 @@
     const state = this.state;
-    const options = state.options;
+    const options = this.options;
     const anchorPosition = panel.getAnchorPosition();
@@ -222,4 +217,4 @@ const distance = Math.abs(state.position + state.hangerPosition - anchorPosition);
 
-  public adjustSize(): void {
-    const options = this.state.options;
+  public updateAdaptiveSize(): void {
+    const options = this.options;
     const horizontal = options.horizontal;
@@ -230,10 +225,10 @@ let sizeToApply: number;
       const currentPanel = this.getCurrentPanel();
-      const bbox = currentPanel.getBbox();
+      const panelBbox = currentPanel.getBbox();
 
-      sizeToApply = horizontal ? bbox.height : bbox.width;
+      sizeToApply = horizontal ? panelBbox.height : panelBbox.width;
     } else {
       // Find minimum height of panels to maximum panel size
       const maximumPanelSize = this.panels.reduce((maximum, panel) => {
-        const bbox = panel.getBbox();
-        return Math.max(maximum, horizontal ? bbox.height : bbox.width);
+        const panelBbox = panel.getBbox();
+        return Math.max(maximum, horizontal ? panelBbox.height : panelBbox.width);
       }, 0);
@@ -248,5 +243,7 @@
       viewportStyle.minHeight = "100%";
+      viewportStyle.width = "100%";
     } else {
       viewportStyle.width = `${sizeToApply}px`;
       viewportStyle.minWidth = "100%";
+      viewportStyle.height = "100%";
     }
@@ -275,2 +272,21 @@ }
 
+  public restore(status: FlickingStatus): void {
+    const panels = status.panels;
+    const cameraElement = this.cameraElement;
+
+    // Replace all panels inside camera element
+    cameraElement.innerHTML = panels.map(panel => panel.html).join("");
+    this.viewportElement.appendChild(cameraElement);
+
+    // Resotre index & resize
+    this.state.index = status.index;
+    this.moveCamera(status.position);
+
+    this.panels = [];
+    this.clonedPanels = [];
+
+    this.createPanels();
+    this.resize();
+  }
+
   public getPanelCount(): number {
@@ -281,3 +297,3 @@ return this.panels.length;
   public getPanel(index: number): Panel | null {
-    if (!isBetween(index, 0, this.panels.length)) {
+    if (!isBetween(index, 0, this.panels.length - 1)) {
       return null;
@@ -302,3 +318,3 @@ }
     if (index < 0) {
-      index = state.options.circular
+      index = this.options.circular
         ? this.panels.length - 1
@@ -316,3 +332,3 @@ : -1;
     if (index >= this.panels.length) {
-      index = state.options.circular
+      index = this.options.circular
         ? 0
@@ -333,2 +349,8 @@ : -1;
 
+  public getScrollAreaSize(): number {
+    const scrollArea = this.state.scrollArea;
+
+    return scrollArea.next - scrollArea.prev;
+  }
+
   public getHangerPosition(): number {
@@ -341,27 +363,28 @@ return this.state.hangerPosition;
   }
+  public getAllPanels(includeClone?: boolean): Panel[] {
+    const panels = this.panels;
 
-  public connectAxesHandler(handler: {[key: string]: (event: { [key: string]: any; }) => any}): Axes {
-    const horizontal = this.state.options.horizontal;
+    return includeClone ? panels.concat(this.clonedPanels) : panels;
+  }
+  public connectAxesHandler(handler: {[key: string]: (event: { [key: string]: any; }) => any}): void {
+    const axes = this.axes;
 
-    return this.axes.on(handler)
-      .connect(horizontal ? ["flick", ""] : ["", "flick"], this.panInput);
+    this.axesHandlers = handler;
+    axes.on(handler);
+    this.resume();
   }
 
-  public appendPanelElement(element: HTMLElement) {
-    this.cameraElement.appendChild(element);
+  public pause(): void {
+    this.axes.off();
   }
 
+  public resume(): void {
+    this.axes.on(this.axesHandlers);
+  }
+
   private build(): void {
     this.applyCSSValue();
-    this.placePanels();
+    this.setAxesInstance();
+    this.createPanels();
     this.resize();
-
-    // Clone panels in circular mode
-    if (this.state.options.circular) {
-      this.clonePanels();
-      this.replacePanels();
-    }
-
-    this.chainPanels();
-    this.setAxesInstance();
     this.moveToDefaultPanel();
@@ -371,4 +394,3 @@ }
   private applyCSSValue(): void {
-    const state = this.state;
-    const options = state.options;
+    const options = this.options;
     const viewportElement = this.viewportElement;
@@ -393,5 +415,30 @@ const cameraElement = this.cameraElement;
 
-  private placePanels(): void {
-    const options = this.state.options;
+  private setAxesInstance(): void {
+    const state = this.state;
+    const options = this.options;
 
+    const scrollArea = state.scrollArea;
+    const horizontal = options.horizontal;
+
+    this.axes = new Axes({
+      flick: {
+        range: [scrollArea.prev, scrollArea.next],
+        circular: options.circular,
+        bounce: [0, 0], // will be updated in resize()
+      },
+    }, {
+      easing: options.panelEffect,
+      deceleration: options.deceleration,
+      interruptable: true,
+    });
+
+    this.panInput = this.makeNewPanInput();
+
+    this.axes.connect(horizontal ? ["flick", ""] : ["", "flick"], this.panInput);
+  }
+
+  private createPanels(): void {
+    const state = this.state;
+    const options = this.options;
+
     // Panel elements were attached to camera element by Flicking class
@@ -405,3 +452,3 @@ const panelElements = this.cameraElement.children;
     this.panels = toArray(panelElements).map(
-      (el: HTMLElement, idx: number) => new Panel(el, idx, this, {
+      (el: HTMLElement, idx: number) => new Panel(el, idx, {
         horizontal: options.horizontal,
@@ -412,13 +459,5 @@ classPrefix: options.classPrefix,
     );
-    this.clonedPanels = [];
 
-    // Update panel position && fit to wrapper
-    let nextPanelPos = 0;
-    this.panels.forEach(panel => {
-      const panelPos = nextPanelPos;
-      const panelSize = panel.getSize();
-
-      panel.setPosition(panelPos);
-      nextPanelPos += panelSize;
-    });
+    // Clamp default index
+    state.index = clamp(state.index, 0, this.panels.length - 1);
   }
@@ -434,49 +473,64 @@
 
-    const sumOriginalPanelSize = lastPanel.getPosition() + lastPanel.getSize();
+    const sumOriginalPanelSize = lastPanel.getPosition() + lastPanel.getSize() + this.options.gap;
+    const visibleAreaSize = viewportSize + panels[0].getRelativeAnchorPosition();
 
-    // Update viewport scrollable area
-    // Maximum scroll extends to first clone sequence's first panel
-    state.scrollArea = {
-      prev: state.scrollArea.prev,
-      next: sumOriginalPanelSize + panels[0].getRelativeAnchorPosition() - state.hangerPosition,
-    };
+    // For each panels, clone itself while last panel's position + size is below viewport size
+    const lastClonedPanel = clonedPanels[clonedPanels.length - 1];
+    const cloneCount = Math.ceil(visibleAreaSize / sumOriginalPanelSize);
+    const prevCloneCount = lastClonedPanel ? lastClonedPanel.getCloneIndex() + 1 : 0;
 
-    const scrollArea = state.scrollArea;
-    const visibleAreaSize = (scrollArea.next + viewportSize) - scrollArea.prev;
+    if (cloneCount > prevCloneCount) {
+      // should clone more
+      for (let cloneIndex = prevCloneCount; cloneIndex < cloneCount; cloneIndex++) {
+        panels.forEach(origPanel => {
+          const clonedPanel = origPanel.clone(cloneIndex);
+          this.appendPanelElement(clonedPanel.getElement());
 
-    // For each panels, clone itself while panel's last position is below viewport size
-    let totalPanelSize = sumOriginalPanelSize;
-    do {
-      const cloneBasePos = totalPanelSize;
-
-      // Iterate original panels, clone or set toggle position
-      panels.forEach(origPanel => {
-        const clonedPanelPos = cloneBasePos + origPanel.getPosition();
-
-        // Clone panels
-        const clonedPanel = origPanel.clone();
-        clonedPanel.setPosition(clonedPanelPos);
-
-        clonedPanels.push(clonedPanel);
+          clonedPanels.push(clonedPanel);
+        });
+      }
+    } else if (cloneCount < prevCloneCount) {
+      // should remove some
+      panels.forEach(panel => {
+        panel.removeClonedPanelsAfter(cloneCount);
       });
-
-      // Update base position to clone
-      totalPanelSize += sumOriginalPanelSize;
-    } while (totalPanelSize <= visibleAreaSize);
+      this.clonedPanels.splice(cloneCount * panels.length);
+    }
   }
 
-  private replacePanels(): void {
+  private relocatePanels(): void {
     const state = this.state;
+    const options = this.options;
     const panels = this.panels;
     const clonedPanels = this.clonedPanels;
     const scrollArea = state.scrollArea;
-    const maximumVisiblePosition = scrollArea.next + state.size;
+    const maximumNextVisiblePosition = scrollArea.next + state.size;
+    const minimumPrevVisiblePosition = scrollArea.prev;
 
-    let lastReplacePosition = panels[0].getPosition();
-    // reverse() pollutes original array
+    const firstPanel = panels[0];
+    const lastPanel = panels[panels.length - 1];
+    if (!firstPanel) {
+      return;
+    }
+
+    const sumOriginalPanelSize = lastPanel.getPosition() + lastPanel.getSize() + options.gap;
+
+    // Locate all cloned panels linearly first
+    for (const panel of clonedPanels) {
+      const origPanel = panel.getIdenticalPanels()[0];
+      const cloneIndex = panel.getCloneIndex();
+      const cloneBasePos = sumOriginalPanelSize * (cloneIndex + 1);
+      const clonedPanelPos = cloneBasePos + origPanel.getPosition();
+
+      panel.setPosition(clonedPanelPos);
+    }
+
+    let lastReplacePosition = firstPanel.getPosition();
+    // reverse() pollutes original array, so copy it with concat()
     for (const panel of clonedPanels.concat().reverse()) {
       const panelPosition = panel.getPosition();
-      const replacePosition = lastReplacePosition - panel.getSize();
+      const panelSize = panel.getSize();
+      const replacePosition = lastReplacePosition - panelSize - options.gap;
 
-      if (panelPosition <= maximumVisiblePosition) {
+      if (panelPosition <= maximumNextVisiblePosition) {
         // It's visible in current scrollArea
@@ -507,3 +561,3 @@ break;
 
-    if (this.state.options.circular) {
+    if (this.options.circular) {
       const firstPanel = allPanels[0];
@@ -517,45 +571,13 @@ const lastPanel = allPanels[allPanels.length - 1];
 
-  private setAxesInstance(): void {
-    const state = this.state;
-    const options = state.options;
-
-    const scrollArea = state.scrollArea;
-    const viewportSize = state.size;
-    const horizontal = options.horizontal;
-    const bounce = options.bounce;
-
-    let parsedBounce: number[] = bounce as [number, number];
-    if (isArray(bounce)) {
-      parsedBounce = (bounce as string[]).map(val => parseArithmeticExpression(val, viewportSize, DEFAULT_OPTIONS.bounce as number));
-    } else {
-      const parsedVal = parseArithmeticExpression(bounce as number | string, viewportSize, DEFAULT_OPTIONS.bounce as number);
-      parsedBounce = [parsedVal, parsedVal];
-    }
-
-    this.axes = new Axes({
-      flick: {
-        range: [scrollArea.prev, scrollArea.next],
-        circular: options.circular,
-        bounce: parsedBounce,
-      },
-    }, {
-      easing: options.panelEffect,
-      deceleration: options.deceleration,
-      interruptable: true,
-    });
-
-    this.panInput = new PanInput(this.viewportElement, {
-      inputType: options.inputType,
-      thresholdAngle: options.thresholdAngle,
-      scale: horizontal ? [-1, 0] : [0, -1],
-    });
-  }
-
   private moveToDefaultPanel(): void {
     const state = this.state;
 
-    const defaultIndex = clamp(state.options.defaultIndex, 0, this.panels.length -  1);
+    const defaultIndex = clamp(this.options.defaultIndex, 0, this.panels.length -  1);
     const defaultPanel = this.panels[defaultIndex];
-    const defaultPosition = this.findShortestPositionToPanel(defaultPanel);
+    let defaultPosition = defaultPanel.getAnchorPosition() - state.hangerPosition;
 
+    defaultPosition = this.canSetBoundMode()
+      ? clamp(defaultPosition, state.scrollArea.prev, state.scrollArea.next)
+      : defaultPosition;
+
     state.index = defaultIndex;
@@ -571,3 +593,3 @@
 
-    return !state.options.circular
+    return !this.options.circular
       && (state.position < scrollArea.prev || state.position > scrollArea.next);
@@ -578,3 +600,3 @@ }
     const state = this.state;
-    const options = state.options;
+    const options = this.options;
     const panels = this.panels;
@@ -589,2 +611,122 @@
   }
+
+  private updateSize(): void {
+    const state = this.state;
+    const options = this.options;
+    const viewportElement = this.viewportElement;
+
+    if (!options.horizontal) {
+      // Don't preserve previous width for adaptive resizing
+      viewportElement.style.width = "";
+      viewportElement.style.minWidth = "";
+    }
+
+    const bbox = viewportElement.getBoundingClientRect();
+
+    // update size & hanger position
+    state.size = options.horizontal
+      ? bbox.width
+      : bbox.height;
+
+    state.hangerPosition = parseArithmeticExpression(options.hanger, state.size);
+  }
+
+  private updateOriginalPanelPositions(): void {
+    const gap = this.options.gap;
+    const panels = this.panels;
+
+    // Update panel position && fit to wrapper
+    let nextPanelPos = 0;
+    panels.forEach(panel => {
+      panel.resize();
+
+      const panelPos = nextPanelPos;
+      const panelSize = panel.getSize();
+
+      panel.setPosition(panelPos);
+      nextPanelPos += panelSize + gap;
+    });
+  }
+
+  private updateScrollArea(): void {
+    const state = this.state;
+    const panels = this.panels;
+    const options = this.options;
+    const axes = this.axes;
+
+    // Set viewport scrollable area
+    const firstPanel = panels[0];
+    const lastPanel = panels[panels.length - 1];
+    const hangerPos = state.hangerPosition;
+
+    if (this.canSetBoundMode()) {
+      state.scrollArea = {
+        prev: firstPanel.getPosition(),
+        next: lastPanel.getPosition() + lastPanel.getSize() - state.size,
+      };
+    } else if (options.circular) {
+      const sumOriginalPanelSize = lastPanel.getPosition() + lastPanel.getSize() + options.gap;
+
+      // Maximum scroll extends to first clone sequence's first panel
+      state.scrollArea = {
+        prev: firstPanel.getAnchorPosition() - hangerPos,
+        next: sumOriginalPanelSize + firstPanel.getRelativeAnchorPosition() - hangerPos,
+      };
+    } else {
+      state.scrollArea = {
+        prev: firstPanel.getAnchorPosition() - hangerPos,
+        next: lastPanel.getAnchorPosition() - hangerPos,
+      };
+    }
+
+    const viewportSize = state.size;
+    const bounce = options.bounce;
+
+    let parsedBounce: number[] = bounce as [number, number];
+    if (isArray(bounce)) {
+      parsedBounce = (bounce as string[]).map(val => parseArithmeticExpression(val, viewportSize, DEFAULT_OPTIONS.bounce as number));
+    } else {
+      const parsedVal = parseArithmeticExpression(bounce as number | string, viewportSize, DEFAULT_OPTIONS.bounce as number);
+      parsedBounce = [parsedVal, parsedVal];
+    }
+
+    // Update axes range and bounce
+    axes.axis.flick.range = [state.scrollArea.prev, state.scrollArea.next];
+    axes.axis.flick.bounce = parsedBounce;
+  }
+
+  private updateCameraPosition(): void {
+    const state = this.state;
+    const panels = this.panels;
+    const axes = this.axes;
+
+    let newPosition = panels[state.index].getAnchorPosition() - state.hangerPosition;
+
+    if (this.canSetBoundMode()) {
+      newPosition = clamp(newPosition, state.scrollArea.prev, state.scrollArea.next);
+    }
+
+    this.moveCamera(newPosition);
+
+    // Pause & resume axes to prevent axes's "change" event triggered
+    this.pause();
+    axes.setTo({
+      flick: newPosition,
+    }, 0);
+    this.resume();
+  }
+
+  private makeNewPanInput(): PanInput {
+    const options = this.options;
+
+    return new PanInput(this.viewportElement, {
+      inputType: options.inputType,
+      thresholdAngle: options.thresholdAngle,
+      scale: options.horizontal ? [-1, 0] : [0, -1],
+    });
+  }
+
+  private appendPanelElement(element: HTMLElement): void {
+    this.cameraElement.appendChild(element);
+  }
 }

src/consts.ts

@@ -1,2 +0,2 @@
-import { FlickingState, FlickingOptions, EventType, Direction, MovingState } from "./types";
+import { FlickingOptions, EventType, Direction, AxesEventType, StateType } from "./types";
 import { checkTranslateSupport } from "./utils";
@@ -6,3 +6,3 @@
   classPrefix: "eg-flick",
-  deceleration: 0.0006,
+  deceleration: 0.0075,
   horizontal: true,
@@ -17,2 +17,3 @@ circular: false,
   bounce: 10,
+  autoResize: false,
   adaptive: false,
@@ -24,21 +25,6 @@ zIndex: 2000,
   anchor: "50%",
+  gap: 0,
+  snap: 1,
 };
 
-export const MOVING_STATE: MovingState = {
-  IDLE: "IDLE",
-  HOLDING: "HOLDING",
-  DRAGGING: "DRAGGING",
-  MOVING: "MOVING",
-  DISABLED: "DISABLED",
-};
-
-export const DEFAULT_STATE: Readonly<FlickingState> = {
-  options: DEFAULT_OPTIONS,
-  currentPanelIndex: DEFAULT_OPTIONS.defaultIndex,
-  movingDirection: undefined,
-  movingState: MOVING_STATE.IDLE,
-  moveStartTriggered: false,
-  lastHoldingDelta: 0,
-};
-
 export const DEFAULT_VIEWPORT_CSS = {
@@ -73,2 +59,18 @@ position: "relative",
 
+export const AXES_EVENTS: AxesEventType = {
+  HOLD: "hold",
+  CHANGE: "change",
+  RELEASE: "release",
+  ANIMATION_END: "animationEnd",
+  FINISH: "finish",
+};
+
+export const STATE_TYPE: StateType = {
+  IDLE: 0,
+  HOLDING: 1,
+  DRAGGING: 2,
+  ANIMATING: 3,
+  DISABLED: 4,
+};
+
 export const DIRECTION: Direction = {
@@ -75,0 +77,0 @@ PREV: "PREV",

src/Flicking.ts

 import Component from "@egjs/component";
 import Viewport from "./components/Viewport";
-
-import { merge, clamp } from "./utils";
-import { DEFAULT_STATE, DEFAULT_OPTIONS, EVENTS, DIRECTION, MOVING_STATE } from "./consts";
-import { FlickingOptions, FlickingState, FlickingEvent, Direction, EventType, SelectEvent, ChangeEvent, FlickingPanel } from "./types";
 import Panel from "./components/Panel";
+import StateMachine from "./components/StateMachine";
 
+import { merge, getProgress } from "./utils";
+import { DEFAULT_OPTIONS, EVENTS, DIRECTION, AXES_EVENTS, STATE_TYPE } from "./consts";
+import { FlickingOptions, FlickingEvent, Direction, EventType, ChangeEvent, FlickingPanel, TriggerCallback, FlickingContext, FlickingStatus, Plugin } from "./types";
+
 /**
@@ -42,5 +43,9 @@ * @memberof eg
 
-  private state: FlickingState;
+  public options: FlickingOptions;
+
+  private stateMachine: StateMachine;
   private wrapper: HTMLElement;
   private viewport: Viewport;
+  private eventContext: FlickingContext;
+  private plugins: Plugin[] = [];
 
@@ -98,10 +103,3 @@ /**
   public prev(duration?: number): this {
-    const viewport = this.viewport;
-    const panel = viewport.getCurrentPanel().getPrevPanel();
-
-    if (panel) {
-      this.moveToPanelProgramatic(panel, duration);
-    }
-
-    return this;
+    return this.moveTo(this.viewport.getPrevIndex(), duration);
   }
@@ -116,10 +114,3 @@
   public next(duration?: number): this {
-    const viewport = this.viewport;
-    const panel = viewport.getCurrentPanel().getNextPanel();
-
-    if (panel) {
-      this.moveToPanelProgramatic(panel, duration);
-    }
-
-    return this;
+    return this.moveTo(this.viewport.getNextIndex(), duration);
   }
@@ -139,3 +130,15 @@
     if (panel) {
-      this.moveToPanelProgramatic(panel, duration);
+      const state = this.stateMachine.getState();
+
+      const currentIndex = viewport.getIndex();
+      const canMove = (state.type === STATE_TYPE.IDLE)
+        && (panel.getIndex() !== currentIndex);
+
+      if (!canMove) {
+        return this;
+      }
+
+      const nearestPanel = this.castToReadonlyPanel(viewport.findNearestIdenticalPanel(panel));
+
+      this.moveToPanel(nearestPanel, EVENTS.CHANGE, null, duration);
     }
@@ -174,14 +177,14 @@
   /**
-   * Returns the selected panel instance
-   * @ko 현재 선택된 패널의 인스턴스를 반환한다.
-   * @return Selected panel instance.<ko>선택된 패널 인스턴스</ko>
+   * Returns the selected panel object
+   * @ko 현재 선택된 패널의 오브젝트를 반환한다.
+   * @return Selected panel object.<ko>선택된 패널 오브젝트</ko>
    */
   public getCurrentPanel(): FlickingPanel {
-    return this.viewport.getCurrentPanel().toReadonlyVersion();
+    return this.castToReadonlyPanel(this.viewport.getCurrentPanel());
   }
 
   /**
-   * Returns the panel instance of given index
-   * @ko 주어진 인덱스에 해당하는 패널의 인스턴스를 반환한다.
-   * @return Panel instance of given index, `null` if it doesn't exists.<ko>주어진 인덱스에 해당하는 패널의 인스턴스, 해당 패널이 존재하지 않을 시 `null`.
+   * Returns the panel object of given index
+   * @ko 주어진 인덱스에 해당하는 패널의 오브젝트를 반환한다.
+   * @return panel object of given index, `null` if it doesn't exists.<ko>주어진 인덱스에 해당하는 패널의 오브젝트, 해당 패널이 존재하지 않을 시 `null`.</ko>
    */
@@ -191,7 +194,25 @@ public getPanel(index: number): FlickingPanel | null {
     return panel
-      ? panel.toReadonlyVersion()
+      ? this.castToReadonlyPanel(panel)
       : null;
   }
-
   /**
+   * Returns all panel objects in flicking.
+   * @ko 플리킹 안에 있는 모든 패널 오브젝트들을 반환한다.
+   * @param - Check whether to include clone or not <ko>복사본을 포함할 건지 안 할 건지 확인한다</ko>
+   * @return All panel objects <ko>플리킹 안에 있는 모든 패널 오브젝트들</ko>
+   */
+  public getAllPanels(includeClone?: boolean): FlickingPanel[] {
+    return this.viewport.getAllPanels(includeClone).map(panel => this.castToReadonlyPanel(panel));
+  }
+  /**
+   * Returns the panel objects shown in the flicking area.
+   * @ko 플리킹 영역에서 보여지는 패널 오브젝트들을 반환한다.
+   * @return The panel objects shown in the flicking area. <ko>플리킹 영역에서 보여지는 패널 오브젝트들</ko>
+   */
+  public getVisiblePanels(): FlickingPanel[] {
+    return this.getAllPanels(true).filter(({outsetProgress}) => {
+      return outsetProgress > -1 && outsetProgress < 1;
+    });
+  }
+  /**
    * Returns the total length of original panels
@@ -211,3 +232,3 @@ * @ko 원본 패널의 개수를 반환한다.
   public isPlaying(): boolean {
-    return this.state.movingState !== MOVING_STATE.IDLE;
+    return this.stateMachine.getState().playing;
   }
@@ -237,3 +258,67 @@
 
+ /**
+  * Get current flicking status. If the returned value is specified as a [setStatus()]{@link eg.Flicking#setStatus} method argument, it can be returned to its value status.
+  * @ko 현재 상태 값을 반환한다. 반환받은 값을 [setStatus()]{@link eg.Flicking#setStatus} 메서드 인자로 지정하면 그 값 상태로 되돌릴 수 있다.
+  * @return An object with current status value information.<ko>현재 상태값 정보를 가진 객체.</ko>
+  */
+  public getStatus(): Readonly<FlickingStatus> {
+    const panels = this.viewport.getAllPanels().map(panel => {
+      return {
+        html: panel.getElement().outerHTML,
+        index: panel.getIndex(),
+      };
+    });
+
+    return {
+      index: this.getIndex(),
+      panels,
+      position: this.viewport.getCameraPosition(),
+    };
+  }
+
+ /**
+  * Restore to the state of the `status`.
+  * @ko `status`의 상태로 복원한다.
+  * @param status Status value to be restored. You can specify the return value of the [getStatus()]{@link eg.Flicking#getStatus} method.<ko>복원할 상태 값. [getStatus()]{@link eg.Flicking#getStatus}메서드의 반환값을 지정하면 된다.</ko>
+  */
+  public setStatus(status: FlickingStatus): void {
+    this.viewport.restore(status);
+  }
+
   /**
+   * Add plugins that can have different effects on Flicking
+   * @ko 플리킹에 다양한 효과를 부여할 수 있는 플러그인을 추가한다.
+   * @param - The plugin(s) to add <ko>추가할 플러그인(들)</ko>
+   * @return An instance of a module itself <ko>모듈 자신의 인스턴스</ko>
+   */
+  public addPlugins(plugins: Plugin | Plugin[]) {
+    const newPlugins = ([] as Plugin[]).concat(plugins);
+
+    newPlugins.forEach(plugin => {
+      plugin.init(this);
+    });
+
+    this.plugins = this.plugins.concat(newPlugins);
+    return this;
+  }
+  /**
+   * Remove plugins from Flicking
+   * @ko 플리킹으로부터 플러그인들을 제거한다.
+   * @param - The plugin(s) to remove <ko>제거 플러그인(들)</ko>
+   * @return An instance of a module itself <ko>모듈 자신의 인스턴스</ko>
+   */
+  public removePlugins(plugins: Plugin | Plugin[]) {
+    const currentPlugins = this.plugins;
+    const removedPlugins = ([] as Plugin[]).concat(plugins);
+
+    removedPlugins.forEach(plugin => {
+      const index = currentPlugins.indexOf(plugin);
+
+      index > -1 && currentPlugins.splice(index, 1);
+
+      plugin.destroy(this);
+    });
+    return this;
+  }
+  /**
    * Return the reference element and all its children to the state they were in before the instance was created. Remove all attached event handlers. Specify `null` for all attributes of the instance (including inherited attributes).
@@ -251,3 +336,7 @@ * @ko 기준 요소와 그 하위 패널들을 인스턴스 생성전의 상태로 되돌린다. 부착된 모든 이벤트 핸들러를 탈거한다. 인스턴스의 모든 속성(상속받은 속성포함)에 `null`을 지정한다.
 
-    //  resources
+    this.plugins.forEach(plugin => {
+      plugin.destroy(this);
+    });
+
+    // release resources
     for (const x in this) {
@@ -258,32 +347,11 @@ (this as any)[x] = null;
 
-  public trigger<T extends FlickingEvent>(
-    eventName: string,
-    params: Partial<T> = {},
-  ) {
-    const state = this.state;
+  /**
+   * The horizontal or vertical length of the panel is updated according to the base element. If `horizontal=true` is horizontal. If `horizontal=false` is vertical.
+   * @ko 패널의 가로 혹은 세로 길이를 기준요소에 맞춰 갱신한다. `horizontal=true`이면 가로, `horizontal=false`이면 세로.
+   * @return An instance of a module itself<ko>모듈 자신의 인스턴스</ko>
+   */
+  public resize(): this {
+    this.viewport.resize();
 
-    const holding = state.movingState === MOVING_STATE.HOLDING
-      || state.movingState === MOVING_STATE.DRAGGING;
-
-    const currentPanel = this.viewport.getCurrentPanel();
-
-    if (params.direction) {
-      state.movingDirection = params.direction;
-    }
-
-    // TODO: Refactor this into command pattern
-    if (eventName === EVENTS.MOVE_END) {
-      state.moveStartTriggered = false;
-      if (state.options.adaptive) {
-        this.viewport.adjustSize();
-      }
-    }
-
-    // Return whether it's canceled, as it's more clear
-    return !super.trigger(eventName, merge({
-      type: eventName,
-      index: currentPanel.getIndex(),
-      panel: currentPanel.toReadonlyVersion(),
-      holding,
-    }, params));
+    return this;
   }
@@ -295,11 +363,10 @@
     this.listenInput();
+    this.listenResize();
   }
 
   private setInitialState(options: Partial<FlickingOptions>): void {
-    // Set default state values and override it
-    const state = merge({}, DEFAULT_STATE) as FlickingState;
     // Override default options
-    state.options = merge({}, DEFAULT_OPTIONS, options) as FlickingOptions;
-
-    this.state = state;
+    this.options = merge({}, DEFAULT_OPTIONS, options) as FlickingOptions;
+    // Set internal state machine
+    this.stateMachine = new StateMachine();
   }
@@ -309,5 +376,6 @@
     const wrapper = this.wrapper;
-    const options = this.state.options;
+    const options = this.options;
     const children = wrapper.children;
     if (!children || !children.length) {
+      // FIXME: INFINITE FLICKING 구현시 삭제할 것
       throw new Error("Given base element doesn't have proper DOM structure to be initialized.");
@@ -335,337 +403,272 @@ }
     this.viewport = new Viewport(viewportElement, cameraElement, options);
-
-    const viewport = this.viewport;
-    viewport.flicking = this;
-
-    options.defaultIndex = clamp(options.defaultIndex, 0, viewport.getPanelCount() - 1);
   }
 
   private listenInput(): void {
-    // Connect Axes instance with PanInput
-    this.viewport.connectAxesHandler({
-      hold: this.onAxesHold.bind(this),
-      change: this.onAxesChange.bind(this),
-      release: this.onAxesRelease.bind(this),
-      animationEnd: this.onAxesAnimationEnd.bind(this),
-      finish: this.onAxesFinish.bind(this),
-    });
-  }
+    const flicking = this;
+    const stateMachine = flicking.stateMachine;
 
-  private stopMoving(): void {
-    const state = this.state;
+    // Set event context
+    flicking.eventContext = {
+      flicking,
+      viewport: flicking.viewport,
+      transitTo: stateMachine.transitTo,
+      triggerEvent: flicking.triggerEvent,
+      moveCamera: flicking.moveCamera,
+      stopCamera: flicking.stopCamera,
+      moveToPanel: flicking.moveToPanel,
+      castToReadonlyPanel: flicking.castToReadonlyPanel,
+    };
 
-    state.panelMovingTo = undefined;
-    state.movingState = MOVING_STATE.IDLE;
-    state.movingDirection = undefined;
-    state.lastHoldingDelta = 0;
+    const handlers = {};
+    for (const key in AXES_EVENTS) {
+      const eventType = AXES_EVENTS[key];
+
+      handlers[eventType] = (e: any) => stateMachine.fire(eventType, e, flicking.eventContext);
+    }
+
+    // Connect Axes instance with PanInput
+    flicking.viewport.connectAxesHandler(handlers);
   }
 
-  private onAxesHold(e): void {
-    const state = this.state;
-
-    if (state.movingState === MOVING_STATE.DISABLED) {
-      return;
+  private listenResize(): void {
+    if (this.options.autoResize) {
+      window.addEventListener("resize", () => {
+        this.resize();
+      });
     }
+  }
 
-    const holdStartCanceled = this.trigger(EVENTS.HOLD_START, {
-      axesEvent: e,
-      holding: true,
-      isTrusted: true,
-    });
+  private triggerEvent = <T extends FlickingEvent>(
+    eventName: string,
+    axesEvent: any,
+    isTrusted: boolean,
+    params: Partial<T> = {},
+  ): TriggerCallback => {
+    const viewport = this.viewport;
+    const state = this.stateMachine.getState();
+    const currentPanel = viewport.getCurrentPanel();
+    const {prev, next} = viewport.getScrollArea();
+    const pos = viewport.getCameraPosition();
+    let progress = getProgress(pos, [prev, prev, next]);
 
-    if (holdStartCanceled) {
-      state.movingState = MOVING_STATE.DISABLED;
-      return;
+    if (this.options.circular) {
+        progress %= 1;
     }
+    const canceled = !super.trigger(eventName, merge({
+      type: eventName,
+      index: currentPanel.getIndex(),
+      panel: this.castToReadonlyPanel(currentPanel),
+      direction: state.direction,
+      holding: state.holding,
+      progress,
+      axesEvent,
+      isTrusted,
+    }, params));
 
-    state.movingState = state.movingState !== MOVING_STATE.MOVING
-      ? MOVING_STATE.HOLDING
-      : MOVING_STATE.DRAGGING;
-    state.movingDirection = undefined;
-    state.lastHoldingDelta = 0;
+    return {
+      onSuccess(callback: () => void): TriggerCallback {
+        if (!canceled) {
+          callback();
+        }
+        return this;
+      },
+      onStopped(callback: () => void): TriggerCallback {
+        if (canceled) {
+          callback();
+        }
+        return this;
+      },
+    } as TriggerCallback;
   }
 
-  private onAxesChange(e): void {
-    const state = this.state;
+  // Return result of "move" event triggered
+  private moveCamera = (axesEvent: any): TriggerCallback => {
     const viewport = this.viewport;
+    const state = this.stateMachine.getState();
+    const options = this.options;
 
-    const pos = e.pos.flick;
-    const delta = !e.inputEvent
-      ? 0
-      : state.options.horizontal
-        ? e.inputEvent.deltaX
-        : e.inputEvent.deltaY;
+    const pos = axesEvent.pos.flick;
 
-    if (state.movingState === MOVING_STATE.DISABLED || !e.delta.flick) {
-      return;
-    }
+    if (axesEvent.isTrusted && state.holding) {
+      const inputOffset = options.horizontal
+        ? axesEvent.inputEvent.offsetX
+        : axesEvent.inputEvent.offsetY;
 
-    const currentDirection = delta < state.lastHoldingDelta
-      ? DIRECTION.NEXT
-      : DIRECTION.PREV;
+      const isNext = inputOffset < 0;
+      const prevPos = viewport.getCameraPosition();
 
-    // On first move event
-    if (!state.moveStartTriggered) {
-      state.moveStartTriggered = true;
-      const moveStartCanceled = this.trigger(EVENTS.MOVE_START, {
-        axesEvent: e,
-        direction: state.movingState === MOVING_STATE.HOLDING
-          ? currentDirection
-          : state.movingDirection,
-        isTrusted: e.isTrusted,
-      });
-
-      if (moveStartCanceled) {
-        this.stopMoving();
-        state.movingState = MOVING_STATE.DISABLED;
-        return;
+      let cameraChange = pos - prevPos;
+      const looped = isNext === (pos < prevPos);
+      if (options.circular && looped) {
+        // Reached at max/min range of axes
+        const scrollAreaSize = viewport.getScrollAreaSize();
+        cameraChange = -Math.sign(cameraChange) * (scrollAreaSize - Math.abs(cameraChange));
       }
 
-      state.movingState = state.movingState === MOVING_STATE.HOLDING
-        ? MOVING_STATE.DRAGGING
-        : state.movingState;
-    }
+      const currentDirection = cameraChange === 0
+        ? state.direction
+        : cameraChange > 0
+          ? DIRECTION.NEXT
+          : DIRECTION.PREV;
 
-    if (state.movingState === MOVING_STATE.DRAGGING) {
-      state.movingDirection = currentDirection;
-      state.lastHoldingDelta = delta;
+      state.delta += cameraChange;
+      state.direction = currentDirection;
     }
 
-    const previousPosition = this.viewport.getCameraPosition();
+    const previousPosition = viewport.getCameraPosition();
 
     viewport.moveCamera(pos);
-    const moveCanceled = this.trigger(EVENTS.MOVE, {
-      axesEvent: e,
-      direction: state.movingDirection,
-      isTrusted: e.isTrusted,
-    });
-
-    if (moveCanceled) {
-      viewport.moveCamera(previousPosition);
-      this.stopMoving();
-      state.movingState = MOVING_STATE.DISABLED;
-      return;
-    }
+    return this.triggerEvent(EVENTS.MOVE, axesEvent, axesEvent.isTrusted).onStopped(() => {
+        // Undo camera movement
+        viewport.moveCamera(previousPosition);
+      });
   }
 
-  private onAxesRelease(e): void {
-    const state = this.state;
-    const options = state.options;
+  private stopCamera = (axesEvent: any): void => {
     const viewport = this.viewport;
 
-    if (state.movingState === MOVING_STATE.DISABLED) {
-      return;
+    if (axesEvent && axesEvent.setTo) {
+      axesEvent.setTo({ flick: viewport.getCameraPosition() }, 0);
     }
 
-    const delta = options.horizontal
-      ? e.inputEvent.deltaX
-      : e.inputEvent.deltaY;
-    const isNext = delta < 0;
-    const swipeDistance = Math.abs(delta);
-    const swipeAngle = e.inputEvent.deltaX
-      ? Math.abs(180 * Math.atan(e.inputEvent.deltaY / e.inputEvent.deltaX) / Math.PI)
-      : 90;
+    this.stateMachine.transitTo(STATE_TYPE.IDLE);
+  }
 
+  private moveToPanel = (panel: FlickingPanel, eventType: EventType["CHANGE"] | EventType["RESTORE"], axesEvent: any, duration: number = this.options.duration): TriggerCallback => {
+    const viewport = this.viewport;
+    const stateMachine = this.stateMachine;
     const currentPanel = viewport.getCurrentPanel();
-    const wasDragging = state.movingState === MOVING_STATE.DRAGGING;
-    const overThreshold = (swipeDistance >= options.threshold)
-      && (options.horizontal
-        ? swipeAngle <= options.thresholdAngle
-        : swipeAngle > options.thresholdAngle);
 
-    // Trigger hold end event
-    state.movingState = MOVING_STATE.MOVING;
-    this.trigger(EVENTS.HOLD_END, {
-      axesEvent: e,
-      holding: false,
-      direction: state.movingDirection,
-      isTrusted: true,
-    });
+    const estimatedPosition = panel.anchorPosition - viewport.getHangerPosition();
+    const currentPosition = viewport.getCameraPosition();
 
-    if (!overThreshold) {
-      if (!wasDragging) {
-        const cameraPosition = viewport.getCameraPosition();
+    const isTrusted = axesEvent !== null;
+    const direction = estimatedPosition > currentPosition
+      ? DIRECTION.NEXT
+      : DIRECTION.PREV;
 
-        // Static click
-        const clickedElement = e.inputEvent.srcEvent.target;
-        const clickedPanel = viewport.findPanelOf(clickedElement);
-
-        if (clickedPanel) {
-          const panelPosition = clickedPanel.getPosition();
-          const direction = panelPosition > cameraPosition
-            ? DIRECTION.NEXT
-            : panelPosition < cameraPosition
-              ? DIRECTION.PREV
-              : undefined;
-
-          state.movingState = MOVING_STATE.IDLE;
-          this.trigger(EVENTS.SELECT, {
-            axesEvent: e,
-            direction,
-            isTrusted: true,
-            selectedIndex: clickedPanel.getIndex(),
-            selectedPanel: clickedPanel.toReadonlyVersion(),
-          } as SelectEvent);
-        } else {
-          e.setTo({ flick: cameraPosition }, 0);
-          this.stopMoving();
-        }
-        return;
-      } else if (state.panelMovingTo) {
-        // Update position to move & anchor index
-        this.viewport.moveTo(state.panelMovingTo.toReadonlyVersion(), e);
-        return;
-      }
-    }
-
-    let minimumDistanceToChange = isNext
-      ? currentPanel.getSize() - currentPanel.getRelativeAnchorPosition()
-      : currentPanel.getRelativeAnchorPosition();
-    minimumDistanceToChange = Math.max(minimumDistanceToChange, options.threshold);
-
-    const hangerPosition = (viewport.getCameraPosition() + viewport.getHangerPosition());
-
-    let panelToMove = currentPanel;
-    if (overThreshold) {
-      // Minimum distance needed to change panel
-      // If over this threshold,
-      /*
-       * | Prev |    Next    |
-       * |------|------------|
-       * [      |<-Anchor    ] <- Panel
-       */
-      if (swipeDistance <= minimumDistanceToChange) {
-        let adjacentPanel = isNext
-          ? currentPanel.getNextPanel()
-          : currentPanel.getPrevPanel();
-
-        if (options.circular) {
-          const firstClonedPanel = currentPanel.getIdenticalPanels()[1];
-          const lapped = Math.abs(currentPanel.getAnchorPosition() - hangerPosition)
-            > Math.abs(firstClonedPanel.getAnchorPosition() - hangerPosition);
-
-          if (lapped) {
-            adjacentPanel = isNext
-              ? firstClonedPanel.getNextPanel()
-              : firstClonedPanel.getPrevPanel();
-          }
-        }
-
-        panelToMove = (adjacentPanel != null)
-          ? adjacentPanel
-          : currentPanel;
-      } else {
-        panelToMove = viewport.findNearestPanel()!;
-      }
+    let eventResult: TriggerCallback;
+    if (eventType === EVENTS.CHANGE) {
+      eventResult = this.triggerEvent(EVENTS.CHANGE, axesEvent, isTrusted, {
+        index: panel.index,
+        panel,
+        direction,
+        prevIndex: currentPanel.getIndex(),
+        prevPanel: this.castToReadonlyPanel(currentPanel),
+      } as ChangeEvent);
     } else {
-      // Restore case
-      if (options.circular) {
-        const firstClonedPanel = currentPanel.getIdenticalPanels()[1];
-        const lapped = Math.abs(currentPanel.getAnchorPosition() - hangerPosition)
-          > Math.abs(firstClonedPanel.getAnchorPosition() - hangerPosition);
-
-        if (!isNext && lapped) {
-          panelToMove = firstClonedPanel;
-        }
-      }
+      eventResult = this.triggerEvent(EVENTS.RESTORE, axesEvent, isTrusted);
     }
 
-    let eventType: string = overThreshold
-      ? EVENTS.CHANGE
-      : EVENTS.RESTORE;
+    eventResult.onSuccess(() => {
+      const state = stateMachine.getState();
 
-    if (overThreshold && !options.circular && panelToMove === currentPanel) {
-      eventType = EVENTS.RESTORE;
-    }
+      state.targetPanel = panel;
+      state.direction = direction;
+      viewport.moveTo(panel, axesEvent, duration);
+    });
 
-    // Trigger change or restore event
-    const changeOrRestoreCanceled = this.trigger(eventType, {
-      index: panelToMove.getIndex(),
-      panel: panelToMove.toReadonlyVersion(),
-      prevIndex: eventType === EVENTS.CHANGE ? currentPanel.getIndex() : undefined,
-      prevPanel: eventType === EVENTS.CHANGE ? currentPanel.toReadonlyVersion() : undefined,
-      axesEvent: e,
-      direction: state.movingDirection,
-      isTrusted: true,
-    } as ChangeEvent);
-
-    if (changeOrRestoreCanceled) {
-      this.stopMoving();
-      state.movingState = MOVING_STATE.DISABLED;
-      return;
+    // Move end event can't be triggered automatically when duration is 0
+    // as Axes won't trigger animationEnd or finish event
+    // so manually trigger finish event
+    if (duration <= 0) {
+      stateMachine.fire(AXES_EVENTS.FINISH, null, this.eventContext);
     }
 
-    // Update position to move & anchor index
-    state.panelMovingTo = panelToMove;
-    this.viewport.moveTo(panelToMove.toReadonlyVersion(), e);
+    return eventResult;
   }
 
-  private onAxesAnimationEnd(e): void {
-    const state = this.state;
-
-    if (state.movingState === MOVING_STATE.DISABLED) {
-      return;
-    }
-
-    this.trigger(EVENTS.MOVE_END, {
-      axesEvent: e,
-      direction: state.movingDirection,
-      isTrusted: e.isTrusted,
-    });
-  }
-
-  private onAxesFinish(e): void {
-    this.stopMoving();
-  }
-
-  private moveToPanelProgramatic(panel: Panel, duration: number = this.state.options.duration): void {
-    const state = this.state;
+  private castToReadonlyPanel = (panel: Panel, position = panel.getPosition()): FlickingPanel => {
+    const flicking = this;
+    const isCircular = this.options.circular;
     const viewport = this.viewport;
+    const size = panel.getSize();
+    const relativeAnchorPosition = panel.getRelativeAnchorPosition();
+    const cameraPosition = viewport.getCameraPosition();
+    const realtiveHangerPosition = viewport.getHangerPosition();
+    const cameraDist = cameraPosition + realtiveHangerPosition;
+    const nearestPanel = this.viewport.findNearestPanel();
+    const isNext = nearestPanel.getPosition() >= cameraDist || !nearestPanel.getNextPanel();
+    const prevPanel = (isNext ? nearestPanel.getPrevPanel() : nearestPanel) || nearestPanel;
+    const nextPanel = (isNext ? nearestPanel : nearestPanel.getNextPanel()) || nearestPanel;
+    const scrollSize = viewport.getScrollAreaSize();
+    let prevAnchorPosition = prevPanel.getAnchorPosition();
+    let nextAnchorPosition = nextPanel.getAnchorPosition();
 
-    const currentIndex = viewport.getIndex();
-    const canMove = panel
-      && state.movingState === MOVING_STATE.IDLE
-      && panel.getIndex() !== currentIndex;
-
-    if (!canMove) {
-      return;
+    if (prevAnchorPosition > nextAnchorPosition) {
+      // last to first or first to last
+      if (cameraDist > prevAnchorPosition) {
+        nextAnchorPosition += scrollSize;
+      } else {
+        prevAnchorPosition -= scrollSize;
+      }
     }
+    const range = [
+      prevAnchorPosition,
+      prevAnchorPosition,
+      nextAnchorPosition,
+    ];
+    const outsetRange = [
+      -size,
+      realtiveHangerPosition - relativeAnchorPosition,
+      viewport.getSize(),
+    ];
 
-    const estimatedPosition = viewport.findShortestPositionToPanel(panel);
-    const currentPosition = viewport.getCameraPosition();
+    // single
+    const panelCount = this.getPanelCount();
+    const prevCloneIndex = prevPanel.getCloneIndex();
+    const relativeIndex = (isCircular ? Math.floor(position / scrollSize) * panelCount : 0) + panel.getIndex();
+    const progress = relativeIndex - getProgress(cameraDist, range) - (prevPanel.getIndex() + (prevCloneIndex + 1) * panelCount);
 
-    const direction = estimatedPosition > currentPosition
-      ? DIRECTION.NEXT
-      : estimatedPosition < currentPosition
-        ? DIRECTION.PREV
-        : undefined;
-
-    this.state.movingState = MOVING_STATE.MOVING;
-    this.state.movingDirection = direction;
-    const changeCanceled = this.trigger(EVENTS.CHANGE, {
+    // outset
+    const relativePanelPosition = position - cameraPosition;
+    const outsetProgress = getProgress(relativePanelPosition, outsetRange);
+    return {
+      element: panel.getElement(),
       index: panel.getIndex(),
-      panel: panel.toReadonlyVersion(),
-      prevIndex: viewport.getIndex(),
-      prevPanel: viewport.getCurrentPanel().toReadonlyVersion(),
-      direction,
-      isTrusted: false,
-    } as ChangeEvent);
+      position,
+      progress,
+      outsetProgress,
+      anchorPosition: position + panel.getRelativeAnchorPosition(),
+      size: panel.getSize(),
+      focus(this: FlickingPanel, duration?: number): void {
+        const hangerPosition = viewport.getCameraPosition() + viewport.getHangerPosition();
+        const anchorPosition = panel.getAnchorPosition();
+        if (hangerPosition === anchorPosition) {
+          return;
+        }
 
-    if (changeCanceled) {
-      return;
-    }
+        flicking.moveToPanel(this, EVENTS.CHANGE, null, duration);
+      },
+      update(this: FlickingPanel, updateFunction: (element: HTMLElement) => any): void {
+        panel.getIdenticalPanels()
+          .forEach(eachPanel => updateFunction(eachPanel.getElement()));
+      },
+      prev(this: FlickingPanel): FlickingPanel | null {
+        const originalPrevPanel = panel.getPrevPanel();
+        if (originalPrevPanel == null) {
+          return null;
+        }
+        const scrollAreaSize = viewport.getScrollAreaSize();
+        let newPosition = originalPrevPanel.getPosition();
 
-    const nearestPanel = viewport.findNearestIdenticalPanel(panel);
-    this.viewport.moveTo(nearestPanel!.toReadonlyVersion(), null, duration);
+        while (position  < newPosition) {
+            newPosition -= scrollAreaSize;
+        }
+        return flicking.castToReadonlyPanel(originalPrevPanel, newPosition);
+      },
+      next(this: FlickingPanel): FlickingPanel | null {
+        const originalNextPanel = panel.getNextPanel();
+        if (originalNextPanel == null) {
+          return null;
+        }
+        const scrollAreaSize = viewport.getScrollAreaSize();
+        let newPosition = originalNextPanel.getPosition();
 
-    // Move end event can't be triggered automatically when duration is 0
-    // as Axes won't trigger animationEnd or finish event
-    if (duration <= 0) {
-      this.trigger(EVENTS.MOVE_END, {
-        direction,
-        isTrusted: false,
-      });
-
-      this.stopMoving();
-    }
+        while (position  > newPosition) {
+          newPosition += scrollAreaSize;
+        }
+        return flicking.castToReadonlyPanel(originalNextPanel, newPosition);
+      },
+    };
   }
@@ -672,0 +675,0 @@ }

src/types.ts

@@ -0,3 +1,8 @@
+import Flicking from "./Flicking";
+import Viewport from "./components/Viewport";
 import Panel from "./components/Panel";
+import StateMachine from "./components/StateMachine";
 
+export type ValueOf<T> = T[keyof T];
+
 // Options user can choose
@@ -7,20 +12,22 @@ /**
  * @memberof eg.Flicking
- * @property A prefix for class names of the panels, viewport and camera.<ko>패널들과 뷰포트, 카메라 클래스 이름의 접두사.</ko>
- * @property A prefix for event names Flicking generates<ko>Flicking이 생성하는 이벤트 이름들의 접두사</ko>
- * @property Deceleration value for panel movement animation where acceleration is manually enabled by user. Higher value means shorter running time.<ko>사용자의 동작으로 가속도가 적용된 패널 이동 애니메이션의 감속도. 값이 높을수록 애니메이션 실행 시간이 짧아진다.</ko>
- * @property Direction of panel movement. (true: horizontal, false: vertical)<ko>패널 이동 방향. (true: 가로방향, false: 세로방향)</ko>
- * @property Enables circular mode, which connects first/last panel for infinite scrolling<ko>순환 모드를 활성화한다. 순환 모드에서는 양 끝의 패널이 서로 연결되여 무한 스크롤이 가능하다.</ko>
- * @property Movement threshold to destination panel(unit: pixel). A panel element must be dragged beyond the threshold to move to the destination panel.<ko>목적 패널로의 이동 임계값 (단위: 픽셀). 패널 요소를 임계값 이상으로 끌어다 놓아야만이 목적 패널로 이동한다.</ko>
- * @property Duration of the panel movement. (unit: ms)<ko>패널 이동 애니메이션 진행 시간.(단위: ms)</ko>
- * @property The easing function to apply to a panel moving animation. The default function is easeOutCubic.<ko>패널 이동 애니메이션에 적용할 `easing`함수. 기본값은 `easeOutCubic`이다.</ko>
- * @property Index of panel to set as default when initializing the module. A zero-based integer.<ko>모듈 초기화시 지정할 디폴트 패널의 인덱스로, 0부터 시작하는 정수.</ko>
- * @property Types of input devices. ({@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.PanInput.html|eg.Axes.PanInput Reference})<br>- "touch": A touch input device.<br>- "mouse": A mouse.<ko>입력 장치 종류. ({@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.PanInput.html|eg.Axes.PanInput 참고})<br>- "touch": 터치 입력 장치.<br>- "mouse": 마우스.</ko>
- * @property The threshold angle that enables Flicking operation. (0 ~ 90 from the x-axis)<ko>x축을 기준으로 하여, Flicking의 동작을 가능하게 하는 기준 각도 (0 ~ 90)</ko>
- * @property The size value of the bounce area. Only can be enabled when `circular=false`<br>Should be provided in px or % value of viewport size.<br>You can combinate those values with plus/minus sign<br>ex) "50", "100px", "0%", "25% + 100px"<ko>바운스 영역의 크기값. `circular=false`인 경우에만 사용할 수 있다.<br>px값이나, 뷰포트의 크기 대비 %값을 사용할 수 있고, 이를 + 혹은 - 기호로 연계하여 사용할 수도 있다.<br>예) "50", "100px", "0%", "25% + 100px"</ko>
- * @property Whether the height of the viewport element reflects the height value of the panel after completing the movement.<ko>목적 패널로 이동한 후 그 패널의 높이값을 뷰포트 요소의 높이값에 반영할지 여부.</ko>
- * @property z-index value for viewport element<ko>뷰포트 요소의 z-index 값</ko>
- * @property Prevents view going out of first/last panel. Only can be enabled when `circular=false`.<ko>뷰가 첫번째와 마지막 패널 밖으로 나가는 것을 막아준다. `circular=false`인 경우에만 사용할 수 있다.</ko>
- * @property Disables CSS property `overflow: hidden` in viewport if `true`.<ko>`true`로 설정시 뷰포트에 `overflow: hidden` 속성을 해제한다.</ko>
- * @property Position of hanger in viewport, which hangs panel anchors.<br>Should be provided in px or % value of viewport size.<br>You can combinate those values with plus/minus sign<br>ex) "50", "100px", "0%", "25% + 100px"<ko>뷰포트 내부의 행어의 위치. 패널의 앵커들이 뷰포트 내에서 멈추는 지점에 해당한다.<br>px값이나, 뷰포트의 크기 대비 %값을 사용할 수 있고, 이를 + 혹은 - 기호로 연계하여 사용할 수도 있다.<br>예) "50", "100px", "0%", "25% + 100px"</ko>
- * @property Position of anchor in panels, which can be hanged by viewport hanger.<br>Should be provided in px or % value of panel size.<br>You can combinate those values with plus/minus sign<br>ex) "50", "100px", "0%", "25% + 100px"<ko>패널 내부의 앵커의 위치. 뷰포트의 행어와 연계하여 패널이 화면 내에서 멈추는 지점을 설정할 수 있다.<br>px값이나, 패널의 크기 대비 %값을 사용할 수 있고, 이를 + 혹은 - 기호로 연계하여 사용할 수도 있다.<br>예) "50", "100px", "0%", "25% + 100px"</ko>
+ * @property - A prefix for class names of the panels, viewport and camera.<ko>패널들과 뷰포트, 카메라 클래스 이름의 접두사.</ko>
+ * @property - Deceleration value for panel movement animation where acceleration is manually enabled by user. Higher value means shorter running time.<ko>사용자의 동작으로 가속도가 적용된 패널 이동 애니메이션의 감속도. 값이 높을수록 애니메이션 실행 시간이 짧아진다.</ko>
+ * @property - Direction of panel movement. (true: horizontal, false: vertical)<ko>패널 이동 방향. (true: 가로방향, false: 세로방향)</ko>
+ * @property - Enables circular mode, which connects first/last panel for infinite scrolling<ko>순환 모드를 활성화한다. 순환 모드에서는 양 끝의 패널이 서로 연결되여 무한 스크롤이 가능하다.</ko>
+ * @property - Movement threshold to destination panel(unit: pixel). A panel element must be dragged beyond the threshold to move to the destination panel.<ko>목적 패널로의 이동 임계값 (단위: 픽셀). 패널 요소를 임계값 이상으로 끌어다 놓아야만이 목적 패널로 이동한다.</ko>
+ * @property - Duration of the panel movement. (unit: ms)<ko>패널 이동 애니메이션 진행 시간.(단위: ms)</ko>
+ * @property - The easing function to apply to a panel moving animation. The default function is easeOutCubic.<ko>패널 이동 애니메이션에 적용할 `easing`함수. 기본값은 `easeOutCubic`이다.</ko>
+ * @property - Index of panel to set as default when initializing the module. A zero-based integer.<ko>모듈 초기화시 지정할 디폴트 패널의 인덱스로, 0부터 시작하는 정수.</ko>
+ * @property - Types of input devices. ({@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.PanInput.html|eg.Axes.PanInput Reference})<br>- "touch": A touch input device.<br>- "mouse": A mouse.<ko>입력 장치 종류. ({@link https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.PanInput.html|eg.Axes.PanInput 참고})<br>- "touch": 터치 입력 장치.<br>- "mouse": 마우스.</ko>
+ * @property - The threshold angle that enables Flicking operation. (0 ~ 90 from the x-axis)<ko>x축을 기준으로 하여, Flicking의 동작을 가능하게 하는 기준 각도 (0 ~ 90)</ko>
+ * @property - The size value of the bounce area. Only can be enabled when `circular=false`<br>Should be given in px or % value of viewport size.<br>You can combinate those values with plus/minus sign<br>ex) "50", "100px", "0%", "25% + 100px"<ko>바운스 영역의 크기값. `circular=false`인 경우에만 사용할 수 있다.<br>px값이나, 뷰포트의 크기 대비 %값을 사용할 수 있고, 이를 + 혹은 - 기호로 연계하여 사용할 수도 있다.<br>예) "50", "100px", "0%", "25% + 100px"</ko>
+ * @property - Whether resize() method should be called automatically after window resize event.<ko>window의 `resize` 이벤트 이후 자동으로 resize()메소드를 호출할지의 여부.</ko>
+ * @property - Whether the height of the viewport element reflects the height value of the panel after completing the movement.<ko>목적 패널로 이동한 후 그 패널의 높이값을 뷰포트 요소의 높이값에 반영할지 여부.</ko>
+ * @property - z-index value for viewport element<ko>뷰포트 요소의 z-index 값</ko>
+ * @property - Prevents view going out of first/last panel. Only can be enabled when `circular=false`.<ko>뷰가 첫번째와 마지막 패널 밖으로 나가는 것을 막아준다. `circular=false`인 경우에만 사용할 수 있다.</ko>
+ * @property - Disables CSS property `overflow: hidden` in viewport if `true`.<ko>`true`로 설정시 뷰포트에 `overflow: hidden` 속성을 해제한다.</ko>
+ * @property - Position of hanger in viewport, which hangs panel anchors.<br>Can be given in px or % value of viewport size.<br>You can combinate those values with plus/minus sign<br>ex) "50", "100px", "0%", "25% + 100px"<ko>뷰포트 내부의 행어의 위치. 패널의 앵커들이 뷰포트 내에서 멈추는 지점에 해당한다.<br>px값이나, 뷰포트의 크기 대비 %값을 사용할 수 있고, 이를 + 혹은 - 기호로 연계하여 사용할 수도 있다.<br>예) "50", "100px", "0%", "25% + 100px"</ko>
+ * @property - Position of anchor in panels, which can be hanged by viewport hanger.<br>Can be given in px or % value of panel size.<br>You can combinate those values with plus/minus sign<br>ex) "50", "100px", "0%", "25% + 100px"<ko>패널 내부의 앵커의 위치. 뷰포트의 행어와 연계하여 패널이 화면 내에서 멈추는 지점을 설정할 수 있다.<br>px값이나, 패널의 크기 대비 %값을 사용할 수 있고, 이를 + 혹은 - 기호로 연계하여 사용할 수도 있다.<br>예) "50", "100px", "0%", "25% + 100px"</ko>
+ * @property - Space between each panels.<br>Should be given in number(px).<ko>패널간에 부여할 간격의 크기를 나타내는 숫자(px)</ko>
+ * @property - The number of panels you're going to roll over to when you snap<ko>한 번 스냅 할 때 최대 몇 개의 패널까지 넘길 건지 나타내는 숫자</ko>
  */
@@ -39,2 +46,3 @@ export interface FlickingOptions {
   bounce: number | string | [number | string, number | string];
+  autoResize: boolean;
   adaptive: boolean;
@@ -46,23 +54,25 @@ zIndex: number;
   anchor: string;
+  gap: number;
+  snap: number;
 }
 
-// Options + Internal state
-export interface FlickingState {
-  options: FlickingOptions;
-  currentPanelIndex: number;
-  panelMovingTo?: Panel;
-  movingDirection?: keyof Direction;
-  movingState: keyof MovingState;
-  moveStartTriggered: boolean;
-  lastHoldingDelta: number;
+// State interface to save instance
+/**
+ * @typedef
+ * @memberof eg.Flicking
+ * @property - Index of current panel.<ko>현재 패널의 인덱스.</ko>
+ * @property panels - Restore information of panels Flicking has.<ko>Flicking이 갖고 있는 패널들의 정보</ko>
+ * @property {string} [panels.html] - `outerHTML` of each panel elements.<ko>각 패널 엘리먼트의 `outerHTML`</ko>
+ * @property {index} [panels.index] - Index of each panels<ko>각 패널의 인덱스</ko>
+ * @property Camera position of Flicking - <ko>Flicking의 카메라 위치</ko>
+ */
+export interface FlickingStatus {
+  index: number;
+  panels: Array<{
+    html: string;
+    index: number;
+  }>;
+  position: number;
 }
 
-export interface MovingState {
-  readonly IDLE: "IDLE";
-  readonly HOLDING: "HOLDING";
-  readonly DRAGGING: "DRAGGING";
-  readonly MOVING: "MOVING";
-  readonly DISABLED: "DISABLED";
-}
-
 export interface OriginalStyle {
@@ -76,3 +86,3 @@ className: string | null;
  * @memberof eg.Flicking
- * @property - HTML element of panel instance.<ko>패널 인스턴스에 지정된 HTML Element.</ko>
+ * @property - HTML element of panel object.<ko>패널 오브젝트에 지정된 HTML Element.</ko>
  * @property - Index of panel, zero-based integer.<ko>패널의 인덱스로, 0부터 시작하는 정수</ko>
@@ -82,2 +92,4 @@ * @property - Position of panel where it is placed from left(horizontal)/top(vertical).<ko>패널의 위치로, 왼쪽(horizontal)/위(vertical)을 기준으로 얼마나 떨어져 있는지를 나타내는 값.</ko>
  * @property - Size of panel, width(horizontal)/height(vertical) in `px`.<ko>`px`단위의 패널의 크기, horizontal일 때는 너비, vertical일 때는 높이에 해당한다.</ko>
+ * @property - Progress of movement between previous or next panels on the current panel (prev panel: -1 ~ 0, next panel: 0 ~ 1) <ko> 현재 패널에서 이전/다음 패널간의 이동 진행률 (이전 패널: -1 ~ 0, 다음 패널: 0 ~ 1)</ko>
+ * @property - Current panel progress in container with outside (start: -1, center(or hanger): 0, end: 1) <ko> 현재 패널이 외부까지 포함한 컨테이너에서 진행률 (시작점: -1, 중심(또는 hanger): 0, 도착점: 1)</ko>
  * @property focus - Move to this panel.<ko>이 패널로 이동한다.</ko>
@@ -110,2 +122,4 @@ * @property {number} [focus.duration] Duration of the panel movement. (unit: ms)<ko>패널 이동 애니메이션 진행 시간.(단위: ms)</ko>
   readonly size: number;
+  readonly progress: number;
+  readonly outsetProgress: number;
   focus: (duration?: number) => void;
@@ -150,9 +164,2 @@ update: (updateFunction: (element: HTMLElement) => void) => void;
 /**
- * An event that occurs whenever the panel's coordinate value changes.
- * @ko 패널의 좌표값이 변할 때마다 발생하는 이벤트.
- * @event eg.Flicking#move
- * @type eg.Flicking.FlickingEvent
- */
-
-/**
  * Event triggered after finish moving to the destination panel.
@@ -213,8 +220,10 @@ * @ko 목적 패널로의 이동을 완료한 다음 발생하는 이벤트.
  * @property - Index number of the current panel. See the [getIndex()]{@link eg.Flicking#getIndex} method.<ko>현재 패널 요소의 인덱스 번호. [getIndex()]{@link eg.Flicking#getIndex}메서드 참조.</ko>
- * @property - Current panel instance.
+ * @property - Current panel object. <ko> 현재 패널의 오브젝트 </ko>
+ * @property - Current Flicking Progress<ko>현재 플리킹의 진행도</ko>
  * @property - `true` when the event was generated by a user action("mouse" or "touch") otherwise `false`.<ko>사용자 액션("mouse" 또는 "touch")에 의해 이벤트가 생성된 경우 `true`. 그 외는 `false`.</ko>
  * @property - Whether the user is inputing through the input device. (Whether it is 'mousedown' for a mouse device or 'touchmove' for a touch device.)<ko>사용자가 입력 장치를 통해 입력중인지 여부. (마우스 장치라면 'mousedown' 여부, 터치 장치라면 'touchmove' 여부)</ko>
  * @property - Cancels the default action, and prevents every events after it.<br>Not effective with events postfixed in `-End`<ko>이벤트의 기본동작을 취소하고, 해당 이벤트 뒤에 발생할 이벤트들을 전부 발생하지 않도록 한다.<br>`-End`가 접미사로 붙은 이벤트에서는 유효한 동작을 하지 않는다.</ko>
- * @property - Direction of the panel movement. `undefined` in [dragStart]{@link eg.Flicking#event:dragStart} event.<ko>패널 이동 방향. [dragStart]{@link eg.Flicking#event:dragStart}이벤트에서는 `undefined`이다.</ko>
+ * @property - Direction of the panel movement. `null` in [dragStart]{@link eg.Flicking#event:dragStart} event.<ko>패널 이동 방향. [dragStart]{@link eg.Flicking#event:dragStart}이벤트에서는 `null`이다.</ko>
  * @property - Original event emitted from ({@link https://naver.github.io/egjs-axes/release/latest/doc/index.html|eg.Axes})<ko>내부의 ({@link https://naver.github.io/egjs-axes/release/latest/doc/index.html|eg.Axes})로부터 받아온 원본 이벤트</ko>
+ * @property - Flicking instance that triggered event.<ko>이벤트를 발생시킨 Flicking의 인스턴스</ko>
  */
@@ -225,7 +234,9 @@ export interface FlickingEvent {
   panel: FlickingPanel;
+  progress: number;
   isTrusted: boolean;
   holding: boolean;
   stop: () => void;
-  direction?: keyof Direction;
+  direction: ValueOf<Direction> | null;
   axesEvent?: any;
+  currentTarget: Flicking;
 }
@@ -236,2 +247,3 @@
  * @memberof eg.Flicking
+ * @extends eg.Flicking.FlickingEvent
  * @property - Index of previous panel<ko>이전 패널의 인덱스</ko>
@@ -247,4 +259,5 @@ */
  * @memberof eg.Flicking
+ * @extends eg.Flicking.FlickingEvent
  * @property - Index of panel user selected<ko>사용자가 선택한 패널의 인덱스</ko>
- * @property - Instance of selected panel<ko>사용자가 선택한 패널의 인스턴스</ko>
+ * @property - Instance of selected panel<ko>사용자가 선택한 패널의 오브젝트</ko>
  */
@@ -255,1 +268,44 @@ export interface SelectEvent extends FlickingEvent {
 }
+
+export interface StateType {
+  readonly IDLE: 0;
+  readonly HOLDING: 1;
+  readonly DRAGGING: 2;
+  readonly ANIMATING: 3;
+  readonly DISABLED: 4;
+}
+
+export interface AxesEventType {
+  readonly HOLD: "hold";
+  readonly CHANGE: "change";
+  readonly RELEASE: "release";
+  readonly ANIMATION_END: "animationEnd";
+  readonly FINISH: "finish";
+}
+
+export interface TriggerCallback {
+  onSuccess(callback: () => void): TriggerCallback;
+  onStopped(callback: () => void): TriggerCallback;
+}
+
+export interface FlickingContext {
+  flicking: Flicking;
+  viewport: Viewport;
+  transitTo: StateMachine["transitTo"];
+  triggerEvent: Flicking["triggerEvent"];
+  moveCamera: Flicking["moveCamera"];
+  stopCamera: Flicking["stopCamera"];
+  moveToPanel: Flicking["moveToPanel"];
+  castToReadonlyPanel: Flicking["castToReadonlyPanel"];
+}
+
+/**
+ * @typedef
+ * @memberof eg.Flicking
+ * @property - Initialization method that occurs when a plug-in is added<ko>플러그인을 추가했을 때 발생하는 초기화 메소드</ko>
+ * @property - A destroy method that occurs when a plug-in is removed<ko>플러그인을 제거했을 때 발생하는 해제 메소드</ko>
+ */
+export interface Plugin {
+    init(flicking: Flicking): void;
+    destroy(flicking: Flicking): void;
+}

src/utils.ts

@@ -84,3 +84,3 @@ export function merge(target: object, ...srcs: object[]): object {
 export function isBetween(val: number, min: number, max: number) {
-  return val >= min && val < max;
+  return val >= min && val <= max;
 }
@@ -150,1 +150,16 @@
 }
+
+export function getProgress(pos: number, range: number[]) {
+  // start, anchor, end
+  // -1 , 0 , 1
+  const [min, center, max] = range;
+
+  if (pos > center) {
+    // 0 ~ 1
+    return max - center ? (pos - center) / (max - center) : (pos - min) / (max - min);
+  } else if (pos < center) {
+    // -1 ~ 0
+    return center - min ? (pos - center) / (center - min) : (pos - min) / (max - min);
+  }
+  return 0;
+}

tslint.json

@@ -72,5 +72,5 @@ {
     "exclude": [
-      "node_modules"
+      "node_modules/**/*"
     ]
   }
 }

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2584000

increased by12.94%

Number of package files

79

increased by21.54%

Lines of code

13970

increased by18.04%

Number of medium supply chain risk alerts

3

decreased by-25%

Worsened metrics

Dev dependency count

38

increased by5.56%

No dependency changes