MediaWiki:BloodTest.js — различия между версиями

Версия 02:48, 18 декабря 2017

/* Для тестирования разной фигни. 
* Загружается через MediaWiki:Common.js
*/

//Простенький таймер
var headerList = document.querySelector("#p-personal .pBody ul"),
    timerElem = document.createElement("li");

timerElem.setAttribute("id", "pt-timer");
headerList.insertBefore(timerElem, headerList.firstElementChild);

(function timer() {
    var d = new Date(), offset = (-1 * d.getTimezoneOffset() / 60), offsetStr;

    if (offset > 0) offsetStr = "+" + offset; 
    else if (offset < 0) offsetStr = offset;

    timerElem.innerHTML = pad(d.getUTCHours()) + ":" + pad(d.getUTCMinutes()) + ":" + pad(d.getUTCSeconds()) + " UTC" +
        " (" + pad(d.getHours()) + ":" + pad(d.getMinutes()) + ":" + pad(d.getSeconds()) + " UTC" + offsetStr + ")";
    setTimeout(timer, 1000);
})();

function pad(d) {  
    return (d < 10 ? "0" : "") + d; 
}


//Генерация падающих снежинок (работает только зимой)
(function() {
    var month = new Date().getMonth(), snowflakesContainer, snowflakeAnimIterMax;
    
    if (month > 1 && month < 11) return;
    
    snowflakesContainer = document.createElement("div");
    snowflakesContainer.setAttribute("class", "snowflakes-container");
    snowflakesContainer.ondragstart = function() {
        return false;
    };
    document.body.appendChild(snowflakesContainer);
    snowflakeAnimIterMax = 40;

    createSnowflake();
    setInterval(createSnowflake, 2500);

    function createSnowflake() {
        var snowflake = document.createElement("div"),
            windowWidth = document.documentElement.clientWidth,
            snowflakeLeftOrigin = Math.random() * windowWidth ^ 0,
            snowflakeMoveDirection = Math.random() * 2 ^ 0,
            snowflakeDownStep = 80,
            snowflakeSideStep = 30,
            snowflakeAnimIterCount = 0,
            snowflakeHeight;

        snowflake.innerHTML = "&#10052;";
        snowflake.setAttribute("class", "snowflake snowflake-falling");
        snowflakesContainer.appendChild(snowflake);

        snowflake.style.top = -snowflake.offsetHeight + "px";
        snowflakeLeftOrigin = (snowflakeLeftOrigin + snowflake.offsetWidth +
                snowflakeSideStep + 3 > windowWidth) ? windowWidth - snowflake.offsetWidth -
            snowflakeSideStep - 3 : snowflakeLeftOrigin;
        snowflake.style.left = snowflakeLeftOrigin + "px";
        snowflakeHeight = snowflake.offsetHeight;

        (function animateSnowflake() {
            var snowflakeTop = parseInt(getComputedStyle(snowflake).top);

            if (snowflakeAnimIterCount > snowflakeAnimIterMax) {
                snowflakesContainer.removeChild(snowflake);
                return;
            }

            if (snowflakeTop + snowflakeHeight + snowflakeDownStep + 2 < getPageScrollHeight()) {
                snowflake.style.top = snowflakeTop + snowflakeDownStep + "px";

                if (snowflakeMoveDirection) {
                    snowflake.style.left = snowflakeLeftOrigin + snowflakeSideStep + "px";
                    snowflake.style.transform = "rotate(180deg)";
                } else {
                    snowflake.style.left = snowflakeLeftOrigin - snowflakeSideStep + "px";
                    snowflake.style.transform = "rotate(-180deg)";
                }

                snowflakeMoveDirection = !snowflakeMoveDirection;
                ++snowflakeAnimIterCount;

                setTimeout(animateSnowflake, 1500);
            } else {
                snowflake.setAttribute("class", "snowflake snowflake-fell");
                snowflake.style.top = getPageScrollHeight() - snowflakeHeight - 2 + "px";
                snowflake.style.left = snowflakeLeftOrigin + "px";
                snowflake.style.transform = "rotate(0deg)";

                setTimeout(function() {
                    snowflakesContainer.removeChild(snowflake);
                }, 20000);
            }
        })();
    }

    function getPageScrollHeight() {
        return Math.max(
            document.body.scrollHeight, document.documentElement.scrollHeight,
            document.body.offsetHeight, document.documentElement.offsetHeight,
            document.body.clientHeight, document.documentElement.clientHeight
        );
    }
})();