MediaWiki:Winter.js

Материал из Guild Wars 2 wiki
Перейти к: навигация, поиск
/** Winter.js
 * Добавление елки в логотип и генерация падающих снежинок (работает только зимой) 
 * Автор Blood :)
 * Оригинал: https://jsfiddle.net/01zxae39
 */

(function() {
    var d = new Date(), christmasTree, snowflakesContainer, snowflakeAnimIterMax;
    
    //Если сейчас не зима, то ничего не делаем
    if (d.getMonth() > 1 && d.getMonth() < 11) return;

    //Только с 10 декабря по 15 января
    if (d.getMonth() == 11 && d.getDate() >= 10 ||
        d.getMonth() == 0  && d.getDate() <= 15) {
        //Зимний фон, логотип и дополнительные стили 
        document.getElementById("column-content").setAttribute("class", "winter-background");
        document.querySelector("#p-logo .mw-wiki-logo").style.backgroundImage = "url(/images/3/35/WikiLogo.png)";
        document.querySelector("#p-personal .pBody").setAttribute("class", "pBody pBody-additional");
        document.querySelector("#p-navigation h3").setAttribute("class", "navigation-additional");

        //Создаем елку для логотипа
        christmasTree = document.createElement("img");
        christmasTree.setAttribute("src", "/images/c/c9/Christmas_tree_%28animated%29.gif");
        christmasTree.setAttribute("class", "christmas-tree");
        document.getElementById("p-logo").appendChild(christmasTree);
    }
    
    //Создаем контейнер для снежинок
    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, //Первоначальная x-координата снежинки
            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);   //Узнаем текущую y-координату снежинки

            //Если снежинка уже достигла максимального порога итераций анимации, удаляем ее (для крупных страниц)
            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-fallen");
                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
        );
    }
})();