“User:Bhsd/widget/countdown.js”的版本间差异

2020年12月5日 (六) 04:36的版本

//<nowiki>
// 用于[[Widget:Countdown]]，可以使用ES6语法
"use strict";
/*global mw, $, moment, wgUCS*/
(function() {
    const monthsHave31Days = [0, 2, 4, 6, 7, 9, 11], // 月份从0开始
        fromNow = function(ele) {
        const now = moment(),
            then = ele.data('target'),
            before = ele.children().first(),
            after = ele.children().last(),
            isBefore = then.isBefore( now ),
            early = isBefore ? then : now,
            textMonth = wgUCS('个月', '個月'),
            textHour = wgUCS('小时', '小時');
        let year = isBefore ? now.year() - then.year() : then.year() - now.year(),
            month = isBefore ? now.month() - then.month() : then.month() - now.month(),
            day = isBefore ? now.date() - then.date() : then.date() - now.date(),
            hour = isBefore ? now.hour() - then.hour() : then.hour() - now.hour(),
            minute = isBefore ? now.minute() - then.minute() : then.minute() - now.minute(),
            second = isBefore ? now.second() - then.second() : then.second() - now.second(),
            result = "";
        if (second < 0) {
            minute--;
            second += 60;
        }
        if (minute < 0) {
            hour--;
            minute += 60;
        }
        if (hour < 0) {
            day--;
            hour += 24;
        }
        if (day < 0) {
            month--;
            if (early.month() === 1) { day += early.year() % 4 === 0 ? 29 : 28; }
            else { day += monthsHave31Days.includes( early.month() ) ? 31 : 30; }
        }
        if (month < 0) {
            year--;
            month += 12;
        }
        if (year > 0) { result += `<span class="countdown-num">${year}</span>年`; }
        if (month > 0) { result += `<span class="countdown-num">${month}</span>${textMonth}`; }
        if (year === 0 && day > 0) { result += `<span class="countdown-num">${day}</span>天`; }
        if (year === 0 && month === 0) {
            if (hour > 0) { result += `<span class="countdown-num">${hour}</span>${textHour}`; }
            if (day === 0) {
                if (minute > 0 || hour > 0) { result += `<span class="countdown-num">${minute}</span>分`; }
                result += `<span class="countdown-num">${second}</span>秒`;
            }
        }
        ele.toggleCLass('isBefore', isBefore);
        if (isBefore) { before.find( '.countdown' ).html( result ); }
        else { after.find( '.countdown' ).html( result ); }
    },
        run = function() {
        mw.loader.using( 'ext.gadget.site-lib' ).then(() => {
            $( '.counting' ).each(function() { fromNow( $(this) ); });
        });
    },
        main = function($content) {
        if ($content.find( '.countdownNode' ).length === 0) { return; }
        mw.loader.using( 'moment' ).then(() => {
            $content.find( '.countdownNode' ).each(function() {
                const ele = $(this),
                    then = moment(this.title, 'YYYY-MM-DD HH:mm Z');
                if (then.isValid()) { ele.data('target', then).addClass( 'counting' ); }
                else { ele.toggleClass('error countdownNode').text( "（时间格式错误！）" ); }
            });
            if ($content.find( '.counting' ).length === 0) { return; }
            console.log('Hook: wikipage.content，开始处理新增的倒计时');
            run();
            // 新節點至少要執行過一次run()後才能移除countdownNode類
            $content.find( '.counting' ).removeClass( 'countdownNode' );
            mw.countdown = mw.countdown || setInterval(() => { run(); }, 1000 );
        });
    };
    console.log( 'setInterval: 等待jQuery加载完毕' );
    const timerStart = Date.now(),
        timer = setInterval(() => {
        if (!window.jQuery) { return; }
        clearInterval(timer);
        console.log(`End setInterval: jQuery加载完毕，用时 ${Date.now() - timerStart} ms`);
        mw.hook( 'wikipage.content' ).add($content => { main($content); });
    }, 500);
}) ();
//</nowiki>
// [[category:jQuery小部件]] {{DEFAULTSORT:Countdown}}