primevue-mirror/components/utils/DomHandler.js

585 lines
20 KiB
JavaScript
Raw Normal View History

2021-10-02 15:58:31 +00:00
export default {
2019-10-01 13:00:26 +00:00
2021-10-02 15:58:31 +00:00
innerWidth(el) {
if (el) {
let width = el.offsetWidth;
let style = getComputedStyle(el);
2018-12-08 21:35:53 +00:00
width += parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
return width;
}
return 0;
2021-10-02 15:58:31 +00:00
},
2018-12-08 21:35:53 +00:00
2021-10-02 15:58:31 +00:00
width(el) {
if (el) {
let width = el.offsetWidth;
let style = getComputedStyle(el);
2018-12-08 21:35:53 +00:00
width -= parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
return width;
}
return 0;
2021-10-02 15:58:31 +00:00
},
2018-12-08 21:35:53 +00:00
2021-10-02 15:58:31 +00:00
getWindowScrollTop() {
2018-12-08 21:35:53 +00:00
let doc = document.documentElement;
return (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
2021-10-02 15:58:31 +00:00
},
2018-12-08 21:35:53 +00:00
2021-10-02 15:58:31 +00:00
getWindowScrollLeft() {
2018-12-08 21:35:53 +00:00
let doc = document.documentElement;
return (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0);
2021-10-02 15:58:31 +00:00
},
2018-12-08 21:35:53 +00:00
2021-10-02 15:58:31 +00:00
getOuterWidth(el, margin) {
2018-12-08 21:35:53 +00:00
if (el) {
let width = el.offsetWidth;
if (margin) {
let style = getComputedStyle(el);
width += parseFloat(style.marginLeft) + parseFloat(style.marginRight);
}
return width;
}
return 0;
2021-10-02 15:58:31 +00:00
},
2018-12-08 21:35:53 +00:00
2021-10-02 15:58:31 +00:00
getOuterHeight(el, margin) {
2018-12-08 21:35:53 +00:00
if (el) {
let height = el.offsetHeight;
if (margin) {
let style = getComputedStyle(el);
height += parseFloat(style.marginTop) + parseFloat(style.marginBottom);
}
2019-10-01 13:00:26 +00:00
2018-12-08 21:35:53 +00:00
return height;
}
return 0;
2021-10-02 15:58:31 +00:00
},
2018-12-08 21:35:53 +00:00
2021-10-02 15:58:31 +00:00
getClientHeight(el, margin) {
2019-11-19 11:54:24 +00:00
if (el) {
let height = el.clientHeight;
if (margin) {
let style = getComputedStyle(el);
height += parseFloat(style.marginTop) + parseFloat(style.marginBottom);
}
return height;
}
return 0;
2021-10-02 15:58:31 +00:00
},
2019-11-19 11:54:24 +00:00
2021-10-02 15:58:31 +00:00
getViewport() {
2018-12-08 21:35:53 +00:00
let win = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
w = win.innerWidth || e.clientWidth || g.clientWidth,
h = win.innerHeight || e.clientHeight || g.clientHeight;
return { width: w, height: h };
2021-10-02 15:58:31 +00:00
},
2018-12-08 21:35:53 +00:00
2021-10-02 15:58:31 +00:00
getOffset(el) {
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),
};
}
2018-12-08 21:35:53 +00:00
return {
top: 'auto',
left: 'auto'
2018-12-08 21:35:53 +00:00
};
2021-10-02 15:58:31 +00:00
},
2018-12-08 21:35:53 +00:00
2021-10-02 15:58:31 +00:00
index(element) {
if (element) {
let children = element.parentNode.childNodes;
let num = 0;
for (let i = 0; i < children.length; i++) {
if (children[i] === element) return num;
if (children[i].nodeType === 1) num++;
}
2018-12-08 21:35:53 +00:00
}
return -1;
2021-10-02 15:58:31 +00:00
},
2018-12-08 21:35:53 +00:00
2021-10-02 15:58:31 +00:00
addMultipleClasses(element, className) {
if (element && className) {
if (element.classList) {
let styles = className.split(' ');
for (let i = 0; i < styles.length; i++) {
element.classList.add(styles[i]);
}
2018-12-08 21:35:53 +00:00
}
else {
let styles = className.split(' ');
for (let i = 0; i < styles.length; i++) {
element.className += ' ' + styles[i];
}
2018-12-08 21:35:53 +00:00
}
}
2021-10-02 15:58:31 +00:00
},
2018-12-08 21:35:53 +00:00
2021-10-02 15:58:31 +00:00
addClass(element, className) {
if (element && className) {
if (element.classList)
element.classList.add(className);
else
element.className += ' ' + className;
}
2021-10-02 15:58:31 +00:00
},
2018-12-08 21:35:53 +00:00
2021-10-02 15:58:31 +00:00
removeClass(element, className) {
if (element && className) {
if (element.classList)
element.classList.remove(className);
else
element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
}
2021-10-02 15:58:31 +00:00
},
2018-12-08 21:35:53 +00:00
2021-10-02 15:58:31 +00:00
hasClass(element, className) {
if (element) {
if (element.classList)
return element.classList.contains(className);
else
return new RegExp('(^| )' + className + '( |$)', 'gi').test(element.className);
}
return false;
2021-10-02 15:58:31 +00:00
},
2018-12-08 21:35:53 +00:00
2021-10-02 15:58:31 +00:00
find(element, selector) {
return element ? element.querySelectorAll(selector) : [];
2021-10-02 15:58:31 +00:00
},
2018-12-08 21:35:53 +00:00
2021-10-02 15:58:31 +00:00
findSingle(element, selector) {
if (element) {
return element.querySelector(selector);
}
return null;
2021-10-02 15:58:31 +00:00
},
2018-12-08 21:35:53 +00:00
2021-10-02 15:58:31 +00:00
getHeight(el) {
if (el) {
let height = el.offsetHeight;
let style = getComputedStyle(el);
2018-12-08 21:35:53 +00:00
height -= parseFloat(style.paddingTop) + parseFloat(style.paddingBottom) + parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
2018-12-08 21:35:53 +00:00
return height;
}
return 0;
2021-10-02 15:58:31 +00:00
},
2018-12-08 21:35:53 +00:00
2021-10-02 15:58:31 +00:00
getWidth(el) {
if (el) {
let width = el.offsetWidth;
let style = getComputedStyle(el);
2018-12-08 21:35:53 +00:00
width -= parseFloat(style.paddingLeft) + parseFloat(style.paddingRight) + parseFloat(style.borderLeftWidth) + parseFloat(style.borderRightWidth);
2018-12-08 21:35:53 +00:00
return width;
}
return 0;
2021-10-02 15:58:31 +00:00
},
2018-12-08 21:35:53 +00:00
2021-10-02 15:58:31 +00:00
absolutePosition(element, target) {
if (element) {
let elementDimensions = element.offsetParent ? { width: element.offsetWidth, height: element.offsetHeight } : this.getHiddenElementDimensions(element)
let elementOuterHeight = elementDimensions.height;
let elementOuterWidth = elementDimensions.width;
let targetOuterHeight = target.offsetHeight;
let targetOuterWidth = target.offsetWidth;
let targetOffset = target.getBoundingClientRect();
let windowScrollTop = this.getWindowScrollTop();
let windowScrollLeft = this.getWindowScrollLeft();
let viewport = this.getViewport();
let top, left;
if (targetOffset.top + targetOuterHeight + elementOuterHeight > viewport.height) {
top = targetOffset.top + windowScrollTop - elementOuterHeight;
element.style.transformOrigin = 'bottom';
if (top < 0) {
top = windowScrollTop;
}
}
else {
top = targetOuterHeight + targetOffset.top + windowScrollTop;
element.style.transformOrigin = 'top';
2020-08-04 12:56:47 +00:00
}
2018-12-08 21:35:53 +00:00
if (targetOffset.left + elementOuterWidth > viewport.width)
left = Math.max(0, targetOffset.left + windowScrollLeft + targetOuterWidth - elementOuterWidth);
else
left = targetOffset.left + windowScrollLeft;
2018-12-08 21:35:53 +00:00
element.style.top = top + 'px';
element.style.left = left + 'px';
}
2021-10-02 15:58:31 +00:00
},
2018-12-08 21:35:53 +00:00
2021-10-02 15:58:31 +00:00
relativePosition(element, target) {
if (element) {
let elementDimensions = element.offsetParent ? { width: element.offsetWidth, height: element.offsetHeight } : this.getHiddenElementDimensions(element);
const targetHeight = target.offsetHeight;
const targetOffset = target.getBoundingClientRect();
const viewport = this.getViewport();
let top, left;
if ((targetOffset.top + targetHeight + elementDimensions.height) > viewport.height) {
top = -1 * (elementDimensions.height);
element.style.transformOrigin = 'bottom';
if (targetOffset.top + top < 0) {
top = -1 * targetOffset.top;
}
}
else {
top = targetHeight;
element.style.transformOrigin = 'top';
2020-08-04 12:56:47 +00:00
}
2018-12-08 21:35:53 +00:00
if (elementDimensions.width > viewport.width) {
// element wider then viewport and cannot fit on screen (align at left side of viewport)
left = targetOffset.left * -1;
}
else if ((targetOffset.left + elementDimensions.width) > viewport.width) {
// element wider then viewport but can be fit on screen (align at right side of viewport)
left = (targetOffset.left + elementDimensions.width - viewport.width) * -1;
}
else {
// element fits on screen (align with target)
left = 0;
}
2018-12-08 21:35:53 +00:00
element.style.top = top + 'px';
element.style.left = left + 'px';
}
2021-10-02 15:58:31 +00:00
},
2019-10-01 13:00:26 +00:00
2021-10-02 15:58:31 +00:00
getParents(element, parents = []) {
return element['parentNode'] === null ? parents : this.getParents(element.parentNode, parents.concat([element.parentNode]));
2021-10-02 15:58:31 +00:00
},
2021-10-02 15:58:31 +00:00
getScrollableParents(element) {
let scrollableParents = [];
if (element) {
let parents = this.getParents(element);
const overflowRegex = /(auto|scroll)/;
const overflowCheck = (node) => {
let styleDeclaration = window['getComputedStyle'](node, null);
return overflowRegex.test(styleDeclaration.getPropertyValue('overflow')) || overflowRegex.test(styleDeclaration.getPropertyValue('overflowX')) || overflowRegex.test(styleDeclaration.getPropertyValue('overflowY'));
};
for (let parent of parents) {
let scrollSelectors = parent.nodeType === 1 && parent.dataset['scrollselectors'];
if (scrollSelectors) {
let selectors = scrollSelectors.split(',');
for (let selector of selectors) {
let el = this.findSingle(parent, selector);
if (el && overflowCheck(el)) {
scrollableParents.push(el);
}
}
}
2021-03-02 10:29:07 +00:00
if (parent.nodeType !== 9 && overflowCheck(parent)) {
scrollableParents.push(parent);
}
}
}
return scrollableParents;
2021-10-02 15:58:31 +00:00
},
2021-10-02 15:58:31 +00:00
getHiddenElementOuterHeight(element) {
if (element) {
element.style.visibility = 'hidden';
element.style.display = 'block';
let elementHeight = element.offsetHeight;
element.style.display = 'none';
element.style.visibility = 'visible';
2018-12-08 21:35:53 +00:00
return elementHeight;
}
return 0;
2021-10-02 15:58:31 +00:00
},
2018-12-08 21:35:53 +00:00
2021-10-02 15:58:31 +00:00
getHiddenElementOuterWidth(element) {
if (element) {
element.style.visibility = 'hidden';
element.style.display = 'block';
let elementWidth = element.offsetWidth;
element.style.display = 'none';
element.style.visibility = 'visible';
2018-12-08 21:35:53 +00:00
return elementWidth;
}
return 0;
2021-10-02 15:58:31 +00:00
},
2018-12-08 21:35:53 +00:00
2021-10-02 15:58:31 +00:00
getHiddenElementDimensions(element) {
if (element) {
let dimensions = {};
element.style.visibility = 'hidden';
element.style.display = 'block';
dimensions.width = element.offsetWidth;
dimensions.height = element.offsetHeight;
element.style.display = 'none';
element.style.visibility = 'visible';
return dimensions;
}
return 0;
2021-10-02 15:58:31 +00:00
},
2018-12-08 21:35:53 +00:00
2021-10-02 15:58:31 +00:00
fadeIn(element, duration) {
if (element) {
element.style.opacity = 0;
2018-12-08 21:35:53 +00:00
let last = +new Date();
let opacity = 0;
let tick = function () {
opacity = +element.style.opacity + (new Date().getTime() - last) / duration;
element.style.opacity = opacity;
last = +new Date();
2018-12-08 21:35:53 +00:00
if (+opacity < 1) {
(window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
}
};
2018-12-08 21:35:53 +00:00
tick();
}
2021-10-02 15:58:31 +00:00
},
2018-12-08 21:35:53 +00:00
2021-10-02 15:58:31 +00:00
fadeOut(element, ms) {
if (element) {
let opacity = 1,
interval = 50,
duration = ms,
gap = interval / duration;
2018-12-08 21:35:53 +00:00
let fading = setInterval(() => {
opacity -= gap;
2018-12-08 21:35:53 +00:00
if (opacity <= 0) {
opacity = 0;
clearInterval(fading);
}
2019-10-01 13:00:26 +00:00
element.style.opacity = opacity;
}, interval);
}
2021-10-02 15:58:31 +00:00
},
2018-12-08 21:35:53 +00:00
2021-10-02 15:58:31 +00:00
getUserAgent() {
2018-12-08 21:35:53 +00:00
return navigator.userAgent;
2021-10-02 15:58:31 +00:00
},
2018-12-08 21:35:53 +00:00
2021-10-02 15:58:31 +00:00
appendChild(element, target) {
if (this.isElement(target))
2018-12-08 21:35:53 +00:00
target.appendChild(element);
else if (target.el && target.elElement)
target.elElement.appendChild(element);
2018-12-08 21:35:53 +00:00
else
throw new Error('Cannot append ' + target + ' to ' + element);
2021-10-02 15:58:31 +00:00
},
2018-12-08 21:35:53 +00:00
2021-10-02 15:58:31 +00:00
scrollInView(container, item) {
2018-12-08 21:35:53 +00:00
let borderTopValue = getComputedStyle(container).getPropertyValue('borderTopWidth');
let borderTop = borderTopValue ? parseFloat(borderTopValue) : 0;
let paddingTopValue = getComputedStyle(container).getPropertyValue('paddingTop');
let paddingTop = paddingTopValue ? parseFloat(paddingTopValue) : 0;
let containerRect = container.getBoundingClientRect();
let itemRect = item.getBoundingClientRect();
let offset = (itemRect.top + document.body.scrollTop) - (containerRect.top + document.body.scrollTop) - borderTop - paddingTop;
let scroll = container.scrollTop;
let elementHeight = container.clientHeight;
let itemHeight = this.getOuterHeight(item);
if (offset < 0) {
container.scrollTop = scroll + offset;
}
else if ((offset + itemHeight) > elementHeight) {
container.scrollTop = scroll + offset - elementHeight + itemHeight;
}
2021-10-02 15:58:31 +00:00
},
2018-12-08 21:35:53 +00:00
2021-10-02 15:58:31 +00:00
clearSelection() {
if (window.getSelection) {
if (window.getSelection().empty) {
2018-12-08 21:35:53 +00:00
window.getSelection().empty();
} else if (window.getSelection().removeAllRanges && window.getSelection().rangeCount > 0 && window.getSelection().getRangeAt(0).getClientRects().length > 0) {
2018-12-08 21:35:53 +00:00
window.getSelection().removeAllRanges();
}
}
else if (document['selection'] && document['selection'].empty) {
2018-12-08 21:35:53 +00:00
try {
document['selection'].empty();
} catch(error) {
//ignore IE bug
}
}
2021-10-02 15:58:31 +00:00
},
2018-12-08 21:35:53 +00:00
2021-10-02 15:58:31 +00:00
calculateScrollbarWidth() {
if (this.calculatedScrollbarWidth != null)
2018-12-08 21:35:53 +00:00
return this.calculatedScrollbarWidth;
2019-10-01 13:00:26 +00:00
2018-12-08 21:35:53 +00:00
let scrollDiv = document.createElement("div");
scrollDiv.className = "p-scrollbar-measure";
document.body.appendChild(scrollDiv);
let scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
document.body.removeChild(scrollDiv);
this.calculatedScrollbarWidth = scrollbarWidth;
2019-10-01 13:00:26 +00:00
2018-12-08 21:35:53 +00:00
return scrollbarWidth;
2021-10-02 15:58:31 +00:00
},
2018-12-08 21:35:53 +00:00
2021-10-02 15:58:31 +00:00
getBrowser() {
if (!this.browser) {
2018-12-08 21:35:53 +00:00
let matched = this.resolveUserAgent();
this.browser = {};
if (matched.browser) {
this.browser[matched.browser] = true;
this.browser['version'] = matched.version;
}
if (this.browser['chrome']) {
this.browser['webkit'] = true;
} else if (this.browser['webkit']) {
this.browser['safari'] = true;
}
}
return this.browser;
2021-10-02 15:58:31 +00:00
},
2018-12-08 21:35:53 +00:00
2021-10-02 15:58:31 +00:00
resolveUserAgent() {
2018-12-08 21:35:53 +00:00
let ua = navigator.userAgent.toLowerCase();
let match = /(chrome)[ ]([\w.]+)/.exec(ua) ||
/(webkit)[ ]([\w.]+)/.exec(ua) ||
/(opera)(?:.*version|)[ ]([\w.]+)/.exec(ua) ||
/(msie) ([\w.]+)/.exec(ua) ||
(ua.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec(ua)) ||
[];
return {
browser: match[1] || "",
version: match[2] || "0"
};
2021-10-02 15:58:31 +00:00
},
2018-12-08 21:35:53 +00:00
2021-10-02 15:58:31 +00:00
isVisible(element) {
return element && element.offsetParent != null;
2021-10-02 15:58:31 +00:00
},
2019-10-30 07:42:52 +00:00
2021-10-02 15:58:31 +00:00
invokeElementMethod(element, methodName, args) {
2019-10-30 07:42:52 +00:00
(element)[methodName].apply(element, args);
2021-10-02 15:58:31 +00:00
},
isClient() {
return !!(typeof window !== 'undefined' && window.document && window.document.createElement);
},
getFocusableElements(element, selector = '') {
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])${selector},
input:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
select:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
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 = [];
for (let focusableElement of focusableElements) {
if (getComputedStyle(focusableElement).display != "none" && getComputedStyle(focusableElement).visibility != "hidden")
visibleFocusableElements.push(focusableElement);
}
return visibleFocusableElements;
2021-10-02 15:58:31 +00:00
},
2020-05-02 09:19:17 +00:00
getFirstFocusableElement(element, selector) {
const focusableElements = this.getFocusableElements(element, selector);
return focusableElements.length > 0 ? focusableElements[0] : null;
},
2021-10-02 15:58:31 +00:00
isClickable(element) {
2020-05-02 09:19:17 +00:00
const targetNode = element.nodeName;
const parentNode = element.parentElement && element.parentElement.nodeName;
return (targetNode == 'INPUT' || targetNode == 'BUTTON' || targetNode == 'A' ||
parentNode == 'INPUT' || parentNode == 'BUTTON' || parentNode == 'A' ||
2020-05-02 09:46:30 +00:00
this.hasClass(element, 'p-button') || this.hasClass(element.parentElement, 'p-button') ||
2020-05-02 09:55:09 +00:00
this.hasClass(element.parentElement, 'p-checkbox') || this.hasClass(element.parentElement, 'p-radiobutton')
2020-05-02 09:19:17 +00:00
);
2021-10-02 15:58:31 +00:00
},
2021-10-02 15:58:31 +00:00
applyStyle(element, style) {
if (typeof style === 'string') {
element.style.cssText = style;
}
else {
for (let prop in style) {
element.style[prop] = style[prop];
}
}
2021-10-02 15:58:31 +00:00
},
2021-04-28 07:34:17 +00:00
2021-10-02 15:58:31 +00:00
isIOS() {
2021-04-28 07:34:17 +00:00
return /iPad|iPhone|iPod/.test(navigator.userAgent) && !window['MSStream'];
2021-10-02 15:58:31 +00:00
},
2021-04-28 07:34:17 +00:00
2021-10-02 15:58:31 +00:00
isAndroid() {
2021-04-28 07:34:17 +00:00
return /(android)/i.test(navigator.userAgent);
2021-10-02 15:58:31 +00:00
},
2021-10-02 15:58:31 +00:00
isTouchDevice() {
return (('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0));
},
exportCSV(csv, filename) {
let blob = new Blob([csv], {
type: 'application/csv;charset=utf-8;'
});
if (window.navigator.msSaveOrOpenBlob) {
navigator.msSaveOrOpenBlob(blob, filename + '.csv');
}
else {
let link = document.createElement("a");
if (link.download !== undefined) {
link.setAttribute('href', URL.createObjectURL(blob));
link.setAttribute('download', filename + '.csv');
link.style.display = 'none';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
else {
csv = 'data:text/csv;charset=utf-8,' + csv;
window.open(encodeURI(csv));
}
}
}
}