미디어위키:Vector.js: 두 판 사이의 차이
imported>Senouis (Hsl0님의 코드 반영) |
imported>Senouis 편집 요약 없음 |
||
24번째 줄: | 24번째 줄: | ||
**/ | **/ | ||
function vectorHidePersonalLink() { | function vectorHidePersonalLink() { | ||
function collapse() { | |||
$('#p-personal ul').removeClass('expanded'); | |||
$('#pt-mytalk:not(:has(.mw-echo-alert))').hide(); | |||
} | |||
function showTalk() { | |||
$('#pt-mytalk').show(); | |||
} | |||
var mobile = matchMedia('(max-width:580px)'); | |||
if(!mw.user.isAnon()) { | if(!mw.user.isAnon()) { | ||
mw.loader.using('oojs-ui.styles.icons-interactions'); | mw.loader.using('oojs-ui.styles.icons-interactions'); | ||
$('#pt-mytalk').after('<li id="pt-expand"><a class="oo-ui-icon-ellipsis" title="개인 링크 더보기" /></li>' | $('#pt-mytalk').after('<li id="pt-expand"><a class="oo-ui-icon-ellipsis" title="개인 링크 더보기" /></li>'); | ||
$('#p-personal ul').append('<li id="pt-collapse"><a class="oo-ui-icon-close" title="닫기" /></li>'); | $('#p-personal ul').append('<li id="pt-collapse"><a class="oo-ui-icon-close" title="닫기" /></li>'); | ||
if(mobile.matches) collapse(); | |||
$('#pt-expand > a').click(function() { | $('#pt-expand > a').click(function() { | ||
$('#p-personal ul').addClass('expanded'); | $('#p-personal ul').addClass('expanded'); | ||
showTalk(); | |||
}); | }); | ||
$('#pt-collapse > a, #content').click( | $('#pt-collapse > a, #content').click(collapse); | ||
mobile.addEventListener('change', function(media) { | |||
if(media.matches) collapse(); | |||
else showTalk(); | |||
}); | }); | ||
} | } | ||
} | } | ||
$(vectorHidePersonalLink); | $(vectorHidePersonalLink); |
2021년 7월 22일 (목) 06:31 판
/* 이 자바스크립트 설정은 벡터 스킨을 사용하는 사용자에게 적용됩니다 */
/**
* 사이드바 토글 버튼 추가
* [[미디어위키:vector.css]]의 `반응형 디자인 추가` 모듈의 의존성 모듈입니다.
* 모바일 환경에서 왼쪽 사이드바를 접었다 폈다 해주는 버튼을 추가합니다..
* 작성자: [[사용자:BANIP|BANIP]]
*/
function addSideBarOpenButton(){
var $btn = $("<button id='btn-panelopen'></button>");
var $wrap = $("#mw-navigation");
var $content = $("#content");
var $sidebar = $("#mw-panel");
$wrap.append($btn);
$btn.on("click",function(){ $sidebar.addClass("visible") });
$content.on("click",function(){ $sidebar.removeClass("visible") });
}
$( addSideBarOpenButton )
/**
* 숨긴 사용자 링크를 볼 수 있는 버튼 만들기
* 제작자: [[사용자:hsl0|hsl0]]
**/
function vectorHidePersonalLink() {
function collapse() {
$('#p-personal ul').removeClass('expanded');
$('#pt-mytalk:not(:has(.mw-echo-alert))').hide();
}
function showTalk() {
$('#pt-mytalk').show();
}
var mobile = matchMedia('(max-width:580px)');
if(!mw.user.isAnon()) {
mw.loader.using('oojs-ui.styles.icons-interactions');
$('#pt-mytalk').after('<li id="pt-expand"><a class="oo-ui-icon-ellipsis" title="개인 링크 더보기" /></li>');
$('#p-personal ul').append('<li id="pt-collapse"><a class="oo-ui-icon-close" title="닫기" /></li>');
if(mobile.matches) collapse();
$('#pt-expand > a').click(function() {
$('#p-personal ul').addClass('expanded');
showTalk();
});
$('#pt-collapse > a, #content').click(collapse);
mobile.addEventListener('change', function(media) {
if(media.matches) collapse();
else showTalk();
});
}
}
$(vectorHidePersonalLink);