Skip to content
This repository was archived by the owner on Jan 20, 2026. It is now read-only.

Commit 3c54ff2

Browse files
CodeWithDennisCodeWithDennis
committed
Refactor popup creation and event listeners
1 parent 59e23bd commit 3c54ff2

File tree

2 files changed

+60
-43
lines changed

2 files changed

+60
-43
lines changed

‎resources/dist/filament-theme-inspector.js‎

Lines changed: 21 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,25 @@
1-
function c(){let e=document.createElement("div");e.style.cssText=`
2-
position: fixed; background: rgba(0, 0, 0, 0.8);
3-
padding: 10px 15px; border-radius: 5px; display: none;
4-
z-index: 9999; white-space: nowrap; overflow: hidden;
5-
text-overflow: ellipsis; display: flex; align-items: center;`;let n=document.createElement("span");n.style.color="white",n.style.marginRight="10px",e.appendChild(n);let t=document.createElement("button"),i=`
1+
function l(){let t=document.createElement("div");t.style.cssText=`
2+
position: fixed;
3+
background: rgba(0, 0, 0, 0.8);
4+
padding: 10px 15px;
5+
border-radius: 5px;
6+
display: none;
7+
z-index: 9999;
8+
white-space: nowrap;
9+
overflow: hidden;
10+
text-overflow: ellipsis;
11+
display: flex;
12+
align-items: center;`;let n=document.createElement("span");n.style.color="white",n.style.marginRight="10px",t.appendChild(n);let e=document.createElement("button"),i=`
613
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="fi-btn-icon transition duration-75 h-5 w-5 text-gray-400 dark:text-gray-500">
714
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75" />
8-
</svg>`;t.innerHTML=i,t.style.cssText=`
9-
background: rgba(0, 0, 0, 0.5); color: white; border: none;
10-
cursor: pointer; padding: 5px 10px;
11-
font-size: 12px; border-radius: 5px;`;let r=`
15+
</svg>`;e.innerHTML=i,e.style.cssText=`
16+
background: rgba(0, 0, 0, 0.5);
17+
color: white;
18+
border: none;
19+
cursor: pointer;
20+
padding: 5px 10px;
21+
font-size: 12px;
22+
border-radius: 5px;`;let s=`
1223
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="green" class="fi-btn-icon transition duration-75 h-5 w-5">
1324
<path stroke-linecap="round" stroke-linejoin="round" d="M5 12l5 5L19 7" />
14-
</svg>`;return t.addEventListener("click",()=>{let o=n.textContent;navigator.clipboard.writeText(o).then(()=>{t.innerHTML=r,setTimeout(()=>{t.innerHTML=i},2e3)}).catch(s=>console.error("Failed to copy: ",s))}),e.appendChild(t),document.body.appendChild(e),{popup:e,textNode:n}}function p(e,n,t,i,r){n.textContent=t,e.style.left=`${i+10}px`,e.style.top=`${r+10}px`,e.style.display="flex";let o=e.getBoundingClientRect(),s=window.innerWidth,l=window.innerHeight;o.right>s&&(e.style.left=`${s-o.width-10}px`),o.left<0&&(e.style.left="10px"),o.bottom>l&&(e.style.top=`${r-o.height-10}px`)}function h(e){e.style.display="none"}var{popup:a,textNode:u}=c(),d=!1;document.querySelectorAll("[class]").forEach(e=>{e.classList.forEach(n=>{n.startsWith("fi-")&&(e.addEventListener("mouseenter",t=>{d||p(a,u,n,t.clientX,t.clientY)}),e.addEventListener("mouseleave",()=>{d||h(a)}))})});document.addEventListener("keydown",e=>{e.altKey&&(d=!0,a.style.pointerEvents="auto")});document.addEventListener("keyup",e=>{(e.key==="Alt"||e.key==="Meta")&&(d=!1)});
25+
</svg>`;return e.addEventListener("click",()=>{let o=n.textContent;navigator.clipboard.writeText(o).then(()=>{e.innerHTML=s,setTimeout(()=>{e.innerHTML=i},2e3)}).catch(r=>console.error("Failed to copy: ",r))}),t.appendChild(e),document.body.appendChild(t),{popup:t,textNode:n}}function p(t,n,e,i,s){n.textContent=e,t.style.left=`${i+10}px`,t.style.top=`${s+10}px`,t.style.display="flex";let o=t.getBoundingClientRect(),r=window.innerWidth,c=window.innerHeight;o.right>r&&(t.style.left=`${r-o.width-10}px`),o.left<0&&(t.style.left="10px"),o.bottom>c&&(t.style.top=`${s-o.height-10}px`)}function h(t){t.style.display="none"}var{popup:d,textNode:u}=l(),a=!1;document.body.addEventListener("mouseenter",t=>{if(t.target.matches('[class*="fi-"]')&&!a){let n=Array.from(t.target.classList).find(e=>e.startsWith("fi-"));p(d,u,n,t.clientX,t.clientY)}},!0);document.body.addEventListener("mouseleave",t=>{t.target.matches('[class*="fi-"]')&&!a&&h(d)},!0);document.addEventListener("keydown",t=>{t.altKey&&(a=!0,d.style.pointerEvents="auto")});document.addEventListener("keyup",t=>{(t.key==="Alt"||t.key==="Meta")&&(a=!1)});

