app/assets/javascripts/spina/admin/controllers/infinite_scroll_controller.js in spina-1.2.0 vs app/assets/javascripts/spina/admin/controllers/infinite_scroll_controller.js in spina-2.0.0.alpha

- old
+ new

@@ -1,39 +1,37 @@ (() => { const application = Stimulus.Application.start() application.register("infinite-scroll", class extends Stimulus.Controller { static get targets() { - return ["link"] + return ["link", "scrollContainer"] } connect() { - // Disable scroll event listeners - $(window).off('scroll.infiniteScroll') - $('#overlay section').off('scroll.infiniteScroll') + this.element["infiniteScroll"] = this + this.scrollElement.addEventListener("scroll", this.loadNextPage.bind(this)) + this.loadNextPage() + } - let $link = $(this.linkTarget) + disconnect() { + this.scrollElement.removeEventListener("scroll", this.loadNextPage.bind(this)) + } - // If the link has an actual href - if ($link.attr('href')) { - // If the window scrolls - $(window).on('scroll.infiniteScroll', this.loadNextPage($link)) - - // If the overlay scrolls - $('#overlay section').on('scroll.infiniteScroll', function() { - $(window).trigger('scroll.infiniteScroll') - }) - - $(window).trigger('scroll.infiniteScroll') + get scrollElement() { + if (this.hasScrollContainerTarget) { + return this.scrollContainerTarget + } else { + return window } } - loadNextPage(link) { - if ($(window).scrollTop() > link.offset().top - $(window).height() - 500) { - $(window).off('scroll.infiniteScroll') - $('#overlay section').off('scroll.infiniteScroll') - $.rails.disableElement(link) - $.getScript(link.attr('href')) + loadNextPage() { + if (this.hasLinkTarget) { + let top = this.linkTarget.getBoundingClientRect().top + if (top < window.innerHeight + 500) { + this.linkTarget.dataset.disableWith = "..." + this.linkTarget.click() + } } } }) })()