Plugin uses deprecated API

[fredericalpers]

Current state

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help, check https://xhr.spec.whatwg.org/.

Source: onoffice-estatetype.js:5

``` (() => { let forms = document.querySelectorAll('form'); const fetch_possible_types = () => { let request = new XMLHttpRequest(); request.open('GET', '/onoffice-estate-types.json', false); request.send(null); if (request.status === 200) { return JSON.parse(request.responseText); } return {}; }; const possibleTypes = fetch_possible_types(); const mergeEstateTypesOfKinds = (possibleTypesValues, estateKinds) => { let target = []; estateKinds.forEach(e => target = target.concat(possibleTypesValues[e])); return target; } const controlMultiSelectEstateKindType = (elementKind, elementType) => { elementType.allOptions = elementType.onoffice_multiselect._options; const multiSelectChangeFn = (e) => { if (e.detail.name === 'objektart[]') { const selection = e.detail.selection; let newTypes = {}; // clone Object.assign(newTypes, elementType.allOptions); const allowedTypes = mergeEstateTypesOfKinds(possibleTypes, selection); for (const k in newTypes) { if (allowedTypes.indexOf(k) < 0) { delete newTypes[k]; } } const oldSelection = elementType.onoffice_multiselect._getSelection(); const newSelection = allowedTypes.filter(value => oldSelection.includes(value)) elementType.onoffice_multiselect.reloadWithOptions(newTypes, newSelection); elementType.onoffice_multiselect.refreshlabel(); elementType.setAttribute('data-values', JSON.stringify(newTypes)); elementType.dispatchEvent(new Event('onoffice-multiselect-modified')); } } elementKind.addEventListener('onoffice-multiselect-change', multiSelectChangeFn, false); const e = new CustomEvent('ready', { detail: { name: 'objektart[]', selection: elementKind.onoffice_multiselect._getSelection() }}); multiSelectChangeFn(e); } const controlSingleSelectEstateKindType = (elementKind, elementType) => { if (!elementType.allOptions) { let newTypes = {}; Object.assign(newTypes, [...elementType.options]); elementType.allOptions = newTypes; } elementType.allOptions = elementType.allOptions || elementType.options; const singleSelectChangeFn = () => { const selection = elementKind.selectedOptions[0].value; let newTypes = {}; // clone Object.assign(newTypes, elementType.allOptions); const allowedTypes = mergeEstateTypesOfKinds(possibleTypes, [selection]); for (const k in newTypes) { if (allowedTypes.indexOf(newTypes[k].value) < 0 && newTypes[k].value !== "") { delete newTypes[k]; } } elementType.options; for (const [key, value] of Object.entries(elementType.options)) { elementType.remove(value.index); } for (const [key, value] of Object.entries(newTypes)) { elementType.add(value); } elementType.options.selectedIndex = 0; } elementKind.addEventListener('change', singleSelectChangeFn, false); singleSelectChangeFn(new Event('ready')); } forms.forEach(function (element) { let elementMultiType = element.querySelector('div[data-name^=objekttyp].multiselect'); let elementMultiKind = element.querySelector('div[data-name^=objektart].multiselect'); let elementSingleType = element.querySelector('select[name=objekttyp]'); let elementSingleKind = element.querySelector('select[name=objektart]'); if (elementMultiType && elementMultiKind) { controlMultiSelectEstateKindType(elementMultiKind, elementMultiType); } else if(elementSingleType && elementSingleKind) { controlSingleSelectEstateKindType(elementSingleKind, elementSingleType); } }); })(); ```

Desired state

Usage of deprecated API should be replaced to avoid errors in the future. Google Chrome best practice deprecations

[dai-eastgate]

@fredericalpers: I found a solution in the "Google Chrome best practice deprecations" link. The Fetch API is a new API for loading resources in web applications and is intended to replace XMLHttpRequest. To learn more about Fetch API, visit https://chromestatus.com/feature/673053392351232. I plan to replace "XMLHttpRequest" with "Fetch" and it will take me three days to implement and test.

[fredericalpers]

@dai-eastgate please go ahead and implement the suggested solution :)

[dai-eastgate]

@fredericalpers I used Fetch instead of XmlHttpRequest. Alternative positions: 2 Fields ('Type of property', 'Kind of property) in 3 screens:

• Applicant search form
• Owner form
• Estate list (previous version compared to v2.9.0)

=> The feature is still working like the master branch. Please watch my demo video and let me know your opinion about this. Thanks! https://files.fm/u/s6mucerq5

[fredericalpers]

@dai-eastgate thank you! :)