diff --git a/README.md b/README.md index 3a537c6..5a98580 100644 --- a/README.md +++ b/README.md @@ -11,6 +11,11 @@ This package is used to add context menu (right click menu) for resource pages a * Support dark and light mode. * Support left-to-right and right-to-left direction. * You can set a divider between menu actions. +* Supports resource pages and custom pages. +* There are a set of useful actions: + * ```AymanAlhattami\FilamentContextMenu\RefreshAction``` to refresh the page. + * ```AymanAlhattami\FilamentContextMenu\GoBackAction``` to go back to previous page. + * ```AymanAlhattami\FilamentContextMenu\GoForward``` to go back to forward page. [Demo project](https://github.com/aymanalhattami/filament-context-menu-project) @@ -23,7 +28,7 @@ composer require aymanalhattami/filament-context-menu ``` ## Usage -1. Add the trait ```AymanAlhattami\FilamentContextMenu\InteractsWithContextMenuActions``` to the page (resource page or custom page) you want to add context menu. +1. Add the trait ```AymanAlhattami\FilamentContextMenu\InteractsWithContextMenuActions``` to the page you want to add context menu. 2. Then, define a ```getContextMenuActions``` method inside the page, the method should return an array of [Filament Actions](https://filamentphp.com/docs/3.x/actions/installation) ```php @@ -52,7 +57,7 @@ class ListUsers extends ListRecords ## More options ### Divider -Use ```AymanAlhattami\FilamentContextMenu\ContextMenuDivider``` to set divider between menu actions +You can use ```AymanAlhattami\FilamentContextMenu\ContextMenuDivider``` to set divider between menu actions ```php use App\Filament\Resources\UserResource\Pages\CreateUser; use App\Filament\Resources\UserResource\Pages\TrashedUsers; @@ -335,7 +340,7 @@ class ListUsers extends ListRecords ``` ### Note -For action to have a nice style, use ```->link()``` method a the action, [link](https://filamentphp.com/docs/3.x/actions/trigger-button#choosing-a-trigger-style) +For action to have a nice style, use ```->link()``` method of the action, [more information](https://filamentphp.com/docs/3.x/actions/trigger-button#choosing-a-trigger-style) ```php public static function getContextMenuActions(): array @@ -348,6 +353,11 @@ public static function getContextMenuActions(): array } ``` +### Full example +```php + +``` + ## Testing ```bash diff --git a/resources/views/components/context-menu.blade.php b/resources/views/components/context-menu.blade.php index 28173aa..1b70cdc 100644 --- a/resources/views/components/context-menu.blade.php +++ b/resources/views/components/context-menu.blade.php @@ -1,63 +1,65 @@ -@if(method_exists(static::class, 'getContextMenuActions') and count(static::getContextMenuActions()) and static::isContextMenuEnabled()) -
- - + window.addEventListener('resize', function (event) { + contextMenu.style.display = 'none'; + }); + + function calculateContextMenuPosition(clickEvent) { + var menuHeight = contextMenu.offsetHeight; + var menuWidth = contextMenu.offsetWidth; + + var top = window.innerHeight < clickEvent.clientY + menuHeight ? + (window.innerHeight - menuHeight) : clickEvent.clientY; + var left = window.innerWidth < clickEvent.clientX + menuWidth ? + (clickEvent.clientX - menuWidth) : clickEvent.clientX; + + contextMenu.style.top = top + 'px'; + contextMenu.style.left = left + 'px'; + } + }); + + @endif @endif diff --git a/src/CopyAction.php b/src/CopyAction.php index 6aa1f61..b7e996d 100644 --- a/src/CopyAction.php +++ b/src/CopyAction.php @@ -19,22 +19,22 @@ protected function setUp(): void $this->label('Copy') ->translateLabel() ->color('gray') - ->url(url()->current()) ->icon('heroicon-o-clipboard-document') - ->link(); - // ->extraAttributes([ - // 'x-data' => '', - // 'x-on:click' => new HtmlString(' - // const filamentContextMenuTextToCopy = window.getSelection().toString(); - // navigator.clipboard.writeText(filamentContextMenuTextToCopy).then( - // () => { - // console.log("Text copied to clipboard"); - // }, - // (err) => { - // console.error("Failed to copy text: ", err); - // } - // ); - // '), - // ]) + ->link() +// ->extraAttributes([ +// 'x-data' => '', +// 'x-on:click' => new HtmlString(' +// const filamentContextMenuTextToCopy = window.getSelection().toString(); +// navigator.clipboard.writeText(filamentContextMenuTextToCopy).then( +// () => { +// console.log("Text copied to clipboard"); +// }, +// (err) => { +// console.error("Failed to copy text: ", err); +// } +// ); +// '), +// ]) + ; } }