‎resources/js/index.js‎

Lines changed: 39 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,64 @@
11
function createPopup() {
22
const popup = document.createElement('div');
33
popup.style.cssText = `
4-
position: fixed; background: rgba(0, 0, 0, 0.8);
5-
padding: 10px 15px; border-radius: 5px; display: none;
6-
z-index: 9999; white-space: nowrap; overflow: hidden;
7-
text-overflow: ellipsis; display: flex; align-items: center;`;
4+
position: fixed;
5+
background: rgba(0, 0, 0, 0.8);
6+
padding: 10px 15px;
7+
border-radius: 5px;
8+
display: none;
9+
z-index: 9999;
10+
white-space: nowrap;
11+
overflow: hidden;
12+
text-overflow: ellipsis;
13+
display: flex;
14+
align-items: center;`;
815

916
const textNode = document.createElement('span');
10-
textNode.style.color = 'white'; // Set the text color
11-
textNode.style.marginRight = '10px'; // Add space between text and button
17+
textNode.style.color = 'white';
18+
textNode.style.marginRight = '10px';
1219
popup.appendChild(textNode);
1320

1421
const copyButton = document.createElement('button');
15-
let copyIcon = `
22+
const copyIcon = `
1623
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="fi-btn-icon transition duration-75 h-5 w-5 text-gray-400 dark:text-gray-500">
1724
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75" />
1825
</svg>`;
1926

2027
copyButton.innerHTML = copyIcon;
21-
2228
copyButton.style.cssText = `
23-
background: rgba(0, 0, 0, 0.5); color: white; border: none;
24-
cursor: pointer; padding: 5px 10px;
25-
font-size: 12px; border-radius: 5px;`;
29+
background: rgba(0, 0, 0, 0.5);
30+
color: white;
31+
border: none;
32+
cursor: pointer;
33+
padding: 5px 10px;
34+
font-size: 12px;
35+
border-radius: 5px;`;
2636

2737
const checkmarkSVG = `
2838
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="green" class="fi-btn-icon transition duration-75 h-5 w-5">
2939
<path stroke-linecap="round" stroke-linejoin="round" d="M5 12l5 5L19 7" />
3040
</svg>`;
3141

3242
copyButton.addEventListener('click', () => {
33-
const textToCopy = textNode.textContent; // Get text from the span
43+
const textToCopy = textNode.textContent;
3444
navigator.clipboard.writeText(textToCopy).then(() => {
35-
// Change button icon to checkmark
3645
copyButton.innerHTML = checkmarkSVG;
37-
38-
// Reset button icon after 2 seconds
3946
setTimeout(() => {
4047
copyButton.innerHTML = copyIcon;
4148
}, 2000);
42-
4349
}).catch(err => console.error('Failed to copy: ', err));
4450
});
4551

4652
popup.appendChild(copyButton);
4753
document.body.appendChild(popup);
48-
return { popup, textNode }; // Return both the popup and textNode
54+
return { popup, textNode };
4955
}
5056

5157
function showPopup(popup, textNode, text, x, y) {
52-
textNode.textContent = text; // Update the text content of the span
58+
textNode.textContent = text;
5359
popup.style.left = `${x + 10}px`;
5460
popup.style.top = `${y + 10}px`;
55-
popup.style.display = 'flex'; // Ensure the popup is displayed as a flex container
61+
popup.style.display = 'flex';
5662

5763
const popupRect = popup.getBoundingClientRect();
5864
const viewportWidth = window.innerWidth;
@@ -76,26 +82,26 @@ function hidePopup(popup) {
7682
const { popup, textNode } = createPopup();
7783
let isFrozen = false;
7884

79-
document.querySelectorAll("[class]").forEach(el => {
80-
el.classList.forEach(cls => {
81-
if (cls.startsWith('fi-')) {
82-
el.addEventListener('mouseenter', e => {
83-
if (!isFrozen) showPopup(popup, textNode, cls, e.clientX, e.clientY); // Pass cls as text
84-
});
85-
el.addEventListener('mouseleave', () => {
86-
if (!isFrozen) hidePopup(popup);
87-
});
88-
}
89-
});
90-
});
85+
document.body.addEventListener('mouseenter', (e) => {
86+
if (e.target.matches('[class*="fi-"]') && !isFrozen) {
87+
const cls = Array.from(e.target.classList).find(c => c.startsWith('fi-'));
88+
showPopup(popup, textNode, cls, e.clientX, e.clientY);
89+
}
90+
}, true);
91+
92+
document.body.addEventListener('mouseleave', (e) => {
93+
if (e.target.matches('[class*="fi-"]') && !isFrozen) {
94+
hidePopup(popup);
95+
}
96+
}, true);
9197

92-
document.addEventListener('keydown', e => {
98+
document.addEventListener('keydown', (e) => {
9399
if (e.altKey) {
94100
isFrozen = true;
95101
popup.style.pointerEvents = 'auto';
96102
}
97103
});
98104

99-
document.addEventListener('keyup', e => {
105+
document.addEventListener('keyup', (e) => {
100106
if (e.key === 'Alt' || e.key === 'Meta') isFrozen = false;
101107
});

0 commit comments

Comments
 (0)