미디어위키:Liberty.js

$( function () {
	'use strict';
	var articleNamespaces, talkNamespaces, isArticleTab, limit;

	articleNamespaces = $( '.live-recent' ).attr( 'data-article-ns' );
	talkNamespaces = $( '.live-recent' ).attr( 'data-talk-ns' );
	isArticleTab = true;
	limit = $( '#live-recent-list' )[ 0 ].childElementCount;

	function timeFormat( timestamp ) {
		var now = new Date();
		var time = new Date( timestamp );
		var diffInSeconds = Math.floor((now - time) / 1000);
		var diffInMinutes = Math.floor(diffInSeconds / 60);
		var diffInHours = Math.floor(diffInMinutes / 60);
		var diffInDays = Math.floor(diffInHours / 24);
	
		if (diffInSeconds < 60) {
			return diffInSeconds + '초 전';
		} else if (diffInMinutes < 60) {
			return diffInMinutes + '분 전';
		} else if (diffInHours < 24) {
			return diffInHours + '시간 전';
		} else {
			return diffInDays + '일 전';
		}
	}
	
	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
		};

		mw.loader.using( 'mediawiki.api' ).then( function () {
			var api = new mw.Api();
			api.get( getParameter ).then( function ( data ) {
				var recentChanges, html, time, line, text;
				recentChanges = data.query.recentchanges;

				function cutTitle(title, maxLength) {
					let length = 0;
					let cutOffIndex = title.length;
				
					for (let i = 0; i < title.length; i++) {
						// 영어 알파벳과 숫자, 공백을 1로 카운트, 그 외를 2로 카운트
						length += title.charCodeAt(i) > 127 ? 2 : 1;
				
						if (length > maxLength) {
							cutOffIndex = i;
							break;
						}
					}
				
					// 필요한 경우 "..."을 추가
					return title.length > cutOffIndex ? title.slice(0, cutOffIndex) + "..." : title;
				}
				
				// 이후, 이 함수를 사용해 제목을 처리
				html = recentChanges.map(function (item) {
					time = new Date(item.timestamp);
					// cutTitle 함수를 사용해 제목 처리
					var title = cutTitle(item.title, 30);
					
					// 제목과 시간을 <div>로 감싸 각각 block 요소로 만들어 줄바꿈 효과를 줍니다.
					line = '<li>';
					line += '<a class="recent-item" href="' + mw.util.getUrl(item.title) + '" title="' + item.title + '">';
					line += '<div class="item-title">' + title + '</div>'; // 수정된 제목을 사용
					line += '<div class="item-time">' + timeFormat(time) + '</div>'; // 시간을 위한 <div>
					line += '</a>';
					line += '</li>';
					return line;
				}).join('\n');
							
				
				$( '#live-recent-list' ).html( html );
			} )
			.catch( function () {} );
		});
	}

	$( '#liberty-recent-tab1' ).click( function () {
		$( this ).addClass( 'active' );
		$( '#liberty-recent-tab2' ).removeClass( 'active' );
		isArticleTab = true;
		refreshLiveRecent();
	} );

	$( '#liberty-recent-tab2' ).click( function () {
		$( this ).addClass( 'active' );
		$( '#liberty-recent-tab1' ).removeClass( 'active' );
		isArticleTab = false;
		refreshLiveRecent();
	} );

	setInterval( refreshLiveRecent, 5 * 60 * 1000 );
	refreshLiveRecent();
} );