|
|
@@ -0,0 +1,206 @@
|
|
|
+/*
|
|
|
+ * 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 명칭은 container, listBoxOuter, listBox 가 필요하다.
|
|
|
+ * <section id="container">
|
|
|
+ * <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
|
|
|
+ }
|
|
|
+ , totalCount : ''
|
|
|
+ },
|
|
|
+ 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));
|
|
|
+ };
|
|
|
+
|
|
|
+ // 인피니트 스크롤 이벤트에서 호출될 함수(데이터 가져오기 등)
|
|
|
+ // 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';
|
|
|
+ this.pageStatus.loadAlign = historyData.data.totalCount;
|
|
|
+
|
|
|
+ gagaInfiniteScroll.draw(historyData.data.htm);
|
|
|
+ };
|
|
|
+
|
|
|
+ $(window).on('scroll', function() {
|
|
|
+ gagaInfiniteScroll.scrollCheck();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ draw : function(htm, scrollTop, containerHeight) {
|
|
|
+ if (htm == 'not') {
|
|
|
+ $('#loadingBar').remove();
|
|
|
+ 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);
|
|
|
+ }
|
|
|
+ };
|
|
|
+ };
|
|
|
+
|
|
|
+ $('#loadingBar').remove();
|
|
|
+
|
|
|
+ // 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
|
|
|
+ , totalCount : gagaInfiniteScroll.pageStatus.totalCount
|
|
|
+ }, "", "");
|
|
|
+ },
|
|
|
+ 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
|
|
|
+ , totalCount : gagaInfiniteScroll.pageStatus.totalCount
|
|
|
+ }, "", "");
|
|
|
+
|
|
|
+ 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);
|
|
|
+ }
|
|
|
+};
|
card007