"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