-
Notifications
You must be signed in to change notification settings - Fork 0
/
domfunc.js
113 lines (106 loc) · 4.39 KB
/
domfunc.js
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
/**
* WARNING:
* Before making modifications to this file, make absolutely sure that
* you've used the functions and their respective flags (if any) properly.
* These functions work for almost every webpage, so there are more chances
* you've used something incorrectly.
*
* When making modifications, you also need to test out if the modified code
* works for each and every webpage.
*/
/**
* Select HTML element/s from the document root using CSS syntax.
* @param {String} val The CSS representation of the element.
* @return {Node} The HTML element or,
* @return {HTMLCollection} A collection of similar HTML elements.
*/
export const $ = (val) => {
val = val.trim();
if (/ |,|\[|\]|>|:/.test(val)) return document.querySelectorAll(val);
switch (val.charAt(0)) {
case '#':
return document.getElementById(val.substring(1));
case '.':
return document.getElementsByClassName(val.substring(1));
default:
return document.getElementsByTagName(val);
}
}
/**
* Select HTML element/s from an HTML node using CSS syntax.
* @param {Node} element The element from which other elements will be selected.
* @param {String} val The CSS representation of the element.
* @return {Node} The HTML element or,
* @return {HTMLCollection} A collection of similar HTML elements.
*/
export const getChildElement = (element, val) => {
val = val.trim();
if (/ |,|\[|\]|>|:/.test(val)) return element.querySelectorAll(val);
switch (val.charAt(0)) {
case '#':
return document.getElementById(val.substring(1));
case '.':
return element.getElementsByClassName(val.substring(1));
default:
return element.getElementsByTagName(val);
}
}
/**
* Checks if the given child has the given parent.
* @param {Node} child The child in concern.
* @param {Node} parent The parent in concern.
* @return {Boolean} If true, the given child has the given parent.
*/
export const childHasParent = (child, parent) => {
let node = child.parentNode;
while (node != null) {
if (node == parent) return true;
node = node.parentNode;
}
return false;
}
/**
* Takes an HTML string, converts it to a node and attatches it to the element passed.
* This is done by detaching and reattaching the element to its parent to improve performance.
* @param {Node} element The element to which HTML will be appended.
* @param {String} str The HTML string.
* @param {Boolean} reversed Prepends the HTML to the node.
*/
export const appendHTMLString = (element, str = '', reversed = false) => {
let parent = element.parentNode;
let next = element.nextSibling;
if (!parent) return; // No parent node? Abort!
parent.removeChild(element); // Detach node from DOM.
if (!reversed) element.innerHTML += str; // append html string
else element.innerHTML = `${str}${element.innerHTML}`; // reversed append html
parent.insertBefore(element, next); // Re-attach node to DOM.
}
/**
* Scrolls down a view smoothly if amount of element below viewport is less than 720 pixels.
* @param {Node} element The element to scroll down.
* @param {Boolean} get_behavior_only If true, only returns scroll behavior based on amount of element below viewport.
* @param {Boolean} not_smooth Explicitly mention to scroll without animations.
* @return {String} The scroll behavior (conditional).
*/
export const smoothScroll = (element, get_behavior_only = false, smooth = true) => {
// check if down scrollable part of element is < 720 px
if (smooth && element.scrollHeight - (document.body.clientHeight - 110) - element.scrollTop < 720) {
if (get_behavior_only) return 'smooth';
element.style.scrollBehavior = 'smooth';
} else {
if (get_behavior_only) return 'auto';
element.style.scrollBehavior = 'auto';
}
element.scrollTop = element.scrollHeight;
}
/**
* Checks if a node is fully scrolled.
* @param {Node} node The node to check.
* @param {Number} adjustment Adjustment for keyboard popup / etc. Optional, default value is 0.
* @return {Boolean}
*/
export const isFullyScrolled = (node, adjustment = 0) => {
const extra_adjustment = 10;
return node.scrollTop + node.clientHeight >= node.scrollHeight + adjustment - extra_adjustment;
}
console.log('module domfunc.js loaded');