Skip to content

Commit 82dc8b1

Browse files
author
ankitcodes4u
committed
feat: lightbox should handle both horizantal & verticall image in table & adding another reusable component here
1 parent 51824e8 commit 82dc8b1

4 files changed

Lines changed: 131 additions & 45 deletions

File tree

‎resources/views/components/image-preview-modal.blade.php‎

Lines changed: 70 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -211,57 +211,40 @@ function imagePreviewLightbox() {
211211
},
212212
213213
openFromTable(imageElement) {
214-
const rows = document.querySelectorAll('tbody tr');
214+
const allRows = document.querySelectorAll('tbody tr');
215215
this.images = [];
216216
let clickedIndex = 0;
217-
218-
rows.forEach((row) => {
219-
const imgContainer = row.querySelector('.fi-ta-image');
220-
if (imgContainer) {
221-
const imgs = imgContainer.querySelectorAll('.image-preview-trigger');
222-
223-
imgs.forEach((img) => {
224-
const configData = img.dataset.lightboxConfig;
225-
226-
if (configData) {
227-
try {
228-
const lightboxData = JSON.parse(configData);
229-
const matchingImageData = lightboxData.find(data =>
230-
img.src.includes(data.url) || data.url.includes(img.src) || data.url === img.src
231-
);
232-
233-
if (matchingImageData) {
234-
this.images.push({
235-
url: img.src,
236-
title: matchingImageData.title || '',
237-
link: matchingImageData.link || '',
238-
filename: img.alt || ''
239-
});
240-
241-
if (img === imageElement) {
242-
clickedIndex = this.images.length - 1;
243-
}
244-
return;
245-
}
246-
} catch (e) {
247-
console.error('Error parsing lightbox config:', e);
248-
}
249-
}
250217
251-
const imageData = {
252-
url: img.src,
253-
title: '',
254-
link: '',
255-
filename: img.alt || ''
256-
};
257-
258-
this.images.push(imageData);
259-
260-
if (img === imageElement) {
218+
const imageGrid = [];
219+
let maxColumns = 0;
220+
221+
allRows.forEach((row) => {
222+
const rowImages = row.querySelectorAll('.fi-ta-image .image-preview-trigger');
223+
const rowImageArray = Array.from(rowImages);
224+
imageGrid.push(rowImageArray);
225+
maxColumns = Math.max(maxColumns, rowImageArray.length);
226+
});
227+
228+
let clickedRowIndex = -1;
229+
let clickedColIndex = -1;
230+
231+
imageGrid.forEach((rowImages, rowIndex) => {
232+
rowImages.forEach((img, colIndex) => {
233+
if (img === imageElement) {
234+
clickedRowIndex = rowIndex;
235+
clickedColIndex = colIndex;
236+
}
237+
});
238+
});
239+
240+
imageGrid.forEach((rowImages, rowIndex) => {
241+
rowImages.forEach((img, colIndex) => {
242+
this.addImageToCollection(img, imageElement, () => {
243+
if (rowIndex === clickedRowIndex && colIndex === clickedColIndex) {
261244
clickedIndex = this.images.length - 1;
262245
}
263246
});
264-
}
247+
});
265248
});
266249
267250
if (this.images.length > 0) {
@@ -271,6 +254,48 @@ function imagePreviewLightbox() {
271254
}
272255
},
273256
257+
addImageToCollection(img, imageElement, onMatch) {
258+
const configData = img.dataset.lightboxConfig;
259+
260+
if (configData) {
261+
try {
262+
const lightboxData = JSON.parse(configData);
263+
const matchingImageData = lightboxData.find(data =>
264+
img.src.includes(data.url) || data.url.includes(img.src) || data.url === img.src
265+
);
266+
267+
if (matchingImageData) {
268+
this.images.push({
269+
url: img.src,
270+
title: matchingImageData.title || '',
271+
link: matchingImageData.link || '',
272+
filename: img.alt || ''
273+
});
274+
275+
if (img === imageElement) {
276+
onMatch();
277+
}
278+
return;
279+
}
280+
} catch (e) {
281+
console.error('Error parsing lightbox config:', e);
282+
}
283+
}
284+
285+
const imageData = {
286+
url: img.src,
287+
title: '',
288+
link: '',
289+
filename: img.alt || ''
290+
};
291+
292+
this.images.push(imageData);
293+
294+
if (img === imageElement) {
295+
onMatch();
296+
}
297+
},
298+
274299
open() {
275300
this.isOpen = true;
276301
document.body.style.overflow = 'hidden';

‎resources/views/components/placeholder-image.blade.php‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
@php
2+
$centerX = $width / 2;
3+
$centerY = $height / 2;
4+
$area = $width * $height;
5+
$averageDimension = sqrt($area);
6+
$fontSize = max(20, min(64, $averageDimension / 2.5));
7+
$aspectRatio = max($width, $height) / min($width, $height);
8+
if ($aspectRatio > 3) {
9+
$fontSize *= 0.9;
10+
}
11+
12+
$fontSize = round($fontSize, 1);
13+
@endphp
14+
<svg width="{{ $width }}px" height="{{ $height }}px" viewBox="0 0 {{ $width }} {{ $height }}"
15+
fill="none" xmlns="http://www.w3.org/2000/svg">
16+
<rect width="{{ $width }}" height="{{ $height }}" fill="#EFF1F3" />
17+
@if ($text)
18+
<text x="{{ $centerX }}" y="{{ $centerY }}" text-anchor="middle" dominant-baseline="central"
19+
fill="#687787" font-family="Arial, sans-serif" font-size="{{ $fontSize }}" font-weight="400">
20+
{{ $text }}
21+
</text>
22+
@else
23+
@php
24+
$scale = min($width, $height) / 120;
25+
$iconWidth = 120 * $scale;
26+
$iconHeight = 120 * $scale;
27+
$offsetX = ($width - $iconWidth) / 2;
28+
$offsetY = ($height - $iconHeight) / 2;
29+
@endphp
30+
<g transform="translate({{ $offsetX }}, {{ $offsetY }}) scale({{ $scale }})">
31+
<path fill-rule="evenodd" clip-rule="evenodd"
32+
d="M33.2503 38.4816C33.2603 37.0472 34.4199 35.8864 35.8543 35.875H83.1463C84.5848 35.875 85.7503 37.0431 85.7503 38.4816V80.5184C85.7403 81.9528 84.5807 83.1136 83.1463 83.125H35.8543C34.4158 83.1236 33.2503 81.957 33.2503 80.5184V38.4816ZM80.5006 41.1251H38.5006V77.8751L62.8921 53.4783C63.9172 52.4536 65.5788 52.4536 66.6039 53.4783L80.5006 67.4013V41.1251ZM43.75 51.6249C43.75 54.5244 46.1005 56.8749 49 56.8749C51.8995 56.8749 54.25 54.5244 54.25 51.6249C54.25 48.7254 51.8995 46.3749 49 46.3749C46.1005 46.3749 43.75 48.7254 43.75 51.6249Z"
33+
fill="#687787" />
34+
</g>
35+
@endif
36+
</svg>

‎src/CommonServiceProvider.php‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,14 @@ function (?callable $config = null) {
4343
$imageUrls = $imageUrls ? [$imageUrls] : [];
4444
}
4545

46+
$imageUrls = array_filter($imageUrls, function ($url): bool {
47+
return ! str_starts_with($url, 'data:image/svg+xml;base64,');
48+
});
49+
50+
if (empty($imageUrls)) {
51+
return [];
52+
}
53+
4654
$lightboxData = [];
4755
foreach ($imageUrls as $index => $imageUrl) {
4856
try {

‎src/Foundation/Helpers/MediaHelper.php‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<?php
2+
3+
namespace Eclipse\Common\Foundation\Helpers;
4+
5+
class MediaHelper
6+
{
7+
public static function getPlaceholderImageUrl(?string $text = null, int $width = 120, int $height = 120): string
8+
{
9+
$svg = view('eclipse-common::components.placeholder-image', [
10+
'text' => $text,
11+
'width' => $width,
12+
'height' => $height,
13+
])->render();
14+
15+
return 'data:image/svg+xml;base64,'.base64_encode($svg);
16+
}
17+
}

0 commit comments

Comments
 (0)