egjs

Source: infiniteGrid.js

  1. /**
  2. * Copyright (c) 2015 NAVER Corp.
  3. * egjs projects are licensed under the MIT license
  4. */
  6. // jscs:disable validateLineBreaks, maximumLineLength
  7. eg.module("infiniteGrid", ["jQuery", eg, window, document], function($, ns, global, doc) {
  8. 	"use strict";
  10. 	/**
  11. 	 * A module used to arrange card elements including content infinitely on a grid layout. With this module, you can implement a grid-pattern user interface composed of different card elements whose sizes vary. It guarantees performance by maintaining the number of DOMs the module is handling under any circumstance
  12. 	 * @group egjs
  13. 	 * @ko 콘텐츠가 있는 카드 엘리먼트를 그리드 레이아웃에 무한으로 배치하는 모듈. 다양한 크기의 카드 엘리먼트를 격자 모양으로 배치하는 UI를 만들 수 있다. 카드 엘리먼트의 개수가 계속 늘어나도 모듈이 처리하는 DOM의 개수를 일정하게 유지해 최적의 성능을 보장한다
  14. 	 * @class
  15. 	 * @name eg.InfiniteGrid
  16. 	 * @extends eg.Component
  17. 	 *
  18. 	 * @param {HTMLElement|String|jQuery} element A base element for a module <ko>모듈을 적용할 기준 엘리먼트</ko>
  19. 	 * @param {Object} [options] The option object of the eg.InfiniteGrid module <ko>eg.InfiniteGrid 모듈의 옵션 객체</ko>
  20. 	 * @param {String} [options.itemSelector] A selector to select card elements that make up the layout (@deprecated since 1.3.0)<ko>레이아웃을 구성하는 카드 엘리먼트를 선택할 선택자(selector) (@deprecated since 1.3.0)</ko>
  21. 	 * @param {Number} [options.count=30] The number of DOMs handled by module. If the count value is greater than zero, the number of DOMs is maintained. If the count value is zero or less than zero, the number of DOMs will increase as card elements are added. <ko>모듈이 유지할 실제 DOM의 개수. count 값이 0보다 크면 DOM 개수를 일정하게 유지한다. count 값이 0 이하면 카드 엘리먼트가 추가될수록 DOM 개수가 계속 증가한다.</ko>
  22. 	 * @param {String} [options.defaultGroupKey=null] The default group key configured in a card element contained in the markup upon initialization of a module object <ko>모듈 객체를 초기화할 때 마크업에 있는 카드 엘리먼트에 설정할 그룹 키 </ko>
  23. 	 * @param {Boolean} [options.isEqualSize=false] Indicates whether sizes of all card elements are equal to one another. If sizes of card elements to be arranged are all equal and this option is set to "true", the performance of layout arrangement can be improved. <ko>카드 엘리먼트의 크기가 동일한지 여부. 배치될 카드 엘리먼트의 크기가 모두 동일할 때 이 옵션을 'true'로 설정하면 레이아웃 배치 성능을 높일 수 있다</ko>
  24. 	 * @param {Number} [options.threshold=300] The threshold size of an event area where card elements are added to a layout.<br>- append event: If the current vertical position of the scroll bar is greater than "the bottom property value of the card element at the top of the layout" plus "the value of the threshold option", the append event will occur.<br>- prepend event: If the current vertical position of the scroll bar is less than "the bottom property value of the card element at the top of the layout" minus "the value of the threshold option", the prepend event will occur. <ko>−	레이아웃에 카드 엘리먼트를 추가하는 이벤트가 발생하는 기준 영역의 크기.<br>- append 이벤트: 현재 스크롤의 y 좌표 값이 '레이아웃의 맨 아래에 있는 카드 엘리먼트의 top 속성의 값 + threshold 옵션의 값'보다 크면 append 이벤트가 발생한다.<br>- prepend 이벤트: 현재 스크롤의 y 좌표 값이 '레이아웃의 맨 위에 있는 카드 엘리먼트의 bottom 속성의 값 - threshold 옵션의 값'보다 작으면 prepend 이벤트가 발생한다</ko>
  25. 	 *
  26. 	 * @codepen {"id":"zvrbap", "ko":"InfiniteGrid 데모", "en":"InfiniteGrid example", "collectionId":"DPYEww", "height": 403}
  27. 	 *  @support {"ie": "8+", "ch" : "latest", "ff" : "latest",  "sf" : "latest", "edge" : "latest", "ios" : "7+", "an" : "2.1+ (except 3.x)"}
  28. 	 *
  29. 	 * @example
  30. 		<!-- HTML -->
  31. 		<ul id="grid">
  32. 			<li class="card">
  33. 				<div>test1</div>
  34. 			</li>
  35. 			<li class="card">
  36. 				<div>test2</div>
  37. 			</li>
  38. 			<li class="card">
  39. 				<div>test3</div>
  40. 			</li>
  41. 			<li class="card">
  42. 				<div>test4</div>
  43. 			</li>
  44. 			<li class="card">
  45. 				<div>test5</div>
  46. 			</li>
  47. 			<li class="card">
  48. 				<div>test6</div>
  49. 			</li>
  50. 		</ul>
  51. 		<script>
  52. 		var some = new eg.InfiniteGrid("#grid").on("layoutComplete", function(e) {
  53. 			// ...
  54. 		});
  55. 		</script>
  56. 	 */
  57. 	var EVENTS = {
  58. 		"layoutComplete": "layoutComplete",
  59. 		"append": "append",
  60. 		"prepend": "prepend"
  61. 	};
  62. 	var RETRY = 3;
  63. 	ns.InfiniteGrid = ns.Class.extend(ns.Component, {
  64. 		_events: function() {
  65. 			return EVENTS;
  66. 		},
  67. 		construct: function(el, options, _prefix) {
  68. 			var ua = global.navigator.userAgent;
  69. 			this.options = $.extend({
  70. 				isEqualSize: false,
  71. 				defaultGroupKey: null,
  72. 				count: 30,
  73. 				threshold: 300
  74. 			}, options);
  76. 			// if el is jQuery instance, el should change to HTMLElement.
  77. 			this.$el = el instanceof $ ? el : $(el);
  78. 			this.el = this.$el.get(0);
  79. 			this.el.style.position = "relative";
  80. 			this._prefix = _prefix || "";
  81. 			this._isIos = /iPhone|iPad/.test(ua);
  82. 			this._isIE = /MSIE|Trident|Windows Phone|Edge/.test(ua);
  83. 			this._appendCols = this._prependCols = [];
  84. 			this.$view = $(global);
  85. 			this._reset();
  86. 			this._refreshViewport();
  87. 			if (this.el.children.length > 0) {
  88. 				this.layout(true, this._itemize($.makeArray(this.el.children), this.options.defaultGroupKey));
  89. 			}
  91. 			this._onScroll = $.proxy(this._onScroll, this);
  92. 			this._onResize = $.proxy(this._onResize, this);
  93. 			this.$view.on("scroll", this._onScroll)
  94. 				.on("resize", this._onResize);
  95. 		},
  96. 		_getScrollTop: function() {
  97. 			return doc.body.scrollTop || doc.documentElement.scrollTop;
  98. 		},
  99. 		_onScroll: function() {
  100. 			if (this.isProcessing()) {
  101. 				return;
  102. 			}
  103. 			var scrollTop = this._getScrollTop();
  104. 			var prevScrollTop = this._prevScrollTop;
  106. 			if (this._isIos && scrollTop === 0 || prevScrollTop === scrollTop) {
  107. 				return;
  108. 			}
  109. 			var ele;
  110. 			var rect;
  111. 			if (prevScrollTop < scrollTop) {
  112. 				if ($.isEmptyObject(this._bottomElement)) {
  113. 					this._bottomElement = this.getBottomElement();
  114. 					if (this._bottomElement == null) {
  115. 						return;
  116. 					}
  117. 				}
  118. 				ele = this._bottomElement;
  119. 				rect = ele.getBoundingClientRect();
  120. 				if (rect.top <= this._clientHeight + this.options.threshold) {
  121. 					/**
  122. 					 * This event is fired when a card element must be added at the bottom of a grid layout because there is no card to be displayed on screen when a user scrolls near bottom.
  123. 					 * @ko 카드 엘리먼트가 그리드 레이아웃의 아래에 추가돼야 할 때 발생하는 이벤트. 사용자가 아래로 스크롤해서 화면에 표시될 카드가 없을 때 발생한다
  124. 					 * @name eg.InfiniteGrid#append
  125. 					 * @event
  126. 					 *
  127. 					 * @param {Object} param The object of data to be sent to an event <ko>이벤트에 전달되는 데이터 객체</ko>
  128. 					 * @param {Number} param.scrollTop Current vertical position of the scroll bar<ko>현재 스크롤의 y 좌표 값</ko>
  129. 					 */
  130. 					this.trigger(this._prefix + EVENTS.append, {
  131. 						scrollTop: scrollTop
  132. 					});
  133. 				}
  134. 			} else {
  135. 				if ($.isEmptyObject(this._topElement)) {
  136. 					this._topElement = this.getTopElement();
  137. 					if (this._topElement == null) {
  138. 						return;
  139. 					}
  140. 				}
  141. 				ele = this._topElement;
  142. 				rect = ele.getBoundingClientRect();
  143. 				if (rect.bottom >= -this.options.threshold) {
  144. 					/**
  145. 					 * This event is fired when a card element must be added at the top of a grid layout because there is no card to be displayed on screen when a user scrolls near top. This event is available only if the isRecycling() method returns true.
  146. 					 * @ko 카드가 그리드 레이아웃의 위에 추가돼야 할 때 발생하는 이벤트. 사용자가 위로 스크롤해서 화면에 표시될 카드가 없을 때 발생한다. 이 이벤트는 isRecycling() 메서드의 반환값이 'true'일 때만 발생한다
  147. 					 * @name eg.InfiniteGrid#prepend
  148. 					 * @event
  149. 					 *
  150. 					 * @param {Object} param The object of data to be sent to an event<ko>이벤트에 전달되는 데이터 객체</ko>
  151. 					 * @param {Number} param.scrollTop Current vertical position of the scroll bar<ko>현재 스크롤의 y 좌표 값</ko>
  152. 					 */
  153. 					var croppedDistance = this.fit();
  154. 					if (croppedDistance > 0) {
  155. 						scrollTop -= croppedDistance;
  156. 						this.$view.scrollTop(scrollTop);
  157. 					}
  158. 					this.trigger(this._prefix + EVENTS.prepend, {
  159. 						scrollTop: scrollTop
  160. 					});
  161. 				}
  162. 			}
  163. 			this._prevScrollTop = scrollTop;
  164. 		},
  165. 		_onResize: function() {
  166. 			if (this._resizeTimeout) {
  167. 				clearTimeout(this._resizeTimeout);
  168. 			}
  169. 			var self = this;
  170. 			this._resizeTimeout = setTimeout(function() {
  171. 				self._refreshViewport();
  172. 				(self.$el.innerWidth() !== self._containerWidth) && self.layout(true);
  173. 				self._resizeTimeout = null;
  174. 				self._prevScrollTop = -1;
  175. 			}, 100);
  176. 		},
  177. 		_refreshViewport: function() {
  178. 			var el = this.$view.get(0);
  179. 			if (el) {
  180. 				this._clientHeight = $.isWindow(el) ? el.innerHeight || document.documentElement.clientHeight : el.clientHeight;
  181. 			}
  182. 		},
  183. 		/**
  184. 		 * Returns the current state of a module such as location information. You can use the setStatus() method to restore the information returned through a call to this method.
  185. 		 * @ko 카드의 위치 정보 등 모듈의 현재 상태 정보를 반환한다. 이 메서드가 반환한 정보를 저장해 두었다가 setStatus() 메서드로 복원할 수 있다
  186. 		 * @method eg.InfiniteGrid#getStatus
  187. 		 * @return {Object} State object of the eg.InfiniteGrid module<ko>eg.InfiniteGrid 모듈의 상태 객체</ko>
  188. 		 */
  189. 		getStatus: function() {
  190. 			var data = {};
  191. 			var p;
  192. 			for (p in this) {
  193. 				if (this.hasOwnProperty(p) && /^_/.test(p) &&
  194. 					typeof this[p] !== "function" && !(this[p] instanceof Element)) {
  195. 					data[p] = this[p];
  196. 				}
  197. 			}
  198. 			return {
  199. 				prop: data,
  200. 				options: $.extend({}, this.options),
  201. 				items: $.map(this.items, function(v) {
  202. 					var clone = $.extend({}, v);
  203. 					delete clone.el;
  204. 					return clone;
  205. 				}),
  206. 				html: this.el.innerHTML,
  207. 				cssText: this.el.style.cssText
  208. 			};
  209. 		},
  210. 		/**
  211. 		 * Sets the state of the eg.InfiniteGrid module with the information returned through a call to the getStatue() method.
  212. 		 * @ko getStatue() 메서드가 저장한 정보로 eg.InfiniteGrid 모듈의 상태를 설정한다.
  213. 		 * @method eg.InfiniteGrid#setStatus
  214. 		 * @param {Object} status State object of the eg.InfiniteGrid module <ko>eg.InfiniteGrid 모듈의 상태 객체</ko>
  215. 		 * @return {eg.InfiniteGrid} An instance of a module itself<ko>모듈 자신의 인스턴스</ko>
  216. 		 */
  217. 		setStatus: function(status) {
  218. 			if (!status || !status.cssText || !status.html ||
  219. 				!status.prop || !status.items) {
  220. 				return this;
  221. 			}
  222. 			this.el.style.cssText = status.cssText;
  223. 			this.el.innerHTML = status.html;
  224. 			$.extend(this, status.prop);
  225. 			this._topElement = this._bottomElement = null;
  226. 			this.items = $.map(this.el.children, function(v, i) {
  227. 				status.items[i].el = v;
  228. 				return status.items[i];
  229. 			});
  230. 			return this;
  231. 		},
  232. 		/**
  233. 		 * Checks whether a card element is being added.
  234. 		 * @ko 카드 엘리먼트 추가가 진행 중인지 확인한다
  235. 		 * @method eg.InfiniteGrid#isProcessing
  236. 		 * @return {Boolean} Indicates whether a card element is being added <ko>카드 엘리먼트 추가 진행 중 여부</ko>
  237. 		 */
  238. 		isProcessing: function() {
  239. 			return this._isProcessing;
  240. 		},
  241. 		/**
  242. 		 * Checks whether the total number of added card elements is greater than the value of the count option. Note that the value of the count option is always greater than zero. If it returns true, the number of DOMs won't increase even though card elements are added; instead of adding a new DOM, existing DOMs are recycled to maintain the number of DOMs.
  243. 		 * @ko 추가된 카드 엘리먼트의 전체 개수가 count 옵션의 값보다 큰지 확인한다. 단, count 옵션의 값은 0보다 크다. 'true'가 반환되면 카드 엘리먼트가 더 추가돼도 DOM의 개수를 증가하지 않고 기존 DOM을 재활용(recycle)해 DOM의 개수를 일정하게 유지한다
  244. 		 * @method eg.InfiniteGrid#isRecycling
  245. 		 * @return {Boolean} Indicates whether the total number of added card elements is greater than the value of the count option. <ko>추가된 카드 엘리먼트의 전체 개수가 count 옵션의 값보다 큰지 여부</ko>
  246. 		 */
  247. 		isRecycling: function() {
  248. 			return (this.options.count > 0) && this._isRecycling;
  249. 		},
  250. 		/**
  251. 		 * Returns the list of group keys which belongs to card elements currently being maintained. You can use the append() or prepend() method to configure group keys so that multiple card elements can be managed at once. If you do not use these methods to configure group keys, it returns undefined as a group key.
  252. 		 * @ko 현재 유지하고 있는 카드 엘리먼트의 그룹 키 목록을 반환한다. 여러 개의 카드 엘리먼트를 묶어서 관리할 수 있도록 append() 메서드나 prepend() 메서드에서 그룹 키를 지정할 수 있다. append() 메서드나 prepend() 메서드에서 그룹 키를 지정하지 않았다면 'undefined'가 그룹 키로 반환된다
  253. 		 * @method eg.InfiniteGrid#getGroupKeys
  254. 		 * @return {Array} List of group keys <ko>그룹 키의 목록</ko>
  255. 		 */
  256. 		getGroupKeys: function() {
  257. 			return $.map(this.items, function(v) {
  258. 				return v.groupKey;
  259. 			});
  260. 		},
  261. 		/**
  262. 		 * Rearranges a layout.
  263. 		 * @ko 레이아웃을 다시 배치한다.
  264. 		 * @method eg.InfiniteGrid#layout
  265. 		 * @param {Boolean} [isRelayout=true] Indicates whether a card element is being relayouted <ko>카드 엘리먼트 재배치 여부</ko>
  266. 		 * @return {eg.InfiniteGrid} An instance of a module itself<ko>모듈 자신의 인스턴스</ko>
  267. 		 *
  268. 		 *  [private parameter]
  269. 		 * _addItems: added items
  270. 		 * _options: {
  271. 		 *	 isAppend: Checks whether the append() method is used to add a card element.
  272. 		 *	 removedCount: The number of deleted card elements to maintain the number of DOMs.
  273. 		 *}
  274. 		 */
  275. 		layout: function(isRelayout, _addItems, _options) {
  276. 			var options = $.extend({
  277. 				isAppend: true,
  278. 				removedCount: 0
  279. 			}, _options);
  280. 			isRelayout = typeof isRelayout === "undefined" || isRelayout;
  282. 			// for except case.
  283. 			if (!_addItems && !options.isAppend) {
  284. 				options.isAppend = true;
  285. 			}
  286. 			this._waitResource(isRelayout, options.isAppend ? _addItems : _addItems.reverse(), options);
  287. 			return this;
  288. 		},
  289. 		_layoutComplete: function(isRelayout, addItems, options) {
  290. 			var isInit = !this.items.length;
  292. 			// insert items (when appending)
  293. 			if (addItems && options.isAppend) {
  294. 				this.items = this.items.concat(addItems);
  295. 			}
  297. 			if (isInit) {
  298. 				$.each(addItems, function(i, v) {
  299. 					v.el.style.position = "absolute";
  300. 				});
  301. 			}
  303. 			if (isInit || isRelayout) {
  304. 				this._resetCols(this._measureColumns());
  305. 			} else {
  306. 				if (!addItems) {
  307. 					this._appendCols = this._prependCols.concat();
  308. 				}
  309. 			}
  310. 			this._layoutItems(isRelayout, addItems, options);
  311. 			this._postLayout(isRelayout, addItems, options);
  312. 		},
  313. 		_layoutItems: function(isRelayout, addItems, options) {
  314. 			var self = this;
  315. 			var items = addItems || this.items;
  317. 			$.each(items, function(i, v) {
  318. 				v.position = self._getItemLayoutPosition(isRelayout, v, options.isAppend);
  319. 			});
  320. 			if (addItems && !options.isAppend) {
  321. 				// insert items (when prepending)
  322. 				this.items = addItems.sort(function(p, c) {
  323. 					return p.position.y - c.position.y;
  324. 				}).concat(this.items);
  326. 				var y = this._getTopPositonY();
  327. 				if (y !== 0) {
  328. 					items = this.items;
  329. 					$.each(items, function(i, v) {
  330. 						v.position.y -= y;
  331. 					});
  332. 					this._syncCols(false);	// for prepending
  333. 					this._syncCols(true);	// for appending
  334. 				}
  335. 			}
  337. 			// for performance
  338. 			$.each(items, function(i, v) {
  339. 				if (v.el) {
  340. 					var style = v.el.style;
  341. 					style.left = v.position.x + "px";
  342. 					style.top = v.position.y + "px";
  343. 				}
  344. 			});
  345. 		},
  346. 		/**
  347. 		 * Adds a card element at the bottom of a grid layout. This method is available only if the isProcessing() method returns false.
  348. 		 * @ko 카드 엘리먼트를 그리드 레이아웃의 아래에 추가한다. isProcessing() 메서드의 반환값이 'false'일 때만 이 메서드를 사용할 수 있다
  349. 		 * 이 메소드는 isProcessing()의 반환값이 false일 경우에만 사용 가능하다.
  350. 		 * @method eg.InfiniteGrid#append
  351. 		 * @param {Array|String|jQuery} elements Array of the card elements to be added <ko>추가할 카드 엘리먼트의 배열</ko>
  352. 		 * @param {Number|String} [groupKey] The group key to be configured in a card element. It is set to "undefined" by default.<ko>추가할 카드 엘리먼트에 설정할 그룹 키. 생략하면 값이 'undefined'로 설정된다</ko>
  353. 		 * @return {Number} The number of added card elements <ko>추가된 카드 엘리먼트의 개수</ko>
  354. 		 */
  355. 		append: function($elements, groupKey) {
  356. 			if (this._isProcessing || $elements.length === 0) {
  357. 				return;
  358. 			}
  360. 			// convert jQuery instance
  361. 			$elements = $($elements);
  362. 			this._insert($elements, groupKey, true);
  363. 			return $elements.length;
  364. 		},
  365. 		/**
  366. 		 * Adds a card element at the top of a grid layout. This method is available only if the isProcessing() method returns false and the isRecycling() method returns true.
  367. 		 * @ko 카드 엘리먼트를 그리드 레이아웃의 위에 추가한다. isProcessing() 메서드의 반환값이 'false'이고, isRecycling() 메서드의 반환값이 'true'일 때만 이 메서드를 사용할 수 있다
  368. 		 * @method eg.InfiniteGrid#prepend
  369. 		 * @param {Array|String|jQuery} elements Array of the card elements to be added <ko>추가할 카드 엘리먼트 배열</ko>
  370. 		 * @param {Number|String} [groupKey] The group key to be configured in a card element. It is set to "undefined" by default.<ko>추가할 카드 엘리먼트에 설정할 그룹 키. 생략하면 값이 'undefined'로 설정된다</ko>
  371. 		 * @return {Number} The number of added card elements <ko>추가된 카드 엘리먼트의 개수</ko>
  372. 		 */
  373. 		prepend: function($elements, groupKey) {
  374. 			if (this._isProcessing || $elements.length === 0) {
  375. 				return;
  376. 			}
  378. 			// convert jQuery instance
  379. 			$elements = $($elements);
  380. 			this._insert($elements, groupKey, false);
  381. 			return $elements.length;
  382. 		},
  383. 		/**
  384. 		 * Clears added card elements and data.
  385. 		 * @ko 추가된 카드 엘리먼트와 데이터를 모두 지운다.
  386. 		 * @method eg.InfiniteGrid#clear
  387. 		 * @return {eg.InfiniteGrid} An instance of a module itself<ko>모듈 자신의 인스턴스</ko>
  388. 		 */
  389. 		clear: function() {
  390. 			this.el.innerHTML = "";
  391. 			this.el.style.height = "";
  392. 			this._reset();
  393. 			return this;
  394. 		},
  396. 		/**
  397. 		 * Returns a card element at the top of a layout.
  398. 		 * @ko 레이아웃의 맨 위에 있는 카드 엘리먼트를 반환한다.
  399. 		 * @method eg.InfiniteGrid#getTopElement
  400. 		 *
  401. 		 * @return {HTMLElement} Card element at the top of a layout. (if the position of card elements are same, it returns the first left element) <ko>레이아웃의 맨 위에 있는 카드 엘리먼트 (카드의 위치가 같은 경우, 왼쪽 엘리먼트가 반환된다)</ko>
  402. 		 */
  403. 		getTopElement: function() {
  404. 			var item = this._getTopItem();
  405. 			return item && item.el;
  406. 		},
  408. 		_getTopItem: function() {
  409. 			var item = null;
  410. 			var min = Infinity;
  411. 			$.each(this._getColItems(false), function(i, v) {
  412. 				if (v && v.position.y < min) {
  413. 					min = v.position.y;
  414. 					item = v;
  415. 				}
  416. 			});
  418. 			return item;
  419. 		},
  421. 		_getTopPositonY: function() {
  422. 			var item = this._getTopItem();
  423. 			return item ? item.position.y : 0;
  424. 		},
  426. 		/**
  427. 		 * Returns a card element at the bottom of a layout.
  428. 		 * @ko 레이아웃의 맨 아래에 있는 카드 엘리먼트를 반환한다.
  429. 		 * @method eg.InfiniteGrid#getBottomElement
  430. 		 *
  431. 		 * @return {HTMLElement} Card element at the bottom of a layout (if the position of card elements are same, it returns the first right element)<ko>레이아웃의 맨 아래에 있는 카드 엘리먼트 (카드의 위치가 같은 경우, 오른쪽 엘리먼트가 반환된다)</ko>
  432. 		 */
  433. 		getBottomElement: function() {
  434. 			var item = null;
  435. 			var max = -Infinity;
  436. 			var pos;
  437. 			$.each(this._getColItems(true), function(i, v) {
  438. 				pos = v ? v.position.y + v.size.height : 0;
  439. 				if (pos >= max) {
  440. 					max = pos;
  441. 					item = v;
  442. 				}
  443. 			});
  444. 			return item && item.el;
  445. 		},
  447. 		_postLayout: function(isRelayout, addItems, options) {
  448. 			if (!this._isProcessing) {
  449. 				return;
  450. 			}
  451. 			addItems = addItems || [];
  453. 			this.el.style.height = this._getContainerSize().height + "px";
  454. 			this._doubleCheckCount = RETRY;
  456. 			// refresh element
  457. 			this._topElement = this.getTopElement();
  458. 			this._bottomElement = this.getBottomElement();
  460. 			var distance = 0;
  461. 			if (!options.isAppend) {
  462. 				distance = addItems.length >= this.items.length ?
  463. 					0 : this.items[addItems.length].position.y;
  464. 				if (distance > 0) {
  465. 					this._prevScrollTop = this._getScrollTop() + distance;
  466. 					this.$view.scrollTop(this._prevScrollTop);
  467. 				}
  468. 			}
  470. 			// reset flags
  471. 			this._isProcessing = false;
  473. 			/**
  474. 			 * This event is fired when layout is successfully arranged through a call to the append(), prepend(), or layout() method.
  475. 			 * @ko 레이아웃 배치가 완료됐을 때 발생하는 이벤트. append() 메서드나 prepend() 메서드, layout() 메서드 호출 후 카드의 배치가 완료됐을 때 발생한다
  476. 			 * @name eg.InfiniteGrid#layoutComplete
  477. 			 * @event
  478. 			 *
  479. 			 * @param {Object} param The object of data to be sent to an event <ko>이벤트에 전달되는 데이터 객체</ko>
  480. 			 * @param {Array} param.target Rearranged card elements<ko>재배치된 카드 엘리먼트들</ko>
  481. 			 * @param {Boolean} param.isAppend Checks whether the append() method is used to add a card element. It returns true even though the layoutComplete event is fired after the layout() method is called. <ko>카드 엘리먼트가 append() 메서드로 추가됐는지 확인한다. layout() 메서드가 호출된 후 layoutComplete 이벤트가 발생해도 'true'를 반환한다.</ko>
  482. 			 * @param {Number} param.distance Distance the card element at the top of a grid layout has moved after the layoutComplete event is fired. In other words, it is the same as an increased height with a new card element added using the prepend() method <ko>그리드 레이아웃의 맨 위에 있던 카드 엘리먼트가 layoutComplete 이벤트 발생 후 이동한 거리. 즉, prepend() 메서드로 카드 엘리먼트가 추가돼 늘어난 높이다.</ko>
  483. 			 * @param {Number} param.croppedCount The number of deleted card elements to maintain the number of DOMs<ko>일정한 DOM 개수를 유지하기 위해, 삭제한 카드 엘리먼트들의 개수</ko>
  484. 			 */
  485. 			this.trigger(this._prefix + EVENTS.layoutComplete, {
  486. 				target: addItems.concat(),
  487. 				isAppend: options.isAppend,
  488. 				distance: distance,
  489. 				croppedCount: options.removedCount
  490. 			});
  492. 			// doublecheck!!! (workaround)
  493. 			if (!options.isAppend) {
  494. 				if (this._getScrollTop() === 0) {
  495. 					var self = this;
  496. 					clearInterval(this._doubleCheckTimer);
  497. 					this._doubleCheckTimer = setInterval(function() {
  498. 						if (self._getScrollTop() === 0) {
  499. 							self.trigger(self._prefix + EVENTS.prepend, {
  500. 								scrollTop: 0
  501. 							});
  502. 							(--self._doubleCheckCount <= 0) && clearInterval(self._doubleCheckTimer);
  503. 						}
  504. 					}, 500);
  505. 				}
  506. 			}
  507. 		},
  509. 		// $elements => $([HTMLElement, HTMLElement, ...])
  510. 		_insert: function($elements, groupKey, isAppend) {
  511. 			this._isProcessing = true;
  512. 			if (!this.isRecycling()) {
  513. 				this._isRecycling = (this.items.length + $elements.length) >= this.options.count;
  514. 			}
  515. 			if ($elements.length === 0) {
  516. 				return;
  517. 			}
  518. 			var elements = $elements.toArray();
  519. 			var $cloneElements = $(elements);
  520. 			var dummy = -this._clientHeight + "px";
  521. 			$.each(elements, function(i, v) {
  522. 				v.style.position = "absolute";
  523. 				v.style.top = dummy;
  524. 			});
  525. 			var removedCount = this._adjustRange(isAppend, $cloneElements);
  527. 			// prepare HTML
  528. 			this.$el[isAppend ? "append" : "prepend"]($cloneElements);
  529. 			this.layout(false, this._itemize($cloneElements, groupKey), {
  530. 				isAppend: isAppend,
  531. 				removedCount: removedCount
  532. 			});
  533. 		},
  534. 		_waitResource: function(isRelayout, addItems, options) {
  535. 			this._isProcessing = true;
  536. 			var needCheck = this._checkImageLoaded();
  537. 			var self = this;
  538. 			var callback = function() {
  539. 				self._layoutComplete(isRelayout, addItems, options);
  540. 			};
  541. 			if (needCheck.length > 0) {
  542. 				this._waitImageLoaded(needCheck, callback);
  543. 			} else {
  544. 				// convert to async
  545. 				setTimeout(function() {
  546. 					callback && callback();
  547. 				}, 0);
  548. 			}
  549. 		},
  551. 		_adjustRange: function (isTop, $elements) {
  552. 			var removedCount = 0;
  553. 			if (!this.isRecycling()) {
  554. 				return removedCount;
  555. 			}
  557. 			// trim $elements
  558. 			if (this.options.count <= $elements.length) {
  559. 				removedCount += isTop ? $elements.splice(0, $elements.length - this.options.count).length
  560. 					: $elements.splice(this.options.count).length;
  561. 			}
  562. 			var diff = this.items.length + $elements.length - this.options.count;
  563. 			var targets;
  564. 			var idx;
  565. 			if (diff <= 0 || (idx = this._getDelimiterIndex(isTop, diff)) < 0) {
  566. 				return removedCount;
  567. 			}
  568. 			if (isTop) {
  569. 				targets = this.items.splice(0, idx);
  570. 				this._syncCols(false);	// for prepending
  571. 			} else {
  572. 				targets = idx === this.items.length ? this.items.splice(0) : this.items.splice(idx, this.items.length - idx);
  573. 				this._syncCols(true);	// for appending;
  574. 			}
  576. 			// @todo improve performance
  577. 			$.each(targets, function(i, v) {
  578. 				idx = $elements.index(v.el);
  579. 				if (idx !== -1) {
  580. 					$elements.splice(idx, 1);
  581. 				} else {
  582. 					v.el.parentNode.removeChild(v.el);
  583. 				}
  584. 			});
  585. 			removedCount += targets.length;
  586. 			return removedCount;
  587. 		},
  588. 		_getDelimiterIndex: function(isTop, removeCount) {
  589. 			var len = this.items.length;
  590. 			if (len === removeCount) {
  591. 				return len;
  592. 			}
  593. 			var i;
  594. 			var idx = 0;
  595. 			var baseIdx = isTop ? removeCount - 1 : len - removeCount;
  596. 			var targetIdx = baseIdx + (isTop ? 1 : -1);
  597. 			var groupKey = this.items[baseIdx].groupKey;
  598. 			if (groupKey != null && groupKey === this.items[targetIdx].groupKey) {
  599. 				if (isTop) {
  600. 					for (i = baseIdx; i > 0; i--) {
  601. 						if (groupKey !== this.items[i].groupKey) {
  602. 							break;
  603. 						}
  604. 					}
  605. 					idx =  i === 0 ? -1 : i + 1;
  606. 				} else {
  607. 					for (i = baseIdx; i < len; i++) {
  608. 						if (groupKey !== this.items[i].groupKey) {
  609. 							break;
  610. 						}
  611. 					}
  612. 					idx = i === len ? -1 : i;
  613. 				}
  614. 			} else {
  615. 				idx = isTop ? targetIdx : baseIdx;
  616. 			}
  617. 			return idx;
  618. 		},
  620. 		// fit size
  621. 		_fit: function(applyDom) {
  622. 			// for caching
  623. 			if (this.options.count <= 0) {
  624. 				this._fit = function() {
  625. 					return 0;
  626. 				};
  627. 				return 0;
  628. 			}
  629. 			var y = this._getTopPositonY();
  630. 			if (y !== 0) {
  631. 				// need to fit
  632. 				$.each(this.items, function(i, v) {
  633. 					v.position.y -= y;
  634. 					applyDom && (v.el.style.top = v.position.y + "px");
  635. 				});
  636. 				this._syncCols(false);	// for prepending
  637. 				this._syncCols(true);	// for appending
  638. 				applyDom && (this.el.style.height = this._getContainerSize().height + "px");
  639. 			}
  640. 			return y;
  641. 		},
  643. 		/**
  644. 		* Removes extra space caused by adding card elements.
  645. 		* @ko 카드 엘리먼트를 추가한 다음 생긴 빈 공간을 제거한다
  646. 		* @method eg.InfiniteGrid#fit
  647. 		* @deprecated since version 1.3.0
  648. 		* @return {Number} Actual length of space removed (unit: px) <ko>빈 공간이 제거된 실제 길이(단위: px)</ko>
  649. 		*/
  650. 		fit: function() {
  651. 			return this._fit(true);
  652. 		},
  654. 		_reset: function() {
  655. 			this._isProcessing = false;
  656. 			this._topElement = null;
  657. 			this._bottomElement = null;
  658. 			this._isRecycling = false;
  659. 			this._prevScrollTop = 0;
  660. 			this._equalItemSize = 0;
  661. 			this._resizeTimeout = null;
  662. 			this._doubleCheckTimer = null;
  663. 			this._doubleCheckCount = RETRY;
  664. 			this._resetCols(this._appendCols.length || 0);
  665. 			this.items = [];
  666. 		},
  667. 		_checkImageLoaded: function() {
  668. 			return this.$el.find("img").filter(function(k, v) {
  669. 				if (v.nodeType && ($.inArray(v.nodeType, [1,9,11]) !== -1)) {
  670. 					return !v.complete;
  671. 				}
  672. 			}).toArray();
  673. 		},
  674. 		_waitImageLoaded: function(needCheck, callback) {
  675. 			var checkCount = needCheck.length;
  676. 			var onCheck = function(e) {
  677. 				checkCount--;
  678. 				$(e.target).off("load error");
  679. 				checkCount <= 0 && callback && callback();
  680. 			};
  681. 			var $el;
  682. 			var self = this;
  683. 			$.each(needCheck, function(i, v) {
  684. 				$el = $(v);
  686. 				// workaround for IE
  687. 				if (self._isIE) {
  688. 					var url = v.getAttribute("src");
  689. 					v.setAttribute("src", "");
  690. 					v.setAttribute("src", url);
  691. 				}
  692. 				$el.on("load error", onCheck);
  693. 			});
  694. 		},
  695. 		_measureColumns: function() {
  696. 			this.el.style.width = null;
  697. 			this._containerWidth = this.$el.innerWidth();
  698. 			this._columnWidth = this._getColumnWidth() || this._containerWidth;
  699. 			var cols = this._containerWidth / this._columnWidth;
  700. 			var excess = this._columnWidth - this._containerWidth % this._columnWidth;
  702. 			// if overshoot is less than a pixel, round up, otherwise floor it
  703. 			cols = Math.max(Math[ excess && excess <= 1 ? "round" : "floor" ](cols), 1);
  704. 			return cols || 0;
  705. 		},
  706. 		_resetCols: function(count) {
  707. 			count = typeof count === "undefined" ? 0 : count;
  708. 			var arr = [];
  709. 			while (count--) {
  710. 				arr.push(0);
  711. 			}
  712. 			this._appendCols = arr.concat();
  713. 			this._prependCols = arr.concat();
  714. 		},
  715. 		_getContainerSize: function() {
  716. 			return {
  717. 				height: Math.max.apply(Math, this._appendCols),
  718. 				width: this._containerWidth
  719. 			};
  720. 		},
  721. 		_getColumnWidth: function() {
  722. 			var el =  this.items[0] && this.items[0].el;
  723. 			var width = 0;
  724. 			if (el) {
  725. 				var $el = $(el);
  726. 				width = $el.innerWidth();
  727. 				if (this.options.isEqualSize) {
  728. 					this._equalItemSize = {
  729. 						width: width,
  730. 						height: $el.innerHeight()
  731. 					};
  732. 				}
  733. 			}
  734. 			return width;
  735. 		},
  736. 		_syncCols: function(isBottom) {
  737. 			if (!this.items.length) {
  738. 				return;
  739. 			}
  740. 			var items = this._getColItems(isBottom);
  741. 			var col = isBottom ? this._appendCols : this._prependCols;
  742. 			var len = col.length;
  743. 			var i;
  744. 			for (i = 0; i < len; i++) {
  745. 				col[i] = items[i].position.y + (isBottom ? items[i].size.height : 0);
  746. 			}
  747. 		},
  748. 		_getColIdx: function(item) {
  749. 			return parseInt(item.position.x / parseInt(this._columnWidth, 10), 10);
  750. 		},
  751. 		_getColItems: function(isBottom) {
  752. 			var len = this._appendCols.length;
  753. 			var colItems = new Array(len);
  754. 			var item;
  755. 			var idx;
  756. 			var count = 0;
  757. 			var i = isBottom ? this.items.length - 1 : 0;
  758. 			while (item = this.items[i]) {
  759. 				idx = this._getColIdx(item);
  760. 				if (!colItems[idx]) {
  761. 					colItems[idx] = item;
  762. 					if (++count === len) {
  763. 						return colItems;
  764. 					}
  765. 				}
  766. 				i += isBottom ? -1 : 1;
  767. 			}
  768. 			return colItems;
  769. 		},
  770. 		_itemize: function(elements, groupKey) {
  771. 			return $.map(elements, function(v) {
  772. 				return {
  773. 					el: v,
  774. 					position: {
  775. 						x: 0,
  776. 						y: 0
  777. 					},
  778. 					groupKey: typeof groupKey === "undefined" ? null : groupKey
  779. 				};
  780. 			});
  781. 		},
  782. 		_getItemLayoutPosition: function(isRelayout, item, isAppend) {
  783. 			if (!item || !item.el) {
  784. 				return;
  785. 			}
  786. 			var $el = $(item.el);
  787. 			if (isRelayout || !item.size) {
  788. 				item.size = this._getItemSize($el);
  789. 			}
  790. 			var cols = isAppend ? this._appendCols : this._prependCols;
  791. 			var y = Math[isAppend ? "min" : "max"].apply(Math, cols);
  792. 			var shortColIndex;
  793. 			if (isAppend) {
  794. 				shortColIndex = $.inArray(y, cols);
  795. 			} else {
  796. 				var i = cols.length;
  797. 				while (i-- >= 0) {
  798. 					if (cols[i] === y) {
  799. 						shortColIndex = i;
  800. 						break;
  801. 					}
  802. 				}
  803. 			}
  804. 			cols[shortColIndex] = y + (isAppend ? item.size.height : -item.size.height);
  806. 			return {
  807. 				x: this._columnWidth * shortColIndex,
  808. 				y: isAppend ? y : y - item.size.height
  809. 			};
  810. 		},
  811. 		_getItemSize: function($el) {
  812. 			return this._equalItemSize || {
  813. 				width: $el.innerWidth(),
  814. 				height: $el.innerHeight()
  815. 			};
  816. 		},
  817. 		/**
  818. 		 * Removes a card element on a grid layout.
  819. 		 * @ko 그리드 레이아웃의 카드 엘리먼트를 삭제한다.
  820. 		 * @method eg.InfiniteGrid#remove
  821. 		 * @param {HTMLElement} Card element to be removed <ko>삭제될 카드 엘리먼트</ko>
  822. 		 * @return {Object}  Removed card element <ko>삭제된 카드 엘리먼트 정보</ko>
  823. 		 */
  824. 		remove: function(element) {
  825. 			var item = null;
  826. 			var idx = -1;
  827. 			for (var i = 0, len = this.items.length; i < len; i++) {
  828. 				if (this.items[i].el === element) {
  829. 					idx = i;
  830. 					break;
  831. 				}
  832. 			}
  833. 			if (~idx) {
  834. 				// remove item information
  835. 				item = $.extend({}, this.items[idx]);
  836. 				this.items.splice(idx, 1);
  838. 				// remove item element
  839. 				item.el.parentNode.removeChild(item.el);
  840. 			}
  841. 			return item;
  842. 		},
  843. 		/**
  844. 		 * Destroys elements, properties, and events used on a grid layout.
  845. 		 * @ko 그리드 레이아웃에 사용한 엘리먼트와 속성, 이벤트를 해제한다
  846. 		 * @method eg.InfiniteGrid#destroy
  847. 		 */
  848. 		destroy: function() {
  849. 			this.off();
  850. 			this.$view.off("resize", this._onResize)
  851. 				.off("scroll", this._onScroll);
  852. 			this._reset();
  853. 		}
  854. 	});
  855. });
  856. /**
  857.  * A jQuery plugin available in the eg.InfiniteGrid module.
  858.  * @ko eg.InfiniteGrid 모듈의 jQuery 플러그인
  859.  * @method jQuery.infiniteGrid
  860.  * @example
  861. 		 <ul id="grid">
  862. 				<li class="item">
  863. 					<div>test1</div>
  864. 				</li>
  865. 				<li class="item">
  866. 					<div>test3</div>
  867. 				</li>
  868. 			</ul>
  869. 		<script>
  870. 	// create
  871. 	$("#grid").infiniteGrid();
  872. 	// method
  873. 	$("#grid").infiniteGrid("option","count","60"); //Set option
  874. 	$("#grid").infiniteGrid("instance"); // Return infiniteGrid instance
  875. 	$("#grid").infiniteGrid("getBottomElement"); // Get bottom element
  876. 	</script>
  877.  * @see eg.InfiniteGrid
  878.  */
  879. /**
  880.  * A jQuery custom event of the eg.InfiniteGrid module. This event is fired when a layout is successfully arranged.
  881.  *
  882.  * @ko eg.InfiniteGrid 모듈의 jQuery 커스텀 이벤트. 레이아웃 배치가 완료됐을 때 발생한다
  883.  * @name jQuery#infiniteGrid:layoutComplete
  884.  * @event
  885.  * @example
  886. 		 <ul id="grid">
  887. 				<li class="item">
  888. 					<div>test1</div>
  889. 				</li>
  890. 				<li class="item">
  891. 					<div>test3</div>
  892. 				</li>
  893. 			</ul>
  894. 		<script>
  895. 	// create
  896. 	$("#grid").infiniteGrid();
  897. 	// event
  898. 	$("#grid").on("infiniteGrid:layoutComplete",callback);
  899. 	$("#grid").off("infiniteGrid:layoutComplete",callback);
  900. 	$("#grid").trigger("infiniteGrid:layoutComplete",callback);
  901. 	</script>
  902.  * @see eg.InfiniteGrid#event:layoutComplete
  903.  */
  904. /**
  905.  * A jQuery custom event of the eg.InfiniteGrid module. This event is fired when a card element must be added at the bottom of a grid layout
  906.  *
  907.  * @ko eg.InfiniteGrid 모듈의 jQuery 커스텀 이벤트. 그리드 레이아웃 아래에 카드 엘리먼트가 추가돼야 할 때 발생한다.
  908.  * @name jQuery#infiniteGrid:append
  909.  * @event
  910.  * @example
  911. 		 <ul id="grid">
  912. 				<li class="item">
  913. 					<div>test1</div>
  914. 				</li>
  915. 				<li class="item">
  916. 					<div>test3</div>
  917. 				</li>
  918. 			</ul>
  919. 		<script>
  920. 	// create
  921. 	$("#grid").infiniteGrid();
  922. 	// event
  923. 	$("#grid").on("infiniteGrid:append",callback);
  924. 	$("#grid").off("infiniteGrid:append",callback);
  925. 	$("#grid").trigger("infiniteGrid:append",callback);
  926. 	</script>
  927.  * @see eg.InfiniteGrid#event:append
  928.  */
  929. /**
  930.  * A jQuery custom event of the eg.InfiniteGrid module. This event is fired when a card element must be added at the top of a grid layout
  931.  *
  932.  * @ko eg.InfiniteGrid 모듈의 jQuery 커스텀 이벤트. 그리드 레이아웃 위에 카드 엘리먼트가 추가돼야 할 때 발생한다
  933.  * @name jQuery#infiniteGrid:prepend
  934.  * @event
  935.  * @example
  936. 		 <ul id="grid">
  937. 				<li class="item">
  938. 					<div>test1</div>
  939. 				</li>
  940. 				<li class="item">
  941. 					<div>test3</div>
  942. 				</li>
  943. 			</ul>
  944. 		<script>
  945. 	// create
  946. 	$("#grid").infiniteGrid();
  947. 	// event
  948. 	$("#grid").on("infiniteGrid:prepend",callback);
  949. 	$("#grid").off("infiniteGrid:prepend",callback);
  950. 	$("#grid").trigger("infiniteGrid:prepend",callback);
  951. 	</script>
  952.  * @see eg.InfiniteGrid#event:prepend
  953.  */
comments powered by Disqus