diff --git a/app/assets/javascripts/discourse/lib/is-element-in-viewport.js.es6 b/app/assets/javascripts/discourse/lib/is-element-in-viewport.js.es6 new file mode 100644 index 00000000000..4e071af528c --- /dev/null +++ b/app/assets/javascripts/discourse/lib/is-element-in-viewport.js.es6 @@ -0,0 +1,11 @@ +export default function (element) { + if (element instanceof jQuery) { element = element[0]; } + + const $window = $(window), + rect = element.getBoundingClientRect(); + + return rect.top >= 0 && + rect.left >= 0 && + rect.bottom <= $window.height() && + rect.right <= $window.width(); +} diff --git a/app/assets/javascripts/discourse/views/static.js.es6 b/app/assets/javascripts/discourse/views/static.js.es6 index 6ee67002262..318ee2cf784 100644 --- a/app/assets/javascripts/discourse/views/static.js.es6 +++ b/app/assets/javascripts/discourse/views/static.js.es6 @@ -1,13 +1,15 @@ +import isElementInViewport from "discourse/lib/is-element-in-viewport"; + var readFaq = false; export default Ember.View.extend(Discourse.ScrollTop, { + _checkRead: function() { - var path = this.get('controller.model.path'); - if(path === "faq" || path === "guidelines"){ - var $window = $(window), - controller = this.get('controller'); - $window.on('scroll.faq', function(){ - if(!readFaq && ($window.scrollTop() + $window.height() > $(document).height() - 10)) { + const path = this.get('controller.model.path'); + if (path === "faq" || path === "guidelines") { + const controller = this.get('controller'); + $(window).on('load.faq resize.faq scroll.faq', function() { + if (!readFaq && isElementInViewport($(".contents p").last())) { readFaq = true; controller.send('markFaqRead'); } @@ -16,6 +18,6 @@ export default Ember.View.extend(Discourse.ScrollTop, { }.on('didInsertElement'), _stopChecking: function(){ - $(window).off('scroll.faq'); + $(window).off('load.faq resize.faq scroll.faq'); }.on('willDestroyElement') });