Skip to content

Commit

Permalink
try
Browse files Browse the repository at this point in the history
  • Loading branch information
@iamdarkle
iamdarkle committed Sep 9, 2024
1 parent aac989b commit 6f1e3aa
Show file tree
Hide file tree
Showing 3 changed files with 95 additions and 147 deletions.
2 changes: 1 addition & 1 deletion js/dist/forum.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion js/dist/forum.js.map
View file

Large diffs are not rendered by default.

238 changes: 93 additions & 145 deletions js/src/forum/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,162 +9,110 @@ import { Fancybox } from '@fancyapps/ui/dist/fancybox/fancybox.esm.js';
import '@fancyapps/ui/dist/fancybox/fancybox.css';

app.initializers.add('darkle/fancybox', () => {
extend(CommentPost.prototype, 'oninit', function() {
this.initFancybox = () => {
const postBody = this.element.querySelector('.Post-body');
if (!postBody) return;
extend(CommentPost.prototype, 'oncreate', function () {
this.initFancybox();
});

// Initialize Carousel for each gallery
const carousels = new Map();
postBody.querySelectorAll('.fancybox-gallery').forEach((gallery, index) => {
if (!gallery.id) {
gallery.id = `gallery-${index}`;
const carousel = new Carousel(gallery, {
Dots: false,
infinite: false,
dragFree: true,
});
carousels.set(gallery.id, carousel);
}
});
extend(CommentPost.prototype, 'onupdate', function () {
this.initFancybox();
});

CommentPost.prototype.initFancybox = function () {
const postBody = this.element.querySelector('.Post-body');
if (!postBody) return;

// Fancybox options
const fancyboxOptions = {
Carousel: {
// Initialize Carousel for each gallery
const carousels = new Map();
postBody.querySelectorAll('.fancybox-gallery').forEach((gallery, index) => {
if (!gallery.id) {
gallery.id = `gallery-${index}`;
const carousel = new Carousel(gallery, {
Dots: false,
infinite: false,
dragFree: false,
});
carousels.set(gallery.id, carousel);
}
});

// Setup Fancybox for all images
const fancyboxOptions = {
Carousel: {
infinite: false,
},
Toolbar: {
display: {
left: [],
middle: [],
right: ["slideshow", "fullscreen", "close"],
},
Toolbar: {
display: {
left: [],
middle: [],
right: ["slideshow", "fullscreen", "close"],
},
},
Images: {
initialSize: 'fit',
},
on: {
init: (fancybox) => {
const slide = fancybox.getSlide();
if (slide && slide.triggerEl) {
const carouselEl = slide.triggerEl.closest('.fancybox-gallery');
if (carouselEl) {
const carousel = carousels.get(carouselEl.id);
if (carousel) {
carousel.slideTo(slide.index, { friction: 0 });
}
}
}
},
"Carousel.change": (fancybox, carousel, slideIndex) => {
const slide = fancybox.getSlide();
if (slide && slide.triggerEl) {
const carouselEl = slide.triggerEl.closest('.fancybox-gallery');
if (carouselEl) {
const carousel = carousels.get(carouselEl.id);
if (carousel) {
carousel.slideTo(slideIndex, { friction: 0 });
}
}
},
Images: {
initialSize: 'fit',
},
on: {
done: (fancybox, slide) => {
const carouselEl = slide.triggerEl.closest('.fancybox-gallery');
if (carouselEl) {
const carousel = carousels.get(carouselEl.id);
if (carousel) {
carousel.slideTo(slide.index, { friction: 0 });
}
},
destroy: (fancybox) => {
const lastSlide = fancybox.getSlide();
if (lastSlide && lastSlide.triggerEl) {
const carouselEl = lastSlide.triggerEl.closest('.fancybox-gallery');
if (carouselEl) {
const carousel = carousels.get(carouselEl.id);
if (carousel) {
// Use setTimeout to delay the carousel slide
setTimeout(() => {
carousel.slideTo(lastSlide.index, { friction: 0 });
}, 0);
}
}
}
},
}
},
dragToClose: false,
};

// Handle clicks on Fancybox-enabled links
postBody.querySelectorAll('a[data-fancybox]').forEach(link => {
let isDragging = false;
let startX, startY;

link.addEventListener('mousedown', (e) => {
isDragging = false;
startX = e.clientX;
startY = e.clientY;
});

link.addEventListener('mousemove', (e) => {
if (Math.abs(e.clientX - startX) > 5 || Math.abs(e.clientY - startY) > 5) {
isDragging = true;
"Carousel.change": (fancybox, carousel, slideIndex) => {
const slide = fancybox.getSlide();
const carouselEl = slide.triggerEl.closest('.fancybox-gallery');
if (carouselEl) {
const carousel = carousels.get(carouselEl.id);
if (carousel) {
carousel.slideTo(slideIndex, { friction: 0 });
}
}
});
},
destroy: (fancybox) => {
// Store the current scroll position
const scrollPosition = window.pageYOffset;

// Restore the scroll position after a short delay
setTimeout(() => {
window.scrollTo(0, scrollPosition);
}, 0);
},
},
dragToClose: false,
};

link.addEventListener('click', (e) => {
e.preventDefault();
if (!isDragging) {
const groupName = link.getAttribute('data-fancybox');
const group = postBody.querySelectorAll(`a[data-fancybox="${groupName}"]`);
const index = Array.from(group).indexOf(link);

// Store the current scroll position
const scrollPosition = window.pageYOffset;
// Handle clicks on Fancybox-enabled links
postBody.querySelectorAll('a[data-fancybox]').forEach(link => {
let isDragging = false;
let startX, startY;

Fancybox.show(
Array.from(group).map(el => {
const img = el.querySelector('img');
return {
src: img.getAttribute('data-src') || img.src,
thumb: img.src,
type: 'image',
triggerEl: el,
};
}),
{
...fancyboxOptions,
startIndex: index,
on: {
...fancyboxOptions.on,
destroy: (fancybox) => {
if (fancyboxOptions.on.destroy) {
fancyboxOptions.on.destroy(fancybox);
}
// Restore the scroll position after a short delay
setTimeout(() => {
window.scrollTo(0, scrollPosition);
}, 0);
},
},
}
);
}
});
link.addEventListener('mousedown', (e) => {
isDragging = false;
startX = e.clientX;
startY = e.clientY;
});

// Sync carousels with Fancybox
carousels.forEach((carousel, id) => {
carousel.on('change', (carousel) => {
const fancybox = Fancybox.getInstance();
if (fancybox) {
const currentSlide = fancybox.getSlide();
if (currentSlide && currentSlide.triggerEl && currentSlide.triggerEl.closest('.fancybox-gallery').id === id) {
fancybox.setPage(carousel.page);
}
}
});
link.addEventListener('mousemove', (e) => {
if (Math.abs(e.clientX - startX) > 5 || Math.abs(e.clientY - startY) > 5) {
isDragging = true;
}
});
};
});

extend(CommentPost.prototype, 'oncreate', function() {
this.initFancybox();
});

extend(CommentPost.prototype, 'onupdate', function() {
this.initFancybox();
});
link.addEventListener('click', (e) => {
e.preventDefault();
if (!isDragging) {
const groupName = link.getAttribute('data-fancybox');
const group = postBody.querySelectorAll(`a[data-fancybox="${groupName}"]`);
const index = Array.from(group).indexOf(link);

Fancybox.fromNodes(Array.from(group), {
...fancyboxOptions,
startIndex: index,
});
}
});
});
};
});

0 comments on commit 6f1e3aa

Please sign in to comment.