Hi,
Here is one of my controllers:
import { Controller } from "@hotwired/stimulus"
import InfiniteScroll from 'infinite-scroll'
export default class extends Controller {
static get targets() {
return ["next", "grid", "footer", "infinitescrollelement"]
}
connect() {
let infScroll;
if (this.hasNextTarget) {
infScroll = new InfiniteScroll(this.gridTarget, {
path: '.next_page a',
append: '[data-infinitescroll-target="infinitescrollelement"]',
// append: `.${this.data.get("object")}-top-level`,
scrollThreshold: false,
status: '.page-load-status',
button: '.view-more-button'
})
this.footerTarget.querySelector('.view-more-button').style.display = 'inline-flex'
} else {
this.footerTarget.querySelector('.view-more-button').style.display = 'none'
}
// When new content is appended, re-layout the gallery to ensure new photos position correctly
***infScroll.on('append', (event, response, path, items) => {
***layoutGallery(galleryElement)
***})
}
}
The three lines that start with *** are where my problem is.
Basically, when new content is appended by Infinite Scroll, I need an action in my Gallery Controller to be run. How can I do this? It can’t be run at the same time, it must only be run when that infinite scroll event is called.
Any ideas?