debian-mirror-gitlab/app/assets/javascripts/lib/utils/dom_utils.js

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

106 lines
3.6 KiB
JavaScript
Raw Normal View History

2020-07-28 23:09:34 +05:30
import { has } from 'lodash';
2018-11-08 19:23:39 +05:30
import { isInIssuePage, isInMRPage, isInEpicPage } from './common_utils';
2017-09-10 17:25:29 +05:30
2021-02-22 17:27:13 +05:30
/**
* Checks whether an element's content exceeds the element's width.
*
* @param element DOM element to check
*/
2021-03-08 18:12:59 +05:30
export const hasHorizontalOverflow = (element) =>
2021-02-22 17:27:13 +05:30
Boolean(element && element.scrollWidth > element.offsetWidth);
2017-09-10 17:25:29 +05:30
export const addClassIfElementExists = (element, className) => {
if (element) {
element.classList.add(className);
}
};
2018-05-09 12:01:36 +05:30
2018-11-08 19:23:39 +05:30
export const isInVueNoteablePage = () => isInIssuePage() || isInEpicPage() || isInMRPage();
2019-02-15 15:39:39 +05:30
export const canScrollUp = ({ scrollTop }, margin = 0) => scrollTop > margin;
export const canScrollDown = ({ scrollTop, offsetHeight, scrollHeight }, margin = 0) =>
scrollTop + offsetHeight < scrollHeight - margin;
2020-06-23 00:09:42 +05:30
export const toggleContainerClasses = (containerEl, classList) => {
if (containerEl) {
// eslint-disable-next-line array-callback-return
Object.entries(classList).map(([key, value]) => {
if (value) {
containerEl.classList.add(key);
} else {
containerEl.classList.remove(key);
}
});
}
};
2020-07-28 23:09:34 +05:30
/**
* Return a object mapping element dataset names to booleans.
*
* This is useful for data- attributes whose presense represent
* a truthiness, no matter the value of the attribute. The absense of the
* attribute represents falsiness.
*
* This can be useful when Rails-provided boolean-like values are passed
* directly to the HAML template, rather than cast to a string.
*
* @param {HTMLElement} element - The DOM element to inspect
* @param {string[]} names - The dataset (i.e., camelCase) names to inspect
* @returns {Object.<string, boolean>}
*/
export const parseBooleanDataAttributes = ({ dataset }, names) =>
names.reduce((acc, name) => {
acc[name] = has(dataset, name);
return acc;
}, {});
2021-01-29 00:20:46 +05:30
/**
* Returns whether or not the provided element is currently visible.
* This function operates identically to jQuery's `:visible` pseudo-selector.
* Documentation for this selector: https://api.jquery.com/visible-selector/
* Implementation of this selector: https://github.com/jquery/jquery/blob/d0ce00cdfa680f1f0c38460bc51ea14079ae8b07/src/css/hiddenVisibleSelectors.js#L8
* @param {HTMLElement} element The element to test
* @returns {Boolean} `true` if the element is currently visible, otherwise false
*/
2021-03-08 18:12:59 +05:30
export const isElementVisible = (element) =>
2021-01-29 00:20:46 +05:30
Boolean(element.offsetWidth || element.offsetHeight || element.getClientRects().length);
/**
* The opposite of `isElementVisible`.
* Returns whether or not the provided element is currently hidden.
* This function operates identically to jQuery's `:hidden` pseudo-selector.
* Documentation for this selector: https://api.jquery.com/hidden-selector/
* Implementation of this selector: https://github.com/jquery/jquery/blob/d0ce00cdfa680f1f0c38460bc51ea14079ae8b07/src/css/hiddenVisibleSelectors.js#L6
* @param {HTMLElement} element The element to test
* @returns {Boolean} `true` if the element is currently hidden, otherwise false
*/
2021-03-08 18:12:59 +05:30
export const isElementHidden = (element) => !isElementVisible(element);
2021-11-11 11:23:49 +05:30
export const getParents = (element) => {
const parents = [];
let parent = element.parentNode;
do {
parents.push(parent);
parent = parent.parentNode;
} while (parent);
return parents;
};
2022-01-26 12:08:38 +05:30
/**
* This method takes a HTML element and an object of attributes
* to save repeated calls to `setAttribute` when multiple
* attributes need to be set.
*
* @param {HTMLElement} el
* @param {Object} attributes
*/
export const setAttributes = (el, attributes) => {
Object.keys(attributes).forEach((key) => {
el.setAttribute(key, attributes[key]);
});
};