미디어위키:Gadget-gamelistjs.js

$(function(){
    var $result = $("#menu-search-result"); // 검색결과 래퍼
    var $categories = $("#menu-categories"); // 카테고리 래퍼
    if($result.length == 0) return; // 없으면 종료
    var PAGE_FETCH_LIMIT = $result.data("fetch-limit") * 1 || 30; // 한번에 불러올 게임카드 수

    $categories.find(".item").toArray().map(function(el){ // 카테고리 데이터 dom에서 수집
        return {
            category:$(el).find(".link").data('pagename'),
            length:$(el).find(".pagecount").text() * 1,
            el:el
        };
    }).map(function(option){
        var el = option.el;
        var category = option.category;
        $(el).find("a").on("click",function(e){ // 카테고리 링크 클릭 시 
            e.preventDefault(); // 페이지 이동 비활성화
            var $output = $result.find(".gamecards-wrapper[data-category='" + category + "']"); //해당 장르별 게임카드 래퍼 있는지 확인
            if($output.length == 0){ // 없으면 
                $output = $("<div class='gamecards-wrapper' data-category='" + category + "'><h2>" + category + "</h2></div>"); // 만들고
                $result.append($output); // 추가
                var $load = getLoadButton({category: category, offset:0,count:PAGE_FETCH_LIMIT, $output:$output}); // 로드버튼도 생성해서
                $result.append($load); // 추가
                $load.click(); // 추가한 로드버튼 바로 클릭
            } 
            $result.find(".gamecards-wrapper").not($output).hide(); // gamecards-wrapper 감추기
            $output.show(); // output만 표시
        });
    });

    // 무한스크롤 구현
    $([window.document,window.document.body]).on("scroll",function(){
        // #content 제일 아래 기준 100px 위쪽으로 스크롤 되었을 시
        if($(window).scrollTop() + $(window).height() > $("#content").offset().top + $("#content").height() - 100){
            var $visible = $result.find(".gamecards-wrapper:visible"); // 보이는 게임카드 래퍼 선택
            if($visible.length == 0) return; // 없으면 종료

            if($visible.find(".btn-next").length > 0){ // 래퍼 아래에 더 불러오기 버튼이 있으면
                $visible.find(".btn-next").click(); // 불러오기 버튼 클릭
            }
        }   
    });

    $categories.find(".link[data-pagename='리버티게임']").find("a").click(); // 기본 모든게임 확인
});

//게임카드 가져오기
function getGameCards(option){
    var category = option.category,
        offset = option.offset || 0,
        count = option.count;

    return new Promise(function(resolve){
        (new mw.Api()).get({
            action: 'parse',
            page:"버:게임 목록/dpl",
            formatversion: 2,
            category: category, offset: offset, count: count
        }).then(function(response){
            var result = $(response.parse.text).find(".gamecards, .gamecard-404");
            resolve(result);
        });
    });
}

// 더 불러오기 버튼 생성
function getLoadButton(option){
    var category = option.category, 
        offset = option.offset,
        count = option.count, 
        $output = option.$output;

    var $load = $("<span class='mw-ui-button btn-next' role='button' style='margin-top:8px'>더 불러오기</span>"); // 더 불러오기 버튼 생성
    
    $load.on("click",function(e){ // 버튼 클릭 시
        $load.remove(); // 버튼 지우고
        e.preventDefault(); // 페이지 위로 올라가는 현상 제거
        $("#preloader-wrapper").slideDown(0.2); // 로딩바 표시
        getGameCards({category: category, offset: offset, count: count}).then(function($gameCards){// 게임카드 불러오고
            $output.append($gameCards); // 아웃풋에 추가
            $("#preloader-wrapper").hide();
            if($gameCards.find(".gamecard").length === count){ // 불러올게 더있으면
                $output.append(getLoadButton({
                    category: category, 
                    offset : offset + count, 
                    count: count, 
                    $output:$output
                })); // 로딩버튼 생성
            }
        });
    });
    return $load;
}