domhandler.js 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", { value: true });
  3. var DomHandler = /** @class */ (function () {
  4. function DomHandler() {
  5. }
  6. DomHandler.addClass = function (element, className) {
  7. if (element.classList)
  8. element.classList.add(className);
  9. else
  10. element.className += ' ' + className;
  11. };
  12. DomHandler.addMultipleClasses = function (element, className) {
  13. if (element.classList) {
  14. var styles = className.split(' ');
  15. for (var i = 0; i < styles.length; i++) {
  16. element.classList.add(styles[i]);
  17. }
  18. }
  19. else {
  20. var styles = className.split(' ');
  21. for (var i = 0; i < styles.length; i++) {
  22. element.className += ' ' + styles[i];
  23. }
  24. }
  25. };
  26. DomHandler.removeClass = function (element, className) {
  27. if (element.classList)
  28. element.classList.remove(className);
  29. else
  30. element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
  31. };
  32. DomHandler.hasClass = function (element, className) {
  33. if (element.classList)
  34. return element.classList.contains(className);
  35. else
  36. return new RegExp('(^| )' + className + '( |$)', 'gi').test(element.className);
  37. };
  38. DomHandler.siblings = function (element) {
  39. return Array.prototype.filter.call(element.parentNode.children, function (child) {
  40. return child !== element;
  41. });
  42. };
  43. DomHandler.find = function (element, selector) {
  44. return Array.from(element.querySelectorAll(selector));
  45. };
  46. DomHandler.findSingle = function (element, selector) {
  47. if (element) {
  48. return element.querySelector(selector);
  49. }
  50. return null;
  51. };
  52. DomHandler.index = function (element) {
  53. var children = element.parentNode.childNodes;
  54. var num = 0;
  55. for (var i = 0; i < children.length; i++) {
  56. if (children[i] == element)
  57. return num;
  58. if (children[i].nodeType == 1)
  59. num++;
  60. }
  61. return -1;
  62. };
  63. DomHandler.indexWithinGroup = function (element, attributeName) {
  64. var children = element.parentNode.childNodes;
  65. var num = 0;
  66. for (var i = 0; i < children.length; i++) {
  67. if (children[i] == element)
  68. return num;
  69. if (children[i].attributes && children[i].attributes[attributeName] && children[i].nodeType == 1)
  70. num++;
  71. }
  72. return -1;
  73. };
  74. DomHandler.relativePosition = function (element, target) {
  75. var elementDimensions = element.offsetParent ? { width: element.offsetWidth, height: element.offsetHeight } : this.getHiddenElementDimensions(element);
  76. var targetHeight = target.offsetHeight;
  77. var targetOffset = target.getBoundingClientRect();
  78. var viewport = this.getViewport();
  79. var top, left;
  80. if ((targetOffset.top + targetHeight + elementDimensions.height) > viewport.height) {
  81. top = -1 * (elementDimensions.height);
  82. if (targetOffset.top + top < 0) {
  83. top = -1 * targetOffset.top;
  84. }
  85. }
  86. else {
  87. top = targetHeight;
  88. }
  89. if (elementDimensions.width > viewport.width) {
  90. // element wider then viewport and cannot fit on screen (align at left side of viewport)
  91. left = targetOffset.left * -1;
  92. }
  93. else if ((targetOffset.left + elementDimensions.width) > viewport.width) {
  94. // element wider then viewport but can be fit on screen (align at right side of viewport)
  95. left = (targetOffset.left + elementDimensions.width - viewport.width) * -1;
  96. }
  97. else {
  98. // element fits on screen (align with target)
  99. left = 0;
  100. }
  101. element.style.top = top + 'px';
  102. element.style.left = left + 'px';
  103. };
  104. DomHandler.absolutePosition = function (element, target) {
  105. var elementDimensions = element.offsetParent ? { width: element.offsetWidth, height: element.offsetHeight } : this.getHiddenElementDimensions(element);
  106. var elementOuterHeight = elementDimensions.height;
  107. var elementOuterWidth = elementDimensions.width;
  108. var targetOuterHeight = target.offsetHeight;
  109. var targetOuterWidth = target.offsetWidth;
  110. var targetOffset = target.getBoundingClientRect();
  111. var windowScrollTop = this.getWindowScrollTop();
  112. var windowScrollLeft = this.getWindowScrollLeft();
  113. var viewport = this.getViewport();
  114. var top, left;
  115. if (targetOffset.top + targetOuterHeight + elementOuterHeight > viewport.height) {
  116. top = targetOffset.top + windowScrollTop - elementOuterHeight;
  117. if (top < 0) {
  118. top = windowScrollTop;
  119. }
  120. }
  121. else {
  122. top = targetOuterHeight + targetOffset.top + windowScrollTop;
  123. }
  124. if (targetOffset.left + elementOuterWidth > viewport.width)
  125. left = Math.max(0, targetOffset.left + windowScrollLeft + targetOuterWidth - elementOuterWidth);
  126. else
  127. left = targetOffset.left + windowScrollLeft;
  128. element.style.top = top + 'px';
  129. element.style.left = left + 'px';
  130. };
  131. DomHandler.getHiddenElementOuterHeight = function (element) {
  132. element.style.visibility = 'hidden';
  133. element.style.display = 'block';
  134. var elementHeight = element.offsetHeight;
  135. element.style.display = 'none';
  136. element.style.visibility = 'visible';
  137. return elementHeight;
  138. };
  139. DomHandler.getHiddenElementOuterWidth = function (element) {
  140. element.style.visibility = 'hidden';
  141. element.style.display = 'block';
  142. var elementWidth = element.offsetWidth;
  143. element.style.display = 'none';
  144. element.style.visibility = 'visible';
  145. return elementWidth;
  146. };
  147. DomHandler.getHiddenElementDimensions = function (element) {
  148. var dimensions = {};
  149. element.style.visibility = 'hidden';
  150. element.style.display = 'block';
  151. dimensions.width = element.offsetWidth;
  152. dimensions.height = element.offsetHeight;
  153. element.style.display = 'none';
  154. element.style.visibility = 'visible';
  155. return dimensions;
  156. };
  157. DomHandler.scrollInView = function (container, item) {
  158. var borderTopValue = getComputedStyle(container).getPropertyValue('borderTopWidth');
  159. var borderTop = borderTopValue ? parseFloat(borderTopValue) : 0;
  160. var paddingTopValue = getComputedStyle(container).getPropertyValue('paddingTop');
  161. var paddingTop = paddingTopValue ? parseFloat(paddingTopValue) : 0;
  162. var containerRect = container.getBoundingClientRect();
  163. var itemRect = item.getBoundingClientRect();
  164. var offset = (itemRect.top + document.body.scrollTop) - (containerRect.top + document.body.scrollTop) - borderTop - paddingTop;
  165. var scroll = container.scrollTop;
  166. var elementHeight = container.clientHeight;
  167. var itemHeight = this.getOuterHeight(item);
  168. if (offset < 0) {
  169. container.scrollTop = scroll + offset;
  170. }
  171. else if ((offset + itemHeight) > elementHeight) {
  172. container.scrollTop = scroll + offset - elementHeight + itemHeight;
  173. }
  174. };
  175. DomHandler.fadeIn = function (element, duration) {
  176. element.style.opacity = 0;
  177. var last = +new Date();
  178. var opacity = 0;
  179. var tick = function () {
  180. opacity = +element.style.opacity.replace(",", ".") + (new Date().getTime() - last) / duration;
  181. element.style.opacity = opacity;
  182. last = +new Date();
  183. if (+opacity < 1) {
  184. (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
  185. }
  186. };
  187. tick();
  188. };
  189. DomHandler.fadeOut = function (element, ms) {
  190. var opacity = 1, interval = 50, duration = ms, gap = interval / duration;
  191. var fading = setInterval(function () {
  192. opacity = opacity - gap;
  193. if (opacity <= 0) {
  194. opacity = 0;
  195. clearInterval(fading);
  196. }
  197. element.style.opacity = opacity;
  198. }, interval);
  199. };
  200. DomHandler.getWindowScrollTop = function () {
  201. var doc = document.documentElement;
  202. return (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
  203. };
  204. DomHandler.getWindowScrollLeft = function () {
  205. var doc = document.documentElement;
  206. return (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0);
  207. };
  208. DomHandler.matches = function (element, selector) {
  209. var p = Element.prototype;
  210. var f = p['matches'] || p.webkitMatchesSelector || p['mozMatchesSelector'] || p['msMatchesSelector'] || function (s) {
  211. return [].indexOf.call(document.querySelectorAll(s), this) !== -1;
  212. };
  213. return f.call(element, selector);
  214. };
  215. DomHandler.getOuterWidth = function (el, margin) {
  216. var width = el.offsetWidth;
  217. if (margin) {
  218. var style = getComputedStyle(el);
  219. width += parseFloat(style.marginLeft) + parseFloat(style.marginRight);
  220. }
  221. return width;
  222. };
  223. DomHandler.getHorizontalPadding = function (el) {
  224. var style = getComputedStyle(el);
  225. return parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
  226. };
  227. DomHandler.getHorizontalMargin = function (el) {
  228. var style = getComputedStyle(el);
  229. return parseFloat(style.marginLeft) + parseFloat(style.marginRight);
  230. };
  231. DomHandler.innerWidth = function (el) {
  232. var width = el.offsetWidth;
  233. var style = getComputedStyle(el);
  234. width += parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
  235. return width;
  236. };
  237. DomHandler.width = function (el) {
  238. var width = el.offsetWidth;
  239. var style = getComputedStyle(el);
  240. width -= parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
  241. return width;
  242. };
  243. DomHandler.getInnerHeight = function (el) {
  244. var height = el.offsetHeight;
  245. var style = getComputedStyle(el);
  246. height += parseFloat(style.paddingTop) + parseFloat(style.paddingBottom);
  247. return height;
  248. };
  249. DomHandler.getOuterHeight = function (el, margin) {
  250. var height = el.offsetHeight;
  251. if (margin) {
  252. var style = getComputedStyle(el);
  253. height += parseFloat(style.marginTop) + parseFloat(style.marginBottom);
  254. }
  255. return height;
  256. };
  257. DomHandler.getHeight = function (el) {
  258. var height = el.offsetHeight;
  259. var style = getComputedStyle(el);
  260. height -= parseFloat(style.paddingTop) + parseFloat(style.paddingBottom) + parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
  261. return height;
  262. };
  263. DomHandler.getWidth = function (el) {
  264. var width = el.offsetWidth;
  265. var style = getComputedStyle(el);
  266. width -= parseFloat(style.paddingLeft) + parseFloat(style.paddingRight) + parseFloat(style.borderLeftWidth) + parseFloat(style.borderRightWidth);
  267. return width;
  268. };
  269. DomHandler.getViewport = function () {
  270. 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;
  271. return { width: w, height: h };
  272. };
  273. DomHandler.getOffset = function (el) {
  274. var rect = el.getBoundingClientRect();
  275. return {
  276. top: rect.top + document.body.scrollTop,
  277. left: rect.left + document.body.scrollLeft
  278. };
  279. };
  280. DomHandler.replaceElementWith = function (element, replacementElement) {
  281. var parentNode = element.parentNode;
  282. if (!parentNode)
  283. throw "Can't replace element";
  284. return parentNode.replaceChild(replacementElement, element);
  285. };
  286. DomHandler.getUserAgent = function () {
  287. return navigator.userAgent;
  288. };
  289. DomHandler.isIE = function () {
  290. var ua = window.navigator.userAgent;
  291. var msie = ua.indexOf('MSIE ');
  292. if (msie > 0) {
  293. // IE 10 or older => return version number
  294. return true;
  295. }
  296. var trident = ua.indexOf('Trident/');
  297. if (trident > 0) {
  298. // IE 11 => return version number
  299. var rv = ua.indexOf('rv:');
  300. return true;
  301. }
  302. var edge = ua.indexOf('Edge/');
  303. if (edge > 0) {
  304. // Edge (IE 12+) => return version number
  305. return true;
  306. }
  307. // other browser
  308. return false;
  309. };
  310. DomHandler.isIOS = function () {
  311. return /iPad|iPhone|iPod/.test(navigator.userAgent) && !window['MSStream'];
  312. };
  313. DomHandler.isAndroid = function () {
  314. return /(android)/i.test(navigator.userAgent);
  315. };
  316. DomHandler.appendChild = function (element, target) {
  317. if (this.isElement(target))
  318. target.appendChild(element);
  319. else if (target.el && target.el.nativeElement)
  320. target.el.nativeElement.appendChild(element);
  321. else
  322. throw 'Cannot append ' + target + ' to ' + element;
  323. };
  324. DomHandler.removeChild = function (element, target) {
  325. if (this.isElement(target))
  326. target.removeChild(element);
  327. else if (target.el && target.el.nativeElement)
  328. target.el.nativeElement.removeChild(element);
  329. else
  330. throw 'Cannot remove ' + element + ' from ' + target;
  331. };
  332. DomHandler.isElement = function (obj) {
  333. return (typeof HTMLElement === "object" ? obj instanceof HTMLElement :
  334. obj && typeof obj === "object" && obj !== null && obj.nodeType === 1 && typeof obj.nodeName === "string");
  335. };
  336. DomHandler.calculateScrollbarWidth = function (el) {
  337. if (el) {
  338. var style = getComputedStyle(el);
  339. return (el.offsetWidth - el.clientWidth - parseFloat(style.borderLeftWidth) - parseFloat(style.borderRightWidth));
  340. }
  341. else {
  342. if (this.calculatedScrollbarWidth !== null)
  343. return this.calculatedScrollbarWidth;
  344. var scrollDiv = document.createElement("div");
  345. scrollDiv.className = "ui-scrollbar-measure";
  346. document.body.appendChild(scrollDiv);
  347. var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
  348. document.body.removeChild(scrollDiv);
  349. this.calculatedScrollbarWidth = scrollbarWidth;
  350. return scrollbarWidth;
  351. }
  352. };
  353. DomHandler.calculateScrollbarHeight = function () {
  354. if (this.calculatedScrollbarHeight !== null)
  355. return this.calculatedScrollbarHeight;
  356. var scrollDiv = document.createElement("div");
  357. scrollDiv.className = "ui-scrollbar-measure";
  358. document.body.appendChild(scrollDiv);
  359. var scrollbarHeight = scrollDiv.offsetHeight - scrollDiv.clientHeight;
  360. document.body.removeChild(scrollDiv);
  361. this.calculatedScrollbarWidth = scrollbarHeight;
  362. return scrollbarHeight;
  363. };
  364. DomHandler.invokeElementMethod = function (element, methodName, args) {
  365. element[methodName].apply(element, args);
  366. };
  367. DomHandler.clearSelection = function () {
  368. if (window.getSelection) {
  369. if (window.getSelection().empty) {
  370. window.getSelection().empty();
  371. }
  372. else if (window.getSelection().removeAllRanges && window.getSelection().rangeCount > 0 && window.getSelection().getRangeAt(0).getClientRects().length > 0) {
  373. window.getSelection().removeAllRanges();
  374. }
  375. }
  376. else if (document['selection'] && document['selection'].empty) {
  377. try {
  378. document['selection'].empty();
  379. }
  380. catch (error) {
  381. //ignore IE bug
  382. }
  383. }
  384. };
  385. DomHandler.getBrowser = function () {
  386. if (!this.browser) {
  387. var matched = this.resolveUserAgent();
  388. this.browser = {};
  389. if (matched.browser) {
  390. this.browser[matched.browser] = true;
  391. this.browser['version'] = matched.version;
  392. }
  393. if (this.browser['chrome']) {
  394. this.browser['webkit'] = true;
  395. }
  396. else if (this.browser['webkit']) {
  397. this.browser['safari'] = true;
  398. }
  399. }
  400. return this.browser;
  401. };
  402. DomHandler.resolveUserAgent = function () {
  403. var ua = navigator.userAgent.toLowerCase();
  404. var match = /(chrome)[ \/]([\w.]+)/.exec(ua) ||
  405. /(webkit)[ \/]([\w.]+)/.exec(ua) ||
  406. /(opera)(?:.*version|)[ \/]([\w.]+)/.exec(ua) ||
  407. /(msie) ([\w.]+)/.exec(ua) ||
  408. ua.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec(ua) ||
  409. [];
  410. return {
  411. browser: match[1] || "",
  412. version: match[2] || "0"
  413. };
  414. };
  415. DomHandler.isInteger = function (value) {
  416. if (Number.isInteger) {
  417. return Number.isInteger(value);
  418. }
  419. else {
  420. return typeof value === "number" && isFinite(value) && Math.floor(value) === value;
  421. }
  422. };
  423. DomHandler.isHidden = function (element) {
  424. return element.offsetParent === null;
  425. };
  426. DomHandler.getFocusableElements = function (element) {
  427. 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])");
  428. var visibleFocusableElements = [];
  429. for (var _i = 0, focusableElements_1 = focusableElements; _i < focusableElements_1.length; _i++) {
  430. var focusableElement = focusableElements_1[_i];
  431. if (getComputedStyle(focusableElement).display != "none" && getComputedStyle(focusableElement).visibility != "hidden")
  432. visibleFocusableElements.push(focusableElement);
  433. }
  434. return visibleFocusableElements;
  435. };
  436. DomHandler.zindex = 1000;
  437. DomHandler.calculatedScrollbarWidth = null;
  438. DomHandler.calculatedScrollbarHeight = null;
  439. return DomHandler;
  440. }());
  441. exports.DomHandler = DomHandler;
  442. //# sourceMappingURL=domhandler.js.map