Skip to content

Commit 21ac543

Browse files
thapacodes4uthapacodes4u
committed
fix: adding missing files
1 parent e90bb9e commit 21ac543

8 files changed

Lines changed: 391 additions & 52 deletions

File tree

‎resources/dist/media-gallery.css‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
[x-cloak] {
2+
display: none !important;
3+
}
4+
5+
.eclipse-media-gallery [draggable="true"] {
6+
cursor: move;
7+
}
8+
9+
.eclipse-media-gallery [draggable="true"]:active {
10+
cursor: grabbing;
11+
}
12+
13+
.eclipse-image-lightbox-overlay {
14+
position: fixed;
15+
top: 0;
16+
left: 0;
17+
right: 0;
18+
bottom: 0;
19+
z-index: 9999!important;
20+
background-color: rgba(0, 0, 0, 0.95);
21+
display: flex;
22+
align-items: center;
23+
justify-content: center;
24+
padding: 20px;
25+
}
26+
27+
.eclipse-image-lightbox-container {
28+
position: relative;
29+
max-width: 90vw;
30+
max-height: 90vh;
31+
display: flex;
32+
align-items: center;
33+
justify-content: center;
34+
z-index: 9999999999 !important;
35+
}
36+
37+
.eclipse-image-lightbox-close {
38+
position: absolute;
39+
top: -50px;
40+
right: 0;
41+
color: white;
42+
background: none;
43+
border: none;
44+
cursor: pointer;
45+
padding: 10px;
46+
opacity: 0.8;
47+
transition: opacity 0.2s;
48+
}
49+
50+
.eclipse-image-lightbox-close:hover {
51+
opacity: 1;
52+
}
53+
54+
.eclipse-image-lightbox-close svg {
55+
width: 32px;
56+
height: 32px;
57+
}
58+
59+
.eclipse-image-lightbox-image-wrapper {
60+
position: relative;
61+
display: flex;
62+
align-items: center;
63+
justify-content: center;
64+
background-color: #1f2937;
65+
border-radius: 8px;
66+
overflow: hidden;
67+
max-width: 90vw;
68+
max-height: 85vh;
69+
}
70+
71+
.eclipse-image-lightbox-image {
72+
max-width: 100%;
73+
max-height: 85vh;
74+
width: auto;
75+
height: auto;
76+
object-fit: contain;
77+
display: block;
78+
}
79+
80+
.eclipse-image-lightbox-nav {
81+
position: absolute;
82+
top: 50%;
83+
transform: translateY(-50%);
84+
background-color: rgba(255, 255, 255, 0.1);
85+
color: white;
86+
border: none;
87+
border-radius: 50%;
88+
width: 48px;
89+
height: 48px;
90+
display: flex;
91+
align-items: center;
92+
justify-content: center;
93+
cursor: pointer;
94+
transition: background-color 0.2s;
95+
}
96+
97+
.eclipse-image-lightbox-nav:hover {
98+
background-color: rgba(255, 255, 255, 0.2);
99+
}
100+
101+
.eclipse-image-lightbox-nav.prev {
102+
left: -60px;
103+
}
104+
105+
.eclipse-image-lightbox-nav.next {
106+
right: -60px;
107+
}
108+
109+
.eclipse-image-lightbox-nav svg {
110+
width: 24px;
111+
height: 24px;
112+
}
113+
114+
.eclipse-image-lightbox-info {
115+
position: absolute;
116+
bottom: 0;
117+
left: 0;
118+
right: 0;
119+
background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
120+
padding: 24px;
121+
color: white;
122+
border-radius: 0 0 8px 8px;
123+
}
124+
125+
.eclipse-image-lightbox-title {
126+
font-size: 18px;
127+
font-weight: 600;
128+
margin: 0 0 8px 0;
129+
}
130+
131+
.eclipse-image-lightbox-description {
132+
font-size: 14px;
133+
opacity: 0.9;
134+
margin: 0;
135+
line-height: 1.5;
136+
}
137+
138+
.eclipse-image-card-container {
139+
background-color: #f3f4f6;
140+
cursor: pointer;
141+
display: flex;
142+
align-items: center;
143+
justify-content: center;
144+
overflow: hidden;
145+
}
146+
147+
.eclipse-image-card-img {
148+
max-width: 100%;
149+
max-height: 100%;
150+
width: auto;
151+
height: auto;
152+
object-fit: contain;
153+
}

