Shimmie/Equibooru personal tag filter

// -- Required: Makaba.SyntaxSugar.js
// window.onload = function()
function TS() {
    // Добавляем ссылку для отображения\скрытия GUI

    var Navigation = $id('Navigationleft');
    var TS_NavBlock = $new('div', {'class': 'blockbody'});
    var TS_NavBlockLink  = $new('a', {
        'class': 'noselect',
        'style': 'font-size: 1.2em; font-weight: bold; font-family: Verdana; text-decoration: none;',
        'id': 'ts_togglelink"',
        'text': 'TAG FILTER'
    });
    var TS_NavBlockDescription = $new('small', {'text': '(allows to hide unwanted content)'});
    TS_NavBlock.appendChild(TS_NavBlockLink);
    TS_NavBlock.appendChild($new('br'));
    TS_NavBlock.appendChild(TS_NavBlockDescription);
    Navigation.appendChild(TS_NavBlock);

    // Создаём интерфейс управления фильтром
    // Контейнер
    var TS_GUI = $new('div', {'id': 'tagfilter', 'style': 'display:none'});
    // Кнопка - Отмена
    var TS_GUI_Toggle = $new('button', {'id': 'ts_togglebutton', 'class': 'noselect', 'text': 'Cancel'});
    TS_GUI.appendChild(TS_GUI_Toggle);
    // Кнопка - Сохранить настройки
    var TS_GUI_Apply = $new('button', {'id': 'ts_apply', 'class': 'noselect', 'text': 'Apply'});
    TS_GUI.appendChild(TS_GUI_Apply);
    // Режим NSFW
    var TS_GUI_NSFW = $new('input', {'type': 'checkbox', 'id': 'ts_nsfw'});
    TS_GUI_NSFW.checked = false;
    var TS_GUI_NSFW_Label = $new('label', {'for': 'ts_nsfw'});
    TS_GUI_NSFW_Label.appendChild(TS_GUI_NSFW);
    TS_GUI_NSFW_Label.appendChild(document.createTextNode("spoiler all tags (NSFW Mode, Alt+S)"));
    TS_GUI.appendChild(TS_GUI_NSFW_Label);
    // Описание
    var TS_GUI_Info = $new('div', {'id': 'ts_info', 'text': 'Spoilered tag list:'});
    var TS_GUI_Info_Additional = $new('small', {'text': 'separated with comma and space, example: "tag1, tag2, tag3"'});
    TS_GUI_Info.appendChild($new('br'));
    TS_GUI_Info.appendChild(TS_GUI_Info_Additional);
    TS_GUI.appendChild(TS_GUI_Info);
    // Сообщение о недоступности localstorage
    if(lsTest() === false){
        var TS_LocalStorageWarn = document.createElement("span");
        TS_LocalStorageWarn.id = "ts_warning";
        TS_LocalStorageWarn.textContent = "Warning! Seems your browser do not support HTML5 LocalStorage.";
        TS_GUI.className += " warnmessage";
        TS_GUI.appendChild(TS_LocalStorageWarn);
    }
    // Редактор
    var TS_GUI_Tags = $new('textarea',
    {
        'id': 'ts_tags',
        'autocomplete': 'off',
        'autocorrect': 'off',
        'autocapitalize': 'off',
        'spellcheck': 'false'
    });
    TS_GUI.appendChild(TS_GUI_Tags);
    // Добавляем GUI к странице
    document.body.appendChild(TS_GUI);

    // Добавляем svg-фильтр
    var NS = "http://www.w3.org/2000/svg",
        svg = document.createElementNS(NS, "svg"),
        filter = document.createElementNS(NS, "filter"),
        blur = document.createElementNS(NS, "feGaussianBlur");

    filter.setAttribute("id", "blur");
    blur.setAttribute("stdDeviation", "12");
    filter.appendChild(blur);
    svg.appendChild(filter);
    document.body.appendChild(svg);

    // Логика переключения видимости
    function ToggleTagFilter() {
        $disp(TS_GUI);
        TS_GUI_Tags.focus();
    };

    TS_NavBlockLink.onclick = function() { ToggleTagFilter(); };
    TS_GUI_Toggle.onclick = function() { TS_GUI.style.display = "none"; };

    // Сохранение настроек в LocalStorage
    function SaveTagFilter() {
        var Tags =  TS_GUI_Tags.value.split(/[ ,\n]+/);
        localStorage.setItem("TagFilter", JSON.stringify(Tags));
        var NSFWMode = TS_GUI_NSFW.checked ? "enabled" : "disabled";
        localStorage.setItem("NSFWMode", NSFWMode);
        LoadTagFilter();
    };
    // Загрузка настроек из LocalStorage
    function LoadTagFilter() {
        var Tags = localStorage.getItem("TagFilter");
        TS_GUI_Tags.value = JSON.parse(Tags);
        TS_GUI_Tags.value = TS_GUI_Tags.value.replace(/,/g , ", ");
        if (localStorage.getItem("NSFWMode") == "enabled") TS_GUI_NSFW.checked = true;
        ApplySpoilers();
    }

    // Применяем спойлеры
    function ApplySpoilers() {
        // Размываем изображение на странице просмотра
        var image = $id('main_image');
        if ((image) && (localStorage.getItem("NSFWMode") == "enabled")) {
            var tags_header =  document.querySelectorAll("body > header > h1")[0];
            tags_header.style.setProperty("filter","url(#blur)","");
            tags_header.classList.add("blurred");
            image.style.setProperty("filter","url(#blur)","");
            image.classList.add("blurred");
            // Снимаем размытие, если видео запущено
            image.onplaying = function() { image.style.setProperty("filter","none",""); }
        }
        // Приводим к нижнему регистру, чтобы получить регистронезависимое скрытие
        var HiddenTags = JSON.parse(
            localStorage.getItem("TagFilter")).map(function (val) {
                return val.toLowerCase();
            }
        );
        var Thumbs = document.getElementsByClassName("shm-thumb");
        // Проходим по массиву превьюшек
        var index;
        for (index = Thumbs.length - 1; index >= 0; --index) {
                var DataTags = Thumbs[index].dataset.tags.split(" ").map(function (val) {
                return val.toLowerCase();
            });
            var SpoilerTags = _.intersection(DataTags, HiddenTags);
            // Если включен режим NSFW, спойлерим все картинки
            if (localStorage.getItem("NSFWMode") == "enabled") {
                SpoilerTags = new Array("NSFW Mode");
            }
            // Если массив с разницей между тэгами и заспойлеренными тэгами не пуст
            // добавляем классы и инфу о скрытых тэгах
            if (SpoilerTags[0] != null) {
                var TS_Tags = document.createElement("span");
                TS_Tags.setAttribute("class", "ts_spoiler_desc");
                TS_Tags.textContent = SpoilerTags;
                TS_Tags.textContent = TS_Tags.textContent.replace(/,/g , ", ");
                var TS_Spoiler = document.createElement("span");
                TS_Spoiler.setAttribute("class", "ts_spoiler");
                TS_Spoiler.textContent = "Spoiler";
                Thumbs[index].appendChild(TS_Tags);
                Thumbs[index].appendChild(TS_Spoiler);
                Thumbs[index].className += " spoilered";
            }
        }
    };

    // Убираем старые спойлеры при применении конфига
    function RemoveOldSpoilers() {
        // Удаляем элементы
        var ForDeletion = document.querySelectorAll('.ts_spoiler,.ts_spoiler_desc');
        var index;
        for (index = ForDeletion.length - 1; index >= 0; --index) {
                ForDeletion[index].parentNode.removeChild(ForDeletion[index]);
        };
        // Убираем класс
        var SpoileredImages = document.getElementsByClassName("spoilered");
        var index;
        for (index = SpoileredImages.length - 1; index >= 0; --index) {
                SpoileredImages[index].classList.remove("spoilered");
        };
        var BlurredElements = document.getElementsByClassName("blurred");
        var index;
        for (index = BlurredElements.length - 1; index >= 0; --index) {
                BlurredElements[index].style.setProperty("filter","none","");
            BlurredElements[index].classList.remove("blurred");
        };
    };

    // Обработчик формы
    TS_GUI_Apply.onclick = function() {
        RemoveOldSpoilers();
        SaveTagFilter();
        TS_GUI.style.display = "none";
        $alert('Tag filter activated');
        //location.reload();
    };

    // Применяем спойлеры после загрузки страницы
    LoadTagFilter();
    window.TagFilterActive = true;
}

document.addEventListener("DOMContentLoaded", TS);

$(document).keyup(function(evt) { // Хоткей для переключения NSFW, ёбаный стыд что по эмуляции клика, но делалось на коленке за минуту
    if (evt.keyCode==83 && (evt.altKey)){ // Alt+S
        document.getElementById("ts_nsfw").click();
        document.getElementById("ts_apply").click();
        $alert('NSFW mode changed');
    }
});

function lsTest(){
    var test = 'test';
    try {
        localStorage.setItem(test, test);
        localStorage.removeItem(test);
        return true;
    } catch(e) {
        return false;
    }
}