// ==UserScript==
// @name            Mail.ru Filter News
// @name:ru         Mail.ru Фильтр новостей
// @namespace       https://github.com/AlekPet/
// @version         0.1.1
// @description     Highlight or hide news
// @description:ru  Подсветка или скрытие новостей
// @author          AlekPet 2021
// @license         MIT; https://raw.githubusercontent.com/AlekPet/Mail.ru-Filter-News/master/LICENSE
// @icon         data:image/svg+xml,%3Csvg viewBox%3D%220 0 95 32%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Aserif%3D%22http%3A%2F%2Fwww.serif.com%2F%22 fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 stroke-linejoin%3D%22round%22 stroke-miterlimit%3D%221.414%22%3E%3Cpath serif%3Aid%3D%2232_%40mail_w%22 fill%3D%22none%22 d%3D%22M0 0h95v32H0z%22%2F%3E%3CclipPath id%3D%22a%22%3E%3Cpath d%3D%22M0 0h95v32H0z%22%2F%3E%3C%2FclipPath%3E%3Cg clip-path%3D%22url(%23a)%22%3E%3Cpath fill%3D%22%23005ff9%22 d%3D%22M91.063 2.96h3.033v20.593h-3.033zM87.785 23.553h-3.033V8.96h3.033v14.593zM86.269 2.449a2.048 2.048 0 1 1-.001 4.095 2.048 2.048 0 0 1 .001-4.095zM81.475 23.553h-2.982v-1.596c-1.068 1.21-2.95 1.97-4.72 1.97a7.674 7.674 0 0 1-7.671-7.671 7.675 7.675 0 0 1 7.671-7.671c1.77 0 3.553.667 4.72 1.846V8.96h2.982v14.593zM73.87 11.651c2.61 0 4.664 1.868 4.664 4.605 0 2.738-2.054 4.622-4.664 4.622-2.611 0-4.595-2.011-4.595-4.622 0-2.61 1.984-4.605 4.595-4.605zM43.841 23.553H40.86V8.96h2.981v1.019c.662-.622 1.903-1.391 3.625-1.394 2.115 0 3.692.89 4.773 2.322 1.182-1.417 3.13-2.322 5.116-2.322 3.725 0 6.264 2.516 6.264 6.436v8.532h-2.981v-8.532a3.458 3.458 0 0 0-3.454-3.454 3.457 3.457 0 0 0-3.454 3.454v8.532h-2.981v-8.532a3.458 3.458 0 0 0-3.454-3.454 3.457 3.457 0 0 0-3.454 3.454v8.532z%22%2F%3E%3Cpath d%3D%22M20.813 16A4.818 4.818 0 0 1 16 20.813 4.818 4.818 0 0 1 11.187 16 4.818 4.818 0 0 1 16 11.187 4.818 4.818 0 0 1 20.813 16M16 0C7.178 0 0 7.178 0 16s7.178 16 16 16c3.232 0 6.349-.962 9.013-2.783l.046-.032-2.156-2.506-.036.024A12.672 12.672 0 0 1 16 28.72C8.986 28.72 3.28 23.014 3.28 16S8.986 3.28 16 3.28 28.72 8.986 28.72 16c0 .909-.101 1.829-.3 2.734-.402 1.651-1.558 2.157-2.426 2.09-.873-.071-1.894-.693-1.901-2.215V16c0-4.463-3.63-8.093-8.093-8.093S7.907 11.537 7.907 16s3.63 8.093 8.093 8.093a8.03 8.03 0 0 0 5.734-2.389 5.198 5.198 0 0 0 3.997 2.389 5.399 5.399 0 0 0 3.678-1.078c.959-.728 1.675-1.781 2.071-3.046.063-.204.179-.672.18-.675l.003-.017C31.896 18.262 32 17.25 32 16c0-8.822-7.178-16-16-16%22 fill%3D%22%23ff9e00%22 fill-rule%3D%22nonzero%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E
// @match        http*://mail.ru
// @run-at document-end
// @grant GM_addStyle
// @grant GM_setValue
// @grant GM_getValue
// @downloadURL none
// ==/UserScript==

