egjs

Source: movableCoord.js

  1. /**
  2. * Copyright (c) 2015 NAVER Corp.
  3. * egjs projects are licensed under the MIT license
  4. */
  6. // jscs:disable maximumLineLength
  7. eg.module("movableCoord", [eg, window, "Hammer"], function(ns, global, HM) {
  8. 	"use strict";
  10. 	var SUPPORT_TOUCH = "ontouchstart" in global;
  11. 	var assignFn = HM.assign || HM.merge;
  13. 	// jscs:enable maximumLineLength
  14. 	/**
  15. 	 * A module used to change the information of user action entered by various input devices such as touch screen or mouse into logical coordinates within the virtual coordinate system. The coordinate information sorted by time events occurred is provided if animations are made by user actions. You can implement a user interface by applying the logical coordinates provided. For more information on the eg.MovableCoord module, see demos.
  16. 	 * @group egjs
  17. 	 * @ko 터치 입력 장치나 마우스와 같은 다양한 입력 장치로 전달 받은 사용자의 동작을 가상 좌표계의 논리적 좌표로 변경하는 모듈. 사용자의 동작으로 애니메이션이 일어나면 시간순으로 변경되는 좌표 정보도 제공한다. 변경된 논리적 좌표를 반영해 UI를 구현할 수 있다. eg.MovableCoord 모듈의 자세한 작동 방식은 데모를 참고한다.
  18. 	 * @class
  19. 	 * @name eg.MovableCoord
  20. 	 * @extends eg.Component
  21. 	 *
  22. 	 * @param {Object} options The option object of the eg.MovableCoord module<ko>eg.MovableCoord 모듈의 옵션 객체</ko>
  23. 	 * @param {Array} options.min The minimum value of X and Y coordinates <ko>좌표계의 최솟값</ko>
  24. 	 * @param {Number} [options.min.0=0] The X coordinate of the minimum <ko>최소 x좌표</ko>
  25. 	 * @param {Number} [options.min.1=0] The Y coordinate of the minimum <ko>최소 y좌표</ko>
  26. 	 *
  27. 	 * @param {Array} options.max The maximum value of X and Y coordinates <ko>좌표계의 최댓값</ko>
  28. 	 * @param {Number} [options.max.0=100] The X coordinate of the maximum<ko>최대 x좌표</ko>
  29. 	 * @param {Number} [options.max.1=100] The Y coordinate of the maximum<ko>최대 y좌표</ko>
  30. 	 *
  31. 	 * @param {Array} options.bounce The size of bouncing area. The coordinates can exceed the coordinate area as much as the bouncing area based on user action. If the coordinates does not exceed the bouncing area when an element is dragged, the coordinates where bouncing effects are applied are retuned back into the coordinate area<ko>바운스 영역의 크기. 사용자의 동작에 따라 좌표가 좌표 영역을 넘어 바운스 영역의 크기만큼 더 이동할 수 있다. 사용자가 끌어다 놓는 동작을 했을 때 좌표가 바운스 영역에 있으면, 바운스 효과가 적용된 좌표가 다시 좌표 영역 안으로 들어온다</ko>
  32. 	 * @param {Boolean} [options.bounce.0=10] The size of top area <ko>위쪽 바운스 영역의 크기</ko>
  33. 	 * @param {Boolean} [options.bounce.1=10] The size of right area <ko>오른쪽 바운스 영역의 크기</ko>
  34. 	 * @param {Boolean} [options.bounce.2=10] The size of bottom area <ko>아래쪽 바운스 영역의 크기</ko>
  35. 	 * @param {Boolean} [options.bounce.3=10] The size of left area <ko>왼쪽 바운스 영역의 크기</ko>
  36. 	 *
  37. 	 * @param {Array} options.margin The size of accessible space outside the coordinate area. If an element is dragged outside the coordinate area and then dropped, the coordinates of the element are returned back into the coordinate area. The size of margins that can be exceeded <ko>−	좌표 영역을 넘어 이동할 수 있는 바깥 영역의 크기. 사용자가 좌표를 바깥 영역까지 끌었다가 놓으면 좌표가 좌표 영역 안으로 들어온다.</ko>
  38. 	 * @param {Boolean} [options.margin.0=0] The size of top margin <ko>위쪽 바깥 영역의 크기</ko>
  39. 	 * @param {Boolean} [options.margin.1=0] The size of right margin <ko>오른쪽 바깥 영역의 크기</ko>
  40. 	 * @param {Boolean} [options.margin.2=0] The size of bottom margin <ko>아래쪽 바깥 영역의 크기</ko>
  41. 	 * @param {Boolean} [options.margin.3=0] The size of left margin <ko>왼쪽 바깥 영역의 크기</ko>
  42. 	 * @param {Array} options.circular Indicates whether a circular element is available. If it is set to "true" and an element is dragged outside the coordinate area, the element will appear on the other side.<ko>순환 여부. 'true'로 설정한 방향의 좌표 영역 밖으로 엘리먼트가 이동하면 반대 방향에서 엘리먼트가 나타난다</ko>
  43. 	 * @param {Boolean} [options.circular.0=false] Indicates whether to circulate to top <ko>위로 순환 여부</ko>
  44. 	 * @param {Boolean} [options.circular.1=false] Indicates whether to circulate to right <ko>오른쪽으로 순환 여부</ko>
  45. 	 * @param {Boolean} [options.circular.2=false] Indicates whether to circulate to bottom  <ko>아래로 순환 여부</ko>
  46. 	 * @param {Boolean} [options.circular.3=false] Indicates whether to circulate to left  <ko>왼쪽으로 순환 여부</ko>
  47. 	 *
  48. 	 * @param {Function} [options.easing=easing.easeOutCubic] The easing function to apply to an animation <ko>애니메이션에 적용할 easing 함수</ko>
  49. 	 * @param {Number} [options.maximumDuration=Infinity] Maximum duration of the animation <ko>가속도에 의해 애니메이션이 동작할 때의 최대 좌표 이동 시간</ko>
  50. 	 * @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>
  51. 	 * @see HammerJS {@link http://hammerjs.github.io}
  52. 	 * @see •	Hammer.JS applies specific CSS properties by default when creating an instance (See {@link http://hammerjs.github.io/jsdoc/Hammer.defaults.cssProps.html}). The eg.MovableCoord module removes all default CSS properties provided by Hammer.JS <ko>Hammer.JS는 인스턴스를 생성할 때 기본으로 특정 CSS 속성을 적용한다(참고: @link{http://hammerjs.github.io/jsdoc/Hammer.defaults.cssProps.html}). 특정한 상황에서는 Hammer.JS의 속성 때문에 사용성에 문제가 있을 수 있다. eg.MovableCoord 모듈은 Hammer.JS의 기본 CSS 속성을 모두 제거했다</ko>
  53. 	 *
  54. 	 * @codepen {"id":"jPPqeR", "ko":"MovableCoord Cube 예제", "en":"MovableCoord Cube example", "collectionId":"AKpkGW", "height": 403}
  55. 	 *
  56. 	 * @see Easing Functions Cheat Sheet {@link http://easings.net/}
  57. 	 * @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 라이브러리({@lin https://jqueryui.com/easing})를 사용한다</ko>
  58. 	 *
  59. 	 * @support {"ie": "10+", "ch" : "latest", "ff" : "latest",  "sf" : "latest", "edge" : "latest", "ios" : "7+", "an" : "2.3+ (except 3.x)"}
  60. 	 */
  61. 	var MC = ns.MovableCoord = ns.Class.extend(ns.Component, {
  62. 		construct: function(options) {
  63. 			assignFn(this.options = {
  64. 				min: [0, 0],
  65. 				max: [100, 100],
  66. 				bounce: [10, 10, 10, 10],
  67. 				margin: [0,0,0,0],
  68. 				circular: [false, false, false, false],
  69. 				easing: function easeOutCubic(x) {
  70. 					return 1 - Math.pow(1 - x, 3);
  71. 				},
  72. 				maximumDuration: Infinity,
  73. 				deceleration: 0.0006
  74. 			}, options);
  75. 			this._reviseOptions();
  76. 			this._status = {
  77. 				grabOutside: false,		// check whether user's action started on outside
  78. 				curHammer: null,		// current hammer instance
  79. 				moveDistance: null,		// a position of the first user's action
  80. 				animationParam: null,	// animation information
  81. 				prevented: false		//  check whether the animation event was prevented
  82. 			};
  83. 			this._hammers = {};
  84. 			this._pos = this.options.min.concat();
  85. 			this._subOptions = {};
  86. 			this._raf = null;
  87. 			this._animationEnd = HM.bindFn(this._animationEnd, this);	// for caching
  88. 			this._restore = HM.bindFn(this._restore, this);	// for caching
  89. 			this._panmove = HM.bindFn(this._panmove, this);	// for caching
  90. 			this._panend = HM.bindFn(this._panend, this);	// for caching
  91. 		},
  92. 		/**
  93. 		 * Registers an element to use the eg.MovableCoord module.
  94. 		 * @ko eg.MovableCoord 모듈을 사용할 엘리먼트를 등록한다
  95. 		 * @method eg.MovableCoord#bind
  96. 		 * @param {HTMLElement|String|jQuery} element An element to use the eg.MovableCoord module<ko>−	eg.MovableCoord 모듈을 사용할 엘리먼트</ko>
  97. 		 * @param {Object} options The option object of the bind() method <ko>bind() 메서드의 옵션 객체</ko>
  98. 		 * @param {Number} [options.direction=eg.MovableCoord.DIRECTION_ALL] Coordinate direction that a user can move<br>- eg.MovableCoord.DIRECTION_ALL: All directions available.<br>- eg.MovableCoord.DIRECTION_HORIZONTAL: Horizontal direction only.<br>- eg.MovableCoord.DIRECTION_VERTICAL: Vertical direction only<ko>사용자의 동작으로 움직일 수 있는 좌표의 방향.<br>- eg.MovableCoord.DIRECTION_ALL: 모든 방향으로 움직일 수 있다.<br>- eg.MovableCoord.DIRECTION_HORIZONTAL: 가로 방향으로만 움직일 수 있다.<br>- eg.MovableCoord.DIRECTION_VERTICAL: 세로 방향으로만 움직일 수 있다.</ko>
  99. 		 * @param {Array} options.scale Coordinate scale that a user can move<ko>사용자의 동작으로 이동하는 좌표의 배율</ko>
  100. 		 * @param {Number} [options.scale.0=1] X-axis scale <ko>x축 배율</ko>
  101. 		 * @param {Number} [options.scale.1=1] Y-axis scale <ko>y축 배율</ko>
  102. 		 * @param {Number} [options.thresholdAngle=45] The threshold value that determines whether user action is horizontal or vertical (0~90) <ko>사용자의 동작이 가로 방향인지 세로 방향인지 판단하는 기준 각도(0~90)</ko>
  103. 		 * @param {Number} [options.interruptable=true] Indicates whether an animation is interruptible.<br>- true: It can be paused or stopped by user action or the API.<br>- false: It cannot be paused or stopped by user action or the API while it is running.<ko>진행 중인 애니메이션 중지 가능 여부.<br>- true: 사용자의 동작이나 API로 애니메이션을 중지할 수 있다.<br>- false: 애니메이션이 진행 중일 때는 사용자의 동작이나 API가 적용되지 않는다</ko>
  104. 		 * @param {Array} [options.inputType] Types of input devices. (default: ["touch", "mouse"])<br>- touch: Touch screen<br>- mouse: Mouse <ko>입력 장치 종류.(기본값: ["touch", "mouse"])<br>- touch: 터치 입력 장치<br>- mouse: 마우스</ko>
  105. 		 *
  106. 		 * @return {eg.MovableCoord} An instance of a module itself <ko>모듈 자신의 인스턴스</ko>
  107. 		 */
  108. 		bind: function(element, options) {
  109. 			var el = this._getEl(element);
  110. 			var keyValue = el[MC._KEY];
  111. 			var subOptions = {
  112. 				direction: MC.DIRECTION_ALL,
  113. 				scale: [ 1, 1 ],
  114. 				thresholdAngle: 45,
  115. 				interruptable: true,
  116. 				inputType: [ "touch", "mouse" ]
  117. 			};
  119. 			assignFn(subOptions, options);
  121. 			var inputClass = this._convertInputType(subOptions.inputType);
  122. 			if (!inputClass) {
  123. 				return this;
  124. 			}
  126. 			if (keyValue) {
  127. 				this._hammers[keyValue].inst.destroy();
  128. 			} else {
  129. 				keyValue = Math.round(Math.random() * new Date().getTime());
  130. 			}
  131. 			this._hammers[keyValue] = {
  132. 				inst: this._createHammer(
  133. 					el,
  134. 					subOptions,
  135. 					inputClass
  136. 				),
  137. 				el: el,
  138. 				options: subOptions
  139. 			};
  140. 			el[MC._KEY] = keyValue;
  141. 			return this;
  142. 		},
  144. 		_createHammer: function(el, subOptions, inputClass) {
  145. 			try {
  146. 				// create Hammer
  147. 				var hammer = new HM.Manager(el, {
  148. 						recognizers: [
  149. 							[
  150. 								HM.Pan, {
  151. 									direction: subOptions.direction,
  152. 									threshold: 0
  153. 								}
  154. 							]
  155. 						],
  157. 						// css properties were removed due to usablility issue
  158. 						// http://hammerjs.github.io/jsdoc/Hammer.defaults.cssProps.html
  159. 						cssProps: {
  160. 							userSelect: "none",
  161. 							touchSelect: "none",
  162. 							touchCallout: "none",
  163. 							userDrag: "none"
  164. 						},
  165. 						inputClass: inputClass
  166. 					});
  168. 				return this._attachHammerEvents(hammer, subOptions);
  169. 			} catch (e) {}
  170. 		},
  172. 		_attachHammerEvents: function(hammer, options) {
  173. 			return hammer.on("hammer.input", HM.bindFn(function(e) {
  174. 					var enable = hammer.get("pan").options.enable;
  175. 					if (e.isFirst) {
  176. 						// apply options each
  177. 						this._subOptions = options;
  178. 						this._status.curHammer = hammer;
  179. 						enable && this._panstart(e);
  180. 					} else if (e.isFinal) {
  181. 						// substitute .on("panend tap", this._panend); Because it(tap, panend) cannot catch vertical(horizontal) movement on HORIZONTAL(VERTICAL) mode.
  182. 						enable && this._panend(e);
  183. 					}
  184. 				}, this))
  185. 				.on("panstart panmove", this._panmove);
  186. 		},
  188. 		_detachHammerEvents: function(hammer) {
  189. 			hammer.off("hammer.input panstart panmove panend");
  190. 		},
  192. 		_convertInputType: function(inputType) {
  193. 			var hasTouch = false;
  194. 			var hasMouse = false;
  195. 			inputType = inputType || [];
  196. 			inputType.forEach(function(v) {
  197. 				switch (v) {
  198. 					case "mouse" : hasMouse = true; break;
  199. 					case "touch" : hasTouch = SUPPORT_TOUCH;
  200. 				}
  201. 			});
  203. 			return hasTouch && HM.TouchInput || hasMouse && HM.MouseInput || null;
  204. 		},
  206. 		/**
  207. 		 * Detaches an element using the eg.MovableCoord module.
  208. 		 * @ko eg.MovableCoord 모듈을 사용하는 엘리먼트를 해제한다
  209. 		 * @method eg.MovableCoord#unbind
  210. 		 * @param {HTMLElement|String|jQuery} element An element from which the eg.MovableCoord module is detached<ko>eg.MovableCoord 모듈을 해제할 엘리먼트</ko>
  211. 		 * @return {eg.MovableCoord} An instance of a module itself<ko>모듈 자신의 인스턴스</ko>
  212. 		 */
  213. 		unbind: function(element) {
  214. 			var el = this._getEl(element);
  215. 			var key = el[MC._KEY];
  216. 			if (key) {
  217. 				this._hammers[key].inst.destroy();
  218. 				delete this._hammers[key];
  219. 				delete el[MC._KEY];
  220. 			}
  221. 			return this;
  222. 		},
  224. 		/**
  225. 		 * get a hammer instance from elements using the eg.MovableCoord module.
  226. 		 * @ko eg.MovableCoord 모듈을 사용하는 엘리먼트에서 hammer 객체를 얻는다
  227. 		 * @method eg.MovableCoord#getHammer
  228. 		 * @param {HTMLElement|String|jQuery} element An element from which the eg.MovableCoord module is using<ko>eg.MovableCoord 모듈을 사용하는 엘리먼트</ko>
  229. 		 * @return {Hammer|null} An instance of Hammer.JS<ko>Hammer.JS의 인스턴스</ko>
  230. 		 */
  231. 		getHammer: function(element) {
  232. 			var el = this._getEl(element);
  233. 			var key = el ? el[MC._KEY] : null;
  234. 			if (key && this._hammers[key]) {
  235. 				return this._hammers[key].inst;
  236. 			} else {
  237. 				return null;
  238. 			}
  239. 		},
  241. 		_grab: function() {
  242. 			if (this._status.animationParam) {
  243. 				this.trigger("animationEnd");
  244. 				var pos = this._getCircularPos(this._pos);
  245. 				if (pos[0] !== this._pos[0] || pos[1] !== this._pos[1]) {
  246. 					this._pos = pos;
  247. 					this._triggerChange(this._pos, true);
  248. 				}
  249. 				this._status.animationParam = null;
  250. 				this._raf && ns.cancelAnimationFrame(this._raf);
  251. 				this._raf = null;
  252. 			}
  253. 		},
  255. 		_getCircularPos: function(pos, min, max, circular) {
  256. 			min = min || this.options.min;
  257. 			max = max || this.options.max;
  258. 			circular = circular || this.options.circular;
  260. 			if (circular[0] && pos[1] < min[1]) { // up
  261. 				pos[1] = (pos[1] - min[1]) % (max[1] - min[1] + 1) + max[1];
  262. 			}
  263. 			if (circular[1] && pos[0] > max[0]) { // right
  264. 				pos[0] = (pos[0] - min[0]) % (max[0] - min[0] + 1) + min[0];
  265. 			}
  266. 			if (circular[2] && pos[1] > max[1]) { // down
  267. 				pos[1] = (pos[1] - min[1]) % (max[1] - min[1] + 1) + min[1];
  268. 			}
  269. 			if (circular[3] && pos[0] < min[0]) { // left
  270. 				pos[0] = (pos[0] - min[0]) % (max[0] - min[0] + 1) + max[0];
  271. 			}
  272. 			pos[0] = +pos[0].toFixed(5), pos[1] = +pos[1].toFixed(5);
  274. 			return pos;
  275. 		},
  277. 		// determine outside
  278. 		_isOutside: function(pos, min, max) {
  279. 			return pos[0] < min[0] || pos[1] < min[1] ||
  280. 				pos[0] > max[0] || pos[1] > max[1];
  281. 		},
  283. 		// from outside to outside
  284. 		_isOutToOut: function(pos, destPos) {
  285. 			var min = this.options.min;
  286. 			var max = this.options.max;
  287. 			return (pos[0] < min[0] || pos[0] > max[0] ||
  288. 				pos[1] < min[1] || pos[1] > max[1]) &&
  289. 				(destPos[0] < min[0] || destPos[0] > max[0] ||
  290. 				destPos[1] < min[1] || destPos[1] > max[1]);
  291. 		},
  293. 		// panstart event handler
  294. 		_panstart: function(e) {
  295. 			if (!this._subOptions.interruptable && this._status.prevented) {
  296. 				return;
  297. 			}
  298. 			this._setInterrupt(true);
  299. 			var pos = this._pos;
  300. 			this._grab();
  301. 			/**
  302. 			 * This event is fired when a user holds an element on the screen of the device.
  303. 			 * @ko 사용자가 기기의 화면에 손을 대고 있을 때 발생하는 이벤트
  304. 			 * @name eg.MovableCoord#hold
  305. 			 * @event
  306. 			 * @param {Object} param The object of data to be sent when the event is fired<ko>이벤트가 발생할 때 전달되는 데이터 객체</ko>
  307. 			 * @param {Array} param.pos coordinate <ko>좌표 정보</ko>
  308. 			 * @param {Number} param.pos.0 The X coordinate<ko>x 좌표</ko>
  309. 			 * @param {Number} param.pos.1 The Y coordinate<ko>y 좌표</ko>
  310. 			 * @param {Object} param.hammerEvent The event information of Hammer.JS. It returns null if the event is fired through a call to the setTo() or setBy() method.<ko>Hammer.JS의 이벤트 정보. setTo() 메서드나 setBy() 메서드를 호출해 이벤트가 발생했을 때는 'null'을 반환한다.</ko>
  311. 			 *
  312. 			 */
  313. 			this.trigger("hold", {
  314. 				pos: pos.concat(),
  315. 				hammerEvent: e
  316. 			});
  317. 			this._status.moveDistance = pos.concat();
  318. 			this._status.grabOutside = this._isOutside(
  319. 				pos,
  320. 				this.options.min,
  321. 				this.options.max
  322. 			);
  323. 		},
  325. 		// panmove event handler
  326. 		_panmove: function(e) {
  327. 			if (!this._isInterrupting() || !this._status.moveDistance) {
  328. 				return;
  329. 			}
  330. 			var tv;
  331. 			var tn;
  332. 			var tx;
  333. 			var pos = this._pos;
  334. 			var min = this.options.min;
  335. 			var max = this.options.max;
  336. 			var bounce = this.options.bounce;
  337. 			var margin = this.options.margin;
  338. 			var direction = this._subOptions.direction;
  339. 			var scale = this._subOptions.scale;
  340. 			var userDirection = this._getDirection(e.angle);
  341. 			var out = [
  342. 				margin[0] + bounce[0],
  343. 				margin[1] + bounce[1],
  344. 				margin[2] + bounce[2],
  345. 				margin[3] + bounce[3]
  346. 			];
  347. 			var prevent  = false;
  349. 			// not support offset properties in Hammerjs - start
  350. 			var prevInput = this._status.curHammer.session.prevInput;
  351. 			if (prevInput) {
  352. 				e.offsetX = e.deltaX - prevInput.deltaX;
  353. 				e.offsetY = e.deltaY - prevInput.deltaY;
  354. 			} else {
  355. 				e.offsetX = e.offsetY = 0;
  356. 			}
  358. 			// not support offset properties in Hammerjs - end
  359. 			if (direction === MC.DIRECTION_ALL ||
  360. 				(direction & MC.DIRECTION_HORIZONTAL &&
  361. 				userDirection & MC.DIRECTION_HORIZONTAL)
  362. 			) {
  363. 				this._status.moveDistance[0] += (e.offsetX * scale[0]);
  364. 				prevent = true;
  365. 			}
  366. 			if (direction === MC.DIRECTION_ALL ||
  367. 				(direction & MC.DIRECTION_VERTICAL &&
  368. 				userDirection & MC.DIRECTION_VERTICAL)
  369. 			) {
  370. 				this._status.moveDistance[1] += (e.offsetY * scale[1]);
  371. 				prevent = true;
  372. 			}
  373. 			if (prevent) {
  374. 				e.srcEvent.preventDefault();
  375. 				e.srcEvent.stopPropagation();
  376. 			}
  378. 			e.preventSystemEvent = prevent;
  379. 			pos[0] = this._status.moveDistance[0];
  380. 			pos[1] = this._status.moveDistance[1];
  381. 			pos = this._getCircularPos(pos, min, max);
  383. 			// from outside to inside
  384. 			if (this._status.grabOutside && !this._isOutside(pos, min, max)) {
  385. 				this._status.grabOutside = false;
  386. 			}
  388. 			// when move pointer is held in outside
  389. 			if (this._status.grabOutside) {
  390. 				tn = min[0] - out[3], tx = max[0] + out[1], tv = pos[0];
  391. 				pos[0] = tv > tx ? tx : (tv < tn ? tn : tv);
  392. 				tn = min[1] - out[0], tx = max[1] + out[2], tv = pos[1];
  393. 				pos[1] = tv > tx ? tx : (tv < tn ? tn : tv);
  394. 			} else {
  396. 				// when start pointer is held in inside
  397. 				// get a initialization slope value to prevent smooth animation.
  398. 				var initSlope = this._easing(0.00001) / 0.00001;
  400. 				if (pos[1] < min[1]) { // up
  401. 					tv = (min[1] - pos[1]) / (out[0] * initSlope);
  402. 					pos[1] = min[1] - this._easing(tv) * out[0];
  403. 				} else if (pos[1] > max[1]) { // down
  404. 					tv = (pos[1] - max[1]) / (out[2] * initSlope);
  405. 					pos[1] = max[1] + this._easing(tv) * out[2];
  406. 				}
  407. 				if (pos[0] < min[0]) { // left
  408. 					tv = (min[0] - pos[0]) / (out[3] * initSlope);
  409. 					pos[0] = min[0] - this._easing(tv) * out[3];
  410. 				} else if (pos[0] > max[0]) { // right
  411. 					tv = (pos[0] - max[0]) / (out[1] * initSlope);
  412. 					pos[0] = max[0] + this._easing(tv) * out[1];
  413. 				}
  415. 			}
  416. 			this._triggerChange(pos, true, e);
  417. 		},
  419. 		// panend event handler
  420. 		_panend: function(e) {
  421. 			var pos = this._pos;
  423. 			if (!this._isInterrupting() || !this._status.moveDistance) {
  424. 				return;
  425. 			}
  427. 			// Abort the animating post process when "tap" occurs
  428. 			if (e.distance === 0 /*e.type === "tap"*/) {
  429. 				this._setInterrupt(false);
  430. 				this.trigger("release", {
  431. 					depaPos: pos.concat(),
  432. 					destPos: pos.concat(),
  433. 					hammerEvent: e || null
  434. 				});
  435. 			} else {
  436. 				var direction = this._subOptions.direction;
  437. 				var scale = this._subOptions.scale;
  438. 				var vX =  Math.abs(e.velocityX);
  439. 				var vY = Math.abs(e.velocityY);
  441. 				!(direction & MC.DIRECTION_HORIZONTAL) && (vX = 0);
  442. 				!(direction & MC.DIRECTION_VERTICAL) && (vY = 0);
  444. 				var offset = this._getNextOffsetPos([
  445. 					vX * (e.deltaX < 0 ? -1 : 1) * scale[0],
  446. 					vY * (e.deltaY < 0 ? -1 : 1) * scale[1]
  447. 				]);
  448. 				var destPos = [ pos[0] + offset[0], pos[1] + offset[1] ];
  449. 				destPos = this._getPointOfIntersection(pos, destPos);
  450. 				/**
  451. 				 * This event is fired when a user release an element on the screen of the device.
  452. 				 * @ko 사용자가 기기의 화면에서 손을 뗐을 때 발생하는 이벤트
  453. 				 * @name eg.MovableCoord#release
  454. 				 * @event
  455. 				 *
  456. 				 * @param {Object} param The object of data to be sent when the event is fired<ko>이벤트가 발생할 때 전달되는 데이터 객체</ko>
  457. 				 * @param {Array} param.depaPos The coordinates when releasing an element<ko>손을 뗐을 때의 좌표현재 </ko>
  458. 				 * @param {Number} param.depaPos.0 The X coordinate <ko> x 좌표</ko>
  459. 				 * @param {Number} param.depaPos.1 The Y coordinate <ko> y 좌표</ko>
  460. 				 * @param {Array} param.destPos The coordinates to move to after releasing an element<ko>손을 뗀 뒤에 이동할 좌표</ko>
  461. 				 * @param {Number} param.destPos.0 The X coordinate <ko>x 좌표</ko>
  462. 				 * @param {Number} param.destPos.1 The Y coordinate <ko>y 좌표</ko>
  463. 				 * @param {Object} param.hammerEvent The event information of Hammer.JS. It returns null if the event is fired through a call to the setTo() or setBy() method.<ko>Hammer.JS의 이벤트 정보. setTo() 메서드나 setBy() 메서드를 호출해 이벤트가 발생했을 때는 'null'을 반환한다</ko>
  464. 				 *
  465. 				 */
  466. 				this.trigger("release", {
  467. 					depaPos: pos.concat(),
  468. 					destPos: destPos,
  469. 					hammerEvent: e || null
  470. 				});
  472. 				if (pos[0] !== destPos[0] || pos[1] !== destPos[1]) {
  473. 					this._animateTo(destPos, null, e || null);
  474. 				} else {
  475. 					this._setInterrupt(false);
  476. 				}
  477. 			}
  478. 			this._status.moveDistance = null;
  479. 		},
  481. 		_isInterrupting: function() {
  482. 			// when interruptable is 'true', return value is always 'true'.
  483. 			return this._subOptions.interruptable || this._status.prevented;
  484. 		},
  486. 		// get user's direction
  487. 		_getDirection: function(angle) {
  488. 			var thresholdAngle = this._subOptions.thresholdAngle;
  489. 			if (thresholdAngle < 0 || thresholdAngle > 90) {
  490. 				return MC.DIRECTION_NONE;
  491. 			}
  492. 			angle = Math.abs(angle);
  493. 			return angle > thresholdAngle && angle < 180 - thresholdAngle ?
  494. 					MC.DIRECTION_VERTICAL : MC.DIRECTION_HORIZONTAL;
  495. 		},
  497. 		_getNextOffsetPos: function(speeds) {
  498. 			var normalSpeed = Math.sqrt(
  499. 				speeds[0] * speeds[0] + speeds[1] * speeds[1]
  500. 			);
  501. 			var duration = Math.abs(normalSpeed / -this.options.deceleration);
  502. 			return [
  503. 				speeds[0] / 2 * duration,
  504. 				speeds[1] / 2 * duration
  505. 			];
  506. 		},
  508. 		_getDurationFromPos: function(pos) {
  509. 			var normalPos = Math.sqrt(pos[0] * pos[0] + pos[1] * pos[1]);
  510. 			var duration = Math.sqrt(
  511. 				normalPos / this.options.deceleration * 2
  512. 			);
  514. 			// when duration is under 100, then value is zero
  515. 			return duration < 100 ? 0 : duration;
  516. 		},
  518. 		_getPointOfIntersection: function(depaPos, destPos) {
  519. 			var circular = this.options.circular;
  520. 			var bounce = this.options.bounce;
  521. 			var min = this.options.min;
  522. 			var max = this.options.max;
  523. 			var boxLT = [ min[0] - bounce[3], min[1] - bounce[0] ];
  524. 			var boxRB = [ max[0] + bounce[1], max[1] + bounce[2] ];
  525. 			var xd;
  526. 			var yd;
  527. 			destPos = [destPos[0], destPos[1]];
  528. 			xd = destPos[0] - depaPos[0], yd = destPos[1] - depaPos[1];
  529. 			if (!circular[3]) {
  530. 				destPos[0] = Math.max(boxLT[0], destPos[0]);
  531. 			} // left
  532. 			if (!circular[1]) {
  533. 				destPos[0] = Math.min(boxRB[0], destPos[0]);
  534. 			} // right
  535. 			destPos[1] = xd ?
  536. 							depaPos[1] + yd / xd * (destPos[0] - depaPos[0]) :
  537. 							destPos[1];
  539. 			if (!circular[0]) {
  540. 				destPos[1] = Math.max(boxLT[1], destPos[1]);
  541. 			} // up
  542. 			if (!circular[2]) {
  543. 				destPos[1] = Math.min(boxRB[1], destPos[1]);
  544. 			} // down
  545. 			destPos[0] = yd ?
  546. 							depaPos[0] + xd / yd * (destPos[1] - depaPos[1]) :
  547. 							destPos[0];
  548. 			return [
  549. 				Math.min(max[0], Math.max(min[0], destPos[0])),
  550. 				Math.min(max[1], Math.max(min[1], destPos[1]))
  551. 			];
  552. 		},
  554. 		_isCircular: function(destPos) {
  555. 			var circular = this.options.circular;
  556. 			var min = this.options.min;
  557. 			var max = this.options.max;
  558. 			return (circular[0] && destPos[1] < min[1]) ||
  559. 					(circular[1] && destPos[0] > max[0]) ||
  560. 					(circular[2] && destPos[1] > max[1]) ||
  561. 					(circular[3] && destPos[0] < min[0]);
  562. 		},
  564. 		_prepareParam: function(absPos, duration, hammerEvent) {
  565. 			var pos = this._pos;
  566. 			var destPos = this._getPointOfIntersection(pos, absPos);
  567. 			destPos = this._isOutToOut(pos, destPos) ? pos : destPos;
  568. 			var distance = [
  569. 				Math.abs(destPos[0] - pos[0]),
  570. 				Math.abs(destPos[1] - pos[1])
  571. 			];
  572. 			duration = duration == null ? this._getDurationFromPos(distance) : duration;
  573. 			duration = this.options.maximumDuration > duration ?
  574. 						duration : this.options.maximumDuration;
  575. 			return {
  576. 				depaPos: pos.concat(),
  577. 				destPos: destPos.concat(),
  578. 				isBounce: this._isOutside(destPos, this.options.min, this.options.max),
  579. 				isCircular: this._isCircular(absPos),
  580. 				duration: duration,
  581. 				distance: distance,
  582. 				hammerEvent: hammerEvent || null,
  583. 				done: this._animationEnd
  584. 			};
  585. 		},
  587. 		_restore: function(complete, hammerEvent) {
  588. 			var pos = this._pos;
  589. 			var min = this.options.min;
  590. 			var max = this.options.max;
  591. 			this._animate(this._prepareParam([
  592. 				Math.min(max[0], Math.max(min[0], pos[0])),
  593. 				Math.min(max[1], Math.max(min[1], pos[1]))
  594. 			], null, hammerEvent), complete);
  595. 		},
  597. 		_animationEnd: function() {
  598. 			this._status.animationParam = null;
  599. 			this._pos = this._getCircularPos([
  600. 				Math.round(this._pos[0]),
  601. 				Math.round(this._pos[1])
  602. 			]);
  603. 			this._setInterrupt(false);
  604. 			/**
  605. 			 * This event is fired when animation ends.
  606. 			 * @ko 에니메이션이 끝났을 때 발생한다.
  607. 			 * @name eg.MovableCoord#animationEnd
  608. 			 * @event
  609. 			 */
  610. 			this.trigger("animationEnd");
  611. 		},
  613. 		_animate: function(param, complete) {
  614. 			param.startTime = new Date().getTime();
  615. 			this._status.animationParam = param;
  616. 			if (param.duration) {
  617. 				var info = this._status.animationParam;
  618. 				var self = this;
  619. 				(function loop() {
  620. 					self._raf = null;
  621. 					if (self._frame(info) >= 1) {
  622. 						// deferred.resolve();
  623. 						complete();
  624. 						return;
  625. 					} // animationEnd
  626. 					self._raf = ns.requestAnimationFrame(loop);
  627. 				})();
  628. 			} else {
  629. 				this._triggerChange(param.destPos, false);
  630. 				complete();
  631. 			}
  632. 		},
  634. 		_animateTo: function(absPos, duration, hammerEvent) {
  635. 			var param = this._prepareParam(absPos, duration, hammerEvent);
  636. 			var retTrigger = this.trigger("animationStart", param);
  638. 			// You can't stop the 'animationStart' event when 'circular' is true.
  639. 			if (param.isCircular && !retTrigger) {
  640. 				throw new Error(
  641. 					"You can't stop the 'animation' event when 'circular' is true."
  642. 				);
  643. 			}
  645. 			if (retTrigger) {
  646. 				var self = this;
  647. 				var queue = [];
  648. 				var dequeue = function() {
  649. 					var task = queue.shift();
  650. 					task && task.call(this);
  651. 				};
  652. 				if (param.depaPos[0] !== param.destPos[0] ||
  653. 					param.depaPos[1] !== param.destPos[1]) {
  654. 					queue.push(function() {
  655. 						self._animate(param, dequeue);
  656. 					});
  657. 				}
  658. 				if (this._isOutside(param.destPos, this.options.min, this.options.max)) {
  659. 					queue.push(function() {
  660. 						self._restore(dequeue, hammerEvent);
  661. 					});
  662. 				}
  663. 				queue.push(function() {
  664. 					self._animationEnd();
  665. 				});
  666. 				dequeue();
  667. 			}
  668. 		},
  670. 		// animation frame (0~1)
  671. 		_frame: function(param) {
  672. 			var curTime = new Date() - param.startTime;
  673. 			var easingPer = this._easing(curTime / param.duration);
  674. 			var pos = [ param.depaPos[0], param.depaPos[1] ];
  676. 			for (var i = 0; i < 2 ; i++) {
  677. 				(pos[i] !== param.destPos[i]) &&
  678. 				(pos[i] += (param.destPos[i] - pos[i]) * easingPer);
  679. 			}
  680. 			pos = this._getCircularPos(pos);
  681. 			this._triggerChange(pos, false);
  682. 			return easingPer;
  683. 		},
  685. 		// set up 'css' expression
  686. 		_reviseOptions: function() {
  687. 			var key;
  688. 			var self = this;
  689. 			(["bounce", "margin", "circular"]).forEach(function(v) {
  690. 				key = self.options[v];
  691. 				if (key != null) {
  692. 					if (key.constructor === Array) {
  693. 						self.options[v] = key.length === 2 ?
  694. 							key.concat(key) : key.concat();
  695. 					} else if (/string|number|boolean/.test(typeof key)) {
  696. 						self.options[v] = [ key, key, key, key ];
  697. 					} else {
  698. 						self.options[v] = null;
  699. 					}
  700. 				}
  701. 			});
  702. 		},
  704. 		// trigger 'change' event
  705. 		_triggerChange: function(pos, holding, e) {
  706. 			/**
  707. 			 * This event is fired when coordinate changes.
  708. 			 * @ko 좌표가 변경됐을 때 발생하는 이벤트
  709. 			 * @name eg.MovableCoord#change
  710. 			 * @event
  711. 			 *
  712. 			 * @param {Object} param The object of data to be sent when the event is fired <ko>이벤트가 발생할 때 전달되는 데이터 객체</ko>
  713. 			 * @param {Array} param.pos departure coordinate  <ko>좌표</ko>
  714. 			 * @param {Number} param.pos.0 The X coordinate <ko>x 좌표</ko>
  715. 			 * @param {Number} param.pos.1 The Y coordinate <ko>y 좌표</ko>
  716. 			 * @param {Boolean} param.holding Indicates whether a user holds an element on the screen of the device.<ko>사용자가 기기의 화면을 누르고 있는지 여부</ko>
  717. 			 * @param {Object} param.hammerEvent The event information of Hammer.JS. It returns null if the event is fired through a call to the setTo() or setBy() method.<ko>Hammer.JS의 이벤트 정보. setTo() 메서드나 setBy() 메서드를 호출해 이벤트가 발생했을 때는 'null'을 반환한다.</ko>
  718. 			 *
  719. 			 */
  720. 			this._pos = pos.concat();
  721. 			this.trigger("change", {
  722. 				pos: pos.concat(),
  723. 				holding: holding,
  724. 				hammerEvent: e || null
  725. 			});
  726. 		},
  728. 		/**
  729. 		 * Returns the current position of the logical coordinates.
  730. 		 * @ko 논리적 좌표의 현재 위치를 반환한다
  731. 		 * @method eg.MovableCoord#get
  732. 		 * @return {Array} pos <ko>좌표</ko>
  733. 		 * @return {Number} pos.0 The X coordinate <ko>x 좌표</ko>
  734. 		 * @return {Number} pos.1 The Y coordinate <ko>y 좌표</ko>
  735. 		 */
  736. 		get: function() {
  737. 			return this._pos.concat();
  738. 		},
  740. 		/**
  741. 		 * Moves an element to specific coordinates.
  742. 		 * @ko 좌표를 이동한다.
  743. 		 * @method eg.MovableCoord#setTo
  744. 		 * @param {Number} x The X coordinate to move to <ko>이동할 x좌표</ko>
  745. 		 * @param {Number} y The Y coordinate to move to  <ko>이동할 y좌표</ko>
  746. 		 * @param {Number} [duration=0] Duration of the animation (unit: ms) <ko>애니메이션 진행 시간(단위: ms)</ko>
  747. 		 * @return {eg.MovableCoord} An instance of a module itself <ko>자신의 인스턴스</ko>
  748. 		 */
  749. 		setTo: function(x, y, duration) {
  750. 			this._grab();
  751. 			var pos = this._pos.concat();
  752. 			var circular = this.options.circular;
  753. 			var min = this.options.min;
  754. 			var max = this.options.max;
  755. 			if (x === pos[0] && y === pos[1]) {
  756. 				return this;
  757. 			}
  758. 			this._setInterrupt(true);
  759. 			if (x !== pos[0]) {
  760. 				if (!circular[3]) {
  761. 					x = Math.max(min[0], x);
  762. 				}
  763. 				if (!circular[1]) {
  764. 					x = Math.min(max[0], x);
  765. 				}
  766. 			}
  767. 			if (y !== pos[1]) {
  768. 				if (!circular[0]) {
  769. 					y = Math.max(min[1], y);
  770. 				}
  771. 				if (!circular[2]) {
  772. 					y = Math.min(max[1], y);
  773. 				}
  774. 			}
  775. 			if (duration) {
  776. 				this._animateTo([ x, y ], duration);
  777. 			} else {
  778. 				this._pos = this._getCircularPos([ x, y ]);
  779. 				this._triggerChange(this._pos, false);
  780. 				this._setInterrupt(false);
  781. 			}
  782. 			return this;
  783. 		},
  784. 		/**
  785. 		 * Moves an element from the current coordinates to specific coordinates. The change event is fired when the method is executed.
  786. 		 * @ko 현재 좌표를 기준으로 좌표를 이동한다. 메서드가 실행되면 change 이벤트가 발생한다
  787. 		 * @method eg.MovableCoord#setBy
  788. 		 * @param {Number} x The X coordinate to move to <ko>이동할 x좌표</ko>
  789. 		 * @param {Number} y The Y coordinate to move to <ko>이동할 y좌표</ko>
  790. 		 * @param {Number} [duration=0] Duration of the animation (unit: ms) <ko>애니메이션 진행 시간(단위: ms)</ko>
  791. 		 * @return {eg.MovableCoord} An instance of a module itself <ko>자신의 인스턴스</ko>
  792. 		 */
  793. 		setBy: function(x, y, duration) {
  794. 			return this.setTo(
  795. 				x != null ? this._pos[0] + x : this._pos[0],
  796. 				y != null ? this._pos[1] + y : this._pos[1],
  797. 				duration
  798. 			);
  799. 		},
  801. 		_easing: function(p) {
  802. 			return p > 1 ? 1 : this.options.easing(p);
  803. 		},
  805. 		_setInterrupt: function(prevented) {
  806. 			!this._subOptions.interruptable &&
  807. 			(this._status.prevented = prevented);
  808. 		},
  810. 		_getEl: function(el) {
  811. 			if (typeof el === "string") {
  812. 				return document.querySelector(el);
  813. 			} else if (el instanceof jQuery && el.length > 0) {
  814. 				return el[0];
  815. 			}
  816. 			return el;
  817. 		},
  819. 		/**
  820. 		 * Enables input devices
  821. 		 * @ko 입력 장치를 사용할 수 있게 한다
  822. 		 * @method eg.MovableCoord#enableInput
  823. 		 * @param {HTMLElement|String|jQuery} [element] An element from which the eg.MovableCoord module is using (if the element parameter is not present, it applies to all binded elements)<ko>eg.MovableCoord 모듈을 사용하는 엘리먼트 (element 파라미터가 존재하지 않을 경우, 바인드된 모든 엘리먼트에 적용된다)</ko>
  824. 		 * @return {eg.MovableCoord} An instance of a module itself <ko>자신의 인스턴스</ko>
  825. 		 */
  826. 		enableInput: function(element) {
  827. 			return this._inputControl(true, element);
  828. 		},
  830. 		/**
  831. 		 * Disables input devices
  832. 		 * @ko 입력 장치를 사용할 수 없게 한다.
  833. 		 * @method eg.MovableCoord#disableInput
  834. 		 * @param {HTMLElement|String|jQuery} [element] An element from which the eg.MovableCoord module is using (if the element parameter is not present, it applies to all binded elements)<<ko>eg.MovableCoord 모듈을 사용하는 엘리먼트 (element 파라미터가 존재하지 않을 경우, 바인드된 모든 엘리먼트에 적용된다)</ko>
  835. 		 * @return {eg.MovableCoord} An instance of a module itself <ko>자신의 인스턴스</ko>
  836. 		 */
  837. 		disableInput: function(element) {
  838. 			return this._inputControl(false, element);
  839. 		},
  841. 		_inputControl: function(isEnable, element) {
  842. 			var option = { enable: isEnable };
  843. 			if (element) {
  844. 				var hammer = this.getHammer(element);
  845. 				hammer && hammer.get("pan").set(option);
  846. 			} else { // for multi
  847. 				for (var p in this._hammers) {
  848. 					this._hammers[p].inst.get("pan").set(option);
  849. 				}
  850. 			}
  851. 			return this;
  852. 		},
  854. 		/**
  855. 		 * Destroys elements, properties, and events used in a module.
  856. 		 * @ko 모듈에 사용한 엘리먼트와 속성, 이벤트를 해제한다.
  857. 		 * @method eg.MovableCoord#destroy
  858. 		 */
  859. 		destroy: function() {
  860. 			this.off();
  861. 			for (var p in this._hammers) {
  862. 				this._hammers[p].inst.destroy();
  863. 				delete this._hammers[p].el[MC._KEY];
  864. 				delete this._hammers[p];
  865. 			}
  866. 		}
  867. 	});
  868. 	MC._KEY = "__MOVABLECOORD__";
  869. 	/**
  870. 	 * @name eg.MovableCoord.DIRECTION_NONE
  871. 	 * @constant
  872. 	 * @type {Number}
  873. 	 */
  874. 	MC.DIRECTION_NONE = 1;
  875. 	/**
  876. 	 * @name eg.MovableCoord.DIRECTION_LEFT
  877. 	 * @constant
  878. 	 * @type {Number}
  879. 	*/
  880. 	MC.DIRECTION_LEFT = 2;
  881. 	/**
  882. 	 * @name eg.MovableCoord.DIRECTION_RIGHT
  883. 	 * @constant
  884. 	 * @type {Number}
  885. 	*/
  886. 	MC.DIRECTION_RIGHT = 4;
  887. 	/**
  888. 	 * @name eg.MovableCoord.DIRECTION_UP
  889. 	 * @constant
  890. 	 * @type {Number}
  891. 	  */
  892. 	MC.DIRECTION_UP = 8;
  893. 	/**
  894. 	 * @name eg.MovableCoord.DIRECTION_DOWN
  895. 	 * @constant
  896. 	 * @type {Number}
  897. 	*/
  898. 	MC.DIRECTION_DOWN = 16;
  899. 	/**
  900. 	 * @name eg.MovableCoord.DIRECTION_HORIZONTAL
  901. 	 * @constant
  902. 	 * @type {Number}
  903. 	*/
  904. 	MC.DIRECTION_HORIZONTAL = 2 | 4;
  905. 	/**
  906. 	 * @name eg.MovableCoord.DIRECTION_VERTICAL
  907. 	 * @constant
  908. 	 * @type {Number}
  909. 	*/
  910. 	MC.DIRECTION_VERTICAL = 8 | 16;
  912. 	/**
  913. 	 * @name eg.MovableCoord.DIRECTION_ALL
  914. 	 * @constant
  915. 	 * @type {Number}
  916. 	*/
  917. 	MC.DIRECTION_ALL = MC.DIRECTION_HORIZONTAL | MC.DIRECTION_VERTICAL;
  919. 	return {
  920. 		"MovableCoord": ns.MovableCoord,
  921. 		"assignFn": assignFn
  922. 	};
  923. });
comments powered by Disqus