diff --git a/resources/dist/filament-theme-inspector.js b/resources/dist/filament-theme-inspector.js
index 86148e3..e95c838 100644
--- a/resources/dist/filament-theme-inspector.js
+++ b/resources/dist/filament-theme-inspector.js
@@ -1,7 +1,7 @@
function h(){let t=document.createElement("div");return t.classList.add("theme-inspector-container"),document.body.appendChild(t),t}function m(t){let n=document.createElement("span"),e=document.createElement("button"),o=document.createElement("div");n.classList.add("class-text"),n.textContent=t;let i=`
`,s=`
+ `,r=`
`;return e.innerHTML=i,e.addEventListener("click",()=>{navigator.clipboard.writeText(t).then(()=>{e.innerHTML=s,setTimeout(()=>{e.innerHTML=i},2e3)}).catch(c=>console.error("Failed to copy: ",c))}),o.appendChild(n),o.appendChild(e),o}function u(t,n,e,o){t.innerHTML="",n.forEach(d=>{let l=m(d);t.appendChild(l)}),t.style.left=`${e+10}px`,t.style.top=`${o+10}px`,t.classList.add("is-visible");let i=t.getBoundingClientRect(),s=window.innerWidth,c=window.innerHeight;i.right>s&&(t.style.left=`${s-i.width-10}px`),i.left<0&&(t.style.left="10px"),i.bottom>c&&(t.style.top=`${o-i.height-10}px`)}function f(t){t.classList.remove("is-visible")}var a=h(),r=!1;document.body.addEventListener("mouseenter",t=>{if(t.target.matches('[class*="fi-"]')&&!r){let n=Array.from(t.target.classList).filter(e=>e.startsWith("fi-"));n.length>0&&u(a,n,t.clientX,t.clientY)}},!0);document.body.addEventListener("mouseleave",t=>{t.target.matches('[class*="fi-"]')&&!r&&f(a)},!0);document.addEventListener("keydown",t=>{t.altKey&&(r=!0,a.style.pointerEvents="auto")});document.addEventListener("keyup",t=>{(t.key==="Alt"||t.key==="Meta")&&(r=!1)});
+ `;return e.innerHTML=i,e.addEventListener("click",()=>{navigator.clipboard.writeText(t).then(()=>{e.innerHTML=r,setTimeout(()=>{e.innerHTML=i},2e3)}).catch(a=>console.error("Failed to copy: ",a))}),o.appendChild(n),o.appendChild(e),o}function f(t,n,e,o){t.innerHTML="",n.forEach(d=>{let l=m(d);t.appendChild(l)}),t.style.left=`${e+10}px`,t.style.top=`${o+10}px`,t.classList.add("is-visible");let i=t.getBoundingClientRect(),r=window.innerWidth,a=window.innerHeight;i.right>r&&(t.style.left=`${r-i.width-10}px`),i.left<0&&(t.style.left="10px"),i.bottom>a&&(t.style.top=`${o-i.height-10}px`)}function u(t){t.classList.remove("is-visible")}var c=h(),s=!1;document.body.addEventListener("mouseenter",t=>{if(t.target.matches('[class*="fi-"]')&&!s){let n=Array.from(t.target.classList).filter(e=>e.startsWith("fi-"));n.length>0&&f(c,n,t.clientX,t.clientY)}},!0);document.body.addEventListener("mouseleave",t=>{t.target.matches('[class*="fi-"]')&&!s&&u(c)},!0);window.filamentData.toggle===!0?document.addEventListener("keydown",t=>{t.key==="Alt"&&(s=!s)}):(document.addEventListener("keydown",t=>{t.altKey&&(s=!0)}),document.addEventListener("keyup",t=>{(t.key==="Alt"||t.key==="Meta")&&(s=!1)}));
diff --git a/resources/js/index.js b/resources/js/index.js
index 1870e9b..523a93b 100644
--- a/resources/js/index.js
+++ b/resources/js/index.js
@@ -1,4 +1,3 @@
-
function createPopup() {
const popup = document.createElement('div');
popup.classList.add('theme-inspector-container');
@@ -94,19 +93,25 @@ document.body.addEventListener('mouseenter', (e) => {
}, true);
document.body.addEventListener('mouseleave', (e) => {
- // Hide the popup when the mouse leaves the target
if (e.target.matches('[class*="fi-"]') && !isFrozen) {
hidePopup(popup);
}
}, true);
-document.addEventListener('keydown', (e) => {
- if (e.altKey) {
- isFrozen = true;
- popup.style.pointerEvents = 'auto';
- }
-});
+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;
-});
+ document.addEventListener('keyup', (e) => {
+ if (e.key === 'Alt' || e.key === 'Meta') isFrozen = false;
+ });
+}
diff --git a/src/FilamentThemeInspectorPlugin.php b/src/FilamentThemeInspectorPlugin.php
index 0c70456..ad44940 100644
--- a/src/FilamentThemeInspectorPlugin.php
+++ b/src/FilamentThemeInspectorPlugin.php
@@ -16,11 +16,20 @@ class FilamentThemeInspectorPlugin implements Plugin
protected Closure | bool $disabled = false;
+ protected bool $toggle = false;
+
public function getId(): string
{
return 'filament-theme-inspector';
}
+ public function toggle(bool $toggle = true): self
+ {
+ $this->toggle = $toggle;
+
+ return $this;
+ }
+
public function disabled(Closure | bool $disabled = true): self
{
$this->disabled = $disabled;
@@ -33,6 +42,11 @@ public function isDisabled(): bool
return $this->evaluate($this->disabled);
}
+ public function isToggle(): bool
+ {
+ return $this->toggle;
+ }
+
public function register(Panel $panel): void
{
if (! $this->isDisabled()) {
@@ -40,6 +54,10 @@ public function register(Panel $panel): void
Js::make('filament-theme-inspector-scripts', __DIR__ . '/../resources/dist/filament-theme-inspector.js'),
Css::make('filament-theme-inspector-styles', __DIR__ . '/../resources/dist/filament-theme-inspector.css'),
]);
+
+ FilamentAsset::registerScriptData([
+ 'toggle' => $this->isToggle(),
+ ]);
}
}