Updating the AZDirectory module for compatibility with Joomla 4 was more challenging than expected. The primary issue was respecting the start and finish publishing date/times assigned to a contact.
In Joomla 4, the publish_up and publish_down accepts NULL values. It took some time to figure this out, but once discovered, crafting the SQL using some of the newer Joomla database API calls resulted in the following:
| $nullDate = $db->quote( $db->getNullDate() ); | |
| $nowDate = $db->quote( Factory::getDate()->toSql() ); | |
| $query | |
| ->andWhere( | |
| [ | |
| $db->quoteName( 'a.publish_up' ) . ' = ' . $nullDate, | |
| $db->quoteName( 'a.publish_up' ) . ' IS NULL', | |
| $db->quoteName( 'a.publish_up' ) . ' <= ' . $nowDate | |
| ] | |
| ) | |
| ->andWhere( | |
| [ | |
| $db->quoteName( 'a.publish_down' ) . ' = ' . $nullDate, | |
| $db->quoteName( 'a.publish_down' ) . ' IS NULL', | |
| $db->quoteName( 'a.publish_down' ) . ' >= ' . $nowDate | |
| ] | |
| ) |
For better or for worse, Joomla removed the ability to set a presentation style when displaying contacts. Joomla 3 offered plain, tab, and slider presentation styles. Joomla 4 only offers the plain presentation style. There was a lot of Javascript to wrangle the slider presentation style so that the slider (accordion) functionality remained compatible with Bootstrap 2, 3, and 4. Joomla 4 ships with Bootstrap 5 and with the elimination of the presentation styles, the Javascript got much simpler.
In addition, I was finally able to completely remove the jQuery dependency. Early versions of Bootstrap modal supported a “remote” option to dynamically populate the modal content. Bootstrap 4 removed the remote option, instead relying on jQuery’s load method. With the latest version of AZDirectory, the load method was replaced with fetch.
| modazModal.addEventListener( 'show.bs.modal', function( e ){ | |
| // get the data-remote attribute | |
| var modazRemoteUrl = e.relatedTarget.dataset.remote; | |
| // jQuery .load replacement | |
| fetch( modazRemoteUrl ) | |
| .then( function( modazResp ){ | |
| return modazResp.text(); | |
| }) | |
| .then( function( modazBody ){ | |
| document.getElementById( 'modazdirectory__modal-body' ).innerHTML = modazBody; | |
| }); | |
| }); |