imported>Senouis |
imported>Hsl0 |
| (다른 사용자 한 명의 중간 판 4개는 보이지 않습니다) |
| 1번째 줄: |
1번째 줄: |
| /* 이 자바스크립트 설정은 벡터 스킨을 사용하는 사용자에게 적용됩니다 */ | | /* 이 자바스크립트 설정은 벡터 스킨을 사용하는 사용자에게 적용됩니다 */ |
|
| |
| /**
| |
| * 사이드바 토글 버튼 추가
| |
| * [[미디어위키: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);
| |
|
| |
| /**
| |
| * 탭이 넘치면 자동으로 숨김
| |
| * 제작자: [[사용자:hsl0|hsl0]]
| |
| **/
| |
| function vectorCollapseNavTabs() {
| |
| function collapse() {
| |
| var count = 1;
| |
| while($('#p-views li').length > count && (
| |
| $('#left-navigation li:first-child')[0].getBoundingClientRect().y !== $('#left-navigation li:last-child')[0].getBoundingClientRect().y ||
| |
| $('#right-navigation li:first-child')[0].getBoundingClientRect().y !== $('#p-cactions input')[0].getBoundingClientRect().y
| |
| )) {
| |
| $.collapsibleTabs.moveToCollapsed($($('#p-views li').get().reverse()[1]));
| |
| count++;
| |
| }
| |
| }
| |
| function expand() {
| |
| var count = 1;
| |
| var $target = $($('#p-cactions li')[0]);
| |
| while($('#p-cactions li').length > count && (
| |
| $('#left-navigation li:first-child')[0].getBoundingClientRect().y === $('#left-navigation li:last-child')[0].getBoundingClientRect().y &&
| |
| $('#right-navigation li:first-child')[0].getBoundingClientRect().y === $('#p-cactions input')[0].getBoundingClientRect().y
| |
| )) {
| |
| $.collapsibleTabs.moveToExpanded($target);
| |
| count++;
| |
| }
| |
| }
| |
|
| |
| var beforeWidth = innerWidth;
| |
|
| |
| setTimeout(collapse, 0);
| |
|
| |
| addEventListener('resize', function() {
| |
| if(innerWidth !== beforeWidth) {
| |
| expand();
| |
| setTimeout(collapse, 350);
| |
| }
| |
| beforeWidth = innerWidth;
| |
| });
| |
| }
| |
| $(vectorCollapseNavTabs);
| |
