diff --git a/resources/dist/filament-theme-inspector.js b/resources/dist/filament-theme-inspector.js index e2fcf47..0303ae4 100644 --- a/resources/dist/filament-theme-inspector.js +++ b/resources/dist/filament-theme-inspector.js @@ -1,14 +1,25 @@ -function c(){let e=document.createElement("div");e.style.cssText=` - position: fixed; background: rgba(0, 0, 0, 0.8); - padding: 10px 15px; border-radius: 5px; display: none; - z-index: 9999; white-space: nowrap; overflow: hidden; - 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=` +function l(){let t=document.createElement("div");t.style.cssText=` + position: fixed; + background: rgba(0, 0, 0, 0.8); + padding: 10px 15px; + border-radius: 5px; + display: none; + z-index: 9999; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: flex; + 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=` - `;t.innerHTML=i,t.style.cssText=` - background: rgba(0, 0, 0, 0.5); color: white; border: none; - cursor: pointer; padding: 5px 10px; - font-size: 12px; border-radius: 5px;`;let r=` + `;e.innerHTML=i,e.style.cssText=` + background: rgba(0, 0, 0, 0.5); + color: white; + border: none; + cursor: pointer; + padding: 5px 10px; + font-size: 12px; + border-radius: 5px;`;let s=` - `;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)}); + `;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)}); diff --git a/resources/js/index.js b/resources/js/index.js index a580850..e44df24 100644 --- a/resources/js/index.js +++ b/resources/js/index.js @@ -1,28 +1,38 @@ function createPopup() { const popup = document.createElement('div'); popup.style.cssText = ` - position: fixed; background: rgba(0, 0, 0, 0.8); - padding: 10px 15px; border-radius: 5px; display: none; - z-index: 9999; white-space: nowrap; overflow: hidden; - text-overflow: ellipsis; display: flex; align-items: center;`; + position: fixed; + background: rgba(0, 0, 0, 0.8); + padding: 10px 15px; + border-radius: 5px; + display: none; + z-index: 9999; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: flex; + align-items: center;`; const textNode = document.createElement('span'); - textNode.style.color = 'white'; // Set the text color - textNode.style.marginRight = '10px'; // Add space between text and button + textNode.style.color = 'white'; + textNode.style.marginRight = '10px'; popup.appendChild(textNode); const copyButton = document.createElement('button'); - let copyIcon = ` + const copyIcon = ` `; copyButton.innerHTML = copyIcon; - copyButton.style.cssText = ` - background: rgba(0, 0, 0, 0.5); color: white; border: none; - cursor: pointer; padding: 5px 10px; - font-size: 12px; border-radius: 5px;`; + background: rgba(0, 0, 0, 0.5); + color: white; + border: none; + cursor: pointer; + padding: 5px 10px; + font-size: 12px; + border-radius: 5px;`; const checkmarkSVG = ` @@ -30,29 +40,25 @@ function createPopup() { `; copyButton.addEventListener('click', () => { - const textToCopy = textNode.textContent; // Get text from the span + const textToCopy = textNode.textContent; navigator.clipboard.writeText(textToCopy).then(() => { - // Change button icon to checkmark copyButton.innerHTML = checkmarkSVG; - - // Reset button icon after 2 seconds setTimeout(() => { copyButton.innerHTML = copyIcon; }, 2000); - }).catch(err => console.error('Failed to copy: ', err)); }); popup.appendChild(copyButton); document.body.appendChild(popup); - return { popup, textNode }; // Return both the popup and textNode + return { popup, textNode }; } function showPopup(popup, textNode, text, x, y) { - textNode.textContent = text; // Update the text content of the span + textNode.textContent = text; popup.style.left = `${x + 10}px`; popup.style.top = `${y + 10}px`; - popup.style.display = 'flex'; // Ensure the popup is displayed as a flex container + popup.style.display = 'flex'; const popupRect = popup.getBoundingClientRect(); const viewportWidth = window.innerWidth; @@ -76,26 +82,26 @@ function hidePopup(popup) { const { popup, textNode } = createPopup(); let isFrozen = false; -document.querySelectorAll("[class]").forEach(el => { - el.classList.forEach(cls => { - if (cls.startsWith('fi-')) { - el.addEventListener('mouseenter', e => { - if (!isFrozen) showPopup(popup, textNode, cls, e.clientX, e.clientY); // Pass cls as text - }); - el.addEventListener('mouseleave', () => { - if (!isFrozen) hidePopup(popup); - }); - } - }); -}); +document.body.addEventListener('mouseenter', (e) => { + if (e.target.matches('[class*="fi-"]') && !isFrozen) { + const cls = Array.from(e.target.classList).find(c => c.startsWith('fi-')); + showPopup(popup, textNode, cls, e.clientX, e.clientY); + } +}, true); + +document.body.addEventListener('mouseleave', (e) => { + if (e.target.matches('[class*="fi-"]') && !isFrozen) { + hidePopup(popup); + } +}, true); -document.addEventListener('keydown', e => { +document.addEventListener('keydown', (e) => { if (e.altKey) { isFrozen = true; popup.style.pointerEvents = 'auto'; } }); -document.addEventListener('keyup', e => { +document.addEventListener('keyup', (e) => { if (e.key === 'Alt' || e.key === 'Meta') isFrozen = false; });