style24.front/src/main/webapp/ux/plugins/gaga/gaga.infinite.scrollSession.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 태그는 다음과 같은 구조로 되어 있어야 하며
 * 		// id 명칭은 infiniteContainer, listBoxOuter, listBox 가 필요하다.
 * 		<section id="infiniteContainer">
 * 			<div id="listBoxOuter">
 * 				<ul id="listBox">
 * 				</ul>
 *			</div>
 *		</section>
 *
 * 		// JQUERY History 파일과 인피니트 스크롤 관련 자바스크립트 파일을 import 되어 있어야 한다.
 * 		<script type="text/javascript" src="/ux/plugins/jquery.history.min.js"></script>
 * 		<script type="text/javascript" src="/ux/plugins/gaga.infinite.scroll.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
		}
		, sortingType : ''
		, sortingTypeNm : ''
		, filterHtml : ''
		, filterStatHtml : ''
		, totalCount : ''
		, backScroll : ''
	},
	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 (obj.$window.scrollTop() >= obj.$ajaxBox.offset().top + obj.$ajaxBox.height() - obj.$window.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 = sessionStorage.getItem(document.location.href);
		if(historyData!=null){
			historyData = JSON.parse(historyData);
		}else{
			historyData = {};
		}

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

			this.getDataList();
		} else {
			if( history.scrollRestoration ) window.history.scrollRestoration = 'manual';
			this.pageStatus.loadPage = historyData.pageNum;
			this.pageStatus.pageNum[0] = historyData.pageNum;
			this.pageStatus.historyScroll = historyData.dataIndex;
			this.pageStatus.loadAlign = 'next';
			this.pageStatus.sortingType = historyData.sortingType;
			this.pageStatus.sortingTypeNm = historyData.sortingTypeNm;
			this.pageStatus.filterHtml = historyData.filterHtml;
			this.pageStatus.filterStatHtml = historyData.filterStatHtml;
			this.pageStatus.totalCount = historyData.totalCount;
			this.pageStatus.backScroll = historyData.backScroll;

			gagaInfiniteScroll.draw(historyData.htm);
		};

		$(window).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 {
			}

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

			var imgLpadComp = function() {
				gagaInfiniteScroll.pushHistory(
						  gagaInfiniteScroll.pageStatus.nowPage
						, $(window).scrollTop()
						, $('#infiniteContainer').height()
						, gagaInfiniteScroll.pageStatus.loadPage
						, 0
						, gagaInfiniteScroll.obj.$ajaxBox.html()
						, gagaInfiniteScroll.pageStatus.backScroll
					);
				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, sBackScroll) {
		var historyData = {
				state: page
				, scroll: sScrollTop
				, height: sHeight
				, pageUrl: gagaInfiniteScroll.pageStatus.pageUrl
				, name: gagaInfiniteScroll.pageStatus.nowPage
				, pageNum : sPageNum
				, dataIndex : sDataIndex
				, htm : sHtml
				, sortingType : gagaInfiniteScroll.pageStatus.sortingType
				, sortingTypeNm : gagaInfiniteScroll.pageStatus.sortingTypeNm
				, filterHtml : gagaInfiniteScroll.pageStatus.filterHtml
				, filterStatHtml : gagaInfiniteScroll.pageStatus.filterStatHtml
				, totalCount : gagaInfiniteScroll.pageStatus.totalCount
				, backScroll : sBackScroll
		};
		historyData = JSON.stringify(historyData);
		sessionStorage.setItem(document.location.href, historyData);

	},
	pushLinkHistory : function(pageNum, dataIndex, obj) { // 링크에서 사용
		var $pageNum = (pageNum || pageNum == 0) ? pageNum : '';
		var $dataIndex = (dataIndex || dataIndex == 0) ? dataIndex : '';
		var $html = (obj) ? $(obj).parents('#listBox').html() : '';

		var historyData = {
					state : gagaInfiniteScroll.pageStatus.nowPage
					, scroll : $(window).scrollTop()
					, height : $('#infiniteContainer').height()
					, pageUrl : gagaInfiniteScroll.pageStatus.pageUrl
					, name : gagaInfiniteScroll.pageStatus.nowPage
					, pageNum : $pageNum
					, dataIndex : $dataIndex
					, htm : $html
					, sortingType : gagaInfiniteScroll.pageStatus.sortingType
					, sortingTypeNm : gagaInfiniteScroll.pageStatus.sortingTypeNm
					, filterHtml : gagaInfiniteScroll.pageStatus.filterHtml
					, filterStatHtml : gagaInfiniteScroll.pageStatus.filterStatHtml
					, totalCount : gagaInfiniteScroll.pageStatus.totalCount
					, backScroll : gagaInfiniteScroll.pageStatus.backScroll
		};
		historyData = JSON.stringify(historyData);
		sessionStorage.setItem(document.location.href, historyData);

		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);
	}
};