Rotate

Source: rotate.js

  1. /**
  2.  * Copyright (c) 2015 NAVER Corp.
  3.  * egjs projects are licensed under the MIT license
  4.  */
  5. import {window, document} from "./browser";
  7. export default (() => {
  8. 	let beforeScreenWidth = -1;
  9. 	let beforeVertical = null;
  10. 	const USER_LISTENERS = []; // user's event listener
  12. 	const agent = (() => {
  13. 		const ua = window.navigator.userAgent;
  14. 		const match = ua.match(/(iPhone OS|CPU OS|Android)\s([^\s;-]+)/); // fetch Android & iOS env only
  15. 		const res = {
  16. 			os: "",
  17. 			version: "",
  18. 			ua
  19. 		};
  21. 		if (match) {
  22. 			res.os = match[1].replace(/(?:CPU|iPhone)\sOS/, "ios").toLowerCase();
  23. 			res.version = match[2].replace(/\D/g, ".");
  24. 		}
  26. 		return res;
  27. 	})();
  29. 	const isMobile = /android|ios/.test(agent.os) || /Mobi/.test(agent.ua);
  31. 	// for non-mobile, will return an empty function methods
  32. 	if (!isMobile) {
  33. 		const fn = () => false;
  35. 		return {
  36. 			on: fn,
  37. 			off: fn,
  38. 			isVertical: fn
  39. 		};
  40. 	}
  42. 	/**
  43. 	 * Return event name string for orientationChange according browser support
  44. 	 */
  45. 	const ORIENTATION_CHANGE_EVENT = (() => {
  46. 		let type;
  48. 		/**
  49. 		 * Some platform/broswer returns previous widht/height state value. For workaround, give some delays.
  50. 		 *
  51. 		 * Android bug:
  52. 		 * - Andorid 2.3 - Has orientationchange with bug. Needs 500ms delay.
  53. 		 *
  54. 		 *   Note: Samsung's branded Android 2.3
  55. 		 *   When check orientationchange using resize event, could cause browser crash if user binds resize event on window
  56. 		 *
  57. 		 * - Android 2.2 - orientationchange fires twice(at first time width/height are not updated, but second returns well)
  58. 		 * - Lower than 2.2 - use resize event
  59. 		 *
  60. 		 * InApp bug:
  61. 		 * - Set 200ms delay
  62. 		 */
  63. 		if ((agent.os === "android" && agent.version === "2.1")) {
  64. 			type = "resize";
  65. 		} else {
  66. 			type = "onorientationchange" in window ? "orientationchange" : "resize";
  67. 		}
  69. 		return type;
  70. 	})();
  72. 	/**
  73. 	 * When viewport orientation is portrait, return true otherwise false
  74. 	 */
  75. 	function isVertical() {
  76. 		let screenWidth;
  77. 		let degree;
  78. 		let vertical;
  80. 		if (ORIENTATION_CHANGE_EVENT === "resize") {
  81. 			screenWidth = document.documentElement.clientWidth;
  83. 			if (beforeScreenWidth === -1) { // first call isVertical
  84. 				vertical = screenWidth < document.documentElement.clientHeight;
  85. 			} else {
  86. 				if (screenWidth < beforeScreenWidth) {
  87. 					vertical = true;
  88. 				} else if (screenWidth === beforeScreenWidth) {
  89. 					vertical = beforeVertical;
  90. 				} else {
  91. 					vertical = false;
  92. 				}
  93. 			}
  94. 		} else {
  95. 			degree = window.orientation;
  97. 			if (degree === 0 || degree === 180) {
  98. 				vertical = true;
  99. 			} else if (degree === 90 || degree === -90) {
  100. 				vertical = false;
  101. 			}
  102. 		}
  103. 		return vertical;
  104. 	}
  106. 	/**
  107. 	 * Trigger rotate event
  108. 	 */
  109. 	function triggerRotate(e) {
  110. 		const currentVertical = isVertical();
  112. 		if (isMobile) {
  113. 			if (beforeVertical !== currentVertical) {
  114. 				beforeVertical = currentVertical;
  115. 				beforeScreenWidth = document.documentElement.clientWidth;
  117. 				USER_LISTENERS.forEach(v => v(e, {
  118. 					isVertical: beforeVertical
  119. 				}));
  120. 			}
  121. 		}
  122. 	}
  124. 	/**
  125. 	 * Trigger event handler
  126. 	 */
  127. 	function handler(e) {
  128. 		let rotateTimer = null;
  130. 		if (ORIENTATION_CHANGE_EVENT === "resize") {
  131. 			window.setTimeout(() => triggerRotate(e), 0);
  132. 		} else {
  133. 			if (agent.os === "android") {
  134. 				const screenWidth = document.documentElement.clientWidth;
  136. 				if (e.type === "orientationchange" && screenWidth === beforeScreenWidth) {
  137. 					window.setTimeout(() => handler(e), 500);
  139. 					// When width value wasn't changed after firing orientationchange, then call handler again after 300ms.
  140. 					return false;
  141. 				}
  142. 			}
  144. 			rotateTimer && window.clearTimeout(rotateTimer);
  145. 			rotateTimer = window.setTimeout(() => triggerRotate(e), 300);
  146. 		}
  148. 		return undefined;
  149. 	}
  151. 	/**
  152. 	 * Tiny custom rotate event binder.
  153. 	 * > **NOTE:**
  154. 	 * > - It works for mobile environment only.
  155. 	 * > - For non-mobile environment, every methods will return 'false'.
  156. 	 *
  157. 	 * > **참고:**
  158. 	 * > - 모바일 환경에서만 동작 합니다.
  159. 	 * > - 비모바일 환경에서는 모든 메서드들은 'false'를 반환합니다.
  160. 	 * @ko 기기 회전에 따른 rotate 커스텀 이벤트 바인더
  161. 	 * @namespace eg.rotate
  162. 	 * @param {Event} e Native event object<ko>네이티브 이벤트 객체</ko>
  163. 	 * @param {Object} info The object of data to be sent when the event is fired<ko>이벤트가 발생할 때 전달되는 데이터 객체</ko>
  164. 	 * @param {Boolean} info.isVertical The orientation of the device (true: portrait, false: landscape) <ko>기기의 화면 방향(true: 수직 방향, false: 수평 방향)</ko>
  165. 	 * @support { "ios" : "7+", "an" : "2.1+ (except 3.x)"}
  166. 	 * @example
  167. 	 * var handler = function(e, info){
  168. 	 *      info.isVertical;
  169. 	 * }
  170. 	 * // bind
  171. 	 * eg.rotate.on(handler);
  172. 	 *
  173. 	 * // unbind
  174. 	 * eg.rotate.off(handler);
  175. 	 *
  176. 	 * // unbind all event attached (call without listener param)
  177. 	 * eg.rotate.off();
  178. 	 */
  179. 	return {
  180. 		/**
  181. 		 * Bind rotate event
  182. 		 * @ko rotate 이벤트 바인딩
  183. 		 * @memberof eg.rotate
  184. 		 * @static
  185. 		 * @param {Function} listener listener function <ko>이벤트 핸들러 함수</ko>
  186. 		 */
  187. 		on(listener) {
  188. 			if (typeof(listener) !== "function") {
  189. 				return;
  190. 			}
  192. 			beforeVertical = isVertical();
  193. 			beforeScreenWidth = document.documentElement.clientWidth;
  194. 			USER_LISTENERS.push(listener);
  196. 			// only attach once
  197. 			USER_LISTENERS.length === 1 &&
  198. 				window.addEventListener(ORIENTATION_CHANGE_EVENT, handler);
  199. 		},
  201. 		/**
  202. 		 * Unbind rotate event
  203. 		 * Without param, will unbind all binded listeners
  204. 		 * @ko rotate 이벤트 바인딩 해제. 파라미터 없이 호출되는 경우, 바인딩된 모든 이벤트를 해제한다.
  205. 		 * @memberof eg.rotate
  206. 		 * @static
  207. 		 * @param {Function} [listener] listener function <ko>이벤트 핸들러 함수</ko>
  208. 		 */
  209. 		off(listener) {
  210. 			if (typeof(listener) === "function") {
  211. 				// remove given listener from list
  212. 				for (let i = 0, el; (el = USER_LISTENERS[i]); i++) {
  213. 					if (el === listener) {
  214. 						USER_LISTENERS.splice(i, 1);
  215. 						break;
  216. 					}
  217. 				}
  218. 			}
  220. 			// detach when the condition is met
  221. 			if (!listener || USER_LISTENERS.length === 0) {
  222. 				USER_LISTENERS.splice(0);
  223. 				window.removeEventListener(ORIENTATION_CHANGE_EVENT, handler);
  224. 			}
  225. 		},
  227. 		/**
  228. 		 * Native event name used to detect rotate
  229. 		 * @ko roate 이벤트를 위해 사용된 네이티브 이벤트 명
  230. 		 * @memberof eg.rotate
  231. 		 * @property {String} event event name <ko>이벤 명</ko>
  232. 		 * @private
  233. 		 */
  234. 		orientationChange: ORIENTATION_CHANGE_EVENT,
  236. 		/**
  237. 		 * Get device is in vertical mode
  238. 		 * @ko 화면이 수직 방향인지 여부
  239. 		 * @memberof eg.rotate
  240. 		 * @static
  241. 		 * @method
  242. 		 * @return {Boolean} The orientation of the device (true: portrait, false: landscape) <ko>기기의 화면 방향(true: 수직 방향, false: 수평 방향)</ko>
  243. 		 * @example
  244. 		 *   eg.rotate.isVertical();  // Check if device is in portrait mode
  245. 		 */
  246. 		isVertical,
  248. 		/**
  249. 		 * Trigger rotate event
  250. 		 * @memberof eg.rotate
  251. 		 * @private
  252. 		 */
  253. 		triggerRotate,
  255. 		/**
  256. 		 * Event handler function
  257. 		 * @memberof eg.rotate
  258. 		 * @private
  259. 		 */
  260. 		handler
  261. 	};
  262. })();
comments powered by Disqus