From 1e185c19d3b6d2a57288fbe6b671bb8e3f6b0576 Mon Sep 17 00:00:00 2001 From: Dmitrii Botov Date: Mon, 9 Dec 2024 02:53:38 +0400 Subject: [PATCH 1/3] Fix RadzenDataFilter numeric input lose value when switching between and-or modes --- Radzen.Blazor/RadzenDataFilter.razor | 2 +- Radzen.Blazor/RadzenDataFilter.razor.cs | 18 +- Radzen.Blazor/wwwroot/Radzen.Blazor.js | 2185 ++++++++++++----------- 3 files changed, 1125 insertions(+), 1080 deletions(-) diff --git a/Radzen.Blazor/RadzenDataFilter.razor b/Radzen.Blazor/RadzenDataFilter.razor index ae03f5d97d4..9ba249497ab 100644 --- a/Radzen.Blazor/RadzenDataFilter.razor +++ b/Radzen.Blazor/RadzenDataFilter.razor @@ -12,7 +12,7 @@ @if (Visible) {
- + diff --git a/Radzen.Blazor/RadzenDataFilter.razor.cs b/Radzen.Blazor/RadzenDataFilter.razor.cs index de8227ab403..80828874031 100644 --- a/Radzen.Blazor/RadzenDataFilter.razor.cs +++ b/Radzen.Blazor/RadzenDataFilter.razor.cs @@ -1,5 +1,5 @@ using Microsoft.AspNetCore.Components; -using System; +using Microsoft.JSInterop; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; @@ -423,5 +423,19 @@ public async Task RemoveFilter(CompositeFilterDescriptor filter) await Filter(); } } + + private async Task OnFilterOperatorChanged(LogicalFilterOperator _) + { + var inputValues = await JSRuntime.InvokeAsync>("Radzen.getNumericInputValues"); + + await InvokeAsync(ChangeState); + + await JSRuntime.InvokeVoidAsync("Radzen.setNumericInputValues", inputValues); + + if (Auto) + { + await InvokeAsync(Filter); + } + } } -} +} \ No newline at end of file diff --git a/Radzen.Blazor/wwwroot/Radzen.Blazor.js b/Radzen.Blazor/wwwroot/Radzen.Blazor.js index 6146ecce307..66cbdbf5bfc 100644 --- a/Radzen.Blazor/wwwroot/Radzen.Blazor.js +++ b/Radzen.Blazor/wwwroot/Radzen.Blazor.js @@ -19,7 +19,7 @@ if (!Element.prototype.closest) { if (document.fonts && document.body) { document.body.classList.add('rz-icons-loading'); document.fonts.load('16px Material Symbols').then(() => { - document.body.classList.remove('rz-icons-loading'); + document.body.classList.remove('rz-icons-loading'); }) } @@ -28,129 +28,129 @@ var rejectCallbacks = []; var radzenRecognition; window.Radzen = { - isRTL: function (el) { - return el && getComputedStyle(el).direction == 'rtl'; - }, - throttle: function (callback, delay) { - var timeout = null; - return function () { - var args = arguments; - var ctx = this; - if (!timeout) { - timeout = setTimeout(function () { - callback.apply(ctx, args); - timeout = null; - }, delay); + isRTL: function (el) { + return el && getComputedStyle(el).direction == 'rtl'; + }, + throttle: function (callback, delay) { + var timeout = null; + return function () { + var args = arguments; + var ctx = this; + if (!timeout) { + timeout = setTimeout(function () { + callback.apply(ctx, args); + timeout = null; + }, delay); + } + }; + }, + mask: function (id, mask, pattern, characterPattern) { + var el = document.getElementById(id); + if (el) { + var format = function (value, mask, pattern, characterPattern) { + var chars = !characterPattern ? value.replace(new RegExp(pattern, "g"), "").split('') : value.match(new RegExp(characterPattern, "g")); + var count = 0; + + var formatted = ''; + for (var i = 0; i < mask.length; i++) { + const c = mask[i]; + if (chars && chars[count]) { + if (c === '*' || c == chars[count]) { + formatted += chars[count]; + count++; + } else { + formatted += c; } - }; - }, - mask: function (id, mask, pattern, characterPattern) { - var el = document.getElementById(id); - if (el) { - var format = function (value, mask, pattern, characterPattern) { - var chars = !characterPattern ? value.replace(new RegExp(pattern, "g"), "").split('') : value.match(new RegExp(characterPattern, "g")); - var count = 0; - - var formatted = ''; - for (var i = 0; i < mask.length; i++) { - const c = mask[i]; - if (chars && chars[count]) { - if (c === '*' || c == chars[count]) { - formatted += chars[count]; - count++; - } else { - formatted += c; - } - } - } - return formatted; } + } + return formatted; + } - if (window.safari !== undefined) { - el.onblur = function (e) { - el.dispatchEvent(new Event('change')); - }; - } + if (window.safari !== undefined) { + el.onblur = function (e) { + el.dispatchEvent(new Event('change')); + }; + } - var start = el.selectionStart != el.value.length ? el.selectionStart : -1; - var end = el.selectionEnd != el.value.length ? el.selectionEnd : -1; + var start = el.selectionStart != el.value.length ? el.selectionStart : -1; + var end = el.selectionEnd != el.value.length ? el.selectionEnd : -1; - el.value = format(el.value, mask, pattern, characterPattern); + el.value = format(el.value, mask, pattern, characterPattern); - el.selectionStart = start != -1 ? start : el.selectionStart; - el.selectionEnd = end != -1 ? end : el.selectionEnd; - } + el.selectionStart = start != -1 ? start : el.selectionStart; + el.selectionEnd = end != -1 ? end : el.selectionEnd; + } }, addContextMenu: function (id, ref) { - var el = document.getElementById(id); - if (el) { - var handler = function (e) { - e.stopPropagation(); - e.preventDefault(); - ref.invokeMethodAsync('RadzenComponent.RaiseContextMenu', - { - ClientX: e.clientX, - ClientY: e.clientY, - ScreenX: e.screenX, - ScreenY: e.screenY, - AltKey: e.altKey, - ShiftKey: e.shiftKey, - CtrlKey: e.ctrlKey, - MetaKey: e.metaKey, - Button: e.button, - Buttons: e.buttons, - }); - return false; - }; - Radzen[id + 'contextmenu'] = handler; - el.addEventListener('contextmenu', handler, false); - } + var el = document.getElementById(id); + if (el) { + var handler = function (e) { + e.stopPropagation(); + e.preventDefault(); + ref.invokeMethodAsync('RadzenComponent.RaiseContextMenu', + { + ClientX: e.clientX, + ClientY: e.clientY, + ScreenX: e.screenX, + ScreenY: e.screenY, + AltKey: e.altKey, + ShiftKey: e.shiftKey, + CtrlKey: e.ctrlKey, + MetaKey: e.metaKey, + Button: e.button, + Buttons: e.buttons, + }); + return false; + }; + Radzen[id + 'contextmenu'] = handler; + el.addEventListener('contextmenu', handler, false); + } }, addMouseEnter: function (id, ref) { - var el = document.getElementById(id); - if (el) { - var handler = function (e) { - ref.invokeMethodAsync('RadzenComponent.RaiseMouseEnter'); - }; - Radzen[id + 'mouseenter'] = handler; - el.addEventListener('mouseenter', handler, false); - } + var el = document.getElementById(id); + if (el) { + var handler = function (e) { + ref.invokeMethodAsync('RadzenComponent.RaiseMouseEnter'); + }; + Radzen[id + 'mouseenter'] = handler; + el.addEventListener('mouseenter', handler, false); + } }, addMouseLeave: function (id, ref) { - var el = document.getElementById(id); - if (el) { - var handler = function (e) { - ref.invokeMethodAsync('RadzenComponent.RaiseMouseLeave');; - }; - Radzen[id + 'mouseleave'] = handler; - el.addEventListener('mouseleave', handler, false); - } + var el = document.getElementById(id); + if (el) { + var handler = function (e) { + ref.invokeMethodAsync('RadzenComponent.RaiseMouseLeave');; + }; + Radzen[id + 'mouseleave'] = handler; + el.addEventListener('mouseleave', handler, false); + } }, removeContextMenu: function (id) { - var el = document.getElementById(id); - if (el && Radzen[id + 'contextmenu']) { - el.removeEventListener('contextmenu', Radzen[id + 'contextmenu']); - } + var el = document.getElementById(id); + if (el && Radzen[id + 'contextmenu']) { + el.removeEventListener('contextmenu', Radzen[id + 'contextmenu']); + } }, removeMouseEnter: function (id) { - var el = document.getElementById(id); - if (el && Radzen[id + 'mouseenter']) { - el.removeEventListener('mouseenter', Radzen[id + 'mouseenter']); - } + var el = document.getElementById(id); + if (el && Radzen[id + 'mouseenter']) { + el.removeEventListener('mouseenter', Radzen[id + 'mouseenter']); + } }, removeMouseLeave: function (id) { - var el = document.getElementById(id); - if (el && Radzen[id + 'mouseleave']) { - el.removeEventListener('mouseleave', Radzen[id + 'mouseleave']); - } + var el = document.getElementById(id); + if (el && Radzen[id + 'mouseleave']) { + el.removeEventListener('mouseleave', Radzen[id + 'mouseleave']); + } }, adjustDataGridHeader: function (scrollableHeader, scrollableBody) { if (scrollableHeader && scrollableBody) { scrollableHeader.style.cssText = scrollableBody.clientHeight < scrollableBody.scrollHeight ? 'margin-left:0px;padding-right: ' + - (scrollableBody.offsetWidth - scrollableBody.clientWidth) + - 'px' + (scrollableBody.offsetWidth - scrollableBody.clientWidth) + + 'px' : 'margin-left:0px;'; } }, @@ -166,30 +166,30 @@ window.Radzen = { } }; if (el) { - el.addEventListener('keydown', preventDefault, false); + el.addEventListener('keydown', preventDefault, false); } }, selectTab: function (id, index) { var el = document.getElementById(id); if (el && el.parentNode && el.parentNode.previousElementSibling) { - var count = el.parentNode.children.length; - for (var i = 0; i < count; i++) { - var content = el.parentNode.children[i]; - if (content) { - content.style.display = i == index ? '' : 'none'; - } - var header = el.parentNode.previousElementSibling.children[i]; - if (header) { - if (i == index) { - header.classList.add('rz-tabview-selected'); - header.classList.add('rz-state-focused'); - } - else { - header.classList.remove('rz-tabview-selected'); - header.classList.remove('rz-state-focused'); - } - } + var count = el.parentNode.children.length; + for (var i = 0; i < count; i++) { + var content = el.parentNode.children[i]; + if (content) { + content.style.display = i == index ? '' : 'none'; + } + var header = el.parentNode.previousElementSibling.children[i]; + if (header) { + if (i == index) { + header.classList.add('rz-tabview-selected'); + header.classList.add('rz-state-focused'); + } + else { + header.classList.remove('rz-tabview-selected'); + header.classList.remove('rz-state-focused'); + } } + } } }, loadGoogleMaps: function (defaultView, apiKey, resolve, reject, language) { @@ -250,7 +250,7 @@ window.Radzen = { Radzen[id].instance.addListener('click', function (e) { Radzen[id].invokeMethodAsync('RadzenGoogleMap.OnMapClick', { - Position: {Lat: e.latLng.lat(), Lng: e.latLng.lng()} + Position: { Lat: e.latLng.lat(), Lng: e.latLng.lng() } }); }); @@ -259,75 +259,75 @@ window.Radzen = { }, updateMap: function (id, apiKey, zoom, center, markers, options, fitBoundsToMarkersOnUpdate, language) { var api = function () { - var defaultView = document.defaultView; + var defaultView = document.defaultView; - return new Promise(function (resolve, reject) { - if (defaultView.google && defaultView.google.maps) { - return resolve(defaultView.google); - } + return new Promise(function (resolve, reject) { + if (defaultView.google && defaultView.google.maps) { + return resolve(defaultView.google); + } - Radzen.loadGoogleMaps(defaultView, apiKey, resolve, reject, language); - }); + Radzen.loadGoogleMaps(defaultView, apiKey, resolve, reject, language); + }); }; api().then(function (google) { - let markerBounds = new google.maps.LatLngBounds(); + let markerBounds = new google.maps.LatLngBounds(); - if (Radzen[id] && Radzen[id].instance) { - if (Radzen[id].instance.markers && Radzen[id].instance.markers.length) { - for (var i = 0; i < Radzen[id].instance.markers.length; i++) { - Radzen[id].instance.markers[i].setMap(null); - } - } + if (Radzen[id] && Radzen[id].instance) { + if (Radzen[id].instance.markers && Radzen[id].instance.markers.length) { + for (var i = 0; i < Radzen[id].instance.markers.length; i++) { + Radzen[id].instance.markers[i].setMap(null); + } + } - if (markers) { - Radzen[id].instance.markers = []; + if (markers) { + Radzen[id].instance.markers = []; - markers.forEach(function (m) { - var content; + markers.forEach(function (m) { + var content; - if (m.label) { - content = document.createElement('span'); - content.innerHTML = m.label; - } + if (m.label) { + content = document.createElement('span'); + content.innerHTML = m.label; + } - var marker = new this.google.maps.marker.AdvancedMarkerElement({ - position: m.position, - title: m.title, - content: content - }); + var marker = new this.google.maps.marker.AdvancedMarkerElement({ + position: m.position, + title: m.title, + content: content + }); - marker.addListener('click', function (e) { - Radzen[id].invokeMethodAsync('RadzenGoogleMap.OnMarkerClick', { - Title: marker.title, - Label: marker.content.innerText, - Position: marker.position - }); - }); + marker.addListener('click', function (e) { + Radzen[id].invokeMethodAsync('RadzenGoogleMap.OnMarkerClick', { + Title: marker.title, + Label: marker.content.innerText, + Position: marker.position + }); + }); - marker.setMap(Radzen[id].instance); + marker.setMap(Radzen[id].instance); - Radzen[id].instance.markers.push(marker); + Radzen[id].instance.markers.push(marker); - markerBounds.extend(marker.position); - }); - } + markerBounds.extend(marker.position); + }); + } - if (zoom) { - Radzen[id].instance.setZoom(zoom); - } + if (zoom) { + Radzen[id].instance.setZoom(zoom); + } - if (center) { - Radzen[id].instance.setCenter(center); - } + if (center) { + Radzen[id].instance.setCenter(center); + } - if (options) { - Radzen[id].instance.setOptions(options); - } + if (options) { + Radzen[id].instance.setOptions(options); + } - if (markers && fitBoundsToMarkersOnUpdate) { - Radzen[id].instance.fitBounds(markerBounds); - } + if (markers && fitBoundsToMarkersOnUpdate) { + Radzen[id].instance.fitBounds(markerBounds); } + } }); }, destroyMap: function (id) { @@ -335,119 +335,119 @@ window.Radzen = { delete Radzen[id].instance; } }, - focusSecurityCode: function (el) { + focusSecurityCode: function (el) { if (!el) return; var firstInput = el.querySelector('.rz-security-code-input'); if (firstInput) { - setTimeout(function () { firstInput.focus() }, 500); + setTimeout(function () { firstInput.focus() }, 500); } - }, + }, destroySecurityCode: function (id, el) { if (!Radzen[id]) return; var inputs = el.getElementsByTagName('input'); if (Radzen[id].keyPress && Radzen[id].paste) { - for (var i = 0; i < inputs.length; i++) { - inputs[i].removeEventListener('keypress', Radzen[id].keyPress); - inputs[i].removeEventListener('keydown', Radzen[id].keyDown); - inputs[i].removeEventListener('paste', Radzen[id].paste); - } - delete Radzen[id].keyPress; - delete Radzen[id].paste; + for (var i = 0; i < inputs.length; i++) { + inputs[i].removeEventListener('keypress', Radzen[id].keyPress); + inputs[i].removeEventListener('keydown', Radzen[id].keyDown); + inputs[i].removeEventListener('paste', Radzen[id].paste); + } + delete Radzen[id].keyPress; + delete Radzen[id].paste; } Radzen[id] = null; }, createSecurityCode: function (id, ref, el, isNumber) { - if (!el || !ref) return; + if (!el || !ref) return; - var hidden = el.querySelector('input[type="hidden"]'); + var hidden = el.querySelector('input[type="hidden"]'); - Radzen[id] = {}; + Radzen[id] = {}; - Radzen[id].inputs = [...el.querySelectorAll('.rz-security-code-input')]; + Radzen[id].inputs = [...el.querySelectorAll('.rz-security-code-input')]; - Radzen[id].paste = function (e) { - if (e.clipboardData) { - var value = e.clipboardData.getData('text'); + Radzen[id].paste = function (e) { + if (e.clipboardData) { + var value = e.clipboardData.getData('text'); - if (value) { - for (var i = 0; i < value.length; i++) { - if (isNumber && isNaN(+value[i])) { - continue; - } - Radzen[id].inputs[i].value = value[i]; - } + if (value) { + for (var i = 0; i < value.length; i++) { + if (isNumber && isNaN(+value[i])) { + continue; + } + Radzen[id].inputs[i].value = value[i]; + } - var code = Radzen[id].inputs.map(i => i.value).join('').trim(); - hidden.value = code; + var code = Radzen[id].inputs.map(i => i.value).join('').trim(); + hidden.value = code; - ref.invokeMethodAsync('RadzenSecurityCode.OnValueChange', code); + ref.invokeMethodAsync('RadzenSecurityCode.OnValueChange', code); - Radzen[id].inputs[Radzen[id].inputs.length - 1].focus(); - } + Radzen[id].inputs[Radzen[id].inputs.length - 1].focus(); + } - e.preventDefault(); - } + e.preventDefault(); } - Radzen[id].keyPress = function (e) { - var keyCode = e.data ? e.data.charCodeAt(0) : e.which; - var ch = e.data || String.fromCharCode(e.which); - - if (e.metaKey || - e.ctrlKey || - keyCode == 9 || - keyCode == 8 || - keyCode == 13 - ) { - return; - } + } + Radzen[id].keyPress = function (e) { + var keyCode = e.data ? e.data.charCodeAt(0) : e.which; + var ch = e.data || String.fromCharCode(e.which); - if (isNumber && (keyCode < 48 || keyCode > 57)) { - e.preventDefault(); - return; - } + if (e.metaKey || + e.ctrlKey || + keyCode == 9 || + keyCode == 8 || + keyCode == 13 + ) { + return; + } - if (e.currentTarget.value == ch) { - return; - } + if (isNumber && (keyCode < 48 || keyCode > 57)) { + e.preventDefault(); + return; + } + + if (e.currentTarget.value == ch) { + return; + } - e.currentTarget.value = ch; + e.currentTarget.value = ch; - var value = Radzen[id].inputs.map(i => i.value).join('').trim(); - hidden.value = value; + var value = Radzen[id].inputs.map(i => i.value).join('').trim(); + hidden.value = value; - ref.invokeMethodAsync('RadzenSecurityCode.OnValueChange', value); + ref.invokeMethodAsync('RadzenSecurityCode.OnValueChange', value); - var index = Radzen[id].inputs.indexOf(e.currentTarget); - if (index < Radzen[id].inputs.length - 1) { - Radzen[id].inputs[index + 1].focus(); - } + var index = Radzen[id].inputs.indexOf(e.currentTarget); + if (index < Radzen[id].inputs.length - 1) { + Radzen[id].inputs[index + 1].focus(); } + } - Radzen[id].keyDown = function (e) { - var keyCode = e.data ? e.data.charCodeAt(0) : e.which; - if (keyCode == 8) { - e.currentTarget.value = ''; + Radzen[id].keyDown = function (e) { + var keyCode = e.data ? e.data.charCodeAt(0) : e.which; + if (keyCode == 8) { + e.currentTarget.value = ''; - var value = Radzen[id].inputs.map(i => i.value).join('').trim(); - hidden.value = value; + var value = Radzen[id].inputs.map(i => i.value).join('').trim(); + hidden.value = value; - ref.invokeMethodAsync('RadzenSecurityCode.OnValueChange', value); + ref.invokeMethodAsync('RadzenSecurityCode.OnValueChange', value); - var index = Radzen[id].inputs.indexOf(e.currentTarget); - if (index > 0) { - Radzen[id].inputs[index - 1].focus(); - } - } + var index = Radzen[id].inputs.indexOf(e.currentTarget); + if (index > 0) { + Radzen[id].inputs[index - 1].focus(); + } } + } - for (var i = 0; i < Radzen[id].inputs.length; i++) { - Radzen[id].inputs[i].addEventListener(navigator.userAgent.match(/Android/i) ? 'textInput' : 'keypress', Radzen[id].keyPress); - Radzen[id].inputs[i].addEventListener(navigator.userAgent.match(/Android/i) ? 'textInput' : 'keydown', Radzen[id].keyDown); - Radzen[id].inputs[i].addEventListener('paste', Radzen[id].paste); - } + for (var i = 0; i < Radzen[id].inputs.length; i++) { + Radzen[id].inputs[i].addEventListener(navigator.userAgent.match(/Android/i) ? 'textInput' : 'keypress', Radzen[id].keyPress); + Radzen[id].inputs[i].addEventListener(navigator.userAgent.match(/Android/i) ? 'textInput' : 'keydown', Radzen[id].keyDown); + Radzen[id].inputs[i].addEventListener('paste', Radzen[id].paste); + } }, createSlider: function ( id, @@ -473,12 +473,12 @@ window.Radzen = { var offsetX = e.targetTouches && e.targetTouches[0] ? e.targetTouches[0].pageX - e.target.getBoundingClientRect().left - : e.pageX - handle.getBoundingClientRect().left; + : e.pageX - handle.getBoundingClientRect().left; var offsetY = e.targetTouches && e.targetTouches[0] ? e.targetTouches[0].pageY - e.target.getBoundingClientRect().top - : e.pageY - handle.getBoundingClientRect().top; + : e.pageY - handle.getBoundingClientRect().top; var percent = isVertical ? (parent.offsetHeight - handle.offsetTop - offsetY) / parent.offsetHeight : (Radzen.isRTL(handle) ? parent.offsetWidth - handle.offsetLeft - offsetX : handle.offsetLeft + offsetX) / parent.offsetWidth; @@ -489,7 +489,7 @@ window.Radzen = { percent = 0; } - var newValue = percent * (max - min) + min; + var newValue = percent * (max - min) + min; if ( slider.canChange && @@ -525,7 +525,7 @@ window.Radzen = { var offsetX = e.targetTouches && e.targetTouches[0] ? e.targetTouches[0].pageX - e.target.getBoundingClientRect().left - : e.offsetX; + : e.offsetX; var percent = offsetX / parent.offsetWidth; @@ -581,8 +581,8 @@ window.Radzen = { }, prepareDrag: function (el) { if (el) { - el.ondragover = function (e) { e.preventDefault(); }; - el.ondragstart = function (e) { e.dataTransfer.setData('', e.target.id); }; + el.ondragover = function (e) { e.preventDefault(); }; + el.ondragstart = function (e) { e.dataTransfer.setData('', e.target.id); }; } }, focusElement: function (elementId) { @@ -597,9 +597,9 @@ window.Radzen = { scrollIntoViewIfNeeded: function (ref, selector) { var el = selector ? ref.getElementsByClassName(selector)[0] : ref; if (el && el.scrollIntoViewIfNeeded) { - el.scrollIntoViewIfNeeded(); + el.scrollIntoViewIfNeeded(); } else if (el && el.scrollIntoView) { - el.scrollIntoView(); + el.scrollIntoView(); } }, selectListItem: function (input, ul, index) { @@ -621,7 +621,7 @@ window.Radzen = { ul.nextSelectedIndex <= childNodes.length - 1 ) { childNodes[ul.nextSelectedIndex].classList.add('rz-state-highlight'); - childNodes[ul.nextSelectedIndex].scrollIntoView({block:'nearest'}); + childNodes[ul.nextSelectedIndex].scrollIntoView({ block: 'nearest' }); } }, focusListItem: function (input, ul, isDown, startIndex) { @@ -636,17 +636,17 @@ window.Radzen = { ul.nextSelectedIndex = startIndex; if (isDown) { - while (ul.nextSelectedIndex < childNodes.length - 1) { - ul.nextSelectedIndex++; - if (!childNodes[ul.nextSelectedIndex].classList.contains('rz-state-disabled')) - break; - } + while (ul.nextSelectedIndex < childNodes.length - 1) { + ul.nextSelectedIndex++; + if (!childNodes[ul.nextSelectedIndex].classList.contains('rz-state-disabled')) + break; + } } else { - while (ul.nextSelectedIndex >= 0) { - ul.nextSelectedIndex--; - if (!childNodes[ul.nextSelectedIndex] || !childNodes[ul.nextSelectedIndex].classList.contains('rz-state-disabled')) - break; - } + while (ul.nextSelectedIndex >= 0) { + ul.nextSelectedIndex--; + if (!childNodes[ul.nextSelectedIndex] || !childNodes[ul.nextSelectedIndex].classList.contains('rz-state-disabled')) + break; + } } var highlighted = ul.querySelectorAll('.rz-state-highlight'); @@ -674,9 +674,9 @@ window.Radzen = { var thead = table.getElementsByTagName("thead")[0]; var highlightedCells = thead.querySelectorAll('.rz-state-focused'); if (highlightedCells.length) { - for (var i = 0; i < highlightedCells.length; i++) { - highlightedCells[i].classList.remove('rz-state-focused'); - } + for (var i = 0; i < highlightedCells.length; i++) { + highlightedCells[i].classList.remove('rz-state-focused'); + } } }, focusTableRow: function (gridId, key, rowIndex, cellIndex, isVirtual) { @@ -690,109 +690,109 @@ window.Radzen = { var rows = (cellIndex != null && thead && thead.rows && thead.rows.length ? [...thead.rows] : []).concat(tbody && tbody.rows && tbody.rows.length ? [...tbody.rows] : []); if (isVirtual && (key == 'ArrowUp' || key == 'ArrowDown' || key == 'PageUp' || key == 'PageDown' || key == 'Home' || key == 'End')) { - if (rowIndex == 0 && (key == 'End' || key == 'PageDown')) { - var highlightedCells = thead.querySelectorAll('.rz-state-focused'); - if (highlightedCells.length) { - for (var i = 0; i < highlightedCells.length; i++) { - highlightedCells[i].classList.remove('rz-state-focused'); - } - } - } - if (key == 'ArrowUp' || key == 'ArrowDown' || key == 'PageUp' || key == 'PageDown') { - var rowHeight = rows[rows.length - 1] ? rows[rows.length - 1].offsetHeight : 40; - var factor = key == 'PageUp' || key == 'PageDown' ? 10 : 1; - table.parentNode.scrollTop = table.parentNode.scrollTop + (factor * (key == 'ArrowDown' || key == 'PageDown' ? rowHeight : -rowHeight)); - } - else { - table.parentNode.scrollTop = key == 'Home' ? 0 : table.parentNode.scrollHeight; + if (rowIndex == 0 && (key == 'End' || key == 'PageDown')) { + var highlightedCells = thead.querySelectorAll('.rz-state-focused'); + if (highlightedCells.length) { + for (var i = 0; i < highlightedCells.length; i++) { + highlightedCells[i].classList.remove('rz-state-focused'); + } } + } + if (key == 'ArrowUp' || key == 'ArrowDown' || key == 'PageUp' || key == 'PageDown') { + var rowHeight = rows[rows.length - 1] ? rows[rows.length - 1].offsetHeight : 40; + var factor = key == 'PageUp' || key == 'PageDown' ? 10 : 1; + table.parentNode.scrollTop = table.parentNode.scrollTop + (factor * (key == 'ArrowDown' || key == 'PageDown' ? rowHeight : -rowHeight)); + } + else { + table.parentNode.scrollTop = key == 'Home' ? 0 : table.parentNode.scrollHeight; + } } table.nextSelectedIndex = rowIndex || 0; table.nextSelectedCellIndex = cellIndex || 0; if (key == 'ArrowDown') { - while (table.nextSelectedIndex < rows.length - 1) { - table.nextSelectedIndex++; - if (!rows[table.nextSelectedIndex] || !rows[table.nextSelectedIndex].classList.contains('rz-state-disabled')) - break; - } + while (table.nextSelectedIndex < rows.length - 1) { + table.nextSelectedIndex++; + if (!rows[table.nextSelectedIndex] || !rows[table.nextSelectedIndex].classList.contains('rz-state-disabled')) + break; + } } else if (key == 'ArrowUp') { - while (table.nextSelectedIndex > 0) { - table.nextSelectedIndex--; - if (!rows[table.nextSelectedIndex] || !rows[table.nextSelectedIndex].classList.contains('rz-state-disabled')) - break; - } + while (table.nextSelectedIndex > 0) { + table.nextSelectedIndex--; + if (!rows[table.nextSelectedIndex] || !rows[table.nextSelectedIndex].classList.contains('rz-state-disabled')) + break; + } } else if (key == 'ArrowRight') { - while (table.nextSelectedCellIndex < rows[table.nextSelectedIndex].cells.length - 1) { - table.nextSelectedCellIndex++; - if (!rows[table.nextSelectedIndex] || !rows[table.nextSelectedIndex].cells[table.nextSelectedCellIndex] || !rows[table.nextSelectedIndex].cells[table.nextSelectedCellIndex].classList.contains('rz-state-disabled')) - break; - } + while (table.nextSelectedCellIndex < rows[table.nextSelectedIndex].cells.length - 1) { + table.nextSelectedCellIndex++; + if (!rows[table.nextSelectedIndex] || !rows[table.nextSelectedIndex].cells[table.nextSelectedCellIndex] || !rows[table.nextSelectedIndex].cells[table.nextSelectedCellIndex].classList.contains('rz-state-disabled')) + break; + } } else if (key == 'ArrowLeft') { - while (table.nextSelectedCellIndex > 0) { - table.nextSelectedCellIndex--; - if (!rows[table.nextSelectedIndex] || !rows[table.nextSelectedIndex].cells[table.nextSelectedCellIndex] || !rows[table.nextSelectedIndex].cells[table.nextSelectedCellIndex].classList.contains('rz-state-disabled')) - break; - } + while (table.nextSelectedCellIndex > 0) { + table.nextSelectedCellIndex--; + if (!rows[table.nextSelectedIndex] || !rows[table.nextSelectedIndex].cells[table.nextSelectedCellIndex] || !rows[table.nextSelectedIndex].cells[table.nextSelectedCellIndex].classList.contains('rz-state-disabled')) + break; + } } else if (isVirtual && (key == 'PageDown' || key == 'End')) { - table.nextSelectedIndex = rows.length - 1; + table.nextSelectedIndex = rows.length - 1; } else if (isVirtual && (key == 'PageUp' || key == 'Home')) { - table.nextSelectedIndex = 1; + table.nextSelectedIndex = 1; } if (key == 'ArrowLeft' || key == 'ArrowRight' || (key == 'ArrowUp' && cellIndex != null && table.nextSelectedIndex == 0 && table.parentNode.scrollTop == 0)) { - var highlightedCells = rows[table.nextSelectedIndex].querySelectorAll('.rz-state-focused'); - if (highlightedCells.length) { - for (var i = 0; i < highlightedCells.length; i++) { - highlightedCells[i].classList.remove('rz-state-focused'); - } + var highlightedCells = rows[table.nextSelectedIndex].querySelectorAll('.rz-state-focused'); + if (highlightedCells.length) { + for (var i = 0; i < highlightedCells.length; i++) { + highlightedCells[i].classList.remove('rz-state-focused'); } + } - if ( - table.nextSelectedCellIndex >= 0 && - table.nextSelectedCellIndex <= rows[table.nextSelectedIndex].cells.length - 1 - ) { - var cell = rows[table.nextSelectedIndex].cells[table.nextSelectedCellIndex]; + if ( + table.nextSelectedCellIndex >= 0 && + table.nextSelectedCellIndex <= rows[table.nextSelectedIndex].cells.length - 1 + ) { + var cell = rows[table.nextSelectedIndex].cells[table.nextSelectedCellIndex]; - if (!cell.classList.contains('rz-state-focused')) { - cell.classList.add('rz-state-focused'); - if (!isVirtual && table.parentElement.scrollWidth > table.parentElement.clientWidth) { - Radzen.scrollIntoViewIfNeeded(cell); - } - } + if (!cell.classList.contains('rz-state-focused')) { + cell.classList.add('rz-state-focused'); + if (!isVirtual && table.parentElement.scrollWidth > table.parentElement.clientWidth) { + Radzen.scrollIntoViewIfNeeded(cell); + } } + } } else if (key == 'ArrowDown' || key == 'ArrowUp') { - var highlighted = table.querySelectorAll('.rz-state-focused'); - if (highlighted.length) { - for (var i = 0; i < highlighted.length; i++) { - highlighted[i].classList.remove('rz-state-focused'); - } + var highlighted = table.querySelectorAll('.rz-state-focused'); + if (highlighted.length) { + for (var i = 0; i < highlighted.length; i++) { + highlighted[i].classList.remove('rz-state-focused'); } + } - if (table.nextSelectedIndex >= 0 && - table.nextSelectedIndex <= rows.length - 1 - ) { - var row = rows[table.nextSelectedIndex]; + if (table.nextSelectedIndex >= 0 && + table.nextSelectedIndex <= rows.length - 1 + ) { + var row = rows[table.nextSelectedIndex]; - if (!row.classList.contains('rz-state-focused')) { - row.classList.add('rz-state-focused'); - if (!isVirtual && table.parentElement.scrollHeight > table.parentElement.clientHeight) { - Radzen.scrollIntoViewIfNeeded(row); - } - } + if (!row.classList.contains('rz-state-focused')) { + row.classList.add('rz-state-focused'); + if (!isVirtual && table.parentElement.scrollHeight > table.parentElement.clientHeight) { + Radzen.scrollIntoViewIfNeeded(row); + } } + } } return [table.nextSelectedIndex, table.nextSelectedCellIndex]; }, uploadInputChange: function (e, url, auto, multiple, clear, parameterName) { - if (auto) { - Radzen.upload(e.target, url, multiple, clear, parameterName); - e.target.value = ''; - } else { - Radzen.uploadChange(e.target); - } + if (auto) { + Radzen.upload(e.target, url, multiple, clear, parameterName); + e.target.value = ''; + } else { + Radzen.uploadChange(e.target); + } }, uploads: function (uploadComponent, id) { if (!Radzen.uploadComponents) { @@ -847,7 +847,7 @@ window.Radzen = { } var index = uploadComponent.files.indexOf(file) if (index != -1) { - uploadComponent.files.splice(index, 1); + uploadComponent.files.splice(index, 1); } fileInput.value = ''; }, @@ -858,7 +858,7 @@ window.Radzen = { var uploadComponent = Radzen.uploadComponents && Radzen.uploadComponents[fileInput.id]; if (!uploadComponent) { return; } if (!uploadComponent.files || clear) { - uploadComponent.files = Array.from(fileInput.files); + uploadComponent.files = Array.from(fileInput.files); } var data = new FormData(); var files = []; @@ -866,7 +866,7 @@ window.Radzen = { for (var i = 0; i < uploadComponent.files.length; i++) { var file = uploadComponent.files[i]; data.append(parameterName || (multiple ? 'files' : 'file'), file, file.name); - files.push({Name: file.name, Size: file.size}); + files.push({ Name: file.name, Size: file.size }); } var xhr = new XMLHttpRequest(); xhr.withCredentials = true; @@ -884,10 +884,10 @@ window.Radzen = { files, cancelled ).then(function (cancel) { - if (cancel) { - cancelled = true; - xhr.abort(); - } + if (cancel) { + cancelled = true; + xhr.abort(); + } }); } } @@ -901,8 +901,8 @@ window.Radzen = { if (status === 0 || (status >= 200 && status < 400)) { uploadComponent.invokeMethodAsync( 'RadzenUpload.OnComplete', - xhr.responseText, - cancelled + xhr.responseText, + cancelled ); } else { uploadComponent.invokeMethodAsync( @@ -940,10 +940,10 @@ window.Radzen = { if (value && !isNaN(+value)) { var numericValue = +value; if (min != null && numericValue >= min) { - return; + return; } if (max != null && numericValue <= max) { - return; + return; } } @@ -951,21 +951,21 @@ window.Radzen = { } }, numericOnInput: function (e, min, max, isNullable) { - var value = e.target.value; + var value = e.target.value; - if (!isNullable && value == '' && min != null) { - e.target.value = min; - } + if (!isNullable && value == '' && min != null) { + e.target.value = min; + } - if (value && !isNaN(+value)) { - var numericValue = +value; - if (min != null && !isNaN(+min) && numericValue < min) { - e.target.value = min; - } - if (max != null && !isNaN(+max) && numericValue > max) { - e.target.value = max; - } + if (value && !isNaN(+value)) { + var numericValue = +value; + if (min != null && !isNaN(+min) && numericValue < min) { + e.target.value = min; + } + if (max != null && !isNaN(+max) && numericValue > max) { + e.target.value = max; } + } }, numericKeyPress: function (e, isInteger, decimalSeparator) { if ( @@ -976,15 +976,15 @@ window.Radzen = { e.keyCode == 13 ) { return; - } + } - if (e.code === 'NumpadDecimal') { - var cursorPosition = e.target.selectionEnd; - e.target.value = [e.target.value.slice(0, e.target.selectionStart), decimalSeparator, e.target.value.slice(e.target.selectionEnd)].join(''); - e.target.selectionStart = ++cursorPosition; - e.target.selectionEnd = cursorPosition; - e.preventDefault(); - return; + if (e.code === 'NumpadDecimal') { + var cursorPosition = e.target.selectionEnd; + e.target.value = [e.target.value.slice(0, e.target.selectionStart), decimalSeparator, e.target.value.slice(e.target.selectionEnd)].join(''); + e.target.selectionStart = ++cursorPosition; + e.target.selectionEnd = cursorPosition; + e.preventDefault(); + return; } var ch = String.fromCharCode(e.charCode); @@ -995,28 +995,28 @@ window.Radzen = { e.preventDefault(); }, - openContextMenu: function (x,y,id, instance, callback) { + openContextMenu: function (x, y, id, instance, callback) { Radzen.closePopup(id); Radzen.openPopup(null, id, false, null, x, y, instance, callback); setTimeout(function () { - var popup = document.getElementById(id); - if (popup) { - var menu = popup.querySelector('.rz-menu'); - if (menu) { - menu.focus(); - } + var popup = document.getElementById(id); + if (popup) { + var menu = popup.querySelector('.rz-menu'); + if (menu) { + menu.focus(); } + } }, 500); }, openTooltip: function (target, id, delay, duration, position, closeTooltipOnDocumentClick, instance, callback) { Radzen.closeTooltip(id); if (delay) { - Radzen[id + 'delay'] = setTimeout(Radzen.openPopup, delay, target, id, false, position, null, null, instance, callback, closeTooltipOnDocumentClick); + Radzen[id + 'delay'] = setTimeout(Radzen.openPopup, delay, target, id, false, position, null, null, instance, callback, closeTooltipOnDocumentClick); } else { - Radzen.openPopup(target, id, false, position, null, null, instance, callback, closeTooltipOnDocumentClick); + Radzen.openPopup(target, id, false, position, null, null, instance, callback, closeTooltipOnDocumentClick); } if (duration) { @@ -1028,47 +1028,47 @@ window.Radzen = { Radzen.closePopup(id); if (Radzen[id + 'delay']) { - clearTimeout(Radzen[id + 'delay']); + clearTimeout(Radzen[id + 'delay']); } if (Radzen[id + 'duration']) { - clearTimeout(Radzen[id + 'duration']); + clearTimeout(Radzen[id + 'duration']); } }, destroyDatePicker(id) { - var el = document.getElementById(id); - if (!el) return; + var el = document.getElementById(id); + if (!el) return; - var button = el.querySelector('.rz-datepicker-trigger'); - if (button) { - button.onclick = null; - } - var input = el.querySelector('.rz-inputtext'); - if (input) { - input.onclick = null; - } + var button = el.querySelector('.rz-datepicker-trigger'); + if (button) { + button.onclick = null; + } + var input = el.querySelector('.rz-inputtext'); + if (input) { + input.onclick = null; + } }, createDatePicker(el, popupId) { - if(!el) return; - var handler = function (e, condition) { - if (condition) { - Radzen.togglePopup(e.currentTarget.parentNode, popupId, false, null, null, true, false); - } - }; - - var input = el.querySelector('.rz-inputtext'); - var button = el.querySelector('.rz-datepicker-trigger'); - if (button) { - button.onclick = function (e) { - handler(e, !e.currentTarget.classList.contains('rz-state-disabled') && (input ? !input.classList.contains('rz-readonly') : true)); - }; + if (!el) return; + var handler = function (e, condition) { + if (condition) { + Radzen.togglePopup(e.currentTarget.parentNode, popupId, false, null, null, true, false); } + }; - if (input) { - input.onclick = function (e) { - handler(e, e.currentTarget.classList.contains('rz-input-trigger') && !e.currentTarget.classList.contains('rz-readonly')); - }; - } + var input = el.querySelector('.rz-inputtext'); + var button = el.querySelector('.rz-datepicker-trigger'); + if (button) { + button.onclick = function (e) { + handler(e, !e.currentTarget.classList.contains('rz-state-disabled') && (input ? !input.classList.contains('rz-readonly') : true)); + }; + } + + if (input) { + input.onclick = function (e) { + handler(e, e.currentTarget.classList.contains('rz-input-trigger') && !e.currentTarget.classList.contains('rz-readonly')); + }; + } }, findPopup: function (id) { var popups = []; @@ -1080,25 +1080,25 @@ window.Radzen = { return popups; }, repositionPopup: function (parent, id) { - var popup = document.getElementById(id); - if (!popup) return; + var popup = document.getElementById(id); + if (!popup) return; - var rect = popup.getBoundingClientRect(); - var parentRect = parent ? parent.getBoundingClientRect() : { top: 0, bottom: 0, left: 0, right: 0, width: 0, height: 0 }; + var rect = popup.getBoundingClientRect(); + var parentRect = parent ? parent.getBoundingClientRect() : { top: 0, bottom: 0, left: 0, right: 0, width: 0, height: 0 }; - if (/Edge/.test(navigator.userAgent)) { - var scrollTop = document.body.scrollTop; - } else { - var scrollTop = document.documentElement.scrollTop; - } + if (/Edge/.test(navigator.userAgent)) { + var scrollTop = document.body.scrollTop; + } else { + var scrollTop = document.documentElement.scrollTop; + } - var top = parentRect.bottom + scrollTop; + var top = parentRect.bottom + scrollTop; - if (top + rect.height > window.innerHeight + scrollTop && parentRect.top > rect.height) { - top = parentRect.top - rect.height + scrollTop; - } + if (top + rect.height > window.innerHeight + scrollTop && parentRect.top > rect.height) { + top = parentRect.top - rect.height + scrollTop; + } - popup.style.top = top + 'px'; + popup.style.top = top + 'px'; }, openPopup: function (parent, id, syncWidth, position, x, y, instance, callback, closeOnDocumentClick = true, autoFocusFirstElement = false, disableSmartPosition = false) { var popup = document.getElementById(id); @@ -1119,20 +1119,20 @@ window.Radzen = { var top = y ? y : parentRect.bottom; var left = x ? x : parentRect.left; - if (syncWidth) { - popup.style.width = parentRect.width + 'px'; - if (!popup.style.minWidth) { - popup.minWidth = true; - popup.style.minWidth = parentRect.width + 'px'; - } + if (syncWidth) { + popup.style.width = parentRect.width + 'px'; + if (!popup.style.minWidth) { + popup.minWidth = true; + popup.style.minWidth = parentRect.width + 'px'; + } } if (window.chrome) { - var closestFrozenCell = popup.closest('.rz-frozen-cell'); - if (closestFrozenCell) { - Radzen[id + 'FZL'] = { cell: closestFrozenCell, left: closestFrozenCell.style.left }; - closestFrozenCell.style.left = ''; - } + var closestFrozenCell = popup.closest('.rz-frozen-cell'); + if (closestFrozenCell) { + Radzen[id + 'FZL'] = { cell: closestFrozenCell, left: closestFrozenCell.style.left }; + closestFrozenCell.style.left = ''; + } } popup.style.display = 'block'; @@ -1144,9 +1144,9 @@ window.Radzen = { var smartPosition = !position || position == 'bottom'; if (smartPosition && top + rect.height > window.innerHeight && parentRect.top > rect.height) { - if (disableSmartPosition !== true) { - top = parentRect.top - rect.height; - } + if (disableSmartPosition !== true) { + top = parentRect.top - rect.height; + } if (position) { top = top - 40; @@ -1155,10 +1155,10 @@ window.Radzen = { if (tooltipContent.classList.contains(tooltipContentClassName)) { tooltipContent.classList.remove(tooltipContentClassName); tooltipContent.classList.add('rz-top-tooltip-content'); - position = 'top'; - if (instance && callback) { - instance.invokeMethodAsync(callback, position); - } + position = 'top'; + if (instance && callback) { + instance.invokeMethodAsync(callback, position); + } } } } @@ -1189,7 +1189,7 @@ window.Radzen = { if (position == 'left') { left = parentRect.left - rect.width - 5; - top = parentRect.top; + top = parentRect.top; } if (position == 'right') { @@ -1207,45 +1207,45 @@ window.Radzen = { popup.style.top = top + scrollTop + 'px'; if (!popup.classList.contains('rz-overlaypanel')) { - popup.classList.add('rz-popup'); + popup.classList.add('rz-popup'); } Radzen[id] = function (e) { - var lastPopup = Radzen.popups && Radzen.popups[Radzen.popups.length - 1]; - var currentPopup = lastPopup != null && document.getElementById(lastPopup.id) || popup; + var lastPopup = Radzen.popups && Radzen.popups[Radzen.popups.length - 1]; + var currentPopup = lastPopup != null && document.getElementById(lastPopup.id) || popup; - if (lastPopup) { - currentPopup.instance = lastPopup.instance; - currentPopup.callback = lastPopup.callback; - currentPopup.parent = lastPopup.parent; - } + if (lastPopup) { + currentPopup.instance = lastPopup.instance; + currentPopup.callback = lastPopup.callback; + currentPopup.parent = lastPopup.parent; + } - if(e.type == 'contextmenu' || !e.target || !closeOnDocumentClick) return; - if (!/Android/i.test(navigator.userAgent) && - !['input', 'textarea'].includes(document.activeElement ? document.activeElement.tagName.toLowerCase() : '') && e.type == 'resize') { - Radzen.closePopup(currentPopup.id, currentPopup.instance, currentPopup.callback, e); - return; - } + if (e.type == 'contextmenu' || !e.target || !closeOnDocumentClick) return; + if (!/Android/i.test(navigator.userAgent) && + !['input', 'textarea'].includes(document.activeElement ? document.activeElement.tagName.toLowerCase() : '') && e.type == 'resize') { + Radzen.closePopup(currentPopup.id, currentPopup.instance, currentPopup.callback, e); + return; + } - var closestLink = e.target.closest && (e.target.closest('.rz-link') || e.target.closest('.rz-navigation-item-link')); - if (closestLink && closestLink.closest && closestLink.closest('a')) { - if (Radzen.closeAllPopups) { - Radzen.closeAllPopups(); - } + var closestLink = e.target.closest && (e.target.closest('.rz-link') || e.target.closest('.rz-navigation-item-link')); + if (closestLink && closestLink.closest && closestLink.closest('a')) { + if (Radzen.closeAllPopups) { + Radzen.closeAllPopups(); } - if (currentPopup.parent) { - if (e.type == 'mousedown' && !currentPopup.parent.contains(e.target) && !currentPopup.contains(e.target)) { - Radzen.closePopup(currentPopup.id, currentPopup.instance, currentPopup.callback, e); - } - } else { - if (e.target.nodeType && !currentPopup.contains(e.target)) { - Radzen.closePopup(currentPopup.id, currentPopup.instance, currentPopup.callback, e); - } + } + if (currentPopup.parent) { + if (e.type == 'mousedown' && !currentPopup.parent.contains(e.target) && !currentPopup.contains(e.target)) { + Radzen.closePopup(currentPopup.id, currentPopup.instance, currentPopup.callback, e); } + } else { + if (e.target.nodeType && !currentPopup.contains(e.target)) { + Radzen.closePopup(currentPopup.id, currentPopup.instance, currentPopup.callback, e); + } + } }; if (!Radzen.popups) { - Radzen.popups = []; + Radzen.popups = []; } Radzen.popups.push({ id, instance, callback, parent }); @@ -1258,44 +1258,44 @@ window.Radzen = { var p = parent; while (p && p != document.body) { - if (p.scrollWidth > p.clientWidth || p.scrollHeight > p.clientHeight) { - p.removeEventListener('scroll', Radzen.closeAllPopups); - p.addEventListener('scroll', Radzen.closeAllPopups); - } - p = p.parentElement; + if (p.scrollWidth > p.clientWidth || p.scrollHeight > p.clientHeight) { + p.removeEventListener('scroll', Radzen.closeAllPopups); + p.addEventListener('scroll', Radzen.closeAllPopups); + } + p = p.parentElement; } if (!parent) { - document.removeEventListener('contextmenu', Radzen[id]); - document.addEventListener('contextmenu', Radzen[id]); + document.removeEventListener('contextmenu', Radzen[id]); + document.addEventListener('contextmenu', Radzen[id]); } if (autoFocusFirstElement) { - setTimeout(function () { - popup.removeEventListener('keydown', Radzen.focusTrap); - popup.addEventListener('keydown', Radzen.focusTrap); - - var focusable = Radzen.getFocusableElements(popup); - var firstFocusable = focusable[0]; - if (firstFocusable) { - firstFocusable.focus(); - } - }, 500); + setTimeout(function () { + popup.removeEventListener('keydown', Radzen.focusTrap); + popup.addEventListener('keydown', Radzen.focusTrap); + + var focusable = Radzen.getFocusableElements(popup); + var firstFocusable = focusable[0]; + if (firstFocusable) { + firstFocusable.focus(); + } + }, 500); } }, closeAllPopups: function (e, id) { if (!Radzen.popups) return; var el = e && e.target || id && documentElement.getElementById(id); var popups = Radzen.popups; - for (var i = 0; i < popups.length; i++) { - var p = popups[i]; + for (var i = 0; i < popups.length; i++) { + var p = popups[i]; - var closestPopup = el && el.closest && (el.closest('.rz-popup') || el.closest('.rz-overlaypanel')); - if (closestPopup && closestPopup != p) { - return; - } + var closestPopup = el && el.closest && (el.closest('.rz-popup') || el.closest('.rz-overlaypanel')); + if (closestPopup && closestPopup != p) { + return; + } - Radzen.closePopup(p.id, p.instance, p.callback, e); + Radzen.closePopup(p.id, p.instance, p.callback, e); } Radzen.popups = []; }, @@ -1303,23 +1303,23 @@ window.Radzen = { var popup = document.getElementById(id); if (!popup) return; if (popup.style.display == 'none') { - var popups = Radzen.findPopup(id); - if (popups.length > 1) { - for (var i = 0; i < popups.length; i++) { - if (popups[i].style.display == 'none') { - popups[i].parentNode.removeChild(popups[i]); - } else { - popup = popups[i]; - } - } - } else { - return; + var popups = Radzen.findPopup(id); + if (popups.length > 1) { + for (var i = 0; i < popups.length; i++) { + if (popups[i].style.display == 'none') { + popups[i].parentNode.removeChild(popups[i]); + } else { + popup = popups[i]; + } } + } else { + return; + } } if (popup) { if (popup.minWidth) { - popup.style.minWidth = ''; + popup.style.minWidth = ''; } if (window.chrome && Radzen[id + 'FZL']) { @@ -1334,35 +1334,35 @@ window.Radzen = { Radzen[id] = null; if (instance && callback) { - if (callback.includes('RadzenTooltip')) { - instance.invokeMethodAsync(callback, null); - } else { - instance.invokeMethodAsync(callback); - } + if (callback.includes('RadzenTooltip')) { + instance.invokeMethodAsync(callback, null); + } else { + instance.invokeMethodAsync(callback); + } } Radzen.popups = (Radzen.popups || []).filter(function (obj) { - return obj.id !== id; + return obj.id !== id; }); if (Radzen.activeElement && Radzen.activeElement == document.activeElement || - Radzen.activeElement && document.activeElement == document.body || - Radzen.activeElement && document.activeElement && - (document.activeElement.classList.contains('rz-dropdown-filter') || document.activeElement.classList.contains('rz-lookup-search-input'))) { - setTimeout(function () { - if (e && e.target && e.target.tabIndex != -1) { - Radzen.activeElement = e.target; - } - if (Radzen.activeElement) { - Radzen.activeElement.focus(); - } - Radzen.activeElement = null; - }, 100); + Radzen.activeElement && document.activeElement == document.body || + Radzen.activeElement && document.activeElement && + (document.activeElement.classList.contains('rz-dropdown-filter') || document.activeElement.classList.contains('rz-lookup-search-input'))) { + setTimeout(function () { + if (e && e.target && e.target.tabIndex != -1) { + Radzen.activeElement = e.target; + } + if (Radzen.activeElement) { + Radzen.activeElement.focus(); + } + Radzen.activeElement = null; + }, 100); } }, popupOpened: function (id) { var popup = document.getElementById(id); if (popup) { - return popup.style.display != 'none'; + return popup.style.display != 'none'; } return false; }, @@ -1386,56 +1386,56 @@ window.Radzen = { var scrollLeft = (e.target.scrollLeft ? '-' + e.target.scrollLeft : 0) + 'px'; - e.target.previousElementSibling.style.marginLeft = scrollLeft; - e.target.previousElementSibling.firstElementChild.style.paddingRight = - e.target.clientHeight < e.target.scrollHeight ? (e.target.offsetWidth - e.target.clientWidth) + 'px' : '0px'; + e.target.previousElementSibling.style.marginLeft = scrollLeft; + e.target.previousElementSibling.firstElementChild.style.paddingRight = + e.target.clientHeight < e.target.scrollHeight ? (e.target.offsetWidth - e.target.clientWidth) + 'px' : '0px'; if (e.target.nextElementSibling) { - e.target.nextElementSibling.style.marginLeft = scrollLeft; - e.target.nextElementSibling.firstElementChild.style.paddingRight = - e.target.clientHeight < e.target.scrollHeight ? (e.target.offsetWidth - e.target.clientWidth) + 'px' : '0px'; + e.target.nextElementSibling.style.marginLeft = scrollLeft; + e.target.nextElementSibling.firstElementChild.style.paddingRight = + e.target.clientHeight < e.target.scrollHeight ? (e.target.offsetWidth - e.target.clientWidth) + 'px' : '0px'; } for (var i = 0; i < document.body.children.length; i++) { - if (document.body.children[i].classList.contains('rz-overlaypanel')) { - document.body.children[i].style.display = 'none'; - } + if (document.body.children[i].classList.contains('rz-overlaypanel')) { + document.body.children[i].style.display = 'none'; + } } }, focusFirstFocusableElement: function (el) { - var focusable = Radzen.getFocusableElements(el); - var editor = el.querySelector('.rz-html-editor'); - - if (editor && !focusable.includes(editor.previousElementSibling)) { - var editable = el.querySelector('.rz-html-editor-content'); - if (editable) { - var selection = window.getSelection(); - var range = document.createRange(); - range.setStart(editable, 0); - range.setEnd(editable, 0); - selection.removeAllRanges(); - selection.addRange(range); - } - } else { - var firstFocusable = focusable[0]; - if (firstFocusable) { - firstFocusable.focus(); - } + var focusable = Radzen.getFocusableElements(el); + var editor = el.querySelector('.rz-html-editor'); + + if (editor && !focusable.includes(editor.previousElementSibling)) { + var editable = el.querySelector('.rz-html-editor-content'); + if (editable) { + var selection = window.getSelection(); + var range = document.createRange(); + range.setStart(editable, 0); + range.setEnd(editable, 0); + selection.removeAllRanges(); + selection.addRange(range); } + } else { + var firstFocusable = focusable[0]; + if (firstFocusable) { + firstFocusable.focus(); + } + } }, openSideDialog: function (options) { - setTimeout(function () { - if (options.autoFocusFirstElement) { - var dialogs = document.querySelectorAll('.rz-dialog-side-content'); - if (dialogs.length == 0) return; - var lastDialog = dialogs[dialogs.length - 1]; - Radzen.focusFirstFocusableElement(lastDialog); - } - }, 500); + setTimeout(function () { + if (options.autoFocusFirstElement) { + var dialogs = document.querySelectorAll('.rz-dialog-side-content'); + if (dialogs.length == 0) return; + var lastDialog = dialogs[dialogs.length - 1]; + Radzen.focusFirstFocusableElement(lastDialog); + } + }, 500); }, openDialog: function (options, dialogService, dialog) { if (Radzen.closeAllPopups) { - Radzen.closeAllPopups(); + Radzen.closeAllPopups(); } Radzen.dialogService = dialogService; if ( @@ -1446,75 +1446,75 @@ window.Radzen = { } setTimeout(function () { - var dialogs = document.querySelectorAll('.rz-dialog-content'); - if (dialogs.length == 0) return; - var lastDialog = dialogs[dialogs.length - 1]; - - if (lastDialog) { - lastDialog.options = options; - lastDialog.removeEventListener('keydown', Radzen.focusTrap); - lastDialog.addEventListener('keydown', Radzen.focusTrap); - - if (options.resizable) { - dialog.offsetWidth = lastDialog.parentElement.offsetWidth; - dialog.offsetHeight = lastDialog.parentElement.offsetHeight; - var dialogResize = function (e) { - if (!dialog) return; - if (dialog.offsetWidth != e[0].target.offsetWidth || dialog.offsetHeight != e[0].target.offsetHeight) { - - dialog.offsetWidth = e[0].target.offsetWidth; - dialog.offsetHeight = e[0].target.offsetHeight; - - dialog.invokeMethodAsync( - 'RadzenDialog.OnResize', - e[0].target.offsetWidth, - e[0].target.offsetHeight - ); - } - }; - Radzen.dialogResizer = new ResizeObserver(dialogResize).observe(lastDialog.parentElement); + var dialogs = document.querySelectorAll('.rz-dialog-content'); + if (dialogs.length == 0) return; + var lastDialog = dialogs[dialogs.length - 1]; + + if (lastDialog) { + lastDialog.options = options; + lastDialog.removeEventListener('keydown', Radzen.focusTrap); + lastDialog.addEventListener('keydown', Radzen.focusTrap); + + if (options.resizable) { + dialog.offsetWidth = lastDialog.parentElement.offsetWidth; + dialog.offsetHeight = lastDialog.parentElement.offsetHeight; + var dialogResize = function (e) { + if (!dialog) return; + if (dialog.offsetWidth != e[0].target.offsetWidth || dialog.offsetHeight != e[0].target.offsetHeight) { + + dialog.offsetWidth = e[0].target.offsetWidth; + dialog.offsetHeight = e[0].target.offsetHeight; + + dialog.invokeMethodAsync( + 'RadzenDialog.OnResize', + e[0].target.offsetWidth, + e[0].target.offsetHeight + ); } + }; + Radzen.dialogResizer = new ResizeObserver(dialogResize).observe(lastDialog.parentElement); + } - if (options.draggable) { - var dialogTitle = lastDialog.parentElement.querySelector('.rz-dialog-titlebar'); - if (dialogTitle) { - Radzen[dialogTitle] = function (e) { - var rect = lastDialog.parentElement.getBoundingClientRect(); - var offsetX = e.clientX - rect.left; - var offsetY = e.clientY - rect.top; + if (options.draggable) { + var dialogTitle = lastDialog.parentElement.querySelector('.rz-dialog-titlebar'); + if (dialogTitle) { + Radzen[dialogTitle] = function (e) { + var rect = lastDialog.parentElement.getBoundingClientRect(); + var offsetX = e.clientX - rect.left; + var offsetY = e.clientY - rect.top; - var move = function (e) { - var left = e.clientX - offsetX; - var top = e.clientY - offsetY; + var move = function (e) { + var left = e.clientX - offsetX; + var top = e.clientY - offsetY; - lastDialog.parentElement.style.left = left + 'px'; - lastDialog.parentElement.style.top = top + 'px'; + lastDialog.parentElement.style.left = left + 'px'; + lastDialog.parentElement.style.top = top + 'px'; - dialog.invokeMethodAsync('RadzenDialog.OnDrag', top, left); - }; + dialog.invokeMethodAsync('RadzenDialog.OnDrag', top, left); + }; - var stop = function () { - document.removeEventListener('mousemove', move); - document.removeEventListener('mouseup', stop); - }; + var stop = function () { + document.removeEventListener('mousemove', move); + document.removeEventListener('mouseup', stop); + }; - document.addEventListener('mousemove', move); - document.addEventListener('mouseup', stop); - }; + document.addEventListener('mousemove', move); + document.addEventListener('mouseup', stop); + }; - dialogTitle.addEventListener('mousedown', Radzen[dialogTitle]); - } - } + dialogTitle.addEventListener('mousedown', Radzen[dialogTitle]); + } + } - if (options.autoFocusFirstElement) { - Radzen.focusFirstFocusableElement(lastDialog); - } + if (options.autoFocusFirstElement) { + Radzen.focusFirstFocusableElement(lastDialog); } + } }, 500); document.removeEventListener('keydown', Radzen.closePopupOrDialog); if (options.closeDialogOnEsc) { - document.addEventListener('keydown', Radzen.closePopupOrDialog); + document.addEventListener('keydown', Radzen.closePopupOrDialog); } }, closeDialog: function () { @@ -1524,82 +1524,82 @@ window.Radzen = { var lastDialog = dialogs.length && dialogs[dialogs.length - 1]; if (lastDialog) { - var dialogTitle = lastDialog.parentElement.querySelector('.rz-dialog-titlebar'); - if (dialogTitle) { - dialogTitle.removeEventListener('mousedown', Radzen[dialogTitle]); - Radzen[dialogTitle] = null; - delete Radzen[dialogTitle]; - } + var dialogTitle = lastDialog.parentElement.querySelector('.rz-dialog-titlebar'); + if (dialogTitle) { + dialogTitle.removeEventListener('mousedown', Radzen[dialogTitle]); + Radzen[dialogTitle] = null; + delete Radzen[dialogTitle]; + } } if (dialogs.length <= 1) { - document.removeEventListener('keydown', Radzen.closePopupOrDialog); - delete Radzen.dialogService; + document.removeEventListener('keydown', Radzen.closePopupOrDialog); + delete Radzen.dialogService; } }, disableKeydown: function (e) { - e = e || window.event; - e.preventDefault(); + e = e || window.event; + e.preventDefault(); }, getFocusableElements: function (element) { return [...element.querySelectorAll('a, button, input, textarea, select, details, iframe, embed, object, summary dialog, audio[controls], video[controls], [contenteditable], [tabindex]')] - .filter(el => el && el.tabIndex > -1 && !el.hasAttribute('disabled') && el.offsetParent !== null); + .filter(el => el && el.tabIndex > -1 && !el.hasAttribute('disabled') && el.offsetParent !== null); }, focusTrap: function (e) { e = e || window.event; var isTab = false; if ("key" in e) { - isTab = (e.key === "Tab"); + isTab = (e.key === "Tab"); } else { - isTab = (e.keyCode === 9); + isTab = (e.keyCode === 9); } if (isTab) { - var focusable = Radzen.getFocusableElements(e.currentTarget); - var firstFocusable = focusable[0]; - var lastFocusable = focusable[focusable.length - 1]; - - if (firstFocusable && lastFocusable && e.shiftKey && document.activeElement === firstFocusable) { - e.preventDefault(); - lastFocusable.focus(); - } else if (firstFocusable && lastFocusable && !e.shiftKey && document.activeElement === lastFocusable) { - e.preventDefault(); - firstFocusable.focus(); - } + var focusable = Radzen.getFocusableElements(e.currentTarget); + var firstFocusable = focusable[0]; + var lastFocusable = focusable[focusable.length - 1]; + + if (firstFocusable && lastFocusable && e.shiftKey && document.activeElement === firstFocusable) { + e.preventDefault(); + lastFocusable.focus(); + } else if (firstFocusable && lastFocusable && !e.shiftKey && document.activeElement === lastFocusable) { + e.preventDefault(); + firstFocusable.focus(); + } } }, closePopupOrDialog: function (e) { - e = e || window.event; - var isEscape = false; - if ("key" in e) { - isEscape = (e.key === "Escape" || e.key === "Esc"); - } else { - isEscape = (e.keyCode === 27); + e = e || window.event; + var isEscape = false; + if ("key" in e) { + isEscape = (e.key === "Escape" || e.key === "Esc"); + } else { + isEscape = (e.keyCode === 27); + } + if (isEscape && Radzen.dialogService) { + var popups = document.querySelectorAll('.rz-popup,.rz-overlaypanel'); + for (var i = 0; i < popups.length; i++) { + if (popups[i].style.display != 'none') { + return; + } } - if (isEscape && Radzen.dialogService) { - var popups = document.querySelectorAll('.rz-popup,.rz-overlaypanel'); - for (var i = 0; i < popups.length; i++) { - if (popups[i].style.display != 'none') { - return; - } - } - var dialogs = document.querySelectorAll('.rz-dialog-content'); - if (dialogs.length == 0) return; - var lastDialog = dialogs[dialogs.length - 1]; + var dialogs = document.querySelectorAll('.rz-dialog-content'); + if (dialogs.length == 0) return; + var lastDialog = dialogs[dialogs.length - 1]; - if (lastDialog && lastDialog.options && lastDialog.options.closeDialogOnEsc) { - Radzen.dialogService.invokeMethodAsync('DialogService.Close', null); + if (lastDialog && lastDialog.options && lastDialog.options.closeDialogOnEsc) { + Radzen.dialogService.invokeMethodAsync('DialogService.Close', null); - if (dialogs.length <= 1) { - document.removeEventListener('keydown', Radzen.closePopupOrDialog); - delete Radzen.dialogService; - var layout = document.querySelector('.rz-layout'); - if (layout) { - layout.removeEventListener('keydown', Radzen.disableKeydown); - } - } + if (dialogs.length <= 1) { + document.removeEventListener('keydown', Radzen.closePopupOrDialog); + delete Radzen.dialogService; + var layout = document.querySelector('.rz-layout'); + if (layout) { + layout.removeEventListener('keydown', Radzen.disableKeydown); } + } } + } }, getNumericValue: function (arg) { var el = @@ -1624,10 +1624,41 @@ window.Radzen = { input.value = value; } }, - blur: function (el, e) { + blur: function (el, e) { if (el) { - e.preventDefault(); - el.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, cancelable: true, keyCode: 9 })); + e.preventDefault(); + el.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, cancelable: true, keyCode: 9 })); + } + }, + blurAllNumericInputs: function () { + const inputs = document.querySelectorAll('.rz-numeric-input input'); + inputs.forEach(input => { + input.blur(); + input.focus(); + }); + }, + getNumericInputValues: function () { + const inputs = {}; + const spans = document.querySelectorAll('span.rz-numeric'); + spans.forEach((span) => { + const input = span.querySelector('.rz-numeric-input'); + if (input && span.id) { + inputs[span.id] = input.value; + } + }); + return inputs; + }, + setNumericInputValues: function (values) { + for (const spanId in values) { + if (values.hasOwnProperty(spanId)) { + const span = document.getElementById(spanId); + if (span) { + const input = span.querySelector('.rz-numeric-input'); + if (input) { + input.value = values[spanId]; + } + } + } } }, readFileAsBase64: function (fileInput, maxFileSize, maxWidth, maxHeight) { @@ -1676,7 +1707,7 @@ window.Radzen = { } }, false - ); + ); var file = fileInput.files[0]; if (!file) return; if (file.size <= maxFileSize) { @@ -1714,7 +1745,7 @@ window.Radzen = { } if (clickToOpen === false && item.parentElement && item.parentElement.closest('.rz-navigation-item') && !defaultActive) { - return; + return; }; toggle(active); @@ -1773,7 +1804,7 @@ window.Radzen = { var rect = ref.getBoundingClientRect(); - return {width: rect.width, height: rect.height}; + return { width: rect.width, height: rect.height }; }, createChart: function (ref, instance) { var inside = false; @@ -1783,17 +1814,17 @@ window.Radzen = { var x = e.clientX - rect.left; var y = e.clientY - rect.top; instance.invokeMethodAsync('MouseMove', x, y); - } + } }, 100); ref.mouseEnterHandler = function () { - inside = true; + inside = true; }; ref.mouseLeaveHandler = function (e) { - if (e.relatedTarget && (e.relatedTarget.matches('.rz-chart-tooltip') || e.relatedTarget.closest('.rz-chart-tooltip'))) { - return; - } - inside = false; - instance.invokeMethodAsync('MouseMove', -1, -1); + if (e.relatedTarget && (e.relatedTarget.matches('.rz-chart-tooltip') || e.relatedTarget.closest('.rz-chart-tooltip'))) { + return; + } + inside = false; + instance.invokeMethodAsync('MouseMove', -1, -1); }; ref.clickHandler = function (e) { var rect = ref.getBoundingClientRect(); @@ -1830,13 +1861,13 @@ window.Radzen = { window.addEventListener('resize', ref.resizeHandler); var rect = ref.getBoundingClientRect(); - return {width: rect.width, height: rect.height}; + return { width: rect.width, height: rect.height }; }, innerHTML: function (ref, value) { if (value != undefined) { - if (ref != null) { - ref.innerHTML = value; - } + if (ref != null) { + ref.innerHTML = value; + } } else { return ref.innerHTML; } @@ -1870,23 +1901,23 @@ window.Radzen = { }; }, mediaQueries: {}, - mediaQuery: function(query, instance) { + mediaQuery: function (query, instance) { if (instance) { function callback(event) { - instance.invokeMethodAsync('OnChange', event.matches) + instance.invokeMethodAsync('OnChange', event.matches) }; var query = matchMedia(query); - this.mediaQueries[instance._id] = function() { - query.removeListener(callback); + this.mediaQueries[instance._id] = function () { + query.removeListener(callback); } query.addListener(callback); return query.matches; } else { - instance = query; - if (this.mediaQueries[instance._id]) { - this.mediaQueries[instance._id](); - delete this.mediaQueries[instance._id]; - } + instance = query; + if (this.mediaQueries[instance._id]) { + this.mediaQueries[instance._id](); + delete this.mediaQueries[instance._id]; + } } }, createEditor: function (ref, uploadUrl, paste, instance, shortcuts) { @@ -1945,51 +1976,51 @@ window.Radzen = { var file = item.getAsFile(); if (uploadUrl) { - var xhr = new XMLHttpRequest(); - var data = new FormData(); - data.append("file", file); - xhr.onreadystatechange = function (e) { - if (xhr.readyState === XMLHttpRequest.DONE) { - var status = xhr.status; - if (status === 0 || (status >= 200 && status < 400)) { - var result = JSON.parse(xhr.responseText); - var html = ''; - if (paste) { - instance.invokeMethodAsync('OnPaste', html) - .then(function (html) { - document.execCommand("insertHTML", false, html); - }); - } else { - document.execCommand("insertHTML", false, ''); - } - instance.invokeMethodAsync('OnUploadComplete', xhr.responseText); - } else { - instance.invokeMethodAsync('OnError', xhr.responseText); - } - } - } - instance.invokeMethodAsync('GetHeaders').then(function (headers) { - xhr.open('POST', uploadUrl, true); - for (var name in headers) { - xhr.setRequestHeader(name, headers[name]); + var xhr = new XMLHttpRequest(); + var data = new FormData(); + data.append("file", file); + xhr.onreadystatechange = function (e) { + if (xhr.readyState === XMLHttpRequest.DONE) { + var status = xhr.status; + if (status === 0 || (status >= 200 && status < 400)) { + var result = JSON.parse(xhr.responseText); + var html = ''; + if (paste) { + instance.invokeMethodAsync('OnPaste', html) + .then(function (html) { + document.execCommand("insertHTML", false, html); + }); + } else { + document.execCommand("insertHTML", false, ''); } - xhr.send(data); - }); - } else { - var reader = new FileReader(); - reader.onload = function (e) { - var html = ''; - - if (paste) { - instance.invokeMethodAsync('OnPaste', html) - .then(function (html) { - document.execCommand("insertHTML", false, html); - }); + instance.invokeMethodAsync('OnUploadComplete', xhr.responseText); } else { - document.execCommand("insertHTML", false, html); + instance.invokeMethodAsync('OnError', xhr.responseText); } - }; - reader.readAsDataURL(file); + } + } + instance.invokeMethodAsync('GetHeaders').then(function (headers) { + xhr.open('POST', uploadUrl, true); + for (var name in headers) { + xhr.setRequestHeader(name, headers[name]); + } + xhr.send(data); + }); + } else { + var reader = new FileReader(); + reader.onload = function (e) { + var html = ''; + + if (paste) { + instance.invokeMethodAsync('OnPaste', html) + .then(function (html) { + document.execCommand("insertHTML", false, html); + }); + } else { + document.execCommand("insertHTML", false, html); + } + }; + reader.readAsDataURL(file); } } else if (paste) { e.preventDefault(); @@ -2020,8 +2051,8 @@ window.Radzen = { var range = ref.range; if (range) { delete ref.range; - if(ref) { - ref.focus(); + if (ref) { + ref.focus(); } var selection = getSelection(); selection.removeAllRanges(); @@ -2081,7 +2112,7 @@ window.Radzen = { }, startDrag: function (ref, instance, handler) { if (!ref) { - return { left: 0, top: 0, width: 0, height: 0 }; + return { left: 0, top: 0, width: 0, height: 0 }; } ref.mouseMoveHandler = function (e) { instance.invokeMethodAsync(handler, { clientX: e.clientX, clientY: e.clientY }); @@ -2105,8 +2136,8 @@ window.Radzen = { }, clientRect: function (arg) { var el = arg instanceof Element || arg instanceof HTMLDocument - ? arg - : document.getElementById(arg); + ? arg + : document.getElementById(arg); var rect = el.getBoundingClientRect(); return { left: rect.left, top: rect.top, width: rect.width, height: rect.height }; }, @@ -2116,384 +2147,384 @@ window.Radzen = { document.removeEventListener('touchmove', ref.touchMoveHandler) document.removeEventListener('touchend', ref.mouseUpHandler); }, - startColumnReorder: function(id) { - var el = document.getElementById(id + '-drag'); - var cell = el.parentNode.parentNode; - var visual = document.createElement("th"); - visual.className = cell.className + ' rz-column-draggable'; - visual.style = cell.style; - visual.style.display = 'none'; - visual.style.position = 'absolute'; - visual.style.height = cell.offsetHeight + 'px'; - visual.style.width = cell.offsetWidth + 'px'; - visual.style.zIndex = 2000; - visual.innerHTML = cell.innerHTML; - visual.id = id + 'visual'; - document.body.appendChild(visual); - - var resizers = cell.parentNode.querySelectorAll('.rz-column-resizer'); - for (let i = 0; i < resizers.length; i++) { - resizers[i].style.display = 'none'; - } - - Radzen[id + 'end'] = function (e) { - var el = document.getElementById(id + 'visual'); - if (el) { - document.body.removeChild(el); - Radzen[id + 'end'] = null; - Radzen[id + 'move'] = null; - var resizers = cell.parentNode.querySelectorAll('.rz-column-resizer'); - for (let i = 0; i < resizers.length; i++) { - resizers[i].style.display = 'block'; - } - } + startColumnReorder: function (id) { + var el = document.getElementById(id + '-drag'); + var cell = el.parentNode.parentNode; + var visual = document.createElement("th"); + visual.className = cell.className + ' rz-column-draggable'; + visual.style = cell.style; + visual.style.display = 'none'; + visual.style.position = 'absolute'; + visual.style.height = cell.offsetHeight + 'px'; + visual.style.width = cell.offsetWidth + 'px'; + visual.style.zIndex = 2000; + visual.innerHTML = cell.innerHTML; + visual.id = id + 'visual'; + document.body.appendChild(visual); + + var resizers = cell.parentNode.querySelectorAll('.rz-column-resizer'); + for (let i = 0; i < resizers.length; i++) { + resizers[i].style.display = 'none'; + } + + Radzen[id + 'end'] = function (e) { + var el = document.getElementById(id + 'visual'); + if (el) { + document.body.removeChild(el); + Radzen[id + 'end'] = null; + Radzen[id + 'move'] = null; + var resizers = cell.parentNode.querySelectorAll('.rz-column-resizer'); + for (let i = 0; i < resizers.length; i++) { + resizers[i].style.display = 'block'; + } } - document.removeEventListener('click', Radzen[id + 'end']); - document.addEventListener('click', Radzen[id + 'end']); + } + document.removeEventListener('click', Radzen[id + 'end']); + document.addEventListener('click', Radzen[id + 'end']); - Radzen[id + 'move'] = function (e) { - var el = document.getElementById(id + 'visual'); - if (el) { - el.style.display = 'block'; + Radzen[id + 'move'] = function (e) { + var el = document.getElementById(id + 'visual'); + if (el) { + el.style.display = 'block'; - if (/Edge/.test(navigator.userAgent)) { - var scrollLeft = document.body.scrollLeft; - var scrollTop = document.body.scrollTop; - } else { - var scrollLeft = document.documentElement.scrollLeft; - var scrollTop = document.documentElement.scrollTop; - } + if (/Edge/.test(navigator.userAgent)) { + var scrollLeft = document.body.scrollLeft; + var scrollTop = document.body.scrollTop; + } else { + var scrollLeft = document.documentElement.scrollLeft; + var scrollTop = document.documentElement.scrollTop; + } - el.style.top = e.clientY + scrollTop + 10 + 'px'; - el.style.left = e.clientX + scrollLeft + 10 + 'px'; - } + el.style.top = e.clientY + scrollTop + 10 + 'px'; + el.style.left = e.clientX + scrollLeft + 10 + 'px'; } - document.removeEventListener('mousemove', Radzen[id + 'move']); - document.addEventListener('mousemove', Radzen[id + 'move']); + } + document.removeEventListener('mousemove', Radzen[id + 'move']); + document.addEventListener('mousemove', Radzen[id + 'move']); }, stopColumnResize: function (id, grid, columnIndex) { var el = document.getElementById(id + '-resizer'); - if(!el) return; + if (!el) return; var cell = el.parentNode.parentNode; if (!cell) return; if (Radzen[el]) { - grid.invokeMethodAsync( + grid.invokeMethodAsync( + 'RadzenGrid.OnColumnResized', + columnIndex, + cell.getBoundingClientRect().width + ); + el.style.width = null; + document.removeEventListener('mousemove', Radzen[el].mouseMoveHandler); + document.removeEventListener('mouseup', Radzen[el].mouseUpHandler); + document.removeEventListener('touchmove', Radzen[el].touchMoveHandler) + document.removeEventListener('touchend', Radzen[el].mouseUpHandler); + Radzen[el] = null; + } + }, + startColumnResize: function (id, grid, columnIndex, clientX) { + var el = document.getElementById(id + '-resizer'); + var cell = el.parentNode.parentNode; + var col = document.getElementById(id + '-col'); + var dataCol = document.getElementById(id + '-data-col'); + var footerCol = document.getElementById(id + '-footer-col'); + Radzen[el] = { + clientX: clientX, + width: cell.getBoundingClientRect().width, + mouseUpHandler: function (e) { + if (Radzen[el]) { + grid.invokeMethodAsync( 'RadzenGrid.OnColumnResized', columnIndex, cell.getBoundingClientRect().width - ); - el.style.width = null; - document.removeEventListener('mousemove', Radzen[el].mouseMoveHandler); - document.removeEventListener('mouseup', Radzen[el].mouseUpHandler); - document.removeEventListener('touchmove', Radzen[el].touchMoveHandler) - document.removeEventListener('touchend', Radzen[el].mouseUpHandler); - Radzen[el] = null; - } - }, - startColumnResize: function(id, grid, columnIndex, clientX) { - var el = document.getElementById(id + '-resizer'); - var cell = el.parentNode.parentNode; - var col = document.getElementById(id + '-col'); - var dataCol = document.getElementById(id + '-data-col'); - var footerCol = document.getElementById(id + '-footer-col'); - Radzen[el] = { - clientX: clientX, - width: cell.getBoundingClientRect().width, - mouseUpHandler: function (e) { - if (Radzen[el]) { - grid.invokeMethodAsync( - 'RadzenGrid.OnColumnResized', - columnIndex, - cell.getBoundingClientRect().width - ); - el.style.width = null; - document.removeEventListener('mousemove', Radzen[el].mouseMoveHandler); - document.removeEventListener('mouseup', Radzen[el].mouseUpHandler); - document.removeEventListener('touchmove', Radzen[el].touchMoveHandler) - document.removeEventListener('touchend', Radzen[el].mouseUpHandler); - Radzen[el] = null; - } - }, - mouseMoveHandler: function (e) { - if (Radzen[el]) { - var widthFloat = (Radzen[el].width - (Radzen.isRTL(cell) ? -1 : 1) * (Radzen[el].clientX - e.clientX)); - var minWidth = parseFloat(cell.style.minWidth || 0) - - if (widthFloat < minWidth) { - widthFloat = minWidth; - } - - var width = widthFloat + 'px'; - - if (cell) { - cell.style.width = width; - } - if (col) { - col.style.width = width; - } - if (dataCol) { - dataCol.style.width = width; - } - if (footerCol) { - footerCol.style.width = width; - } - } - }, - touchMoveHandler: function (e) { - if (e.targetTouches[0]) { - Radzen[el].mouseMoveHandler(e.targetTouches[0]); - } + ); + el.style.width = null; + document.removeEventListener('mousemove', Radzen[el].mouseMoveHandler); + document.removeEventListener('mouseup', Radzen[el].mouseUpHandler); + document.removeEventListener('touchmove', Radzen[el].touchMoveHandler) + document.removeEventListener('touchend', Radzen[el].mouseUpHandler); + Radzen[el] = null; + } + }, + mouseMoveHandler: function (e) { + if (Radzen[el]) { + var widthFloat = (Radzen[el].width - (Radzen.isRTL(cell) ? -1 : 1) * (Radzen[el].clientX - e.clientX)); + var minWidth = parseFloat(cell.style.minWidth || 0) + + if (widthFloat < minWidth) { + widthFloat = minWidth; } - }; - el.style.width = "100%"; - document.addEventListener('mousemove', Radzen[el].mouseMoveHandler); - document.addEventListener('mouseup', Radzen[el].mouseUpHandler); - document.addEventListener('touchmove', Radzen[el].touchMoveHandler, { passive: true }) - document.addEventListener('touchend', Radzen[el].mouseUpHandler, { passive: true }); - }, - startSplitterResize: function(id, - splitter, - paneId, - paneNextId, - orientation, - clientPos, - minValue, - maxValue, - minNextValue, - maxNextValue) { - - var el = document.getElementById(id); - var pane = document.getElementById(paneId); - var paneNext = document.getElementById(paneNextId); - var paneLength; - var paneNextLength; - var panePerc; - var paneNextPerc; - var isHOrientation=orientation == 'Horizontal'; - - var totalLength = 0.0; - Array.from(el.children).forEach(element => { - totalLength += isHOrientation - ? element.getBoundingClientRect().width - : element.getBoundingClientRect().height; - }); - if (pane) { - paneLength = isHOrientation - ? pane.getBoundingClientRect().width - : pane.getBoundingClientRect().height; + var width = widthFloat + 'px'; - panePerc = (paneLength / totalLength * 100) + '%'; + if (cell) { + cell.style.width = width; + } + if (col) { + col.style.width = width; + } + if (dataCol) { + dataCol.style.width = width; + } + if (footerCol) { + footerCol.style.width = width; + } } + }, + touchMoveHandler: function (e) { + if (e.targetTouches[0]) { + Radzen[el].mouseMoveHandler(e.targetTouches[0]); + } + } + }; + el.style.width = "100%"; + document.addEventListener('mousemove', Radzen[el].mouseMoveHandler); + document.addEventListener('mouseup', Radzen[el].mouseUpHandler); + document.addEventListener('touchmove', Radzen[el].touchMoveHandler, { passive: true }) + document.addEventListener('touchend', Radzen[el].mouseUpHandler, { passive: true }); + }, + startSplitterResize: function (id, + splitter, + paneId, + paneNextId, + orientation, + clientPos, + minValue, + maxValue, + minNextValue, + maxNextValue) { - if (paneNext) { - paneNextLength = isHOrientation - ? paneNext.getBoundingClientRect().width - : paneNext.getBoundingClientRect().height; + var el = document.getElementById(id); + var pane = document.getElementById(paneId); + var paneNext = document.getElementById(paneNextId); + var paneLength; + var paneNextLength; + var panePerc; + var paneNextPerc; + var isHOrientation = orientation == 'Horizontal'; + + var totalLength = 0.0; + Array.from(el.children).forEach(element => { + totalLength += isHOrientation + ? element.getBoundingClientRect().width + : element.getBoundingClientRect().height; + }); - paneNextPerc = (paneNextLength / totalLength * 100) + '%'; - } + if (pane) { + paneLength = isHOrientation + ? pane.getBoundingClientRect().width + : pane.getBoundingClientRect().height; - function ensurevalue(value) { - if (!value) - return null; + panePerc = (paneLength / totalLength * 100) + '%'; + } - value=value.trim().toLowerCase(); + if (paneNext) { + paneNextLength = isHOrientation + ? paneNext.getBoundingClientRect().width + : paneNext.getBoundingClientRect().height; - if (value.endsWith("%")) - return totalLength*parseFloat(value)/100; + paneNextPerc = (paneNextLength / totalLength * 100) + '%'; + } - if (value.endsWith("px")) - return parseFloat(value); + function ensurevalue(value) { + if (!value) + return null; - throw 'Invalid value'; - } + value = value.trim().toLowerCase(); - minValue=ensurevalue(minValue); - maxValue=ensurevalue(maxValue); - minNextValue=ensurevalue(minNextValue); - maxNextValue=ensurevalue(maxNextValue); - - Radzen[el] = { - clientPos: clientPos, - panePerc: parseFloat(panePerc), - paneNextPerc: isFinite(parseFloat(paneNextPerc)) ? parseFloat(paneNextPerc) : 0, - paneLength: paneLength, - paneNextLength: isFinite(paneNextLength) ? paneNextLength : 0, - mouseUpHandler: function(e) { - if (Radzen[el]) { - splitter.invokeMethodAsync( - 'RadzenSplitter.OnPaneResized', - parseInt(pane.getAttribute('data-index')), - parseFloat(pane.style.flexBasis), - paneNext ? parseInt(paneNext.getAttribute('data-index')) : null, - paneNext ? parseFloat(paneNext.style.flexBasis) : null - ); - - document.removeEventListener('pointerup', Radzen[el].mouseUpHandler); - document.removeEventListener('pointermove', Radzen[el].mouseMoveHandler); - el.removeEventListener('touchmove', preventDefaultAndStopPropagation); - Radzen[el] = null; - } - }, - mouseMoveHandler: function(e) { - if (Radzen[el]) { - - splitter.invokeMethodAsync( - 'RadzenSplitter.OnPaneResizing' - ); - - var spacePerc = Radzen[el].panePerc + Radzen[el].paneNextPerc; - var spaceLength = Radzen[el].paneLength + Radzen[el].paneNextLength; - - var length = (Radzen[el].paneLength - - (isHOrientation && Radzen.isRTL(e.target) ? -1 : 1) * (Radzen[el].clientPos - (isHOrientation ? e.clientX : e.clientY))); - - if (length > spaceLength) - length = spaceLength; - - if (minValue && length < minValue) length = minValue; - if (maxValue && length > maxValue) length = maxValue; - - if (paneNext) { - var nextSpace=spaceLength-length; - if (minNextValue && nextSpace < minNextValue) length = spaceLength-minNextValue; - if (maxNextValue && nextSpace > maxNextValue) length = spaceLength+maxNextValue; - } - - var perc = length / Radzen[el].paneLength; - if (!isFinite(perc)) { - perc = 1; - Radzen[el].panePerc = 0.1; - Radzen[el].paneLength =isHOrientation - ? pane.getBoundingClientRect().width - : pane.getBoundingClientRect().height; - } - - var newPerc = Radzen[el].panePerc * perc; - if (newPerc < 0) newPerc = 0; - if (newPerc > 100) newPerc = 100; - - pane.style.flexBasis = newPerc + '%'; - if (paneNext) - paneNext.style.flexBasis = (spacePerc - newPerc) + '%'; - } - }, - touchMoveHandler: function(e) { - if (e.targetTouches[0]) { - Radzen[el].mouseMoveHandler(e.targetTouches[0]); - } - } - }; + if (value.endsWith("%")) + return totalLength * parseFloat(value) / 100; - const preventDefaultAndStopPropagation = (ev) => { - ev.preventDefault(); - ev.stopPropagation(); - }; - document.addEventListener('pointerup', Radzen[el].mouseUpHandler); - document.addEventListener('pointermove', Radzen[el].mouseMoveHandler); - el.addEventListener('touchmove', preventDefaultAndStopPropagation, { passive: false }); - }, - resizeSplitter(id, e) { - var el = document.getElementById(id); - if (el && Radzen[el]) { - Radzen[el].mouseMoveHandler(e); - Radzen[el].mouseUpHandler(e); - } - }, - openWaiting: function() { - if (document.documentElement.scrollHeight > document.documentElement.clientHeight) { - document.body.classList.add('no-scroll'); - } - if (Radzen.WaitingIntervalId != null) { - clearInterval(Radzen.WaitingIntervalId); - } + if (value.endsWith("px")) + return parseFloat(value); - setTimeout(function() { - var timerObj = document.getElementsByClassName('rz-waiting-timer'); - if (timerObj.length == 0) return; - var timerStart = new Date().getTime(); - Radzen.WaitingIntervalId = setInterval(function() { - if (timerObj == null || timerObj[0] == null) { - clearInterval(Radzen.WaitingIntervalId); - } else { - var time = new Date(new Date().getTime() - timerStart); - timerObj[0].innerHTML = Math.floor(time / 1000) + "." + Math.floor((time % 1000) / 100); - } - }, - 100); - }, - 100); - }, - closeWaiting: function() { - document.body.classList.remove('no-scroll'); - if (Radzen.WaitingIntervalId != null) { - clearInterval(Radzen.WaitingIntervalId); - Radzen.WaitingIntervalId = null; + throw 'Invalid value'; + } + + minValue = ensurevalue(minValue); + maxValue = ensurevalue(maxValue); + minNextValue = ensurevalue(minNextValue); + maxNextValue = ensurevalue(maxNextValue); + + Radzen[el] = { + clientPos: clientPos, + panePerc: parseFloat(panePerc), + paneNextPerc: isFinite(parseFloat(paneNextPerc)) ? parseFloat(paneNextPerc) : 0, + paneLength: paneLength, + paneNextLength: isFinite(paneNextLength) ? paneNextLength : 0, + mouseUpHandler: function (e) { + if (Radzen[el]) { + splitter.invokeMethodAsync( + 'RadzenSplitter.OnPaneResized', + parseInt(pane.getAttribute('data-index')), + parseFloat(pane.style.flexBasis), + paneNext ? parseInt(paneNext.getAttribute('data-index')) : null, + paneNext ? parseFloat(paneNext.style.flexBasis) : null + ); + + document.removeEventListener('pointerup', Radzen[el].mouseUpHandler); + document.removeEventListener('pointermove', Radzen[el].mouseMoveHandler); + el.removeEventListener('touchmove', preventDefaultAndStopPropagation); + Radzen[el] = null; } - }, - toggleDictation: function (componentRef, language) { - function start() { - const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; + }, + mouseMoveHandler: function (e) { + if (Radzen[el]) { - if (!SpeechRecognition) { - return; - } + splitter.invokeMethodAsync( + 'RadzenSplitter.OnPaneResizing' + ); - radzenRecognition = new SpeechRecognition(); - radzenRecognition.componentRef = componentRef; - radzenRecognition.continuous = true; + var spacePerc = Radzen[el].panePerc + Radzen[el].paneNextPerc; + var spaceLength = Radzen[el].paneLength + Radzen[el].paneNextLength; - if (language) { - radzenRecognition.lang = language; - } + var length = (Radzen[el].paneLength - + (isHOrientation && Radzen.isRTL(e.target) ? -1 : 1) * (Radzen[el].clientPos - (isHOrientation ? e.clientX : e.clientY))); - radzenRecognition.onresult = function (event) { - if (event.results.length < 1) { - return; - } + if (length > spaceLength) + length = spaceLength; - let current = event.results[event.results.length - 1][0] - let result = current.transcript; + if (minValue && length < minValue) length = minValue; + if (maxValue && length > maxValue) length = maxValue; - componentRef.invokeMethodAsync("OnResult", result); - }; - radzenRecognition.onend = function (event) { - componentRef.invokeMethodAsync("StopRecording"); - radzenRecognition = null; - }; - radzenRecognition.start(); + if (paneNext) { + var nextSpace = spaceLength - length; + if (minNextValue && nextSpace < minNextValue) length = spaceLength - minNextValue; + if (maxNextValue && nextSpace > maxNextValue) length = spaceLength + maxNextValue; + } + + var perc = length / Radzen[el].paneLength; + if (!isFinite(perc)) { + perc = 1; + Radzen[el].panePerc = 0.1; + Radzen[el].paneLength = isHOrientation + ? pane.getBoundingClientRect().width + : pane.getBoundingClientRect().height; + } + + var newPerc = Radzen[el].panePerc * perc; + if (newPerc < 0) newPerc = 0; + if (newPerc > 100) newPerc = 100; + + pane.style.flexBasis = newPerc + '%'; + if (paneNext) + paneNext.style.flexBasis = (spacePerc - newPerc) + '%'; + } + }, + touchMoveHandler: function (e) { + if (e.targetTouches[0]) { + Radzen[el].mouseMoveHandler(e.targetTouches[0]); } + } + }; - if (radzenRecognition) { - if (radzenRecognition.componentRef._id != componentRef._id) { - radzenRecognition.addEventListener('end', start); - } - radzenRecognition.stop(); + const preventDefaultAndStopPropagation = (ev) => { + ev.preventDefault(); + ev.stopPropagation(); + }; + document.addEventListener('pointerup', Radzen[el].mouseUpHandler); + document.addEventListener('pointermove', Radzen[el].mouseMoveHandler); + el.addEventListener('touchmove', preventDefaultAndStopPropagation, { passive: false }); + }, + resizeSplitter(id, e) { + var el = document.getElementById(id); + if (el && Radzen[el]) { + Radzen[el].mouseMoveHandler(e); + Radzen[el].mouseUpHandler(e); + } + }, + openWaiting: function () { + if (document.documentElement.scrollHeight > document.documentElement.clientHeight) { + document.body.classList.add('no-scroll'); + } + if (Radzen.WaitingIntervalId != null) { + clearInterval(Radzen.WaitingIntervalId); + } + + setTimeout(function () { + var timerObj = document.getElementsByClassName('rz-waiting-timer'); + if (timerObj.length == 0) return; + var timerStart = new Date().getTime(); + Radzen.WaitingIntervalId = setInterval(function () { + if (timerObj == null || timerObj[0] == null) { + clearInterval(Radzen.WaitingIntervalId); } else { - start(); + var time = new Date(new Date().getTime() - timerStart); + timerObj[0].innerHTML = Math.floor(time / 1000) + "." + Math.floor((time % 1000) / 100); } + }, + 100); }, - openChartTooltip: function (chart, x, y, id, instance, callback) { - Radzen.closeTooltip(id); + 100); + }, + closeWaiting: function () { + document.body.classList.remove('no-scroll'); + if (Radzen.WaitingIntervalId != null) { + clearInterval(Radzen.WaitingIntervalId); + Radzen.WaitingIntervalId = null; + } + }, + toggleDictation: function (componentRef, language) { + function start() { + const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; - var chartRect = chart.getBoundingClientRect(); - x = Math.max(2, chartRect.left + x); - y = Math.max(2, chartRect.top + y); - Radzen.openPopup(chart, id, false, null, x, y, instance, callback, true, false, false); + if (!SpeechRecognition) { + return; + } - var popup = document.getElementById(id); - if (!popup) { - return; - } - var tooltipContent = popup.children[0]; - var tooltipContentRect = tooltipContent.getBoundingClientRect(); - var tooltipContentClassName = 'rz-top-chart-tooltip'; - if (y - tooltipContentRect.height < 0) { - tooltipContentClassName = 'rz-bottom-chart-tooltip'; + radzenRecognition = new SpeechRecognition(); + radzenRecognition.componentRef = componentRef; + radzenRecognition.continuous = true; + + if (language) { + radzenRecognition.lang = language; + } + + radzenRecognition.onresult = function (event) { + if (event.results.length < 1) { + return; } - tooltipContent.classList.remove('rz-top-chart-tooltip'); - tooltipContent.classList.remove('rz-bottom-chart-tooltip'); - tooltipContent.classList.add(tooltipContentClassName); + + let current = event.results[event.results.length - 1][0] + let result = current.transcript; + + componentRef.invokeMethodAsync("OnResult", result); + }; + radzenRecognition.onend = function (event) { + componentRef.invokeMethodAsync("StopRecording"); + radzenRecognition = null; + }; + radzenRecognition.start(); + } + + if (radzenRecognition) { + if (radzenRecognition.componentRef._id != componentRef._id) { + radzenRecognition.addEventListener('end', start); + } + radzenRecognition.stop(); + } else { + start(); + } + }, + openChartTooltip: function (chart, x, y, id, instance, callback) { + Radzen.closeTooltip(id); + + var chartRect = chart.getBoundingClientRect(); + x = Math.max(2, chartRect.left + x); + y = Math.max(2, chartRect.top + y); + Radzen.openPopup(chart, id, false, null, x, y, instance, callback, true, false, false); + + var popup = document.getElementById(id); + if (!popup) { + return; + } + var tooltipContent = popup.children[0]; + var tooltipContentRect = tooltipContent.getBoundingClientRect(); + var tooltipContentClassName = 'rz-top-chart-tooltip'; + if (y - tooltipContentRect.height < 0) { + tooltipContentClassName = 'rz-bottom-chart-tooltip'; } + tooltipContent.classList.remove('rz-top-chart-tooltip'); + tooltipContent.classList.remove('rz-bottom-chart-tooltip'); + tooltipContent.classList.add(tooltipContentClassName); + } }; From ef1d645a8ca6f74fcafdad2306bcb77cbf913c67 Mon Sep 17 00:00:00 2001 From: Dmitrii Botov Date: Mon, 9 Dec 2024 02:56:26 +0400 Subject: [PATCH 2/3] code clean up --- Radzen.Blazor/wwwroot/Radzen.Blazor.js | 2156 ++++++++++++------------ 1 file changed, 1078 insertions(+), 1078 deletions(-) diff --git a/Radzen.Blazor/wwwroot/Radzen.Blazor.js b/Radzen.Blazor/wwwroot/Radzen.Blazor.js index 66cbdbf5bfc..12501118658 100644 --- a/Radzen.Blazor/wwwroot/Radzen.Blazor.js +++ b/Radzen.Blazor/wwwroot/Radzen.Blazor.js @@ -19,7 +19,7 @@ if (!Element.prototype.closest) { if (document.fonts && document.body) { document.body.classList.add('rz-icons-loading'); document.fonts.load('16px Material Symbols').then(() => { - document.body.classList.remove('rz-icons-loading'); + document.body.classList.remove('rz-icons-loading'); }) } @@ -28,129 +28,129 @@ var rejectCallbacks = []; var radzenRecognition; window.Radzen = { - isRTL: function (el) { - return el && getComputedStyle(el).direction == 'rtl'; - }, - throttle: function (callback, delay) { - var timeout = null; - return function () { - var args = arguments; - var ctx = this; - if (!timeout) { - timeout = setTimeout(function () { - callback.apply(ctx, args); - timeout = null; - }, delay); - } - }; - }, - mask: function (id, mask, pattern, characterPattern) { - var el = document.getElementById(id); - if (el) { - var format = function (value, mask, pattern, characterPattern) { - var chars = !characterPattern ? value.replace(new RegExp(pattern, "g"), "").split('') : value.match(new RegExp(characterPattern, "g")); - var count = 0; - - var formatted = ''; - for (var i = 0; i < mask.length; i++) { - const c = mask[i]; - if (chars && chars[count]) { - if (c === '*' || c == chars[count]) { - formatted += chars[count]; - count++; - } else { - formatted += c; + isRTL: function (el) { + return el && getComputedStyle(el).direction == 'rtl'; + }, + throttle: function (callback, delay) { + var timeout = null; + return function () { + var args = arguments; + var ctx = this; + if (!timeout) { + timeout = setTimeout(function () { + callback.apply(ctx, args); + timeout = null; + }, delay); } + }; + }, + mask: function (id, mask, pattern, characterPattern) { + var el = document.getElementById(id); + if (el) { + var format = function (value, mask, pattern, characterPattern) { + var chars = !characterPattern ? value.replace(new RegExp(pattern, "g"), "").split('') : value.match(new RegExp(characterPattern, "g")); + var count = 0; + + var formatted = ''; + for (var i = 0; i < mask.length; i++) { + const c = mask[i]; + if (chars && chars[count]) { + if (c === '*' || c == chars[count]) { + formatted += chars[count]; + count++; + } else { + formatted += c; + } + } + } + return formatted; } - } - return formatted; - } - if (window.safari !== undefined) { - el.onblur = function (e) { - el.dispatchEvent(new Event('change')); - }; - } + if (window.safari !== undefined) { + el.onblur = function (e) { + el.dispatchEvent(new Event('change')); + }; + } - var start = el.selectionStart != el.value.length ? el.selectionStart : -1; - var end = el.selectionEnd != el.value.length ? el.selectionEnd : -1; + var start = el.selectionStart != el.value.length ? el.selectionStart : -1; + var end = el.selectionEnd != el.value.length ? el.selectionEnd : -1; - el.value = format(el.value, mask, pattern, characterPattern); + el.value = format(el.value, mask, pattern, characterPattern); - el.selectionStart = start != -1 ? start : el.selectionStart; - el.selectionEnd = end != -1 ? end : el.selectionEnd; - } + el.selectionStart = start != -1 ? start : el.selectionStart; + el.selectionEnd = end != -1 ? end : el.selectionEnd; + } }, addContextMenu: function (id, ref) { - var el = document.getElementById(id); - if (el) { - var handler = function (e) { - e.stopPropagation(); - e.preventDefault(); - ref.invokeMethodAsync('RadzenComponent.RaiseContextMenu', - { - ClientX: e.clientX, - ClientY: e.clientY, - ScreenX: e.screenX, - ScreenY: e.screenY, - AltKey: e.altKey, - ShiftKey: e.shiftKey, - CtrlKey: e.ctrlKey, - MetaKey: e.metaKey, - Button: e.button, - Buttons: e.buttons, - }); - return false; - }; - Radzen[id + 'contextmenu'] = handler; - el.addEventListener('contextmenu', handler, false); - } + var el = document.getElementById(id); + if (el) { + var handler = function (e) { + e.stopPropagation(); + e.preventDefault(); + ref.invokeMethodAsync('RadzenComponent.RaiseContextMenu', + { + ClientX: e.clientX, + ClientY: e.clientY, + ScreenX: e.screenX, + ScreenY: e.screenY, + AltKey: e.altKey, + ShiftKey: e.shiftKey, + CtrlKey: e.ctrlKey, + MetaKey: e.metaKey, + Button: e.button, + Buttons: e.buttons, + }); + return false; + }; + Radzen[id + 'contextmenu'] = handler; + el.addEventListener('contextmenu', handler, false); + } }, addMouseEnter: function (id, ref) { - var el = document.getElementById(id); - if (el) { - var handler = function (e) { - ref.invokeMethodAsync('RadzenComponent.RaiseMouseEnter'); - }; - Radzen[id + 'mouseenter'] = handler; - el.addEventListener('mouseenter', handler, false); - } + var el = document.getElementById(id); + if (el) { + var handler = function (e) { + ref.invokeMethodAsync('RadzenComponent.RaiseMouseEnter'); + }; + Radzen[id + 'mouseenter'] = handler; + el.addEventListener('mouseenter', handler, false); + } }, addMouseLeave: function (id, ref) { - var el = document.getElementById(id); - if (el) { - var handler = function (e) { - ref.invokeMethodAsync('RadzenComponent.RaiseMouseLeave');; - }; - Radzen[id + 'mouseleave'] = handler; - el.addEventListener('mouseleave', handler, false); - } + var el = document.getElementById(id); + if (el) { + var handler = function (e) { + ref.invokeMethodAsync('RadzenComponent.RaiseMouseLeave');; + }; + Radzen[id + 'mouseleave'] = handler; + el.addEventListener('mouseleave', handler, false); + } }, removeContextMenu: function (id) { - var el = document.getElementById(id); - if (el && Radzen[id + 'contextmenu']) { - el.removeEventListener('contextmenu', Radzen[id + 'contextmenu']); - } + var el = document.getElementById(id); + if (el && Radzen[id + 'contextmenu']) { + el.removeEventListener('contextmenu', Radzen[id + 'contextmenu']); + } }, removeMouseEnter: function (id) { - var el = document.getElementById(id); - if (el && Radzen[id + 'mouseenter']) { - el.removeEventListener('mouseenter', Radzen[id + 'mouseenter']); - } + var el = document.getElementById(id); + if (el && Radzen[id + 'mouseenter']) { + el.removeEventListener('mouseenter', Radzen[id + 'mouseenter']); + } }, removeMouseLeave: function (id) { - var el = document.getElementById(id); - if (el && Radzen[id + 'mouseleave']) { - el.removeEventListener('mouseleave', Radzen[id + 'mouseleave']); - } + var el = document.getElementById(id); + if (el && Radzen[id + 'mouseleave']) { + el.removeEventListener('mouseleave', Radzen[id + 'mouseleave']); + } }, adjustDataGridHeader: function (scrollableHeader, scrollableBody) { if (scrollableHeader && scrollableBody) { scrollableHeader.style.cssText = scrollableBody.clientHeight < scrollableBody.scrollHeight ? 'margin-left:0px;padding-right: ' + - (scrollableBody.offsetWidth - scrollableBody.clientWidth) + - 'px' + (scrollableBody.offsetWidth - scrollableBody.clientWidth) + + 'px' : 'margin-left:0px;'; } }, @@ -166,30 +166,30 @@ window.Radzen = { } }; if (el) { - el.addEventListener('keydown', preventDefault, false); + el.addEventListener('keydown', preventDefault, false); } }, selectTab: function (id, index) { var el = document.getElementById(id); if (el && el.parentNode && el.parentNode.previousElementSibling) { - var count = el.parentNode.children.length; - for (var i = 0; i < count; i++) { - var content = el.parentNode.children[i]; - if (content) { - content.style.display = i == index ? '' : 'none'; - } - var header = el.parentNode.previousElementSibling.children[i]; - if (header) { - if (i == index) { - header.classList.add('rz-tabview-selected'); - header.classList.add('rz-state-focused'); - } - else { - header.classList.remove('rz-tabview-selected'); - header.classList.remove('rz-state-focused'); - } + var count = el.parentNode.children.length; + for (var i = 0; i < count; i++) { + var content = el.parentNode.children[i]; + if (content) { + content.style.display = i == index ? '' : 'none'; + } + var header = el.parentNode.previousElementSibling.children[i]; + if (header) { + if (i == index) { + header.classList.add('rz-tabview-selected'); + header.classList.add('rz-state-focused'); + } + else { + header.classList.remove('rz-tabview-selected'); + header.classList.remove('rz-state-focused'); + } + } } - } } }, loadGoogleMaps: function (defaultView, apiKey, resolve, reject, language) { @@ -250,7 +250,7 @@ window.Radzen = { Radzen[id].instance.addListener('click', function (e) { Radzen[id].invokeMethodAsync('RadzenGoogleMap.OnMapClick', { - Position: { Lat: e.latLng.lat(), Lng: e.latLng.lng() } + Position: {Lat: e.latLng.lat(), Lng: e.latLng.lng()} }); }); @@ -259,75 +259,75 @@ window.Radzen = { }, updateMap: function (id, apiKey, zoom, center, markers, options, fitBoundsToMarkersOnUpdate, language) { var api = function () { - var defaultView = document.defaultView; + var defaultView = document.defaultView; - return new Promise(function (resolve, reject) { - if (defaultView.google && defaultView.google.maps) { - return resolve(defaultView.google); - } + return new Promise(function (resolve, reject) { + if (defaultView.google && defaultView.google.maps) { + return resolve(defaultView.google); + } - Radzen.loadGoogleMaps(defaultView, apiKey, resolve, reject, language); - }); + Radzen.loadGoogleMaps(defaultView, apiKey, resolve, reject, language); + }); }; api().then(function (google) { - let markerBounds = new google.maps.LatLngBounds(); + let markerBounds = new google.maps.LatLngBounds(); - if (Radzen[id] && Radzen[id].instance) { - if (Radzen[id].instance.markers && Radzen[id].instance.markers.length) { - for (var i = 0; i < Radzen[id].instance.markers.length; i++) { - Radzen[id].instance.markers[i].setMap(null); - } - } + if (Radzen[id] && Radzen[id].instance) { + if (Radzen[id].instance.markers && Radzen[id].instance.markers.length) { + for (var i = 0; i < Radzen[id].instance.markers.length; i++) { + Radzen[id].instance.markers[i].setMap(null); + } + } - if (markers) { - Radzen[id].instance.markers = []; + if (markers) { + Radzen[id].instance.markers = []; - markers.forEach(function (m) { - var content; + markers.forEach(function (m) { + var content; - if (m.label) { - content = document.createElement('span'); - content.innerHTML = m.label; - } + if (m.label) { + content = document.createElement('span'); + content.innerHTML = m.label; + } - var marker = new this.google.maps.marker.AdvancedMarkerElement({ - position: m.position, - title: m.title, - content: content - }); + var marker = new this.google.maps.marker.AdvancedMarkerElement({ + position: m.position, + title: m.title, + content: content + }); - marker.addListener('click', function (e) { - Radzen[id].invokeMethodAsync('RadzenGoogleMap.OnMarkerClick', { - Title: marker.title, - Label: marker.content.innerText, - Position: marker.position - }); - }); + marker.addListener('click', function (e) { + Radzen[id].invokeMethodAsync('RadzenGoogleMap.OnMarkerClick', { + Title: marker.title, + Label: marker.content.innerText, + Position: marker.position + }); + }); - marker.setMap(Radzen[id].instance); + marker.setMap(Radzen[id].instance); - Radzen[id].instance.markers.push(marker); + Radzen[id].instance.markers.push(marker); - markerBounds.extend(marker.position); - }); - } + markerBounds.extend(marker.position); + }); + } - if (zoom) { - Radzen[id].instance.setZoom(zoom); - } + if (zoom) { + Radzen[id].instance.setZoom(zoom); + } - if (center) { - Radzen[id].instance.setCenter(center); - } + if (center) { + Radzen[id].instance.setCenter(center); + } - if (options) { - Radzen[id].instance.setOptions(options); - } + if (options) { + Radzen[id].instance.setOptions(options); + } - if (markers && fitBoundsToMarkersOnUpdate) { - Radzen[id].instance.fitBounds(markerBounds); + if (markers && fitBoundsToMarkersOnUpdate) { + Radzen[id].instance.fitBounds(markerBounds); + } } - } }); }, destroyMap: function (id) { @@ -335,119 +335,119 @@ window.Radzen = { delete Radzen[id].instance; } }, - focusSecurityCode: function (el) { + focusSecurityCode: function (el) { if (!el) return; var firstInput = el.querySelector('.rz-security-code-input'); if (firstInput) { - setTimeout(function () { firstInput.focus() }, 500); + setTimeout(function () { firstInput.focus() }, 500); } - }, + }, destroySecurityCode: function (id, el) { if (!Radzen[id]) return; var inputs = el.getElementsByTagName('input'); if (Radzen[id].keyPress && Radzen[id].paste) { - for (var i = 0; i < inputs.length; i++) { - inputs[i].removeEventListener('keypress', Radzen[id].keyPress); - inputs[i].removeEventListener('keydown', Radzen[id].keyDown); - inputs[i].removeEventListener('paste', Radzen[id].paste); - } - delete Radzen[id].keyPress; - delete Radzen[id].paste; + for (var i = 0; i < inputs.length; i++) { + inputs[i].removeEventListener('keypress', Radzen[id].keyPress); + inputs[i].removeEventListener('keydown', Radzen[id].keyDown); + inputs[i].removeEventListener('paste', Radzen[id].paste); + } + delete Radzen[id].keyPress; + delete Radzen[id].paste; } Radzen[id] = null; }, createSecurityCode: function (id, ref, el, isNumber) { - if (!el || !ref) return; + if (!el || !ref) return; - var hidden = el.querySelector('input[type="hidden"]'); + var hidden = el.querySelector('input[type="hidden"]'); - Radzen[id] = {}; + Radzen[id] = {}; - Radzen[id].inputs = [...el.querySelectorAll('.rz-security-code-input')]; + Radzen[id].inputs = [...el.querySelectorAll('.rz-security-code-input')]; - Radzen[id].paste = function (e) { - if (e.clipboardData) { - var value = e.clipboardData.getData('text'); + Radzen[id].paste = function (e) { + if (e.clipboardData) { + var value = e.clipboardData.getData('text'); - if (value) { - for (var i = 0; i < value.length; i++) { - if (isNumber && isNaN(+value[i])) { - continue; - } - Radzen[id].inputs[i].value = value[i]; - } - - var code = Radzen[id].inputs.map(i => i.value).join('').trim(); - hidden.value = code; + if (value) { + for (var i = 0; i < value.length; i++) { + if (isNumber && isNaN(+value[i])) { + continue; + } + Radzen[id].inputs[i].value = value[i]; + } - ref.invokeMethodAsync('RadzenSecurityCode.OnValueChange', code); + var code = Radzen[id].inputs.map(i => i.value).join('').trim(); + hidden.value = code; - Radzen[id].inputs[Radzen[id].inputs.length - 1].focus(); - } + ref.invokeMethodAsync('RadzenSecurityCode.OnValueChange', code); - e.preventDefault(); - } - } - Radzen[id].keyPress = function (e) { - var keyCode = e.data ? e.data.charCodeAt(0) : e.which; - var ch = e.data || String.fromCharCode(e.which); + Radzen[id].inputs[Radzen[id].inputs.length - 1].focus(); + } - if (e.metaKey || - e.ctrlKey || - keyCode == 9 || - keyCode == 8 || - keyCode == 13 - ) { - return; + e.preventDefault(); + } } + Radzen[id].keyPress = function (e) { + var keyCode = e.data ? e.data.charCodeAt(0) : e.which; + var ch = e.data || String.fromCharCode(e.which); + + if (e.metaKey || + e.ctrlKey || + keyCode == 9 || + keyCode == 8 || + keyCode == 13 + ) { + return; + } - if (isNumber && (keyCode < 48 || keyCode > 57)) { - e.preventDefault(); - return; - } + if (isNumber && (keyCode < 48 || keyCode > 57)) { + e.preventDefault(); + return; + } - if (e.currentTarget.value == ch) { - return; - } + if (e.currentTarget.value == ch) { + return; + } - e.currentTarget.value = ch; + e.currentTarget.value = ch; - var value = Radzen[id].inputs.map(i => i.value).join('').trim(); - hidden.value = value; + var value = Radzen[id].inputs.map(i => i.value).join('').trim(); + hidden.value = value; - ref.invokeMethodAsync('RadzenSecurityCode.OnValueChange', value); + ref.invokeMethodAsync('RadzenSecurityCode.OnValueChange', value); - var index = Radzen[id].inputs.indexOf(e.currentTarget); - if (index < Radzen[id].inputs.length - 1) { - Radzen[id].inputs[index + 1].focus(); + var index = Radzen[id].inputs.indexOf(e.currentTarget); + if (index < Radzen[id].inputs.length - 1) { + Radzen[id].inputs[index + 1].focus(); + } } - } - Radzen[id].keyDown = function (e) { - var keyCode = e.data ? e.data.charCodeAt(0) : e.which; - if (keyCode == 8) { - e.currentTarget.value = ''; + Radzen[id].keyDown = function (e) { + var keyCode = e.data ? e.data.charCodeAt(0) : e.which; + if (keyCode == 8) { + e.currentTarget.value = ''; - var value = Radzen[id].inputs.map(i => i.value).join('').trim(); - hidden.value = value; + var value = Radzen[id].inputs.map(i => i.value).join('').trim(); + hidden.value = value; - ref.invokeMethodAsync('RadzenSecurityCode.OnValueChange', value); + ref.invokeMethodAsync('RadzenSecurityCode.OnValueChange', value); - var index = Radzen[id].inputs.indexOf(e.currentTarget); - if (index > 0) { - Radzen[id].inputs[index - 1].focus(); - } + var index = Radzen[id].inputs.indexOf(e.currentTarget); + if (index > 0) { + Radzen[id].inputs[index - 1].focus(); + } + } } - } - for (var i = 0; i < Radzen[id].inputs.length; i++) { - Radzen[id].inputs[i].addEventListener(navigator.userAgent.match(/Android/i) ? 'textInput' : 'keypress', Radzen[id].keyPress); - Radzen[id].inputs[i].addEventListener(navigator.userAgent.match(/Android/i) ? 'textInput' : 'keydown', Radzen[id].keyDown); - Radzen[id].inputs[i].addEventListener('paste', Radzen[id].paste); - } + for (var i = 0; i < Radzen[id].inputs.length; i++) { + Radzen[id].inputs[i].addEventListener(navigator.userAgent.match(/Android/i) ? 'textInput' : 'keypress', Radzen[id].keyPress); + Radzen[id].inputs[i].addEventListener(navigator.userAgent.match(/Android/i) ? 'textInput' : 'keydown', Radzen[id].keyDown); + Radzen[id].inputs[i].addEventListener('paste', Radzen[id].paste); + } }, createSlider: function ( id, @@ -473,12 +473,12 @@ window.Radzen = { var offsetX = e.targetTouches && e.targetTouches[0] ? e.targetTouches[0].pageX - e.target.getBoundingClientRect().left - : e.pageX - handle.getBoundingClientRect().left; + : e.pageX - handle.getBoundingClientRect().left; var offsetY = e.targetTouches && e.targetTouches[0] ? e.targetTouches[0].pageY - e.target.getBoundingClientRect().top - : e.pageY - handle.getBoundingClientRect().top; + : e.pageY - handle.getBoundingClientRect().top; var percent = isVertical ? (parent.offsetHeight - handle.offsetTop - offsetY) / parent.offsetHeight : (Radzen.isRTL(handle) ? parent.offsetWidth - handle.offsetLeft - offsetX : handle.offsetLeft + offsetX) / parent.offsetWidth; @@ -489,7 +489,7 @@ window.Radzen = { percent = 0; } - var newValue = percent * (max - min) + min; + var newValue = percent * (max - min) + min; if ( slider.canChange && @@ -525,7 +525,7 @@ window.Radzen = { var offsetX = e.targetTouches && e.targetTouches[0] ? e.targetTouches[0].pageX - e.target.getBoundingClientRect().left - : e.offsetX; + : e.offsetX; var percent = offsetX / parent.offsetWidth; @@ -581,8 +581,8 @@ window.Radzen = { }, prepareDrag: function (el) { if (el) { - el.ondragover = function (e) { e.preventDefault(); }; - el.ondragstart = function (e) { e.dataTransfer.setData('', e.target.id); }; + el.ondragover = function (e) { e.preventDefault(); }; + el.ondragstart = function (e) { e.dataTransfer.setData('', e.target.id); }; } }, focusElement: function (elementId) { @@ -597,9 +597,9 @@ window.Radzen = { scrollIntoViewIfNeeded: function (ref, selector) { var el = selector ? ref.getElementsByClassName(selector)[0] : ref; if (el && el.scrollIntoViewIfNeeded) { - el.scrollIntoViewIfNeeded(); + el.scrollIntoViewIfNeeded(); } else if (el && el.scrollIntoView) { - el.scrollIntoView(); + el.scrollIntoView(); } }, selectListItem: function (input, ul, index) { @@ -621,7 +621,7 @@ window.Radzen = { ul.nextSelectedIndex <= childNodes.length - 1 ) { childNodes[ul.nextSelectedIndex].classList.add('rz-state-highlight'); - childNodes[ul.nextSelectedIndex].scrollIntoView({ block: 'nearest' }); + childNodes[ul.nextSelectedIndex].scrollIntoView({block:'nearest'}); } }, focusListItem: function (input, ul, isDown, startIndex) { @@ -636,17 +636,17 @@ window.Radzen = { ul.nextSelectedIndex = startIndex; if (isDown) { - while (ul.nextSelectedIndex < childNodes.length - 1) { - ul.nextSelectedIndex++; - if (!childNodes[ul.nextSelectedIndex].classList.contains('rz-state-disabled')) - break; - } + while (ul.nextSelectedIndex < childNodes.length - 1) { + ul.nextSelectedIndex++; + if (!childNodes[ul.nextSelectedIndex].classList.contains('rz-state-disabled')) + break; + } } else { - while (ul.nextSelectedIndex >= 0) { - ul.nextSelectedIndex--; - if (!childNodes[ul.nextSelectedIndex] || !childNodes[ul.nextSelectedIndex].classList.contains('rz-state-disabled')) - break; - } + while (ul.nextSelectedIndex >= 0) { + ul.nextSelectedIndex--; + if (!childNodes[ul.nextSelectedIndex] || !childNodes[ul.nextSelectedIndex].classList.contains('rz-state-disabled')) + break; + } } var highlighted = ul.querySelectorAll('.rz-state-highlight'); @@ -674,9 +674,9 @@ window.Radzen = { var thead = table.getElementsByTagName("thead")[0]; var highlightedCells = thead.querySelectorAll('.rz-state-focused'); if (highlightedCells.length) { - for (var i = 0; i < highlightedCells.length; i++) { - highlightedCells[i].classList.remove('rz-state-focused'); - } + for (var i = 0; i < highlightedCells.length; i++) { + highlightedCells[i].classList.remove('rz-state-focused'); + } } }, focusTableRow: function (gridId, key, rowIndex, cellIndex, isVirtual) { @@ -690,109 +690,109 @@ window.Radzen = { var rows = (cellIndex != null && thead && thead.rows && thead.rows.length ? [...thead.rows] : []).concat(tbody && tbody.rows && tbody.rows.length ? [...tbody.rows] : []); if (isVirtual && (key == 'ArrowUp' || key == 'ArrowDown' || key == 'PageUp' || key == 'PageDown' || key == 'Home' || key == 'End')) { - if (rowIndex == 0 && (key == 'End' || key == 'PageDown')) { - var highlightedCells = thead.querySelectorAll('.rz-state-focused'); - if (highlightedCells.length) { - for (var i = 0; i < highlightedCells.length; i++) { - highlightedCells[i].classList.remove('rz-state-focused'); - } + if (rowIndex == 0 && (key == 'End' || key == 'PageDown')) { + var highlightedCells = thead.querySelectorAll('.rz-state-focused'); + if (highlightedCells.length) { + for (var i = 0; i < highlightedCells.length; i++) { + highlightedCells[i].classList.remove('rz-state-focused'); + } + } + } + if (key == 'ArrowUp' || key == 'ArrowDown' || key == 'PageUp' || key == 'PageDown') { + var rowHeight = rows[rows.length - 1] ? rows[rows.length - 1].offsetHeight : 40; + var factor = key == 'PageUp' || key == 'PageDown' ? 10 : 1; + table.parentNode.scrollTop = table.parentNode.scrollTop + (factor * (key == 'ArrowDown' || key == 'PageDown' ? rowHeight : -rowHeight)); + } + else { + table.parentNode.scrollTop = key == 'Home' ? 0 : table.parentNode.scrollHeight; } - } - if (key == 'ArrowUp' || key == 'ArrowDown' || key == 'PageUp' || key == 'PageDown') { - var rowHeight = rows[rows.length - 1] ? rows[rows.length - 1].offsetHeight : 40; - var factor = key == 'PageUp' || key == 'PageDown' ? 10 : 1; - table.parentNode.scrollTop = table.parentNode.scrollTop + (factor * (key == 'ArrowDown' || key == 'PageDown' ? rowHeight : -rowHeight)); - } - else { - table.parentNode.scrollTop = key == 'Home' ? 0 : table.parentNode.scrollHeight; - } } table.nextSelectedIndex = rowIndex || 0; table.nextSelectedCellIndex = cellIndex || 0; if (key == 'ArrowDown') { - while (table.nextSelectedIndex < rows.length - 1) { - table.nextSelectedIndex++; - if (!rows[table.nextSelectedIndex] || !rows[table.nextSelectedIndex].classList.contains('rz-state-disabled')) - break; - } + while (table.nextSelectedIndex < rows.length - 1) { + table.nextSelectedIndex++; + if (!rows[table.nextSelectedIndex] || !rows[table.nextSelectedIndex].classList.contains('rz-state-disabled')) + break; + } } else if (key == 'ArrowUp') { - while (table.nextSelectedIndex > 0) { - table.nextSelectedIndex--; - if (!rows[table.nextSelectedIndex] || !rows[table.nextSelectedIndex].classList.contains('rz-state-disabled')) - break; - } + while (table.nextSelectedIndex > 0) { + table.nextSelectedIndex--; + if (!rows[table.nextSelectedIndex] || !rows[table.nextSelectedIndex].classList.contains('rz-state-disabled')) + break; + } } else if (key == 'ArrowRight') { - while (table.nextSelectedCellIndex < rows[table.nextSelectedIndex].cells.length - 1) { - table.nextSelectedCellIndex++; - if (!rows[table.nextSelectedIndex] || !rows[table.nextSelectedIndex].cells[table.nextSelectedCellIndex] || !rows[table.nextSelectedIndex].cells[table.nextSelectedCellIndex].classList.contains('rz-state-disabled')) - break; - } + while (table.nextSelectedCellIndex < rows[table.nextSelectedIndex].cells.length - 1) { + table.nextSelectedCellIndex++; + if (!rows[table.nextSelectedIndex] || !rows[table.nextSelectedIndex].cells[table.nextSelectedCellIndex] || !rows[table.nextSelectedIndex].cells[table.nextSelectedCellIndex].classList.contains('rz-state-disabled')) + break; + } } else if (key == 'ArrowLeft') { - while (table.nextSelectedCellIndex > 0) { - table.nextSelectedCellIndex--; - if (!rows[table.nextSelectedIndex] || !rows[table.nextSelectedIndex].cells[table.nextSelectedCellIndex] || !rows[table.nextSelectedIndex].cells[table.nextSelectedCellIndex].classList.contains('rz-state-disabled')) - break; - } + while (table.nextSelectedCellIndex > 0) { + table.nextSelectedCellIndex--; + if (!rows[table.nextSelectedIndex] || !rows[table.nextSelectedIndex].cells[table.nextSelectedCellIndex] || !rows[table.nextSelectedIndex].cells[table.nextSelectedCellIndex].classList.contains('rz-state-disabled')) + break; + } } else if (isVirtual && (key == 'PageDown' || key == 'End')) { - table.nextSelectedIndex = rows.length - 1; + table.nextSelectedIndex = rows.length - 1; } else if (isVirtual && (key == 'PageUp' || key == 'Home')) { - table.nextSelectedIndex = 1; + table.nextSelectedIndex = 1; } if (key == 'ArrowLeft' || key == 'ArrowRight' || (key == 'ArrowUp' && cellIndex != null && table.nextSelectedIndex == 0 && table.parentNode.scrollTop == 0)) { - var highlightedCells = rows[table.nextSelectedIndex].querySelectorAll('.rz-state-focused'); - if (highlightedCells.length) { - for (var i = 0; i < highlightedCells.length; i++) { - highlightedCells[i].classList.remove('rz-state-focused'); + var highlightedCells = rows[table.nextSelectedIndex].querySelectorAll('.rz-state-focused'); + if (highlightedCells.length) { + for (var i = 0; i < highlightedCells.length; i++) { + highlightedCells[i].classList.remove('rz-state-focused'); + } } - } - if ( - table.nextSelectedCellIndex >= 0 && - table.nextSelectedCellIndex <= rows[table.nextSelectedIndex].cells.length - 1 - ) { - var cell = rows[table.nextSelectedIndex].cells[table.nextSelectedCellIndex]; + if ( + table.nextSelectedCellIndex >= 0 && + table.nextSelectedCellIndex <= rows[table.nextSelectedIndex].cells.length - 1 + ) { + var cell = rows[table.nextSelectedIndex].cells[table.nextSelectedCellIndex]; - if (!cell.classList.contains('rz-state-focused')) { - cell.classList.add('rz-state-focused'); - if (!isVirtual && table.parentElement.scrollWidth > table.parentElement.clientWidth) { - Radzen.scrollIntoViewIfNeeded(cell); - } + if (!cell.classList.contains('rz-state-focused')) { + cell.classList.add('rz-state-focused'); + if (!isVirtual && table.parentElement.scrollWidth > table.parentElement.clientWidth) { + Radzen.scrollIntoViewIfNeeded(cell); + } + } } - } } else if (key == 'ArrowDown' || key == 'ArrowUp') { - var highlighted = table.querySelectorAll('.rz-state-focused'); - if (highlighted.length) { - for (var i = 0; i < highlighted.length; i++) { - highlighted[i].classList.remove('rz-state-focused'); + var highlighted = table.querySelectorAll('.rz-state-focused'); + if (highlighted.length) { + for (var i = 0; i < highlighted.length; i++) { + highlighted[i].classList.remove('rz-state-focused'); + } } - } - if (table.nextSelectedIndex >= 0 && - table.nextSelectedIndex <= rows.length - 1 - ) { - var row = rows[table.nextSelectedIndex]; + if (table.nextSelectedIndex >= 0 && + table.nextSelectedIndex <= rows.length - 1 + ) { + var row = rows[table.nextSelectedIndex]; - if (!row.classList.contains('rz-state-focused')) { - row.classList.add('rz-state-focused'); - if (!isVirtual && table.parentElement.scrollHeight > table.parentElement.clientHeight) { - Radzen.scrollIntoViewIfNeeded(row); - } + if (!row.classList.contains('rz-state-focused')) { + row.classList.add('rz-state-focused'); + if (!isVirtual && table.parentElement.scrollHeight > table.parentElement.clientHeight) { + Radzen.scrollIntoViewIfNeeded(row); + } + } } - } } return [table.nextSelectedIndex, table.nextSelectedCellIndex]; }, uploadInputChange: function (e, url, auto, multiple, clear, parameterName) { - if (auto) { - Radzen.upload(e.target, url, multiple, clear, parameterName); - e.target.value = ''; - } else { - Radzen.uploadChange(e.target); - } + if (auto) { + Radzen.upload(e.target, url, multiple, clear, parameterName); + e.target.value = ''; + } else { + Radzen.uploadChange(e.target); + } }, uploads: function (uploadComponent, id) { if (!Radzen.uploadComponents) { @@ -847,7 +847,7 @@ window.Radzen = { } var index = uploadComponent.files.indexOf(file) if (index != -1) { - uploadComponent.files.splice(index, 1); + uploadComponent.files.splice(index, 1); } fileInput.value = ''; }, @@ -858,7 +858,7 @@ window.Radzen = { var uploadComponent = Radzen.uploadComponents && Radzen.uploadComponents[fileInput.id]; if (!uploadComponent) { return; } if (!uploadComponent.files || clear) { - uploadComponent.files = Array.from(fileInput.files); + uploadComponent.files = Array.from(fileInput.files); } var data = new FormData(); var files = []; @@ -866,7 +866,7 @@ window.Radzen = { for (var i = 0; i < uploadComponent.files.length; i++) { var file = uploadComponent.files[i]; data.append(parameterName || (multiple ? 'files' : 'file'), file, file.name); - files.push({ Name: file.name, Size: file.size }); + files.push({Name: file.name, Size: file.size}); } var xhr = new XMLHttpRequest(); xhr.withCredentials = true; @@ -884,10 +884,10 @@ window.Radzen = { files, cancelled ).then(function (cancel) { - if (cancel) { - cancelled = true; - xhr.abort(); - } + if (cancel) { + cancelled = true; + xhr.abort(); + } }); } } @@ -901,8 +901,8 @@ window.Radzen = { if (status === 0 || (status >= 200 && status < 400)) { uploadComponent.invokeMethodAsync( 'RadzenUpload.OnComplete', - xhr.responseText, - cancelled + xhr.responseText, + cancelled ); } else { uploadComponent.invokeMethodAsync( @@ -940,10 +940,10 @@ window.Radzen = { if (value && !isNaN(+value)) { var numericValue = +value; if (min != null && numericValue >= min) { - return; + return; } if (max != null && numericValue <= max) { - return; + return; } } @@ -951,21 +951,21 @@ window.Radzen = { } }, numericOnInput: function (e, min, max, isNullable) { - var value = e.target.value; + var value = e.target.value; - if (!isNullable && value == '' && min != null) { - e.target.value = min; - } - - if (value && !isNaN(+value)) { - var numericValue = +value; - if (min != null && !isNaN(+min) && numericValue < min) { - e.target.value = min; + if (!isNullable && value == '' && min != null) { + e.target.value = min; } - if (max != null && !isNaN(+max) && numericValue > max) { - e.target.value = max; + + if (value && !isNaN(+value)) { + var numericValue = +value; + if (min != null && !isNaN(+min) && numericValue < min) { + e.target.value = min; + } + if (max != null && !isNaN(+max) && numericValue > max) { + e.target.value = max; + } } - } }, numericKeyPress: function (e, isInteger, decimalSeparator) { if ( @@ -976,15 +976,15 @@ window.Radzen = { e.keyCode == 13 ) { return; - } + } - if (e.code === 'NumpadDecimal') { - var cursorPosition = e.target.selectionEnd; - e.target.value = [e.target.value.slice(0, e.target.selectionStart), decimalSeparator, e.target.value.slice(e.target.selectionEnd)].join(''); - e.target.selectionStart = ++cursorPosition; - e.target.selectionEnd = cursorPosition; - e.preventDefault(); - return; + if (e.code === 'NumpadDecimal') { + var cursorPosition = e.target.selectionEnd; + e.target.value = [e.target.value.slice(0, e.target.selectionStart), decimalSeparator, e.target.value.slice(e.target.selectionEnd)].join(''); + e.target.selectionStart = ++cursorPosition; + e.target.selectionEnd = cursorPosition; + e.preventDefault(); + return; } var ch = String.fromCharCode(e.charCode); @@ -995,28 +995,28 @@ window.Radzen = { e.preventDefault(); }, - openContextMenu: function (x, y, id, instance, callback) { + openContextMenu: function (x,y,id, instance, callback) { Radzen.closePopup(id); Radzen.openPopup(null, id, false, null, x, y, instance, callback); setTimeout(function () { - var popup = document.getElementById(id); - if (popup) { - var menu = popup.querySelector('.rz-menu'); - if (menu) { - menu.focus(); + var popup = document.getElementById(id); + if (popup) { + var menu = popup.querySelector('.rz-menu'); + if (menu) { + menu.focus(); + } } - } }, 500); }, openTooltip: function (target, id, delay, duration, position, closeTooltipOnDocumentClick, instance, callback) { Radzen.closeTooltip(id); if (delay) { - Radzen[id + 'delay'] = setTimeout(Radzen.openPopup, delay, target, id, false, position, null, null, instance, callback, closeTooltipOnDocumentClick); + Radzen[id + 'delay'] = setTimeout(Radzen.openPopup, delay, target, id, false, position, null, null, instance, callback, closeTooltipOnDocumentClick); } else { - Radzen.openPopup(target, id, false, position, null, null, instance, callback, closeTooltipOnDocumentClick); + Radzen.openPopup(target, id, false, position, null, null, instance, callback, closeTooltipOnDocumentClick); } if (duration) { @@ -1028,47 +1028,47 @@ window.Radzen = { Radzen.closePopup(id); if (Radzen[id + 'delay']) { - clearTimeout(Radzen[id + 'delay']); + clearTimeout(Radzen[id + 'delay']); } if (Radzen[id + 'duration']) { - clearTimeout(Radzen[id + 'duration']); + clearTimeout(Radzen[id + 'duration']); } }, destroyDatePicker(id) { - var el = document.getElementById(id); - if (!el) return; + var el = document.getElementById(id); + if (!el) return; - var button = el.querySelector('.rz-datepicker-trigger'); - if (button) { - button.onclick = null; - } - var input = el.querySelector('.rz-inputtext'); - if (input) { - input.onclick = null; - } + var button = el.querySelector('.rz-datepicker-trigger'); + if (button) { + button.onclick = null; + } + var input = el.querySelector('.rz-inputtext'); + if (input) { + input.onclick = null; + } }, createDatePicker(el, popupId) { - if (!el) return; - var handler = function (e, condition) { - if (condition) { - Radzen.togglePopup(e.currentTarget.parentNode, popupId, false, null, null, true, false); - } - }; - - var input = el.querySelector('.rz-inputtext'); - var button = el.querySelector('.rz-datepicker-trigger'); - if (button) { - button.onclick = function (e) { - handler(e, !e.currentTarget.classList.contains('rz-state-disabled') && (input ? !input.classList.contains('rz-readonly') : true)); + if(!el) return; + var handler = function (e, condition) { + if (condition) { + Radzen.togglePopup(e.currentTarget.parentNode, popupId, false, null, null, true, false); + } }; - } - if (input) { - input.onclick = function (e) { - handler(e, e.currentTarget.classList.contains('rz-input-trigger') && !e.currentTarget.classList.contains('rz-readonly')); - }; - } + var input = el.querySelector('.rz-inputtext'); + var button = el.querySelector('.rz-datepicker-trigger'); + if (button) { + button.onclick = function (e) { + handler(e, !e.currentTarget.classList.contains('rz-state-disabled') && (input ? !input.classList.contains('rz-readonly') : true)); + }; + } + + if (input) { + input.onclick = function (e) { + handler(e, e.currentTarget.classList.contains('rz-input-trigger') && !e.currentTarget.classList.contains('rz-readonly')); + }; + } }, findPopup: function (id) { var popups = []; @@ -1080,25 +1080,25 @@ window.Radzen = { return popups; }, repositionPopup: function (parent, id) { - var popup = document.getElementById(id); - if (!popup) return; + var popup = document.getElementById(id); + if (!popup) return; - var rect = popup.getBoundingClientRect(); - var parentRect = parent ? parent.getBoundingClientRect() : { top: 0, bottom: 0, left: 0, right: 0, width: 0, height: 0 }; + var rect = popup.getBoundingClientRect(); + var parentRect = parent ? parent.getBoundingClientRect() : { top: 0, bottom: 0, left: 0, right: 0, width: 0, height: 0 }; - if (/Edge/.test(navigator.userAgent)) { - var scrollTop = document.body.scrollTop; - } else { - var scrollTop = document.documentElement.scrollTop; - } + if (/Edge/.test(navigator.userAgent)) { + var scrollTop = document.body.scrollTop; + } else { + var scrollTop = document.documentElement.scrollTop; + } - var top = parentRect.bottom + scrollTop; + var top = parentRect.bottom + scrollTop; - if (top + rect.height > window.innerHeight + scrollTop && parentRect.top > rect.height) { - top = parentRect.top - rect.height + scrollTop; - } + if (top + rect.height > window.innerHeight + scrollTop && parentRect.top > rect.height) { + top = parentRect.top - rect.height + scrollTop; + } - popup.style.top = top + 'px'; + popup.style.top = top + 'px'; }, openPopup: function (parent, id, syncWidth, position, x, y, instance, callback, closeOnDocumentClick = true, autoFocusFirstElement = false, disableSmartPosition = false) { var popup = document.getElementById(id); @@ -1119,20 +1119,20 @@ window.Radzen = { var top = y ? y : parentRect.bottom; var left = x ? x : parentRect.left; - if (syncWidth) { - popup.style.width = parentRect.width + 'px'; - if (!popup.style.minWidth) { - popup.minWidth = true; - popup.style.minWidth = parentRect.width + 'px'; - } + if (syncWidth) { + popup.style.width = parentRect.width + 'px'; + if (!popup.style.minWidth) { + popup.minWidth = true; + popup.style.minWidth = parentRect.width + 'px'; + } } if (window.chrome) { - var closestFrozenCell = popup.closest('.rz-frozen-cell'); - if (closestFrozenCell) { - Radzen[id + 'FZL'] = { cell: closestFrozenCell, left: closestFrozenCell.style.left }; - closestFrozenCell.style.left = ''; - } + var closestFrozenCell = popup.closest('.rz-frozen-cell'); + if (closestFrozenCell) { + Radzen[id + 'FZL'] = { cell: closestFrozenCell, left: closestFrozenCell.style.left }; + closestFrozenCell.style.left = ''; + } } popup.style.display = 'block'; @@ -1144,9 +1144,9 @@ window.Radzen = { var smartPosition = !position || position == 'bottom'; if (smartPosition && top + rect.height > window.innerHeight && parentRect.top > rect.height) { - if (disableSmartPosition !== true) { - top = parentRect.top - rect.height; - } + if (disableSmartPosition !== true) { + top = parentRect.top - rect.height; + } if (position) { top = top - 40; @@ -1155,10 +1155,10 @@ window.Radzen = { if (tooltipContent.classList.contains(tooltipContentClassName)) { tooltipContent.classList.remove(tooltipContentClassName); tooltipContent.classList.add('rz-top-tooltip-content'); - position = 'top'; - if (instance && callback) { - instance.invokeMethodAsync(callback, position); - } + position = 'top'; + if (instance && callback) { + instance.invokeMethodAsync(callback, position); + } } } } @@ -1189,7 +1189,7 @@ window.Radzen = { if (position == 'left') { left = parentRect.left - rect.width - 5; - top = parentRect.top; + top = parentRect.top; } if (position == 'right') { @@ -1207,45 +1207,45 @@ window.Radzen = { popup.style.top = top + scrollTop + 'px'; if (!popup.classList.contains('rz-overlaypanel')) { - popup.classList.add('rz-popup'); + popup.classList.add('rz-popup'); } Radzen[id] = function (e) { - var lastPopup = Radzen.popups && Radzen.popups[Radzen.popups.length - 1]; - var currentPopup = lastPopup != null && document.getElementById(lastPopup.id) || popup; - - if (lastPopup) { - currentPopup.instance = lastPopup.instance; - currentPopup.callback = lastPopup.callback; - currentPopup.parent = lastPopup.parent; - } + var lastPopup = Radzen.popups && Radzen.popups[Radzen.popups.length - 1]; + var currentPopup = lastPopup != null && document.getElementById(lastPopup.id) || popup; - if (e.type == 'contextmenu' || !e.target || !closeOnDocumentClick) return; - if (!/Android/i.test(navigator.userAgent) && - !['input', 'textarea'].includes(document.activeElement ? document.activeElement.tagName.toLowerCase() : '') && e.type == 'resize') { - Radzen.closePopup(currentPopup.id, currentPopup.instance, currentPopup.callback, e); - return; - } + if (lastPopup) { + currentPopup.instance = lastPopup.instance; + currentPopup.callback = lastPopup.callback; + currentPopup.parent = lastPopup.parent; + } - var closestLink = e.target.closest && (e.target.closest('.rz-link') || e.target.closest('.rz-navigation-item-link')); - if (closestLink && closestLink.closest && closestLink.closest('a')) { - if (Radzen.closeAllPopups) { - Radzen.closeAllPopups(); + if(e.type == 'contextmenu' || !e.target || !closeOnDocumentClick) return; + if (!/Android/i.test(navigator.userAgent) && + !['input', 'textarea'].includes(document.activeElement ? document.activeElement.tagName.toLowerCase() : '') && e.type == 'resize') { + Radzen.closePopup(currentPopup.id, currentPopup.instance, currentPopup.callback, e); + return; } - } - if (currentPopup.parent) { - if (e.type == 'mousedown' && !currentPopup.parent.contains(e.target) && !currentPopup.contains(e.target)) { - Radzen.closePopup(currentPopup.id, currentPopup.instance, currentPopup.callback, e); + + var closestLink = e.target.closest && (e.target.closest('.rz-link') || e.target.closest('.rz-navigation-item-link')); + if (closestLink && closestLink.closest && closestLink.closest('a')) { + if (Radzen.closeAllPopups) { + Radzen.closeAllPopups(); + } } - } else { - if (e.target.nodeType && !currentPopup.contains(e.target)) { - Radzen.closePopup(currentPopup.id, currentPopup.instance, currentPopup.callback, e); + if (currentPopup.parent) { + if (e.type == 'mousedown' && !currentPopup.parent.contains(e.target) && !currentPopup.contains(e.target)) { + Radzen.closePopup(currentPopup.id, currentPopup.instance, currentPopup.callback, e); + } + } else { + if (e.target.nodeType && !currentPopup.contains(e.target)) { + Radzen.closePopup(currentPopup.id, currentPopup.instance, currentPopup.callback, e); + } } - } }; if (!Radzen.popups) { - Radzen.popups = []; + Radzen.popups = []; } Radzen.popups.push({ id, instance, callback, parent }); @@ -1258,44 +1258,44 @@ window.Radzen = { var p = parent; while (p && p != document.body) { - if (p.scrollWidth > p.clientWidth || p.scrollHeight > p.clientHeight) { - p.removeEventListener('scroll', Radzen.closeAllPopups); - p.addEventListener('scroll', Radzen.closeAllPopups); - } - p = p.parentElement; + if (p.scrollWidth > p.clientWidth || p.scrollHeight > p.clientHeight) { + p.removeEventListener('scroll', Radzen.closeAllPopups); + p.addEventListener('scroll', Radzen.closeAllPopups); + } + p = p.parentElement; } if (!parent) { - document.removeEventListener('contextmenu', Radzen[id]); - document.addEventListener('contextmenu', Radzen[id]); + document.removeEventListener('contextmenu', Radzen[id]); + document.addEventListener('contextmenu', Radzen[id]); } if (autoFocusFirstElement) { - setTimeout(function () { - popup.removeEventListener('keydown', Radzen.focusTrap); - popup.addEventListener('keydown', Radzen.focusTrap); - - var focusable = Radzen.getFocusableElements(popup); - var firstFocusable = focusable[0]; - if (firstFocusable) { - firstFocusable.focus(); - } - }, 500); + setTimeout(function () { + popup.removeEventListener('keydown', Radzen.focusTrap); + popup.addEventListener('keydown', Radzen.focusTrap); + + var focusable = Radzen.getFocusableElements(popup); + var firstFocusable = focusable[0]; + if (firstFocusable) { + firstFocusable.focus(); + } + }, 500); } }, closeAllPopups: function (e, id) { if (!Radzen.popups) return; var el = e && e.target || id && documentElement.getElementById(id); var popups = Radzen.popups; - for (var i = 0; i < popups.length; i++) { - var p = popups[i]; + for (var i = 0; i < popups.length; i++) { + var p = popups[i]; - var closestPopup = el && el.closest && (el.closest('.rz-popup') || el.closest('.rz-overlaypanel')); - if (closestPopup && closestPopup != p) { - return; - } + var closestPopup = el && el.closest && (el.closest('.rz-popup') || el.closest('.rz-overlaypanel')); + if (closestPopup && closestPopup != p) { + return; + } - Radzen.closePopup(p.id, p.instance, p.callback, e); + Radzen.closePopup(p.id, p.instance, p.callback, e); } Radzen.popups = []; }, @@ -1303,23 +1303,23 @@ window.Radzen = { var popup = document.getElementById(id); if (!popup) return; if (popup.style.display == 'none') { - var popups = Radzen.findPopup(id); - if (popups.length > 1) { - for (var i = 0; i < popups.length; i++) { - if (popups[i].style.display == 'none') { - popups[i].parentNode.removeChild(popups[i]); - } else { - popup = popups[i]; - } + var popups = Radzen.findPopup(id); + if (popups.length > 1) { + for (var i = 0; i < popups.length; i++) { + if (popups[i].style.display == 'none') { + popups[i].parentNode.removeChild(popups[i]); + } else { + popup = popups[i]; + } + } + } else { + return; } - } else { - return; - } } if (popup) { if (popup.minWidth) { - popup.style.minWidth = ''; + popup.style.minWidth = ''; } if (window.chrome && Radzen[id + 'FZL']) { @@ -1334,35 +1334,35 @@ window.Radzen = { Radzen[id] = null; if (instance && callback) { - if (callback.includes('RadzenTooltip')) { - instance.invokeMethodAsync(callback, null); - } else { - instance.invokeMethodAsync(callback); - } + if (callback.includes('RadzenTooltip')) { + instance.invokeMethodAsync(callback, null); + } else { + instance.invokeMethodAsync(callback); + } } Radzen.popups = (Radzen.popups || []).filter(function (obj) { - return obj.id !== id; + return obj.id !== id; }); if (Radzen.activeElement && Radzen.activeElement == document.activeElement || - Radzen.activeElement && document.activeElement == document.body || - Radzen.activeElement && document.activeElement && - (document.activeElement.classList.contains('rz-dropdown-filter') || document.activeElement.classList.contains('rz-lookup-search-input'))) { - setTimeout(function () { - if (e && e.target && e.target.tabIndex != -1) { - Radzen.activeElement = e.target; - } - if (Radzen.activeElement) { - Radzen.activeElement.focus(); - } - Radzen.activeElement = null; - }, 100); + Radzen.activeElement && document.activeElement == document.body || + Radzen.activeElement && document.activeElement && + (document.activeElement.classList.contains('rz-dropdown-filter') || document.activeElement.classList.contains('rz-lookup-search-input'))) { + setTimeout(function () { + if (e && e.target && e.target.tabIndex != -1) { + Radzen.activeElement = e.target; + } + if (Radzen.activeElement) { + Radzen.activeElement.focus(); + } + Radzen.activeElement = null; + }, 100); } }, popupOpened: function (id) { var popup = document.getElementById(id); if (popup) { - return popup.style.display != 'none'; + return popup.style.display != 'none'; } return false; }, @@ -1386,56 +1386,56 @@ window.Radzen = { var scrollLeft = (e.target.scrollLeft ? '-' + e.target.scrollLeft : 0) + 'px'; - e.target.previousElementSibling.style.marginLeft = scrollLeft; - e.target.previousElementSibling.firstElementChild.style.paddingRight = - e.target.clientHeight < e.target.scrollHeight ? (e.target.offsetWidth - e.target.clientWidth) + 'px' : '0px'; + e.target.previousElementSibling.style.marginLeft = scrollLeft; + e.target.previousElementSibling.firstElementChild.style.paddingRight = + e.target.clientHeight < e.target.scrollHeight ? (e.target.offsetWidth - e.target.clientWidth) + 'px' : '0px'; if (e.target.nextElementSibling) { - e.target.nextElementSibling.style.marginLeft = scrollLeft; - e.target.nextElementSibling.firstElementChild.style.paddingRight = - e.target.clientHeight < e.target.scrollHeight ? (e.target.offsetWidth - e.target.clientWidth) + 'px' : '0px'; + e.target.nextElementSibling.style.marginLeft = scrollLeft; + e.target.nextElementSibling.firstElementChild.style.paddingRight = + e.target.clientHeight < e.target.scrollHeight ? (e.target.offsetWidth - e.target.clientWidth) + 'px' : '0px'; } for (var i = 0; i < document.body.children.length; i++) { - if (document.body.children[i].classList.contains('rz-overlaypanel')) { - document.body.children[i].style.display = 'none'; - } + if (document.body.children[i].classList.contains('rz-overlaypanel')) { + document.body.children[i].style.display = 'none'; + } } }, focusFirstFocusableElement: function (el) { - var focusable = Radzen.getFocusableElements(el); - var editor = el.querySelector('.rz-html-editor'); - - if (editor && !focusable.includes(editor.previousElementSibling)) { - var editable = el.querySelector('.rz-html-editor-content'); - if (editable) { - var selection = window.getSelection(); - var range = document.createRange(); - range.setStart(editable, 0); - range.setEnd(editable, 0); - selection.removeAllRanges(); - selection.addRange(range); - } - } else { - var firstFocusable = focusable[0]; - if (firstFocusable) { - firstFocusable.focus(); + var focusable = Radzen.getFocusableElements(el); + var editor = el.querySelector('.rz-html-editor'); + + if (editor && !focusable.includes(editor.previousElementSibling)) { + var editable = el.querySelector('.rz-html-editor-content'); + if (editable) { + var selection = window.getSelection(); + var range = document.createRange(); + range.setStart(editable, 0); + range.setEnd(editable, 0); + selection.removeAllRanges(); + selection.addRange(range); + } + } else { + var firstFocusable = focusable[0]; + if (firstFocusable) { + firstFocusable.focus(); + } } - } }, openSideDialog: function (options) { - setTimeout(function () { - if (options.autoFocusFirstElement) { - var dialogs = document.querySelectorAll('.rz-dialog-side-content'); - if (dialogs.length == 0) return; - var lastDialog = dialogs[dialogs.length - 1]; - Radzen.focusFirstFocusableElement(lastDialog); - } - }, 500); + setTimeout(function () { + if (options.autoFocusFirstElement) { + var dialogs = document.querySelectorAll('.rz-dialog-side-content'); + if (dialogs.length == 0) return; + var lastDialog = dialogs[dialogs.length - 1]; + Radzen.focusFirstFocusableElement(lastDialog); + } + }, 500); }, openDialog: function (options, dialogService, dialog) { if (Radzen.closeAllPopups) { - Radzen.closeAllPopups(); + Radzen.closeAllPopups(); } Radzen.dialogService = dialogService; if ( @@ -1446,75 +1446,75 @@ window.Radzen = { } setTimeout(function () { - var dialogs = document.querySelectorAll('.rz-dialog-content'); - if (dialogs.length == 0) return; - var lastDialog = dialogs[dialogs.length - 1]; - - if (lastDialog) { - lastDialog.options = options; - lastDialog.removeEventListener('keydown', Radzen.focusTrap); - lastDialog.addEventListener('keydown', Radzen.focusTrap); - - if (options.resizable) { - dialog.offsetWidth = lastDialog.parentElement.offsetWidth; - dialog.offsetHeight = lastDialog.parentElement.offsetHeight; - var dialogResize = function (e) { - if (!dialog) return; - if (dialog.offsetWidth != e[0].target.offsetWidth || dialog.offsetHeight != e[0].target.offsetHeight) { - - dialog.offsetWidth = e[0].target.offsetWidth; - dialog.offsetHeight = e[0].target.offsetHeight; - - dialog.invokeMethodAsync( - 'RadzenDialog.OnResize', - e[0].target.offsetWidth, - e[0].target.offsetHeight - ); + var dialogs = document.querySelectorAll('.rz-dialog-content'); + if (dialogs.length == 0) return; + var lastDialog = dialogs[dialogs.length - 1]; + + if (lastDialog) { + lastDialog.options = options; + lastDialog.removeEventListener('keydown', Radzen.focusTrap); + lastDialog.addEventListener('keydown', Radzen.focusTrap); + + if (options.resizable) { + dialog.offsetWidth = lastDialog.parentElement.offsetWidth; + dialog.offsetHeight = lastDialog.parentElement.offsetHeight; + var dialogResize = function (e) { + if (!dialog) return; + if (dialog.offsetWidth != e[0].target.offsetWidth || dialog.offsetHeight != e[0].target.offsetHeight) { + + dialog.offsetWidth = e[0].target.offsetWidth; + dialog.offsetHeight = e[0].target.offsetHeight; + + dialog.invokeMethodAsync( + 'RadzenDialog.OnResize', + e[0].target.offsetWidth, + e[0].target.offsetHeight + ); + } + }; + Radzen.dialogResizer = new ResizeObserver(dialogResize).observe(lastDialog.parentElement); } - }; - Radzen.dialogResizer = new ResizeObserver(dialogResize).observe(lastDialog.parentElement); - } - if (options.draggable) { - var dialogTitle = lastDialog.parentElement.querySelector('.rz-dialog-titlebar'); - if (dialogTitle) { - Radzen[dialogTitle] = function (e) { - var rect = lastDialog.parentElement.getBoundingClientRect(); - var offsetX = e.clientX - rect.left; - var offsetY = e.clientY - rect.top; + if (options.draggable) { + var dialogTitle = lastDialog.parentElement.querySelector('.rz-dialog-titlebar'); + if (dialogTitle) { + Radzen[dialogTitle] = function (e) { + var rect = lastDialog.parentElement.getBoundingClientRect(); + var offsetX = e.clientX - rect.left; + var offsetY = e.clientY - rect.top; - var move = function (e) { - var left = e.clientX - offsetX; - var top = e.clientY - offsetY; + var move = function (e) { + var left = e.clientX - offsetX; + var top = e.clientY - offsetY; - lastDialog.parentElement.style.left = left + 'px'; - lastDialog.parentElement.style.top = top + 'px'; + lastDialog.parentElement.style.left = left + 'px'; + lastDialog.parentElement.style.top = top + 'px'; - dialog.invokeMethodAsync('RadzenDialog.OnDrag', top, left); - }; + dialog.invokeMethodAsync('RadzenDialog.OnDrag', top, left); + }; - var stop = function () { - document.removeEventListener('mousemove', move); - document.removeEventListener('mouseup', stop); - }; + var stop = function () { + document.removeEventListener('mousemove', move); + document.removeEventListener('mouseup', stop); + }; - document.addEventListener('mousemove', move); - document.addEventListener('mouseup', stop); - }; + document.addEventListener('mousemove', move); + document.addEventListener('mouseup', stop); + }; - dialogTitle.addEventListener('mousedown', Radzen[dialogTitle]); - } - } + dialogTitle.addEventListener('mousedown', Radzen[dialogTitle]); + } + } - if (options.autoFocusFirstElement) { - Radzen.focusFirstFocusableElement(lastDialog); + if (options.autoFocusFirstElement) { + Radzen.focusFirstFocusableElement(lastDialog); + } } - } }, 500); document.removeEventListener('keydown', Radzen.closePopupOrDialog); if (options.closeDialogOnEsc) { - document.addEventListener('keydown', Radzen.closePopupOrDialog); + document.addEventListener('keydown', Radzen.closePopupOrDialog); } }, closeDialog: function () { @@ -1524,82 +1524,82 @@ window.Radzen = { var lastDialog = dialogs.length && dialogs[dialogs.length - 1]; if (lastDialog) { - var dialogTitle = lastDialog.parentElement.querySelector('.rz-dialog-titlebar'); - if (dialogTitle) { - dialogTitle.removeEventListener('mousedown', Radzen[dialogTitle]); - Radzen[dialogTitle] = null; - delete Radzen[dialogTitle]; - } + var dialogTitle = lastDialog.parentElement.querySelector('.rz-dialog-titlebar'); + if (dialogTitle) { + dialogTitle.removeEventListener('mousedown', Radzen[dialogTitle]); + Radzen[dialogTitle] = null; + delete Radzen[dialogTitle]; + } } if (dialogs.length <= 1) { - document.removeEventListener('keydown', Radzen.closePopupOrDialog); - delete Radzen.dialogService; + document.removeEventListener('keydown', Radzen.closePopupOrDialog); + delete Radzen.dialogService; } }, disableKeydown: function (e) { - e = e || window.event; - e.preventDefault(); + e = e || window.event; + e.preventDefault(); }, getFocusableElements: function (element) { return [...element.querySelectorAll('a, button, input, textarea, select, details, iframe, embed, object, summary dialog, audio[controls], video[controls], [contenteditable], [tabindex]')] - .filter(el => el && el.tabIndex > -1 && !el.hasAttribute('disabled') && el.offsetParent !== null); + .filter(el => el && el.tabIndex > -1 && !el.hasAttribute('disabled') && el.offsetParent !== null); }, focusTrap: function (e) { e = e || window.event; var isTab = false; if ("key" in e) { - isTab = (e.key === "Tab"); + isTab = (e.key === "Tab"); } else { - isTab = (e.keyCode === 9); + isTab = (e.keyCode === 9); } if (isTab) { - var focusable = Radzen.getFocusableElements(e.currentTarget); - var firstFocusable = focusable[0]; - var lastFocusable = focusable[focusable.length - 1]; - - if (firstFocusable && lastFocusable && e.shiftKey && document.activeElement === firstFocusable) { - e.preventDefault(); - lastFocusable.focus(); - } else if (firstFocusable && lastFocusable && !e.shiftKey && document.activeElement === lastFocusable) { - e.preventDefault(); - firstFocusable.focus(); - } + var focusable = Radzen.getFocusableElements(e.currentTarget); + var firstFocusable = focusable[0]; + var lastFocusable = focusable[focusable.length - 1]; + + if (firstFocusable && lastFocusable && e.shiftKey && document.activeElement === firstFocusable) { + e.preventDefault(); + lastFocusable.focus(); + } else if (firstFocusable && lastFocusable && !e.shiftKey && document.activeElement === lastFocusable) { + e.preventDefault(); + firstFocusable.focus(); + } } }, closePopupOrDialog: function (e) { - e = e || window.event; - var isEscape = false; - if ("key" in e) { - isEscape = (e.key === "Escape" || e.key === "Esc"); - } else { - isEscape = (e.keyCode === 27); - } - if (isEscape && Radzen.dialogService) { - var popups = document.querySelectorAll('.rz-popup,.rz-overlaypanel'); - for (var i = 0; i < popups.length; i++) { - if (popups[i].style.display != 'none') { - return; - } + e = e || window.event; + var isEscape = false; + if ("key" in e) { + isEscape = (e.key === "Escape" || e.key === "Esc"); + } else { + isEscape = (e.keyCode === 27); } + if (isEscape && Radzen.dialogService) { + var popups = document.querySelectorAll('.rz-popup,.rz-overlaypanel'); + for (var i = 0; i < popups.length; i++) { + if (popups[i].style.display != 'none') { + return; + } + } - var dialogs = document.querySelectorAll('.rz-dialog-content'); - if (dialogs.length == 0) return; - var lastDialog = dialogs[dialogs.length - 1]; + var dialogs = document.querySelectorAll('.rz-dialog-content'); + if (dialogs.length == 0) return; + var lastDialog = dialogs[dialogs.length - 1]; - if (lastDialog && lastDialog.options && lastDialog.options.closeDialogOnEsc) { - Radzen.dialogService.invokeMethodAsync('DialogService.Close', null); + if (lastDialog && lastDialog.options && lastDialog.options.closeDialogOnEsc) { + Radzen.dialogService.invokeMethodAsync('DialogService.Close', null); - if (dialogs.length <= 1) { - document.removeEventListener('keydown', Radzen.closePopupOrDialog); - delete Radzen.dialogService; - var layout = document.querySelector('.rz-layout'); - if (layout) { - layout.removeEventListener('keydown', Radzen.disableKeydown); + if (dialogs.length <= 1) { + document.removeEventListener('keydown', Radzen.closePopupOrDialog); + delete Radzen.dialogService; + var layout = document.querySelector('.rz-layout'); + if (layout) { + layout.removeEventListener('keydown', Radzen.disableKeydown); + } + } } - } } - } }, getNumericValue: function (arg) { var el = @@ -1624,10 +1624,10 @@ window.Radzen = { input.value = value; } }, - blur: function (el, e) { + blur: function (el, e) { if (el) { - e.preventDefault(); - el.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, cancelable: true, keyCode: 9 })); + e.preventDefault(); + el.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, cancelable: true, keyCode: 9 })); } }, blurAllNumericInputs: function () { @@ -1707,7 +1707,7 @@ window.Radzen = { } }, false - ); + ); var file = fileInput.files[0]; if (!file) return; if (file.size <= maxFileSize) { @@ -1745,7 +1745,7 @@ window.Radzen = { } if (clickToOpen === false && item.parentElement && item.parentElement.closest('.rz-navigation-item') && !defaultActive) { - return; + return; }; toggle(active); @@ -1804,7 +1804,7 @@ window.Radzen = { var rect = ref.getBoundingClientRect(); - return { width: rect.width, height: rect.height }; + return {width: rect.width, height: rect.height}; }, createChart: function (ref, instance) { var inside = false; @@ -1814,17 +1814,17 @@ window.Radzen = { var x = e.clientX - rect.left; var y = e.clientY - rect.top; instance.invokeMethodAsync('MouseMove', x, y); - } + } }, 100); ref.mouseEnterHandler = function () { - inside = true; + inside = true; }; ref.mouseLeaveHandler = function (e) { - if (e.relatedTarget && (e.relatedTarget.matches('.rz-chart-tooltip') || e.relatedTarget.closest('.rz-chart-tooltip'))) { - return; - } - inside = false; - instance.invokeMethodAsync('MouseMove', -1, -1); + if (e.relatedTarget && (e.relatedTarget.matches('.rz-chart-tooltip') || e.relatedTarget.closest('.rz-chart-tooltip'))) { + return; + } + inside = false; + instance.invokeMethodAsync('MouseMove', -1, -1); }; ref.clickHandler = function (e) { var rect = ref.getBoundingClientRect(); @@ -1861,13 +1861,13 @@ window.Radzen = { window.addEventListener('resize', ref.resizeHandler); var rect = ref.getBoundingClientRect(); - return { width: rect.width, height: rect.height }; + return {width: rect.width, height: rect.height}; }, innerHTML: function (ref, value) { if (value != undefined) { - if (ref != null) { - ref.innerHTML = value; - } + if (ref != null) { + ref.innerHTML = value; + } } else { return ref.innerHTML; } @@ -1901,23 +1901,23 @@ window.Radzen = { }; }, mediaQueries: {}, - mediaQuery: function (query, instance) { + mediaQuery: function(query, instance) { if (instance) { function callback(event) { - instance.invokeMethodAsync('OnChange', event.matches) + instance.invokeMethodAsync('OnChange', event.matches) }; var query = matchMedia(query); - this.mediaQueries[instance._id] = function () { - query.removeListener(callback); + this.mediaQueries[instance._id] = function() { + query.removeListener(callback); } query.addListener(callback); return query.matches; } else { - instance = query; - if (this.mediaQueries[instance._id]) { - this.mediaQueries[instance._id](); - delete this.mediaQueries[instance._id]; - } + instance = query; + if (this.mediaQueries[instance._id]) { + this.mediaQueries[instance._id](); + delete this.mediaQueries[instance._id]; + } } }, createEditor: function (ref, uploadUrl, paste, instance, shortcuts) { @@ -1976,51 +1976,51 @@ window.Radzen = { var file = item.getAsFile(); if (uploadUrl) { - var xhr = new XMLHttpRequest(); - var data = new FormData(); - data.append("file", file); - xhr.onreadystatechange = function (e) { - if (xhr.readyState === XMLHttpRequest.DONE) { - var status = xhr.status; - if (status === 0 || (status >= 200 && status < 400)) { - var result = JSON.parse(xhr.responseText); - var html = ''; - if (paste) { - instance.invokeMethodAsync('OnPaste', html) - .then(function (html) { - document.execCommand("insertHTML", false, html); - }); - } else { - document.execCommand("insertHTML", false, ''); + var xhr = new XMLHttpRequest(); + var data = new FormData(); + data.append("file", file); + xhr.onreadystatechange = function (e) { + if (xhr.readyState === XMLHttpRequest.DONE) { + var status = xhr.status; + if (status === 0 || (status >= 200 && status < 400)) { + var result = JSON.parse(xhr.responseText); + var html = ''; + if (paste) { + instance.invokeMethodAsync('OnPaste', html) + .then(function (html) { + document.execCommand("insertHTML", false, html); + }); + } else { + document.execCommand("insertHTML", false, ''); + } + instance.invokeMethodAsync('OnUploadComplete', xhr.responseText); + } else { + instance.invokeMethodAsync('OnError', xhr.responseText); + } } - instance.invokeMethodAsync('OnUploadComplete', xhr.responseText); - } else { - instance.invokeMethodAsync('OnError', xhr.responseText); - } } - } - instance.invokeMethodAsync('GetHeaders').then(function (headers) { - xhr.open('POST', uploadUrl, true); - for (var name in headers) { - xhr.setRequestHeader(name, headers[name]); - } - xhr.send(data); - }); + instance.invokeMethodAsync('GetHeaders').then(function (headers) { + xhr.open('POST', uploadUrl, true); + for (var name in headers) { + xhr.setRequestHeader(name, headers[name]); + } + xhr.send(data); + }); } else { - var reader = new FileReader(); - reader.onload = function (e) { - var html = ''; - - if (paste) { - instance.invokeMethodAsync('OnPaste', html) - .then(function (html) { - document.execCommand("insertHTML", false, html); - }); - } else { - document.execCommand("insertHTML", false, html); - } - }; - reader.readAsDataURL(file); + var reader = new FileReader(); + reader.onload = function (e) { + var html = ''; + + if (paste) { + instance.invokeMethodAsync('OnPaste', html) + .then(function (html) { + document.execCommand("insertHTML", false, html); + }); + } else { + document.execCommand("insertHTML", false, html); + } + }; + reader.readAsDataURL(file); } } else if (paste) { e.preventDefault(); @@ -2051,8 +2051,8 @@ window.Radzen = { var range = ref.range; if (range) { delete ref.range; - if (ref) { - ref.focus(); + if(ref) { + ref.focus(); } var selection = getSelection(); selection.removeAllRanges(); @@ -2112,7 +2112,7 @@ window.Radzen = { }, startDrag: function (ref, instance, handler) { if (!ref) { - return { left: 0, top: 0, width: 0, height: 0 }; + return { left: 0, top: 0, width: 0, height: 0 }; } ref.mouseMoveHandler = function (e) { instance.invokeMethodAsync(handler, { clientX: e.clientX, clientY: e.clientY }); @@ -2136,8 +2136,8 @@ window.Radzen = { }, clientRect: function (arg) { var el = arg instanceof Element || arg instanceof HTMLDocument - ? arg - : document.getElementById(arg); + ? arg + : document.getElementById(arg); var rect = el.getBoundingClientRect(); return { left: rect.left, top: rect.top, width: rect.width, height: rect.height }; }, @@ -2147,384 +2147,384 @@ window.Radzen = { document.removeEventListener('touchmove', ref.touchMoveHandler) document.removeEventListener('touchend', ref.mouseUpHandler); }, - startColumnReorder: function (id) { - var el = document.getElementById(id + '-drag'); - var cell = el.parentNode.parentNode; - var visual = document.createElement("th"); - visual.className = cell.className + ' rz-column-draggable'; - visual.style = cell.style; - visual.style.display = 'none'; - visual.style.position = 'absolute'; - visual.style.height = cell.offsetHeight + 'px'; - visual.style.width = cell.offsetWidth + 'px'; - visual.style.zIndex = 2000; - visual.innerHTML = cell.innerHTML; - visual.id = id + 'visual'; - document.body.appendChild(visual); - - var resizers = cell.parentNode.querySelectorAll('.rz-column-resizer'); - for (let i = 0; i < resizers.length; i++) { - resizers[i].style.display = 'none'; - } - - Radzen[id + 'end'] = function (e) { - var el = document.getElementById(id + 'visual'); - if (el) { - document.body.removeChild(el); - Radzen[id + 'end'] = null; - Radzen[id + 'move'] = null; - var resizers = cell.parentNode.querySelectorAll('.rz-column-resizer'); - for (let i = 0; i < resizers.length; i++) { - resizers[i].style.display = 'block'; - } + startColumnReorder: function(id) { + var el = document.getElementById(id + '-drag'); + var cell = el.parentNode.parentNode; + var visual = document.createElement("th"); + visual.className = cell.className + ' rz-column-draggable'; + visual.style = cell.style; + visual.style.display = 'none'; + visual.style.position = 'absolute'; + visual.style.height = cell.offsetHeight + 'px'; + visual.style.width = cell.offsetWidth + 'px'; + visual.style.zIndex = 2000; + visual.innerHTML = cell.innerHTML; + visual.id = id + 'visual'; + document.body.appendChild(visual); + + var resizers = cell.parentNode.querySelectorAll('.rz-column-resizer'); + for (let i = 0; i < resizers.length; i++) { + resizers[i].style.display = 'none'; + } + + Radzen[id + 'end'] = function (e) { + var el = document.getElementById(id + 'visual'); + if (el) { + document.body.removeChild(el); + Radzen[id + 'end'] = null; + Radzen[id + 'move'] = null; + var resizers = cell.parentNode.querySelectorAll('.rz-column-resizer'); + for (let i = 0; i < resizers.length; i++) { + resizers[i].style.display = 'block'; + } + } } - } - document.removeEventListener('click', Radzen[id + 'end']); - document.addEventListener('click', Radzen[id + 'end']); + document.removeEventListener('click', Radzen[id + 'end']); + document.addEventListener('click', Radzen[id + 'end']); - Radzen[id + 'move'] = function (e) { - var el = document.getElementById(id + 'visual'); - if (el) { - el.style.display = 'block'; + Radzen[id + 'move'] = function (e) { + var el = document.getElementById(id + 'visual'); + if (el) { + el.style.display = 'block'; - if (/Edge/.test(navigator.userAgent)) { - var scrollLeft = document.body.scrollLeft; - var scrollTop = document.body.scrollTop; - } else { - var scrollLeft = document.documentElement.scrollLeft; - var scrollTop = document.documentElement.scrollTop; - } + if (/Edge/.test(navigator.userAgent)) { + var scrollLeft = document.body.scrollLeft; + var scrollTop = document.body.scrollTop; + } else { + var scrollLeft = document.documentElement.scrollLeft; + var scrollTop = document.documentElement.scrollTop; + } - el.style.top = e.clientY + scrollTop + 10 + 'px'; - el.style.left = e.clientX + scrollLeft + 10 + 'px'; + el.style.top = e.clientY + scrollTop + 10 + 'px'; + el.style.left = e.clientX + scrollLeft + 10 + 'px'; + } } - } - document.removeEventListener('mousemove', Radzen[id + 'move']); - document.addEventListener('mousemove', Radzen[id + 'move']); + document.removeEventListener('mousemove', Radzen[id + 'move']); + document.addEventListener('mousemove', Radzen[id + 'move']); }, stopColumnResize: function (id, grid, columnIndex) { var el = document.getElementById(id + '-resizer'); - if (!el) return; + if(!el) return; var cell = el.parentNode.parentNode; if (!cell) return; if (Radzen[el]) { - grid.invokeMethodAsync( - 'RadzenGrid.OnColumnResized', - columnIndex, - cell.getBoundingClientRect().width - ); - el.style.width = null; - document.removeEventListener('mousemove', Radzen[el].mouseMoveHandler); - document.removeEventListener('mouseup', Radzen[el].mouseUpHandler); - document.removeEventListener('touchmove', Radzen[el].touchMoveHandler) - document.removeEventListener('touchend', Radzen[el].mouseUpHandler); - Radzen[el] = null; - } - }, - startColumnResize: function (id, grid, columnIndex, clientX) { - var el = document.getElementById(id + '-resizer'); - var cell = el.parentNode.parentNode; - var col = document.getElementById(id + '-col'); - var dataCol = document.getElementById(id + '-data-col'); - var footerCol = document.getElementById(id + '-footer-col'); - Radzen[el] = { - clientX: clientX, - width: cell.getBoundingClientRect().width, - mouseUpHandler: function (e) { - if (Radzen[el]) { - grid.invokeMethodAsync( + grid.invokeMethodAsync( 'RadzenGrid.OnColumnResized', columnIndex, cell.getBoundingClientRect().width - ); - el.style.width = null; - document.removeEventListener('mousemove', Radzen[el].mouseMoveHandler); - document.removeEventListener('mouseup', Radzen[el].mouseUpHandler); - document.removeEventListener('touchmove', Radzen[el].touchMoveHandler) - document.removeEventListener('touchend', Radzen[el].mouseUpHandler); - Radzen[el] = null; - } - }, - mouseMoveHandler: function (e) { - if (Radzen[el]) { - var widthFloat = (Radzen[el].width - (Radzen.isRTL(cell) ? -1 : 1) * (Radzen[el].clientX - e.clientX)); - var minWidth = parseFloat(cell.style.minWidth || 0) - - if (widthFloat < minWidth) { - widthFloat = minWidth; + ); + el.style.width = null; + document.removeEventListener('mousemove', Radzen[el].mouseMoveHandler); + document.removeEventListener('mouseup', Radzen[el].mouseUpHandler); + document.removeEventListener('touchmove', Radzen[el].touchMoveHandler) + document.removeEventListener('touchend', Radzen[el].mouseUpHandler); + Radzen[el] = null; + } + }, + startColumnResize: function(id, grid, columnIndex, clientX) { + var el = document.getElementById(id + '-resizer'); + var cell = el.parentNode.parentNode; + var col = document.getElementById(id + '-col'); + var dataCol = document.getElementById(id + '-data-col'); + var footerCol = document.getElementById(id + '-footer-col'); + Radzen[el] = { + clientX: clientX, + width: cell.getBoundingClientRect().width, + mouseUpHandler: function (e) { + if (Radzen[el]) { + grid.invokeMethodAsync( + 'RadzenGrid.OnColumnResized', + columnIndex, + cell.getBoundingClientRect().width + ); + el.style.width = null; + document.removeEventListener('mousemove', Radzen[el].mouseMoveHandler); + document.removeEventListener('mouseup', Radzen[el].mouseUpHandler); + document.removeEventListener('touchmove', Radzen[el].touchMoveHandler) + document.removeEventListener('touchend', Radzen[el].mouseUpHandler); + Radzen[el] = null; + } + }, + mouseMoveHandler: function (e) { + if (Radzen[el]) { + var widthFloat = (Radzen[el].width - (Radzen.isRTL(cell) ? -1 : 1) * (Radzen[el].clientX - e.clientX)); + var minWidth = parseFloat(cell.style.minWidth || 0) + + if (widthFloat < minWidth) { + widthFloat = minWidth; + } + + var width = widthFloat + 'px'; + + if (cell) { + cell.style.width = width; + } + if (col) { + col.style.width = width; + } + if (dataCol) { + dataCol.style.width = width; + } + if (footerCol) { + footerCol.style.width = width; + } + } + }, + touchMoveHandler: function (e) { + if (e.targetTouches[0]) { + Radzen[el].mouseMoveHandler(e.targetTouches[0]); + } } + }; + el.style.width = "100%"; + document.addEventListener('mousemove', Radzen[el].mouseMoveHandler); + document.addEventListener('mouseup', Radzen[el].mouseUpHandler); + document.addEventListener('touchmove', Radzen[el].touchMoveHandler, { passive: true }) + document.addEventListener('touchend', Radzen[el].mouseUpHandler, { passive: true }); + }, + startSplitterResize: function(id, + splitter, + paneId, + paneNextId, + orientation, + clientPos, + minValue, + maxValue, + minNextValue, + maxNextValue) { + + var el = document.getElementById(id); + var pane = document.getElementById(paneId); + var paneNext = document.getElementById(paneNextId); + var paneLength; + var paneNextLength; + var panePerc; + var paneNextPerc; + var isHOrientation=orientation == 'Horizontal'; + + var totalLength = 0.0; + Array.from(el.children).forEach(element => { + totalLength += isHOrientation + ? element.getBoundingClientRect().width + : element.getBoundingClientRect().height; + }); - var width = widthFloat + 'px'; + if (pane) { + paneLength = isHOrientation + ? pane.getBoundingClientRect().width + : pane.getBoundingClientRect().height; - if (cell) { - cell.style.width = width; - } - if (col) { - col.style.width = width; - } - if (dataCol) { - dataCol.style.width = width; - } - if (footerCol) { - footerCol.style.width = width; - } - } - }, - touchMoveHandler: function (e) { - if (e.targetTouches[0]) { - Radzen[el].mouseMoveHandler(e.targetTouches[0]); + panePerc = (paneLength / totalLength * 100) + '%'; } - } - }; - el.style.width = "100%"; - document.addEventListener('mousemove', Radzen[el].mouseMoveHandler); - document.addEventListener('mouseup', Radzen[el].mouseUpHandler); - document.addEventListener('touchmove', Radzen[el].touchMoveHandler, { passive: true }) - document.addEventListener('touchend', Radzen[el].mouseUpHandler, { passive: true }); - }, - startSplitterResize: function (id, - splitter, - paneId, - paneNextId, - orientation, - clientPos, - minValue, - maxValue, - minNextValue, - maxNextValue) { - - var el = document.getElementById(id); - var pane = document.getElementById(paneId); - var paneNext = document.getElementById(paneNextId); - var paneLength; - var paneNextLength; - var panePerc; - var paneNextPerc; - var isHOrientation = orientation == 'Horizontal'; - - var totalLength = 0.0; - Array.from(el.children).forEach(element => { - totalLength += isHOrientation - ? element.getBoundingClientRect().width - : element.getBoundingClientRect().height; - }); - if (pane) { - paneLength = isHOrientation - ? pane.getBoundingClientRect().width - : pane.getBoundingClientRect().height; + if (paneNext) { + paneNextLength = isHOrientation + ? paneNext.getBoundingClientRect().width + : paneNext.getBoundingClientRect().height; - panePerc = (paneLength / totalLength * 100) + '%'; - } - - if (paneNext) { - paneNextLength = isHOrientation - ? paneNext.getBoundingClientRect().width - : paneNext.getBoundingClientRect().height; - - paneNextPerc = (paneNextLength / totalLength * 100) + '%'; - } - - function ensurevalue(value) { - if (!value) - return null; - - value = value.trim().toLowerCase(); - - if (value.endsWith("%")) - return totalLength * parseFloat(value) / 100; + paneNextPerc = (paneNextLength / totalLength * 100) + '%'; + } - if (value.endsWith("px")) - return parseFloat(value); + function ensurevalue(value) { + if (!value) + return null; - throw 'Invalid value'; - } + value=value.trim().toLowerCase(); - minValue = ensurevalue(minValue); - maxValue = ensurevalue(maxValue); - minNextValue = ensurevalue(minNextValue); - maxNextValue = ensurevalue(maxNextValue); + if (value.endsWith("%")) + return totalLength*parseFloat(value)/100; - Radzen[el] = { - clientPos: clientPos, - panePerc: parseFloat(panePerc), - paneNextPerc: isFinite(parseFloat(paneNextPerc)) ? parseFloat(paneNextPerc) : 0, - paneLength: paneLength, - paneNextLength: isFinite(paneNextLength) ? paneNextLength : 0, - mouseUpHandler: function (e) { - if (Radzen[el]) { - splitter.invokeMethodAsync( - 'RadzenSplitter.OnPaneResized', - parseInt(pane.getAttribute('data-index')), - parseFloat(pane.style.flexBasis), - paneNext ? parseInt(paneNext.getAttribute('data-index')) : null, - paneNext ? parseFloat(paneNext.style.flexBasis) : null - ); + if (value.endsWith("px")) + return parseFloat(value); - document.removeEventListener('pointerup', Radzen[el].mouseUpHandler); - document.removeEventListener('pointermove', Radzen[el].mouseMoveHandler); - el.removeEventListener('touchmove', preventDefaultAndStopPropagation); - Radzen[el] = null; + throw 'Invalid value'; } - }, - mouseMoveHandler: function (e) { - if (Radzen[el]) { - splitter.invokeMethodAsync( - 'RadzenSplitter.OnPaneResizing' - ); + minValue=ensurevalue(minValue); + maxValue=ensurevalue(maxValue); + minNextValue=ensurevalue(minNextValue); + maxNextValue=ensurevalue(maxNextValue); + + Radzen[el] = { + clientPos: clientPos, + panePerc: parseFloat(panePerc), + paneNextPerc: isFinite(parseFloat(paneNextPerc)) ? parseFloat(paneNextPerc) : 0, + paneLength: paneLength, + paneNextLength: isFinite(paneNextLength) ? paneNextLength : 0, + mouseUpHandler: function(e) { + if (Radzen[el]) { + splitter.invokeMethodAsync( + 'RadzenSplitter.OnPaneResized', + parseInt(pane.getAttribute('data-index')), + parseFloat(pane.style.flexBasis), + paneNext ? parseInt(paneNext.getAttribute('data-index')) : null, + paneNext ? parseFloat(paneNext.style.flexBasis) : null + ); + + document.removeEventListener('pointerup', Radzen[el].mouseUpHandler); + document.removeEventListener('pointermove', Radzen[el].mouseMoveHandler); + el.removeEventListener('touchmove', preventDefaultAndStopPropagation); + Radzen[el] = null; + } + }, + mouseMoveHandler: function(e) { + if (Radzen[el]) { + + splitter.invokeMethodAsync( + 'RadzenSplitter.OnPaneResizing' + ); + + var spacePerc = Radzen[el].panePerc + Radzen[el].paneNextPerc; + var spaceLength = Radzen[el].paneLength + Radzen[el].paneNextLength; + + var length = (Radzen[el].paneLength - + (isHOrientation && Radzen.isRTL(e.target) ? -1 : 1) * (Radzen[el].clientPos - (isHOrientation ? e.clientX : e.clientY))); + + if (length > spaceLength) + length = spaceLength; + + if (minValue && length < minValue) length = minValue; + if (maxValue && length > maxValue) length = maxValue; + + if (paneNext) { + var nextSpace=spaceLength-length; + if (minNextValue && nextSpace < minNextValue) length = spaceLength-minNextValue; + if (maxNextValue && nextSpace > maxNextValue) length = spaceLength+maxNextValue; + } + + var perc = length / Radzen[el].paneLength; + if (!isFinite(perc)) { + perc = 1; + Radzen[el].panePerc = 0.1; + Radzen[el].paneLength =isHOrientation + ? pane.getBoundingClientRect().width + : pane.getBoundingClientRect().height; + } + + var newPerc = Radzen[el].panePerc * perc; + if (newPerc < 0) newPerc = 0; + if (newPerc > 100) newPerc = 100; + + pane.style.flexBasis = newPerc + '%'; + if (paneNext) + paneNext.style.flexBasis = (spacePerc - newPerc) + '%'; + } + }, + touchMoveHandler: function(e) { + if (e.targetTouches[0]) { + Radzen[el].mouseMoveHandler(e.targetTouches[0]); + } + } + }; - var spacePerc = Radzen[el].panePerc + Radzen[el].paneNextPerc; - var spaceLength = Radzen[el].paneLength + Radzen[el].paneNextLength; + const preventDefaultAndStopPropagation = (ev) => { + ev.preventDefault(); + ev.stopPropagation(); + }; + document.addEventListener('pointerup', Radzen[el].mouseUpHandler); + document.addEventListener('pointermove', Radzen[el].mouseMoveHandler); + el.addEventListener('touchmove', preventDefaultAndStopPropagation, { passive: false }); + }, + resizeSplitter(id, e) { + var el = document.getElementById(id); + if (el && Radzen[el]) { + Radzen[el].mouseMoveHandler(e); + Radzen[el].mouseUpHandler(e); + } + }, + openWaiting: function() { + if (document.documentElement.scrollHeight > document.documentElement.clientHeight) { + document.body.classList.add('no-scroll'); + } + if (Radzen.WaitingIntervalId != null) { + clearInterval(Radzen.WaitingIntervalId); + } - var length = (Radzen[el].paneLength - - (isHOrientation && Radzen.isRTL(e.target) ? -1 : 1) * (Radzen[el].clientPos - (isHOrientation ? e.clientX : e.clientY))); + setTimeout(function() { + var timerObj = document.getElementsByClassName('rz-waiting-timer'); + if (timerObj.length == 0) return; + var timerStart = new Date().getTime(); + Radzen.WaitingIntervalId = setInterval(function() { + if (timerObj == null || timerObj[0] == null) { + clearInterval(Radzen.WaitingIntervalId); + } else { + var time = new Date(new Date().getTime() - timerStart); + timerObj[0].innerHTML = Math.floor(time / 1000) + "." + Math.floor((time % 1000) / 100); + } + }, + 100); + }, + 100); + }, + closeWaiting: function() { + document.body.classList.remove('no-scroll'); + if (Radzen.WaitingIntervalId != null) { + clearInterval(Radzen.WaitingIntervalId); + Radzen.WaitingIntervalId = null; + } + }, + toggleDictation: function (componentRef, language) { + function start() { + const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; - if (length > spaceLength) - length = spaceLength; + if (!SpeechRecognition) { + return; + } - if (minValue && length < minValue) length = minValue; - if (maxValue && length > maxValue) length = maxValue; + radzenRecognition = new SpeechRecognition(); + radzenRecognition.componentRef = componentRef; + radzenRecognition.continuous = true; - if (paneNext) { - var nextSpace = spaceLength - length; - if (minNextValue && nextSpace < minNextValue) length = spaceLength - minNextValue; - if (maxNextValue && nextSpace > maxNextValue) length = spaceLength + maxNextValue; - } + if (language) { + radzenRecognition.lang = language; + } - var perc = length / Radzen[el].paneLength; - if (!isFinite(perc)) { - perc = 1; - Radzen[el].panePerc = 0.1; - Radzen[el].paneLength = isHOrientation - ? pane.getBoundingClientRect().width - : pane.getBoundingClientRect().height; - } + radzenRecognition.onresult = function (event) { + if (event.results.length < 1) { + return; + } - var newPerc = Radzen[el].panePerc * perc; - if (newPerc < 0) newPerc = 0; - if (newPerc > 100) newPerc = 100; + let current = event.results[event.results.length - 1][0] + let result = current.transcript; - pane.style.flexBasis = newPerc + '%'; - if (paneNext) - paneNext.style.flexBasis = (spacePerc - newPerc) + '%'; - } - }, - touchMoveHandler: function (e) { - if (e.targetTouches[0]) { - Radzen[el].mouseMoveHandler(e.targetTouches[0]); + componentRef.invokeMethodAsync("OnResult", result); + }; + radzenRecognition.onend = function (event) { + componentRef.invokeMethodAsync("StopRecording"); + radzenRecognition = null; + }; + radzenRecognition.start(); } - } - }; - - const preventDefaultAndStopPropagation = (ev) => { - ev.preventDefault(); - ev.stopPropagation(); - }; - document.addEventListener('pointerup', Radzen[el].mouseUpHandler); - document.addEventListener('pointermove', Radzen[el].mouseMoveHandler); - el.addEventListener('touchmove', preventDefaultAndStopPropagation, { passive: false }); - }, - resizeSplitter(id, e) { - var el = document.getElementById(id); - if (el && Radzen[el]) { - Radzen[el].mouseMoveHandler(e); - Radzen[el].mouseUpHandler(e); - } - }, - openWaiting: function () { - if (document.documentElement.scrollHeight > document.documentElement.clientHeight) { - document.body.classList.add('no-scroll'); - } - if (Radzen.WaitingIntervalId != null) { - clearInterval(Radzen.WaitingIntervalId); - } - setTimeout(function () { - var timerObj = document.getElementsByClassName('rz-waiting-timer'); - if (timerObj.length == 0) return; - var timerStart = new Date().getTime(); - Radzen.WaitingIntervalId = setInterval(function () { - if (timerObj == null || timerObj[0] == null) { - clearInterval(Radzen.WaitingIntervalId); + if (radzenRecognition) { + if (radzenRecognition.componentRef._id != componentRef._id) { + radzenRecognition.addEventListener('end', start); + } + radzenRecognition.stop(); } else { - var time = new Date(new Date().getTime() - timerStart); - timerObj[0].innerHTML = Math.floor(time / 1000) + "." + Math.floor((time % 1000) / 100); + start(); } - }, - 100); }, - 100); - }, - closeWaiting: function () { - document.body.classList.remove('no-scroll'); - if (Radzen.WaitingIntervalId != null) { - clearInterval(Radzen.WaitingIntervalId); - Radzen.WaitingIntervalId = null; - } - }, - toggleDictation: function (componentRef, language) { - function start() { - const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; + openChartTooltip: function (chart, x, y, id, instance, callback) { + Radzen.closeTooltip(id); - if (!SpeechRecognition) { - return; - } + var chartRect = chart.getBoundingClientRect(); + x = Math.max(2, chartRect.left + x); + y = Math.max(2, chartRect.top + y); + Radzen.openPopup(chart, id, false, null, x, y, instance, callback, true, false, false); - radzenRecognition = new SpeechRecognition(); - radzenRecognition.componentRef = componentRef; - radzenRecognition.continuous = true; - - if (language) { - radzenRecognition.lang = language; - } - - radzenRecognition.onresult = function (event) { - if (event.results.length < 1) { - return; + var popup = document.getElementById(id); + if (!popup) { + return; } - - let current = event.results[event.results.length - 1][0] - let result = current.transcript; - - componentRef.invokeMethodAsync("OnResult", result); - }; - radzenRecognition.onend = function (event) { - componentRef.invokeMethodAsync("StopRecording"); - radzenRecognition = null; - }; - radzenRecognition.start(); - } - - if (radzenRecognition) { - if (radzenRecognition.componentRef._id != componentRef._id) { - radzenRecognition.addEventListener('end', start); - } - radzenRecognition.stop(); - } else { - start(); - } - }, - openChartTooltip: function (chart, x, y, id, instance, callback) { - Radzen.closeTooltip(id); - - var chartRect = chart.getBoundingClientRect(); - x = Math.max(2, chartRect.left + x); - y = Math.max(2, chartRect.top + y); - Radzen.openPopup(chart, id, false, null, x, y, instance, callback, true, false, false); - - var popup = document.getElementById(id); - if (!popup) { - return; + var tooltipContent = popup.children[0]; + var tooltipContentRect = tooltipContent.getBoundingClientRect(); + var tooltipContentClassName = 'rz-top-chart-tooltip'; + if (y - tooltipContentRect.height < 0) { + tooltipContentClassName = 'rz-bottom-chart-tooltip'; + } + tooltipContent.classList.remove('rz-top-chart-tooltip'); + tooltipContent.classList.remove('rz-bottom-chart-tooltip'); + tooltipContent.classList.add(tooltipContentClassName); } - var tooltipContent = popup.children[0]; - var tooltipContentRect = tooltipContent.getBoundingClientRect(); - var tooltipContentClassName = 'rz-top-chart-tooltip'; - if (y - tooltipContentRect.height < 0) { - tooltipContentClassName = 'rz-bottom-chart-tooltip'; - } - tooltipContent.classList.remove('rz-top-chart-tooltip'); - tooltipContent.classList.remove('rz-bottom-chart-tooltip'); - tooltipContent.classList.add(tooltipContentClassName); - } -}; +}; \ No newline at end of file From aeda732931a2b2c5fefe58427415d55501f73d03 Mon Sep 17 00:00:00 2001 From: Dmitrii Botov Date: Mon, 9 Dec 2024 03:17:10 +0400 Subject: [PATCH 3/3] code clean up --- Radzen.Blazor/RadzenDataFilter.razor | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Radzen.Blazor/RadzenDataFilter.razor b/Radzen.Blazor/RadzenDataFilter.razor index 9ba249497ab..6aaa407462c 100644 --- a/Radzen.Blazor/RadzenDataFilter.razor +++ b/Radzen.Blazor/RadzenDataFilter.razor @@ -12,7 +12,7 @@ @if (Visible) {
- +