diff --git a/.github/workflows/linter.yml b/.github/workflows/linter.yml index a548779..817a9bd 100644 --- a/.github/workflows/linter.yml +++ b/.github/workflows/linter.yml @@ -22,7 +22,10 @@ jobs: - name: Checkout code uses: actions/checkout@v4 with: - ref: ${{ github.head_ref }} + # Checkout the actual branch, not a specific commit + ref: ${{ github.head_ref || github.ref_name }} + # Fetch the full history to avoid shallow clone issues + fetch-depth: 0 - name: Run Laravel Pint uses: aglipanci/laravel-pint-action@latest diff --git a/.github/workflows/test-runner.yml b/.github/workflows/test-runner.yml index 4a1f073..b81008c 100644 --- a/.github/workflows/test-runner.yml +++ b/.github/workflows/test-runner.yml @@ -41,7 +41,7 @@ jobs: - name: Checkout code uses: actions/checkout@v4 with: - ref: ${{ github.head_ref }} + ref: ${{ github.event_name == 'pull_request' && github.event.pull_request.head.sha || github.sha }} - name: Validate composer.json and composer.lock run: composer validate --strict diff --git a/composer.json b/composer.json index b963a9c..37984ab 100644 --- a/composer.json +++ b/composer.json @@ -48,7 +48,6 @@ "spatie/laravel-package-tools": "^1.19" }, "require-dev": { - "eclipsephp/catalogue-plugin": "dev-main", "laravel/pint": "^1.21", "orchestra/testbench": "^10.1", "pestphp/pest": "^3.7", diff --git a/resources/dist/slider-column.css b/resources/dist/slider-column.css new file mode 100644 index 0000000..65c389a --- /dev/null +++ b/resources/dist/slider-column.css @@ -0,0 +1,124 @@ +[x-cloak] { display: none !important; } + +.image-preview-lightbox-overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 9999 !important; + background-color: rgba(0, 0, 0, 0.7); + backdrop-filter: blur(10px); + display: flex; + align-items: center; + justify-content: center; + padding: 80px; +} + +.image-preview-lightbox-container { + position: relative; + max-width: 90vw; + max-height: 90vh; + display: flex; + align-items: center; + justify-content: center; + z-index: 9999 !important; +} + +.image-preview-lightbox-close { + position: absolute; + top: -50px; + right: 0; + color: white; + background: none; + border: none; + cursor: pointer; + padding: 10px; + opacity: 0.8; + transition: opacity 0.2s; +} + +.image-preview-lightbox-close:hover { + opacity: 1; +} + +.image-preview-lightbox-close svg { + width: 32px; + height: 32px; +} + +.image-preview-lightbox-image-wrapper { + position: relative; + display: flex; + align-items: center; + justify-content: center; + background-color: #1f2937; + border-radius: 8px; + overflow: hidden; + max-width: 90vw; + max-height: 85vh; +} + +.image-preview-lightbox-image { + max-width: 100%; + max-height: 85vh; + width: auto; + height: auto; + object-fit: contain; + display: block; +} + +.image-preview-lightbox-nav { + position: absolute; + top: 50%; + transform: translateY(-50%); + background-color: rgba(255, 255, 255, 0.1); + color: white; + border: none; + border-radius: 50%; + width: 48px; + height: 48px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: background-color 0.2s; +} + +.image-preview-lightbox-nav:hover { + background-color: rgba(255, 255, 255, 0.2); +} + +.image-preview-lightbox-nav.prev { + left: -60px; +} + +.image-preview-lightbox-nav.next { + right: -60px; +} + +.image-preview-lightbox-nav svg { + width: 24px; + height: 24px; +} + +.image-preview-lightbox-info { + position: absolute; + bottom: 0; + left: 0; + right: 0; + background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent); + padding: 24px; + color: white; + border-radius: 0 0 8px 8px; +} + +.image-preview-lightbox-title { + font-size: 18px; + font-weight: 600; + margin: 0 0 8px 0; +} + +.image-preview-lightbox-link { + margin: 8px 0 0 0; +} \ No newline at end of file diff --git a/resources/dist/slider-column.js b/resources/dist/slider-column.js new file mode 100644 index 0000000..0730a47 --- /dev/null +++ b/resources/dist/slider-column.js @@ -0,0 +1,155 @@ +window.imagePreviewLightbox = function() { + return { + isOpen: false, + currentIndex: 0, + images: [], + currentImage: { + url: '', + title: '', + link: '', + filename: '' + }, + + getDisplayName() { + return this.currentImage.title || this.currentImage.filename || ''; + }, + + init() { + const self = this; + document.addEventListener('click', function(e) { + if (e.target.classList.contains('image-preview-trigger')) { + e.preventDefault(); + e.stopPropagation(); + self.openFromTable(e.target); + } + }, true); + document.addEventListener('keydown', (e) => { + if (this.isOpen) { + if (e.key === 'ArrowLeft') { + e.preventDefault(); + this.previous(); + } else if (e.key === 'ArrowRight') { + e.preventDefault(); + this.next(); + } + } + }); + }, + + openFromTable(imageElement) { + const allRows = document.querySelectorAll('tbody tr'); + this.images = []; + let clickedIndex = 0; + + const imageGrid = []; + let maxColumns = 0; + + allRows.forEach((row) => { + const rowImages = row.querySelectorAll('.fi-ta-image .image-preview-trigger'); + const rowImageArray = Array.from(rowImages); + imageGrid.push(rowImageArray); + maxColumns = Math.max(maxColumns, rowImageArray.length); + }); + + let clickedRowIndex = -1; + let clickedColIndex = -1; + + imageGrid.forEach((rowImages, rowIndex) => { + rowImages.forEach((img, colIndex) => { + if (img === imageElement) { + clickedRowIndex = rowIndex; + clickedColIndex = colIndex; + } + }); + }); + + imageGrid.forEach((rowImages, rowIndex) => { + rowImages.forEach((img, colIndex) => { + this.addImageToCollection(img, imageElement, () => { + if (rowIndex === clickedRowIndex && colIndex === clickedColIndex) { + clickedIndex = this.images.length - 1; + } + }); + }); + }); + + if (this.images.length > 0) { + this.currentIndex = clickedIndex; + this.updateCurrentImage(); + this.open(); + } + }, + + addImageToCollection(img, imageElement, onMatch) { + const configData = img.dataset.lightboxConfig; + + if (configData) { + try { + const lightboxData = JSON.parse(configData); + const matchingImageData = lightboxData.find(data => + img.src.includes(data.url) || data.url.includes(img.src) || data.url === img.src + ); + + if (matchingImageData) { + this.images.push({ + url: img.src, + title: matchingImageData.title || '', + link: matchingImageData.link || '', + filename: img.alt || '' + }); + + if (img === imageElement) { + onMatch(); + } + return; + } + } catch (e) { + console.error('Error parsing lightbox config:', e); + } + } + + const imageData = { + url: img.src, + title: '', + link: '', + filename: img.alt || '' + }; + + this.images.push(imageData); + + if (img === imageElement) { + onMatch(); + } + }, + + open() { + this.isOpen = true; + document.body.style.overflow = 'hidden'; + }, + + close() { + this.isOpen = false; + document.body.style.overflow = ''; + }, + + next() { + if (this.images.length > 0) { + this.currentIndex = (this.currentIndex + 1) % this.images.length; + this.updateCurrentImage(); + } + }, + + previous() { + if (this.images.length > 0) { + this.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length; + this.updateCurrentImage(); + } + }, + + updateCurrentImage() { + if (this.images[this.currentIndex]) { + this.currentImage = this.images[this.currentIndex]; + } + } + }; +}; \ No newline at end of file diff --git a/resources/views/components/placeholder-image.blade.php b/resources/views/components/placeholder-image.blade.php new file mode 100644 index 0000000..e0a14ce --- /dev/null +++ b/resources/views/components/placeholder-image.blade.php @@ -0,0 +1,36 @@ +@php + $centerX = $width / 2; + $centerY = $height / 2; + $area = $width * $height; + $averageDimension = sqrt($area); + $fontSize = max(20, min(64, $averageDimension / 2.5)); + $aspectRatio = max($width, $height) / min($width, $height); + if ($aspectRatio > 3) { + $fontSize *= 0.9; + } + + $fontSize = round($fontSize, 1); +@endphp + + + @if ($text) + + {{ $text }} + + @else + @php + $scale = min($width, $height) / 120; + $iconWidth = 120 * $scale; + $iconHeight = 120 * $scale; + $offsetX = ($width - $iconWidth) / 2; + $offsetY = ($height - $iconHeight) / 2; + @endphp + + + + @endif + diff --git a/resources/views/components/slider-column-lightbox.blade.php b/resources/views/components/slider-column-lightbox.blade.php new file mode 100644 index 0000000..acbb51d --- /dev/null +++ b/resources/views/components/slider-column-lightbox.blade.php @@ -0,0 +1,45 @@ +
+
+ +
+ + +
+ +
+

