Highlight or hide news
目前为
// ==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
// ==/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()
})();