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! :)