Skip to content

Commit fd6acef

Browse files
author
ankitcodes4u
committed
feat: adding SliderColumn & moving assets to seperate file
1 parent 89ae0f5 commit fd6acef

6 files changed

Lines changed: 455 additions & 382 deletions

File tree

‎resources/dist/slider-column.css‎

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

‎resources/dist/slider-column.js‎

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
window.imagePreviewLightbox = function() {
2+
return {
3+
isOpen: false,
4+
currentIndex: 0,
5+
images: [],
6+
currentImage: {
7+
url: '',
8+
title: '',
9+
link: '',
10+
filename: ''
11+
},
12+
13+
getDisplayName() {
14+
return this.currentImage.title || this.currentImage.filename || '';
15+
},
16+
17+
init() {
18+
const self = this;
19+
document.addEventListener('click', function(e) {
20+
if (e.target.classList.contains('image-preview-trigger')) {
21+
e.preventDefault();
22+
e.stopPropagation();
23+
self.openFromTable(e.target);
24+
}
25+
}, true);
26+
document.addEventListener('keydown', (e) => {
27+
if (this.isOpen) {
28+
if (e.key === 'ArrowLeft') {
29+
e.preventDefault();
30+
this.previous();
31+
} else if (e.key === 'ArrowRight') {
32+
e.preventDefault();
33+
this.next();
34+
}
35+
}
36+
});
37+
},
38+
39+
openFromTable(imageElement) {
40+
const allRows = document.querySelectorAll('tbody tr');
41+
this.images = [];
42+
let clickedIndex = 0;
43+
44+
const imageGrid = [];
45+
let maxColumns = 0;
46+
47+
allRows.forEach((row) => {
48+
const rowImages = row.querySelectorAll('.fi-ta-image .image-preview-trigger');
49+
const rowImageArray = Array.from(rowImages);
50+
imageGrid.push(rowImageArray);
51+
maxColumns = Math.max(maxColumns, rowImageArray.length);
52+
});
53+
54+
let clickedRowIndex = -1;
55+
let clickedColIndex = -1;
56+
57+
imageGrid.forEach((rowImages, rowIndex) => {
58+
rowImages.forEach((img, colIndex) => {
59+
if (img === imageElement) {
60+
clickedRowIndex = rowIndex;
61+
clickedColIndex = colIndex;
62+
}
63+
});
64+
});
65+
66+
imageGrid.forEach((rowImages, rowIndex) => {
67+
rowImages.forEach((img, colIndex) => {
68+
this.addImageToCollection(img, imageElement, () => {
69+
if (rowIndex === clickedRowIndex && colIndex === clickedColIndex) {
70+
clickedIndex = this.images.length - 1;
71+
}
72+
});
73+
});
74+
});
75+
76+
if (this.images.length > 0) {
77+
this.currentIndex = clickedIndex;
78+
this.updateCurrentImage();
79+
this.open();
80+
}
81+
},
82+
83+
addImageToCollection(img, imageElement, onMatch) {
84+
const configData = img.dataset.lightboxConfig;
85+
86+
if (configData) {
87+
try {
88+
const lightboxData = JSON.parse(configData);
89+
const matchingImageData = lightboxData.find(data =>
90+
img.src.includes(data.url) || data.url.includes(img.src) || data.url === img.src
91+
);
92+
93+
if (matchingImageData) {
94+
this.images.push({
95+
url: img.src,
96+
title: matchingImageData.title || '',
97+
link: matchingImageData.link || '',
98+
filename: img.alt || ''
99+
});
100+
101+
if (img === imageElement) {
102+
onMatch();
103+
}
104+
return;
105+
}
106+
} catch (e) {
107+
console.error('Error parsing lightbox config:', e);
108+
}
109+
}
110+
111+
const imageData = {
112+
url: img.src,
113+
title: '',
114+
link: '',
115+
filename: img.alt || ''
116+
};
117+
118+
this.images.push(imageData);
119+
120+
if (img === imageElement) {
121+
onMatch();
122+
}
123+
},
124+
125+
open() {
126+
this.isOpen = true;
127+
document.body.style.overflow = 'hidden';
128+
},
129+
130+
close() {
131+
this.isOpen = false;
132+
document.body.style.overflow = '';
133+
},
134+
135+
next() {
136+
if (this.images.length > 0) {
137+
this.currentIndex = (this.currentIndex + 1) % this.images.length;
138+
this.updateCurrentImage();
139+
}
140+
},
141+
142+
previous() {
143+
if (this.images.length > 0) {
144+
this.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length;
145+
this.updateCurrentImage();
146+
}
147+
},
148+
149+
updateCurrentImage() {
150+
if (this.images[this.currentIndex]) {
151+
this.currentImage = this.images[this.currentIndex];
152+
}
153+
}
154+
};
155+
};

0 commit comments

Comments
 (0)