Created
March 25, 2024 17:34
-
-
Save minhphong306/79c7bbad3d0f8b2dae529a4251cd0d56 to your computer and use it in GitHub Desktop.
code mess
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function toggle(type) { | |
| const chatList = document.querySelectorAll("a[href*='/t/']"); | |
| // Add filter blur(2px) for each item | |
| chatList.forEach((item) => { | |
| const parent = getUpToEightParents(item); | |
| let filterValue = ''; | |
| switch (type) { | |
| case 'off': | |
| filterValue = 'blur(0px)'; | |
| break; | |
| case 'all': | |
| filterValue = 'blur(3px)'; | |
| break; | |
| } | |
| parent.style.filter = filterValue; | |
| console.log('attach event on: ', parent) | |
| parent.addEventListener("mouseenter", event => { | |
| if(event.target !== event.currentTarget) { | |
| return; | |
| } | |
| console.log(this); | |
| event.target.style.filter = 'none'; | |
| event.stopPropagation(); | |
| }); | |
| parent.addEventListener("mouseout", event => { | |
| if(event.target !== event.currentTarget) { | |
| return; | |
| } | |
| event.target.style.filter = 'blur(3px)'; | |
| event.stopPropagation(); | |
| }); | |
| }); | |
| } | |
| function getUpToEightParents(elem) { | |
| let parents = []; | |
| let currentElement = elem; | |
| // Collect up to 8 parent elements | |
| for (let i = 0; i < 8; i++) { | |
| // Move to the parent element | |
| currentElement = currentElement.parentElement; | |
| // If there is no parent element, break out of the loop | |
| if (!currentElement) { | |
| break; | |
| } | |
| // Add the parent element to the array | |
| parents.push(currentElement); | |
| } | |
| // console.log(parents); | |
| return parents[4]; | |
| } | |
| toggle('all'); |
Update v2
blur_facebook.mp4
// Cái hàm để add sự kiện
function toggle_blur(messDiv){
// Add event listeners to handle hover effect
messDiv.addEventListener("mouseover", function() {
this.style.filter = "none"; // Remove blur on hover
});
messDiv.addEventListener("mouseout", function() {
this.style.filter = "blur(5px)"; // Add blur when not hovering
});
}
function getElementByXPath(xpath) {
var result = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
return result.singleNodeValue;
}
/*
Add CSS
*/
var style = document.createElement("style");
// Define the CSS rules
// Cái này tính set style cho từng element, mà nghĩ lại sao mình ko tự thêm class riêng rồi gọi, thế là có cái chỗ này
var css = ".blur_noidung { filter: blur(5px); transition: filter 0.3s; }" +
"blur_noidung:hover { filter: none; }";
// Set the CSS rules as the style element's innerHTML
style.innerHTML = css;
// Append the style element to the head of the document
document.head.appendChild(style);
/*
Get all mess div
*/
/*
- Cái chỗ này ban đầu tính lấy nguyên div to theo id, xong phát hiện id fb nó chơi random, ko lần nào giống lần nào, lấy class cũng thế
- Rồi tính lấy theo xpath cũng ko xong
- Nghía lên trên nên kế thừa đoạn querySelectorAll, nó được cái nó select luôn các group bên trái cũng hay
*/
// var messDiv = document.getElementById(":rd:");
var messDiv = document.querySelectorAll("a[href*='/t/']");
// Nảy ý định blur luôn nội dung tin nhắn
// Ai nâng cấp chỗ này lên giúp nhá =))
// Blur all
for (var i = 0; i < messDiv.length; i++) {
// messDiv[i].style.filter = "blur(5px)";
messDiv[i].classList.add("blur_noidung");
toggle_blur(messDiv[i]);
}
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
test