1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
|
import { has } from 'lodash';
import { isInIssuePage, isInMRPage, isInEpicPage } from './common_utils';
/**
* Checks whether an element's content exceeds the element's width.
*
* @param element DOM element to check
*/
export const hasHorizontalOverflow = (element) =>
Boolean(element && element.scrollWidth > element.offsetWidth);
export const addClassIfElementExists = (element, className) => {
if (element) {
element.classList.add(className);
}
};
export const isInVueNoteablePage = () => isInIssuePage() || isInEpicPage() || isInMRPage();
export const canScrollUp = ({ scrollTop }, margin = 0) => scrollTop > margin;
export const canScrollDown = ({ scrollTop, offsetHeight, scrollHeight }, margin = 0) =>
scrollTop + offsetHeight < scrollHeight - margin;
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);
}
});
}
};
/**
* 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;
}, {});
/**
* 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
*/
export const isElementVisible = (element) =>
Boolean(element.offsetWidth || element.offsetHeight || element.getClientRects().length);
export const getParents = (element) => {
const parents = [];
let parent = element.parentNode;
do {
parents.push(parent);
parent = parent.parentNode;
} while (parent);
return parents;
};
export const getParentByTagName = (element, tagName) => {
let parent = element.parentNode;
do {
if (parent.nodeName?.toLowerCase() === tagName?.toLowerCase()) {
return parent;
}
parent = parent.parentElement;
} while (parent);
return undefined;
};
/**
* 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]);
});
};
/**
* Get the height of the wrapper page element
* This height can be used to determine where the highest element goes in a page
* Useful for gl-drawer's header-height prop
* @param {String} contentWrapperClass the content wrapper class
* @returns {String} height in px
*/
export const getContentWrapperHeight = (contentWrapperClass) => {
const wrapperEl = document.querySelector(contentWrapperClass);
return wrapperEl ? `${wrapperEl.offsetTop}px` : '';
};
/**
* Replaces comment nodes in a DOM tree with a different element
* containing the text of the comment.
*
* @param {*} el
* @param {*} tagName
*/
export const replaceCommentsWith = (el, tagName) => {
const iterator = document.createNodeIterator(el, NodeFilter.SHOW_COMMENT);
let commentNode = iterator.nextNode();
while (commentNode) {
const newNode = document.createElement(tagName);
newNode.textContent = commentNode.textContent;
commentNode.parentNode.replaceChild(newNode, commentNode);
commentNode = iterator.nextNode();
}
};
|
