Joomla! Issue Tracker | Joomla! CMS #25776

NPM Resource Changed ?

Fixed in Code Base
29 Aug 2019
Medium
Build: 4.0-dev
# 25776
Diff
dgrammatiko:spinner-nth-attempt

Pending

Pending Hound Hound is busy sniffing around... Details

User tests: Successful: Unsuccessful:

dgrammatiko
4 Aug 2019

Redo of #22491

Summary of Changes

Drops the code from the core.js for the spinner (already deprecated in j3) and introduces a web component
Patched the category edit layout 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);
}