displace.es6.js 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219
  1. /**
  2. * @file
  3. * Manages elements that can offset the size of the viewport.
  4. *
  5. * Measures and reports viewport offset dimensions from elements like the
  6. * toolbar that can potentially displace the positioning of other elements.
  7. */
  8. /**
  9. * @typedef {object} Drupal~displaceOffset
  10. *
  11. * @prop {number} top
  12. * @prop {number} left
  13. * @prop {number} right
  14. * @prop {number} bottom
  15. */
  16. /**
  17. * Triggers when layout of the page changes.
  18. *
  19. * This is used to position fixed element on the page during page resize and
  20. * Toolbar toggling.
  21. *
  22. * @event drupalViewportOffsetChange
  23. */
  24. (function ($, Drupal, debounce) {
  25. /**
  26. * @name Drupal.displace.offsets
  27. *
  28. * @type {Drupal~displaceOffset}
  29. */
  30. let offsets = {
  31. top: 0,
  32. right: 0,
  33. bottom: 0,
  34. left: 0,
  35. };
  36. /**
  37. * Registers a resize handler on the window.
  38. *
  39. * @type {Drupal~behavior}
  40. */
  41. Drupal.behaviors.drupalDisplace = {
  42. attach() {
  43. // Mark this behavior as processed on the first pass.
  44. if (this.displaceProcessed) {
  45. return;
  46. }
  47. this.displaceProcessed = true;
  48. $(window).on('resize.drupalDisplace', debounce(displace, 200));
  49. },
  50. };
  51. /**
  52. * Informs listeners of the current offset dimensions.
  53. *
  54. * @function Drupal.displace
  55. *
  56. * @prop {Drupal~displaceOffset} offsets
  57. *
  58. * @param {bool} [broadcast]
  59. * When true or undefined, causes the recalculated offsets values to be
  60. * broadcast to listeners.
  61. *
  62. * @return {Drupal~displaceOffset}
  63. * An object whose keys are the for sides an element -- top, right, bottom
  64. * and left. The value of each key is the viewport displacement distance for
  65. * that edge.
  66. *
  67. * @fires event:drupalViewportOffsetChange
  68. */
  69. function displace(broadcast) {
  70. offsets = calculateOffsets();
  71. Drupal.displace.offsets = offsets;
  72. if (typeof broadcast === 'undefined' || broadcast) {
  73. $(document).trigger('drupalViewportOffsetChange', offsets);
  74. }
  75. return offsets;
  76. }
  77. /**
  78. * Determines the viewport offsets.
  79. *
  80. * @return {Drupal~displaceOffset}
  81. * An object whose keys are the for sides an element -- top, right, bottom
  82. * and left. The value of each key is the viewport displacement distance for
  83. * that edge.
  84. */
  85. function calculateOffsets() {
  86. return {
  87. top: calculateOffset('top'),
  88. right: calculateOffset('right'),
  89. bottom: calculateOffset('bottom'),
  90. left: calculateOffset('left'),
  91. };
  92. }
  93. /**
  94. * Gets a specific edge's offset.
  95. *
  96. * Any element with the attribute data-offset-{edge} e.g. data-offset-top will
  97. * be considered in the viewport offset calculations. If the attribute has a
  98. * numeric value, that value will be used. If no value is provided, one will
  99. * be calculated using the element's dimensions and placement.
  100. *
  101. * @function Drupal.displace.calculateOffset
  102. *
  103. * @param {string} edge
  104. * The name of the edge to calculate. Can be 'top', 'right',
  105. * 'bottom' or 'left'.
  106. *
  107. * @return {number}
  108. * The viewport displacement distance for the requested edge.
  109. */
  110. function calculateOffset(edge) {
  111. let edgeOffset = 0;
  112. const displacingElements = document.querySelectorAll(`[data-offset-${edge}]`);
  113. const n = displacingElements.length;
  114. for (let i = 0; i < n; i++) {
  115. const el = displacingElements[i];
  116. // If the element is not visible, do consider its dimensions.
  117. if (el.style.display === 'none') {
  118. continue;
  119. }
  120. // If the offset data attribute contains a displacing value, use it.
  121. let displacement = parseInt(el.getAttribute(`data-offset-${edge}`), 10);
  122. // If the element's offset data attribute exits
  123. // but is not a valid number then get the displacement
  124. // dimensions directly from the element.
  125. if (isNaN(displacement)) {
  126. displacement = getRawOffset(el, edge);
  127. }
  128. // If the displacement value is larger than the current value for this
  129. // edge, use the displacement value.
  130. edgeOffset = Math.max(edgeOffset, displacement);
  131. }
  132. return edgeOffset;
  133. }
  134. /**
  135. * Calculates displacement for element based on its dimensions and placement.
  136. *
  137. * @param {HTMLElement} el
  138. * The jQuery element whose dimensions and placement will be measured.
  139. *
  140. * @param {string} edge
  141. * The name of the edge of the viewport that the element is associated
  142. * with.
  143. *
  144. * @return {number}
  145. * The viewport displacement distance for the requested edge.
  146. */
  147. function getRawOffset(el, edge) {
  148. const $el = $(el);
  149. const documentElement = document.documentElement;
  150. let displacement = 0;
  151. const horizontal = (edge === 'left' || edge === 'right');
  152. // Get the offset of the element itself.
  153. let placement = $el.offset()[horizontal ? 'left' : 'top'];
  154. // Subtract scroll distance from placement to get the distance
  155. // to the edge of the viewport.
  156. placement -= window[`scroll${horizontal ? 'X' : 'Y'}`] || document.documentElement[`scroll${horizontal ? 'Left' : 'Top'}`] || 0;
  157. // Find the displacement value according to the edge.
  158. switch (edge) {
  159. // Left and top elements displace as a sum of their own offset value
  160. // plus their size.
  161. case 'top':
  162. // Total displacement is the sum of the elements placement and size.
  163. displacement = placement + $el.outerHeight();
  164. break;
  165. case 'left':
  166. // Total displacement is the sum of the elements placement and size.
  167. displacement = placement + $el.outerWidth();
  168. break;
  169. // Right and bottom elements displace according to their left and
  170. // top offset. Their size isn't important.
  171. case 'bottom':
  172. displacement = documentElement.clientHeight - placement;
  173. break;
  174. case 'right':
  175. displacement = documentElement.clientWidth - placement;
  176. break;
  177. default:
  178. displacement = 0;
  179. }
  180. return displacement;
  181. }
  182. /**
  183. * Assign the displace function to a property of the Drupal global object.
  184. *
  185. * @ignore
  186. */
  187. Drupal.displace = displace;
  188. $.extend(Drupal.displace, {
  189. /**
  190. * Expose offsets to other scripts to avoid having to recalculate offsets.
  191. *
  192. * @ignore
  193. */
  194. offsets,
  195. /**
  196. * Expose method to compute a single edge offsets.
  197. *
  198. * @ignore
  199. */
  200. calculateOffset,
  201. });
  202. }(jQuery, Drupal, Drupal.debounce));