Pull Request for Issue # .

Summary of Changes

• Drops the code from the core.js for the spinner (already deprecated in j3) and introduces a web component
• Some minor changes in the build module for the web components. The settings.json will now allow custom paths in the media folder. So someone could do some PRs to move the fields custom elements to their appropriate place (/media/system/js/fields/)
• Seperated the logic from the mark up for the category field (someone really needs to do this for all the mark up that is hidden in fields or some helpers!!!)
• Reworked the custom fields part that injected some inline jQuery script. So now the script is part of the category field (that is the right place for the js to live) and the helper just passes some data to the field. The js is still inline so someone should just move it to a file...
• Patched the custom fields to work with the new element
• Patched the installation to work with the new element
• Patched the com_associations to work with the new element

Testing Instructions

Install Joomla, spinner is ok
Make sure that you have custom fields assigned to one category. Edit an article and change its cat to the one that custom fields are attached. spinner is ok
Try a multilingual and check if the spinner works ok

Expected result

Actual result

Documentation Changes Required

In 4.0 in each page that a spinner is needed the following steps will need to be done:

• Include the web component

HTMLHelper::_('webcomponent', 'system/webcomponents/joomla-core-loader.min.js', ['relative' => true, 'version' => 'auto']);

• To show the spinner all we need to do is create an element:

spinner = document.createElement('joomla-core-loader');

// Assuming that the spinner is full screen
document.body.appendChild(spinner);

/*
if we need to append the spinner to some other container
all we have to do is replace document.body with the element 
that we want the spinner to appear
*/

• To remove the spinner all we need to do is destroy the element:

spinner = document.querySelector('joomla-core-loader');

spinner.parentNode.removeChild(spinner);

if you want to use the same codebase for different versions (j3 and j4) here is a quick code:

if (Joomla.loadingLayer && typeof Joomla.loadingLayer === 'function') {
 // We are in J3 so use the old method
 Joomla.loadingLayer('show');
} else {
 // We are in the future
spinner = document.createElement('joomla-core-loader');
document.body.appendChild(spinner);
}