primevue-mirror/components/lib/utils/DomHandler.js

754 lines
25 KiB
JavaScript
Executable File

export default {
innerWidth(el) {
if (el) {
let width = el.offsetWidth;
let style = getComputedStyle(el);
width += parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
return width;
}
return 0;
},
width(el) {
if (el) {
let width = el.offsetWidth;
let style = getComputedStyle(el);
width -= parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
return width;
}
return 0;
},
getWindowScrollTop() {
let doc = document.documentElement;
return (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
},
getWindowScrollLeft() {
let doc = document.documentElement;
return (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0);
},
getOuterWidth(el, margin) {
if (el) {
let width = el.offsetWidth;
if (margin) {
let style = getComputedStyle(el);
width += parseFloat(style.marginLeft) + parseFloat(style.marginRight);
}
return width;
}
return 0;
},
getOuterHeight(el, margin) {
if (el) {
let height = el.offsetHeight;
if (margin) {
let style = getComputedStyle(el);
height += parseFloat(style.marginTop) + parseFloat(style.marginBottom);
}
return height;
}
return 0;
},
getClientHeight(el, margin) {
if (el) {
let height = el.clientHeight;
if (margin) {
let style = getComputedStyle(el);
height += parseFloat(style.marginTop) + parseFloat(style.marginBottom);
}
return height;
}
return 0;
},
getViewport() {
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 };
},
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)
};
}
return {
top: 'auto',
left: 'auto'
};
},
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++;
}
}
return -1;
},
addMultipleClasses(element, className) {
if (element && className) {
className.split(' ').forEach((style) => this.addClass(element, style));
}
},
addClass(element, className) {
if (element && className && !this.hasClass(element, className)) {
if (element.classList) element.classList.add(className);
else element.className += ' ' + className;
}
},
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'), ' ');
}
},
hasClass(element, className) {
if (element) {
if (element.classList) return element.classList.contains(className);
else return new RegExp('(^| )' + className + '( |$)', 'gi').test(element.className);
}
return false;
},
addStyles(element, styles = {}) {
if (element) {
Object.entries(styles).forEach(([key, value]) => (element.style[key] = value));
}
},
find(element, selector) {
return this.isElement(element) ? element.querySelectorAll(selector) : [];
},
findSingle(element, selector) {
return this.isElement(element) ? element.querySelector(selector) : null;
},
createElement(type, attributes = {}, ...children) {
if (type) {
const element = document.createElement(type);
this.setAttributes(element, attributes);
element.append(...children);
return element;
}
return undefined;
},
setAttributes(element, attributes = {}) {
if (element) {
const computedStyles = (rule, value) => {
const styles = element?.$attrs?.[rule] ? [element?.$attrs?.[rule]] : [];
return [value].flat().reduce((cv, v) => {
if (v !== null && v !== undefined) {
const type = typeof v;
if (type === 'string' || type === 'number') {
cv.push(v);
} else if (type === 'object') {
const _cv = Array.isArray(v)
? computedStyles(rule, v)
: Object.entries(v).map(([_k, _v]) => (rule === 'style' && (!!_v || _v === 0) ? `${_k.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()}:${_v}` : !!_v ? _k : undefined));
cv = _cv.length ? cv.concat(_cv.filter((c) => !!c)) : cv;
}
}
return cv;
}, styles);
};
Object.entries(attributes).forEach(([key, value]) => {
if (value !== undefined && value !== null) {
const matchedEvent = key.match(/^on(.+)/);
if (matchedEvent) {
element.addEventListener(matchedEvent[1].toLowerCase(), value);
} else if (key === 'p-bind') {
this.setAttributes(element, value);
} else {
value = key === 'class' ? [...new Set(computedStyles('class', value))].join(' ').trim() : key === 'style' ? computedStyles('style', value).join(';').trim() : value;
(element.$attrs = element.$attrs || {}) && (element.$attrs[key] = value);
element.setAttribute(key, value);
}
}
});
}
},
getAttribute(element, name) {
if (element) {
const value = element.getAttribute(name);
if (!isNaN(value)) {
return +value;
}
if (value === 'true' || value === 'false') {
return value === 'true';
}
return value;
}
return undefined;
},
isAttributeEquals(element, name, value) {
return element ? this.getAttribute(element, name) === value : false;
},
isAttributeNotEquals(element, name, value) {
return !this.isAttributeEquals(element, name, value);
},
getHeight(el) {
if (el) {
let height = el.offsetHeight;
let style = getComputedStyle(el);
height -= parseFloat(style.paddingTop) + parseFloat(style.paddingBottom) + parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
return height;
}
return 0;
},
getWidth(el) {
if (el) {
let width = el.offsetWidth;
let style = getComputedStyle(el);
width -= parseFloat(style.paddingLeft) + parseFloat(style.paddingRight) + parseFloat(style.borderLeftWidth) + parseFloat(style.borderRightWidth);
return width;
}
return 0;
},
absolutePosition(element, target) {
if (element) {
const elementDimensions = element.offsetParent ? { width: element.offsetWidth, height: element.offsetHeight } : this.getHiddenElementDimensions(element);
const elementOuterHeight = elementDimensions.height;
const elementOuterWidth = elementDimensions.width;
const targetOuterHeight = target.offsetHeight;
const targetOuterWidth = target.offsetWidth;
const targetOffset = target.getBoundingClientRect();
const windowScrollTop = this.getWindowScrollTop();
const windowScrollLeft = this.getWindowScrollLeft();
const 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';
}
if (targetOffset.left + elementOuterWidth > viewport.width) left = Math.max(0, targetOffset.left + windowScrollLeft + targetOuterWidth - elementOuterWidth);
else left = targetOffset.left + windowScrollLeft;
element.style.top = top + 'px';
element.style.left = left + 'px';
}
},
relativePosition(element, target) {
if (element) {
const 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';
}
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;
}
element.style.top = top + 'px';
element.style.left = left + 'px';
}
},
getParents(element, parents = []) {
return element['parentNode'] === null ? parents : this.getParents(element.parentNode, parents.concat([element.parentNode]));
},
getScrollableParents(element) {
let scrollableParents = [];
if (element) {
let parents = this.getParents(element);
const overflowRegex = /(auto|scroll)/;
const overflowCheck = (node) => {
try {
let styleDeclaration = window['getComputedStyle'](node, null);
return overflowRegex.test(styleDeclaration.getPropertyValue('overflow')) || overflowRegex.test(styleDeclaration.getPropertyValue('overflowX')) || overflowRegex.test(styleDeclaration.getPropertyValue('overflowY'));
} catch (err) {
return false;
}
};
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);
}
}
}
if (parent.nodeType !== 9 && overflowCheck(parent)) {
scrollableParents.push(parent);
}
}
}
return scrollableParents;
},
getHiddenElementOuterHeight(element) {
if (element) {
element.style.visibility = 'hidden';
element.style.display = 'block';
let elementHeight = element.offsetHeight;
element.style.display = 'none';
element.style.visibility = 'visible';
return elementHeight;
}
return 0;
},
getHiddenElementOuterWidth(element) {
if (element) {
element.style.visibility = 'hidden';
element.style.display = 'block';
let elementWidth = element.offsetWidth;
element.style.display = 'none';
element.style.visibility = 'visible';
return elementWidth;
}
return 0;
},
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;
},
fadeIn(element, duration) {
if (element) {
element.style.opacity = 0;
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();
if (+opacity < 1) {
(window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
}
};
tick();
}
},
fadeOut(element, ms) {
if (element) {
let opacity = 1,
interval = 50,
duration = ms,
gap = interval / duration;
let fading = setInterval(() => {
opacity -= gap;
if (opacity <= 0) {
opacity = 0;
clearInterval(fading);
}
element.style.opacity = opacity;
}, interval);
}
},
getUserAgent() {
return navigator.userAgent;
},
appendChild(element, target) {
if (this.isElement(target)) target.appendChild(element);
else if (target.el && target.elElement) target.elElement.appendChild(element);
else throw new Error('Cannot append ' + target + ' to ' + element);
},
isElement(obj) {
return typeof HTMLElement === 'object' ? obj instanceof HTMLElement : obj && typeof obj === 'object' && obj !== null && obj.nodeType === 1 && typeof obj.nodeName === 'string';
},
scrollInView(container, item) {
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;
}
},
clearSelection() {
if (window.getSelection) {
if (window.getSelection().empty) {
window.getSelection().empty();
} else if (window.getSelection().removeAllRanges && window.getSelection().rangeCount > 0 && window.getSelection().getRangeAt(0).getClientRects().length > 0) {
window.getSelection().removeAllRanges();
}
} else if (document['selection'] && document['selection'].empty) {
try {
document['selection'].empty();
} catch (error) {
//ignore IE bug
}
}
},
getSelection() {
if (window.getSelection) return window.getSelection().toString();
else if (document.getSelection) return document.getSelection().toString();
else if (document['selection']) return document['selection'].createRange().text;
return null;
},
calculateScrollbarWidth() {
if (this.calculatedScrollbarWidth != null) return this.calculatedScrollbarWidth;
let scrollDiv = document.createElement('div');
this.addStyles(scrollDiv, {
width: '100px',
height: '100px',
overflow: 'scroll',
position: 'absolute',
top: '-9999px'
});
document.body.appendChild(scrollDiv);
let scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
document.body.removeChild(scrollDiv);
this.calculatedScrollbarWidth = scrollbarWidth;
return scrollbarWidth;
},
getBrowser() {
if (!this.browser) {
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;
},
resolveUserAgent() {
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'
};
},
isVisible(element) {
return element && element.offsetParent != null;
},
invokeElementMethod(element, methodName, args) {
element[methodName].apply(element, args);
},
isExist(element) {
return !!(element !== null && typeof element !== 'undefined' && element.nodeName && element.parentNode);
},
isClient() {
return !!(typeof window !== 'undefined' && window.document && window.document.createElement);
},
focus(el, options) {
el && document.activeElement !== el && el.focus(options);
},
isFocusableElement(element, selector = '') {
return this.isElement(element)
? element.matches(`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}`)
: false;
},
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;
},
getFirstFocusableElement(element, selector) {
const focusableElements = this.getFocusableElements(element, selector);
return focusableElements.length > 0 ? focusableElements[0] : null;
},
getLastFocusableElement(element, selector) {
const focusableElements = this.getFocusableElements(element, selector);
return focusableElements.length > 0 ? focusableElements[focusableElements.length - 1] : null;
},
getNextFocusableElement(container, element, selector) {
const focusableElements = this.getFocusableElements(container, selector);
const index = focusableElements.length > 0 ? focusableElements.findIndex((el) => el === element) : -1;
const nextIndex = index > -1 && focusableElements.length >= index + 1 ? index + 1 : -1;
return nextIndex > -1 ? focusableElements[nextIndex] : null;
},
isClickable(element) {
if (element) {
const targetNode = element.nodeName;
const parentNode = element.parentElement && element.parentElement.nodeName;
return (
targetNode === 'INPUT' ||
targetNode === 'TEXTAREA' ||
targetNode === 'BUTTON' ||
targetNode === 'A' ||
parentNode === 'INPUT' ||
parentNode === 'TEXTAREA' ||
parentNode === 'BUTTON' ||
parentNode === 'A' ||
!!element.closest('.p-button, .p-checkbox, .p-radiobutton') // @todo Add [data-pc-section="button"]
);
}
return false;
},
applyStyle(element, style) {
if (typeof style === 'string') {
element.style.cssText = style;
} else {
for (let prop in style) {
element.style[prop] = style[prop];
}
}
},
isIOS() {
return /iPad|iPhone|iPod/.test(navigator.userAgent) && !window['MSStream'];
},
isAndroid() {
return /(android)/i.test(navigator.userAgent);
},
isTouchDevice() {
return 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
},
hasCSSAnimation(element) {
if (element) {
const style = getComputedStyle(element);
const animationDuration = parseFloat(style.getPropertyValue('animation-duration') || '0');
return animationDuration > 0;
}
return false;
},
hasCSSTransition(element) {
if (element) {
const style = getComputedStyle(element);
const transitionDuration = parseFloat(style.getPropertyValue('transition-duration') || '0');
return transitionDuration > 0;
}
return false;
},
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));
}
}
}
};