- /**
- * Registers a resize handler on the window.
- *
- * @type {Drupal~behavior}
- */
- Drupal.behaviors.drupalDisplace = {
- attach: function () {
- // Mark this behavior as processed on the first pass.
- if (this.displaceProcessed) {
- return;
- }
- this.displaceProcessed = true;
-
- $(window).on('resize.drupalDisplace', debounce(displace, 200));
- }
- };
-
- /**
- * Informs listeners of the current offset dimensions.
- *
- * @function Drupal.displace
- *
- * @prop {Drupal~displaceOffset} offsets
- *
- * @param {bool} [broadcast]
- * When true or undefined, causes the recalculated offsets values to be
- * broadcast to listeners.
- *
- * @return {Drupal~displaceOffset}
- * An object whose keys are the for sides an element -- top, right, bottom
- * and left. The value of each key is the viewport displacement distance for
- * that edge.
- *
- * @fires event:drupalViewportOffsetChange
- */
- function displace(broadcast) {
- offsets = Drupal.displace.offsets = calculateOffsets();
- if (typeof broadcast === 'undefined' || broadcast) {
- $(document).trigger('drupalViewportOffsetChange', offsets);
- }
- return offsets;
- }
-
- /**
- * Determines the viewport offsets.
- *
- * @return {Drupal~displaceOffset}
- * An object whose keys are the for sides an element -- top, right, bottom
- * and left. The value of each key is the viewport displacement distance for
- * that edge.
- */
- function calculateOffsets() {
- return {
- top: calculateOffset('top'),
- right: calculateOffset('right'),
- bottom: calculateOffset('bottom'),
- left: calculateOffset('left')
- };
- }
-
- /**
- * Gets a specific edge's offset.
- *
- * Any element with the attribute data-offset-{edge} e.g. data-offset-top will
- * be considered in the viewport offset calculations. If the attribute has a
- * numeric value, that value will be used. If no value is provided, one will
- * be calculated using the element's dimensions and placement.
- *
- * @function Drupal.displace.calculateOffset
- *
- * @param {string} edge
- * The name of the edge to calculate. Can be 'top', 'right',
- * 'bottom' or 'left'.
- *
- * @return {number}
- * The viewport displacement distance for the requested edge.
- */
- function calculateOffset(edge) {
- var edgeOffset = 0;
- var displacingElements = document.querySelectorAll('[data-offset-' + edge + ']');
- var n = displacingElements.length;
- for (var i = 0; i < n; i++) {
- var el = displacingElements[i];
- // If the element is not visible, do consider its dimensions.
- if (el.style.display === 'none') {
- continue;
- }
- // If the offset data attribute contains a displacing value, use it.
- var displacement = parseInt(el.getAttribute('data-offset-' + edge), 10);
- // If the element's offset data attribute exits
- // but is not a valid number then get the displacement
- // dimensions directly from the element.
- if (isNaN(displacement)) {
- displacement = getRawOffset(el, edge);
- }
- // If the displacement value is larger than the current value for this
- // edge, use the displacement value.
- edgeOffset = Math.max(edgeOffset, displacement);
- }
-
- return edgeOffset;
- }
-
- /**
- * Calculates displacement for element based on its dimensions and placement.
- *
- * @param {HTMLElement} el
- * The jQuery element whose dimensions and placement will be measured.
- *
- * @param {string} edge
- * The name of the edge of the viewport that the element is associated
- * with.
- *
- * @return {number}
- * The viewport displacement distance for the requested edge.
- */