Skip to content

Commit

Permalink
refactor
Browse files Browse the repository at this point in the history
  • Loading branch information
@aymanalhattami
aymanalhattami committed Apr 21, 2024
1 parent 20d23d4 commit af93466
Show file tree
Hide file tree
Showing 3 changed files with 84 additions and 72 deletions.
16 changes: 13 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand All @@ -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
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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
Expand All @@ -348,6 +353,11 @@ public static function getContextMenuActions(): array
}
```

### Full example
```php

```

## Testing

```bash
Expand Down
108 changes: 55 additions & 53 deletions resources/views/components/context-menu.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,63 +1,65 @@
@if(method_exists(static::class, 'getContextMenuActions') and count(static::getContextMenuActions()) and static::isContextMenuEnabled())
<div id="contextMenu"
class="flex z-50 min-w-48 max-w-2xl text-neutral-800 rounded-md ring-1 ring-gray-950/5 transition bg-white text-sm fixed p-2 shadow-md dark:text-gray-200 dark:bg-gray-900 dark:ring-white/10"
style="display: none;">
@foreach(static::getCachedContextMenuActions() as $action)
@if($action instanceof \AymanAlhattami\FilamentContextMenu\ContextMenuDivider)
<x-filament-context-menu::divider />
@endif

@if($action instanceof \Filament\Actions\Action and !$action instanceof \AymanAlhattami\FilamentContextMenu\ContextMenuDivider)
@if($action->isVisible())
<div @class([
@if(method_exists(static::class, 'getContextMenuActions'))
@if(count(static::getContextMenuActions()) and static::isContextMenuEnabled())
<div id="contextMenu"
class="flex z-50 min-w-48 max-w-2xl text-neutral-800 rounded-md ring-1 ring-gray-950/5 transition bg-white text-sm fixed p-2 shadow-md dark:text-gray-200 dark:bg-gray-900 dark:ring-white/10"
style="display: none;">
@foreach(static::getCachedContextMenuActions() as $action)
@if($action instanceof \AymanAlhattami\FilamentContextMenu\ContextMenuDivider)
<x-filament-context-menu::divider />
@endif

@if($action instanceof \Filament\Actions\Action and !$action instanceof \AymanAlhattami\FilamentContextMenu\ContextMenuDivider)
@if($action->isVisible())
<div @class([
'context-menu-filament-action flex gap-x-4 select-none group justify-between rounded px-2 py-1.5 hover:bg-neutral-100 outline-none pl-8 data-[disabled]:opacity-50 data-[disabled]:pointer-events-none dark:hover:bg-white/5',
'mt-1' => !$loop->first
])>
{{ $action }}
</div>
{{ $action }}
</div>
@endif
@endif
@endif
@endforeach
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
var contextMenu = document.getElementById('contextMenu');
var contextMenuTrigger = document.getElementsByClassName('fi-main')[0];
contextMenuTrigger.addEventListener('contextmenu', function (event) {
event.preventDefault();
contextMenu.style.display = 'block'; // Show the context menu
contextMenu.style.opacity = '0';
setTimeout(function () {
calculateContextMenuPosition(event);
contextMenu.style.opacity = '1';
}, 0); // Similar to $nextTick
});
@endforeach
</div>

document.addEventListener('click', function (event) {
if (!contextMenu.contains(event.target)) {
contextMenu.style.display = 'none'; // Hide the context menu
}
});
<script>
document.addEventListener('DOMContentLoaded', function () {
var contextMenu = document.getElementById('contextMenu');
var contextMenuTrigger = document.getElementsByClassName('fi-main')[0];
window.addEventListener('resize', function (event) {
contextMenu.style.display = 'none';
});
contextMenuTrigger.addEventListener('contextmenu', function (event) {
event.preventDefault();
contextMenu.style.display = 'block'; // Show the context menu
contextMenu.style.opacity = '0';
function calculateContextMenuPosition(clickEvent) {
var menuHeight = contextMenu.offsetHeight;
var menuWidth = contextMenu.offsetWidth;
setTimeout(function () {
calculateContextMenuPosition(event);
contextMenu.style.opacity = '1';
}, 0); // Similar to $nextTick
});
var top = window.innerHeight < clickEvent.clientY + menuHeight ?
(window.innerHeight - menuHeight) : clickEvent.clientY;
var left = window.innerWidth < clickEvent.clientX + menuWidth ?
(clickEvent.clientX - menuWidth) : clickEvent.clientX;
document.addEventListener('click', function (event) {
if (!contextMenu.contains(event.target)) {
contextMenu.style.display = 'none'; // Hide the context menu
}
});
contextMenu.style.top = top + 'px';
contextMenu.style.left = left + 'px';
}
});
</script>
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';
}
});
</script>
@endif
@endif
32 changes: 16 additions & 16 deletions src/CopyAction.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
// }
// );
// '),
// ])
;
}
}

0 comments on commit af93466

Please sign in to comment.