You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

49 lines
1.4 KiB

4 years ago
  1. (function($K)
  2. {
  3. $K.add('module', 'visibility', {
  4. init: function(app, context)
  5. {
  6. this.app = app;
  7. this.$win = app.$win;
  8. // defaults
  9. var defaults = {
  10. tolerance: 15 // px
  11. };
  12. // context
  13. this.context = context;
  14. this.params = context.getParams(defaults);
  15. this.$element = context.getElement();
  16. },
  17. // public
  18. start: function()
  19. {
  20. this.$win.on('scroll.kube.visibility resize.kube.visibility', this._check.bind(this));
  21. this._check();
  22. },
  23. stop: function()
  24. {
  25. this.$win.off('.kube.visibility');
  26. },
  27. // private
  28. _check: function()
  29. {
  30. var docViewTop = this.$win.scrollTop();
  31. var docViewBottom = docViewTop + this.$win.height();
  32. var elemTop = this.$element.offset().top;
  33. var elemBottom = elemTop + this.$element.height();
  34. var check = ((elemBottom >= docViewTop) && (elemTop <= docViewBottom) && (elemBottom <= (docViewBottom + this.params.tolerance)) && (elemTop >= docViewTop));
  35. if (check)
  36. {
  37. this.app.broadcast('visibility.visible', this, this.$element);
  38. }
  39. else
  40. {
  41. this.app.broadcast('visibility.invisible', this, this.$element);
  42. }
  43. }
  44. });
  45. })(Kube);