style24.front/src/main/webapp/ux/plugins/gaga/gaga.infinite.scrollLayer.js

/*
 * Inifinite Scroll Java Script written by gagamel.
 *
 * Copyright (c) 2016 gagamel (nogdoo.com)
 * Dual licensed under the MIT (MIT-LICENSE.txt)
 * and GPL (GPL-LICENSE.txt) licenses.
 *
 * $Date: 2016-04-28 $
 *
 * 사용 예)
 * 		// HTML 태그는 다음과 같은 구조로 되어 있어야 하며
 * 		// data-id는 layer_infinite,layer_infinite_item 가 필요하고  id 명칭은 infiniteContainer, listBoxOuter, listBox 가 필요하다.
 * 		<div id="layer_goods_qna" data-id="" > 레어팝업
 * 			<div class="modal-body" id="goodsDealQna" data-id="layer_infinite_item" >
 * 				<section id="infiniteContainer">
 * 					<div id="listBoxOuter">
 * 						<ul id="listBox">
 * 						</ul>
 *					</div>
 *				</section>
 *			</div>
 *		</div>
 *
 * 		// JQUERY History 파일과 인피니트 스크롤 관련 자바스크립트 파일을 import 되어 있어야 한다.
 * 		<script type="text/javascript" src="/ux/plugins/jquery.history.min.js"></script>
 * 		<script type="text/javascript" src="/ux/plugins/gaga.infinite.scrollLyer.js"></script>
 *
 * 		<script type="text/javascript">
 * 			// 인피니트 스크롤에 대한 History 정보를 가져오기 위해 함수를 호출한다.
 *			// History 정보가 없을 경우 fnGetInfiniteScrollDataList 함수가 호출된다.
 * 			$(function() { gagaInfiniteScroll.getHistory(); });
 *
 *			// 인피니트 스크롤 이벤트 발생 시 데이터 가져오기
 *			var fnGetInfiniteScrollDataList = function(pageNum) {
 *				// 콜백함수인 gagaInfiniteScroll.jsonToHtml 에서는 fnDrawInfiniteScrollData 함수를 호출한다.
 *				gagajf.ajaxSubmitForm(document.searchForm, "/goods/list", "json", gagaInfiniteScroll.jsonToHtml);
 *			}
 *
 *			// 인피니트 스크롤 이벤트 발생 시 가져온 데이터를 특정 태그에 append
 *			// fnDrawInfiniteScrollData(result, pageNum) 함수 구현
 *			// 		이 함수 내에서의 로직은
 *			//		1. 가져온 데이터로 HTML 태그를 만든다.
 *			// 		2. 만든 태그를 append 하는 gagaInfiniteScroll.draw() 함수를 호출
 *		</script>
 */

