사용자:Utolee90/recentchange.js 문서 원본 보기

$("span#pageuseskin").text("Vector");
var $need_margin = Math.max(0, 1510-parseInt(window.innerWidth)) //여백 최대값 조절
$('#content').css("margin", String($need_margin)+'px');
if(parseInt(window.innerWidth)>800){ //본문 내용이 800픽셀 이상일 때에만 최근바뀜 상자가 나타나게... 아래는 HTML 구성
//최근 바뀜 목록 보이기 - 출처 : https://github.com/librewiki/liberty-skin/blob/master/js/live-recent.js
$( 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="최근바뀜문서">더 보기</a><span class="mw-editsection-bracket">]</div></span></div>' ); //HTML 삽입.
//기초 css 지정
$('.libre_recent').css({"position":"fixed","top":"15%","right":"10px"});
$('#libre_recent-tabs').css({"display":"flex", "padding":"3px", "border":"1px solid grey", "width":"172px", "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"});
$('.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;

	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 ) {
			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,
			format: 'json',
			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 += '[New]';
					}
					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>' ); //liberty-feed-new 메시지가 작동 안한다. 
					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(); 
} );

}