Suggestion on bricks functions in JS

Dear bricks team,

A small suggestion to include parameter (selector) for the Bricks Element’s JS function.

Explanation:
Recently, I am workig on AJAX rendering some Bricks template in frontend.
Everything is working good from backend and also CSS. But just lack of the JS not being initiate because the new DOMs were added through AJAX.

Understand that I could init them manually like bricksCounter() in JS, however this will init all elements included those already rendered on original page load. End up gonna write some custom JS and feels like double/duplicate the job.

This gif showing the first animated Counter was triggered on DOMContentLoaded, normal page load.
Then everytime if wanna reuse bricksCounter() after fetch my ajax, then all counter elements will be init again.
keep_init

Suggestion:
Example Original bricksCounter JS function in bricks.min.js:

function bricksCounter() {

  bricksQuerySelectorAll(document, ".brxe-counter").forEach(function (e) {

   .... //more codes below
  });

}

Maybe can it be modified or improved to

function bricksCounter(selector = '') {

  var container = document;

  if(selector !== '' && document.querySelector(selector)) {

    container = document.querySelector(selector) ;

  }

  bricksQuerySelectorAll(container, ".brxe-counter").forEach(function (e) {

   .... //more codes below
  });

}

By doing this, we can initialize our counter element freely like bricksCounter('.result-div') in our JS

I have been tested this on several elements (accordion, counter, animatedTyping ) and it really working well.

Below the gif was after changed the core bricksCounter function in JS.
No more init the original counter because I am able to target my selector which newly fetch from ajax.
enhanced

Perhaps this suggestion can be accepted and hope this will benefit to future development like popup ajax features etc.

Thanks.

2 Likes