틀:빠른이동/app.js
< 틀:빠른이동
(function(){
// 프리로딩 가능한 링크 최고 갯수
var previewLimit = 5;
// 링크로 해당 문서 컨텐츠와 타이틀을 가져오는 프로미스 획득
var getParsedDocumentPromise = (function(){
var mwApi = new mw.Api();
return function(option){
var {href, fullPagename} = option;
var searchParams = new URL(href).searchParams;
var searchParamsObject = {};
searchParams.forEach(function(value, key){
// title 파라미터는 제외
if(key === "title") return;
searchParamsObject[key] = value;
});
// href에서 searchParams 추출
return new Promise(function(resolve, reject){
var apiParams = {
action: 'parse',
page: fullPagename,
formatversion: 2,
};
var requestOption = Object.assign(apiParams,searchParamsObject);
mwApi.get(requestOption).then(function(data){
var title = data.parse.title;
var text = data.parse.text;
//text내에 #title-meta 요소가 포함되어 있으면 해당 컨텐츠를 title로 변경(제목틀 호환)
var $titleMeta = $(text).find("#title-meta");
if( $titleMeta.length > 0 ){
title = $titleMeta.html();
}
resolve({ title:title, text:text });
}, function(e){
reject(e);
});
});
};
})();
var setLoading = (function(){
// 로딩창 표시 여부 플래그
var timers = [];
return function(isSetShow){
// 이미 로딩 완료된 작업의 경우 로딩창을 표시하지 않기 위해
// 로딩창 표시 작업시 예약 플래그를 설정하고 약간의 텀을 두기.
if(isSetShow){
setLoading.showFlag = true;
var timer = setTimeout(function(){
if(setLoading.showFlag){
$("#loading").fadeIn(200);
// 타이머에서 제거
timers.splice(timers.indexOf(timer), 1);
}
}, 50);
timers.push(timer);
} else {
// 로딩창 삭제 작업시 표시작업이 예약되어있으면 같이 삭제
setLoading.showFlag = false;
$("#loading").fadeOut(200);
timers.forEach(function(timer){
clearTimeout(timer);
});
timers = [];
}
};
})();
var toast = function(message){
// 화면 오른쪽 하단에서 메세지 표시, 2초 후 사라짐
var $toast = $("<div>").addClass("toast").css({
position:"fixed",
bottom: "20px",
right: "20px",
padding: "10px 20px",
background: "#000",
color: "#fff",
opacity: 0.8,
boxShadow: "0 0 10px rgba(0,0,0,0.3)",
zIndex: 9999,
display: "none"
});
$toast.text(message).appendTo("body").fadeIn(200);
setTimeout(function(){
$toast.fadeOut(200, function(){
$toast.remove();
});
}, 2000);
};
// 선행로딩된 페이지들
var documentPromiseMap = {};
var namespace = $("#firstHeading > span.mw-page-title-namespace").val() || "";
function getPagenameFromUrl(rawUrl){
var url = new URL(rawUrl, location.origin);
// url의 searchParams에 title 파라미터가 있을 경우 해당 파라미터로 docname 지정
var fullPagename = url.searchParams.get("title") || "";
if(!fullPagename){
var matchedUrl = decodeURI(url.pathname).match(/[^\/]+\/(.*)/);
if(matchedUrl){
// 문서명 파싱 성공시 문서명 지정
fullPagename = matchedUrl[1];
} else {
// 문서명 파싱 실패시 모든 링크명 지정
fullPagename = decodeURI(url.pathname)
}
}
// fullPagename에 ":"이 없을 경우 스트링 처음위치에 삽입
fullPagename = fullPagename.indexOf(":") === -1 ? `:${fullPagename}` : fullPagename;
// :를 기준으로 네임스페이스와 문서명 분리
var [namespace, pagename] = fullPagename.split(":");
return {
namespace,
pagename,
fullPagename,
}
}
function preloadDocument($doc){
// 해당 링크의 action, title, oldid 파라미터가 없는 링크만 가져오기
var targetLinkItems = $doc.find("a").not(".new")
// 대상이 되는 링크들만 필터링
.filter(function() {
var href = this.href;
if(href === "" || href.match(/^\#/) !== null) return false; // href가 없는 경우 제외
// 링크에서 가져온 url
var url = new URL(href);
var searchParams = url.searchParams;
// 현재 url
var nowUrl = new URL(location.href);
// 동일한 도메인이 아닌 경우 제외
if(url.origin !== nowUrl.origin) return false;
// 수정/리비전 확인 링크는 제외
if( ["action", "oldid"].some(function(key){
return searchParams.has(key);
})) return false;
return true;
})
// 필터링된 링크에 문서명 정보를 추가
.toArray().map(function(el) {
var { namespace, pagename, fullPagename } = getPagenameFromUrl(el.href);
return {
el, href: el.href, namespace, pagename, fullPagename
}
})
// 동일한 네임스페이스만 이동되게 필터링
.filter(({namespace:thisNamespace}) => thisNamespace === namespace )
// 필터된게 previewLimit 갯수 이상이면 동작 x, 프로미스맵에 클릭 시 로딩 필요함을 명시
if(targetLinkItems.length > previewLimit){
targetLinkItems.forEach(({href}) => {
documentPromiseMap[href] ||= null
});
} else {
// 필터링된게 프로미스맵에 없는 경우 사전 프리로딩 프로미스 추가
targetLinkItems.forEach(({href, pagename, namespace}) => {
documentPromiseMap[href] ||= getParsedDocumentPromise({href, fullPagename: `${namespace}:${pagename}`})
});
}
// 가져온 링크로 전체 작업
targetLinkItems.forEach(function(linkItem){
// 문서명 파싱 실패시 해당 링크 제외
if(!linkItem) return;
$(linkItem.el)
.click(function(e){
e.preventDefault();
replaceBodyContent(this.href);
});
})
};
async function replaceBodyContent(url, {urlChange = true} = {}){
var fullPagename = getPagenameFromUrl(url).fullPagename;
// 프리로드 불필요한 경우(네임스페이스가 다를때, 편집/리비전확인 링크일때) url 영구이동
if(documentPromiseMap[url] === undefined){
return location.href = url;
}
// 프리로드되지 않은 이동 가능한 링크면 로딩창 표시 후 해당 페이지 로딩
if(documentPromiseMap[url] === null){
documentPromiseMap[url] = getParsedDocumentPromise({href:url, fullPagename});
}
// 프로미스가 아직 안끝났으면 로딩창 표시
setLoading(true);
// 링크 프로미스에 문제가 있을 시 다시 내용 확인, 성공시 문서 프로미스에 저장, 오류시 에러메세지
documentPromiseMap[url].then(function({title, text}){
// 프리로드 프로미스가 정상적으로 불러왔을 경우
let $thisDoc = $(text)
// 사전로딩된 내용에서 프리로드 분석 재실행
preloadDocument( $thisDoc );
$("#bodyContent").fadeOut(100, function(){
// 문서내용 교체 후 페이드 인
$("#firstHeading").html(title);
// .vector-article-toolbar 내용물 링크 변경 필요
$(".mw-article-toolbar-container").find("a").each(function(){
try{
var $this = $(this);
var href = $this.attr("href");
var url = new URL(href);
url.searchParams.set("title", title);
$this.attr("href", url.href);
} catch (e){ }
})
// 현재 url 변경
if(urlChange){
history.pushState(null, null, url);
}
$("#bodyContent").html($thisDoc);
$("#bodyContent").fadeIn(100);
})
}).catch(function(e){
console.error(e)
// 에러 발생 시 실패한 페이지 다시 프로미스에 저장 시도
documentPromiseMap[url] = null;
// 에러메세지 표시
toast('페이지 로딩에 실패했습니다. 다시 시도해주세요.');
}).finally(function(){
// 로딩창 삭제
setLoading(false);
});
}
(function main(){
// #enable-preload div 없으면 동작 x
if(!$(".mw-parser-output .enable-preload").length) return;
// #bodyContent에 로딩창 추가
$("<div>").addClass("content-loading")
.css({
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: "100%",
background: "#fff",
opacity: 0.8,
zIndex: 9999,
display: "none"
})
.attr("id", "loading")
.append($("<div>").css({
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%,-50%)"
})
.append($("<span>로딩중</span>")))
.appendTo("#bodyContent");
// 현재 페이지 프리로드, 함수 내부에서 재귀적으로 프리로드 실행
preloadDocument($("#mw-content-text > div.mw-parser-output"));
// url 변경 시(일반적으로 뒤로가기) 프리로드된 문서가 있으면 해당 문서로 이동( 2023년 7월 9일 (일) 14:00 (KST)기준 iOS/파폭에서 동작하지 않음 )
function handleNavigate(e){
// 사용자가 url 변경시에만 동작
if(e.navigationType === "traverse"){
replaceBodyContent(e.destination.url, {urlChange:false});
}
}
navigation.removeEventListener("navigate", handleNavigate); // 이벤트 중복 등록 방지
navigation.addEventListener("navigate", handleNavigate); // 이벤트 등록
})();
})();