var gagaInfiniteScroll = {
	pageStatus : {
		  pageNum : []      // [0,1,2...] 로드된 페이지 (Array)
		, loadPage : 0      // 로드할 페이지
		, loadAlign : 'not' // 로드 상태(prev, next, not)
		, historyScroll : 0 //
		, nowPage : null    // 현재 페이지
		, pageUrl : {       // page url
		}
	},
	obj : {
		  $ajaxBoxOuter : $('#listBoxOuter')
		, $ajaxBox : $('#listBox')
		, $window : $(window)
		, $loadingBar : '<div style="width: 100%; padding-top: 50px; text-align: center;" id="loadingBar"><img src="/ux/plugins/gaga/loader.gif" style="width:25px; height:25px;"/></div>'
//		, $loadingBar : '<div style="width: 100%; padding-top: 50px; text-align: center;" id="loadingBar"><img src="/images/hsmob/common/loading_bar_01.gif" width="24px" height=" 22px"/></div>'
	},
	scrollCheck : function() {
		var obj = this.obj, stat = this.pageStatus;
		if ($('[data-id="layer_infinite"]').scrollTop() + $('[data-id="layer_infinite"]').height() >= $('[data-id="layer_infinite_item"]').height() ) { // 더보기
			if (stat.loadAlign == 'not') {
				var pageLen = this.pageStatus.pageNum.length - 1;
				var nextPageNum = this.pageStatus.pageNum[pageLen] + 1;
				this.pageStatus.pageNum.push(nextPageNum);
				this.pageStatus.loadPage = nextPageNum;
				stat.loadAlign = 'next';
				this.getDataList();
				
			};
		}
	},
	getDataList : function() {
		/*if (this.pageStatus.loadAlign == 'prev') {
			this.obj.$ajaxBoxOuter.prepend($(this.obj.$loadingBar));
		} else if (this.pageStatus.loadAlign == 'next') {
			this.obj.$ajaxBoxOuter.append($(this.obj.$loadingBar));
		};*/

		$(".wrap-loading").removeClass('display-none');

		// 인피니트 스크롤 이벤트에서 호출될 함수(데이터 가져오기 등)
		// fnGetInfiniteScrollDataList 함수는 개발단에서 구현해야 한다.
		fnGetInfiniteScrollDataList(this.pageStatus.loadPage);
	},
	getHistory : function() {
		var historyData = History.getState();

		if (historyData.data.pageNum === undefined || historyData.data.pageNum === '' || historyData.data.htm === undefined || historyData.data.htm == '') {
			this.pageStatus.loadPage = 0;
			this.pageStatus.pageNum[0] = 0;
			this.pageStatus.loadAlign = 'next';
			this.pageStatus.historyScroll = 0;

			this.getDataList();
		} else {
			this.pageStatus.loadPage = historyData.data.pageNum;
			this.pageStatus.pageNum[0] = historyData.data.pageNum;
			this.pageStatus.historyScroll = historyData.data.dataIndex;
			this.pageStatus.loadAlign = 'next';

			gagaInfiniteScroll.draw(historyData.data.htm);
		};

//		$(window).on('scroll', function() {
//			gagaInfiniteScroll.scrollCheck();
//		});
		
		$('[data-id="layer_infinite"]').on('scroll', function() {
			gagaInfiniteScroll.scrollCheck();
		});
	},
	draw : function(htm, scrollTop, containerHeight) {
		if (htm == 'not') {
			$(".wrap-loading").addClass('display-none');
			this.pageStatus.loadAlign = 'top';
		} else {
			var startH = $('#infiniteContainer').height();
			var $addHtm = $(htm);
			var $imgs = $addHtm.find('img');
			var loadCheck = 0;
			var len = $imgs.length;

			if (scrollTop && containerHeight) {
			} else {
			}

			$addHtm.find('img.lazy').lazyload({root: null,
						rootMargin: "100px",
						threshold: 0});

			$.each($imgs, function(index) {
				$imgs.eq(index).on('load',function() {
					loadCheck++;
					imgLpadComp();
				});
			});

			var imgLpadComp = function() {
				if (len - 1 == loadCheck) {
					gagaInfiniteScroll.pushHistory(
							  gagaInfiniteScroll.pageStatus.nowPage
							, $(window).scrollTop()
							, $('#infiniteContainer').height()
							, gagaInfiniteScroll.pageStatus.loadPage
							, 0
							, gagaInfiniteScroll.obj.$ajaxBox.html());
					if (scrollTop && containerHeight) {
						gagaInfiniteScroll.obj.$window.scrollTop.scrollTop(0).scrollTop(scrollTop);
					} else {
						gagaInfiniteScroll.obj.$window.scrollTop(gagaInfiniteScroll.obj.$window.scrollTop() + 1);
					}
				};
			};

			$(".wrap-loading").addClass('display-none');

			// Append HTML
			this.obj.$ajaxBox.append($addHtm);

			if (scrollTop && containerHeight) {
				gagaInfiniteScroll.obj.$window.scrollTop.scrollTop(0).scrollTop(scrollTop);
			} else {
				$(window).scrollTop($(window).scrollTop() + 1);
			}

			this.pageStatus.loadAlign = 'not';
		}
	},
	pushHistory : function(page, sScrollTop, sHeight, sPageNum, sDataIndex, sHtml) {
		History.replaceState({
			  state: page
			, scroll: sScrollTop
			, height: sHeight
			, pageUrl: gagaInfiniteScroll.pageStatus.pageUrl
			, name: gagaInfiniteScroll.pageStatus.nowPage
			, pageNum : sPageNum
			, dataIndex : sDataIndex
			, htm : sHtml
		}, "", "");
	},
	pushLinkHistory : function(pageNum, dataIndex, obj) { // 링크에서 사용
		var $pageNum = (pageNum || pageNum == 0) ? pageNum : '';
		var $dataIndex = (dataIndex || dataIndex == 0) ? dataIndex : '';
		var $html = (obj) ? $(obj).parents('#listBox').html() : '';

		History.replaceState({
			  state : gagaInfiniteScroll.pageStatus.nowPage
			, scroll : $(window).scrollTop()
			, height : $('#infiniteContainer').height()
			, pageUrl : gagaInfiniteScroll.pageStatus.pageUrl
			, name : gagaInfiniteScroll.pageStatus.nowPage
			, pageNum : $pageNum
			, dataIndex : $dataIndex
			, htm : $html
		}, "", "");

		return false;
	},
	jsonToHtml : function(result) {
		// Data 가져온 후 실행될 함수
		// fnDrawInfiniteScrollData 함수는 개발단에서 구현해야 한다.
		if (result.dataList == "not") // data가 더 이상 없으면
			fnDrawInfiniteScrollData('not', result.CURRENT_PAGE - 1);
		else
			fnDrawInfiniteScrollData(result, result.CURRENT_PAGE - 1);
	}
};