|
|
| 1번째 줄: |
1번째 줄: |
| $( 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();
| |
| } );
| |