Skip to content

Commit

Permalink
Merge pull request #18 from CodeWithDennis/split-logic
Browse files Browse the repository at this point in the history
Split logic
  • Loading branch information
CodeWithDennis authored Nov 9, 2024
2 parents bf4f30f + d354b07 commit 8dccbde
Show file tree
Hide file tree
Showing 7 changed files with 102 additions and 121 deletions.
2 changes: 1 addition & 1 deletion resources/dist/filament-theme-inspector.css

Large diffs are not rendered by default.

10 changes: 5 additions & 5 deletions resources/dist/filament-theme-inspector.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

30 changes: 30 additions & 0 deletions resources/js/copyable.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
export function createCopyableItem(text) {
const textNode = document.createElement('span');
const copyButton = document.createElement('button');
const item = document.createElement('div');

textNode.classList.add('class-text');
textNode.textContent = text;

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

copyButton.innerHTML = copyIcon;
copyButton.addEventListener('click', () => {
navigator.clipboard.writeText(text).then(() => {
copyButton.innerHTML = checkmarkSVG;
setTimeout(() => copyButton.innerHTML = copyIcon, 2000);
}).catch(err => console.error('Failed to copy: ', err));
});

item.appendChild(textNode);
item.appendChild(copyButton);
return item;
}
28 changes: 28 additions & 0 deletions resources/js/events.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import { showPopup, hidePopup } from './popup.js';

export function setupEventListeners(popup) {
let isFrozen = false;

document.body.addEventListener('mouseenter', (e) => {
if (e.target.matches('[class*="fi-"]') && !isFrozen) {
const fiClasses = Array.from(e.target.classList).filter(c => c.startsWith('fi-'));
if (fiClasses.length > 0) showPopup(popup, fiClasses, e.clientX, e.clientY);
}
}, true);

document.body.addEventListener('mouseleave', (e) => {
if (e.target.matches('[class*="fi-"]') && !isFrozen) hidePopup(popup);
}, true);

document.addEventListener('keydown', (e) => {
if (window.filamentData.toggle && e.key === 'Alt') {
isFrozen = !isFrozen;
} else if (!window.filamentData.toggle && e.altKey) {
isFrozen = true;
}
});

document.addEventListener('keyup', (e) => {
if (e.key === 'Alt' || e.key === 'Meta') isFrozen = false;
});
}
118 changes: 3 additions & 115 deletions resources/js/index.js
Original file line number Diff line number Diff line change
@@ -1,117 +1,5 @@
function createPopup() {
const popup = document.createElement('div');
popup.classList.add('theme-inspector-container');

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

function createCopyableItem(text) {
const textNode = document.createElement('span');
const copyButton = document.createElement('button');
const item = document.createElement('div');

textNode.classList.add('class-text');
textNode.textContent = text;

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;

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

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

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.classList.add('is-visible')

// Ensure popup stays within the viewport
const popupRect = popup.getBoundingClientRect();
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;

if (popupRect.right > viewportWidth) {
popup.style.left = `${viewportWidth - popupRect.width - 10}px`;
}
if (popupRect.left < 0) {
popup.style.left = '10px';
}
if (popupRect.bottom > viewportHeight) {
popup.style.top = `${y - popupRect.height - 10}px`;
}
}

function hidePopup(popup) {
popup.classList.remove('is-visible');
}
import { createPopup } from './popup.js';
import { setupEventListeners } from './events.js';

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) {
// 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) => {
if (e.target.matches('[class*="fi-"]') && !isFrozen) {
hidePopup(popup);
}
}, true);

if (window.filamentData.toggle === true) {
document.addEventListener('keydown', (e) => {
if (e.key === 'Alt') {
isFrozen = !isFrozen;
}
});
} else {
document.addEventListener('keydown', (e) => {
if (e.altKey) {
isFrozen = true;
}
});

document.addEventListener('keyup', (e) => {
if (e.key === 'Alt' || e.key === 'Meta') isFrozen = false;
});
}
setupEventListeners(popup);
35 changes: 35 additions & 0 deletions resources/js/popup.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import { createCopyableItem } from './copyable.js';

export function createPopup() {
const popup = document.createElement('div');
popup.classList.add('theme-inspector-container');
document.body.appendChild(popup);
return popup;
}

export function showPopup(popup, classes, x, y) {
// Clear previous content
popup.innerHTML = '';

classes.forEach(cls => {
const copyableItem = createCopyableItem(cls);
popup.appendChild(copyableItem);
});

// Position popup based on mouse coordinates
popup.style.left = `${x + 10}px`;
popup.style.top = `${y + 10}px`;
popup.classList.add('is-visible');

// Ensure popup stays within the viewport
const popupRect = popup.getBoundingClientRect();
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;
if (popupRect.right > viewportWidth) popup.style.left = `${viewportWidth - popupRect.width - 10}px`;
if (popupRect.left < 0) popup.style.left = '10px';
if (popupRect.bottom > viewportHeight) popup.style.top = `${y - popupRect.height - 10}px`;
}

export function hidePopup(popup) {
popup.classList.remove('is-visible');
}
File renamed without changes.

0 comments on commit 8dccbde

Please sign in to comment.