diff --git a/app/assets/javascripts/discourse/lib/eyeline.js.es6 b/app/assets/javascripts/discourse/lib/eyeline.js.es6 index 779c5a574a8..bebbfa1623d 100644 --- a/app/assets/javascripts/discourse/lib/eyeline.js.es6 +++ b/app/assets/javascripts/discourse/lib/eyeline.js.es6 @@ -1,21 +1,42 @@ import ENV from "discourse-common/config/environment"; import { EventTarget } from "rsvp"; -// Track visible elemnts on the screen. +let _skipUpdate; +let _rootElement; + +export function configureEyeline(opts) { + if (opts) { + _skipUpdate = opts.skipUpdate; + _rootElement = opts.rootElement; + } else { + _skipUpdate = ENV.environment === "test"; + _rootElement = null; + } +} + +configureEyeline(); + +// Track visible elements on the screen. const Eyeline = function Eyeline(selector) { this.selector = selector; }; Eyeline.prototype.update = function() { - if (ENV.environment === "test") { + if (_skipUpdate) { return; } - const docViewTop = $(window).scrollTop(), - windowHeight = $(window).height(), - docViewBottom = docViewTop + windowHeight, - $elements = $(this.selector), - bottomOffset = $elements.last().offset(); + const docViewTop = _rootElement + ? $(_rootElement).scrollTop() + : $(window).scrollTop(); + const windowHeight = _rootElement + ? $(_rootElement).height() + : $(window).height(); + const docViewBottom = docViewTop + windowHeight; + const $elements = $(this.selector); + const bottomOffset = _rootElement + ? $elements.last().position() + : $elements.last().offset(); let atBottom = false; if (bottomOffset) { @@ -25,7 +46,7 @@ Eyeline.prototype.update = function() { return $elements.each((i, elem) => { const $elem = $(elem), - elemTop = $elem.offset().top, + elemTop = _rootElement ? $elem.position().top : $elem.offset().top, elemBottom = elemTop + $elem.height(); let markSeen = false; diff --git a/test/javascripts/components/load-more-test.js.es6 b/test/javascripts/components/load-more-test.js.es6 new file mode 100644 index 00000000000..080abc905f3 --- /dev/null +++ b/test/javascripts/components/load-more-test.js.es6 @@ -0,0 +1,27 @@ +import { configureEyeline } from "discourse/lib/eyeline"; +import componentTest from "helpers/component-test"; + +moduleForComponent("load-more", { integration: true }); + +componentTest("updates once after initialization", { + template: ` + {{#load-more selector=".numbers tr" action=loadMore}} +
+ {{/load-more}}`, + + beforeEach() { + this.set("loadMore", () => this.set("loadedMore", true)); + configureEyeline({ + skipUpdate: false, + rootElement: Discourse.rootElement + }); + }, + + afterEach() { + configureEyeline(); + }, + + test(assert) { + assert.ok(this.loadedMore); + } +});