Skip to content

Commit

Permalink
Refactor popup creation and class handling
Browse files Browse the repository at this point in the history
  • Loading branch information
@CodeWithDennis
CodeWithDennis committed Oct 18, 2024
1 parent c915570 commit c18c844
Show file tree
Hide file tree
Showing 2 changed files with 66 additions and 35 deletions.
27 changes: 15 additions & 12 deletions resources/dist/filament-theme-inspector.js
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,28 @@
function l(){let t=document.createElement("div");t.style.cssText=`
function p(){let e=document.createElement("div");return e.style.cssText=`
position: fixed;
display: none;
z-index: 9999;`,document.body.appendChild(e),e}function f(e){let t=document.createElement("div");t.style.cssText=`
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;
margin-left: 5px;
margin-bottom: 10px;
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=`
align-items: center;
white-space: nowrap; /* Prevent text wrapping */
overflow: hidden; /* Hide overflowed text */
text-overflow: ellipsis; /* Show ellipsis for overflowed text */
`;let o=document.createElement("span");o.textContent=e,o.style.color="white",o.style.marginRight="10px";let n=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>`;e.innerHTML=i,e.style.cssText=`
</svg>`,r=`
<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 n.innerHTML=i,n.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 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)});
border-radius: 5px;`,n.addEventListener("click",()=>{navigator.clipboard.writeText(e).then(()=>{n.innerHTML=r,setTimeout(()=>{n.innerHTML=i},2e3)}).catch(a=>console.error("Failed to copy: ",a))}),t.appendChild(o),t.appendChild(n),t}function h(e,t,o,n){e.innerHTML="",t.forEach(c=>{let d=f(c);e.appendChild(d)}),e.style.left=`${o+10}px`,e.style.top=`${n+10}px`,e.style.display="flex";let i=e.getBoundingClientRect(),r=window.innerWidth,a=window.innerHeight;i.right>r&&(e.style.left=`${r-i.width-10}px`),i.left<0&&(e.style.left="10px"),i.bottom>a&&(e.style.top=`${n-i.height-10}px`)}function u(e){e.style.display="none"}var l=p(),s=!1;document.body.addEventListener("mouseenter",e=>{if(e.target.matches('[class*="fi-"]')&&!s){let t=Array.from(e.target.classList).filter(o=>o.startsWith("fi-"));t.length>0&&h(l,t,e.clientX,e.clientY)}},!0);document.body.addEventListener("mouseleave",e=>{e.target.matches('[class*="fi-"]')&&!s&&u(l)},!0);document.addEventListener("keydown",e=>{e.altKey&&(s=!0,l.style.pointerEvents="auto")});document.addEventListener("keyup",e=>{(e.key==="Alt"||e.key==="Meta")&&(s=!1)});
74 changes: 51 additions & 23 deletions resources/js/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,28 +2,44 @@ function createPopup() {
const popup = document.createElement('div');
popup.style.cssText = `
position: fixed;
display: none;
z-index: 9999;`;

document.body.appendChild(popup);
return popup;
}

function createCopyableItem(text) {
const item = document.createElement('div'); // Each item is a separate div
item.style.cssText = `
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;
margin-left: 5px;
margin-bottom: 10px;
display: flex;
align-items: center;`;
align-items: center;
white-space: nowrap; /* Prevent text wrapping */
overflow: hidden; /* Hide overflowed text */
text-overflow: ellipsis; /* Show ellipsis for overflowed text */
`;

const textNode = document.createElement('span');
textNode.textContent = text;
textNode.style.color = 'white';
textNode.style.marginRight = '10px';
popup.appendChild(textNode);

const copyButton = document.createElement('button');
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>`;

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.innerHTML = copyIcon;
copyButton.style.cssText = `
background: rgba(0, 0, 0, 0.5);
Expand All @@ -34,32 +50,38 @@ function createPopup() {
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>`;

// Copy button functionality
copyButton.addEventListener('click', () => {
const textToCopy = textNode.textContent;
navigator.clipboard.writeText(textToCopy).then(() => {
navigator.clipboard.writeText(text).then(() => {
copyButton.innerHTML = checkmarkSVG;
setTimeout(() => {
copyButton.innerHTML = copyIcon;
}, 2000);
}).catch(err => console.error('Failed to copy: ', err));
});

popup.appendChild(copyButton);
document.body.appendChild(popup);
return { popup, textNode };
// Append text node and copy button to the item div
item.appendChild(textNode);
item.appendChild(copyButton);
return item;
}

function showPopup(popup, textNode, text, x, y) {
textNode.textContent = text;
function showPopup(popup, classes, x, y) {
// Clear the popup first before adding new content
popup.innerHTML = '';

// Loop over each class and create a copyable item
classes.forEach(cls => {
const copyableItem = createCopyableItem(cls);
popup.appendChild(copyableItem); // Append each item to the popup
});

// Set the popup position based on mouse coordinates
popup.style.left = `${x + 10}px`;
popup.style.top = `${y + 10}px`;
popup.style.display = 'flex';

// Ensure popup stays within the viewport
const popupRect = popup.getBoundingClientRect();
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;
Expand All @@ -79,17 +101,23 @@ function hidePopup(popup) {
popup.style.display = 'none';
}

const { popup, textNode } = createPopup();
const popup = createPopup();
let isFrozen = false;

document.body.addEventListener('mouseenter', (e) => {
// Check if element has classes starting with "fi-" and is not frozen
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);
// Collect all classes that start with "fi-"
const fiClasses = Array.from(e.target.classList).filter(c => c.startsWith('fi-'));
if (fiClasses.length > 0) {
// Display the popup with all classes that start with "fi-"
showPopup(popup, fiClasses, e.clientX, e.clientY);
}
}
}, true);

document.body.addEventListener('mouseleave', (e) => {
// Hide the popup when the mouse leaves the target
if (e.target.matches('[class*="fi-"]') && !isFrozen) {
hidePopup(popup);
}
Expand All @@ -104,4 +132,4 @@ document.addEventListener('keydown', (e) => {

document.addEventListener('keyup', (e) => {
if (e.key === 'Alt' || e.key === 'Meta') isFrozen = false;
});
});

0 comments on commit c18c844

Please sign in to comment.