미디어위키:Gadget-gamelistjs.js

$(function(){
    const $result = $("#menu-search-result")
    const PAGE_FETCH_LIMIT = $result.data("fetch-limit") * 1

    $("#menu-categories .item").toArray().map(el => ({
        category:$(el).find(".link").data('pagename'),
        length:$(el).find(".pagecount").text() * 1,
        el  
    })).map(({el,category}) => {
        $(el).find("a").on("click",function(e){ // 카테고리 링크 클릭 시 
            e.preventDefault() // 페이지 이동 비활성화
            var $output = $result.find(`.gamecards-wrapper[data-category='${category}']`); //해당 장르별 게임카드 래퍼 있는지 확인
            console.log(category, $result, $output, $output.length)
            if($output.length == 0){ // 없으면 
                $output = $(`<div class='gamecards-wrapper' data-category='${category}'><h2>${category}</h2></div>`) // 만들고
                $result.append($output) // 추가
                var $load = getLoadButton({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만 표시
        })
    })
});

//게임카드 가져오기
async function getGameCards({category,offset = 0,count}){
    var response = await (new mw.Api()).get({
		action: 'parse',
		page:"버:게임 목록/dpl",
		formatversion: 2,
        category, offset, count
	})
    return $(response.parse.text).find(".gamecards");
}

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