From 708cb7202808597f7d422d5152772250e1b30a9c Mon Sep 17 00:00:00 2001 From: Matvey Tarasov Date: Wed, 15 Apr 2020 00:37:01 +0300 Subject: [PATCH] Refactoring controls.js and add url observer like main.js file --- controls.js | 186 ++++++++++++++++++++++++++++-------------------- hide_element.js | 74 +++++++++---------- main.js | 9 +++ manifest.json | 4 ++ 4 files changed, 160 insertions(+), 113 deletions(-) create mode 100644 main.js diff --git a/controls.js b/controls.js index 4f454db..adebe8a 100644 --- a/controls.js +++ b/controls.js @@ -1,93 +1,127 @@ +/** + * + * @param id {String} + * @return {HTMLSpanElement} + */ function muteBtnHTML(id) { - return ` + const element = document.createElement('span'); + element.setAttribute('class', 'mute_message'); + element.setAttribute('id', `mute${id}`); + element.innerHTML = ` 🔇 Заглушить - ` + `; + return element; } -function addControls() { - if (event.target.className == 'im-mess--check fl_l') { - var message = event.target.parentElement; - - var actionsArea = message.getElementsByClassName("im-mess--actions")[0]; - if (actionsArea && actionsArea.lastChild.className != "mute_message") { - var sender_id = message.parentElement.parentElement.parentElement["dataset"].peer - - actionsArea.innerHTML += muteBtnHTML(sender_id); - var muteBtn = actionsArea.getElementsByClassName("mute_message")[0]; - muteBtn.style.display = "none"; - - actionsArea.parentElement.addEventListener("mouseenter", function( event ) { - event.target.getElementsByClassName("mute_message")[0].style.display = "inline-block"; - }); - - actionsArea.parentElement.addEventListener("mouseleave", function( event ) { - event.target.getElementsByClassName("mute_message")[0].style.display = "none"; - }); - - muteBtn.addEventListener("click", function(event) { - var clicked_id = event.target.id.substr(4); // get id of sender from element id - - chrome.storage.sync.set({idToHide: clicked_id}, function() { - for (var item of chatBody.children) { - if (item.dataset.peer == clicked_id) { - item.style.display = "none"; - } - } - - console.log('idToHide: ' + clicked_id); - }); - }); +/** + * + * @param chatBody {HTMLElement} + * @return {function(...[*]=)} + */ +function addControls(chatBody) { + return function (event) { + console.log(event); + if (event.target.className === 'im-mess--check fl_l') { + const message = event.target.parentElement; + addControlButton(message) } } } -var chatBody = document.getElementsByClassName("_im_peer_history im-page-chat-contain")[0]; +/** + * Create mute button and inset it to the actionArea + * @param actionArea {HTMLElement} + * @param senderId {String} + * @return {HTMLElement} + */ +function addMuteButton(actionArea, senderId) { + const muteButton = muteBtnHTML(senderId); + actionArea.appendChild(muteButton); + muteButton.style.display = "none"; + return muteButton; +} -chatBody.addEventListener('DOMNodeInserted', addControls); +/** + * Add event listeners to the actionArea + * @param actionsArea {HTMLElement} + */ +function addActionAreaEvents(actionsArea) { + actionsArea.parentElement.addEventListener("mouseenter", function (event) { + event.target.getElementsByClassName("mute_message")[0].style.display = "inline-block"; + }); + + actionsArea.parentElement.addEventListener("mouseleave", function (event) { + event.target.getElementsByClassName("mute_message")[0].style.display = "none"; + }); +} + +/** + * + * @param chatBody {HTMLElement} + * @return {function(...[]=)} + */ +function setIdToHideHandle(chatBody) { + return function (event) { + const clickedId = event.target.id.substr(4); // get id of sender from element id + + chrome.storage.sync.set({idToHide: clickedId}, function () { + for (let item of chatBody.children) { + if (item.dataset.peer === clickedId) { + item.style.display = "none"; + } + } + + console.log('idToHide: ' + clickedId); + }); + } +} // Try to add controls until successful. Needed for page refresh. -var controlsInterval = setInterval(function () { - var chatBody = document.getElementsByClassName("_im_peer_history im-page-chat-contain")[0]; +function createTryToInitInterval() { + const controlsInterval = setInterval(function () { + tryToInitControls(controlsInterval) + }, 200) + return controlsInterval; +} - for (var item of chatBody.children) { +/** + * + * @param message {HTMLElement} + * @param intervalForClean {Number?} + */ +function addControlButton(message, intervalForClean) { + const actionsArea = message.getElementsByClassName("im-mess--actions")[0]; + if (actionsArea && actionsArea.lastChild.className !== "mute_message") { + const senderId = message.parentElement.parentElement.parentElement["dataset"].peer; + const muteBtn = addMuteButton(actionsArea, senderId); + addActionAreaEvents(actionsArea); + muteBtn.addEventListener("click", setIdToHideHandle(chatBody)); + } else if (intervalForClean) { + clearInterval(intervalForClean) + } +} + +/** + * Function hide and mark messages + * @param intervalForClear {Number} + */ +function tryToInitControls(intervalForClear) { + const chatBody = document.getElementsByClassName("_im_peer_history im-page-chat-contain")[0]; + + for (let item of chatBody.children) { if (item.className.includes('im-mess-stack _im_mess_stack')) { - var messages = item.children[1].children[1].getElementsByClassName('im-mess im_in _im_mess'); - for (var message of messages) { - var actionsArea = message.getElementsByClassName("im-mess--actions")[0]; - - if (actionsArea && actionsArea.lastChild.className != "mute_message") { - var sender_id = message.parentElement.parentElement.parentElement.dataset.peer; - - actionsArea.innerHTML += muteBtnHTML(sender_id); - var muteBtn = actionsArea.getElementsByClassName("mute_message")[0]; - muteBtn.style.display = "none"; - - actionsArea.parentElement.addEventListener("mouseenter", function( event ) { - event.target.getElementsByClassName("mute_message")[0].style.display = "inline-block"; - }); - - actionsArea.parentElement.addEventListener("mouseleave", function( event ) { - event.target.getElementsByClassName("mute_message")[0].style.display = "none"; - }); - - muteBtn.addEventListener("click", function(event) { - var clicked_id = event.target.id.substr(4); // get id of sender from element id - - chrome.storage.sync.set({idToHide: clicked_id}, function() { - for (var item of chatBody.children) { - if (item.dataset.peer == clicked_id) { - item.style.display = "none"; - } - } - - console.log('idToHide: ' + clicked_id); - }); - }); - } else if (actionsArea.lastChild.className == "mute_message") { - clearInterval(controlsInterval); - } + let messages = item.children[1].children[1].getElementsByClassName('im-mess im_in _im_mess'); + for (let message of messages) { + addControlButton(message, intervalForClear) } } } -}, 200); + +} + +(function init() { + const chatBody = document.getElementsByClassName("_im_peer_history im-page-chat-contain")[0]; + chatBody.addEventListener('DOMNodeInserted', addControls); + createTryToInitInterval(); +})(); \ No newline at end of file diff --git a/hide_element.js b/hide_element.js index 43f8dd6..45c249d 100644 --- a/hide_element.js +++ b/hide_element.js @@ -1,37 +1,37 @@ -var idToHide; - -var chatBody = document.getElementsByClassName("_im_peer_history im-page-chat-contain")[0]; - -chatBody.addEventListener('DOMNodeInserted', function(event) { - if (event.target.className == 'im-mess-stack _im_mess_stack ') { - chrome.storage.sync.get('idToHide', function(data) { - idToHide = data.idToHide; - }); - - chrome.storage.sync.get('isExtensionOn', function(data) { - if (data.isExtensionOn) { - if (event.target.dataset.peer == idToHide) { - event.target.style.display = "none"; - } - } - }); - } -}); - -chrome.storage.sync.get('idToHide', function(data) { - idToHide = data.idToHide; -}); - -// Try to hide until successful. Needed for page refresh. -var hideInterval = setInterval(function () { - var chatBody = document.getElementsByClassName("_im_peer_history im-page-chat-contain")[0]; - for (var item of chatBody.children) { - if (item.dataset.peer == idToHide) { - if (item.style.display != "none") { - item.style.display = "none"; - } else { - clearInterval(hideInterval); - } - } - } -}, 200); +var idToHide; + +var chatBody = document.getElementsByClassName("_im_peer_history im-page-chat-contain")[0]; + +chatBody.addEventListener('DOMNodeInserted', function(event) { + if (event.target.className === 'im-mess-stack _im_mess_stack ') { + chrome.storage.sync.get('idToHide', function(data) { + idToHide = data.idToHide; + }); + + chrome.storage.sync.get('isExtensionOn', function(data) { + if (data.isExtensionOn) { + if (event.target.dataset.peer === idToHide) { + event.target.style.display = "none"; + } + } + }); + } +}); + +chrome.storage.sync.get('idToHide', function(data) { + idToHide = data.idToHide; +}); + +// Try to hide until successful. Needed for page refresh. +var hideInterval = setInterval(function () { + var chatBody = document.getElementsByClassName("_im_peer_history im-page-chat-contain")[0]; + for (var item of chatBody.children) { + if (item.dataset.peer === idToHide) { + if (item.style.display !== "none") { + item.style.display = "none"; + } else { + clearInterval(hideInterval); + } + } + } +}, 200); diff --git a/main.js b/main.js new file mode 100644 index 0000000..d160367 --- /dev/null +++ b/main.js @@ -0,0 +1,9 @@ +const changeUrlDetect = setInterval((function () { + let oldUrl = ''; + return function () { + const currentUrl = window.location.href; + if(currentUrl !== oldUrl){ + oldUrl = currentUrl; + } + } +})(),100); \ No newline at end of file diff --git a/manifest.json b/manifest.json index 0f65ee1..5e00e91 100644 --- a/manifest.json +++ b/manifest.json @@ -21,6 +21,10 @@ }, "manifest_version": 2, "content_scripts": [ + { + "matches": ["https://*.vk.com/*"], + "js": ["main.js"] + }, { "matches": ["https://*.vk.com/im*"], "js": ["hide_element.js"]