Skip to content

Commit

Permalink
Fix: restict usage to only panels using plugin class
Browse files Browse the repository at this point in the history
  • Loading branch information
awcodes committed Dec 16, 2023
1 parent 8d661f2 commit d67f6b7
Show file tree
Hide file tree
Showing 3 changed files with 37 additions and 32 deletions.
2 changes: 1 addition & 1 deletion resources/dist/filament-sticky-header.js

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

64 changes: 33 additions & 31 deletions resources/js/plugin.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,46 +3,48 @@ const filamentMainContent = document.querySelector(".fi-main");
const filamentHeader = document.querySelector(".fi-header");

if (filamentTopbar && filamentMainContent && filamentHeader) {
window.addEventListener("load", function () {
const trigger = document.createElement("div");
const theme = filamentData?.stickyHeaderTheme || 'default';
trigger.classList.add("filament-sticky-trigger");
filamentMainContent.prepend(trigger);
if (filamentData?.stickyHeaderActive) {
window.addEventListener("load", function () {
const trigger = document.createElement("div");
const theme = filamentData?.stickyHeaderTheme || 'default';
trigger.classList.add("filament-sticky-trigger");
filamentMainContent.prepend(trigger);

filamentMainContent.classList.add(`sticky-theme-${theme}`);
filamentMainContent.classList.add(`sticky-theme-${theme}`);

let offsetHeight = filamentTopbar.offsetHeight;
let offsetHeight = filamentTopbar.offsetHeight;

let intersectingTime = null;
let intersectingTime = null;

const observer = new IntersectionObserver(
([e]) => {
const observer = new IntersectionObserver(
([e]) => {

if (e.isIntersecting) {
if (intersectingTime && (e.time - intersectingTime) < 1000) {
if (e.isIntersecting) {
if (intersectingTime && (e.time - intersectingTime) < 1000) {
return;
}
intersectingTime = e.time;
filamentMainContent.classList.remove("is-sticky");
return;
}
intersectingTime = e.time;
filamentMainContent.classList.remove("is-sticky");
return;
}

let offsetModifier = 0;
let offsetModifier = 0;

if (theme.includes('floating')) {
offsetModifier += 8;
}

if (theme.includes('floating')) {
offsetModifier += 8;
filamentHeader.style.top = (offsetHeight + offsetModifier) + "px";
filamentHeader.setAttribute("wire:ignore.self", "true");
filamentMainContent.classList.add("is-sticky");
},
{
rootMargin: `-${offsetHeight}px`,
threshold: [0],
}
);

filamentHeader.style.top = (offsetHeight + offsetModifier) + "px";
filamentHeader.setAttribute("wire:ignore.self", "true");
filamentMainContent.classList.add("is-sticky");
},
{
rootMargin: `-${offsetHeight}px`,
threshold: [0],
}
);

observer.observe(trigger);
});
observer.observe(trigger);
});
}
}
3 changes: 3 additions & 0 deletions src/StickyHeaderPlugin.php
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@
use Closure;
use Filament\Contracts\Plugin;
use Filament\Panel;
use Filament\Support\Assets\Css;
use Filament\Support\Assets\Js;
use Filament\Support\Concerns\EvaluatesClosures;
use Filament\Support\Facades\FilamentAsset;

Expand All @@ -20,6 +22,7 @@ public function boot(Panel $panel): void
{
FilamentAsset::registerScriptData([
'stickyHeaderTheme' => $this->getTheme(),
'stickyHeaderActive' => true,
], 'awcodes-sticky-header');
}

Expand Down

0 comments on commit d67f6b7

Please sign in to comment.