Lightbox Title Fix Redux (#1675)

themes/bootstrap3/js/lightbox.js

@@ -7,22 +7,19 @@ VuFind.register('lightbox', function Lightbox() {
   var refreshOnClose = false;
   var _modalParams = {};
   // Elements
-  var _modal, _modalBody, _modalTitle, _clickedButton = null;
+  var _modal, _modalBody, _clickedButton = null;
   // Utilities
   function _storeClickedStatus() {
     _clickedButton = this;
   }
   function _html(content) {
     _modalBody.html(content);
     // Set or update title if we have one
-    if (_lightboxTitle) {
-      _modalTitle.text(_lightboxTitle);
-      _modalBody.find('h2:first-child').hide();
-      _modalTitle.show();
-      _lightboxTitle = false;
-    } else {
-      _modalTitle.hide();
+    var $h2 = _modalBody.find("h2:first-of-type");
+    if (_lightboxTitle && $h2) {
+      $h2.text(_lightboxTitle);
     }
+    _lightboxTitle = false;
     _modal.modal('handleUpdate');
   }
   function _emit(msg, _details) {
@@ -247,7 +244,7 @@ VuFind.register('lightbox', function Lightbox() {
         obj.type = 'POST';
         obj.data = $(this).data('lightbox-post');
       }
-      _lightboxTitle = $(this).data('lightbox-title') || '';
+      _lightboxTitle = $(this).data('lightbox-title') || false;
       _modalParams = $(this).data();
       VuFind.modal('show');
       ajax(obj);
@@ -322,7 +319,7 @@ VuFind.register('lightbox', function Lightbox() {
       submit.attr('disabled', 'disabled');
     }
     // Store custom title
-    _lightboxTitle = submit.data('lightbox-title') || $(form).data('lightbox-title') || '';
+    _lightboxTitle = submit.data('lightbox-title') || $(form).data('lightbox-title') || false;
     // Get Lightbox content
     ajax({
       url: $(form).attr('action') || _currentUrl,
@@ -382,13 +379,12 @@ VuFind.register('lightbox', function Lightbox() {
     _html(VuFind.translate('loading') + '...');
     _originalUrl = false;
     _currentUrl = false;
-    _lightboxTitle = '';
+    _lightboxTitle = false;
     _modalParams = {};
   }
   function init() {
     _modal = $('#modal');
     _modalBody = _modal.find('.modal-body');
-    _modalTitle = _modal.find('#modal-title');
     _modal.on('hide.bs.modal', function lightboxHide() {
       if (VuFind.lightbox.refreshOnClose) {
         VuFind.refreshPage();

themes/bootstrap3/less/components/lightbox.less

@@ -34,13 +34,6 @@
   margin-bottom: 1.3rem;
 }
 
-#modal-title {
-  display: block;
-  padding: 0.8rem 1rem 0.7rem;
-  font-size: 23px;
-  font-weight: normal;
-}
-
 #modal .cart-controls .btn { margin-bottom: 4px; }
 #modal .cart-controls .checkbox { padding-bottom: 1rem; }
 #modal .cart-controls ~ hr { margin-top: 0; }

themes/bootstrap3/scss/components/lightbox.scss

@@ -34,13 +34,6 @@
   margin-bottom: 1.3rem;
 }
 
-#modal-title {
-  display: block;
-  padding: 0.8rem 1rem 0.7rem;
-  font-size: 23px;
-  font-weight: normal;
-}
-
 #modal .cart-controls .btn { margin-bottom: 4px; }
 #modal .cart-controls .checkbox { padding-bottom: 1rem; }
 #modal .cart-controls ~ hr { margin-top: 0; }

themes/bootstrap3/templates/layout/layout.phtml

@@ -194,8 +194,7 @@ JS;
       <div class="modal-dialog">
         <div class="modal-content">
           <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-          <span id="modal-title" role="heading"><?=$this->transEsc('Loading') ?>...</span>
-          <div class="modal-body"></div>
+          <div class="modal-body"><?=$this->transEsc('Loading') ?>...</div>
         </div>
       </div>
     </div>