vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Added safe checks to DomHandler's methods

pull/2817/head
mertsincan 2022-07-29 01:54:54 +01:00
parent f6ee238924
commit 7a01f9e32f
1 changed files with 214 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

384
src/components/utils/DomHandler.js
View File

@ -1,19 +1,25 @@
export default { export default {
innerWidth(el) { innerWidth(el) {
let width = el.offsetWidth; if (el) {
let style = getComputedStyle(el); let width = el.offsetWidth;
let style = getComputedStyle(el);
width += parseFloat(style.paddingLeft) + parseFloat(style.paddingRight); width += parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
return width; return width;
}
return 0;
}, },
width(el) { width(el) {
let width = el.offsetWidth; if (el) {
let style = getComputedStyle(el); let width = el.offsetWidth;
let style = getComputedStyle(el);
width -= parseFloat(style.paddingLeft) + parseFloat(style.paddingRight); width -= parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
return width; return width;
}
return 0;
}, },
getWindowScrollTop() { getWindowScrollTop() {
@ -37,9 +43,7 @@ export default {
return width; return width;
} }
else { return 0;
return 0;
}
}, },
getOuterHeight(el, margin) { getOuterHeight(el, margin) {
@ -53,9 +57,7 @@ export default {
return height; return height;
} }
else { return 0;
return 0;
}
}, },
getClientHeight(el, margin) { getClientHeight(el, margin) {
@ -68,9 +70,8 @@ export default {
} }
return height; return height;
} else {
return 0;
} }
return 0;
}, },
getViewport() { getViewport() {
@ -81,56 +82,71 @@ export default {
w = win.innerWidth || e.clientWidth || g.clientWidth, w = win.innerWidth || e.clientWidth || g.clientWidth,
h = win.innerHeight || e.clientHeight || g.clientHeight; h = win.innerHeight || e.clientHeight || g.clientHeight;
return {width: w, height: h}; return { width: w, height: h };
}, },
getOffset(el) { getOffset(el) {
var rect = el.getBoundingClientRect(); if (el) {
let rect = el.getBoundingClientRect();
return {
top: rect.top + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0),
left: rect.left + (window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0),
};
}
return { return {
top: rect.top + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0), top: 'auto',
left: rect.left + (window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0), left: 'auto'
}; };
}, },
index(element) { index(element) {
let children = element.parentNode.childNodes; if (element) {
let num = 0; let children = element.parentNode.childNodes;
for (var i = 0; i < children.length; i++) { let num = 0;
if (children[i] === element) return num; for (let i = 0; i < children.length; i++) {
if (children[i].nodeType === 1) num++; if (children[i] === element) return num;
if (children[i].nodeType === 1) num++;
}
} }
return -1; return -1;
}, },
addMultipleClasses(element, className) { addMultipleClasses(element, className) {
if (element.classList) { if (element && className) {
let styles = className.split(' '); if (element.classList) {
for (let i = 0; i < styles.length; i++) { let styles = className.split(' ');
element.classList.add(styles[i]); for (let i = 0; i < styles.length; i++) {
} element.classList.add(styles[i]);
}
} }
else { else {
let styles = className.split(' '); let styles = className.split(' ');
for (let i = 0; i < styles.length; i++) { for (let i = 0; i < styles.length; i++) {
element.className += ' ' + styles[i]; element.className += ' ' + styles[i];
}
} }
} }
}, },
addClass(element, className) { addClass(element, className) {
if (element.classList) if (element && className) {
element.classList.add(className); if (element.classList)
else element.classList.add(className);
element.className += ' ' + className; else
element.className += ' ' + className;
}
}, },
removeClass(element, className) { removeClass(element, className) {
if (element.classList) if (element && className) {
element.classList.remove(className); if (element.classList)
else element.classList.remove(className);
element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' '); else
element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
}
}, },
hasClass(element, className) { hasClass(element, className) {
@ -145,99 +161,112 @@ export default {
}, },
find(element, selector) { find(element, selector) {
return element.querySelectorAll(selector); return element ? element.querySelectorAll(selector) : [];
}, },
findSingle(element, selector) { findSingle(element, selector) {
return element.querySelector(selector); if (element) {
return element.querySelector(selector);
}
return null;
}, },
getHeight(el) { getHeight(el) {
let height = el.offsetHeight; if (el) {
let style = getComputedStyle(el); let height = el.offsetHeight;
let style = getComputedStyle(el);
height -= parseFloat(style.paddingTop) + parseFloat(style.paddingBottom) + parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth); height -= parseFloat(style.paddingTop) + parseFloat(style.paddingBottom) + parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
return height; return height;
}
return 0;
}, },
getWidth(el) { getWidth(el) {
let width = el.offsetWidth; if (el) {
let style = getComputedStyle(el); let width = el.offsetWidth;
let style = getComputedStyle(el);
width -= parseFloat(style.paddingLeft) + parseFloat(style.paddingRight) + parseFloat(style.borderLeftWidth) + parseFloat(style.borderRightWidth); width -= parseFloat(style.paddingLeft) + parseFloat(style.paddingRight) + parseFloat(style.borderLeftWidth) + parseFloat(style.borderRightWidth);
return width; return width;
}
return 0;
}, },
absolutePosition(element, target) { absolutePosition(element, target) {
let elementDimensions = element.offsetParent ? { width: element.offsetWidth, height: element.offsetHeight } : this.getHiddenElementDimensions(element) if (element) {
let elementOuterHeight = elementDimensions.height; let elementDimensions = element.offsetParent ? { width: element.offsetWidth, height: element.offsetHeight } : this.getHiddenElementDimensions(element)
let elementOuterWidth = elementDimensions.width; let elementOuterHeight = elementDimensions.height;
let targetOuterHeight = target.offsetHeight; let elementOuterWidth = elementDimensions.width;
let targetOuterWidth = target.offsetWidth; let targetOuterHeight = target.offsetHeight;
let targetOffset = target.getBoundingClientRect(); let targetOuterWidth = target.offsetWidth;
let windowScrollTop = this.getWindowScrollTop(); let targetOffset = target.getBoundingClientRect();
let windowScrollLeft = this.getWindowScrollLeft(); let windowScrollTop = this.getWindowScrollTop();
let viewport = this.getViewport(); let windowScrollLeft = this.getWindowScrollLeft();
let top, left; let viewport = this.getViewport();
let top, left;
if (targetOffset.top + targetOuterHeight + elementOuterHeight > viewport.height) { if (targetOffset.top + targetOuterHeight + elementOuterHeight > viewport.height) {
top = targetOffset.top + windowScrollTop - elementOuterHeight; top = targetOffset.top + windowScrollTop - elementOuterHeight;
element.style.transformOrigin = 'bottom'; element.style.transformOrigin = 'bottom';
if (top < 0) { if (top < 0) {
top = windowScrollTop; top = windowScrollTop;
}
}
else {
top = targetOuterHeight + targetOffset.top + windowScrollTop;
element.style.transformOrigin = 'top';
} }
}
else {
top = targetOuterHeight + targetOffset.top + windowScrollTop;
element.style.transformOrigin = 'top';
}
if (targetOffset.left + elementOuterWidth > viewport.width) if (targetOffset.left + elementOuterWidth > viewport.width)
left = Math.max(0, targetOffset.left + windowScrollLeft + targetOuterWidth - elementOuterWidth); left = Math.max(0, targetOffset.left + windowScrollLeft + targetOuterWidth - elementOuterWidth);
else else
left = targetOffset.left + windowScrollLeft; left = targetOffset.left + windowScrollLeft;
element.style.top = top + 'px'; element.style.top = top + 'px';
element.style.left = left + 'px'; element.style.left = left + 'px';
}
}, },
relativePosition(element, target) { relativePosition(element, target) {
let elementDimensions = element.offsetParent ? { width: element.offsetWidth, height: element.offsetHeight } : this.getHiddenElementDimensions(element); if (element) {
const targetHeight = target.offsetHeight; let elementDimensions = element.offsetParent ? { width: element.offsetWidth, height: element.offsetHeight } : this.getHiddenElementDimensions(element);
const targetOffset = target.getBoundingClientRect(); const targetHeight = target.offsetHeight;
const viewport = this.getViewport(); const targetOffset = target.getBoundingClientRect();
let top, left; const viewport = this.getViewport();
let top, left;
if ((targetOffset.top + targetHeight + elementDimensions.height) > viewport.height) { if ((targetOffset.top + targetHeight + elementDimensions.height) > viewport.height) {
top = -1 * (elementDimensions.height); top = -1 * (elementDimensions.height);
element.style.transformOrigin = 'bottom'; element.style.transformOrigin = 'bottom';
if (targetOffset.top + top < 0) { if (targetOffset.top + top < 0) {
top = -1 * targetOffset.top; top = -1 * targetOffset.top;
}
}
else {
top = targetHeight;
element.style.transformOrigin = 'top';
} }
}
else {
top = targetHeight;
element.style.transformOrigin = 'top';
}
if (elementDimensions.width > viewport.width) { if (elementDimensions.width > viewport.width) {
// element wider then viewport and cannot fit on screen (align at left side of viewport) // element wider then viewport and cannot fit on screen (align at left side of viewport)
left = targetOffset.left * -1; left = targetOffset.left * -1;
} }
else if ((targetOffset.left + elementDimensions.width) > viewport.width) { else if ((targetOffset.left + elementDimensions.width) > viewport.width) {
// element wider then viewport but can be fit on screen (align at right side of viewport) // element wider then viewport but can be fit on screen (align at right side of viewport)
left = (targetOffset.left + elementDimensions.width - viewport.width) * -1; left = (targetOffset.left + elementDimensions.width - viewport.width) * -1;
} }
else { else {
// element fits on screen (align with target) // element fits on screen (align with target)
left = 0; left = 0;
} }
element.style.top = top + 'px'; element.style.top = top + 'px';
element.style.left = left + 'px'; element.style.left = left + 'px';
}
}, },
getParents(element, parents = []) { getParents(element, parents = []) {
@ -277,71 +306,84 @@ export default {
}, },
getHiddenElementOuterHeight(element) { getHiddenElementOuterHeight(element) {
element.style.visibility = 'hidden'; if (element) {
element.style.display = 'block'; element.style.visibility = 'hidden';
let elementHeight = element.offsetHeight; element.style.display = 'block';
element.style.display = 'none'; let elementHeight = element.offsetHeight;
element.style.visibility = 'visible'; element.style.display = 'none';
element.style.visibility = 'visible';
return elementHeight; return elementHeight;
}
return 0;
}, },
getHiddenElementOuterWidth(element) { getHiddenElementOuterWidth(element) {
element.style.visibility = 'hidden'; if (element) {
element.style.display = 'block'; element.style.visibility = 'hidden';
let elementWidth = element.offsetWidth; element.style.display = 'block';
element.style.display = 'none'; let elementWidth = element.offsetWidth;
element.style.visibility = 'visible'; element.style.display = 'none';
element.style.visibility = 'visible';
return elementWidth; return elementWidth;
}
return 0;
}, },
getHiddenElementDimensions(element) { getHiddenElementDimensions(element) {
var dimensions = {}; if (element) {
element.style.visibility = 'hidden'; let dimensions = {};
element.style.display = 'block'; element.style.visibility = 'hidden';
dimensions.width = element.offsetWidth; element.style.display = 'block';
dimensions.height = element.offsetHeight; dimensions.width = element.offsetWidth;
element.style.display = 'none'; dimensions.height = element.offsetHeight;
element.style.visibility = 'visible'; element.style.display = 'none';
element.style.visibility = 'visible';
return dimensions; return dimensions;
}
return 0;
}, },
fadeIn(element, duration) { fadeIn(element, duration) {
element.style.opacity = 0; if (element) {
element.style.opacity = 0;
var last = +new Date(); let last = +new Date();
var opacity = 0; let opacity = 0;
var tick = function () { let tick = function () {
opacity = +element.style.opacity + (new Date().getTime() - last) / duration; opacity = +element.style.opacity + (new Date().getTime() - last) / duration;
element.style.opacity = opacity; element.style.opacity = opacity;
last = +new Date(); last = +new Date();
if (+opacity < 1) { if (+opacity < 1) {
(window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16); (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
} }
}; };
tick(); tick();
}
}, },
fadeOut(element, ms) { fadeOut(element, ms) {
var opacity = 1, if (element) {
interval = 50, let opacity = 1,
duration = ms, interval = 50,
gap = interval / duration; duration = ms,
gap = interval / duration;
let fading = setInterval(() => { let fading = setInterval(() => {
opacity -= gap; opacity -= gap;
if (opacity <= 0) { if (opacity <= 0) {
opacity = 0; opacity = 0;
clearInterval(fading); clearInterval(fading);
} }
element.style.opacity = opacity; element.style.opacity = opacity;
}, interval); }, interval);
}
}, },
getUserAgent() { getUserAgent() {
@ -349,9 +391,9 @@ export default {
}, },
appendChild(element, target) { appendChild(element, target) {
if(this.isElement(target)) if (this.isElement(target))
target.appendChild(element); target.appendChild(element);
else if(target.el && target.elElement) else if (target.el && target.elElement)
target.elElement.appendChild(element); target.elElement.appendChild(element);
else else
throw new Error('Cannot append ' + target + ' to ' + element); throw new Error('Cannot append ' + target + ' to ' + element);
@ -378,14 +420,14 @@ export default {
}, },
clearSelection() { clearSelection() {
if(window.getSelection) { if (window.getSelection) {
if(window.getSelection().empty) { if (window.getSelection().empty) {
window.getSelection().empty(); window.getSelection().empty();
} else if(window.getSelection().removeAllRanges && window.getSelection().rangeCount > 0 && window.getSelection().getRangeAt(0).getClientRects().length > 0) { } else if (window.getSelection().removeAllRanges && window.getSelection().rangeCount > 0 && window.getSelection().getRangeAt(0).getClientRects().length > 0) {
window.getSelection().removeAllRanges(); window.getSelection().removeAllRanges();
} }
} }
else if(document['selection'] && document['selection'].empty) { else if (document['selection'] && document['selection'].empty) {
try { try {
document['selection'].empty(); document['selection'].empty();
} catch(error) { } catch(error) {
@ -395,7 +437,7 @@ export default {
}, },
calculateScrollbarWidth() { calculateScrollbarWidth() {
if(this.calculatedScrollbarWidth != null) if (this.calculatedScrollbarWidth != null)
return this.calculatedScrollbarWidth; return this.calculatedScrollbarWidth;
let scrollDiv = document.createElement("div"); let scrollDiv = document.createElement("div");
@ -411,7 +453,7 @@ export default {
}, },
getBrowser() { getBrowser() {
if(!this.browser) { if (!this.browser) {
let matched = this.resolveUserAgent(); let matched = this.resolveUserAgent();
this.browser = {}; this.browser = {};
@ -446,7 +488,7 @@ export default {
}, },
isVisible(element) { isVisible(element) {
return element.offsetParent != null; return element && element.offsetParent != null;
}, },
invokeElementMethod(element, methodName, args) { invokeElementMethod(element, methodName, args) {
@ -457,13 +499,15 @@ export default {
return !!(typeof window !== 'undefined' && window.document && window.document.createElement); return !!(typeof window !== 'undefined' && window.document && window.document.createElement);
}, },
getFocusableElements(element) { getFocusableElements(element, selector = '') {
let focusableElements = this.find(element, `button:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]), let focusableElements = this.find(element, `button:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
[href][clientHeight][clientWidth]:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]), [href][clientHeight][clientWidth]:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
input:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]), select:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]), input:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
textarea:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]), [tabIndex]:not([tabIndex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]), select:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
[contenteditable]:not([tabIndex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])` textarea:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
); [tabIndex]:not([tabIndex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
[contenteditable]:not([tabIndex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector}`
);
let visibleFocusableElements = []; let visibleFocusableElements = [];
for (let focusableElement of focusableElements) { for (let focusableElement of focusableElements) {
@ -474,8 +518,8 @@ export default {
return visibleFocusableElements; return visibleFocusableElements;
}, },
getFirstFocusableElement(element) { getFirstFocusableElement(element, selector) {
const focusableElements = this.getFocusableElements(element); const focusableElements = this.getFocusableElements(element, selector);
return focusableElements.length > 0 ? focusableElements[0] : null; return focusableElements.length > 0 ? focusableElements[0] : null;
}, },