ScrollBarUtil.js 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. 'use strict';
  2. /**
  3. * Licensed Materials - Property of IBM
  4. * IBM Cognos Products: BI Cloud (C) Copyright IBM Corp. 2015, 2018
  5. * US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
  6. */
  7. define(['jquery', '../lib/@waca/core-client/js/core-client/ui/core/Class'], function ($, Class) {
  8. var ScrollBarUtil = null;
  9. ScrollBarUtil = Class.extend({
  10. /**
  11. * Initialize the utility with the specified models
  12. *
  13. * @param {JQuery|HTMLElement} inner - Inner DOM element
  14. * @param {JQuery|HTMLElement} outer - Outer DOM element
  15. * @param event
  16. */
  17. init: function init(inner, outer, event) {
  18. ScrollBarUtil.inherited('init', this, arguments);
  19. this.inner = inner || null;
  20. this.outer = outer || null;
  21. this.event = event || null;
  22. },
  23. /**
  24. * Check if the DOM element has a vertical scroll bar
  25. *
  26. * @param {JQuery|HTMLElement} inner - Inner DOM element
  27. * @param {JQuery|HTMLElement} outer - Outer DOM element
  28. */
  29. doesHaveVerticalScrollBar: function doesHaveVerticalScrollBar(inner, outer) {
  30. inner = inner || this.inner;
  31. outer = outer || this.outer;
  32. inner = inner instanceof $ ? inner.get(0) : inner;
  33. outer = outer instanceof $ ? outer : $(outer);
  34. return this._getScrollHeight(inner) > outer.height();
  35. },
  36. /**
  37. * Check if the DOM element has a horizontal scroll bar
  38. *
  39. * @param {JQuery|HTMLElement} inner - Inner DOM element
  40. * @param {JQuery|HTMLElement} outer - Outer DOM element
  41. */
  42. doesHaveHorizontalScrollBar: function doesHaveHorizontalScrollBar(inner, outer) {
  43. inner = inner || this.inner;
  44. outer = outer || this.outer;
  45. inner = inner instanceof $ ? inner.get(0) : inner;
  46. outer = outer instanceof $ ? outer : $(outer);
  47. return this._getScrollWidth(inner) > outer.width();
  48. },
  49. /**
  50. * Check if the event fired on the vertical scroll bar
  51. *
  52. * @param event
  53. */
  54. isEventOnVerticalScrollBar: function isEventOnVerticalScrollBar(event) {
  55. event = event || this.event;
  56. var target = $(event.target);
  57. var isInScrollRange = target.offset().left + this._getContextClientWidth(target) - event.pageX <= 0;
  58. return isInScrollRange;
  59. },
  60. /**
  61. * Check if the event fired on the vertical scroll bar
  62. *
  63. * @param event
  64. */
  65. isEventOnHorizontalScrollBar: function isEventOnHorizontalScrollBar(event) {
  66. event = event || this.event;
  67. var target = $(event.target);
  68. var isInScrollRange = target.offset().top + this._getContextClientHeight(target) - event.pageY <= 0;
  69. return isInScrollRange;
  70. },
  71. /**
  72. * Check if element has a scroll bar and the event was fired on the scroll bar
  73. *
  74. * @param {JQuery|HTMLElement|Event} inner
  75. * @param {JQuery|HTMLElement} outer
  76. * @param event
  77. */
  78. isOnScrollBar: function isOnScrollBar(inner, outer, event) {
  79. // Useful when the inner and outer DOM objects were sent into the constructor
  80. if (arguments.length === 1) {
  81. event = inner || this.event;
  82. inner = this.inner;
  83. outer = this.outer;
  84. } else {
  85. inner = inner || this.inner;
  86. outer = outer || this.outer;
  87. event = event || this.event;
  88. }
  89. return this.doesHaveVerticalScrollBar(inner, outer) && this.isEventOnVerticalScrollBar(event) || this.doesHaveHorizontalScrollBar(inner, outer) && this.isEventOnHorizontalScrollBar(event);
  90. },
  91. /**
  92. * Return the scroll height for element
  93. *
  94. * @param {HTMLElement} element
  95. */
  96. _getScrollHeight: function _getScrollHeight(element) {
  97. return element.scrollHeight;
  98. },
  99. /**
  100. * Return the scroll width for element
  101. *
  102. * @param {HTMLElement} element
  103. */
  104. _getScrollWidth: function _getScrollWidth(element) {
  105. return element.scrollWidth;
  106. },
  107. /**
  108. * @param {JQuery} element - DOM element
  109. */
  110. _getContextClientWidth: function _getContextClientWidth(element) {
  111. var clientWidth = element[0].clientWidth;
  112. if (clientWidth === element.width()) {
  113. // On mac, the client width does not exclude the scrollbar.. remove 30px to approximate the the scrollbar value
  114. clientWidth -= 30;
  115. }
  116. return clientWidth;
  117. },
  118. /**
  119. * @param {JQuery} element - DOM element
  120. */
  121. _getContextClientHeight: function _getContextClientHeight(element) {
  122. var clientHeight = element[0].clientHeight;
  123. if (clientHeight === element.height()) {
  124. // On mac, the client width does not exclude the scrollbar.. remove 30px to approximate the the scrollbar value
  125. clientHeight -= 30;
  126. }
  127. return clientHeight;
  128. }
  129. });
  130. return ScrollBarUtil;
  131. });
  132. //# sourceMappingURL=ScrollBarUtil.js.map