Filter out invisible elements

This commit is contained in:
Idrees Hassan
2025-10-28 23:28:12 -04:00
parent 1061f978b5
commit ea1f08c80d
4 changed files with 31 additions and 10 deletions

13
dist/birb.js vendored
View File

@@ -1675,7 +1675,7 @@
insertModal(`${birdBirb()} Mode`, message); insertModal(`${birdBirb()} Mode`, message);
}), }),
new Separator(), new Separator(),
new MenuItem("2025.10.28.157", () => { alert("Thank you for using Pocket Bird! You are on version: 2025.10.28.157"); }, false), new MenuItem("2025.10.28.165", () => { alert("Thank you for using Pocket Bird! You are on version: 2025.10.28.165"); }, false),
]; ];
const styleElement = document.createElement("style"); const styleElement = document.createElement("style");
@@ -1928,7 +1928,7 @@
function update() { function update() {
ticks++; ticks++;
// Hide bird if the browser is fullscreen // Hide bird if the browser is fullscreen
if (document.fullscreenElement) { if (document.fullscreenElement) {
birb.setVisible(false); birb.setVisible(false);
@@ -2342,9 +2342,16 @@
const rect = img.getBoundingClientRect(); const rect = img.getBoundingClientRect();
return rect.left >= 0 && rect.top >= MIN_FOCUS_ELEMENT_TOP && rect.right <= window.innerWidth && rect.top <= getWindowHeight(); return rect.left >= 0 && rect.top >= MIN_FOCUS_ELEMENT_TOP && rect.right <= window.innerWidth && rect.top <= getWindowHeight();
}); });
const visible = Array.from(inWindow).filter((img) => {
const style = window.getComputedStyle(img);
if (style.display === "none" || style.visibility === "hidden" || (style.opacity && parseFloat(style.opacity) < 0.25)) {
return false;
}
return true;
});
/** @type {HTMLElement[]} */ /** @type {HTMLElement[]} */
// @ts-expect-error // @ts-expect-error
const largeElements = Array.from(inWindow).filter((img) => img instanceof HTMLElement && img !== focusedElement && img.offsetWidth >= MIN_FOCUS_ELEMENT_WIDTH); const largeElements = Array.from(visible).filter((img) => img instanceof HTMLElement && img !== focusedElement && img.offsetWidth >= MIN_FOCUS_ELEMENT_WIDTH);
// Ensure the bird doesn't land on fixed or sticky elements // Ensure the bird doesn't land on fixed or sticky elements
const nonFixedElements = largeElements.filter((el) => { const nonFixedElements = largeElements.filter((el) => {
const style = window.getComputedStyle(el); const style = window.getComputedStyle(el);

15
dist/birb.user.js vendored
View File

@@ -1,7 +1,7 @@
// ==UserScript== // ==UserScript==
// @name Pocket Bird // @name Pocket Bird
// @namespace https://idreesinc.com // @namespace https://idreesinc.com
// @version 2025.10.28.157 // @version 2025.10.28.165
// @description birb // @description birb
// @author Idrees // @author Idrees
// @downloadURL https://github.com/IdreesInc/Pocket-Bird/raw/refs/heads/main/dist/birb.user.js // @downloadURL https://github.com/IdreesInc/Pocket-Bird/raw/refs/heads/main/dist/birb.user.js
@@ -1689,7 +1689,7 @@
insertModal(`${birdBirb()} Mode`, message); insertModal(`${birdBirb()} Mode`, message);
}), }),
new Separator(), new Separator(),
new MenuItem("2025.10.28.157", () => { alert("Thank you for using Pocket Bird! You are on version: 2025.10.28.157"); }, false), new MenuItem("2025.10.28.165", () => { alert("Thank you for using Pocket Bird! You are on version: 2025.10.28.165"); }, false),
]; ];
const styleElement = document.createElement("style"); const styleElement = document.createElement("style");
@@ -1942,7 +1942,7 @@
function update() { function update() {
ticks++; ticks++;
// Hide bird if the browser is fullscreen // Hide bird if the browser is fullscreen
if (document.fullscreenElement) { if (document.fullscreenElement) {
birb.setVisible(false); birb.setVisible(false);
@@ -2356,9 +2356,16 @@
const rect = img.getBoundingClientRect(); const rect = img.getBoundingClientRect();
return rect.left >= 0 && rect.top >= MIN_FOCUS_ELEMENT_TOP && rect.right <= window.innerWidth && rect.top <= getWindowHeight(); return rect.left >= 0 && rect.top >= MIN_FOCUS_ELEMENT_TOP && rect.right <= window.innerWidth && rect.top <= getWindowHeight();
}); });
const visible = Array.from(inWindow).filter((img) => {
const style = window.getComputedStyle(img);
if (style.display === "none" || style.visibility === "hidden" || (style.opacity && parseFloat(style.opacity) < 0.25)) {
return false;
}
return true;
});
/** @type {HTMLElement[]} */ /** @type {HTMLElement[]} */
// @ts-expect-error // @ts-expect-error
const largeElements = Array.from(inWindow).filter((img) => img instanceof HTMLElement && img !== focusedElement && img.offsetWidth >= MIN_FOCUS_ELEMENT_WIDTH); const largeElements = Array.from(visible).filter((img) => img instanceof HTMLElement && img !== focusedElement && img.offsetWidth >= MIN_FOCUS_ELEMENT_WIDTH);
// Ensure the bird doesn't land on fixed or sticky elements // Ensure the bird doesn't land on fixed or sticky elements
const nonFixedElements = largeElements.filter((el) => { const nonFixedElements = largeElements.filter((el) => {
const style = window.getComputedStyle(el); const style = window.getComputedStyle(el);

View File

@@ -2,7 +2,7 @@
"manifest_version": 3, "manifest_version": 3,
"name": "Pocket Bird", "name": "Pocket Bird",
"description": "It's a bird, in your browser. What more could you want?", "description": "It's a bird, in your browser. What more could you want?",
"version": "2025.10.28.157", "version": "2025.10.28.165",
"homepage_url": "https://idreesinc.com", "homepage_url": "https://idreesinc.com",
"icons": { "icons": {
"48": "images/icons/transparent/48x48x1.png", "48": "images/icons/transparent/48x48x1.png",

View File

@@ -480,7 +480,7 @@ Promise.all([
function update() { function update() {
ticks++; ticks++;
// Hide bird if the browser is fullscreen // Hide bird if the browser is fullscreen
if (document.fullscreenElement) { if (document.fullscreenElement) {
birb.setVisible(false); birb.setVisible(false);
@@ -898,9 +898,16 @@ Promise.all([
const rect = img.getBoundingClientRect(); const rect = img.getBoundingClientRect();
return rect.left >= 0 && rect.top >= MIN_FOCUS_ELEMENT_TOP && rect.right <= window.innerWidth && rect.top <= getWindowHeight(); return rect.left >= 0 && rect.top >= MIN_FOCUS_ELEMENT_TOP && rect.right <= window.innerWidth && rect.top <= getWindowHeight();
}); });
const visible = Array.from(inWindow).filter((img) => {
const style = window.getComputedStyle(img);
if (style.display === "none" || style.visibility === "hidden" || (style.opacity && parseFloat(style.opacity) < 0.25)) {
return false;
}
return true;
});
/** @type {HTMLElement[]} */ /** @type {HTMLElement[]} */
// @ts-expect-error // @ts-expect-error
const largeElements = Array.from(inWindow).filter((img) => img instanceof HTMLElement && img !== focusedElement && img.offsetWidth >= MIN_FOCUS_ELEMENT_WIDTH); const largeElements = Array.from(visible).filter((img) => img instanceof HTMLElement && img !== focusedElement && img.offsetWidth >= MIN_FOCUS_ELEMENT_WIDTH);
// Ensure the bird doesn't land on fixed or sticky elements // Ensure the bird doesn't land on fixed or sticky elements
const nonFixedElements = largeElements.filter((el) => { const nonFixedElements = largeElements.filter((el) => {
const style = window.getComputedStyle(el); const style = window.getComputedStyle(el);