미디어위키:Gadget-gamelistjs.js: 두 판 사이의 차이
둘러보기로 이동
검색으로 이동
>BANIP 잔글 (표시할 데이터 없음 가져오는 경우 추가) |
>BANIP (무한 스크롤 구현) |
||
1번째 줄: | 1번째 줄: | ||
$(function(){ | $(function(){ | ||
var $result = $("#menu-search-result"); // 검색결과 래퍼 | var $result = $("#menu-search-result"); // 검색결과 래퍼 | ||
28번째 줄: | 27번째 줄: | ||
$output.show(); // output만 표시 | $output.show(); // output만 표시 | ||
}); | }); | ||
}); | |||
// 무한스크롤 구현 | |||
$(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(); // 불러오기 버튼 클릭 | |||
} | |||
} | |||
}); | }); | ||
59번째 줄: | 71번째 줄: | ||
$output = option.$output; | $output = option.$output; | ||
var $load = $("<span class='mw-ui-button' role='button' style='margin-top:8px'>더 불러오기</span>"); // 더 불러오기 버튼 생성 | var $load = $("<span class='mw-ui-button btn-next' role='button' style='margin-top:8px'>더 불러오기</span>"); // 더 불러오기 버튼 생성 | ||
$load.on("click",function(e){ // 버튼 클릭 시 | $load.on("click",function(e){ // 버튼 클릭 시 | ||
$load.remove(); // 버튼 지우고 | $load.remove(); // 버튼 지우고 |
2023년 8월 13일 (일) 14:25 판
$(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.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;
}