(function() {
    'use strict';
    GM_addStyle("\
.filter_item_box{opacity: 0;height: 0;transition: transform 5s, height 3s, opacity 1s;-webkit-transform:transform 5s, height 3s, opacity 1s;overflow: hidden;}\
.filter_item_box_show{opacity: 1;height: auto;}\
.filter_item_box > div {transform: translateX(100vw);-webkit-transform: translateX(100vw);}\
.filter_item_box.filter_item_box_show > div {transform: translateX(0);-webkit-transform: translateX(0);}\
\
.filter_class{display: inline-block;padding: 2px;user-select:none;cursor:pointer;margin: 8px 6px 3px 6px;font-family: monospace;transition: 0.5s all;box-shadow:0 2px 2px silver;border: 3px solid;text-align: center;}\
.filter_class:hover{transform: scale(1.1);}\
\
.filter_item{font-size: 10px;border-radius: 4px;line-height:1;}\
.filter_item:hover{background-color: #40ffa087;}\
\
.add_filter_item{border-width:1px;border-radius: 100%;font-size: 14px;width: 15px;height: 15px;line-height: 0.5;}\
.add_filter_item:hover{background-color: #005ff9a1;color:#fff;}\
\
.filter_item_hide_legend:after {content: 'H';color: red;position: absolute;display: inline-block;margin-top: -11px;padding: 2px;border: 1px solid;background: #ffffffc7;}\
.filter_item_hide{display:none;}\
\
.tabs__filter_button{position: relative;display: -webkit-inline-flex;display: inline-flex;height: 27px;background: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjMDAwMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTAwIDEwMCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03Ni40MjgsMjguOTg4Qzc1LjQ2NSwzMy4wMjQsNjMuODU1LDQ1LjE4Niw1Ni41LDUyLjU3OVY3NC4zNmwtMTIsNi45MjhWNTIuNTc5ICBjLTcuMzU2LTcuMzk0LTE4Ljk2NS0xOS41NTUtMTkuOTI4LTIzLjU5MUMyNC41MjksMjguODI1LDI0LjUsMjguNjYyLDI0LjUsMjguNWMwLTMuODY2LDEyLjE5My04LDI2LThjMTMuODA3LDAsMjYsNC4xMzQsMjYsOCAgQzc2LjUsMjguNjYyLDc2LjQ3MSwyOC44MjUsNzYuNDI4LDI4Ljk4OHogTTUwLjUsMjMuNWMtMTIuMTUsMC0yMywyLjc5MS0yMyw1YzIsNSwyMCwyNCwyMCwyNHYyNGMyLTEsNC0yLDYtM3YtMjFjMCwwLDE4LTE5LDIwLTI0ICBDNzMuNSwyNi4yOTEsNjIuNjUsMjMuNSw1MC41LDIzLjV6IE02Mi41LDM5LjVjLTUuMzYzLDUuOTUtMTEuOTMsMTMtMTEuOTMsMTNzLTYuODYxLTcuMTk4LTEyLjA3LTEzICBDNDUuOTE3LDM5LjU4NSw1NS40MDcsMzkuNjEzLDYyLjUsMzkuNXoiPjwvcGF0aD48L3N2Zz4=);width: 27px;background-size: 27px;top: 5px;}\
.tabs__filter_button:after{\content: '';mix-blend-mode: screen;background: #000000;position: absolute;width: 100%;height: 100%;}\
.tabs__filter_button:hover:after, .tabs__filter_button.activefilter:after{background: #005ff9;}\
\
.tabs__filter_button_info {position: absolute;z-index:1;color: white;background: #005ff994;padding: 3px;left: 80%;top: -5px;border-radius: 3px;user-select: none;font-size: 10px;line-height: 1;box-shadow: 2px 2px 3px #c0c0c0eb;}\
\
.filter_item_setting > .panelSettingFilter {\
position: absolute;\
top: 50%;\
left: 50%;\
width: 350px;\
background: #ffd400bd;\
transform: translate(-50%, -50%) !important;\
z-index: 1;\
box-shadow: 2px 2px 4px #f3951c;\
border: 1px solid white;\
padding: 4px;\
display: none;\
text-align: center;\
font-family: monospace;\
}\
.panelSettingFilter__title {\
background: linear-gradient(45deg, black, transparent);\
color: white;\
user-select:none;\
}\
.panelSettingFilter__close {\
float: right;\
transition: 1s all;\
cursor:pointer;\
user-select:none;\
}\
.panelSettingFilter__close:hover {\
color: black;\
}\
.panelSettingFilter__body{\
min-height: 50px;\
padding: 4px;\
}\
.panelSettingFilter__body > div{\
margin: 6px 0;\
background: #ffffffb3;\
padding: 2px;\
}\
.panelSettingFilter__foot{\
background: linear-gradient(45deg, silver, transparent);\
}\
.panelSettingFilter__foot button{\
margin: 0 5px;\
}\
.t_actions > input {\
margin: 0 5px;\
}\
");

    var ObjMailNews = {
        filter_list: []
    }

    function LS_save(){
        let _tmp = JSON.stringify(ObjMailNews)

        if(_tmp){
            GM_setValue('ObjMailNews', _tmp)
        }
    }

    function LS_load(){
        let _tmp = GM_getValue('ObjMailNews')

        ObjMailNews = _tmp ? JSON.parse(_tmp) : ObjMailNews
        log(ObjMailNews)
    }

    function log(){
        console.log(arguments)
    }

    function rndcolor(type){
        return type ? 'rgba('+Math.floor(Math.random()*255)+','+Math.floor(Math.random()*255)+','+Math.floor(Math.random()*255)+', 1.0)':'#'+Math.floor(Math.random()*16777215).toString(16)
    }

    function isColor(strColor){
        let op = new Option().style;
        op.color = strColor;
        return op.color !== '';
    }

    function addClassName(el,cls){
        let all_class = el.className.split(' ')
        all_class.push(cls)
        return all_class.join(' ')
    }

    function showHide(el){
        el.style.display = el.style.display == 'none' ? 'block' : 'none'
    }

    var NewsDown = function(){

        let self = this

        // Manipulation with elements contains filters values
        this.decorateStyle = function(el, num){
            let itemObj = ObjMailNews.filter_list[num]

            if(itemObj && Object.keys(itemObj).length){
                if(itemObj.hide){
                    if(!el.classList.contains('filter_item_hide')) el.classList.add('filter_item_hide')
                    return;
                }

                if(itemObj.bg_color){
                    let color = itemObj.bg_color ? itemObj.bg_color : rndcolor(),
                        bg_color = "background:"+ color +';'

                    el.style.setProperty('background', color)
                }

                if(itemObj.font_color){
                    let color = itemObj.font_color ? itemObj.font_color : '',
                        element_a = el.querySelectorAll('a')

                    element_a.length>1 ? element_a[1].style.setProperty('color', color) : element_a[0].style.setProperty('color', color)

                }
            }
        }

        // Find news contains filters values
        this.findNews = function(mut, obs){
            let news = document.querySelectorAll(".tabs-content__item"),
                itemObj = ObjMailNews.filter_list,
                fElements = news.forEach(function(el){

                    let t_content = el.textContent.toLowerCase()

                    // Restore element
                    if(el.hasAttribute('style')) el.removeAttribute('style')

                    let element_a = el.querySelectorAll('a')
                    if(element_a.length>1){
                        if(element_a[1].hasAttribute('style')) element_a[1].removeAttribute('style')
                    } else {
                        if(element_a[0].hasAttribute('style')) element_a[0].removeAttribute('style')
                    }

                    if(el.classList.contains('flter_item_hide')) el.classList.remove('flter_item_hide')
                    //

                    for(let z in itemObj){
                        if(t_content.includes(itemObj[z].title.toLowerCase())){
                            self.decorateStyle(el, z)
                        }
                    }
                })
            }
        // Prompt variant
        this.addItemPrompt = function(event){
            let title = prompt('Введите значение: ')
            if(title && !/^\s*$/i.test(title)){
                let font_color = prompt('Введите значение цвета (пусто случ. цвет, каждый раз):\n #000000 or rgba(255,0,0,1.0) or rgb(0,255,0)', 'random'),
                    hide = prompt('Скрывать в новостной ленте?\n0 - нет\n1 - да','0')

                ObjMailNews.filter_list.push({
                    title: title,
                    font_color: isColor(font_color) ? font_color : rndcolor(),
                    hide: hide !== '1' ? 0 : 1
                })

                this.listUpd()
                this.findNews()
                LS_save();
            }
        }

        this.clickItemPrompt = function(num, event){
            let itemObj = ObjMailNews.filter_list[num],
                title = prompt('Введите значение: \ndel - удалить фильтр', itemObj.title)

            if(title && !/^\s*$/i.test(title)){
                if(title !== 'del'){
                    let color = prompt('Введите значение цвета (пусто случ. цвет):\n #000000 or rgba(255,0,0,1.0) or rgb(0,255,0)', itemObj.bg_color),
                        hide = prompt('Скрывать в новостной ленте?\n0 - нет\n1 - да', itemObj.hide)

                    itemObj.title = title
                    itemObj.bg_color = isColor(bg_color) ? bg_color : rndcolor()
                    itemObj.hide = hide == null ? itemObj.hide : hide !== '1' ? 0 : 1

                } else {
                    ObjMailNews.filter_list.splice(num, 1)
                }

                this.listUpd()
                this.findNews()
                LS_save()
            }
        }
        // end - Prompt variant

        // Add new item to filter
        this.addItem = function(params){
            let title = params.name,
                bg_color = params.bg_color,
                font_color = params.font_color,
                hide = params.hide

            if(title && !/^\s*$/i.test(title)){
                ObjMailNews.filter_list.push({
                    title: title,
                    bg_color: isColor(bg_color) ? bg_color : rndcolor(),
                    font_color: isColor(font_color) ? font_color : '',
                    hide: hide !== '1' ? 0 : 1
                })

                this.listUpd()
                this.findNews()
                LS_save();
                this.sh(this.panelSettingFilter, 'hide', null)
            } else {
                alert('Поле пустое!')
            }
        }

        // Edit exists filter item
        this.clickItem = function(params, itemObj){
            let title = params.name,
                bg_color = params.bg_color,
                font_color = params.font_color,
                hide = params.hide

            if(title && !/^\s*$/i.test(title)){
                itemObj.title = title
                itemObj.bg_color = isColor(bg_color) ? bg_color : rndcolor()
                itemObj.font_color = isColor(font_color) ? font_color : ''
                itemObj.hide = hide == null ? itemObj.hide : hide !== '1' ? 0 : 1

                this.listUpd()
                this.findNews()
                LS_save()
                this.sh(this.panelSettingFilter, 'hide', null)
            } else {
                alert('Ошибка поля name')
            }
        }

        // Remove filter item
        this.removeItem = function(itemObj, num){
            if(confirm(`Удалить элемент: ${itemObj.title}`)){
                ObjMailNews.filter_list.splice(num, 1)
                this.listUpd()
                this.findNews()
                LS_save()
                this.sh(this.panelSettingFilter, 'hide', null)
            }
        }

        // Set default value fields
        this.defaultValue = function(){
            this.panel_name.value = ''
            this.panel_bg_color.value = '#ffffff'
            this.panel_font_color.value = '#528fdf'
            this.panel_select[0].checked = true
        }

        // Set value fields from LocalStorage
        this.setValueOBJ = function(itemObj){
            this.panel_name.value = itemObj.title
            this.panel_bg_color.value = itemObj.bg_color
            this.panel_font_color.value = itemObj.font_color
            this.panel_select[+itemObj.hide].checked = true
        }

        // PopUp window setting, add and edit filtered items
        this.sh = function(el, tip, num){
            let new_nodes_save = this.panel_button_save.cloneNode(true),
                new_nodes_remove = this.panel_button_remove.cloneNode(true)

            this.panel_button_save.parentNode.replaceChild(new_nodes_save, this.panel_button_save);
            this.panel_button_save = new_nodes_save

            this.panel_button_remove.parentNode.replaceChild(new_nodes_remove, this.panel_button_remove);
            this.panel_button_remove = new_nodes_remove

            // Add new item
            if(tip == 'addItem'){
                this.panel_button_remove.setAttribute('disabled', 'disabled')

                this.defaultValue()
                this.panel_button_save.addEventListener('click', function(){
                    self.addItem({
                        name: self.panel_name.value,
                        bg_color: self.panel_bg_color.value,
                        font_color: self.panel_font_color.value,
                        hide: self.panelSettingFilter.querySelectorAll('input[name=tip_actions]:checked')[0].value
                    })
                })
            }

            // Edit item
            if(num && tip == 'clickItem'){
                this.panel_button_remove.removeAttribute('disabled')

                let itemObj = ObjMailNews.filter_list[num]
                this.setValueOBJ(itemObj)

                this.panel_button_save.addEventListener('click', function(){
                    self.clickItem({
                        name: self.panel_name.value,
                        bg_color: self.panel_bg_color.value,
                        font_color: self.panel_font_color.value,
                        hide: self.panelSettingFilter.querySelectorAll('input[name=tip_actions]:checked')[0].value
                    }, itemObj)
                })

                this.panel_button_remove.addEventListener('click', function(event){
                    self.removeItem(itemObj, num)
                }, false)
            }

            // Other deafault value
            if(!tip || tip == 'hide'){
                this.defaultValue()
            }

            showHide(el)
        }

        // Show Hide Buttons and filter items
        this.showhide = function(){
            if(!this.divBox.classList.contains('filter_item_box_show')){
                this.divBox.classList.add('filter_item_box_show')
                this.filter_button.classList.add('activefilter')
            } else {
                this.divBox.classList.remove('filter_item_box_show')
                this.filter_button.classList.remove('activefilter')
            }
        }

        // Update filter items
        this.listUpd = function(){
            this.divBox.innerHTML = ''

            for(let z in ObjMailNews.filter_list){
                let itemObj = ObjMailNews.filter_list[z],
                    d = document.createElement("div")

                d.className = 'filter_class filter_item'
                d.textContent = itemObj.title
                d.title = 'Фильтр: '+d.textContent + (itemObj.hide?' (скрыть)':'')
                d.setAttribute("style", `border-color: ${itemObj.bg_color};color:${itemObj.font_color}`)

                if(itemObj.hasOwnProperty('hide') && itemObj.hide){
                    d.classList.add("filter_item_hide_legend")
                }
                //d.addEventListener('click', this.clickItem.bind(this, z))
                d.addEventListener('click', function(event){
                    self.sh(self.panelSettingFilter, 'clickItem', z)
                })

                this.divBox.appendChild(d)
            }

            let addButton = document.createElement("div")
            addButton.className = 'filter_class add_filter_item'
            addButton.textContent = '+'
            addButton.title = 'Добавить фильтр'
            addButton.addEventListener('click', function(){
                self.sh(self.panelSettingFilter, 'addItem', null)
            })
            this.divBox.appendChild(addButton)

            this.filter_button_info.textContent = ObjMailNews.filter_list.length
            this.filter_button.title = 'Фильтр (Элементов: '+this.filter_button_info.textContent+')'
        }

        // Main function initilization
        this.init = function(){
            LS_load()

            let config = {
                attributes: true,
                attributeFilter:["data-show-pixel"],
                //childList: true,
                //subtree: true
            },
                tabs = document.querySelector(".tabs")

            this.divBox = document.createElement("div")
            this.divBox.classList.add('filter_item_box')

            this.divBoxSetting = document.createElement("div")
            this.divBoxSetting.classList.add('filter_item_setting')

            this.filter_button = document.createElement("a")
            this.filter_button.href = '#'
            this.filter_button.title = 'Фильтр'
            this.filter_button.classList.add('tabs__filter_button')

            this.filter_button_info = document.createElement("div")
            this.filter_button_info.textContent = '...'
            this.filter_button_info.classList.add('tabs__filter_button_info')

            this.filter_button.appendChild(this.filter_button_info)

            this.listUpd()

            tabs.appendChild(this.filter_button)
            tabs.nextElementSibling.parentNode.insertBefore(this.divBox,tabs.nextElementSibling)
            tabs.nextElementSibling.parentNode.insertBefore(this.divBoxSetting,tabs.nextElementSibling)

            this.filter_button.addEventListener('click', this.showhide.bind(this))

            // Panel settings
            this.panelSettingFilter = document.createElement("div")
            this.panelSettingFilter.classList.add('panelSettingFilter')
            this.panelSettingFilter.setAttribute('style','display:none;')

            let htmlCode = '<div class="panelSettingFilter__title">'+
                '<span>Settings</span>'+
                '<div class="panelSettingFilter__close">X</div>'+
                '</div>'+
                //'<form id="filter_form">'+
                '<div class="panelSettingFilter__body">'+
                '<div>Слово: <input type="text" placeholder="Название фильтра"/></div>'+
                '<div>Цвет фона: <input id="item_bg_color" type="color"/></div>'+
                '<div>Цвет текста: <input id="item_font_color" type="color"/></div>'+
                '<div class="t_actions">Тип:<br>'+
                '<input id="t_show" type="radio" name="tip_actions" value="0" checked/><label for="t_show">Show</label>'+
                '<input id="t_hide" type="radio" name="tip_actions" value="1" /><label for="t_hide">Hide</label>'+
                //'<input id="t_other" type="radio" name="tip_actions" value="2" /><label for="t_other">Other</label>'+
                '</div>'+
                '<div class="panelSettingFilter__foot"><button id="item_save">Сохранить</button><button id="item_remove">Удалить</button></div>'//+
            //'</form>'

            this.panelSettingFilter.innerHTML = htmlCode
            this.divBoxSetting.appendChild(this.panelSettingFilter)
            //
            this.panel_name = this.panelSettingFilter.querySelector('input[type=text]')
            this.panel_bg_color = this.panelSettingFilter.querySelector('#item_bg_color')
            this.panel_font_color = this.panelSettingFilter.querySelector('#item_font_color')
            this.panel_select = this.panelSettingFilter.querySelectorAll('input[name=tip_actions]')
            this.panel_button_save = this.panelSettingFilter.querySelector('#item_save')
            this.panel_button_remove = this.panelSettingFilter.querySelector('#item_remove')
            this.panel_button_remove.setAttribute('disabled', 'disabled')
            this.panelSettingFilter.querySelector('.panelSettingFilter__close').addEventListener('click', this.sh.bind(this,this.panelSettingFilter))
            //

            this.findNews()

            this.observer = new MutationObserver(this.findNews);
            this.observer.observe(document.querySelector(".tabs-content_atlas"), config);
        }
    }

    new NewsDown().init()
})();