Version 5 of the A-Z Directory module adds an option to link the name to a Bootstrap modal with all of the contact information, including Miscellaneous Information and the new custom fields introduced in Joomla 3.7. The display of the modal is determined by your Options within the Contact Component. For example, within the Options, you can set the “Display Format” to “Plain”, “Tabs”, or “Sliders”.
Implementing this feature took over 100 hours and it was very challenging frustrating. Joomla’s implementation of Bootstrap is fairly straightforward and works as expected when not in a modal. However, loading the contact information in a modal introduced an unexpected level of complexity.
tmpl=component
The way to direct Joomla! to display only the contents of a page without the surrounding context, is to simply add “tmpl=component” to the url.
“Simply”
Adding “tmpl=component” to the URL does strip away the template chrome, but it also loads the jQuery and Bootstrap frameworks. In the case of Bootstrap modals, which replaces the contents of carefully crafted markup with the contents from a remote URL, these frameworks load twice — 1) for the parent Joomla template, and 2) within the inserted HTML of the modal-body div. To complicate matters, Joomla adds inline Javascript to control the behavior of the Tabs and Sliders. The Tabs, for example, are generated on-the-fly and appended to a parent div within an anonymous function defined in that inline Javascript. The myriad permutations to get the content to load without flickering, or without generating multiple modal-backdrop divs, were too countless to properly articulate why certain programming decisions were made, but the code below is as lean as I could get it.
| var azModal = function() { | |
| var modazDisplayFormat = modazModalStyle.displayFormat; | |
| if( ( modazDisplayFormat == 'plain' ) || ( modazDisplayFormat == 'tabs' ) ) { | |
| jQuery( '.modazdirectory__results a[data-toggle="modal"]' ).on( 'click', function( e ) { | |
| var modazRemoteUrl = jQuery( e.currentTarget ).data( 'remote' ); | |
| // prevent content flickering | |
| jQuery( '#modazdirectory__modal' ).removeData( 'modal' ); | |
| jQuery( '#modazdirectory__modal' ).modal({ | |
| remote: modazRemoteUrl | |
| }); | |
| // prevent standard click behavior | |
| return false; | |
| }); | |
| } | |
| if( modazDisplayFormat == 'sliders' ) { | |
| jQuery( '.modazdirectory__results a[data-toggle="modal"]' ).on( 'click', function( e ) { | |
| var modazRemoteUrl = jQuery( e.currentTarget ).data( 'remote' ); | |
| jQuery( '#modazdirectory__modal' ).on( 'shown.bs.modal', function() { | |
| jQuery( '#modazdirectory__modal-body' ).load( modazRemoteUrl, function() { | |
| // sliders automatically invoke .collapse on slide-contact | |
| // change the ID to control collapse functionality specifically through styles | |
| jQuery( '#slide-contact' ).attr( 'id', 'modazdirectory__slide-contact' ); | |
| jQuery( '#modazdirectory__modal .accordion-toggle' ).each( function() { | |
| jQuery( this ).on( 'click', function() { | |
| /* | |
| .accordion-heading | |
| strong | |
| a.accordion-toggle | |
| .accordion-body | |
| */ | |
| var accordionBody = jQuery( this ).parent().parent().siblings( '.accordion-body' ); | |
| if( accordionBody.hasClass( 'in' ) ) { | |
| accordionBody.removeClass( 'in' ); | |
| } else { | |
| accordionBody.addClass( 'in' ); | |
| } | |
| return false; | |
| }); | |
| }); | |
| }); | |
| }).modal(); | |
| // prevent standard click behavior | |
| return false; | |
| }); | |
| } | |
| // explicit close behavior | |
| jQuery( '[data-dismiss]' ).on( 'click', function() { | |
| jQuery( '#modazdirectory__modal-body' ).html( '<div class="modal-spinner"></div>' ); | |
| }); | |
| }; |
The function azModal gets called within a jQuery $(document).ready().
The ability to view all of the contact information in a pop-up or modal was easily the most requested feature for the A-Z Directory module. Please enjoy.