Skip to content

Commit

Permalink
Merge pull request #6 from CodeWithDennis/fix-hover-modal
Browse files Browse the repository at this point in the history 
Fix hover for modals
  • Loading branch information
@CodeWithDennis
CodeWithDennis authored Oct 18, 2024
2 parents 59e23bd + 3c54ff2 commit be37839
Show file tree
Hide file tree
Showing 2 changed files with 60 additions and 43 deletions.
31 changes: 21 additions & 10 deletions resources/dist/filament-theme-inspector.js
View file
Original file line number Diff line number Diff line change
@@ -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=`
<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">
<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" />
</svg>`;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=`
</svg>`;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=`
<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">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 12l5 5L19 7" />
</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)});
</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)});
72 changes: 39 additions & 33 deletions resources/js/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,58 +1,64 @@
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 = `
<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">
<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" />
</svg>`;

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 = `
<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">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 12l5 5L19 7" />
</svg>`;

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;
Expand All @@ -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;
});

0 comments on commit be37839

Please sign in to comment.