egjs

Source: flicking.js

  1. // jscs:disable validateLineBreaks, maximumLineLength
  2. /**
  3. * Copyright (c) 2015 NAVER Corp.
  4. * egjs projects are licensed under the MIT license
  5. */
  6. eg.module("flicking", ["jQuery", eg, window, document, eg.MovableCoord], function ($, ns, global, doc, MC) {
  7. 	"use strict";
  9. 	// jscs:enable validateLineBreaks, maximumLineLength
  10. 	/**
  11. 	 * 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.
  12. 	 * @group egjs
  13. 	 * @ko 플리킹 UI를 구현하는 모듈. 나란히 배치한 패널을 쓸어 넘겨 다음 패널이나 이전 패널로 이동하는 플리킹 UI를 만들 수 있다.
  14. 	 * @class
  15. 	 * @name eg.Flicking
  16. 	 * @extends eg.Component
  17. 	 *
  18. 	 * @param {HTMLElement|String|jQuery} element A base element for the eg.Flicking module <ko>eg.Flicking 모듈을 사용할 기준 엘리먼트</ko>
  19. 	 * @param {Object} options The option object of the eg.Flicking module<ko>eg.Flicking 모듈의 옵션 객체</ko>
  20. 	 * @param {Boolean} [options.hwAccelerable=eg.isHWAccelerable()] Force hardware compositing <ko>하드웨어 가속 사용 여부</ko>
  21. 	 * @param {String} [options.prefix=eg-flick] A prefix for class names of the panel elements <ko>패널 엘리먼트의 클래스 이름에 설정할 접두사</ko>
  22. 	 * @param {Number} [options.deceleration=0.0006] Deceleration of the animation where acceleration is manually enabled by user. A higher value indicates shorter running time <ko>사용자의 동작으로 가속도가 적용된 애니메이션의 감속도. 값이 높을수록 애니메이션 실행 시간이 짧아진다</ko>
  23. 	 * @param {Boolean} [options.horizontal=true] Direction of the panel movement (true: horizontal, false: vertical) <ko>패널 이동 방향 (true 가로방향, false 세로방향)</ko>
  24. 	 * @param {Boolean} [options.circular=false] Indicates whether a circular panel is available <ko>패널 순환 여부</ko>
  25. 	 * @param {Number|Array} [options.previewPadding=[0,0]] The preview size for the previous or next panel. If direction is set to "horizontal", the preview section will be displayed on the left and right of the panel. If direction is set to "vertical", it will be displayed on the top and bottom of the panel <ko>이전 패널과 다음 패널을 미리 보는 영역의 크기. 패널 이동 방향이 가로 방향이면 패널 왼쪽과 오른쪽에 미리 보는 영역이 나타난다. 패널 이동 방향이 세로 방향이면 패널 위쪽과 아래쪽에 미리 보는 영역이 나타난다</ko>
  26. 	 * @param {Number|Array} [options.bounce=[10,10]] −	The size of bouncing area. If a panel is set to "non-circulable", the start and end panels can exceed the base element area and move further as much as the bouncing area. If a panel is dragged to the bouncing area and then dropped, the panel where bouncing effects are applied is retuned back into the base element area. <ko>바운스 영역의 크기. 패널이 순환하지 않도록 설정됐다면 시작 패널과 마지막 패널은 기준 엘리먼트 영역을 넘어 바운스 영역의 크기만큼 더 이동할 수 있다. 패널을 바운스 영역까지 끌었다가 놓으면, 바운스 효과가 적용된 패널이 다시 기준 엘리먼트 영역 안으로 들어온다</ko>
  27. 	 * @param {Number} [options.threshold=40] Distance threshold. If the drag exceeds the threshold value, it will be changed to the next panel <ko>다음 패널로 바뀌는 기준 이동 거리. 패널을 기준 이동 거리 이상 끌었다 놓으면 패널이 다음 패널로 바뀐다</ko>
  28. 	 * @param {Number} [options.duration=100] Duration of the panel movement (unit: ms) <ko>패널 이동 애니메이션 진행 시간(단위: ms)</ko>
  29. 	 * @param {Function} [options.panelEffect=easeOutCubic] The easing function to apply to a panel moving animation <ko>패널 이동 애니메이션에 적용할 easing 함수</ko>
  30. 	 * @param {Number} [options.defaultIndex=0] The index number of a panel to be selected upon module initialization <ko>모듈이 초기화될 때 선택할 패널의 인덱스 번호</ko>
  31. 	 * @param {Array} [options.inputType] Types of input devices.<br>- touch: A touch screen can be used to move a panel.<br>- mouse: A mouse can be used to move a panel. <ko>입력 장치 종류.<br>- touch: 터치 입력 장치로 패널을 이동할 수 있다.<br>- mouse: 마우스로 패널을 이동할 수 있다.</ko>
  32. 	 * @param {Number} [options.thresholdAngle=45] The threshold value that determines whether user action is horizontal or vertical (0~90) <ko>사용자의 동작이 가로 방향인지 세로 방향인지 판단하는 기준 각도(0~90)</ko>
  33. 	 * @param {Boolean} [options.adaptiveHeight=false] Set container's height be adaptive according panel's height.<br>(Note: on Android 4.1.x stock browser, has rendering bug which not correctly render height value on panel with single node. To avoid just append another empty node at the end.)<ko>컨테이너 영역이 패널의 높이값에 따라 변경될지 여부<br>(참고: Android 4.1.x 스톡 브라우저에서 단일 노드로 구성된 패널의 높이값 변경이 제대로 렌더링 되지 않는 버그가 있음. 비어있는 노드를 추가하면 해결이 가능하다.)</ko>
  34. 	 *
  35. 	 * @codepen {"id":"rVOpPK", "ko":"플리킹 UI 기본 예제", "en":"Flicking UI default example", "collectionId":"ArxyLK", "height" : 403}
  36. 	 * @support {"ie": "10+", "ch" : "latest", "ff" : "latest",  "sf" : "latest" , "edge" : "latest", "ios" : "7+", "an" : "2.3+ (except 3.x)"}
  37. 	 *
  38. 	 * @see Easing Functions Cheat Sheet {@link http://easings.net/}
  39. 	 * @see If you want to try a different easing function, use the jQuery easing plugin ({@link http://gsgd.co.uk/sandbox/jquery/easing}) or the jQuery UI easing library ({@link https://jqueryui.com/easing}). <ko>다른 easing 함수를 사용하려면 jQuery easing 플러그인({@link http://gsgd.co.uk/sandbox/jquery/easing})이나, jQuery UI easing 라이브러리({@link https://jqueryui.com/easing})를 사용한다</ko>
  40. 	 * @example
  41. 	 	<!-- HTML -->
  42. 		<div id="mflick">
  43. 			<div>
  44. 				<p>Layer 0</p>
  45. 			</div>
  46. 			<div>
  47. 				<p>Layer 1</p>
  48. 			</div>
  49. 			<div>
  50. 				<p>Layer 2</p>
  51. 			</div>
  52. 		</div>
  53. 		<script>
  54. 	 	var some = new eg.Flicking("#mflick", {
  55. 				circular : true,
  56. 				threshold : 50
  57. 			}).on({
  58. 				beforeRestore : function(e) { ... },
  59. 				flickStart : function(e) { ... }
  60. 			});
  61. 	 	</script>
  62. 	 */
  64. 	// define custom events name
  65. 	var EVENTS = {
  66. 		"beforeFlickStart": "beforeFlickStart",
  67. 		"beforeRestore": "beforeRestore",
  68. 		"flick": "flick",
  69. 		"flickEnd": "flickEnd",
  70. 		"restore": "restore"
  71. 	};
  73. 	// check for css transform support
  74. 	var SUPPORT_TRANSFORM = doc.documentElement.style;
  75. 	SUPPORT_TRANSFORM = "transform" in SUPPORT_TRANSFORM ||
  76. 		"webkitTransform" in SUPPORT_TRANSFORM;
  78. 	// check for will-change support
  79. 	var SUPPORT_WILLCHANGE = global.CSS && global.CSS.supports &&
  80. 		global.CSS.supports("will-change", "transform");
  82. 	// check for Android 2.x
  83. 	var IS_ANDROID2 = ns.agent().os;
  84. 	IS_ANDROID2 = IS_ANDROID2.name === "android" && /^2\./.test(IS_ANDROID2.version);
  86. 	// data-height attribute's name for adaptiveHeight option
  87. 	var DATA_HEIGHT = "data-height";
  89. 	ns.Flicking = ns.Class.extend(ns.Component, {
  90. 		_events: function() {
  91. 			return EVENTS;
  92. 		},
  93. 		/**
  94. 		 * Constructor
  95. 		 * @param {HTMLElement|String|jQuery} element - base element
  96. 		 * @param {Object} options
  97. 		 */
  98. 		construct: function (element, options, _prefix) {
  99. 			this.$wrapper = $(element);
  101. 			var $children = this.$wrapper.children();
  102. 			if (!$children.length) {
  103. 				// jscs:disable validateLineBreaks, maximumLineLength
  104. 				throw new Error("Given base element doesn't exist or it hasn't proper DOM structure to be initialized.");
  106. 				// jscs:enable validateLineBreaks, maximumLineLength
  107. 			}
  109. 			this._setOptions(options);
  110. 			this._setConfig($children, _prefix);
  112. 			!ns._hasClickBug() && (this._setPointerEvents = $.noop);
  114. 			this._build();
  115. 			this._bindEvents(true);
  117. 			this._applyPanelsCss();
  118. 			this._arrangePanels();
  120. 			this.options.hwAccelerable && SUPPORT_WILLCHANGE && this._setHint();
  121. 			this.options.adaptiveHeight && this._setAdaptiveHeight();
  123. 			this._adjustContainerCss("end");
  124. 		},
  126. 		/**
  127. 		 * Set options values
  128. 		 * @param {Object} options
  129. 		 */
  130. 		_setOptions: function(options) {
  131. 			var arrVal = {
  132. 				previewPadding: [ 0, 0 ],
  133. 				bounce: [ 10, 10 ]
  134. 			};
  136. 			$.extend(this.options = {
  137. 				hwAccelerable: ns.isHWAccelerable(),  // check weather hw acceleration is available
  138. 				prefix: "eg-flick",         // prefix value of class name
  139. 				deceleration: 0.0006,       // deceleration value
  140. 				horizontal: true,           // move direction (true == horizontal, false == vertical)
  141. 				circular: false,			// circular mode. In this mode at least 3 panels are required.
  142. 				previewPadding: arrVal.previewPadding,	// preview padding value in left(up) to right(down) order. In this mode at least 5 panels are required.
  143. 				bounce: arrVal.bounce,      // bounce value in left(up) to right(down) order. Works only in non-circular mode.
  144. 				threshold: 40,				// the distance pixel threshold value for change panel
  145. 				duration: 100,				// duration ms for animation
  146. 				panelEffect: $.easing.easeOutCubic,  // $.easing function for panel change animation
  147. 				defaultIndex: 0,			// initial panel index to be shown
  148. 				inputType: ["touch", "mouse"],  // input type
  149. 				thresholdAngle: 45,			// the threshold value that determines whether user action is horizontal or vertical (0~90)
  150. 				adaptiveHeight: false		// Set container's height be adaptive according panel's height
  151. 			}, options);
  153. 			var self = this;
  154. 			$.each(arrVal, function(i, v) {
  155. 				var val = self.options[i];
  157. 				if ($.isNumeric(val)) {
  158. 					val = [ val, val ];
  159. 				} else if (!$.isArray(val)) {
  160. 					val = v;
  161. 				}
  163. 				self.options[i] = val;
  164. 			});
  165. 		},
  167. 		/**
  168. 		 * Set config values
  169. 		 * @param {jQuery} $children wrappers' children elements
  170. 		 * @param {String} _prefix event prefix
  171. 		 */
  172. 		_setConfig: function($children, _prefix) {
  173. 			var options = this.options;
  174. 			var padding = options.previewPadding;
  175. 			var $container = $children.filter("." + options.prefix + "-container:first");
  177. 			if ($container.length) {
  178. 				this.$container = $container;
  179. 				$children = $container.children();
  180. 			}
  182. 			// config value
  183. 			this._conf = {
  184. 				panel: {
  185. 					$list: $children,	// panel list
  186. 					index: 0,			// dom index used among process
  187. 					no: 0,				// panel no used among process
  188. 					currIndex: 0,       // current physical dom index
  189. 					currNo: 0,          // current logical panel number
  190. 					size: 0,			// panel size
  191. 					count: 0,			// total physical panel count
  192. 					origCount: 0,		// total count of given original panels
  193. 					changed: false,		// if panel changed
  194. 					animating: false,	// current animating status boolean
  195. 					minCount: padding[0] + padding[1] > 0 ? 5 : 3  // minimum panel count
  196. 				},
  197. 				touch: {
  198. 					holdPos: [0, 0],	// hold x,y coordinate
  199. 					destPos: [0, 0],	// destination x,y coordinate
  200. 					distance: 0,		// touch distance pixel of start to end touch
  201. 					direction: null,	// touch direction
  202. 					lastPos: 0,			// to determine move on holding
  203. 					holding: false
  204. 				},
  205. 				customEvent: {			// for custom events value
  206. 					flick: true,
  207. 					restore: false,
  208. 					restoreCall: false
  209. 				},
  210. 				origPanelStyle: {		// remember original class and inline style in case of restoration on destroy()
  211. 					wrapper: {
  212. 						className: this.$wrapper.attr("class") || null,
  213. 						style: this.$wrapper.attr("style") || null
  214. 					},
  215. 					list: $children.map(function(i, v) {
  216. 						return {
  217. 							className: $(v).attr("class") || null,
  218. 							style: $(v).attr("style") || null
  219. 						};
  220. 					})
  221. 				},
  222. 				useLayerHack: options.hwAccelerable && !SUPPORT_WILLCHANGE,
  223. 				dirData: [],			// direction constant value according horizontal or vertical
  224. 				indexToMove: 0,
  225. 				eventPrefix: _prefix || "",
  227. 				// For buggy link highlighting on Android 2.x
  228. 				$dummyAnchor: null
  229. 			};
  231. 			$([["LEFT", "RIGHT"], ["UP", "DOWN"]][+!options.horizontal]).each(
  232. 				$.proxy(function (i, v) {
  233. 					this._conf.dirData.push(MC["DIRECTION_" + v]);
  234. 				}, this));
  235. 		},
  237. 		/**
  238. 		 * Build and set panel nodes to make flicking structure
  239. 		 */
  240. 		_build: function () {
  241. 			var panel = this._conf.panel;
  242. 			var options = this.options;
  243. 			var $children = panel.$list;
  244. 			var padding = options.previewPadding.concat();
  245. 			var prefix = options.prefix;
  246. 			var horizontal = options.horizontal;
  247. 			var panelCount = panel.count = panel.origCount = $children.length;
  248. 			var cssValue;
  249. 			var bounce = options.bounce;
  251. 			this._setPadding(padding, true);
  252. 			var sizeValue = this._getDataByDirection([ panel.size, "100%" ]);
  254. 			// create container element
  255. 			cssValue = "position:relative;z-index:2000;width:100%;height:100%;" +
  256. 				(horizontal ? "" : "top:0;");
  258. 			if (this.$container) {
  259. 				this.$container.attr("style", cssValue);
  260. 			} else {
  261. 				this.$container = $children.wrapAll(
  262. 					"<div class='" + prefix + "-container' style='" + cssValue + "'>"
  263. 				).parent();
  264. 			}
  266. 			// panels' css values
  267. 			$children.addClass(prefix + "-panel").css({
  268. 				position: "absolute",
  269. 				width: sizeValue[0],
  270. 				height: sizeValue[1],
  271. 				boxSizing: "border-box",
  272. 				top: 0,
  273. 				left: 0
  274. 			});
  276. 			if (this._addClonePanels()) {
  277. 				panelCount = panel.count = (
  278. 					panel.$list = this.$container.children()
  279. 				).length;
  280. 			}
  282. 			// create MovableCoord instance
  283. 			this._mcInst = new MC({
  284. 				min: [0, 0],
  285. 				max: this._getDataByDirection([panel.size * (panelCount - 1), 0]),
  286. 				margin: 0,
  287. 				circular: false,
  288. 				easing: options.panelEffect,
  289. 				deceleration: options.deceleration,
  290. 				bounce: this._getDataByDirection([ 0, bounce[1], 0, bounce[0] ])
  291. 			});
  293. 			this._setDefaultPanel(options.defaultIndex);
  294. 		},
  296. 		/**
  297. 		 * Set preview padding value
  298. 		 * @param {Array} padding
  299. 		 * @param {Boolean} build
  300. 		 */
  301. 		_setPadding: function(padding, build) {
  302. 			var horizontal = this.options.horizontal;
  303. 			var panel = this._conf.panel;
  304. 			var paddingSum = padding[0] + padding[1];
  305. 			var cssValue = {};
  307. 			if (paddingSum || !build) {
  308. 				cssValue.padding = (horizontal ?
  309. 					"0 " + padding.reverse().join("px 0 ") :
  310. 					padding.join("px 0 ")) + "px";
  311. 			}
  313. 			if (build) {
  314. 				cssValue.overflow = "hidden";
  315. 				cssValue.boxSizing = "border-box";
  316. 			}
  318. 			!$.isEmptyObject(cssValue) &&
  319. 				this.$wrapper.css(cssValue);
  321. 			panel.size = this.$wrapper[ horizontal ? "width" : "height" ]();
  322. 		},
  324. 		/**
  325. 		 * To fulfill minimum panel count cloning original node when circular or previewPadding option are set
  326. 		 * @return {Boolean} true : added clone node, false : not added
  327. 		 */
  328. 		_addClonePanels: function () {
  329. 			var panel = this._conf.panel;
  330. 			var panelCount = panel.origCount;
  331. 			var cloneCount = panel.minCount - panelCount;
  332. 			var list = panel.$list;
  333. 			var cloneNodes;
  335. 			// if panels are given less than required when circular option is set, then clone node to apply circular mode
  336. 			if (this.options.circular && panelCount < panel.minCount) {
  337. 				cloneNodes = list.clone();
  339. 				while (cloneNodes.length < cloneCount) {
  340. 					cloneNodes = cloneNodes.add(list.clone());
  341. 				}
  343. 				return this.$container.append(cloneNodes);
  344. 			}
  345. 		},
  347. 		/**
  348. 		 * Move panel's position within array
  349. 		 * @param {Number} count element counts to move
  350. 		 * @param {Boolean} append where the list to be appended(moved) (true: to the end, false: to the beginning)
  351. 		 */
  352. 		_movePanelPosition: function (count, append) {
  353. 			var panel = this._conf.panel;
  354. 			var list = panel.$list.toArray();
  355. 			var listToMove;
  357. 			listToMove = list.splice(append ? 0 : panel.count - count, count);
  358. 			panel.$list = $(append ? list.concat(listToMove) : listToMove.concat(list));
  359. 		},
  361. 		/**
  362. 		 * Set default panel to show
  363. 		 * @param {Number} index
  364. 		 */
  365. 		_setDefaultPanel: function (index) {
  366. 			var panel = this._conf.panel;
  367. 			var lastIndex = panel.count - 1;
  368. 			var coords;
  369. 			var baseIndex;
  371. 			if (this.options.circular) {
  372. 				// if default index is given, then move correspond panel to the first position
  373. 				if (index > 0 && index <= lastIndex) {
  374. 					this._movePanelPosition(index, true);
  375. 				}
  377. 				// set first panel's position according physical node length
  378. 				baseIndex = this._getBasePositionIndex();
  379. 				this._movePanelPosition(baseIndex, false);
  381. 				this._setPanelNo({
  382. 					no: index,
  383. 					currNo: index
  384. 				});
  385. 			} else {
  386. 				// if defaultIndex option is given, then move to that index panel
  387. 				if (index > 0 && index <= lastIndex) {
  388. 					this._setPanelNo({
  389. 						index: index,
  390. 						no: index,
  391. 						currIndex: index,
  392. 						currNo: index
  393. 					});
  395. 					coords = [ -(panel.size * index), 0];
  397. 					this._setTranslate(coords);
  398. 					this._setMovableCoord("setTo", [
  399. 						Math.abs(coords[0]), Math.abs(coords[1])
  400. 					], true, 0);
  401. 				}
  402. 			}
  403. 		},
  405. 		/**
  406. 		 * Arrange panels' position
  407. 		 * @param {Boolean} sort Need to sort panel's position
  408. 		 * @param {Number} indexToMove Number to move from current position (negative: left, positive: right)
  409. 		 */
  410. 		_arrangePanels: function (sort, indexToMove) {
  411. 			var conf = this._conf;
  412. 			var panel = conf.panel;
  413. 			var touch = conf.touch;
  414. 			var dirData = conf.dirData;
  415. 			var baseIndex;
  417. 			if (this.options.circular) {
  418. 				// when arranging panels, set flag to not trigger flick custom event
  419. 				conf.customEvent.flick = false;
  421. 				// move elements according direction
  422. 				if (sort) {
  423. 					indexToMove && (touch.direction = dirData[+!Boolean(indexToMove > 0)]);
  424. 					this._arrangePanelPosition(touch.direction, indexToMove);
  425. 				}
  427. 				// set index for base element's position
  428. 				baseIndex = this._getBasePositionIndex();
  430. 				this._setPanelNo({
  431. 					index: baseIndex,
  432. 					currIndex: baseIndex
  433. 				});
  435. 				// arrange MovableCoord's coord position
  436. 				conf.customEvent.flick = !!this._setMovableCoord("setTo", [
  437. 					panel.size * panel.index, 0
  438. 				], true, 0);
  439. 			}
  441. 			this._applyPanelsPos();
  442. 		},
  444. 		/**
  445. 		 * Set each panel's position in DOM
  446.  		 */
  447. 		_applyPanelsPos: function() {
  448. 			this._conf.panel.$list.each(
  449. 				$.proxy(this._applyPanelsCss, this)
  450. 			);
  451. 		},
  453. 		/**
  454. 		 * Set CSS style values to move elements
  455. 		 *
  456. 		 * Initialize setting up checking if browser support transform css property.
  457. 		 * If browser doesn't support transform, then use left/top properties instead.
  458. 		 */
  459. 		_setMoveStyle: (function () {
  460. 			return SUPPORT_TRANSFORM ?
  461. 				function ($element, coords) {
  462. 					$element.css("transform",
  463. 						ns.translate(coords[0], coords[1], this._conf.useLayerHack)
  464. 					);
  465. 				} :	function ($element, coords) {
  466. 					$element.css({ left: coords[0], top: coords[1] });
  467. 				};
  468. 		})(),
  470. 		/**
  471. 		 * Callback function for applying CSS values to each panels
  472. 		 *
  473. 		 * Need to be initialized before use, to set up for Android 2.x browsers or others.
  474. 		 */
  475. 		_applyPanelsCss: function () {
  476. 			var conf = this._conf;
  477. 			var dummyAnchorClassName = "__dummy_anchor";
  479. 			if (IS_ANDROID2) {
  480. 				conf.$dummyAnchor = $("." + dummyAnchorClassName);
  482. 				!conf.$dummyAnchor.length && this.$wrapper.append(
  483. 					conf.$dummyAnchor = $("<a href='javascript:void(0);' class='" +
  484. 						dummyAnchorClassName +
  485. 						"' style='position:absolute;height:0px;width:0px;'>")
  486. 				);
  488. 				this._applyPanelsCss = function (i, v) {
  489. 					var coords = this._getDataByDirection([
  490. 						(this._conf.panel.size * i) + "px", 0
  491. 					]);
  493. 					$(v).css({
  494. 						left: coords[0],
  495. 						top: coords[1]
  496. 					});
  497. 				};
  498. 			} else {
  499. 				this._applyPanelsCss = function (i, v) {
  500. 					var coords = this._getDataByDirection([
  501. 						SUPPORT_TRANSFORM ?
  502. 							(100 * i) + "%" :
  503. 							(this._conf.panel.size * i) + "px", 0]);
  505. 					this._setMoveStyle($(v), coords);
  506. 				};
  507. 			}
  508. 		},
  510. 		/**
  511. 		 * Adjust container's css value to handle Android 2.x link highlighting bug
  512. 		 *
  513. 		 * @param {String} phase
  514. 		 *    start - set left/top value to 0
  515. 		 *    end - set translate value to 0
  516. 		 * @param {Array} coords coordinate value
  517. 		 */
  518. 		_adjustContainerCss: function (phase, coords) {
  519. 			var conf = this._conf;
  520. 			var panel = conf.panel;
  521. 			var options = this.options;
  522. 			var horizontal = options.horizontal;
  523. 			var paddingTop = options.previewPadding[0];
  524. 			var container = this.$container;
  525. 			var value;
  527. 			if (IS_ANDROID2) {
  528. 				if (!coords) {
  529. 					coords = [-panel.size * panel.index, 0];
  530. 				}
  532. 				if (phase === "start") {
  533. 					container = container[0].style;
  534. 					value = parseInt(container[horizontal ? "left" : "top"], 10);
  536. 					if (horizontal) {
  537. 						value && (container.left = 0);
  538. 					} else {
  539. 						value !== paddingTop && (container.top = "0px");
  540. 					}
  542. 					this._setTranslate([-coords[+!options.horizontal], 0]);
  544. 				} else if (phase === "end") {
  545. 					coords = this._getCoordsValue(coords);
  547. 					container.css({
  548. 						left: coords.x,
  549. 						top: coords.y,
  550. 						transform: ns.translate(0, 0, conf.useLayerHack)
  551. 					});
  553. 					conf.$dummyAnchor[0].focus();
  554. 				}
  555. 			}
  556. 		},
  558. 		/**
  559. 		 * Set MovableCoord coord value
  560. 		 * @param {String} method
  561. 		 * @param {Array} coord
  562. 		 * @param {Boolean} isDirVal
  563. 		 * @param {Number} duration
  564. 		 * @return {eg.MovableCoord} MovableCoord instance
  565. 		 */
  566. 		_setMovableCoord: function (method, coord, isDirVal, duration) {
  567. 			if (isDirVal) {
  568. 				coord = this._getDataByDirection(coord);
  569. 			}
  571. 			return this._mcInst[method](coord[0], coord[1], duration);
  572. 		},
  574. 		/**
  575. 		 * Set hint for browser to decide efficient way of doing transform changes(or animation)
  576. 		 * https://dev.opera.com/articles/css-will-change-property/
  577. 		 */
  578. 		_setHint: function () {
  579. 			var value = "transform";
  580. 			this.$container.css("willChange", value);
  581. 			this._conf.panel.$list.css("willChange", value);
  582. 		},
  584. 		/**
  585. 		 * Get data according options.horizontal value
  586. 		 *
  587. 		 * @param {Array} value primary data to handle
  588. 		 * @return {Array}
  589. 		 */
  590. 		_getDataByDirection: function (value) {
  591. 			value = value.concat();
  592. 			!this.options.horizontal && value.reverse();
  593. 			return value;
  594. 		},
  596. 		/**
  597. 		 * Move nodes
  598. 		 * @param {Boolean} direction
  599. 		 * @param {Number} indexToMove
  600. 		 */
  601. 		_arrangePanelPosition: function (direction, indexToMove) {
  602. 			var next = direction === this._conf.dirData[0];
  603. 			this._movePanelPosition(Math.abs(indexToMove || 1), next);
  604. 		},
  606. 		/**
  607. 		 * Get the base position index of the panel
  608. 		 */
  609. 		_getBasePositionIndex: function () {
  610. 			return Math.floor(this._conf.panel.count / 2 - 0.1);
  611. 		},
  613. 		/**
  614. 		 * Bind events
  615. 		 * @param {Boolean} bind
  616. 		 */
  617. 		_bindEvents: function (bind) {
  618. 			var options = this.options;
  619. 			var $wrapper = this.$wrapper;
  620. 			var mcInst = this._mcInst;
  622. 			if (bind) {
  623. 				mcInst.bind($wrapper, {
  624. 					scale: this._getDataByDirection([-1, 0]),
  625. 					direction: MC["DIRECTION_" +
  626. 					(options.horizontal ? "HORIZONTAL" : "VERTICAL")],
  627. 					interruptable: false,
  628. 					inputType: options.inputType,
  629. 					thresholdAngle: options.thresholdAngle
  630. 				}).on({
  631. 					hold: $.proxy(this._holdHandler, this),
  632. 					change: $.proxy(this._changeHandler, this),
  633. 					release: $.proxy(this._releaseHandler, this),
  634. 					animationStart: $.proxy(this._animationStartHandler, this),
  635. 					animationEnd: $.proxy(this._animationEndHandler, this)
  636. 				});
  637. 			} else {
  638. 				mcInst.unbind($wrapper).off();
  639. 			}
  640. 		},
  642. 		/**
  643. 		 * 'hold' event handler
  644. 		 */
  645. 		_holdHandler: function (e) {
  646. 			var conf = this._conf;
  648. 			conf.touch.holdPos = e.pos;
  649. 			conf.touch.holding = true;
  650. 			conf.panel.changed = false;
  652. 			this._adjustContainerCss("start", e.pos);
  653. 		},
  655. 		/**
  656. 		 * 'change' event handler
  657. 		 */
  658. 		_changeHandler: function (e) {
  659. 			var conf = this._conf;
  660. 			var touch = conf.touch;
  661. 			var posIndex = +!this.options.horizontal;
  662. 			var pos = e.pos[posIndex];
  663. 			var holdPos = touch.holdPos[posIndex];
  664. 			var direction;
  665. 			var eventRes = null;
  666. 			var movedPx;
  668. 			this._setPointerEvents(e);  // for "click" bug
  670. 			/**
  671. 			 * This event is fired when panel moves.
  672. 			 * @ko 패널이 이동할 때 발생하는 이벤트
  673. 			 * @name eg.Flicking#flick
  674. 			 * @event
  675. 			 * @param {Object} param The object of data to be sent to an event <ko>이벤트에 전달되는 데이터 객체</ko>
  676. 			 * @param {String} param.eventType The name of the event<ko>이름명</ko>
  677. 			 * @param {Number} param.index Physical index number of the current panel element, which is relative to DOM (@deprecated since 1.3.0)<ko>현재 패널 엘리먼트의 물리적 인덱스 번호. DOM 엘리먼트를 기준으로 하는 인덱스 번호다 (@deprecated since 1.3.0)</ko>
  678. 			 * @param {Number} param.no Logical index number of the current panel element, which is relative to the panel content <ko>현재 패널 엘리먼트의 논리적 인덱스 번호. 패널 콘텐츠를 기준으로 하는 인덱스 번호다</ko>
  679. 			 * @param {Number} param.direction Direction of the movement (see eg.MovableCoord.DIRECTION_* constant) <ko>이동 방향(eg.MovableCoord.DIRECTION_* constant 참고)</ko>
  680. 			 * @param {Array} param.pos Start coordinate <ko>출발점 좌표</ko>
  681. 			 * @param {Number} param.pos.0 x-coordinate <ko>x 좌표</ko>
  682. 			 * @param {Number} param.pos.1 y-coordinate <ko>y 좌표</ko>
  683. 			 * @param {Boolean} param.holding Indicates whether a user holds an element on the screen of the device. <ko>사용자가 기기의 화면을 누르고 있는지 여부</ko>
  684. 			 * @param {Number} param.distance Distance moved from then starting point. According the move direction, positive on eg.MovableCoord.DIRECTION_LEFT/UP and negative on eg.MovableCoord.DIRECTION_RIGHT/DOWN <ko>시작점부터 이동된 거리의 값. 이동 방향에 따라 eg.MovableCoord.DIRECTION_LEFT/UP의 경우 양수를 eg.MovableCoord.DIRECTION_RIGHT/DOWN의 경우는 음수를 반환</ko>
  685. 			 */
  686. 			if (e.hammerEvent) {
  687. 				direction = e.hammerEvent.direction;
  689. 				// Adjust direction in case of diagonal touch move
  690. 				movedPx = e.hammerEvent[ this.options.horizontal ? "deltaX" : "deltaY" ];
  692. 				if (!~$.inArray(direction, conf.dirData)) {
  693. 					direction = conf.dirData[ +(Math.abs(touch.lastPos) <= movedPx) ];
  694. 				}
  696. 				touch.lastPos = movedPx;
  697. 			} else {
  698. 				touch.lastPos = null;
  699. 			}
  701. 			conf.customEvent.flick && (eventRes = this._triggerEvent(EVENTS.flick, {
  702. 				pos: e.pos,
  703. 				holding: e.holding,
  704. 				direction: direction || touch.direction,
  705. 				distance: pos - (holdPos || (touch.holdPos[posIndex] = pos))
  706. 			}));
  708. 			(eventRes || eventRes === null) && this._setTranslate([ -pos, 0 ]);
  709. 		},
  711. 		/**
  712. 		 * 'release' event handler
  713. 		 */
  714. 		_releaseHandler: function (e) {
  715. 			var touch = this._conf.touch;
  716. 			var pos = e.destPos;
  717. 			var posIndex = +!this.options.horizontal;
  718. 			var holdPos = touch.holdPos[posIndex];
  719. 			var panelSize = this._conf.panel.size;
  721. 			touch.distance = e.depaPos[posIndex] - touch.holdPos[posIndex];
  723. 			touch.direction = this._conf.dirData[
  724. 				+!Boolean(touch.holdPos[posIndex] < e.depaPos[posIndex])
  725. 			];
  727. 			pos[posIndex] = Math.max(
  728. 				holdPos - panelSize, Math.min(holdPos, pos[posIndex])
  729. 			);
  731. 			touch.destPos[posIndex] =
  732. 				pos[posIndex] = Math.round(pos[posIndex] / panelSize) * panelSize;
  734. 			touch.distance === 0 && this._adjustContainerCss("end");
  735. 			touch.holding = false;
  737. 			this._setPointerEvents();  // for "click" bug
  738. 		},
  740. 		/**
  741. 		 * 'animationStart' event handler
  742. 		 */
  743. 		_animationStartHandler: function (e) {
  744. 			var conf = this._conf;
  745. 			var panel = conf.panel;
  746. 			var customEvent = conf.customEvent;
  748. 			panel.animating = true;
  750. 			if (!customEvent.restoreCall && e.hammerEvent &&
  751. 				this._setPhaseValue("start", {
  752. 					depaPos: e.depaPos,
  753. 					destPos: e.destPos
  754. 				}) === false) {
  755. 				e.stop();
  756. 			}
  758. 			if (e.hammerEvent) {
  759. 				e.duration = this.options.duration;
  761. 				e.destPos[+!this.options.horizontal] =
  762. 					panel.size * (
  763. 						panel.index + conf.indexToMove
  764. 					);
  765. 			}
  767. 			if (this._isMovable()) {
  768. 				!customEvent.restoreCall && (customEvent.restore = false);
  769. 			} else {
  770. 				this._triggerBeforeRestore(e);
  771. 			}
  772. 		},
  774. 		/**
  775. 		 * 'animationEnd' event handler
  776. 		 */
  777. 		_animationEndHandler: function () {
  778. 			this._setPhaseValue("end");
  780. 			this._conf.panel.animating = false;
  781. 			this._triggerRestore();
  782. 		},
  784. 		/**
  785. 		 * Set container's height value according to children's height
  786. 		 * @param {Number} direction
  787. 		 */
  788. 		_setAdaptiveHeight: function(direction) {
  789. 			var $panel;
  790. 			var $first;
  791. 			var $children;
  792. 			var height;
  793. 			var conf = this._conf;
  794. 			var indexToMove = conf.indexToMove;
  796. 			$panel = indexToMove === 0 ?
  798. 				// panel moved by 1
  799. 				this[ "get" + (
  800. 					direction === MC.DIRECTION_LEFT && "Next" ||
  801. 					direction === MC.DIRECTION_RIGHT && "Prev" || ""
  802. 				) + "Element" ]() :
  804. 				// panel moved by .moveTo()
  805. 				conf.panel.$list.eq(
  806. 					conf.panel.currIndex + indexToMove
  807. 				);
  809. 			$first = $panel.find(":first");
  810. 			height = $first.attr(DATA_HEIGHT);
  812. 			if (!height) {
  813. 				$children = $panel.children();
  814. 				height = ($children.length > 1 ? $panel.css("height", "auto") : $first)
  815. 					.outerHeight(true);
  817. 				$first.attr(DATA_HEIGHT, height);
  818. 			}
  820. 			this.$wrapper.height(height);
  821. 		},
  823. 		/**
  824. 		 * Trigger beforeRestore event
  825. 		 * @param {Object} e event object
  826. 		 */
  827. 		_triggerBeforeRestore: function(e) {
  828. 			var conf = this._conf;
  829. 			var touch = conf.touch;
  831. 			// reverse direction value when restore
  832. 			touch.direction = ~~conf.dirData.join("").replace(touch.direction, "");
  834. 			/**
  835. 			 * This event is fired before an element is restored to its original position when user action is done while the element is not dragged until a certain distance threshold is reached
  836. 			 * @ko 다음 패널로 바뀌는 기준 이동 거리만큼 이동하기 전에 사용자의 동작이 끝났을 때 원래 패널로 복원되기 전에 발생하는 이벤트
  837. 			 * @name eg.Flicking#beforeRestore
  838. 			 * @event
  839. 			 * @param {Object} param The object of data to be sent to an event <ko>이벤트에 전달되는 데이터 객체</ko>
  840. 			 * @param {String} param.eventType The name of the event <ko>이름명</ko>
  841. 			 * @param {Number} param.index Physical index number of the current panel element, which is relative to DOM. (@deprecated since 1.3.0)<ko>현재 패널 엘리먼트의 물리적 인덱스 번호. DOM 엘리먼트를 기준으로 하는 인덱스 번호다. (@deprecated since 1.3.0)</ko>
  842. 			 * @param {Number} param.no Logical index number of the current panel element, which is relative to the panel content.<ko>현재 패널 엘리먼트의 논리적 인덱스 번호. 패널 콘텐츠를 기준으로 하는 인덱스 번호다</ko>
  843. 			 * @param {Number} param.direction Direction of the movement (see eg.MovableCoord.DIRECTION_* constant) <ko>이동 방향(eg.MovableCoord.DIRECTION_* constant 참고)</ko>
  844. 			 * @param {Array} param.depaPos Start coordinate <ko>출발점 좌표</ko>
  845. 			 * @param {Number} param.depaPos.0 x-coordinate <ko>x 좌표</ko>
  846. 			 * @param {Number} param.depaPos.1 y-coordinate <ko>y 좌표</ko>
  847. 			 * @param {Array} param.destPos End coordinate <ko>도착점 좌표</ko>
  848. 			 * @param {Number} param.destPos.0 x-coordinate <ko>x 좌표</ko>
  849. 			 * @param {Number} param.destPos.1 y-coordinate <ko>y 좌표</ko>
  850. 			 */
  851. 			conf.customEvent.restore = this._triggerEvent(EVENTS.beforeRestore, {
  852. 				depaPos: e.depaPos,
  853. 				destPos: e.destPos
  854. 			});
  856. 			if (!conf.customEvent.restore) {
  857. 				"stop" in e && e.stop();
  858. 				conf.panel.animating = false;
  859. 			}
  860. 		},
  862. 		/**
  863. 		 * Trigger restore event
  864. 		 */
  865. 		_triggerRestore: function() {
  866. 			var customEvent = this._conf.customEvent;
  868. 			/**
  869. 			 * This event is fired after an element is restored to its original position when user action is done while the element is not dragged until a certain distance threshold is reached.
  870. 			 * @ko 다음 패널로 바뀌는 기준 이동 거리만큼 이동하기 전에 사용자의 동작이 끝났을 때 원래 패널로 복원된 다음 발생하는 이벤트
  871. 			 * @name eg.Flicking#restore
  872. 			 * @event
  873. 			 * @param {Object} param The object of data to be sent to an event <ko>이벤트에 전달되는 데이터 객체</ko>
  874. 			 * @param {String} param.eventType The name of the event <ko>이름명</ko>
  875. 			 * @param {Number} param.index Physical index number of the current panel element, which is relative to DOM(@deprecated since 1.3.0)<ko>현재 패널 엘리먼트의 물리적 인덱스 번호. DOM 엘리먼트를 기준으로 하는 인덱스 번호다 (@deprecated since 1.3.0)</ko>
  876. 			 * @param {Number} param.no Logical index number of the current panel element, which is relative to the panel content. <ko>현재 패널 엘리먼트의 논리적 인덱스 번호. 패널 콘텐츠를 기준으로 하는 인덱스 번호다</ko>
  877. 			 * @param {Number} param.direction Direction of the panel move (see eg.MovableCoord.DIRECTION_* constant) <ko>이동 방향(eg.MovableCoord.DIRECTION_* constant 참고)</ko>
  878. 			 */
  879. 			customEvent.restore && this._triggerEvent(EVENTS.restore);
  880. 			customEvent.restoreCall = false;
  881. 		},
  883. 		/**
  884. 		 * Set value when panel changes
  885. 		 * @param {String} phase - [start|end]
  886. 		 * @param {Object} pos
  887. 		 */
  888. 		_setPhaseValue: function (phase, pos) {
  889. 			var conf = this._conf;
  890. 			var options = this.options;
  891. 			var panel = conf.panel;
  893. 			if (phase === "start" && (panel.changed = this._isMovable())) {
  894. 				/**
  895. 				 * This event is fired before flicking starts
  896. 				 * @ko 플리킹이 시작하기 전에 발생하는 이벤트
  897. 				 * @name eg.Flicking#beforeFlickStart
  898. 				 * @event
  899. 				 * @param {Object} param The object of data to be sent to an event <ko>이벤트에 전달되는 데이터 객체</ko>
  900. 				 * @param {String} param.eventType The name of the event <ko>이름명</ko>
  901. 				 * @param {Number} param.index Physical index number of the current panel element, which is relative to DOM. (@deprecated since 1.3.0)<ko>현재 패널 엘리먼트의 물리적 인덱스 번호. DOM 엘리먼트를 기준으로 하는 인덱스 번호다 (@deprecated since 1.3.0)</ko>
  902. 				 * @param {Number} param.no Logical index number of the current panel element, which is relative to the panel content.<ko>현재 패널 엘리먼트의 논리적 인덱스 번호. 패널 콘텐츠를 기준으로 하는 인덱스 번호다</ko>
  903. 				 * @param {Number} param.direction Direction of the movement (see eg.MovableCoord.DIRECTION_* constant) <ko>−	이동 방향(eg.MovableCoord.DIRECTION_* constant 참고)</ko>
  904. 				 * @param {Array} param.depaPos Start coordinate <ko>출발점 좌표</ko>
  905. 				 * @param {Number} param.depaPos.0 x-coordinate <ko>x 좌표</ko>
  906. 				 * @param {Number} param.depaPos.1 y-coordinate <ko>y 좌표</ko>
  907. 				 * @param {Array} param.destPos End coordinate <ko>도착점 좌표</ko>
  908. 				 * @param {Number} param.destPos.0 x-coordinate <ko>x 좌표</ko>
  909. 				 * @param {Number} param.destPos.1 y-coordinate <ko>y 좌표</ko>
  910. 				 */
  911. 				if (!this._triggerEvent(EVENTS.beforeFlickStart, pos)) {
  912. 					return panel.changed = panel.animating = false;
  913. 				} else {
  914. 					options.adaptiveHeight && this._setAdaptiveHeight(conf.touch.direction);
  915. 				}
  917. 				conf.indexToMove === 0 && this._setPanelNo();
  918. 			} else if (phase === "end") {
  919. 				if (options.circular && panel.changed) {
  920. 					this._arrangePanels(true, conf.indexToMove);
  921. 				}
  923. 				!IS_ANDROID2 && this._setTranslate([-panel.size * panel.index, 0]);
  924. 				conf.touch.distance = conf.indexToMove = 0;
  926. 				/**
  927. 				 * This event is fired after panel moves.
  928. 				 * @ko 패널이 이동한 다음 발생하는 이벤트
  929. 				 * @name eg.Flicking#flickEnd
  930. 				 * @event
  931. 				 * @param {Object} param The object of data to be sent to an event <ko>이벤트에 전달되는 데이터 객체</ko>
  932. 				 * @param {String} param.eventType The name of the event <ko>이름명</ko>
  933. 				 * @param {Number} param.index Physical index number of the current panel element, which is relative to DOM (@deprecated since 1.3.0)<ko>현재 패널 엘리먼트의 물리적 인덱스 번호. DOM 엘리먼트를 기준으로 하는 인덱스 번호다 (@deprecated since 1.3.0)</ko>
  934. 				 * @param {Number} param.no Logical index number of the current panel element, which is relative to the panel content. <ko>현재 패널 엘리먼트의 논리적 인덱스 번호. 패널 콘텐츠를 기준으로 하는 인덱스 번호다.</ko>
  935. 				 * @param {Number} param.direction Direction of the movemen (see eg.MovableCoord.DIRECTION_* constant) <ko>−	이동 방향(eg.MovableCoord.DIRECTION_* constant 참고</ko>
  936. 				 */
  937. 				panel.changed && this._triggerEvent(EVENTS.flickEnd);
  938. 			}
  940. 			this._adjustContainerCss(phase);
  941. 		},
  943. 		/**
  944. 		 * Get positive or negative according direction
  945. 		 */
  946. 		_getNumByDirection: function() {
  947. 			var conf = this._conf;
  948. 			return conf.touch.direction === conf.dirData[0] ? 1 : -1;
  949. 		},
  951. 		/**
  952. 		 * Revert panel number
  953. 		 */
  954. 		_revertPanelNo: function() {
  955. 			var panel = this._conf.panel;
  956. 			var num = this._getNumByDirection();
  958. 			var index = panel.currIndex >= 0 ? panel.currIndex : panel.index - num;
  959. 			var no = panel.currNo >= 0 ? panel.currNo : panel.no - num;
  961. 			this._setPanelNo({
  962. 				index: index,
  963. 				no: no
  964. 			});
  965. 		},
  967. 		/**
  968. 		 * Set the panel number
  969. 		 * @param {Object} obj number object
  970. 		 */
  971. 		_setPanelNo: function (obj) {
  972. 			var panel = this._conf.panel;
  973. 			var count = panel.origCount - 1;
  974. 			var num = this._getNumByDirection();
  976. 			if ($.isPlainObject(obj)) {
  977. 				$.each(obj, function(i, v) {
  978. 					panel[i] = v;
  979. 				});
  981. 			} else {
  982. 				// remember current value
  983. 				panel.currIndex = panel.index;
  984. 				panel.currNo = panel.no;
  986. 				panel.index += num;
  987. 				panel.no += num;
  988. 			}
  990. 			if (panel.no > count) {
  991. 				panel.no = 0;
  992. 			} else if (panel.no < 0) {
  993. 				panel.no = count;
  994. 			}
  995. 		},
  997. 		/**
  998. 		 * Set pointerEvents css property on container element due to the iOS click bug
  999. 		 * @param {Event} e
  1000. 		 */
  1001. 		_setPointerEvents: function (e) {
  1002. 			var pointer = this.$container.css("pointerEvents");
  1003. 			var val;
  1005. 			if (e && e.holding &&
  1006. 				e.hammerEvent && e.hammerEvent.preventSystemEvent &&
  1007. 				pointer !== "none"
  1008. 			) {
  1009. 				val = "none";
  1010. 			} else if (!e && pointer !== "auto") {
  1011. 				val = "auto";
  1012. 			}
  1014. 			val && this.$container.css("pointerEvents", val);
  1015. 		},
  1017. 		/**
  1018. 		 * Get coordinate value with unit
  1019. 		 * @param coords {Array} x,y numeric value
  1020. 		 * @return {Object} x,y coordinate value with unit
  1021. 		 */
  1022. 		_getCoordsValue: function (coords) {
  1023. 			// the param comes as [ val, 0 ], whatever the direction. So reorder the value depend the direction.
  1024. 			coords = this._getDataByDirection(coords);
  1026. 			return {
  1027. 				x: this._getUnitValue(coords[0]),
  1028. 				y: this._getUnitValue(coords[1])
  1029. 			};
  1030. 		},
  1032. 		/**
  1033. 		 * Set translate property value
  1034. 		 * @param {Array} coords coordinate x,y value
  1035. 		 */
  1036. 		_setTranslate: function (coords) {
  1037. 			coords = this._getCoordsValue(coords);
  1038. 			this._setMoveStyle(this.$container, [ coords.x, coords.y ]);
  1039. 		},
  1041. 		/**
  1042. 		 * Return unit formatted value
  1043. 		 * @param {Number|String} val
  1044. 		 * @return {String} val Value formatted with unit
  1045. 		 */
  1046. 		_getUnitValue: function (val) {
  1047. 			var rx = /(?:[a-z]{2,}|%)$/;
  1048. 			return (parseInt(val, 10) || 0) + (String(val).match(rx) || "px");
  1049. 		},
  1051. 		/**
  1052. 		 * Check if panel passed through threshold pixel
  1053. 		 */
  1054. 		_isMovable: function () {
  1055. 			var options = this.options;
  1056. 			var conf = this._conf;
  1057. 			var mcInst = this._mcInst;
  1058. 			var panel = conf.panel;
  1059. 			var isMovable = Math.abs(this._conf.touch.distance) >= options.threshold;
  1060. 			var max;
  1061. 			var currPos;
  1062. 			var touchDirection;
  1064. 			if (!options.circular && isMovable) {
  1065. 				touchDirection = conf.touch.direction;
  1066. 				max = this._getDataByDirection(mcInst.options.max)[0];
  1067. 				currPos = this._getDataByDirection(mcInst.get())[0];
  1069. 				// if current position out of range
  1070. 				if (( panel.currNo === 0 && touchDirection === conf.dirData[1] ||  // first panel
  1071. 					  panel.count - 1 === panel.currNo && touchDirection === conf.dirData[0]  // last panel
  1072. 					) && (currPos < 0 || currPos > max)) {
  1073. 					return false;
  1074. 				}
  1075. 			}
  1077. 			return isMovable;
  1078. 		},
  1080. 		/**
  1081. 		 * Trigger custom events
  1082. 		 * @param {String} name - event name
  1083. 		 * @param {Object} param - additional event value
  1084. 		 * @return {Boolean}
  1085. 		 */
  1086. 		_triggerEvent: function (name, param) {
  1087. 			var conf = this._conf;
  1088. 			var panel = conf.panel;
  1090. 			// pass changed panel no only on 'flickEnd' event
  1091. 			if (name === EVENTS.flickEnd) {
  1092. 				panel.currNo = panel.no;
  1093. 				panel.currIndex = panel.index;
  1094. 			}
  1096. 			return this.trigger(conf.eventPrefix + name, $.extend({
  1097. 				eventType: name,
  1098. 				index: panel.currIndex,
  1099. 				no: panel.currNo,
  1100. 				direction: conf.touch.direction
  1101. 			}, param));
  1102. 		},
  1104. 		/**
  1105. 		 * Get next/prev panel element/index.
  1106. 		 * @param {Boolean} direction
  1107. 		 * @param {Boolean} element - true:to get element, false:to get index
  1108. 		 * @param {Number} physical - true : physical, false : logical
  1109. 		 * @return {jQuery|Number}
  1110. 		 */
  1111. 		_getElement: function (direction, element, physical) {
  1112. 			var panel = this._conf.panel;
  1113. 			var circular = this.options.circular;
  1114. 			var pos = panel.currIndex;
  1115. 			var next = direction === this._conf.dirData[0];
  1116. 			var result = null;
  1117. 			var total;
  1118. 			var index;
  1119. 			var currentIndex;
  1121. 			if (physical) {
  1122. 				total = panel.count;
  1123. 				index = pos;
  1124. 			} else {
  1125. 				total = panel.origCount;
  1126. 				index = panel.currNo;
  1127. 			}
  1129. 			currentIndex = index;
  1131. 			if (next) {
  1132. 				if (index < total - 1) {
  1133. 					index++;
  1134. 				} else if (circular) {
  1135. 					index = 0;
  1136. 				}
  1137. 			} else {
  1138. 				if (index > 0) {
  1139. 					index--;
  1140. 				} else if (circular) {
  1141. 					index = total - 1;
  1142. 				}
  1143. 			}
  1145. 			if (currentIndex !== index) {
  1146. 				result = element ? $(panel.$list[next ? pos + 1 : pos - 1]) : index;
  1147. 			}
  1149. 			return result;
  1150. 		},
  1152. 		/**
  1153. 		 * Set value to force move panels when duration is 0
  1154. 		 * @param {Boolean} next
  1155. 		 */
  1156. 		_setValueToMove: function (next) {
  1157. 			var conf = this._conf;
  1159. 			conf.touch.distance = this.options.threshold + 1;
  1160. 			conf.touch.direction = conf.dirData[ +!next ];
  1161. 		},
  1163. 		/**
  1164. 		 * Check and parse value to number
  1165. 		 * @param {Number|String} val
  1166. 		 * @param {Number} defVal
  1167. 		 * @return {Number}
  1168. 		 */
  1169. 		_getNumValue: function (val, defVal) {
  1170. 			return isNaN(val = parseInt(val, 10)) ? defVal : val;
  1171. 		},
  1173. 		/**
  1174. 		 * Returns the index number of the current panel element.
  1175. 		 * @ko 현재 패널 엘리먼트의 인덱스 번호를 반환한다
  1176. 		 * @method eg.Flicking#getIndex
  1177. 		 * @param {Boolean} [physical=false] Types of index numbers<br>- true: Indicates physical index numbers relative to DOM.<br>- false: Indicates logical index numbers relative to the panel content. <ko>−	인덱스 번호의 종류<br>- true: 물리적 인덱스 번호. DOM 엘리먼트를 기준으로 하는 인덱스 번호다.<br>- false: 논리적 인덱스 번호. 패널 콘텐츠를 기준으로 하는 인덱스 번호다.</ko>
  1178. 		 * @return {Number} Index number of the current panel element <ko>현재 패널의 인덱스 번호</ko>
  1179. 		 */
  1180. 		getIndex: function (physical) {
  1181. 			return this._conf.panel[ physical ? "currIndex" : "currNo" ];
  1182. 		},
  1184. 		/**
  1185. 		 * Returns the reference of the current panel element.
  1186. 		 * @ko 현재 패널 엘리먼트의 레퍼런스를 반환한다
  1187. 		 * @method eg.Flicking#getElement
  1188. 		 * @return {jQuery} Current element <ko>현재 엘리먼트</ko>
  1189. 		 */
  1190. 		getElement: function () {
  1191. 			var panel = this._conf.panel;
  1192. 			return $(panel.$list[ panel.currIndex ]);
  1193. 		},
  1195. 		/**
  1196. 		 * Returns the reference of the next panel element.
  1197. 		 * @ko 다음 패널 엘리먼트의 레퍼런스를 반환한다.
  1198. 		 * @method eg.Flicking#getNextElement
  1199. 		 * @return {jQuery|null} Next panel element or null if it does not exist.<ko>다음 패널 엘리먼트. 패널이 없으면 'null'을 반환한다.</ko>
  1200. 		 */
  1201. 		getNextElement: function () {
  1202. 			return this._getElement(this._conf.dirData[0], true);
  1203. 		},
  1205. 		/**
  1206. 		 * Returns the index number of the next panel element.
  1207. 		 * @ko 다음 패널 엘리먼트의 인덱스 번호를 반환한다
  1208. 		 * @method eg.Flicking#getNextIndex
  1209. 		 * @param {Boolean} [physical=false] Types of index numbers<br>- true: Indicates physical index numbers relative to DOM.<br>- false: Indicates logical index numbers relative to the panel content. <ko>−	인덱스 번호의 종류<br>- true: 물리적 인덱스 번호. DOM 엘리먼트를 기준으로 하는 인덱스 번호다.<br>- false: 논리적 인덱스 번호. 패널 콘텐츠를 기준으로 하는 인덱스 번호다.</ko>
  1210. 		 * @return {Number|null} Index number of the next panel element or null if it does not exist. <ko>다음 패널 엘리먼트의 인덱스 번호. 패널이 없으면 'null'을 반환한다</ko>
  1211. 		 */
  1212. 		getNextIndex: function (physical) {
  1213. 			return this._getElement(this._conf.dirData[0], false, physical);
  1214. 		},
  1216. 		/**
  1217. 		 * Returns the references of whole panel elements.
  1218. 		 * @ko 패널을 구성하는 모든 엘리먼트의 레퍼런스를 반환한다
  1219. 		 * @method eg.Flicking#getAllElements
  1220. 		 * @return {jQuery} Whole panel elements <ko>모든 패널 엘리먼트</ko>
  1221. 		 */
  1222. 		getAllElements: function () {
  1223. 			return this._conf.panel.$list;
  1224. 		},
  1226. 		/**
  1227. 		 * Returns the reference of the previous panel element.
  1228. 		 * @ko 이전 패널 엘리먼트의 레퍼런스를 반환한다.
  1229. 		 * @method eg.Flicking#getPrevElement
  1230. 		 * @return {jQuery|null} Previous panel element or null if it does not exist. <ko>이전 패널 엘리먼트. 패널이 없으면 'null'을 반환한다</ko>
  1231. 		 */
  1232. 		getPrevElement: function () {
  1233. 			return this._getElement(this._conf.dirData[1], true);
  1234. 		},
  1236. 		/**
  1237. 		 * Returns the index number of the previous panel element.
  1238. 		 * @ko 이전 패널 엘리먼트의 인덱스 번호를 반환한다
  1239. 		 * @method eg.Flicking#getPrevIndex
  1240. 		 * @param {Boolean} [physical=false] Types of index numbers<br>- true: Indicates physical index numbers relative to DOM.<br>- false: Indicates logical index numbers relative to the panel content. <ko>−	인덱스 번호의 종류<br>- true: 물리적 인덱스 번호. DOM 엘리먼트를 기준으로 하는 인덱스 번호다.<br>- false: 논리적 인덱스 번호. 패널 콘텐츠를 기준으로 하는 인덱스 번호다.</ko>
  1241. 		 * @return {Number|null} Previous element index value or null if no more element exist<ko>이전 패널 인덱스 번호. 패널이 없는 경우에는 null</ko>
  1242. 		 */
  1243. 		getPrevIndex: function (physical) {
  1244. 			return this._getElement(this._conf.dirData[1], false, physical);
  1245. 		},
  1247. 		/**
  1248. 		 * Returns the total number of whole panel elements.
  1249. 		 * @ko 전체 패널 엘리먼트의 개수를 반환한다
  1250. 		 * @method eg.Flicking#getTotalCount
  1251. 		 * @deprecated since 1.3.0
  1252. 		 * @param {Boolean} [physical=false] Number of elements relative to (true: DOM, false: panel content)<ko>엘리먼트 개수의 기준(true: DOM 엘리먼트 기준, false: 패널 콘텐츠 기준)</ko>
  1253. 		 * @return {Number} Total number of whole panel elements <ko>모든 패널 엘리먼트의 개수</ko>
  1254. 		 */
  1255. 		getTotalCount: function (physical) {
  1256. 			return this._conf.panel[ physical ? "count" : "origCount" ];
  1257. 		},
  1259. 		/**
  1260. 		 * Checks whether the animated panel is playing.
  1261. 		 * @ko 패널 이동 애니메이션이 진행 중인지 확인한다.
  1262. 		 * @method eg.Flicking#isPlaying
  1263. 		 * @return {Boolean} Indicates whether the animated panel is playing <ko>패널 이동 애니메이션 진행 중 여부</ko>
  1264. 		 */
  1265. 		isPlaying: function () {
  1266. 			return this._conf.panel.animating;
  1267. 		},
  1269. 		/**
  1270. 		 * Move panel to the given direction
  1271. 		 * @param {Boolean} next
  1272. 		 * @param {Number} duration
  1273. 		 */
  1274. 		_movePanel: function (next, duration) {
  1275. 			var conf = this._conf;
  1276. 			var panel = conf.panel;
  1277. 			var options = this.options;
  1279. 			if (panel.animating || conf.touch.holding) {
  1280. 				return;
  1281. 			}
  1283. 			this._setValueToMove(next);
  1285. 			if (options.circular ||
  1286. 				this[next ? "getNextIndex" : "getPrevIndex"]() != null
  1287. 			) {
  1288. 				this._movePanelByPhase("setBy", [
  1289. 					panel.size * (next ? 1 : -1), 0
  1290. 				], duration);
  1291. 			}
  1293. 			return this;
  1294. 		},
  1296. 		/**
  1297. 		 * Move panel applying start/end phase value
  1298. 		 * @param {String} method movableCoord method name
  1299. 		 * @param {Object} coords coordinate array value
  1300. 		 * @param {Number} duration duration value
  1301. 		 */
  1302. 		_movePanelByPhase: function(method, coords, duration) {
  1303. 			duration = this._getNumValue(duration, this.options.duration);
  1305. 			if (this._setPhaseValue("start") !== false) {
  1306. 				this._setMovableCoord(method, coords, true, duration);
  1307. 				!duration && this._setPhaseValue("end");
  1308. 			}
  1309. 		},
  1311. 		/**
  1312. 		 * Moves an element to the next panel.
  1313. 		 * @ko 다음 패널로 이동한다.
  1314. 		 * @method eg.Flicking#next
  1315. 		 * @param {Number} [duration=options.duration] Duration of the panel movement (unit: ms) <ko>패널 이동 애니메이션 진행 시간(단위: ms)</ko>
  1316. 		 * @return {eg.Flicking} An instance of a module itself <ko>모듈 자신의 인스턴스</ko>
  1317. 		 */
  1318. 		next: function (duration) {
  1319. 			return this._movePanel(true, duration);
  1320. 		},
  1322. 		/**
  1323. 		 * Moves an element to the previous panel.
  1324. 		 * @ko 이전 패널로 이동한다.
  1325. 		 * @method eg.Flicking#prev
  1326. 		 * @param {Number} [duration=options.duration] Duration of the panel movement (unit: ms) <ko>패널 이동 애니메이션 진행 시간(단위: ms)</ko>
  1327. 		 * @return {eg.Flicking} An instance of a module itself<ko>모듈 자신의 인스턴스</ko>
  1328. 		 */
  1329. 		prev: function (duration) {
  1330. 			return this._movePanel(false, duration);
  1331. 		},
  1333. 		/**
  1334. 		 * Moves an element to the indicated panel.
  1335. 		 * @ko 지정한 패널로 이동한다.
  1336. 		 * @method eg.Flicking#moveTo
  1337. 		 * @param {Number} no Logical index number of the target panel element, which is relative to the panel content. <ko>이동할 패널 엘리먼트의 논리적 인덱스 번호. 패널 콘텐츠를 기준으로 하는 인덱스 번호다</ko>
  1338. 		 * @param {Number} [duration=options.duration] Duration of the panel movement (unit: ms) <ko>패널 이동 애니메이션 진행 시간(단위: ms)</ko>
  1339. 		 * @return {eg.Flicking} An instance of a module itself<ko>모듈 자신의 인스턴스</ko>
  1340. 		 */
  1341. 		moveTo: function (no, duration) {
  1342. 			var conf = this._conf;
  1343. 			var panel = conf.panel;
  1344. 			var circular = this.options.circular;
  1345. 			var currentIndex = panel.index;
  1346. 			var indexToMove;
  1347. 			var isPositive;
  1349. 			no = this._getNumValue(no, -1);
  1351. 			if (no < 0 || no >= panel.origCount || no === panel.no ||
  1352. 				panel.animating || conf.touch.holding) {
  1353. 				return this;
  1354. 			}
  1356. 			indexToMove = no - (circular ? panel.no : currentIndex);
  1357. 			isPositive = indexToMove > 0;
  1359. 			// check for real panel count which can be moved on each sides in circular mode
  1360. 			if (circular &&
  1361. 				Math.abs(indexToMove) >
  1362. 					(isPositive ? panel.count - (currentIndex + 1) : currentIndex)) {
  1363. 				indexToMove = indexToMove + (isPositive ? -1 : 1) * panel.count;
  1364. 				isPositive = indexToMove > 0;
  1365. 			}
  1367. 			this._setPanelNo(circular ? { no: no } : { no: no, index: no });
  1368. 			this._conf.indexToMove = indexToMove;
  1369. 			this._setValueToMove(isPositive);
  1371. 			this._movePanelByPhase(
  1372. 				circular ? "setBy" : "setTo",
  1373. 				[ panel.size * (circular ? indexToMove : no), 0 ],
  1374. 				duration
  1375. 			);
  1377. 			return this;
  1378. 		},
  1380. 		/**
  1381. 		 * Update panel's previewPadding size according options.previewPadding
  1382. 		 */
  1383. 		_checkPadding: function () {
  1384. 			var options = this.options;
  1385. 			var previewPadding = options.previewPadding.concat();
  1386. 			var padding = this.$wrapper.css("padding").split(" ");
  1388. 			options.horizontal && padding.reverse();
  1390. 			// get current padding value
  1391. 			padding = padding.length === 2 ?
  1392. 				[ padding[0], padding[0] ] : [ padding[0], padding[2] ];
  1394. 			padding = $.map(padding, function(num) {
  1395. 				return parseInt(num, 10);
  1396. 			});
  1398. 			// update padding when current and given are different
  1399. 			if (previewPadding.length === 2 &&
  1400. 				previewPadding[0] !== padding[0] || previewPadding[1] !== padding[1]) {
  1402. 				this._setPadding(previewPadding);
  1403. 			}
  1404. 		},
  1406. 		/**
  1407. 		 * Updates the size of the panel.
  1408. 		 * @ko 패널의 크기를 갱신한다
  1409. 		 * @method eg.Flicking#resize
  1410. 		 * @return {eg.Flicking} An instance of a module itself<ko>모듈 자신의 인스턴스</ko>
  1411. 		 * @example
  1412. 			var some = new eg.Flicking("#mflick", {
  1413. 					previewPadding: [10,10]
  1414. 				});
  1416. 			// when device orientaion changes
  1417. 			some.resize();
  1419. 			// or when changes previewPadding option from its original value
  1420. 			some.options.previewPadding = [20, 30];
  1421. 			some.resize();
  1422. 		 */
  1423. 		resize: function () {
  1424. 			var conf = this._conf;
  1425. 			var options = this.options;
  1426. 			var panel = conf.panel;
  1427. 			var horizontal = options.horizontal;
  1428. 			var panelSize;
  1429. 			var maxCoords;
  1431. 			if (~~options.previewPadding.join("")) {
  1432. 				this._checkPadding();
  1433. 				panelSize = panel.size;
  1434. 			} else if (horizontal) {
  1435. 				panelSize = panel.size = this.$wrapper.width();
  1436. 			}
  1438. 			maxCoords = this._getDataByDirection([panelSize * (panel.count - 1), 0]);
  1440. 			// resize elements
  1441. 			horizontal && this.$container.width(maxCoords[0] + panelSize);
  1442. 			panel.$list.css(horizontal ? "width" : "height", panelSize);
  1444. 			// remove data-height attribute and re-evaluate panel's height
  1445. 			if (options.adaptiveHeight) {
  1446. 				var $panel = this.$container.find("[" + DATA_HEIGHT + "]");
  1448. 				$panel.size() && $panel.attr(DATA_HEIGHT, null) &&
  1449. 					this._setAdaptiveHeight();
  1450. 			}
  1452. 			this._mcInst.options.max = maxCoords;
  1453. 			this._setMovableCoord("setTo", [panelSize * panel.index, 0], true, 0);
  1455. 			if (IS_ANDROID2) {
  1456. 				this._applyPanelsPos();
  1457. 				this._adjustContainerCss("end");
  1458. 			}
  1460. 			return this;
  1461. 		},
  1463. 		/**
  1464. 		 * Restores an element to its original position when it movement stops while the element is not dragged until a certain distance threshold is reached.
  1465. 		 * @ko 다음 패널로 바뀌기 전에 패널 이동이 멈췄을 때 원래 패널로 복원한다
  1466. 		 * @method eg.Flicking#restore
  1467. 		 * @param {Number} [duration=options.duration] Duration of the panel movement (unit: ms) <ko>패널 이동 애니메이션 진행 시간(단위: ms)</ko>
  1468. 		 * @return {eg.Flicking} An instance of a module itself<ko>모듈 자신의 인스턴스</ko>
  1469. 		 * @example
  1470. 			var some = new eg.Flicking("#mflick").on({
  1471. 					beforeFlickStart : function(e) {
  1472. 						if(e.no === 2) {
  1473. 							e.stop();  // stop flicking
  1474. 							this.restore(100);  // restoring to previous position
  1475. 						}
  1476. 					}
  1477. 				);
  1478. 		 */
  1479. 		restore: function (duration) {
  1480. 			var conf = this._conf;
  1481. 			var panel = conf.panel;
  1482. 			var currPos = this._getDataByDirection(this._mcInst.get());
  1483. 			var destPos;
  1485. 			// check if the panel isn't in right position
  1486. 			if (currPos[0] !== panel.currIndex * panel.size) {
  1487. 				conf.customEvent.restoreCall = true;
  1488. 				duration = this._getNumValue(duration, this.options.duration);
  1490. 				this._revertPanelNo();
  1491. 				destPos = this._getDataByDirection([panel.size * panel.index, 0]);
  1493. 				this._triggerBeforeRestore({ depaPos: currPos, destPos: destPos });
  1494. 				this._setMovableCoord("setTo", destPos, true, duration);
  1496. 				if (!duration) {
  1497. 					this._adjustContainerCss("end");
  1498. 					this._triggerRestore();
  1499. 				}
  1501. 				// to handle on api call
  1502. 			} else if (panel.changed) {
  1503. 				this._revertPanelNo();
  1504. 				conf.touch.distance = conf.indexToMove = 0;
  1505. 			}
  1507. 			return this;
  1508. 		},
  1510. 		/**
  1511. 		 * Enables input devices.
  1512. 		 * @ko 입력 장치를 사용할 수 있게 한다
  1513. 		 * @method eg.Flicking#enableInput
  1514. 		 * @return {eg.Flicking} An instance of a module itself <ko>모듈 자신의 인스턴스</ko>
  1515. 		 */
  1516. 		enableInput: function() {
  1517. 			this._mcInst.enableInput();
  1518. 			return this;
  1519. 		},
  1521. 		/**
  1522. 		 * Disables input devices.
  1523. 		 * @ko 입력 장치를 사용할 수 없게 한다.
  1524. 		 * @method eg.Flicking#disableInput
  1525. 		 * @return {eg.Flicking} An instance of a module itself <ko>모듈 자신의 인스턴스</ko>
  1526. 		 */
  1527. 		disableInput: function() {
  1528. 			this._mcInst.disableInput();
  1529. 			return this;
  1530. 		},
  1532. 		/**
  1533. 		 * Destroys elements, properties, and events used in a panel.
  1534. 		 * @ko 패널에 사용한 엘리먼트와 속성, 이벤트를 해제한다
  1535. 		 * @method eg.Flicking#destroy
  1536. 		 */
  1537. 		destroy: function() {
  1538. 			var conf = this._conf;
  1539. 			var origPanelStyle = conf.origPanelStyle;
  1540. 			var wrapper = origPanelStyle.wrapper;
  1541. 			var list = origPanelStyle.list;
  1543. 			// unwrap container element and restore original inline style
  1544. 			this.$wrapper.attr("class", wrapper.className)
  1545. 				.attr("style", wrapper.style);
  1547. 			this.$container.children().unwrap().each(function(i, v) {
  1548. 				var $el = $(v);
  1550. 				if (i > list.length - 1) {
  1551. 					return !!$el.remove();
  1552. 				}
  1554. 				$el.attr("class", list[i].className)
  1555. 					.attr("style", list[i].style);
  1556. 			});
  1558. 			// unbind events
  1559. 			this._bindEvents(false);
  1560. 			this.off();
  1562. 			// release resources
  1563. 			for (var x in this) {
  1564. 				this[x] = null;
  1565. 			}
  1566. 		}
  1567. 	});
  1568. });
  1569. /**
  1570.  * A jQuery plugin available in the eg.Flicking module.
  1571.  *
  1572.  * @ko eg.Flicking 모듈의 jQuery 플러그인
  1573.  * @method jQuery.flicking
  1574.  * @example
  1575. 	<div id="content">
  1576. 	    <div>
  1577. 	        <p>Layer 0</p>
  1578. 	    </div>
  1579. 	    <div>
  1580. 	        <p>Layer 1</p>
  1581. 	    </div>
  1582. 	    <div>
  1583. 	        <p>Layer 2</p>
  1584. 	    </div>
  1585. 	</div>
  1586.     <script>
  1587. 	// create
  1588. 	$("#content").flicking({
  1589.         circular : true,
  1590.      	threshold : 50
  1591.     });
  1592.  	// method
  1593. 	$("#content").flicking("option","circular",true); //Set option
  1594. 	$("#content").flicking("instance"); // Return flicking instance
  1595. 	$("#content").flicking("getNextIndex",1); // Get next panel index
  1596.  	</script>
  1597.  * @see eg.Flicking
  1598.  */
  1599. /**
  1600.  * A jQuery custom event of the eg.Flicking module. This event is fired before an element is restored to its original position when user action is done while the element is not dragged until a certain distance threshold is reached.
  1601.  *
  1602.  * @ko eg.Flicking 모듈의 jQuery 커스텀 이벤트. 다음 패널로 바뀌는 기준 이동 거리만큼 이동하기 전에 사용자의 동작이 끝났을 때 원래 패널로 복원되기 전에 발생한다
  1603.  * @name jQuery#flicking:beforeRestore
  1604.  * @event
  1605.  * @example
  1606.  $("#mflick").on("flicking:beforeRestore",callback);
  1607.  $("#mflick").off("flicking:beforeRestore",callback);
  1608.  $("#mflick").trigger("flicking:beforeRestore",callback);
  1609.  * @see eg.Flicking#event:beforeRestore
  1610.  */
  1611. /**
  1612.  * A jQuery custom event of the eg.Flicking module, which occurs before the flicking starts.
  1613.  *
  1614.  * @ko eg.Flicking 모듈의 jQuery 커스텀 이벤트. 플리킹을 시작하기 전에 발생한다
  1615.  * @name jQuery#flicking:beforeFlickStart
  1616.  * @event
  1617.  * @example
  1618.  $("#mflick").on("flicking:beforeFlickStart",callback);
  1619.  $("#mflick").off("flicking:beforeFlickStart",callback);
  1620.  $("#mflick").trigger("flicking:beforeFlickStart",callback);
  1621.  * @see eg.Flicking#event:beforeFlickStart
  1622.  */
  1623. /**
  1624.  * A jQuery custom event of the eg.Flicking module. This event is fired when panel moves.
  1625.  *
  1626.  * @ko eg.Flicking 모듈의 jQuery 커스텀 이벤트. 패널이 이동될 때 발생한다
  1627.  * @name jQuery#flicking:flick
  1628.  * @event
  1629.  * @example
  1630.  $("#mflick").on("flicking:flick",callback);
  1631.  $("#mflick").off("flicking:flick",callback);
  1632.  $("#mflick").trigger("flicking:flick",callback);
  1633.  * @see eg.Flicking#event:flick
  1634.  */
  1635. /**
  1636.  * A jQuery custom event of the eg.Flicking module. This event is fired after the panel moves.
  1637.  *
  1638.  * @ko eg.Flicking 모듈의 jQuery 커스텀 이벤트. 패널이 이동된 뒤 발생한다
  1639.  * @name jQuery#flicking:flickEnd
  1640.  * @event
  1641.  * @example
  1642.  $("#mflick").on("flicking:flickEnd",callback);
  1643.  $("#mflick").off("flicking:flickEnd",callback);
  1644.  $("#mflick").trigger("flicking:flickEnd",callback);
  1645.  * @see eg.Flicking#event:flickEnd
  1646.  */
  1647. /**
  1648.  * A jQuery custom event of the eg.Flicking module. This event is fired after an element is restored to its original position when user action is done while the element has not bene dragged until a certain distance threshold is reached.
  1649.  *
  1650.  * @ko eg.Flicking 모듈의 jQuery 커스텀 이벤트. 다음 패널로 바뀌는 기준 이동 거리만큼 이동하기 전에 사용자의 동작이 끝났을 때 원래 패널로 복원된 다음 발생한다
  1651.  * @name jQuery#flicking:restore
  1652.  * @event
  1653.  * @example
  1654.  $("#mflick").on("flicking:restore",callback);
  1655.  $("#mflick").off("flicking:restore",callback);
  1656.  $("#mflick").trigger("flicking:restore",callback);
  1657.  * @see eg.Flicking#event:restore
  1658.  */
comments powered by Disqus