1if (!Element.prototype.matches) { 2 Element.prototype.matches = 3 Element.prototype.msMatchesSelector || 4 Element.prototype.webkitMatchesSelector; 5} 6 7if (!Element.prototype.closest) { 8 Element.prototype.closest = function (s) { 9 var el = this; 10 11 do { 12 if (el.matches(s)) return el; 13 el = el.parentElement || el.parentNode; 14 } while (el !== null && el.nodeType === 1); 15 return null; 16 }; 17} 18 19if (document.fonts && document.body) { 20 document.body.classList.add('rz-icons-loading'); 21 document.fonts.load('16px Material Symbols').then(() => { 22 document.body.classList.remove('rz-icons-loading'); 23 }) 24} 25 26var resolveCallbacks = []; 27var rejectCallbacks = []; 28var radzenRecognition; 29 30window.Radzen = { 31 isRTL: function (el) { 32 return el && getComputedStyle(el).direction == 'rtl'; 33 }, 34 throttle: function (callback, delay) { 35 var timeout = null; 36 return function () { 37 var args = arguments; 38 var ctx = this; 39 if (!timeout) { 40 timeout = setTimeout(function () { 41 callback.apply(ctx, args); 42 timeout = null; 43 }, delay); 44 } 45 }; 46 }, 47 mask: function (id, mask, pattern, characterPattern) { 48 var el = document.getElementById(id); 49 if (el) { 50 var format = function (value, mask, pattern, characterPattern) { 51 var chars = !characterPattern ? value.replace(new RegExp(pattern, "g"), "").split('') : value.match(new RegExp(characterPattern, "g")); 52 var count = 0; 53 54 var formatted = ''; 55 for (var i = 0; i < mask.length; i++) { 56 const c = mask[i]; 57 if (chars && chars[count]) { 58 if (c === '*' || c == chars[count]) { 59 formatted += chars[count]; 60 count++; 61 } else { 62 formatted += c; 63 } 64 } 65 } 66 return formatted; 67 } 68 69 if (window.safari !== undefined) { 70 el.onblur = function (e) { 71 el.dispatchEvent(new Event('change')); 72 }; 73 } 74 75 var start = el.selectionStart != el.value.length ? el.selectionStart : -1; 76 var end = el.selectionEnd != el.value.length ? el.selectionEnd : -1; 77 78 el.value = format(el.value, mask, pattern, characterPattern); 79 80 el.selectionStart = start != -1 ? start : el.selectionStart; 81 el.selectionEnd = end != -1 ? end : el.selectionEnd; 82 } 83 }, 84 addContextMenu: function (id, ref) { 85 var el = document.getElementById(id); 86 if (el) { 87 var handler = function (e) { 88 e.stopPropagation(); 89 e.preventDefault(); 90 ref.invokeMethodAsync('RadzenComponent.RaiseContextMenu', 91 { 92 ClientX: e.clientX, 93 ClientY: e.clientY, 94 ScreenX: e.screenX, 95 ScreenY: e.screenY, 96 AltKey: e.altKey, 97 ShiftKey: e.shiftKey, 98 CtrlKey: e.ctrlKey, 99 MetaKey: e.metaKey, 100 Button: e.button, 101 Buttons: e.buttons, 102 }); 103 return false; 104 }; 105 Radzen[id + 'contextmenu'] = handler; 106 el.addEventListener('contextmenu', handler, false); 107 } 108 }, 109 addMouseEnter: function (id, ref) { 110 var el = document.getElementById(id); 111 if (el) { 112 var handler = function (e) { 113 ref.invokeMethodAsync('RadzenComponent.RaiseMouseEnter'); 114 }; 115 Radzen[id + 'mouseenter'] = handler; 116 el.addEventListener('mouseenter', handler, false); 117 } 118 }, 119 addMouseLeave: function (id, ref) { 120 var el = document.getElementById(id); 121 if (el) { 122 var handler = function (e) { 123 ref.invokeMethodAsync('RadzenComponent.RaiseMouseLeave');; 124 }; 125 Radzen[id + 'mouseleave'] = handler; 126 el.addEventListener('mouseleave', handler, false); 127 } 128 }, 129 removeContextMenu: function (id) { 130 var el = document.getElementById(id); 131 if (el && Radzen[id + 'contextmenu']) { 132 el.removeEventListener('contextmenu', Radzen[id + 'contextmenu']); 133 } 134 }, 135 removeMouseEnter: function (id) { 136 var el = document.getElementById(id); 137 if (el && Radzen[id + 'mouseenter']) { 138 el.removeEventListener('mouseenter', Radzen[id + 'mouseenter']); 139 } 140 }, 141 removeMouseLeave: function (id) { 142 var el = document.getElementById(id); 143 if (el && Radzen[id + 'mouseleave']) { 144 el.removeEventListener('mouseleave', Radzen[id + 'mouseleave']); 145 } 146 }, 147 adjustDataGridHeader: function (scrollableHeader, scrollableBody) { 148 if (scrollableHeader && scrollableBody) { 149 scrollableHeader.style.cssText = 150 scrollableBody.clientHeight < scrollableBody.scrollHeight 151 ? 'margin-left:0px;padding-right: ' + 152 (scrollableBody.offsetWidth - scrollableBody.clientWidth) + 153 'px' 154 : 'margin-left:0px;'; 155 } 156 }, 157 preventDefaultAndStopPropagation: function (e) { 158 e.preventDefault(); 159 e.stopPropagation(); 160 }, 161 preventArrows: function (el) { 162 var preventDefault = function (e) { 163 if (e.keyCode === 38 || e.keyCode === 40) { 164 e.preventDefault(); 165 return false; 166 } 167 }; 168 if (el) { 169 el.addEventListener('keydown', preventDefault, false); 170 } 171 }, 172 selectTab: function (id, index) { 173 var el = document.getElementById(id); 174 if (el && el.parentNode && el.parentNode.previousElementSibling) { 175 var count = el.parentNode.children.length; 176 for (var i = 0; i < count; i++) { 177 var content = el.parentNode.children[i]; 178 if (content) { 179 content.style.display = i == index ? '' : 'none'; 180 } 181 var header = el.parentNode.previousElementSibling.children[i]; 182 if (header) { 183 if (i == index) { 184 header.classList.add('rz-tabview-selected'); 185 header.classList.add('rz-state-focused'); 186 } 187 else { 188 header.classList.remove('rz-tabview-selected'); 189 header.classList.remove('rz-state-focused'); 190 } 191 } 192 } 193 } 194 }, 195 loadGoogleMaps: function (defaultView, apiKey, resolve, reject, language) { 196 resolveCallbacks.push(resolve); 197 rejectCallbacks.push(reject); 198 199 if (defaultView['rz_map_init']) { 200 return; 201 } 202 203 defaultView['rz_map_init'] = function () { 204 for (var i = 0;
204 i < resolveCallbacks.length; i++) { 205 resolveCallbacks[i](defaultView.google); 206 } 207 }; 208 209 var document = defaultView.document; 210 var script = document.createElement('script'); 211 212 script.src = 213 'https://maps.googleapis.com/maps/api/js?' + 214 (language ? 'language=' + language + '&' : '') + 215 (apiKey ? 'key=' + apiKey + '&' : '') + 216 'callback=rz_map_init&libraries=marker'; 217 218 script.async = true; 219 script.defer = true; 220 script.onerror = function (err) { 221 for (var i = 0; i < rejectCallbacks.length; i++) { 222 rejectCallbacks[i](err); 223 } 224 }; 225 226 document.body.appendChild(script); 227 }, 228 createMap: function (wrapper, ref, id, apiKey, mapId, zoom, center, markers, options, fitBoundsToMarkersOnUpdate, language) { 229 var api = function () { 230 var defaultView = document.defaultView; 231 232 return new Promise(function (resolve, reject) { 233 if (defaultView.google && defaultView.google.maps) { 234 return resolve(defaultView.google); 235 } 236 237 Radzen.loadGoogleMaps(defaultView, apiKey, resolve, reject, language); 238 }); 239 }; 240 241 api().then(function (google) { 242 Radzen[id] = ref; 243 Radzen[id].google = google; 244 245 Radzen[id].instance = new google.maps.Map(wrapper, { 246 center: center, 247 zoom: zoom, 248 mapId: mapId 249 }); 250 251 Radzen[id].instance.addListener('click', function (e) { 252 Radzen[id].invokeMethodAsync('RadzenGoogleMap.OnMapClick', { 253 Position: {Lat: e.latLng.lat(), Lng: e.latLng.lng()} 254 }); 255 }); 256 257 Radzen.updateMap(id, apiKey, zoom, center, markers, options, fitBoundsToMarkersOnUpdate, language); 258 }); 259 }, 260 updateMap: function (id, apiKey, zoom, center, markers, options, fitBoundsToMarkersOnUpdate, language) { 261 var api = function () { 262 var defaultView = document.defaultView; 263 264 return new Promise(function (resolve, reject) { 265 if (defaultView.google && defaultView.google.maps) { 266 return resolve(defaultView.google); 267 } 268 269 Radzen.loadGoogleMaps(defaultView, apiKey, resolve, reject, language); 270 }); 271 }; 272 api().then(function (google) { 273 let markerBounds = new google.maps.LatLngBounds(); 274 275 if (Radzen[id] && Radzen[id].instance) { 276 if (Radzen[id].instance.markers && Radzen[id].instance.markers.length) { 277 for (var i = 0; i < Radzen[id].instance.markers.length; i++) { 278 Radzen[id].instance.markers[i].setMap(null); 279 } 280 } 281 282 if (markers) { 283 Radzen[id].instance.markers = []; 284 285 markers.forEach(function (m) { 286 var content; 287 288 if (m.label) { 289 content = document.createElement('span'); 290 content.innerHTML = m.label; 291 } 292 293 var marker = new this.google.maps.marker.AdvancedMarkerElement({ 294 position: m.position, 295 title: m.title, 296 content: content 297 }); 298 299 marker.addListener('click', function (e) { 300 Radzen[id].invokeMethodAsync('RadzenGoogleMap.OnMarkerClick', { 301 Title: marker.title, 302 Label: marker.content.innerText, 303 Position: marker.position 304 }); 305 }); 306 307 marker.setMap(Radzen[id].instance); 308 309 Radzen[id].instance.markers.push(marker); 310 311 markerBounds.extend(marker.position); 312 }); 313 } 314 315 if (zoom) { 316 Radzen[id].instance.setZoom(zoom); 317 } 318 319 if (center) { 320 Radzen[id].instance.setCenter(center); 321 } 322 323 if (options) { 324 Radzen[id].instance.setOptions(options); 325 } 326 327 if (markers && fitBoundsToMarkersOnUpdate) { 328 Radzen[id].instance.fitBounds(markerBounds); 329 } 330 } 331 });
332 }, 333 destroyMap: function (id) { 334 if (Radzen[id].instance) { 335 delete Radzen[id].instance; 336 } 337 }, 338 focusSecurityCode: function (el) { 339 if (!el) return; 340 var firstInput = el.querySelector('.rz-security-code-input'); 341 if (firstInput) { 342 setTimeout(function () { firstInput.focus() }, 500); 343 } 344 }, 345 destroySecurityCode: function (id, el) { 346 if (!Radzen[id]) return; 347 348 var inputs = el.getElementsByTagName('input'); 349 350 if (Radzen[id].keyPress && Radzen[id].paste) { 351 for (var i = 0; i < inputs.length; i++) { 352 inputs[i].removeEventListener('keypress', Radzen[id].keyPress); 353 inputs[i].removeEventListener('keydown', Radzen[id].keyDown); 354 inputs[i].removeEventListener('paste', Radzen[id].paste); 355 } 356 delete Radzen[id].keyPress; 357 delete Radzen[id].paste; 358 } 359 360 Radzen[id] = null; 361 }, 362 createSecurityCode: function (id, ref, el, isNumber) { 363 if (!el || !ref) return; 364 365 var hidden = el.querySelector('input[type="hidden"]'); 366 367 Radzen[id] = {}; 368 369 Radzen[id].inputs = [...el.querySelectorAll('.rz-security-code-input')]; 370 371 Radzen[id].paste = function (e) { 372 if (e.clipboardData) { 373 var value = e.clipboardData.getData('text'); 374 375 if (value) { 376 for (var i = 0; i < value.length; i++) { 377 if (isNumber && isNaN(+value[i])) { 378 continue; 379 } 380 Radzen[id].inputs[i].value = value[i]; 381 } 382 383 var code = Radzen[id].inputs.map(i => i.value).join('').trim(); 384 hidden.value = code; 385 386 ref.invokeMethodAsync('RadzenSecurityCode.OnValueChange', code); 387 388 Radzen[id].inputs[Radzen[id].inputs.length - 1].focus(); 389 } 390 391 e.preventDefault(); 392 } 393 } 394 Radzen[id].keyPress = function (e) { 395 var keyCode = e.data ? e.data.charCodeAt(0) : e.which; 396 var ch = e.data || String.fromCharCode(e.which); 397 398 if (e.metaKey || 399 e.ctrlKey || 400 keyCode == 9 || 401 keyCode == 8 || 402 keyCode == 13 403 ) { 404 return; 405 } 406 407 if (isNumber && (keyCode < 48 || keyCode > 57)) { 408 e.preventDefault(); 409 return; 410 } 411 412 if (e.currentTarget.value == ch) { 413 return; 414 } 415 416 e.currentTarget.value = ch; 417 418 var value = Radzen[id].inputs.map(i => i.value).join('').trim(); 419 hidden.value = value; 420 421 ref.invokeMethodAsync('RadzenSecurityCode.OnValueChange', value); 422 423 var index = Radzen[id].inputs.indexOf(e.currentTarget); 424 if (index < Radzen[id].inputs.length - 1) { 425 Radzen[id].inputs[index + 1].focus(); 426 } 427 } 428 429 Radzen[id].keyDown = function (e) { 430 var keyCode = e.data ? e.data.charCodeAt(0) : e.which; 431 if (keyCode == 8) { 432 e.currentTarget.value = ''; 433 434 var value = Radzen[id].inputs.map(i => i.value).join('').trim(); 435 hidden.value = value; 436 437 ref.invokeMethodAsync('RadzenSecurityCode.OnValueChange', value); 438 439 var index = Radzen[id].inputs.indexOf(e.currentTarget); 440 if (index > 0) { 441 Radzen[id].inputs[index - 1].focus(); 442 } 443 } 444 } 445 446 for (var i = 0; i < Radzen[id].inputs.length; i++) { 447 Radzen[id].inputs[i].addEventListener(navigator.userAgent.match(/Android/i) ? 'textInput' : 'keypress', Radzen[id].keyPress); 448 Radzen[id].inputs[i].addEventListener(navigator.userAgent.match(/Android/i) ? 'textInput' : 'keydown', Radzen[id].keyDown); 449 Radzen[id].inputs[i].addEventListener('paste', Radzen[id].paste); 450 } 451 }, 452 createSlider: function ( 453 id, 454 slider, 455 parent, 456 range, 457 minHandle, 458 maxHandle, 459 min, 460 max, 461 value, 462 step, 463 isVertical 464 ) { 465 Radzen[id] = {}; 466 Radzen[id].mouseMoveHandler = function (e) { 467 e.preventDefault(); 468 469 var handle = slider.isMin ? minHandle : maxHandle; 470 471 if (!slider.canChange) return; 472 473 var offsetX = 474 e.targetTouches && e.targetTouches[0] 475 ? e.targetTouches[0].pageX - e.target.getBoundingClientRect().left 476 : e.pageX - handle.getBoundingClientRect().left; 477 478 var offsetY = 479 e.targetTouches && e.targetTouches[0] 480 ? e.targetTouches[0].pageY - e.target.getBoundingClientRect().top 481 : e.pageY - handle.getBoundingClientRect().top; 482 483 var percent = isVertical ? (parent.offsetHeight - handle.offsetTop - offsetY) / parent.offsetHeight 484 : (Radzen.isRTL(handle) ? parent.offsetWidth - handle.offsetLeft - offsetX : handle.offsetLeft + offsetX) / parent.offsetWidth; 485 486 if (percent > 1) { 487 percent = 1; 488 } else if (percent < 0) { 489 percent = 0; 490 } 491 492 var newValue = percent * (max - min) + min; 493 494 if ( 495 slider.canChange && 496 newValue >= min && 497 newValue <= max 498 ) { 499 slider.invokeMethodAsync( 500 'RadzenSlider.OnValueChange', 501 newValue, 502 !!slider.isMin 503 ); 504 } 505 }; 506 507 Radzen[id].mouseDownHandler = function (e) { 508 if (parent.classList.contains('rz-state-disabled')) return; 509 510 document.addEventListener('mousemove', Radzen[id].mouseMoveHandler); 511 document.addEventListener('touchmove', Radzen[id].mouseMoveHandler, { 512 passive: false, capture: true 513 }); 514 515 document.addEventListener('mouseup', Radzen[id].mouseUpHandler); 516 document.addEventListener('touchend', Radzen[id].mouseUpHandler, { 517 passive: true 518 }); 519 520 if (minHandle == e.target || maxHandle == e.target) { 521 slider.canChange = true; 522 slider.isMin = minHandle == e.target; 523 } else { 524 525 var offsetX = 526 e.targetTouches && e.targetTouches[0] 527 ? e.targetTouches[0].pageX - e.target.getBoundingClientRect().left 528 : e.offsetX; 529 530 var percent = offsetX / parent.offsetWidth; 531 532 var newValue = percent * (max - min) + min; 533 var oldValue = range ? value[slider.isMin ? 0 : 1] : value; 534 if (newValue >= min && newValue <= max && newValue != oldValue) { 535 slider.invokeMethodAsync( 536 'RadzenSlider.OnValueChange', 537 newValue, 538 !!slider.isMin 539 ); 540 } 541 } 542 }; 543 544 Radzen[id].mouseUpHandler = function (e) { 545 slider.canChange = false; 546 document.removeEventListener('mousemove', Radzen[id].mouseMoveHandler); 547 document.removeEventListener('touchmove', Radzen[id].mouseMoveHandler, { 548 passive: false, capture: true 549 }); 550 document.removeEventListener('mouseup', Radzen[id].mouseUpHandler); 551 document.removeEventListener('touchend', Radzen[id].mouseUpHandler, { 552 passive: true 553 }); 554 }; 555 556 parent.addEventListener('mousedown', Radzen[id].mouseDownHandler); 557 parent.addEventListener('touchstart', Radzen[id].mouseDownHandler, { 558 passive: true 559 });
560 }, 561 destroySlider: function (id, parent) { 562 if (!Radzen[id]) return; 563 564 if (Radzen[id].mouseMoveHandler) { 565 document.removeEventListener('mousemove', Radzen[id].mouseMoveHandler); 566 document.removeEventListener('touchmove', Radzen[id].mouseMoveHandler); 567 delete Radzen[id].mouseMoveHandler; 568 } 569 if (Radzen[id].mouseUpHandler) { 570 document.removeEventListener('mouseup', Radzen[id].mouseUpHandler); 571 document.removeEventListener('touchend', Radzen[id].mouseUpHandler); 572 delete Radzen[id].mouseUpHandler; 573 } 574 if (Radzen[id].mouseDownHandler) { 575 parent.removeEventListener('mousedown', Radzen[id].mouseDownHandler); 576 parent.removeEventListener('touchstart', Radzen[id].mouseDownHandler); 577 delete Radzen[id].mouseDownHandler; 578 } 579 580 Radzen[id] = null; 581 }, 582 prepareDrag: function (el) { 583 if (el) { 584 el.ondragover = function (e) { e.preventDefault(); }; 585 el.ondragstart = function (e) { e.dataTransfer.setData('', e.target.id); }; 586 } 587 }, 588 focusElement: function (elementId) { 589 var el = document.getElementById(elementId); 590 if (el) { 591 el.focus(); 592 } 593 }, 594 scrollCarouselItem: function (el) { 595 el.parentElement.scroll(el.offsetLeft, 0); 596 }, 597 scrollIntoViewIfNeeded: function (ref, selector) { 598 var el = selector ? ref.getElementsByClassName(selector)[0] : ref; 599 if (el && el.scrollIntoViewIfNeeded) { 600 el.scrollIntoViewIfNeeded(); 601 } else if (el && el.scrollIntoView) { 602 el.scrollIntoView(); 603 } 604 }, 605 selectListItem: function (input, ul, index) { 606 if (!input || !ul) return; 607 608 var childNodes = ul.getElementsByTagName('LI'); 609 610 var highlighted = ul.querySelectorAll('.rz-state-highlight'); 611 if (highlighted.length) { 612 for (var i = 0; i < highlighted.length; i++) { 613 highlighted[i].classList.remove('rz-state-highlight'); 614 } 615 } 616 617 ul.nextSelectedIndex = index; 618 619 if ( 620 ul.nextSelectedIndex >= 0 && 621 ul.nextSelectedIndex <= childNodes.length - 1 622 ) { 623 childNodes[ul.nextSelectedIndex].classList.add('rz-state-highlight'); 624 childNodes[ul.nextSelectedIndex].scrollIntoView({block:'nearest'}); 625 } 626 }, 627 focusListItem: function (input, ul, isDown, startIndex) { 628 if (!input || !ul) return; 629 var childNodes = ul.getElementsByTagName('LI'); 630 631 if (!childNodes || childNodes.length == 0) return; 632 633 if (startIndex == undefined || startIndex == null) { 634 startIndex = -1; 635 } 636 637 ul.nextSelectedIndex = startIndex; 638 if (isDown) { 639 while (ul.nextSelectedIndex < childNodes.length - 1) { 640 ul.nextSelectedIndex++; 641 if (!childNodes[ul.nextSelectedIndex].classList.contains('rz-state-disabled')) 642 break; 643 } 644 } else { 645 while (ul.nextSelectedIndex >= 0) { 646 ul.nextSelectedIndex--; 647 if (!childNodes[ul.nextSelectedIndex] || !childNodes[ul.nextSelectedIndex].classList.contains('rz-state-disabled')) 648 break; 649 } 650 } 651 652 var highlighted = ul.querySelectorAll('.rz-state-highlight'); 653 if (highlighted.length) { 654 for (var i = 0; i < highlighted.length; i++) { 655 highlighted[i].classList.remove('rz-state-highlight'); 656 } 657 } 658 659 if ( 660 ul.nextSelectedIndex >= 0 && 661 ul.nextSelectedIndex <= childNodes.length - 1 662 ) { 663 childNodes[ul.nextSelectedIndex].classList.add('rz-state-highlight'); 664 Radzen.scrollIntoViewIfNeeded(childNodes[ul.nextSelectedIndex]); 665 } 666 667 return ul.nextSelectedIndex; 668 }, 669 clearFocusedHeaderCell: function (gridId) { 670 var grid = document.getElementById(gridId); 671 if (!grid) return; 672 673 var table = grid.querySelector('.rz-grid-table'); 674 var thead = table.getElementsByTagName("thead")[0]; 675 var highlightedCells = thead.querySelectorAll('.rz-state-focused'); 676 if (highlightedCells.length) { 677 for (var i = 0; i < highlightedCells.length; i++) { 678 highlightedCells[i].classList.remove('rz-state-focused'); 679 } 680 } 681 }, 682 focusTableRow: function (gridId, key, rowIndex, cellIndex, isVirtual) { 683 var grid = document.getElementById(gridId); 684 if (!grid) return; 685 686 var table = grid.querySelector('.rz-grid-table'); 687 var tbody = table.tBodies[0]; 688 var thead = table.tHead;
689 690 var rows = (cellIndex != null && thead && thead.rows && thead.rows.length ? [...thead.rows] : []).concat(tbody && tbody.rows && tbody.rows.length ? [...tbody.rows] : []); 691 692 if (isVirtual && (key == 'ArrowUp' || key == 'ArrowDown' || key == 'PageUp' || key == 'PageDown' || key == 'Home' || key == 'End')) { 693 if (rowIndex == 0 && (key == 'End' || key == 'PageDown')) { 694 var highlightedCells = thead.querySelectorAll('.rz-state-focused'); 695 if (highlightedCells.length) { 696 for (var i = 0; i < highlightedCells.length; i++) { 697 highlightedCells[i].classList.remove('rz-state-focused'); 698 } 699 } 700 } 701 if (key == 'ArrowUp' || key == 'ArrowDown' || key == 'PageUp' || key == 'PageDown') { 702 var rowHeight = rows[rows.length - 1] ? rows[rows.length - 1].offsetHeight : 40; 703 var factor = key == 'PageUp' || key == 'PageDown' ? 10 : 1; 704 table.parentNode.scrollTop = table.parentNode.scrollTop + (factor * (key == 'ArrowDown' || key == 'PageDown' ? rowHeight : -rowHeight)); 705 } 706 else { 707 table.parentNode.scrollTop = key == 'Home' ? 0 : table.parentNode.scrollHeight; 708 } 709 } 710 711 table.nextSelectedIndex = rowIndex || 0; 712 table.nextSelectedCellIndex = cellIndex || 0; 713 714 if (key == 'ArrowDown') { 715 while (table.nextSelectedIndex < rows.length - 1) { 716 table.nextSelectedIndex++; 717 if (!rows[table.nextSelectedIndex] || !rows[table.nextSelectedIndex].classList.contains('rz-state-disabled')) 718 break; 719 } 720 } else if (key == 'ArrowUp') { 721 while (table.nextSelectedIndex > 0) { 722 table.nextSelectedIndex--; 723 if (!rows[table.nextSelectedIndex] || !rows[table.nextSelectedIndex].classList.contains('rz-state-disabled')) 724 break; 725 } 726 } else if (key == 'ArrowRight') { 727 while (table.nextSelectedCellIndex < rows[table.nextSelectedIndex].cells.length - 1) { 728 table.nextSelectedCellIndex++; 729 if (!rows[table.nextSelectedIndex] || !rows[table.nextSelectedIndex].cells[table.nextSelectedCellIndex] || !rows[table.nextSelectedIndex].cells[table.nextSelectedCellIndex].classList.contains('rz-state-disabled')) 730 break; 731 } 732 } else if (key == 'ArrowLeft') { 733 while (table.nextSelectedCellIndex > 0) { 734 table.nextSelectedCellIndex--; 735 if (!rows[table.nextSelectedIndex] || !rows[table.nextSelectedIndex].cells[table.nextSelectedCellIndex] || !rows[table.nextSelectedIndex].cells[table.nextSelectedCellIndex].classList.contains('rz-state-disabled')) 736 break; 737 } 738 } else if (isVirtual && (key == 'PageDown' || key == 'End')) { 739 table.nextSelectedIndex = rows.length - 1; 740 } else if (isVirtual && (key == 'PageUp' || key == 'Home')) { 741 table.nextSelectedIndex = 1; 742 } 743 744 if (key == 'ArrowLeft' || key == 'ArrowRight' || (key == 'ArrowUp' && cellIndex != null && table.nextSelectedIndex == 0 && table.parentNode.scrollTop == 0)) { 745 var highlightedCells = rows[table.nextSelectedIndex].querySelectorAll('.rz-state-focused'); 746 if (highlightedCells.length) { 747 for (var i = 0; i < highlightedCells.length; i++) { 748 highlightedCells[i].classList.remove('rz-state-focused'); 749 } 750 } 751 752 if ( 753 table.nextSelectedCellIndex >= 0 && 754 table.nextSelectedCellIndex <= rows[table.nextSelectedIndex].cells.length - 1 755 ) { 756 var cell = rows[table.nextSelectedIndex].cells[table.nextSelectedCellIndex]; 757 758 if (!cell.classList.contains('rz-state-focused')) { 759 cell.classList.add('rz-state-focused'); 760 if (!isVirtual && table.parentElement.scrollWidth > table.parentElement.clientWidth) { 761 Radzen.scrollIntoViewIfNeeded(cell); 762 } 763 } 764 } 765 } else if (key == 'ArrowDown' || key == 'ArrowUp') { 766 var highlighted = table.querySelectorAll('.rz-state-focused'); 767 if (highlighted.length) { 768 for (var i = 0; i < highlighted.length; i++) { 769 highlighted[i].classList.remove('rz-state-focused'); 770 } 771 } 772 773 if (table.nextSelectedIndex >= 0 && 774 table.nextSelectedIndex <= rows.length - 1 775 ) { 776 var row = rows[table.nextSelectedIndex]; 777 778 if (!row.classList.contains('rz-state-focused')) { 779 row.classList.add('rz-state-focused'); 780 if (!isVirtual && table.parentElement.scrollHeight > table.parentElement.clientHeight) { 781 Radzen.scrollIntoViewIfNeeded(row);
782 } 783 } 784 } 785 } 786 787 return [table.nextSelectedIndex, table.nextSelectedCellIndex]; 788 }, 789 uploadInputChange: function (e, url, auto, multiple, clear, parameterName) { 790 if (auto) { 791 Radzen.upload(e.target, url, multiple, clear, parameterName); 792 e.target.value = ''; 793 } else { 794 Radzen.uploadChange(e.target); 795 } 796 }, 797 uploads: function (uploadComponent, id) { 798 if (!Radzen.uploadComponents) { 799 Radzen.uploadComponents = {}; 800 } 801 Radzen.uploadComponents[id] = uploadComponent; 802 }, 803 uploadChange: function (fileInput) { 804 var files = []; 805 for (var i = 0; i < fileInput.files.length; i++) { 806 var file = fileInput.files[i]; 807 files.push({ 808 Name: file.name, 809 Size: file.size, 810 Url: URL.createObjectURL(file) 811 }); 812 } 813 814 var uploadComponent = 815 Radzen.uploadComponents && Radzen.uploadComponents[fileInput.id]; 816 if (uploadComponent) { 817 if (uploadComponent.localFiles) { 818 // Clear any previously created preview URL(s) 819 for (var i = 0; i < uploadComponent.localFiles.length; i++) { 820 var file = uploadComponent.localFiles[i]; 821 if (file.Url) { 822 URL.revokeObjectURL(file.Url); 823 } 824 } 825 } 826 827 uploadComponent.files = Array.from(fileInput.files); 828 uploadComponent.localFiles = files; 829 uploadComponent.invokeMethodAsync('RadzenUpload.OnChange', files); 830 } 831 832 for (var i = 0; i < fileInput.files.length; i++) { 833 var file = fileInput.files[i]; 834 if (file.Url) { 835 URL.revokeObjectURL(file.Url); 836 } 837 } 838 }, 839 removeFileFromUpload: function (fileInput, name) { 840 var uploadComponent = Radzen.uploadComponents && Radzen.uploadComponents[fileInput.id]; 841 if (!uploadComponent) return; 842 var file = uploadComponent.files.find(function (f) { return f.name == name; }) 843 if (!file) { return; } 844 var localFile = uploadComponent.localFiles.find(function (f) { return f.Name == name; }); 845 if (localFile) { 846 URL.revokeObjectURL(localFile.Url); 847 } 848 var index = uploadComponent.files.indexOf(file) 849 if (index != -1) { 850 uploadComponent.files.splice(index, 1); 851 } 852 fileInput.value = ''; 853 }, 854 removeFileFromFileInput: function (fileInput) { 855 fileInput.value = ''; 856 }, 857 upload: function (fileInput, url, multiple, clear, parameterName) { 858 var uploadComponent = Radzen.uploadComponents && Radzen.uploadComponents[fileInput.id]; 859 if (!uploadComponent) { return; } 860 if (!uploadComponent.files || clear) { 861 uploadComponent.files = Array.from(fileInput.files); 862 } 863 var data = new FormData(); 864 var files = []; 865 var cancelled = false; 866 for (var i = 0; i < uploadComponent.files.length; i++) { 867 var file = uploadComponent.files[i]; 868 data.append(parameterName || (multiple ? 'files' : 'file'), file, file.name); 869 files.push({Name: file.name, Size: file.size}); 870 } 871 var xhr = new XMLHttpRequest(); 872 xhr.withCredentials = true; 873 xhr.upload.onprogress = function (e) { 874 if (e.lengthComputable) { 875 var uploadComponent = 876 Radzen.uploadComponents && Radzen.uploadComponents[fileInput.id]; 877 if (uploadComponent) { 878 var progress = parseInt((e.loaded / e.total) * 100); 879 uploadComponent.invokeMethodAsync( 880 'RadzenUpload.OnProgress', 881 progress, 882 e.loaded, 883 e.total, 884 files, 885 cancelled 886 ).then(function (cancel) { 887 if (cancel) { 888 cancelled = true; 889 xhr.abort(); 890 } 891 }); 892 } 893 } 894 }; 895 xhr.onreadystatechange = function (e) { 896 if (xhr.readyState === XMLHttpRequest.DONE) { 897 var status = xhr.status; 898 var uploadComponent = 899 Radzen.uploadComponents && Radzen.uploadComponents[fileInput.id]; 900 if (uploadComponent) { 901 if (status === 0 || (status >= 200 && status < 400)) { 902 uploadComponent.invokeMethodAsync( 903 'RadzenUpload.OnComplete', 904 xhr.responseText, 905 cancelled 906 ); 907 } else { 908 uploadComponent.invokeMethodAsync( 909 'RadzenUpload.OnError', 910 xhr.responseText 911 ); 912 } 913 } 914 } 915 }; 916 uploadComponent.invokeMethodAsync('GetHeaders').then(function (headers) { 917 xhr.open('POST', url, true); 918 for (var name in headers) { 919 xhr.setRequestHeader(name, headers[name]); 920 } 921 xhr.send(data); 922 });
923 }, 924 getCookie: function (name) { 925 var value = '; ' + decodeURIComponent(document.cookie); 926 var parts = value.split('; ' + name + '='); 927 if (parts.length == 2) return parts.pop().split(';').shift(); 928 }, 929 getCulture: function () { 930 var cultureCookie = Radzen.getCookie('.AspNetCore.Culture'); 931 var uiCulture = cultureCookie 932 ? cultureCookie.split('|').pop().split('=').pop() 933 : null; 934 return uiCulture || 'en-US'; 935 }, 936 numericOnPaste: function (e, min, max) { 937 if (e.clipboardData) { 938 var value = e.clipboardData.getData('text'); 939 940 if (value && !isNaN(+value)) { 941 var numericValue = +value; 942 if (min != null && numericValue >= min) { 943 return; 944 } 945 if (max != null && numericValue <= max) { 946 return; 947 } 948 } 949 950 e.preventDefault(); 951 } 952 }, 953 numericOnInput: function (e, min, max, isNullable) { 954 var value = e.target.value; 955 956 if (!isNullable && value == '' && min != null) { 957 e.target.value = min; 958 } 959 960 if (value && !isNaN(+value)) { 961 var numericValue = +value; 962 if (min != null && !isNaN(+min) && numericValue < min) { 963 e.target.value = min; 964 } 965 if (max != null && !isNaN(+max) && numericValue > max) { 966 e.target.value = max; 967 } 968 } 969 }, 970 numericKeyPress: function (e, isInteger, decimalSeparator) { 971 if ( 972 e.metaKey || 973 e.ctrlKey || 974 e.keyCode == 9 || 975 e.keyCode == 8 || 976 e.keyCode == 13 977 ) { 978 return; 979 } 980 981 if (e.code === 'NumpadDecimal') { 982 var cursorPosition = e.target.selectionEnd; 983 e.target.value = [e.target.value.slice(0, e.target.selectionStart), decimalSeparator, e.target.value.slice(e.target.selectionEnd)].join(''); 984 e.target.selectionStart = ++cursorPosition; 985 e.target.selectionEnd = cursorPosition; 986 e.preventDefault(); 987 return; 988 } 989 990 var ch = String.fromCharCode(e.charCode); 991 992 if ((isInteger ? /^[-\d]$/ : /^[-\d,.]$/).test(ch)) { 993 return; 994 } 995 996 e.preventDefault(); 997 }, 998 openContextMenu: function (x,y,id, instance, callback) { 999 Radzen.closePopup(id); 1000 1001 Radzen.openPopup(null, id, false, null, x, y, instance, callback); 1002 1003 setTimeout(function () { 1004 var popup = document.getElementById(id); 1005 if (popup) { 1006 var menu = popup.querySelector('.rz-menu'); 1007 if (menu) { 1008 menu.focus(); 1009 } 1010 } 1011 }, 500); 1012 }, 1013 openTooltip: function (target, id, delay, duration, position, closeTooltipOnDocumentClick, instance, callback) { 1014 Radzen.closeTooltip(id); 1015 1016 if (delay) { 1017 Radzen[id + 'delay'] = setTimeout(Radzen.openPopup, delay, target, id, false, position, null, null, instance, callback, closeTooltipOnDocumentClick); 1018 } else { 1019 Radzen.openPopup(target, id, false, position, null, null, instance, callback, closeTooltipOnDocumentClick); 1020 } 1021 1022 if (duration) { 1023 Radzen[id + 'duration'] = setTimeout(Radzen.closePopup, duration, id, instance, callback); 1024 } 1025 }, 1026 closeTooltip(id) { 1027 Radzen.activeElement = null; 1028 Radzen.closePopup(id); 1029 1030 if (Radzen[id + 'delay']) { 1031 clearTimeout(Radzen[id + 'delay']); 1032 } 1033 1034 if (Radzen[id + 'duration']) { 1035 clearTimeout(Radzen[id + 'duration']); 1036 } 1037 }, 1038 destroyDatePicker(id) { 1039 var el = document.getElementById(id); 1040 if (!el) return; 1041 1042 var button = el.querySelector('.rz-datepicker-trigger'); 1043 if (button) { 1044 button.onclick = null; 1045 } 1046 var input = el.querySelector('.rz-inputtext'); 1047 if (input) { 1048 input.onclick = null; 1049 } 1050 }, 1051 createDatePicker(el, popupId) { 1052 if(!el) return; 1053 var handler = function (e, condition) { 1054 if (condition) { 1055 Radzen.togglePopup(e.currentTarget.parentNode, popupId, false, null, null, true, false); 1056 } 1057 }; 1058 1059 var input = el.querySelector('.rz-inputtext'); 1060 var button = el.querySelector('.rz-datepicker-trigger'); 1061 if (button) { 1062 button.onclick = function (e) { 1063 handler(e, !e.currentTarget.classList.contains('rz-state-disabled') && (input ? !input.classList.contains('rz-readonly') : true)); 1064 }; 1065 } 1066 1067 if (input) { 1068 input.onclick = function (e) { 1069 handler(e, e.currentTarget.classList.contains('rz-input-trigger') && !e.currentTarget.classList.contains('rz-readonly')); 1070 }; 1071 } 1072 }, 1073 findPopup: function (id) { 1074 var popups = []; 1075 for (var i = 0; i < document.body.children.length; i++) { 1076 if (document.body.children[i].id == id) { 1077 popups.push(document.body.children[i]); 1078 } 1079 } 1080 return popups; 1081 }, 1082 repositionPopup: function (parent, id) { 1083 var popup = document.getElementById(id); 1084 if (!popup) return; 1085 1086 var rect = popup.getBoundingClientRect(); 1087 var parentRect = parent ? parent.getBoundingClientRect() : { top: 0, bottom: 0, left: 0, right: 0, width: 0, height: 0 }; 1088 1089 if (/Edge/.test(navigator.userAgent)) { 1090 var scrollTop = document.body.scrollTop; 1091 } else { 1092 var scrollTop = document.documentElement.scrollTop; 1093 } 1094 1095 var top = parentRect.bottom + scrollTop; 1096 1097 if (top + rect.height > window.innerHeight + scrollTop && parentRect.top > rect.height) { 1098 top = parentRect.top - rect.height + scrollTop; 1099 } 1100 1101 popup.style.top = top + 'px'; 1102 }, 1103 openPopup: function (parent, id, syncWidth, position, x, y, instance, callback, closeOnDocumentClick = true, autoFocusFirstElement = false, disableSmartPosition = false) { 1104 var popup = document.getElementById(id); 1105 if (!popup) return; 1106 1107 Radzen.activeElement = document.activeElement; 1108 1109 var parentRect = parent ? parent.getBoundingClientRect() : { top: y || 0, bottom: 0, left: x || 0, right: 0, width: 0, height: 0 }; 1110 1111 if (/Edge/.test(navigator.userAgent)) { 1112 var scrollLeft = document.body.scrollLeft; 1113 var scrollTop = document.body.scrollTop; 1114 } else { 1115 var scrollLeft = document.documentElement.scrollLeft; 1116 var scrollTop = document.documentElement.scrollTop; 1117 } 1118 1119 var top = y ? y : parentRect.bottom; 1120 var left = x ? x : parentRect.left; 1121 1122 if (syncWidth) { 1123 popup.style.width = parentRect.width + 'px'; 1124 if (!popup.style.minWidth) { 1125 popup.minWidth = true; 1126 popup.style.minWidth = parentRect.width + 'px'; 1127 } 1128 } 1129 1130 if (window.chrome) { 1131 var closestFrozenCell = popup.closest('.rz-frozen-cell'); 1132 if (closestFrozenCell) { 1133 Radzen[id + 'FZL'] = { cell: closestFrozenCell, left: closestFrozenCell.style.left }; 1134 closestFrozenCell.style.left = ''; 1135 } 1136 } 1137 1138 popup.style.display = 'block'; 1139 1140 var rect = popup.getBoundingClientRect(); 1141 rect.width = x ? rect.width + 20 : rect.width; 1142 rect.height = y ? rect.height + 20 : rect.height; 1143 1144 var smartPosition = !position || position == 'bottom'; 1145 1146 if (smartPosition && top + rect.height > window.innerHeight && parentRect.top > rect.height) { 1147 if (disableSmartPosition !== true) { 1148 top = parentRect.top - rect.height; 1149 } 1150 1151 if (position) { 1152 top = top - 40; 1153 var tooltipContent = popup.children[0]; 1154 var tooltipContentClassName = 'rz-' + position + '-tooltip-content'; 1155 if (tooltipContent.classList.contains(tooltipContentClassName)) { 1156 tooltipContent.classList.remove(tooltipContentClassName); 1157 tooltipContent.classList.add('rz-top-tooltip-content'); 1158 position = 'top'; 1159 if (instance && callback) { 1160 instance.invokeMethodAsync(callback, position); 1161 } 1162 } 1163 } 1164 } 1165 1166 if (smartPosition && left + rect.width > window.innerWidth && window.innerWidth > rect.width) { 1167 left = !position ? window.innerWidth - rect.width : rect.left; 1168 1169 if (position) { 1170 top = y || parentRect.top; 1171 var tooltipContent = popup.children[0]; 1172 var tooltipContentClassName = 'rz-' + position + '-tooltip-content'; 1173 if (tooltipContent.classList.contains(tooltipContentClassName)) { 1174 tooltipContent.classList.remove(tooltipContentClassName); 1175 tooltipContent.classList.add('rz-left-tooltip-content'); 1176 position = 'left'; 1177 if (instance && callback) { 1178 instance.invokeMethodAsync(callback, position); 1179 } 1180 } 1181 } 1182 } 1183 1184 if (smartPosition) { 1185 if (position) { 1186 top = top + 20; 1187 } 1188 } 1189 1190 if (position == 'left') { 1191 left = parentRect.left - rect.width - 5; 1192 top = parentRect.top; 1193 } 1194 1195 if (position == 'right') { 1196 left = parentRect.right + 10; 1197 top = parentRect.top; 1198 } 1199 1200 if (position == 'top') { 1201 top = parentRect.top - rect.height + 5; 1202 left = parentRect.left; 1203 } 1204 1205 popup.style.zIndex = 2000; 1206 popup.style.left = left + scrollLeft + 'px'; 1207 popup.style.top = top + scrollTop + 'px'; 1208 1209 if (!popup.classList.contains('rz-overlaypanel')) { 1210 popup.classList.add('rz-popup'); 1211 } 1212 1213 Radzen[id] = function (e) { 1214 var lastPopup = Radzen.popups && Radzen.popups[Radzen.popups.length - 1]; 1215 var currentPopup = lastPopup != null && document.getElementById(lastPopup.id) || popup; 1216 1217 if (lastPopup) { 1218 currentPopup.instance = lastPopup.instance; 1219 currentPopup.callback = lastPopup.callback; 1220 currentPopup.parent = lastPopup.parent; 1221 } 1222 1223 if(e.type == 'contextmenu' || !e.target || !closeOnDocumentClick) return; 1224 if (!/Android/i.test(navigator.userAgent) && 1225 !['input', 'textarea'].includes(document.activeElement ? document.activeElement.tagName.toLowerCase() : '') && e.type == 'resize') { 1226 Radzen.closePopup(currentPopup.id, currentPopup.instance, currentPopup.callback, e); 1227 return; 1228 } 1229 1230 var closestLink = e.target.closest && (e.target.closest('.rz-link') || e.target.closest('.rz-navigation-item-link')); 1231 if (closestLink && closestLink.closest && closestLink.closest('a')) { 1232 if (Radzen.closeAllPopups) { 1233 Radzen.closeAllPopups(); 1234 } 1235 } 1236 if (currentPopup.parent) { 1237 if (e.type == 'mousedown' && !currentPopup.parent.contains(e.target) && !currentPopup.contains(e.target)) { 1238 Radzen.closePopup(currentPopup.id, currentPopup.instance, currentPopup.callback, e); 1239 } 1240 } else { 1241 if (e.target.nodeType && !currentPopup.contains(e.target)) { 1242 Radzen.closePopup(currentPopup.id, currentPopup.instance, currentPopup.callback, e); 1243 } 1244 } 1245 }; 1246 1247 if (!Radzen.popups) { 1248 Radzen.popups = []; 1249 } 1250 1251 Radzen.popups.push({ id, instance, callback, parent }); 1252
1253 document.body.appendChild(popup); 1254 document.removeEventListener('mousedown', Radzen[id]); 1255 document.addEventListener('mousedown', Radzen[id]); 1256 window.removeEventListener('resize', Radzen[id]); 1257 window.addEventListener('resize', Radzen[id]); 1258 1259 var p = parent; 1260 while (p && p != document.body) { 1261 if (p.scrollWidth > p.clientWidth || p.scrollHeight > p.clientHeight) { 1262 p.removeEventListener('scroll', Radzen.closeAllPopups); 1263 p.addEventListener('scroll', Radzen.closeAllPopups); 1264 } 1265 p = p.parentElement; 1266 } 1267 1268 if (!parent) { 1269 document.removeEventListener('contextmenu', Radzen[id]); 1270 document.addEventListener('contextmenu', Radzen[id]); 1271 } 1272 1273 if (autoFocusFirstElement) { 1274 setTimeout(function () { 1275 popup.removeEventListener('keydown', Radzen.focusTrap); 1276 popup.addEventListener('keydown', Radzen.focusTrap); 1277 1278 var focusable = Radzen.getFocusableElements(popup); 1279 var firstFocusable = focusable[0]; 1280 if (firstFocusable) { 1281 firstFocusable.focus(); 1282 } 1283 }, 500); 1284 } 1285 }, 1286 closeAllPopups: function (e, id) { 1287 if (!Radzen.popups) return; 1288 var el = e && e.target || id && documentElement.getElementById(id); 1289 var popups = Radzen.popups; 1290 for (var i = 0; i < popups.length; i++) { 1291 var p = popups[i]; 1292 1293 var closestPopup = el && el.closest && (el.closest('.rz-popup') || el.closest('.rz-overlaypanel')); 1294 if (closestPopup && closestPopup != p) { 1295 return; 1296 } 1297 1298 Radzen.closePopup(p.id, p.instance, p.callback, e); 1299 } 1300 Radzen.popups = []; 1301 }, 1302 closePopup: function (id, instance, callback, e) { 1303 var popup = document.getElementById(id); 1304 if (!popup) return; 1305 if (popup.style.display == 'none') { 1306 var popups = Radzen.findPopup(id); 1307 if (popups.length > 1) { 1308 for (var i = 0; i < popups.length; i++) { 1309 if (popups[i].style.display == 'none') { 1310 popups[i].parentNode.removeChild(popups[i]); 1311 } else { 1312 popup = popups[i]; 1313 } 1314 } 1315 } else { 1316 return; 1317 } 1318 } 1319 1320 if (popup) { 1321 if (popup.minWidth) { 1322 popup.style.minWidth = ''; 1323 } 1324 1325 if (window.chrome && Radzen[id + 'FZL']) { 1326 Radzen[id + 'FZL'].cell.style.left = Radzen[id + 'FZL'].left; 1327 Radzen[id + 'FZL'] = null; 1328 } 1329 1330 popup.style.display = 'none'; 1331 } 1332 document.removeEventListener('mousedown', Radzen[id]); 1333 window.removeEventListener('resize', Radzen[id]); 1334 Radzen[id] = null; 1335 1336 if (instance && callback) { 1337 if (callback.includes('RadzenTooltip')) { 1338 instance.invokeMethodAsync(callback, null); 1339 } else { 1340 instance.invokeMethodAsync(callback); 1341 } 1342 } 1343 Radzen.popups = (Radzen.popups || []).filter(function (obj) { 1344 return obj.id !== id; 1345 }); 1346 1347 if (Radzen.activeElement && Radzen.activeElement == document.activeElement || 1348 Radzen.activeElement && document.activeElement == document.body || 1349 Radzen.activeElement && document.activeElement && 1350 (document.activeElement.classList.contains('rz-dropdown-filter') || document.activeElement.classList.contains('rz-lookup-search-input'))) { 1351 setTimeout(function () { 1352 if (e && e.target && e.target.tabIndex != -1) { 1353 Radzen.activeElement = e.target; 1354 } 1355 if (Radzen.activeElement) { 1356 Radzen.activeElement.focus(); 1357 } 1358 Radzen.activeElement = null; 1359 }, 100); 1360 } 1361 }, 1362 popupOpened: function (id) { 1363 var popup = document.getElementById(id); 1364 if (popup) { 1365 return popup.style.display != 'none'; 1366 } 1367 return false; 1368 }, 1369 togglePopup: function (parent, id, syncWidth, instance, callback, closeOnDocumentClick = true, autoFocusFirstElement = false) { 1370 var popup = document.getElementById(id); 1371 if (!popup) return; 1372 if (popup.style.display == 'block') { 1373 Radzen.closePopup(id, instance, callback); 1374 } else { 1375 Radzen.openPopup(parent, id, syncWidth, null, null, null, instance, callback, closeOnDocumentClick, autoFocusFirstElement); 1376 } 1377 }, 1378 destroyPopup: function (id) { 1379 var popup = document.getElementById(id); 1380 if (popup) { 1381 popup.parentNode.removeChild(popup); 1382 } 1383 document.removeEventListener('mousedown', Radzen[id]); 1384 }, 1385 scrollDataGrid: function (e) { 1386 var scrollLeft = 1387 (e.target.scrollLeft ? '-' + e.target.scrollLeft : 0) + 'px'; 1388 1389 e.target.previousElementSibling.style.marginLeft = scrollLeft; 1390 e.target.previousElementSibling.firstElementChild.style.paddingRight = 1391 e.target.clientHeight < e.target.scrollHeight ? (e.target.offsetWidth - e.target.clientWidth) + 'px' : '0px'; 1392 1393 if (e.target.nextElementSibling) { 1394 e.target.nextElementSibling.style.marginLeft = scrollLeft; 1395 e.target.nextElementSibling.firstElementChild.style.paddingRight = 1396 e.target.clientHeight < e.target.scrollHeight ? (e.target.offsetWidth - e.target.clientWidth) + 'px' : '0px'; 1397 } 1398 1399 for (var i = 0; i < document.body.children.length; i++) { 1400 if (document.body.children[i].classList.contains('rz-overlaypanel')) { 1401 document.body.children[i].style.display = 'none'; 1402 } 1403 } 1404 }, 1405 focusFirstFocusableElement: function (el) { 1406 var focusable = Radzen.getFocusableElements(el); 1407 var editor = el.querySelector('.rz-html-editor'); 1408 1409 if (editor && !focusable.includes(editor.previousElementSibling)) { 1410 var editable = el.querySelector('.rz-html-editor-content'); 1411 if (editable) { 1412 var selection = window.getSelection(); 1413 var range = document.createRange(); 1414 range.setStart(editable, 0); 1415 range.setEnd(editable, 0); 1416 selection.removeAllRanges(); 1417 selection.addRange(range); 1418 } 1419 } else { 1420 var firstFocusable = focusable[0]; 1421 if (firstFocusable) { 1422 firstFocusable.focus(); 1423 } 1424 } 1425 }, 1426 openSideDialog: function (options) { 1427 setTimeout(function () { 1428 if (options.autoFocusFirstElement) { 1429 var dialogs = document.querySelectorAll('.rz-dialog-side-content'); 1430 if (dialogs.length == 0) return; 1431 var lastDialog = dialogs[dialogs.length - 1]; 1432 Radzen.focusFirstFocusableElement(lastDialog); 1433 } 1434 }, 500); 1435 }, 1436 openDialog: function (options, dialogService, dialog) { 1437 if (Radzen.closeAllPopups) { 1438 Radzen.closeAllPopups(); 1439 } 1440 Radzen.dialogService = dialogService; 1441 if ( 1442 document.documentElement.scrollHeight > 1443 document.documentElement.clientHeight 1444 ) { 1445 document.body.classList.add('no-scroll'); 1446 } 1447 1448 setTimeout(function () { 1449 var dialogs = document.querySelectorAll('.rz-dialog-content'); 1450 if (dialogs.length == 0) return; 1451 var lastDialog = dialogs[dialogs.length - 1]; 1452 1453 if (lastDialog) { 1454 lastDialog.options = options; 1455 lastDialog.removeEventListener('keydown', Radzen.focusTrap); 1456 lastDialog.addEventListener('keydown', Radzen.focusTrap); 1457 1458 if (options.resizable) { 1459 dialog.offsetWidth = lastDialog.parentElement.offsetWidth; 1460 dialog.offsetHeight = lastDialog.parentElement.offsetHeight; 1461 var dialogResize = function (e) { 1462 if (!dialog) return; 1463 if (dialog.offsetWidth != e[0].target.offsetWidth || dialog.offsetHeight != e[0].target.offsetHeight) { 1464 1465 dialog.offsetWidth = e[0].target.offsetWidth; 1466 dialog.offsetHeight = e[0].target.offsetHeight; 1467 1468 dialog.invokeMethodAsync( 1469 'RadzenDialog.OnResize', 1470 e[0].target.offsetWidth, 1471 e[0].target.offsetHeight 1472 ); 1473 } 1474 }; 1475 Radzen.dialogResizer = new ResizeObserver(dialogResize).observe(lastDialog.parentElement); 1476 } 1477 1478 if (options.draggable) { 1479 var dialogTitle = lastDialog.parentElement.querySelector('.rz-dialog-titlebar'); 1480 if (dialogTitle) {
1481 Radzen[dialogTitle] = function (e) { 1482 var rect = lastDialog.parentElement.getBoundingClientRect(); 1483 var offsetX = e.clientX - rect.left; 1484 var offsetY = e.clientY - rect.top; 1485 1486 var move = function (e) { 1487 var left = e.clientX - offsetX; 1488 var top = e.clientY - offsetY; 1489 1490 lastDialog.parentElement.style.left = left + 'px'; 1491 lastDialog.parentElement.style.top = top + 'px'; 1492 1493 dialog.invokeMethodAsync('RadzenDialog.OnDrag', top, left); 1494 }; 1495 1496 var stop = function () { 1497 document.removeEventListener('mousemove', move); 1498 document.removeEventListener('mouseup', stop); 1499 }; 1500 1501 document.addEventListener('mousemove', move); 1502 document.addEventListener('mouseup', stop); 1503 }; 1504 1505 dialogTitle.addEventListener('mousedown', Radzen[dialogTitle]); 1506 } 1507 } 1508 1509 if (options.autoFocusFirstElement) { 1510 Radzen.focusFirstFocusableElement(lastDialog); 1511 } 1512 } 1513 }, 500); 1514 1515 document.removeEventListener('keydown', Radzen.closePopupOrDialog); 1516 if (options.closeDialogOnEsc) { 1517 document.addEventListener('keydown', Radzen.closePopupOrDialog); 1518 } 1519 }, 1520 closeDialog: function () { 1521 Radzen.dialogResizer = null; 1522 document.body.classList.remove('no-scroll'); 1523 var dialogs = document.querySelectorAll('.rz-dialog-content'); 1524 1525 var lastDialog = dialogs.length && dialogs[dialogs.length - 1]; 1526 if (lastDialog) { 1527 var dialogTitle = lastDialog.parentElement.querySelector('.rz-dialog-titlebar'); 1528 if (dialogTitle) { 1529 dialogTitle.removeEventListener('mousedown', Radzen[dialogTitle]); 1530 Radzen[dialogTitle] = null; 1531 delete Radzen[dialogTitle]; 1532 } 1533 } 1534 1535 if (dialogs.length <= 1) { 1536 document.removeEventListener('keydown', Radzen.closePopupOrDialog); 1537 delete Radzen.dialogService; 1538 } 1539 }, 1540 disableKeydown: function (e) { 1541 e = e || window.event; 1542 e.preventDefault(); 1543 }, 1544 getFocusableElements: function (element) { 1545 return [...element.querySelectorAll('a, button, input, textarea, select, details, iframe, embed, object, summary dialog, audio[controls], video[controls], [contenteditable], [tabindex]')] 1546 .filter(el => el && el.tabIndex > -1 && !el.hasAttribute('disabled') && el.offsetParent !== null); 1547 }, 1548 focusTrap: function (e) { 1549 e = e || window.event; 1550 var isTab = false; 1551 if ("key" in e) { 1552 isTab = (e.key === "Tab"); 1553 } else { 1554 isTab = (e.keyCode === 9); 1555 } 1556 if (isTab) { 1557 var focusable = Radzen.getFocusableElements(e.currentTarget); 1558 var firstFocusable = focusable[0]; 1559 var lastFocusable = focusable[focusable.length - 1]; 1560 1561 if (firstFocusable && lastFocusable && e.shiftKey && document.activeElement === firstFocusable) { 1562 e.preventDefault(); 1563 lastFocusable.focus(); 1564 } else if (firstFocusable && lastFocusable && !e.shiftKey && document.activeElement === lastFocusable) { 1565 e.preventDefault(); 1566 firstFocusable.focus(); 1567 } 1568 } 1569 }, 1570 closePopupOrDialog: function (e) { 1571 e = e || window.event; 1572 var isEscape = false; 1573 if ("key" in e) { 1574 isEscape = (e.key === "Escape" || e.key === "Esc"); 1575 } else { 1576 isEscape = (e.keyCode === 27); 1577 } 1578 if (isEscape && Radzen.dialogService) { 1579 var popups = document.querySelectorAll('.rz-popup,.rz-overlaypanel'); 1580 for (var i = 0; i < popups.length; i++) { 1581 if (popups[i].style.display != 'none') { 1582 return; 1583 } 1584 } 1585 1586 var dialogs = document.querySelectorAll('.rz-dialog-content'); 1587 if (dialogs.length == 0) return; 1588 var lastDialog = dialogs[dialogs.length - 1]; 1589 1590 if (lastDialog && lastDialog.options && lastDialog.options.closeDialogOnEsc) { 1591 Radzen.dialogService.invokeMethodAsync('DialogService.Close', null); 1592 1593 if (dialogs.length <= 1) { 1594 document.removeEventListener('keydown', Radzen.closePopupOrDialog); 1595 delete Radzen.dialogService; 1596 var layout = document.querySelector('.rz-layout'); 1597 if (layout) { 1598 layout.removeEventListener('keydown', Radzen.disableKeydown); 1599 } 1600 } 1601 } 1602 } 1603 }, 1604 getNumericValue: function (arg) { 1605 var el = 1606 arg instanceof Element || arg instanceof HTMLDocument 1607 ? arg 1608 : document.getElementById(arg); 1609 return el ? Radzen.getInputValue(el.children[0]) : null; 1610 }, 1611 getInputValue: function (arg) { 1612 var input = 1613 arg instanceof Element || arg instanceof HTMLDocument 1614 ? arg 1615 : document.getElementById(arg); 1616 return input && input.value != '' ? input.value : null; 1617 }, 1618 setInputValue: function (arg, value) { 1619 var input = 1620 arg instanceof Element || arg instanceof HTMLDocument 1621 ? arg 1622 : document.getElementById(arg); 1623 if (input) { 1624 input.value = value; 1625 } 1626 }, 1627 readFileAsBase64: function (fileInput, maxFileSize, maxWidth, maxHeight) { 1628 var calculateWidthAndHeight = function (img) { 1629 var width = img.width;
1630 var height = img.height; 1631 // Change the resizing logic 1632 if (width > height) { 1633 if (width > maxWidth) { 1634 height = height * (maxWidth / width); 1635 width = maxWidth; 1636 } 1637 } else { 1638 if (height > maxHeight) { 1639 width = width * (maxHeight / height); 1640 height = maxHeight; 1641 } 1642 } 1643 return { width, height }; 1644 }; 1645 var readAsDataURL = function (fileInput) { 1646 return new Promise(function (resolve, reject) { 1647 var reader = new FileReader(); 1648 reader.onerror = function () { 1649 reader.abort(); 1650 reject('Error reading file.'); 1651 }; 1652 reader.addEventListener( 1653 'load', 1654 function () { 1655 if (maxWidth > 0 && maxHeight > 0) { 1656 var img = document.createElement("img"); 1657 img.onload = function (event) { 1658 // Dynamically create a canvas element 1659 var canvas = document.createElement("canvas"); 1660 var res = calculateWidthAndHeight(img); 1661 canvas.width = res.width; 1662 canvas.height = res.height; 1663 var ctx = canvas.getContext("2d"); 1664 ctx.drawImage(img, 0, 0, res.width, res.height); 1665 resolve(canvas.toDataURL(fileInput.type)); 1666 } 1667 img.src = reader.result; 1668 } else { 1669 resolve(reader.result); 1670 } 1671 }, 1672 false 1673 ); 1674 var file = fileInput.files[0]; 1675 if (!file) return; 1676 if (file.size <= maxFileSize) { 1677 reader.readAsDataURL(file); 1678 } else { 1679 reject('File too large.'); 1680 } 1681 }); 1682 }; 1683 1684 return readAsDataURL(fileInput); 1685 }, 1686 toggleMenuItem: function (target, event, defaultActive, clickToOpen) { 1687 var item = target.closest('.rz-navigation-item'); 1688 1689 var active = defaultActive != undefined ? defaultActive : !item.classList.contains('rz-navigation-item-active'); 1690 1691 function toggle(active) { 1692 item.classList.toggle('rz-navigation-item-active', active); 1693 1694 target.classList.toggle('rz-navigation-item-wrapper-active', active); 1695 1696 var children = item.querySelector('.rz-navigation-menu'); 1697 1698 if (children) { 1699 children.style.display = active ? '' : 'none'; 1700 } 1701 1702 var icon = item.querySelector('.rz-navigation-item-icon-children'); 1703 1704 if (icon) { 1705 var deg = active ? '180deg' : 0; 1706 icon.style.transform = 'rotate(' + deg + ')'; 1707 } 1708 } 1709 1710 if (clickToOpen === false && item.parentElement && item.parentElement.closest('.rz-navigation-item') && !defaultActive) { 1711 return; 1712 }; 1713 1714 toggle(active); 1715 1716 document.removeEventListener('click', target.clickHandler); 1717 1718 target.clickHandler = function (event) { 1719 if (item.contains(event.target)) { 1720 var child = event.target.closest('.rz-navigation-item'); 1721 if (child && child.querySelector('.rz-navigation-menu')) { 1722 return; 1723 } 1724 } 1725 toggle(false); 1726 } 1727 1728 document.addEventListener('click', target.clickHandler); 1729 }, 1730 destroyChart: function (ref) { 1731 ref.removeEventListener('mouseleave', ref.mouseLeaveHandler); 1732 delete ref.mouseLeaveHandler; 1733 ref.removeEventListener('mouseenter', ref.mouseEnterHandler); 1734 delete ref.mouseEnterHandler; 1735 ref.removeEventListener('mousemove', ref.mouseMoveHandler); 1736 delete ref.mouseMoveHandler; 1737 ref.removeEventListener('click', ref.clickHandler); 1738 delete ref.clickHandler; 1739 this.destroyResizable(ref); 1740 }, 1741 destroyGauge: function (ref) { 1742 this.destroyResizable(ref); 1743 }, 1744 destroyResizable: function (ref) { 1745 if (ref.resizeObserver) { 1746 ref.resizeObserver.disconnect(); 1747 delete ref.resizeObserver; 1748 } 1749 if (ref.resizeHandler) { 1750 window.removeEventListener('resize', ref.resizeHandler); 1751 delete ref.resizeHandler; 1752 } 1753 }, 1754 createResizable: function (ref, instance) { 1755 ref.resizeHandler = function () { 1756 var rect = ref.getBoundingClientRect(); 1757 1758 instance.invokeMethodAsync('Resize', rect.width, rect.height); 1759 }; 1760 1761 if (window.ResizeObserver) { 1762 ref.resizeObserver = new ResizeObserver(ref.resizeHandler); 1763 ref.resizeObserver.observe(ref); 1764 } else { 1765 window.addEventListener('resize', ref.resizeHandler); 1766 } 1767 1768 var rect = ref.getBoundingClientRect(); 1769 1770 return {width: rect.width, height: rect.height}; 1771 }, 1772 createChart: function (ref, instance) { 1773 var inside = false; 1774 ref.mouseMoveHandler = this.throttle(function (e) { 1775 if (inside) { 1776 var rect = ref.getBoundingClientRect(); 1777 var x = e.clientX - rect.left; 1778 var y = e.clientY - rect.top; 1779 instance.invokeMethodAsync('MouseMove', x, y); 1780 } 1781 }, 100); 1782 ref.mouseEnterHandler = function () { 1783 inside = true; 1784 }; 1785 ref.mouseLeaveHandler = function (e) { 1786 if (e.relatedTarget && (e.relatedTarget.matches('.rz-chart-tooltip') || e.relatedTarget.closest('.rz-chart-tooltip'))) { 1787 return; 1788 } 1789 inside = false; 1790 instance.invokeMethodAsync('MouseMove', -1, -1); 1791 }; 1792 ref.clickHandler = function (e) { 1793 var rect = ref.getBoundingClientRect(); 1794 var x = e.clientX - rect.left; 1795 var y = e.clientY - rect.top; 1796 if (!e.target.closest('.rz-marker')) { 1797 instance.invokeMethodAsync('Click', x, y); 1798 } 1799 }; 1800 1801 ref.addEventListener('mouseenter', ref.mouseEnterHandler); 1802 ref.addEventListener('mouseleave', ref.mouseLeaveHandler); 1803 ref.addEventListener('mousemove', ref.mouseMoveHandler); 1804 ref.addEventListener('click', ref.clickHandler); 1805 1806 return this.createResizable(ref, instance); 1807 }, 1808 createGauge: function (ref, instance) { 1809 return this.createResizable(ref, instance); 1810 }, 1811 destroyScheduler: function (ref) { 1812 if (ref.resizeHandler) { 1813 window.removeEventListener('resize', ref.resizeHandler); 1814 delete ref.resizeHandler; 1815 } 1816 }, 1817 createScheduler: function (ref, instance) { 1818 ref.resizeHandler = function () { 1819 var rect = ref.getBoundingClientRect(); 1820 1821 instance.invokeMethodAsync('Resize', rect.width, rect.height); 1822 }; 1823 1824 window.addEventListener('resize', ref.resizeHandler); 1825 1826 var rect = ref.getBoundingClientRect(); 1827 return {width: rect.width, height: rect.height}; 1828 }, 1829 innerHTML: function (ref, value) { 1830 if (value != undefined) { 1831 if (ref != null) { 1832 ref.innerHTML = value; 1833 } 1834 } else { 1835 return ref.innerHTML; 1836 } 1837 }, 1838 execCommand: function (ref, name, value) { 1839 if (document.activeElement != ref && ref) { 1840 ref.focus(); 1841 } 1842 document.execCommand(name, false, value); 1843 return this.queryCommands(ref); 1844 }, 1845 queryCommands: function (ref) { 1846 return { 1847 html: ref != null ? ref.innerHTML : null, 1848 fontName: document.queryCommandValue('fontName'), 1849 fontSize: document.queryCommandValue('fontSize'), 1850 formatBlock: document.queryCommandValue('formatBlock'), 1851 bold: document.queryCommandState('bold'), 1852 underline: document.queryCommandState('underline'), 1853 justifyRight: document.queryCommandState('justifyRight'), 1854 justifyLeft: document.queryCommandState('justifyLeft'), 1855 justifyCenter: document.queryCommandState('justifyCenter'), 1856 justifyFull: document.queryCommandState('justifyFull'), 1857 italic: document.queryCommandState('italic'),
1858 strikeThrough: document.queryCommandState('strikeThrough'), 1859 superscript: document.queryCommandState('superscript'), 1860 subscript: document.queryCommandState('subscript'), 1861 unlink: document.queryCommandEnabled('unlink'), 1862 undo: document.queryCommandEnabled('undo'), 1863 redo: document.queryCommandEnabled('redo') 1864 }; 1865 }, 1866 mediaQueries: {}, 1867 mediaQuery: function(query, instance) { 1868 if (instance) { 1869 function callback(event) { 1870 instance.invokeMethodAsync('OnChange', event.matches) 1871 }; 1872 var query = matchMedia(query); 1873 this.mediaQueries[instance._id] = function() { 1874 query.removeListener(callback); 1875 } 1876 query.addListener(callback); 1877 return query.matches; 1878 } else { 1879 instance = query; 1880 if (this.mediaQueries[instance._id]) { 1881 this.mediaQueries[instance._id](); 1882 delete this.mediaQueries[instance._id]; 1883 } 1884 } 1885 }, 1886 createEditor: function (ref, uploadUrl, paste, instance, shortcuts) { 1887 ref.inputListener = function () { 1888 instance.invokeMethodAsync('OnChange', ref.innerHTML); 1889 }; 1890 ref.keydownListener = function (e) { 1891 var key = ''; 1892 if (e.ctrlKey || e.metaKey) { 1893 key += 'Ctrl+'; 1894 } 1895 if (e.altKey) { 1896 key += 'Alt+'; 1897 } 1898 if (e.shiftKey) { 1899 key += 'Shift+'; 1900 } 1901 key += e.code.replace('Key', '').replace('Digit', '').replace('Numpad', ''); 1902 1903 if (shortcuts.includes(key)) { 1904 e.preventDefault(); 1905 instance.invokeMethodAsync('ExecuteShortcutAsync', key); 1906 } 1907 }; 1908 1909 ref.clickListener = function (e) { 1910 if (e.target) { 1911 if (e.target.matches('a,button')) { 1912 e.preventDefault(); 1913 } 1914 1915 for (var img of ref.querySelectorAll('img.rz-state-selected')) { 1916 img.classList.remove('rz-state-selected'); 1917 } 1918 1919 if (e.target.matches('img')) { 1920 e.target.classList.add('rz-state-selected'); 1921 var range = document.createRange(); 1922 range.selectNode(e.target); 1923 getSelection().removeAllRanges(); 1924 getSelection().addRange(range); 1925 } 1926 } 1927 } 1928 1929 ref.selectionChangeListener = function () { 1930 if (document.activeElement == ref) { 1931 instance.invokeMethodAsync('OnSelectionChange'); 1932 } 1933 }; 1934 ref.pasteListener = function (e) { 1935 var item = e.clipboardData.items[0]; 1936 1937 if (item.kind == 'file') { 1938 e.preventDefault(); 1939 var file = item.getAsFile(); 1940 1941 if (uploadUrl) { 1942 var xhr = new XMLHttpRequest(); 1943 var data = new FormData(); 1944 data.append("file", file); 1945 xhr.onreadystatechange = function (e) { 1946 if (xhr.readyState === XMLHttpRequest.DONE) { 1947 var status = xhr.status; 1948 if (status === 0 || (status >= 200 && status < 400)) { 1949 var result = JSON.parse(xhr.responseText); 1950 var html = '<img src="' + result.url + '">'; 1951 if (paste) { 1952 instance.invokeMethodAsync('OnPaste', html) 1953 .then(function (html) { 1954 document.execCommand("insertHTML", false, html); 1955 }); 1956 } else { 1957 document.execCommand("insertHTML", false, '<img src="' + result.url + '">'); 1958 } 1959 instance.invokeMethodAsync('OnUploadComplete', xhr.responseText); 1960 } else { 1961 instance.invokeMethodAsync('OnError', xhr.responseText); 1962 } 1963 } 1964 } 1965 instance.invokeMethodAsync('GetHeaders').then(function (headers) { 1966 xhr.open('POST', uploadUrl, true); 1967 for (var name in headers) { 1968 xhr.setRequestHeader(name, headers[name]); 1969 } 1970 xhr.send(data); 1971 }); 1972 } else { 1973 var reader = new FileReader(); 1974 reader.onload = function (e) { 1975 var html = '<img src="' + e.target.result + '">'; 1976 1977 if (paste) { 1978 instance.invokeMethodAsync('OnPaste', html) 1979 .then(function (html) { 1980 document.execCommand("insertHTML", false, html); 1981 }); 1982 } else { 1983 document.execCommand("insertHTML", false, html); 1984 } 1985 };
1986 reader.readAsDataURL(file); 1987 } 1988 } else if (paste) { 1989 e.preventDefault(); 1990 var data = e.clipboardData.getData('text/html') || e.clipboardData.getData('text/plain'); 1991 1992 instance.invokeMethodAsync('OnPaste', data) 1993 .then(function (html) { 1994 document.execCommand("insertHTML", false, html); 1995 }); 1996 } 1997 }; 1998 ref.addEventListener('input', ref.inputListener); 1999 ref.addEventListener('paste', ref.pasteListener); 2000 ref.addEventListener('keydown', ref.keydownListener); 2001 ref.addEventListener('click', ref.clickListener); 2002 document.addEventListener('selectionchange', ref.selectionChangeListener); 2003 document.execCommand('styleWithCSS', false, true); 2004 }, 2005 saveSelection: function (ref) { 2006 if (document.activeElement == ref) { 2007 var selection = getSelection(); 2008 if (selection.rangeCount > 0) { 2009 ref.range = selection.getRangeAt(0); 2010 } 2011 } 2012 }, 2013 restoreSelection: function (ref) { 2014 var range = ref.range; 2015 if (range) { 2016 delete ref.range; 2017 if(ref) { 2018 ref.focus(); 2019 } 2020 var selection = getSelection(); 2021 selection.removeAllRanges(); 2022 selection.addRange(range); 2023 } 2024 }, 2025 selectionAttributes: function (selector, attributes, container) { 2026 var selection = getSelection(); 2027 var range = selection.rangeCount > 0 && selection.getRangeAt(0); 2028 var parent = range && range.commonAncestorContainer; 2029 var img = container.querySelector('img.rz-state-selected'); 2030 var inside = img && selector == 'img'; 2031 while (parent) { 2032 if (parent == container) { 2033 inside = true; 2034 break; 2035 } 2036 parent = parent.parentNode; 2037 } 2038 if (!inside) { 2039 return {}; 2040 } 2041 var target = selection.focusNode; 2042 var innerHTML; 2043 2044 if (img && selector == 'img') { 2045 target = img; 2046 } else if (target) { 2047 if (target.nodeType == 3) { 2048 target = target.parentElement; 2049 } else { 2050 target = target.childNodes[selection.focusOffset]; 2051 if (target) { 2052 innerHTML = target.outerHTML; 2053 } 2054 } 2055 if (target && target.matches && !target.matches(selector)) { 2056 target = target.closest(selector); 2057 } 2058 } 2059 2060 return attributes.reduce(function (result, name) { 2061 if (target) { 2062 result[name] = name == 'innerText' ? target[name] : target.getAttribute(name); 2063 } 2064 return result; 2065 }, { innerText: selection.toString(), innerHTML: innerHTML }); 2066 }, 2067 destroyEditor: function (ref) { 2068 if (ref) { 2069 ref.removeEventListener('input', ref.inputListener); 2070 ref.removeEventListener('paste', ref.pasteListener); 2071 ref.removeEventListener('keydown', ref.keydownListener); 2072 ref.removeEventListener('click', ref.clickListener); 2073 document.removeEventListener('selectionchange', ref.selectionChangeListener); 2074 } 2075 }, 2076 startDrag: function (ref, instance, handler) { 2077 if (!ref) { 2078 return { left: 0, top: 0, width: 0, height: 0 }; 2079 } 2080 ref.mouseMoveHandler = function (e) { 2081 instance.invokeMethodAsync(handler, { clientX: e.clientX, clientY: e.clientY }); 2082 }; 2083 ref.touchMoveHandler = function (e) { 2084 if (e.targetTouches[0] && ref.contains(e.targetTouches[0].target)) { 2085 instance.invokeMethodAsync(handler, { clientX: e.targetTouches[0].clientX, clientY: e.targetTouches[0].clientY }); 2086 } 2087 }; 2088 ref.mouseUpHandler = function (e) { 2089 Radzen.endDrag(ref); 2090 }; 2091 document.addEventListener('mousemove', ref.mouseMoveHandler); 2092 document.addEventListener('mouseup', ref.mouseUpHandler); 2093 document.addEventListener('touchmove', ref.touchMoveHandler, { passive: true, capture: true }) 2094 document.addEventListener('touchend', ref.mouseUpHandler, { passive: true }); 2095 return Radzen.clientRect(ref); 2096 }, 2097 submit: function (form) { 2098 form.submit(); 2099 }, 2100 clientRect: function (arg) { 2101 var el = arg instanceof Element || arg instanceof HTMLDocument 2102 ? arg 2103 : document.getElementById(arg); 2104 var rect = el.getBoundingClientRect(); 2105 return { left: rect.left, top: rect.top, width: rect.width, height: rect.height }; 2106 }, 2107 endDrag: function (ref) { 2108 document.removeEventListener('mousemove', ref.mouseMoveHandler); 2109 document.removeEventListener('mouseup', ref.mouseUpHandler); 2110 document.removeEventListener('touchmove', ref.touchMoveHandler) 2111 document.removeEventListener('touchend', ref.mouseUpHandler); 2112 }, 2113 startColumnReorder: function(id) { 2114 var el = document.getElementById(id + '-drag'); 2115 var cell = el.parentNode.parentNode; 2116 var visual = document.createElement("th"); 2117 visual.className = cell.className + ' rz-column-draggable'; 2118 visual.style = cell.style; 2119 visual.style.display = 'none'; 2120 visual.style.position = 'absolute'; 2121 visual.style.height = cell.offsetHeight + 'px'; 2122 visual.style.width = cell.offsetWidth + 'px'; 2123 visual.style.zIndex = 2000; 2124 visual.innerHTML = cell.innerHTML; 2125 visual.id = id + 'visual'; 2126 document.body.appendChild(visual); 2127 2128 var resizers = cell.parentNode.querySelectorAll('.rz-column-resizer'); 2129 for (let i = 0; i < resizers.length; i++) { 2130 resizers[i].style.display = 'none'; 2131 } 2132 2133 Radzen[id + 'end'] = function (e) { 2134 var el = document.getElementById(id + 'visual'); 2135 if (el) { 2136 document.body.removeChild(el); 2137 Radzen[id + 'end'] = null; 2138 Radzen[id + 'move'] = null; 2139 var resizers = cell.parentNode.querySelectorAll('.rz-column-resizer'); 2140 for (let i = 0; i < resizers.length; i++) { 2141 resizers[i].style.display = 'block'; 2142 } 2143 } 2144 } 2145 document.removeEventListener('click', Radzen[id + 'end']); 2146 document.addEventListener('click', Radzen[id + 'end']); 2147 2148 Radzen[id + 'move'] = function (e) { 2149 var el = document.getElementById(id + 'visual'); 2150 if (el) { 2151 el.style.display = 'block'; 2152 2153 if (/Edge/.test(navigator.userAgent)) { 2154 var scrollLeft = document.body.scrollLeft; 2155 var scrollTop = document.body.scrollTop; 2156 } else { 2157 var scrollLeft = document.documentElement.scrollLeft; 2158 var scrollTop = document.documentElement.scrollTop; 2159 } 2160 2161 el.style.top = e.clientY + scrollTop + 10 + 'px'; 2162 el.style.left = e.clientX + scrollLeft + 10 + 'px'; 2163 } 2164 } 2165 document.removeEventListener('mousemove', Radzen[id + 'move']); 2166 document.addEventListener('mousemove', Radzen[id + 'move']); 2167 }, 2168 stopColumnResize: function (id, grid, columnIndex) { 2169 var el = document.getElementById(id + '-resizer'); 2170 if(!el) return; 2171 var cell = el.parentNode.parentNode; 2172 if (!cell) return; 2173 if (Radzen[el]) { 2174 grid.invokeMethodAsync( 2175 'RadzenGrid.OnColumnResized', 2176 columnIndex, 2177 cell.getBoundingClientRect().width 2178 ); 2179 el.style.width = null; 2180 document.removeEventListener('mousemove', Radzen[el].mouseMoveHandler); 2181 document.removeEventListener('mouseup', Radzen[el].mouseUpHandler); 2182 document.removeEventListener('touchmove', Radzen[el].touchMoveHandler) 2183 document.removeEventListener('touchend', Radzen[el].mouseUpHandler); 2184 Radzen[el] = null; 2185 } 2186 }, 2187 startColumnResize: function(id, grid, columnIndex, clientX) { 2188 var el = document.getElementById(id + '-resizer'); 2189 var cell = el.parentNode.parentNode; 2190 var col = document.getElementById(id + '-col'); 2191 var dataCol = document.getElementById(id + '-data-col'); 2192 var footerCol = document.getElementById(id + '-footer-col'); 2193 Radzen[el] = { 2194 clientX: clientX, 2195 width: cell.getBoundingClientRect().width, 2196 mouseUpHandler: function (e) { 2197 if (Radzen[el]) { 2198 grid.invokeMethodAsync( 2199 'RadzenGrid.OnColumnResized', 2200 columnIndex, 2201 cell.getBoundingClientRect().width 2202 ); 2203 el.style.width = null; 2204 document.removeEventListener('mousemove', Radzen[el].mouseMoveHandler); 2205 document.removeEventListener('mouseup', Radzen[el].mouseUpHandler); 2206 document.removeEventListener('touchmove', Radzen[el].touchMoveHandler) 2207 document.removeEventListener('touchend', Radzen[el].mouseUpHandler); 2208 Radzen[el] = null; 2209 } 2210 }, 2211 mouseMoveHandler: function (e) { 2212 if (Radzen[el]) { 2213 var widthFloat = (Radzen[el].width - (Radzen.isRTL(cell) ? -1 : 1) * (Radzen[el].clientX - e.clientX)); 2214 var minWidth = parseFloat(cell.style.minWidth || 0) 2215 2216 if (widthFloat < minWidth) { 2217 widthFloat = minWidth; 2218 } 2219 2220 var width = widthFloat + 'px'; 2221 2222 if (cell) { 2223 cell.style.width = width; 2224 } 2225 if (col) { 2226 col.style.width = width; 2227 } 2228 if (dataCol) { 2229 dataCol.style.width = width; 2230 } 2231 if (footerCol) { 2232 footerCol.style.width = width; 2233 } 2234 } 2235 }, 2236 touchMoveHandler: function (e) { 2237 if (e.targetTouches[0]) { 2238 Radzen[el].mouseMoveHandler(e.targetTouches[0]); 2239 } 2240 } 2241 }; 2242 el.style.width = "100%"; 2243 document.addEventListener('mousemove', Radzen[el].mouseMoveHandler); 2244 document.addEventListener('mouseup', Radzen[el].mouseUpHandler); 2245 document.addEventListener('touchmove', Radzen[el].touchMoveHandler, { passive: true }) 2246 document.addEventListener('touchend', Radzen[el].mouseUpHandler, { passive: true });
2247 }, 2248 startSplitterResize: function(id, 2249 splitter, 2250 paneId, 2251 paneNextId, 2252 orientation, 2253 clientPos, 2254 minValue, 2255 maxValue, 2256 minNextValue, 2257 maxNextValue) { 2258 2259 var el = document.getElementById(id); 2260 var pane = document.getElementById(paneId); 2261 var paneNext = document.getElementById(paneNextId); 2262 var paneLength; 2263 var paneNextLength; 2264 var panePerc; 2265 var paneNextPerc; 2266 var isHOrientation=orientation == 'Horizontal'; 2267 2268 var totalLength = 0.0; 2269 Array.from(el.children).forEach(element => { 2270 totalLength += isHOrientation 2271 ? element.getBoundingClientRect().width 2272 : element.getBoundingClientRect().height; 2273 }); 2274 2275 if (pane) { 2276 paneLength = isHOrientation 2277 ? pane.getBoundingClientRect().width 2278 : pane.getBoundingClientRect().height; 2279 2280 panePerc = (paneLength / totalLength * 100) + '%'; 2281 } 2282 2283 if (paneNext) { 2284 paneNextLength = isHOrientation 2285 ? paneNext.getBoundingClientRect().width 2286 : paneNext.getBoundingClientRect().height; 2287 2288 paneNextPerc = (paneNextLength / totalLength * 100) + '%'; 2289 } 2290 2291 function ensurevalue(value) { 2292 if (!value) 2293 return null; 2294 2295 value=value.trim().toLowerCase(); 2296 2297 if (value.endsWith("%")) 2298 return totalLength*parseFloat(value)/100; 2299 2300 if (value.endsWith("px")) 2301 return parseFloat(value); 2302 2303 throw 'Invalid value'; 2304 } 2305 2306 minValue=ensurevalue(minValue); 2307 maxValue=ensurevalue(maxValue); 2308 minNextValue=ensurevalue(minNextValue); 2309 maxNextValue=ensurevalue(maxNextValue); 2310 2311 Radzen[el] = { 2312 clientPos: clientPos, 2313 panePerc: parseFloat(panePerc), 2314 paneNextPerc: isFinite(parseFloat(paneNextPerc)) ? parseFloat(paneNextPerc) : 0, 2315 paneLength: paneLength, 2316 paneNextLength: isFinite(paneNextLength) ? paneNextLength : 0, 2317 mouseUpHandler: function(e) { 2318 if (Radzen[el]) { 2319 splitter.invokeMethodAsync( 2320 'RadzenSplitter.OnPaneResized', 2321 parseInt(pane.getAttribute('data-index')), 2322 parseFloat(pane.style.flexBasis), 2323 paneNext ? parseInt(paneNext.getAttribute('data-index')) : null, 2324 paneNext ? parseFloat(paneNext.style.flexBasis) : null 2325 ); 2326 2327 document.removeEventListener('pointerup', Radzen[el].mouseUpHandler); 2328 document.removeEventListener('pointermove', Radzen[el].mouseMoveHandler); 2329 el.removeEventListener('touchmove', preventDefaultAndStopPropagation); 2330 Radzen[el] = null; 2331 } 2332 }, 2333 mouseMoveHandler: function(e) { 2334 if (Radzen[el]) { 2335 2336 splitter.invokeMethodAsync( 2337 'RadzenSplitter.OnPaneResizing' 2338 ); 2339 2340 var spacePerc = Radzen[el].panePerc + Radzen[el].paneNextPerc; 2341 var spaceLength = Radzen[el].paneLength + Radzen[el].paneNextLength; 2342 2343 var length = (Radzen[el].paneLength - 2344 (isHOrientation && Radzen.isRTL(e.target) ? -1 : 1) * (Radzen[el].clientPos - (isHOrientation ? e.clientX : e.clientY))); 2345 2346 if (length > spaceLength) 2347 length = spaceLength; 2348 2349 if (minValue && length < minValue) length = minValue; 2350 if (maxValue && length > maxValue) length = maxValue; 2351 2352 if (paneNext) { 2353 var nextSpace=spaceLength-length; 2354 if (minNextValue && nextSpace < minNextValue) length = spaceLength-minNextValue; 2355 if (maxNextValue && nextSpace >
2355 maxNextValue) length = spaceLength+maxNextValue; 2356 } 2357 2358 var perc = length / Radzen[el].paneLength; 2359 if (!isFinite(perc)) { 2360 perc = 1; 2361 Radzen[el].panePerc = 0.1; 2362 Radzen[el].paneLength =isHOrientation 2363 ? pane.getBoundingClientRect().width 2364 : pane.getBoundingClientRect().height; 2365 } 2366 2367 var newPerc = Radzen[el].panePerc * perc; 2368 if (newPerc < 0) newPerc = 0; 2369 if (newPerc > 100) newPerc = 100; 2370 2371 pane.style.flexBasis = newPerc + '%'; 2372 if (paneNext) 2373 paneNext.style.flexBasis = (spacePerc - newPerc) + '%'; 2374 } 2375 }, 2376 touchMoveHandler: function(e) { 2377 if (e.targetTouches[0]) { 2378 Radzen[el].mouseMoveHandler(e.targetTouches[0]); 2379 } 2380 } 2381 }; 2382 2383 const preventDefaultAndStopPropagation = (ev) => { 2384 ev.preventDefault(); 2385 ev.stopPropagation(); 2386 }; 2387 document.addEventListener('pointerup', Radzen[el].mouseUpHandler); 2388 document.addEventListener('pointermove', Radzen[el].mouseMoveHandler); 2389 el.addEventListener('touchmove', preventDefaultAndStopPropagation, { passive: false }); 2390 }, 2391 resizeSplitter(id, e) { 2392 var el = document.getElementById(id); 2393 if (el && Radzen[el]) { 2394 Radzen[el].mouseMoveHandler(e); 2395 Radzen[el].mouseUpHandler(e); 2396 } 2397 }, 2398 openWaiting: function() { 2399 if (document.documentElement.scrollHeight > document.documentElement.clientHeight) { 2400 document.body.classList.add('no-scroll'); 2401 } 2402 if (Radzen.WaitingIntervalId != null) { 2403 clearInterval(Radzen.WaitingIntervalId); 2404 } 2405 2406 setTimeout(function() { 2407 var timerObj = document.getElementsByClassName('rz-waiting-timer'); 2408 if (timerObj.length == 0) return; 2409 var timerStart = new Date().getTime(); 2410 Radzen.WaitingIntervalId = setInterval(function() { 2411 if (timerObj == null || timerObj[0] == null) { 2412 clearInterval(Radzen.WaitingIntervalId); 2413 } else { 2414 var time = new Date(new Date().getTime() - timerStart); 2415 timerObj[0].innerHTML = Math.floor(time / 1000) + "." + Math.floor((time % 1000) / 100); 2416 } 2417 }, 2418 100); 2419 }, 2420 100); 2421 }, 2422 closeWaiting: function() { 2423 document.body.classList.remove('no-scroll'); 2424 if (Radzen.WaitingIntervalId != null) { 2425 clearInterval(Radzen.WaitingIntervalId); 2426 Radzen.WaitingIntervalId = null; 2427 } 2428 }, 2429 toggleDictation: function (componentRef, language) { 2430 function start() { 2431 const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; 2432 2433 if (!SpeechRecognition) { 2434 return; 2435 } 2436 2437 radzenRecognition = new SpeechRecognition(); 2438 radzenRecognition.componentRef = componentRef; 2439 radzenRecognition.continuous = true; 2440 2441 if (language) { 2442 radzenRecognition.lang = language; 2443 } 2444 2445 radzenRecognition.onresult = function (event) { 2446 if (event.results.length < 1) { 2447 return; 2448 } 2449 2450 let current = event.results[event.results.length - 1][0] 2451 let result = current.transcript; 2452 2453 componentRef.invokeMethodAsync("OnResult", result); 2454 }; 2455 radzenRecognition.onend = function (event) { 2456 componentRef.invokeMethodAsync("StopRecording"); 2457 radzenRecognition = null; 2458 }; 2459 radzenRecognition.start(); 2460 } 2461 2462 if (radzenRecognition) { 2463 if (radzenRecognition.componentRef._id != componentRef._id) { 2464 radzenRecognition.addEventListener('end', start); 2465 } 2466 radzenRecognition.stop(); 2467 } else { 2468 start(); 2469 } 2470 }, 2471 openChartTooltip: function (chart, x, y, id, instance, callback) { 2472 Radzen.closeTooltip(id); 2473 2474 var chartRect = chart.getBoundingClientRect(); 2475 x = Math.max(2, chartRect.left + x); 2476 y = Math.max(2, chartRect.top + y); 2477 Radzen.openPopup(chart, id, false, null, x, y, instance, callback, true, false, false); 2478 2479 var popup = document.getElementById(id); 2480 if (!popup) { 2481 return; 2482 } 2483 var tooltipContent = popup.children[0]; 2484 var tooltipContentRect = tooltipContent.getBoundingClientRect(); 2485 var tooltipContentClassName = 'rz-top-chart-tooltip'; 2486 if (y - tooltipContentRect.height < 0) { 2487 tooltipContentClassName = 'rz-bottom-chart-tooltip'; 2488 } 2489 tooltipContent.classList.remove('rz-top-chart-tooltip'); 2490 tooltipContent.classList.remove('rz-bottom-chart-tooltip'); 2491 tooltipContent.classList.add(tooltipContentClassName); 2492 } 2493};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.