New features / improvements

OpenEMR Development
9

@sjpadgett and others have gone through hoops to make dialog library work for frames and iframes interfaces. If frames interface is dropped, project can move towards delegating modal dialogs to native bootstrap. Here is a recipe for eliminating use of dlgopen by Popups menu -

  1. Add basic modal dialog template to main.php
<div id="mainModalContainer">
<div class="modal fade" id="mainModal" tabindex="-1" role="dialog" aria-labelledby="mainModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="mainModalLabel"><?php echo xlt('Error') ?></h5>
        <a role="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="container-fluid modal-body-grid">
          <?php echo xlt('Error') ?>
        </div>
      </div>
      <div class="modal-footer">
        <?php echo xlt('Error') ?>
      </div>
    </div>
  </div>
</div>
  1. Make modal available globally - preferably in a .js file so it does not become inline. If that is not possible, add it to main.php.
function showMainModal(opts) {
    if (typeof(opts.title)==='undefined') {
        $('#mainModal .modal-header').addClass('d-none');
    } else {
        $('#mainModal .modal-header').removeClass('d-none');
        $('#mainModalLabel').html(opts.title);
    }
    if (typeof(opts.footer)==='undefined') {
        $('#mainModal .modal-footer').addClass('d-none');
    } else {
        $('#mainModal .modal-footer')
        .html(opts.footer)
        .removeClass('d-none');
        
    }
    $('#mainModal .modal-body').addClass('embed-responsive embed-responsive-16by9');
    $('#mainModal .modal-body').html('<iframe class="embed-responsive-item" src="'+opts.src+'"></iframe>');
    $('#mainModal').modal('show');
}
  1. Update tabs_view_model.js to bypass dlgopen -
function popMenuDialog(url, title) {
    let notlike = title.toLowerCase();
    // If mainmodal is available, display finder in modal
    if (typeof(showMainModal)==='function') {
        showMainModal({
            src: url,
            title: title
            }
        );
        return true;
    }
    dlgopen(url, 'menupopup', 'modal-mlg', 500, '', title, {
        sizeHeight: notlike.search('label') !== -1 ? 'full' : 'auto'
    });
}
  1. Other scripts can invoke the modal by using top.showMainModal.

Current code allows (or in many cases requires) the modal dialog to invoke functions in initiating script. As part of the migration, it may be better to put together a mechanism by which the dialog notifies top that it should be closed due to a given action. top.closeMainModal acting as controller, closes the dialog and takes follow-up actions.