‎resources/dist/media-gallery.js‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
window.mediaGallery = function({ state, getLocale }) {
2+
return {
3+
state: state || [],
4+
getLocale: getLocale,
5+
6+
init() {
7+
if (!Array.isArray(this.state)) {
8+
this.state = [];
9+
}
10+
11+
this.lightboxOpen = false;
12+
this.lightboxIndex = 0;
13+
this.lightboxImage = '';
14+
this.lightboxAlt = '';
15+
this.lightboxName = '';
16+
this.lightboxDescription = '';
17+
18+
document.addEventListener('keydown', (e) => {
19+
if (this.lightboxOpen) {
20+
if (e.key === 'ArrowLeft') {
21+
e.preventDefault();
22+
this.previousImage();
23+
} else if (e.key === 'ArrowRight') {
24+
e.preventDefault();
25+
this.nextImage();
26+
}
27+
}
28+
});
29+
},
30+
31+
getLocalizedName(image) {
32+
const currentLocale = this.getLocale();
33+
if (!image.name || typeof image.name !== 'object') {
34+
return image.file_name || '';
35+
}
36+
return image.name[currentLocale] || image.name['en'] || image.file_name || '';
37+
},
38+
39+
getLocalizedDescription(image) {
40+
const currentLocale = this.getLocale();
41+
if (!image.description || typeof image.description !== 'object') {
42+
return '';
43+
}
44+
return image.description[currentLocale] || image.description['en'] || '';
45+
},
46+
47+
openImageModal(index) {
48+
this.lightboxIndex = index;
49+
const image = this.state[index];
50+
this.lightboxImage = image.url;
51+
this.lightboxAlt = image.file_name;
52+
this.lightboxName = this.getLocalizedName(image);
53+
this.lightboxDescription = this.getLocalizedDescription(image);
54+
this.lightboxOpen = true;
55+
},
56+
57+
previousImage() {
58+
this.lightboxIndex = (this.lightboxIndex - 1 + this.state.length) % this.state.length;
59+
this.updateLightboxImage();
60+
},
61+
62+
nextImage() {
63+
this.lightboxIndex = (this.lightboxIndex + 1) % this.state.length;
64+
this.updateLightboxImage();
65+
},
66+
67+
updateLightboxImage() {
68+
const image = this.state[this.lightboxIndex];
69+
this.lightboxImage = image.url;
70+
this.lightboxAlt = image.file_name;
71+
this.lightboxName = this.getLocalizedName(image);
72+
this.lightboxDescription = this.getLocalizedDescription(image);
73+
},
74+
75+
handleSetCover(image) {
76+
if (image.is_cover) return;
77+
this.$wire.mountFormComponentAction('setCover', { arguments: { uuid: image.uuid } });
78+
}
79+
};
80+
};

