Skip to content

Commit

Permalink
restore
Browse files Browse the repository at this point in the history
  • Loading branch information
@iamdarkle
iamdarkle committed Sep 9, 2024
1 parent 8e43c4b commit 0d745db
Show file tree
Hide file tree
Showing 2 changed files with 90 additions and 107 deletions.
183 changes: 86 additions & 97 deletions js/src/forum/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,112 +9,101 @@ 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: false,
});
carousels.set(gallery.id, carousel);
}
});
extend(CommentPost.prototype, 'onupdate', function () {
this.initFancybox();
});

// Setup Fancybox for all images
const fancyboxOptions = {
Carousel: {
CommentPost.prototype.initFancybox = function () {
const postBody = this.element.querySelector('.Post-body');
if (!postBody) return;

// 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: {
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 });
}
},
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 });
}
},
"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 });
}
}
},
"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,
};

// 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;
});
},
dragToClose: false,
};

link.addEventListener('mousemove', (e) => {
if (Math.abs(e.clientX - startX) > 5 || Math.abs(e.clientY - startY) > 5) {
isDragging = true;
}
});
// Handle clicks on Fancybox-enabled links
postBody.querySelectorAll('a[data-fancybox]').forEach(link => {
let isDragging = false;
let startX, startY;

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,
});
}
});
link.addEventListener('mousedown', (e) => {
isDragging = false;
startX = e.clientX;
startY = e.clientY;
});
};
});

extend(CommentPost.prototype, 'oncreate', function() {
this.initFancybox();
});
link.addEventListener('mousemove', (e) => {
if (Math.abs(e.clientX - startX) > 5 || Math.abs(e.clientY - startY) > 5) {
isDragging = true;
}
});

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,
});
}
});
});
};
});
14 changes: 4 additions & 10 deletions src/DefineGalleryTemplate.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,22 +20,16 @@ public function __invoke(Configurator $config)
$tag->template = <<<XML
<xsl:choose>
<xsl:when test="parent::FANCYBOX-GALLERY-ITEM">
<a data-fancybox="gallery" href="{@url}">
<img>
<a data-fancybox="gallery" href="{@src}">
<img src="{@src}" alt="{@alt}" loading="lazy">
<xsl:copy-of select="@*"/>
<xsl:attribute name="data-src">
<xsl:value-of select="@url"/>
</xsl:attribute>
</img>
</a>
</xsl:when>
<xsl:otherwise>
<a data-fancybox="single" href="{@url}">
<img>
<a data-fancybox="single" href="{@src}">
<img src="{@src}" alt="{@alt}" loading="lazy">
<xsl:copy-of select="@*"/>
<xsl:attribute name="data-src">
<xsl:value-of select="@url"/>
</xsl:attribute>
</img>
</a>
</xsl:otherwise>
Expand Down

0 comments on commit 0d745db

Please sign in to comment.