You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
432 lines
18 KiB
JavaScript
432 lines
18 KiB
JavaScript
|
6 years ago
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var DomHandler = /** @class */ (function () {
|
||
|
|
function DomHandler() {
|
||
|
|
}
|
||
|
|
DomHandler.addClass = function (element, className) {
|
||
|
|
if (element.classList)
|
||
|
|
element.classList.add(className);
|
||
|
|
else
|
||
|
|
element.className += ' ' + className;
|
||
|
|
};
|
||
|
|
DomHandler.addMultipleClasses = function (element, className) {
|
||
|
|
if (element.classList) {
|
||
|
|
var styles = className.split(' ');
|
||
|
|
for (var i = 0; i < styles.length; i++) {
|
||
|
|
element.classList.add(styles[i]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
var styles = className.split(' ');
|
||
|
|
for (var i = 0; i < styles.length; i++) {
|
||
|
|
element.className += ' ' + styles[i];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
DomHandler.removeClass = function (element, className) {
|
||
|
|
if (element.classList)
|
||
|
|
element.classList.remove(className);
|
||
|
|
else
|
||
|
|
element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
|
||
|
|
};
|
||
|
|
DomHandler.hasClass = function (element, className) {
|
||
|
|
if (element.classList)
|
||
|
|
return element.classList.contains(className);
|
||
|
|
else
|
||
|
|
return new RegExp('(^| )' + className + '( |$)', 'gi').test(element.className);
|
||
|
|
};
|
||
|
|
DomHandler.siblings = function (element) {
|
||
|
|
return Array.prototype.filter.call(element.parentNode.children, function (child) {
|
||
|
|
return child !== element;
|
||
|
|
});
|
||
|
|
};
|
||
|
|
DomHandler.find = function (element, selector) {
|
||
|
|
return Array.from(element.querySelectorAll(selector));
|
||
|
|
};
|
||
|
|
DomHandler.findSingle = function (element, selector) {
|
||
|
|
if (element) {
|
||
|
|
return element.querySelector(selector);
|
||
|
|
}
|
||
|
|
return null;
|
||
|
|
};
|
||
|
|
DomHandler.index = function (element) {
|
||
|
|
var children = element.parentNode.childNodes;
|
||
|
|
var num = 0;
|
||
|
|
for (var i = 0; i < children.length; i++) {
|
||
|
|
if (children[i] == element)
|
||
|
|
return num;
|
||
|
|
if (children[i].nodeType == 1)
|
||
|
|
num++;
|
||
|
|
}
|
||
|
|
return -1;
|
||
|
|
};
|
||
|
|
DomHandler.indexWithinGroup = function (element, attributeName) {
|
||
|
|
var children = element.parentNode.childNodes;
|
||
|
|
var num = 0;
|
||
|
|
for (var i = 0; i < children.length; i++) {
|
||
|
|
if (children[i] == element)
|
||
|
|
return num;
|
||
|
|
if (children[i].attributes && children[i].attributes[attributeName] && children[i].nodeType == 1)
|
||
|
|
num++;
|
||
|
|
}
|
||
|
|
return -1;
|
||
|
|
};
|
||
|
|
DomHandler.relativePosition = function (element, target) {
|
||
|
|
var elementDimensions = element.offsetParent ? { width: element.offsetWidth, height: element.offsetHeight } : this.getHiddenElementDimensions(element);
|
||
|
|
var targetHeight = target.offsetHeight;
|
||
|
|
var targetOffset = target.getBoundingClientRect();
|
||
|
|
var viewport = this.getViewport();
|
||
|
|
var top, left;
|
||
|
|
if ((targetOffset.top + targetHeight + elementDimensions.height) > viewport.height) {
|
||
|
|
top = -1 * (elementDimensions.height);
|
||
|
|
if (targetOffset.top + top < 0) {
|
||
|
|
top = -1 * targetOffset.top;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
top = targetHeight;
|
||
|
|
}
|
||
|
|
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';
|
||
|
|
};
|
||
|
|
DomHandler.absolutePosition = function (element, target) {
|
||
|
|
var elementDimensions = element.offsetParent ? { width: element.offsetWidth, height: element.offsetHeight } : this.getHiddenElementDimensions(element);
|
||
|
|
var elementOuterHeight = elementDimensions.height;
|
||
|
|
var elementOuterWidth = elementDimensions.width;
|
||
|
|
var targetOuterHeight = target.offsetHeight;
|
||
|
|
var targetOuterWidth = target.offsetWidth;
|
||
|
|
var targetOffset = target.getBoundingClientRect();
|
||
|
|
var windowScrollTop = this.getWindowScrollTop();
|
||
|
|
var windowScrollLeft = this.getWindowScrollLeft();
|
||
|
|
var viewport = this.getViewport();
|
||
|
|
var top, left;
|
||
|
|
if (targetOffset.top + targetOuterHeight + elementOuterHeight > viewport.height) {
|
||
|
|
top = targetOffset.top + windowScrollTop - elementOuterHeight;
|
||
|
|
if (top < 0) {
|
||
|
|
top = windowScrollTop;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
top = targetOuterHeight + targetOffset.top + windowScrollTop;
|
||
|
|
}
|
||
|
|
if (targetOffset.left + targetOuterWidth + 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';
|
||
|
|
};
|
||
|
|
DomHandler.getHiddenElementOuterHeight = function (element) {
|
||
|
|
element.style.visibility = 'hidden';
|
||
|
|
element.style.display = 'block';
|
||
|
|
var elementHeight = element.offsetHeight;
|
||
|
|
element.style.display = 'none';
|
||
|
|
element.style.visibility = 'visible';
|
||
|
|
return elementHeight;
|
||
|
|
};
|
||
|
|
DomHandler.getHiddenElementOuterWidth = function (element) {
|
||
|
|
element.style.visibility = 'hidden';
|
||
|
|
element.style.display = 'block';
|
||
|
|
var elementWidth = element.offsetWidth;
|
||
|
|
element.style.display = 'none';
|
||
|
|
element.style.visibility = 'visible';
|
||
|
|
return elementWidth;
|
||
|
|
};
|
||
|
|
DomHandler.getHiddenElementDimensions = function (element) {
|
||
|
|
var 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;
|
||
|
|
};
|
||
|
|
DomHandler.scrollInView = function (container, item) {
|
||
|
|
var borderTopValue = getComputedStyle(container).getPropertyValue('borderTopWidth');
|
||
|
|
var borderTop = borderTopValue ? parseFloat(borderTopValue) : 0;
|
||
|
|
var paddingTopValue = getComputedStyle(container).getPropertyValue('paddingTop');
|
||
|
|
var paddingTop = paddingTopValue ? parseFloat(paddingTopValue) : 0;
|
||
|
|
var containerRect = container.getBoundingClientRect();
|
||
|
|
var itemRect = item.getBoundingClientRect();
|
||
|
|
var offset = (itemRect.top + document.body.scrollTop) - (containerRect.top + document.body.scrollTop) - borderTop - paddingTop;
|
||
|
|
var scroll = container.scrollTop;
|
||
|
|
var elementHeight = container.clientHeight;
|
||
|
|
var itemHeight = this.getOuterHeight(item);
|
||
|
|
if (offset < 0) {
|
||
|
|
container.scrollTop = scroll + offset;
|
||
|
|
}
|
||
|
|
else if ((offset + itemHeight) > elementHeight) {
|
||
|
|
container.scrollTop = scroll + offset - elementHeight + itemHeight;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
DomHandler.fadeIn = function (element, duration) {
|
||
|
|
element.style.opacity = 0;
|
||
|
|
var last = +new Date();
|
||
|
|
var opacity = 0;
|
||
|
|
var tick = function () {
|
||
|
|
opacity = +element.style.opacity.replace(",", ".") + (new Date().getTime() - last) / duration;
|
||
|
|
element.style.opacity = opacity;
|
||
|
|
last = +new Date();
|
||
|
|
if (+opacity < 1) {
|
||
|
|
(window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
tick();
|
||
|
|
};
|
||
|
|
DomHandler.fadeOut = function (element, ms) {
|
||
|
|
var opacity = 1, interval = 50, duration = ms, gap = interval / duration;
|
||
|
|
var fading = setInterval(function () {
|
||
|
|
opacity = opacity - gap;
|
||
|
|
if (opacity <= 0) {
|
||
|
|
opacity = 0;
|
||
|
|
clearInterval(fading);
|
||
|
|
}
|
||
|
|
element.style.opacity = opacity;
|
||
|
|
}, interval);
|
||
|
|
};
|
||
|
|
DomHandler.getWindowScrollTop = function () {
|
||
|
|
var doc = document.documentElement;
|
||
|
|
return (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
|
||
|
|
};
|
||
|
|
DomHandler.getWindowScrollLeft = function () {
|
||
|
|
var doc = document.documentElement;
|
||
|
|
return (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0);
|
||
|
|
};
|
||
|
|
DomHandler.matches = function (element, selector) {
|
||
|
|
var p = Element.prototype;
|
||
|
|
var f = p['matches'] || p.webkitMatchesSelector || p['mozMatchesSelector'] || p['msMatchesSelector'] || function (s) {
|
||
|
|
return [].indexOf.call(document.querySelectorAll(s), this) !== -1;
|
||
|
|
};
|
||
|
|
return f.call(element, selector);
|
||
|
|
};
|
||
|
|
DomHandler.getOuterWidth = function (el, margin) {
|
||
|
|
var width = el.offsetWidth;
|
||
|
|
if (margin) {
|
||
|
|
var style = getComputedStyle(el);
|
||
|
|
width += parseFloat(style.marginLeft) + parseFloat(style.marginRight);
|
||
|
|
}
|
||
|
|
return width;
|
||
|
|
};
|
||
|
|
DomHandler.getHorizontalPadding = function (el) {
|
||
|
|
var style = getComputedStyle(el);
|
||
|
|
return parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
|
||
|
|
};
|
||
|
|
DomHandler.getHorizontalMargin = function (el) {
|
||
|
|
var style = getComputedStyle(el);
|
||
|
|
return parseFloat(style.marginLeft) + parseFloat(style.marginRight);
|
||
|
|
};
|
||
|
|
DomHandler.innerWidth = function (el) {
|
||
|
|
var width = el.offsetWidth;
|
||
|
|
var style = getComputedStyle(el);
|
||
|
|
width += parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
|
||
|
|
return width;
|
||
|
|
};
|
||
|
|
DomHandler.width = function (el) {
|
||
|
|
var width = el.offsetWidth;
|
||
|
|
var style = getComputedStyle(el);
|
||
|
|
width -= parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
|
||
|
|
return width;
|
||
|
|
};
|
||
|
|
DomHandler.getInnerHeight = function (el) {
|
||
|
|
var height = el.offsetHeight;
|
||
|
|
var style = getComputedStyle(el);
|
||
|
|
height += parseFloat(style.paddingTop) + parseFloat(style.paddingBottom);
|
||
|
|
return height;
|
||
|
|
};
|
||
|
|
DomHandler.getOuterHeight = function (el, margin) {
|
||
|
|
var height = el.offsetHeight;
|
||
|
|
if (margin) {
|
||
|
|
var style = getComputedStyle(el);
|
||
|
|
height += parseFloat(style.marginTop) + parseFloat(style.marginBottom);
|
||
|
|
}
|
||
|
|
return height;
|
||
|
|
};
|
||
|
|
DomHandler.getHeight = function (el) {
|
||
|
|
var height = el.offsetHeight;
|
||
|
|
var style = getComputedStyle(el);
|
||
|
|
height -= parseFloat(style.paddingTop) + parseFloat(style.paddingBottom) + parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
|
||
|
|
return height;
|
||
|
|
};
|
||
|
|
DomHandler.getWidth = function (el) {
|
||
|
|
var width = el.offsetWidth;
|
||
|
|
var style = getComputedStyle(el);
|
||
|
|
width -= parseFloat(style.paddingLeft) + parseFloat(style.paddingRight) + parseFloat(style.borderLeftWidth) + parseFloat(style.borderRightWidth);
|
||
|
|
return width;
|
||
|
|
};
|
||
|
|
DomHandler.getViewport = function () {
|
||
|
|
var 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 };
|
||
|
|
};
|
||
|
|
DomHandler.getOffset = function (el) {
|
||
|
|
var rect = el.getBoundingClientRect();
|
||
|
|
return {
|
||
|
|
top: rect.top + document.body.scrollTop,
|
||
|
|
left: rect.left + document.body.scrollLeft
|
||
|
|
};
|
||
|
|
};
|
||
|
|
DomHandler.replaceElementWith = function (element, replacementElement) {
|
||
|
|
var parentNode = element.parentNode;
|
||
|
|
if (!parentNode)
|
||
|
|
throw "Can't replace element";
|
||
|
|
return parentNode.replaceChild(replacementElement, element);
|
||
|
|
};
|
||
|
|
DomHandler.getUserAgent = function () {
|
||
|
|
return navigator.userAgent;
|
||
|
|
};
|
||
|
|
DomHandler.isIE = function () {
|
||
|
|
var ua = window.navigator.userAgent;
|
||
|
|
var msie = ua.indexOf('MSIE ');
|
||
|
|
if (msie > 0) {
|
||
|
|
// IE 10 or older => return version number
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
var trident = ua.indexOf('Trident/');
|
||
|
|
if (trident > 0) {
|
||
|
|
// IE 11 => return version number
|
||
|
|
var rv = ua.indexOf('rv:');
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
var edge = ua.indexOf('Edge/');
|
||
|
|
if (edge > 0) {
|
||
|
|
// Edge (IE 12+) => return version number
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
// other browser
|
||
|
|
return false;
|
||
|
|
};
|
||
|
|
DomHandler.isIOS = function () {
|
||
|
|
return /iPad|iPhone|iPod/.test(navigator.userAgent) && !window['MSStream'];
|
||
|
|
};
|
||
|
|
DomHandler.isAndroid = function () {
|
||
|
|
return /(android)/i.test(navigator.userAgent);
|
||
|
|
};
|
||
|
|
DomHandler.appendChild = function (element, target) {
|
||
|
|
if (this.isElement(target))
|
||
|
|
target.appendChild(element);
|
||
|
|
else if (target.el && target.el.nativeElement)
|
||
|
|
target.el.nativeElement.appendChild(element);
|
||
|
|
else
|
||
|
|
throw 'Cannot append ' + target + ' to ' + element;
|
||
|
|
};
|
||
|
|
DomHandler.removeChild = function (element, target) {
|
||
|
|
if (this.isElement(target))
|
||
|
|
target.removeChild(element);
|
||
|
|
else if (target.el && target.el.nativeElement)
|
||
|
|
target.el.nativeElement.removeChild(element);
|
||
|
|
else
|
||
|
|
throw 'Cannot remove ' + element + ' from ' + target;
|
||
|
|
};
|
||
|
|
DomHandler.isElement = function (obj) {
|
||
|
|
return (typeof HTMLElement === "object" ? obj instanceof HTMLElement :
|
||
|
|
obj && typeof obj === "object" && obj !== null && obj.nodeType === 1 && typeof obj.nodeName === "string");
|
||
|
|
};
|
||
|
|
DomHandler.calculateScrollbarWidth = function (el) {
|
||
|
|
if (el) {
|
||
|
|
var style = getComputedStyle(el);
|
||
|
|
return (el.offsetWidth - el.clientWidth - parseFloat(style.borderLeftWidth) - parseFloat(style.borderRightWidth));
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if (this.calculatedScrollbarWidth !== null)
|
||
|
|
return this.calculatedScrollbarWidth;
|
||
|
|
var scrollDiv = document.createElement("div");
|
||
|
|
scrollDiv.className = "ui-scrollbar-measure";
|
||
|
|
document.body.appendChild(scrollDiv);
|
||
|
|
var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
|
||
|
|
document.body.removeChild(scrollDiv);
|
||
|
|
this.calculatedScrollbarWidth = scrollbarWidth;
|
||
|
|
return scrollbarWidth;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
DomHandler.calculateScrollbarHeight = function () {
|
||
|
|
if (this.calculatedScrollbarHeight !== null)
|
||
|
|
return this.calculatedScrollbarHeight;
|
||
|
|
var scrollDiv = document.createElement("div");
|
||
|
|
scrollDiv.className = "ui-scrollbar-measure";
|
||
|
|
document.body.appendChild(scrollDiv);
|
||
|
|
var scrollbarHeight = scrollDiv.offsetHeight - scrollDiv.clientHeight;
|
||
|
|
document.body.removeChild(scrollDiv);
|
||
|
|
this.calculatedScrollbarWidth = scrollbarHeight;
|
||
|
|
return scrollbarHeight;
|
||
|
|
};
|
||
|
|
DomHandler.invokeElementMethod = function (element, methodName, args) {
|
||
|
|
element[methodName].apply(element, args);
|
||
|
|
};
|
||
|
|
DomHandler.clearSelection = function () {
|
||
|
|
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
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
DomHandler.getBrowser = function () {
|
||
|
|
if (!this.browser) {
|
||
|
|
var 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;
|
||
|
|
};
|
||
|
|
DomHandler.resolveUserAgent = function () {
|
||
|
|
var ua = navigator.userAgent.toLowerCase();
|
||
|
|
var 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"
|
||
|
|
};
|
||
|
|
};
|
||
|
|
DomHandler.isInteger = function (value) {
|
||
|
|
if (Number.isInteger) {
|
||
|
|
return Number.isInteger(value);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return typeof value === "number" && isFinite(value) && Math.floor(value) === value;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
DomHandler.isHidden = function (element) {
|
||
|
|
return element.offsetParent === null;
|
||
|
|
};
|
||
|
|
DomHandler.zindex = 1000;
|
||
|
|
DomHandler.calculatedScrollbarWidth = null;
|
||
|
|
DomHandler.calculatedScrollbarHeight = null;
|
||
|
|
return DomHandler;
|
||
|
|
}());
|
||
|
|
exports.DomHandler = DomHandler;
|
||
|
|
//# sourceMappingURL=domhandler.js.map
|