‎resources/views/components/media-lightbox.blade.php‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<div x-show="lightboxOpen"
2+
x-transition:enter="transition ease-out duration-300"
3+
x-transition:enter-start="opacity-0"
4+
x-transition:enter-end="opacity-100"
5+
x-transition:leave="transition ease-in duration-200"
6+
x-transition:leave-start="opacity-100"
7+
x-transition:leave-end="opacity-0"
8+
@click="lightboxOpen = false"
9+
@keydown.escape.window="lightboxOpen = false"
10+
class="eclipse-image-lightbox-overlay"
11+
x-cloak>
12+
13+
<div class="eclipse-image-lightbox-container" @click.stop>
14+
<button type="button" @click.stop="lightboxOpen = false" class="eclipse-image-lightbox-close">
15+
<x-filament::icon icon="heroicon-m-x-mark" class="h-6 w-6" />
16+
</button>
17+
18+
<div class="eclipse-image-lightbox-image-wrapper">
19+
<img :src="lightboxImage"
20+
:alt="lightboxAlt"
21+
class="eclipse-image-lightbox-image">
22+
<div class="eclipse-image-lightbox-info" x-show="lightboxName || lightboxDescription">
23+
<p class="eclipse-image-lightbox-title" x-text="lightboxName" x-show="lightboxName"></p>
24+
<p class="eclipse-image-lightbox-description" x-text="lightboxDescription" x-show="lightboxDescription"></p>
25+
</div>
26+
</div>
27+
<template x-if="state && state.length > 1">
28+
<div>
29+
<button type="button" @click.stop.prevent="previousImage()" class="eclipse-image-lightbox-nav prev">
30+
<x-filament::icon icon="heroicon-m-chevron-left" class="h-6 w-6" />
31+
</button>
32+
33+
<button type="button" @click.stop.prevent="nextImage()" class="eclipse-image-lightbox-nav next">
34+
<x-filament::icon icon="heroicon-m-chevron-right" class="h-6 w-6" />
35+
</button>
36+
</div>
37+
</template>
38+
</div>
39+
</div>

‎resources/views/components/media-preview.blade.php‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<div class="flex flex-col items-center space-y-2">
2+
<img
3+
src="{{ $url }}"
4+
alt="{{ $filename }}"
5+
class="max-w-full max-h-48 object-contain rounded-lg shadow-sm"
6+
/>
7+
<p class="text-xs text-gray-500 dark:text-gray-400">{{ $filename }}</p>
8+
</div>

‎src/CommonServiceProvider.php‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@
33
namespace Eclipse\Common;
44

55
use Eclipse\Common\Foundation\Providers\PackageServiceProvider;
6+
use Filament\Support\Assets\Css;
7+
use Filament\Support\Assets\Js;
8+
use Filament\Support\Facades\FilamentAsset;
9+
use Filament\Support\Facades\FilamentView;
610
use Spatie\LaravelPackageTools\Package as SpatiePackage;
711

812
class CommonServiceProvider extends PackageServiceProvider
@@ -12,7 +16,9 @@ class CommonServiceProvider extends PackageServiceProvider
1216
public function configurePackage(SpatiePackage|Package $package): void
1317
{
1418
$package->name(static::$name)
15-
->hasTranslations();
19+
->hasTranslations()
20+
->hasViews()
21+
->hasAssets();
1622
}
1723

1824
public function register(): self
@@ -27,4 +33,17 @@ public function register(): self
2733

2834
return $this;
2935
}
36+
37+
public function bootingPackage(): void
38+
{
39+
FilamentAsset::register([
40+
Css::make('media-gallery', asset('vendor/eclipse-common/media-gallery.css')),
41+
Js::make('media-gallery', asset('vendor/eclipse-common/media-gallery.js')),
42+
], 'eclipse-common');
43+
44+
FilamentView::registerRenderHook(
45+
'panels::body.end',
46+
fn (): string => view('eclipse-common::components.media-lightbox')->render()
47+
);
48+
}
3049
}

‎src/Filament/Forms/Components/Concerns/CanManageMediaCollections.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
trait CanManageMediaCollections
88
{
9-
protected string|Closure $collection = 'default';
9+
protected string|Closure $collection = 'images';
1010

1111
public function collection(string|Closure $collection): static
1212
{
@@ -19,4 +19,4 @@ public function getCollection(): string
1919
{
2020
return $this->evaluate($this->collection);
2121
}
22-
}
22+
}

0 commit comments

Comments
 (0)