Split logic in multiple files

CodeWithDennis · Nov 9, 2024 · e85e174 · e85e174
1 parent bf4f30f
commit e85e174
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 115 deletions.
diff --git a/resources/js/copyable.js b/resources/js/copyable.js
@@ -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;
+}
diff --git a/resources/js/events.js b/resources/js/events.js
@@ -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;
+  });
+}
diff --git a/resources/js/index.js b/resources/js/index.js
@@ -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);
diff --git a/resources/js/popup.js b/resources/js/popup.js
@@ -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');
+}
diff --git a/tailwind.config.js → tailwind.config.cjs b/tailwind.config.js → tailwind.config.cjs