| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442 |
- "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 + 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.getFocusableElements = function (element) {
- var focusableElements = DomHandler.find(element, "button:not([tabindex = \"-1\"]):not([disabled]):not([style*=\"display:none\"]):not([hidden]), \n [href][clientHeight][clientWidth]:not([tabindex = \"-1\"]):not([disabled]):not([style*=\"display:none\"]):not([hidden]), \n input:not([tabindex = \"-1\"]):not([disabled]):not([style*=\"display:none\"]):not([hidden]), select:not([tabindex = \"-1\"]):not([disabled]):not([style*=\"display:none\"]):not([hidden]), \n textarea:not([tabindex = \"-1\"]):not([disabled]):not([style*=\"display:none\"]):not([hidden]), [tabIndex]:not([tabIndex = \"-1\"]):not([disabled]):not([style*=\"display:none\"]):not([hidden]), \n [contenteditable]:not([tabIndex = \"-1\"]):not([disabled]):not([style*=\"display:none\"]):not([hidden])");
- var visibleFocusableElements = [];
- for (var _i = 0, focusableElements_1 = focusableElements; _i < focusableElements_1.length; _i++) {
- var focusableElement = focusableElements_1[_i];
- if (getComputedStyle(focusableElement).display != "none" && getComputedStyle(focusableElement).visibility != "hidden")
- visibleFocusableElements.push(focusableElement);
- }
- return visibleFocusableElements;
- };
- DomHandler.zindex = 1000;
- DomHandler.calculatedScrollbarWidth = null;
- DomHandler.calculatedScrollbarHeight = null;
- return DomHandler;
- }());
- exports.DomHandler = DomHandler;
- //# sourceMappingURL=domhandler.js.map
|