잔글 (소스 수정) |
잔글 (설명 추가) |
||
6번째 줄: | 6번째 줄: | ||
$('#content').css("margin-right", String($need_margin)+'px'); // 800px 이상일 때만 여백 나타나게 지정 | $('#content').css("margin-right", String($need_margin)+'px'); // 800px 이상일 때만 여백 나타나게 지정 | ||
$( function () { | $( function () { | ||
$( 'body' ).append('<div class="libre_recent"><div id="libre_recent-tabs"><div id="recenttext" class="selected">최근 문서</div><div id="recenttalk">최근 토론</div></div><div id = "recent-list-div"><div class="live-recent-content"><ul class="live-recent-list docupage" id="live-recent-list"><li class="recent-item-background"><span class="recent-item">1</span></li><li class="recent-item-background"><span class="recent-item">2</span></li><li class="recent-item-background"><span class="recent-item">3</span></li><li class="recent-item-background"><span class="recent-item">4</span></li><li class="recent-item-background"><span class="recent-item">5</span></li><li class="recent-item-background"><span class="recent-item">6</span></li><li class="recent-item-background"><span class="recent-item">7</span></li><li class="recent-item-background"><span class="recent-item">8</span></li><li class="recent-item-background"><span class="recent-item">9</span></li><li class="recent-item-background"><span class="recent-item">10</span></li></ul></div><div class="recent-more"><span class="mw-editsection-bracket">[</span><a href="//librewiki.net/wiki/특수:최근바뀜" title="최근바뀜문서">more</a><span class="mw-editsection-bracket">]</div></span></div>' ); //HTML 삽입. | $( 'body' ).append('<div class="libre_recent"><div id="libre_recent-tabs"><div id="recenttext" class="selected">최근 문서</div><div id="recenttalk">최근 토론</div></div><div id = "recent-list-div"><div class="live-recent-content"><ul class="live-recent-list docupage" id="live-recent-list"><li class="recent-item-background"><span class="recent-item">1</span></li><li class="recent-item-background"><span class="recent-item">2</span></li><li class="recent-item-background"><span class="recent-item">3</span></li><li class="recent-item-background"><span class="recent-item">4</span></li><li class="recent-item-background"><span class="recent-item">5</span></li><li class="recent-item-background"><span class="recent-item">6</span></li><li class="recent-item-background"><span class="recent-item">7</span></li><li class="recent-item-background"><span class="recent-item">8</span></li><li class="recent-item-background"><span class="recent-item">9</span></li><li class="recent-item-background"><span class="recent-item">10</span></li></ul></div><div class="recent-more"><span class="mw-editsection-bracket">[</span><a href="//librewiki.net/wiki/특수:최근바뀜" title="최근바뀜문서">more</a><span class="mw-editsection-bracket">]</div></span></div>' ); //HTML 삽입. <li>개수에 따라 아이템 갯수 조절 가능 | ||
//기초 css 지정 | //기초 css 지정 | ||
$('.libre_recent').css({"position":"fixed","top":"15%","right":"10px"}); | $('.libre_recent').css({"position":"fixed","top":"15%","right":"10px"}); | ||
22번째 줄: | 22번째 줄: | ||
//가로폭이 좁으면 content 내용 좁히기. | //가로폭이 좁으면 content 내용 좁히기. | ||
'use strict'; | 'use strict'; | ||
var articleNamespaces, talkNamespaces, isArticleTab, limit; | var articleNamespaces, talkNamespaces, isArticleTab, limit; //변수 지정 | ||
articleNamespaces = '0|4|10|12|14|1600|1602'; | articleNamespaces = '0|4|10|12|14|1600|1602'; // 문서 페이지 네임스페이스 번호 지정 가능 | ||
talkNamespaces = '1|5|7|9|11|13|15|829|1601|1603|2600'; | talkNamespaces = '1|5|7|9|11|13|15|829|1601|1603|2600'; //토론 페이지 네임스페이스 번호 지정가능 | ||
isArticleTab = true; | isArticleTab = true; //문서 탭이 초기일 때 | ||
limit = $( '#live-recent-list' )[ 0 ].childElementCount; | limit = $( '#live-recent-list' )[ 0 ].childElementCount; // id가 live-recent-list인 ul의 자식 원소인 li 갯수만큼 추출 | ||
function timeFormat( time ) { //시간 출력형태 결정 | function timeFormat( time ) { //시간 출력형태 결정 | ||
var aDayAgo, hour, minute, second; | var aDayAgo, hour, minute, second; | ||
aDayAgo = new Date(); | aDayAgo = new Date(); | ||
aDayAgo.setDate( aDayAgo.getDate() - 1 ); | aDayAgo.setDate( aDayAgo.getDate() - 1 ); //하루 전의 같은 시간 표시 | ||
if ( time < aDayAgo ) { | if ( time < aDayAgo ) { //만일 하루전보다 시간이 지날 경우 | ||
return ( time.getFullYear() ) + '/' + ( time.getMonth() + 1 ) + '/' + time.getDate(); | return ( time.getFullYear() ) + '/' + ( time.getMonth() + 1 ) + '/' + time.getDate(); | ||
} | } //시간 대신 날짜로 표시 | ||
hour = time.getHours(); | hour = time.getHours(); | ||
minute = time.getMinutes(); | minute = time.getMinutes(); | ||
second = time.getSeconds(); | second = time.getSeconds(); | ||
if ( hour < 10 ) { | if ( hour < 10 ) { //10보다 작으면 강제로 십의 자리에 0을 끼운다. | ||
hour = '0' + hour; | hour = '0' + hour; | ||
} | } | ||
53번째 줄: | 53번째 줄: | ||
var getParameter; | var getParameter; | ||
if ( !$( '#live-recent-list' ).length || $( '#live-recent-list' ).is( ':hidden' ) ) { | if ( !$( '#live-recent-list' ).length || $( '#live-recent-list' ).is( ':hidden' ) ) { | ||
return; | return; //길이가 정의 불가능이거나 내용이 숨겨져 있을 경우 내용을 출력 안 함. | ||
} | } | ||
getParameter = { | getParameter = { //쿼리 지정할 수 있습니다. | ||
action: 'query', | action: 'query', | ||
list: 'recentchanges', | list: 'recentchanges', | ||
rcprop: 'title|timestamp', | rcprop: 'title|timestamp', //긁어오는 정보 - 제목, 편집시간 | ||
rcshow: '!bot|!redirect', | rcshow: '!bot|!redirect', //봇 편집, 넘겨주기는 제외 | ||
rctype: 'edit|new', | rctype: 'edit|new', //편집, 새문서 | ||
rclimit: limit, | rclimit: limit, //긁어오는 문서 숫자 - limit으로 지정 | ||
format: 'json', | format: 'json', //json으로 api 긁어오기 | ||
rcnamespace: isArticleTab ? articleNamespaces : talkNamespaces, | rcnamespace: isArticleTab ? articleNamespaces : talkNamespaces, //보여줄 이름공간 지정 | ||
rctoponly: true | rctoponly: true | ||
}; | }; | ||
76번째 줄: | 76번째 줄: | ||
text = ''; | text = ''; | ||
if ( item.type === 'new' ) { | if ( item.type === 'new' ) { | ||
text += '[ | text += '[新]'; //새문서 지정 | ||
} | } | ||
text += item.title; | text += item.title; | ||
83번째 줄: | 83번째 줄: | ||
text += '...'; | text += '...'; | ||
} | } | ||
text = text.replace( '[New]', '<span class="new">' + mw.msg( 'liberty-feed-new' ) + ' </span>' ); | //text = text.replace( '[New]', '<span class="new">' + mw.msg( 'liberty-feed-new' ) + ' </span>' ); //미작동하므로 코드 비활성화 | ||
line += text; | line += text; | ||
line += '</a></li>'; | line += '</a></li>'; |
2020년 8월 14일 (금) 00:38 판
$("span#pageuseskin").text("Vector");
var $need_margin = Math.min(Math.max(0, 1510-parseInt(window.innerWidth)),190) //1510픽셀 이상일 때는 여백 0, 최대 190픽셀만 여백 지정
if(parseInt(window.innerWidth)>800){ //본문 내용이 800픽셀 이상일 때에만 최근바뀜 상자가 나타나게... 아래는 HTML 구성
//최근 바뀜 목록 보이기 - 출처 : https://github.com/librewiki/liberty-skin/blob/master/js/live-recent.js
$('#content').css("margin-right", String($need_margin)+'px'); // 800px 이상일 때만 여백 나타나게 지정
$( function () {
$( 'body' ).append('<div class="libre_recent"><div id="libre_recent-tabs"><div id="recenttext" class="selected">최근 문서</div><div id="recenttalk">최근 토론</div></div><div id = "recent-list-div"><div class="live-recent-content"><ul class="live-recent-list docupage" id="live-recent-list"><li class="recent-item-background"><span class="recent-item">1</span></li><li class="recent-item-background"><span class="recent-item">2</span></li><li class="recent-item-background"><span class="recent-item">3</span></li><li class="recent-item-background"><span class="recent-item">4</span></li><li class="recent-item-background"><span class="recent-item">5</span></li><li class="recent-item-background"><span class="recent-item">6</span></li><li class="recent-item-background"><span class="recent-item">7</span></li><li class="recent-item-background"><span class="recent-item">8</span></li><li class="recent-item-background"><span class="recent-item">9</span></li><li class="recent-item-background"><span class="recent-item">10</span></li></ul></div><div class="recent-more"><span class="mw-editsection-bracket">[</span><a href="//librewiki.net/wiki/특수:최근바뀜" title="최근바뀜문서">more</a><span class="mw-editsection-bracket">]</div></span></div>' ); //HTML 삽입. <li>개수에 따라 아이템 갯수 조절 가능
//기초 css 지정
$('.libre_recent').css({"position":"fixed","top":"15%","right":"10px"});
$('#libre_recent-tabs').css({"display":"flex", "padding":"3px", "border":"1px solid grey", "width":"180px", "background":"#ddf"});
$('#recenttext').css({"padding":"3px", "flex":"1", "background":"#417ff3", "color":"white", "font-weight":"bold"});
$('#recenttalk').css({"padding":"3px", "flex":"1", "background":"white", "font-weight":"bold"});
$('#recent-list-div').css({"width":"180px", "position":"fixed", "top":"auto", "right":"10px"});
$('.live-recent-list.docupage').css({"display":"block", "list-style-type": "none", "padding": "0", "margin": "0"});
$('.live-recent-content').css({"border":"1px solid grey", 'background':'#eee'});
$('.live-recent-list.docupage>li').css({"border-collapse":"collapse"});
$('.live-recent-list.docupage>li:nth-child(odd)').css({"background":"#ddd"});
$('.live-recent-list.docupage>li:nth-child(even)').css({"background":"#eee"});
$('.recent-more').css({"border":"1px solid grey", "width":"180px", "background":"#eee"});
//가로폭이 좁으면 content 내용 좁히기.
'use strict';
var articleNamespaces, talkNamespaces, isArticleTab, limit; //변수 지정
articleNamespaces = '0|4|10|12|14|1600|1602'; // 문서 페이지 네임스페이스 번호 지정 가능
talkNamespaces = '1|5|7|9|11|13|15|829|1601|1603|2600'; //토론 페이지 네임스페이스 번호 지정가능
isArticleTab = true; //문서 탭이 초기일 때
limit = $( '#live-recent-list' )[ 0 ].childElementCount; // id가 live-recent-list인 ul의 자식 원소인 li 갯수만큼 추출
function timeFormat( time ) { //시간 출력형태 결정
var aDayAgo, hour, minute, second;
aDayAgo = new Date();
aDayAgo.setDate( aDayAgo.getDate() - 1 ); //하루 전의 같은 시간 표시
if ( time < aDayAgo ) { //만일 하루전보다 시간이 지날 경우
return ( time.getFullYear() ) + '/' + ( time.getMonth() + 1 ) + '/' + time.getDate();
} //시간 대신 날짜로 표시
hour = time.getHours();
minute = time.getMinutes();
second = time.getSeconds();
if ( hour < 10 ) { //10보다 작으면 강제로 십의 자리에 0을 끼운다.
hour = '0' + hour;
}
if ( minute < 10 ) {
minute = '0' + minute;
}
if ( second < 10 ) {
second = '0' + second;
}
return hour + ':' + minute + ':' + second;
}
function refreshLiveRecent() {
var getParameter;
if ( !$( '#live-recent-list' ).length || $( '#live-recent-list' ).is( ':hidden' ) ) {
return; //길이가 정의 불가능이거나 내용이 숨겨져 있을 경우 내용을 출력 안 함.
}
getParameter = { //쿼리 지정할 수 있습니다.
action: 'query',
list: 'recentchanges',
rcprop: 'title|timestamp', //긁어오는 정보 - 제목, 편집시간
rcshow: '!bot|!redirect', //봇 편집, 넘겨주기는 제외
rctype: 'edit|new', //편집, 새문서
rclimit: limit, //긁어오는 문서 숫자 - limit으로 지정
format: 'json', //json으로 api 긁어오기
rcnamespace: isArticleTab ? articleNamespaces : talkNamespaces, //보여줄 이름공간 지정
rctoponly: true
};
var api = new mw.Api();
api.get( getParameter )
.then( function ( data ) {
var recentChanges, html, time, line, text;
recentChanges = data.query.recentchanges;
html = recentChanges.map( function ( item ) {
time = new Date( item.timestamp );
line = '<li><a class="recent-item" href="' + mw.util.getUrl( item.title ) + '" title="' + item.title + '">[' + timeFormat( time ) + '] ';
text = '';
if ( item.type === 'new' ) {
text += '[新]'; //새문서 지정
}
text += item.title;
if ( text.length > 13 ) {
text = text.substr( 0, 13 );
text += '...';
}
//text = text.replace( '[New]', '<span class="new">' + mw.msg( 'liberty-feed-new' ) + ' </span>' ); //미작동하므로 코드 비활성화
line += text;
line += '</a></li>';
return line;
} ).join( '\n' );
$( '#live-recent-list' ).html( html );
})
.catch( function () {} );
}
//isArticleTab 바꿔주기
//클릭 시 표시되는 내용 지정
var rtext=$('#recenttext');
var rtalk=$('#recenttalk');
rtext.click(function(){rtext.css({"background":"#417ff3", "color":"white"}); rtalk.css({"background":"white", "color":"black"}); isArticleTab = true; refreshLiveRecent(); }); //최근문서 배경색 파랗게, 최근문서 내용 보이고 최근토론 내용 숨김
rtalk.click(function(){rtext.css({"background":"white", "color":"black"}); rtalk.css({"background":"#417ff3", "color":"white"}); isArticleTab = false; refreshLiveRecent(); } ); //최근토론 배경색 파랗게, 최근문서 내용 숨기고 최근토론 내용 보임
setInterval( refreshLiveRecent, 5 * 60 * 1000 );
refreshLiveRecent();
} );
}