미디어위키:Gadget-gamelistjs.js
참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.
- 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
- 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
- 인터넷 익스플로러 / 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.
- 오페라: Ctrl-F5를 입력.
$(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;
}