Problem/Motivation

Drupal.Ajax.prototype.setProgressIndicatorBar adds some additional classes to the progress bar component. Currently it isn't possible to override the classes without duplicating all of the logic inside the function in a theme.

Proposed resolution

Instead of adding classes directly to the existing element, wrap the progress bar with additional div which gets generated by a theme function.

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

Ajax progress bar added some hardcoded classes to progress bar that couldn't be overridden by themes. The markup is now generated by a new theme function Drupal.theme.ajaxProgressBar, and as a result, classes have been moved to a new wrapping element. The classes are moved to a new wrapping div only on Stable or Classy. The theme function can be overridden by all themes.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

lauriii created an issue. See original summary.

volkerk’s picture

Status: Active » Needs review
FileSize
2.36 KB

Added a theme function wrapping the progress bar element.

There is a PR for the cd_tools module to facilitate the new theme function in claro testing
https://github.com/zolhorvath/cd_tools/pull/1.

volkerk’s picture

FileSize
2.4 KB

Re-rolled adding missing core dir.

quiron’s picture

Status: Needs review » Reviewed & tested by the community

I reviewed and tested and LGTM

lauriii’s picture

Status: Reviewed & tested by the community » Needs review
FileSize
3.55 KB
2.47 KB

I added backwards compatibility layer for this in Stable.

Status: Needs review » Needs work

The last submitted patch, 5: 3059847-5.patch, failed testing. View results

lauriii’s picture

Status: Needs work » Needs review
FileSize
4.06 KB
432 bytes

Added the compiled JS to the patch.

quiron’s picture

Status: Needs review » Reviewed & tested by the community

Tested and works as expected: adds a new wrapper with classes ajax-progress ajax-progress-bar unless stable is loaded, then it keeps working with the previous behavior adding the classes to the already existing div with class progress.

alexpott’s picture

Status: Reviewed & tested by the community » Needs work
Issue tags: +Needs change record

@lauriii are we worrying at all about the BC implications of making this change? What if anything are existing themes going to have to do - especially if they don't extend stable (eg bootstrap).

I think we need a change record here too.

lauriii’s picture

Status: Needs work » Reviewed & tested by the community
Issue tags: -Needs change record

Created two change records. One for the addition of the new theme function and one for the markup change. I also tested bootstrap to make sure this doesn't break anything and can confirm that they are not relying on anything related to these classes.

larowlan’s picture

Status: Reviewed & tested by the community » Needs review

Can we get a release notes snippet added to the issue summary for this one, thanks.

lauriii’s picture

Issue summary: View changes
Status: Needs review » Reviewed & tested by the community

Created a release note snippet.

lauriii’s picture

Title: Allow modifying ajax modifications to progress bar classes » Move hard coded ajax progress bar classes to a theme function
Wim Leers’s picture

Title: Move hard coded ajax progress bar classes to a theme function » Move hard coded AJAX progress bar classes to a theme function
Status: Reviewed & tested by the community » Needs work
Issue tags: +Needs reroll
  1. The patch in #7 no longer applies.
  2. +++ b/core/themes/stable/js/ajax.es6.js
    @@ -0,0 +1,17 @@
    + * Provides backwards compatibility layer for Ajax related markup.
    ...
    +  Drupal.theme.ajaxProgressBar = $element =>
    +    $element.addClass('ajax-progress ajax-progress-bar');
    +})(Drupal);
    
    +++ b/core/themes/stable/stable.info.yml
    @@ -298,3 +298,7 @@ libraries-override:
    +libraries-extend:
    +  core/drupal.ajax:
    +    - stable/drupal.ajax
    

    Ooohhhhhhhhh, this is super clever! I'm impressed 👏🤓

huzooka’s picture

Assigned: Unassigned » huzooka
huzooka’s picture

Assigned: huzooka » Unassigned
Status: Needs work » Needs review
FileSize
4.85 KB

Re-rolled #7.

Eslint reports errors even when it is runned with the "passing" rules.

I fixed them only for the files that are affected by this patch.

Wim Leers’s picture

Status: Needs review » Reviewed & tested by the community
Issue tags: -Needs reroll
  1. +++ b/core/misc/ajax.es6.js
    @@ -655,9 +655,7 @@
           window.alert(
    -        `An error occurred while attempting to process ${this.options.url}: ${
    -          e.message
    -        }`,
    +        `An error occurred while attempting to process ${this.options.url}: ${e.message}`,
           );
           // For consistency, return a rejected Deferred (i.e., jqXHR's superclass)
           // so that calling code can take appropriate action.
    @@ -750,9 +748,7 @@
    
    @@ -750,9 +748,7 @@
           // the complete response.
           ajax.ajaxing = false;
           window.alert(
    -        `An error occurred while attempting to process ${ajax.options.url}: ${
    -          e.message
    -        }`,
    +        `An error occurred while attempting to process ${ajax.options.url}: ${e.message}`,
           );
         }
    

    ✔️ These changes are out-of-scope, @huzooka did those to fix eslint errors. That's fine IMHO.

  2. +++ b/core/themes/stable/js/ajax.es6.js
    @@ -0,0 +1,17 @@
    + * Provides backwards compatibility layer for Ajax related markup.
    

    🤓 Übernit that can be fixed on commit: Ajax-related

alexpott’s picture

Status: Reviewed & tested by the community » Fixed

Committed bb3791d and pushed to 8.8.x. Thanks!

  • alexpott committed bb3791d on 8.8.x
    Issue #3059847 by lauriii, volkerk, huzooka, quiron, Wim Leers, alexpott...

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.