+

+ + + +

+
+
+ +
+
+
\ No newline at end of file diff --git a/src/CommonServiceProvider.php b/src/CommonServiceProvider.php index ff470d4..d55c39f 100644 --- a/src/CommonServiceProvider.php +++ b/src/CommonServiceProvider.php @@ -3,6 +3,10 @@ namespace Eclipse\Common; use Eclipse\Common\Foundation\Providers\PackageServiceProvider; +use Filament\Support\Assets\Css; +use Filament\Support\Assets\Js; +use Filament\Support\Facades\FilamentAsset; +use Filament\Support\Facades\FilamentView; use Spatie\LaravelPackageTools\Package as SpatiePackage; class CommonServiceProvider extends PackageServiceProvider @@ -12,7 +16,9 @@ class CommonServiceProvider extends PackageServiceProvider public function configurePackage(SpatiePackage|Package $package): void { $package->name(static::$name) - ->hasTranslations(); + ->hasViews() + ->hasTranslations() + ->hasAssets(); } public function register(): self @@ -27,4 +33,17 @@ public function register(): self return $this; } + + public function bootingPackage(): void + { + FilamentAsset::register([ + Css::make('slider-column', asset('vendor/eclipse-common/slider-column.css')), + Js::make('slider-column', asset('vendor/eclipse-common/slider-column.js')), + ], 'eclipse-common'); + + FilamentView::registerRenderHook( + 'panels::body.end', + fn (): string => view('eclipse-common::components.slider-column-lightbox')->render() + ); + } } diff --git a/src/Filament/Tables/Columns/ImageColumn.php b/src/Filament/Tables/Columns/ImageColumn.php new file mode 100644 index 0000000..f145434 --- /dev/null +++ b/src/Filament/Tables/Columns/ImageColumn.php @@ -0,0 +1,126 @@ +previewEnabled = $condition; + + if ($this->previewEnabled) { + $this->extraImgAttributes(function (Model $record, $column): array { + $imageUrls = $this->getImageUrls($column); + + if (empty($imageUrls)) { + return []; + } + + $lightboxData = []; + foreach ($imageUrls as $imageUrl) { + $lightboxData[] = [ + 'url' => $imageUrl, + 'title' => $this->getTitle($record), + 'link' => $this->getLink($record), + 'filename' => basename($imageUrl), + ]; + } + + return [ + 'class' => 'cursor-pointer image-preview-trigger hover:opacity-75 transition-opacity', + 'onclick' => 'event.stopPropagation(); return false;', + 'data-lightbox-config' => json_encode($lightboxData), + ]; + }); + } + + return $this; + } + + protected function setUp(): void + { + parent::setUp(); + } + + public function title(string|Closure $title): static + { + $this->titleCallback = $title; + + return $this; + } + + public function link(string|Closure $link): static + { + $this->linkCallback = $link; + + return $this; + } + + protected function getImageUrls($column): array + { + $imageUrls = $column->getState(); + + if (! is_array($imageUrls)) { + $imageUrls = $imageUrls ? [$imageUrls] : []; + } + + return array_filter($imageUrls, function ($url) { + if (! filled($url)) { + return false; + } + + return ! $this->isPlaceholderImage($url); + }); + } + + protected function isPlaceholderImage(string $url): bool + { + $placeholderPatterns = [ + 'data:image/svg+xml;base64,', + ]; + + foreach ($placeholderPatterns as $pattern) { + if (str_contains(strtolower($url), strtolower($pattern))) { + return true; + } + } + + return false; + } + + protected function getTitle(Model $record): string + { + if ($this->titleCallback) { + return $this->evaluate($this->titleCallback, ['record' => $record]); + } + + foreach (['name', 'title'] as $attr) { + if (isset($record->{$attr})) { + $value = $record->{$attr}; + + return is_array($value) ? ($value[app()->getLocale()] ?? reset($value)) : $value; + } + } + + return class_basename($record).' #'.$record->getKey(); + } + + protected function getLink(Model $record): ?string + { + if ($this->linkCallback) { + return $this->evaluate($this->linkCallback, ['record' => $record]); + } + + return null; + } +} diff --git a/src/Helpers/MediaHelper.php b/src/Helpers/MediaHelper.php new file mode 100644 index 0000000..48115c1 --- /dev/null +++ b/src/Helpers/MediaHelper.php @@ -0,0 +1,17 @@ + $text, + 'width' => $width, + 'height' => $height, + ])->render(); + + return 'data:image/svg+xml;base64,'.base64_encode($svg); + } +} diff --git a/tests/Unit/Foundation/Models/Scopes/ActiveScopeTest.php b/tests/Unit/Foundation/Models/Scopes/ActiveScopeTest.php index dacceca..481499b 100644 --- a/tests/Unit/Foundation/Models/Scopes/ActiveScopeTest.php +++ b/tests/Unit/Foundation/Models/Scopes/ActiveScopeTest.php @@ -4,6 +4,9 @@ use Eclipse\Common\Foundation\Models\Scopes\ActiveScope; test('active scope works', function () { + if (! class_exists('Eclipse\Catalogue\Models\Group')) { + $this->markTestSkipped('Catalogue plugin not available'); + } // Create an inactive product group $group = Group::factory()->inactive()->create();