From 8c0f2f66de5712f4331a63eac596b9cb9d2d3bea Mon Sep 17 00:00:00 2001
From: Robert Lange <robert.lange@uni-leipzig.de>
Date: Tue, 17 Nov 2020 11:15:53 +0100
Subject: [PATCH] refs #18451 [finc] refactoring for ajax covers

* do ajax calls before document loaded
* load within cover template by id
* use style based icon or default icon as preview while loading covers
* minimize script for ajax covers in template
---
 themes/finc/js/covers.js                 | 16 +++++++++-------
 themes/finc/scss/compiled.scss           | 13 ++++++++++++-
 themes/finc/templates/record/cover.phtml | 12 +++++++-----
 3 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/themes/finc/js/covers.js b/themes/finc/js/covers.js
index c251aefba80..1f150538799 100644
--- a/themes/finc/js/covers.js
+++ b/themes/finc/js/covers.js
@@ -1,5 +1,5 @@
 /* this is a backport from VF 7 core, remove on upgrade */
-/*global VuFind */
+/* global VuFind */
 function loadCoverByElement(data, element) {
   var url = VuFind.path + '/AJAX/JSON?method=' + 'getRecordCover';
   var img = element.find('img');
@@ -10,10 +10,11 @@ function loadCoverByElement(data, element) {
     spinner.hide();
     container.show();
     if (typeof response.data.url !== 'undefined' && response.data.url !== false) {
-      img.attr("src", response.data.url);
-      container.children().not("img").hide();
+      img.attr('src', response.data.url);
+      container.children().not('img').hide();
       anchor.show();
-      anchor.attr("href", response.data.url);
+      anchor.attr('href', response.data.url);
+      anchor.removeClass('hidden'); // finc specific
     } else {
       img.remove();
       if (typeof response.data.html !== 'undefined') {
@@ -24,9 +25,9 @@ function loadCoverByElement(data, element) {
     }
   }
   $.ajax({
-    dataType: "json",
+    dataType: 'json',
     url: url,
-    method: "GET",
+    method: 'GET',
     data: data,
     element: element,
     success: coverCallback
@@ -44,4 +45,5 @@ function loadCovers() {
     loadCoverByElement(data, $(this));
   });
 }
-$(document).ready(loadCovers);
+// deactivated for finc - we load every single cover directly by itself in cover.phtml
+// $(document).ready(loadCovers);
diff --git a/themes/finc/scss/compiled.scss b/themes/finc/scss/compiled.scss
index 21e429ef2b0..5e7e39fd4fb 100644
--- a/themes/finc/scss/compiled.scss
+++ b/themes/finc/scss/compiled.scss
@@ -859,6 +859,17 @@ table.collapse.in {
       margin-top: 15px;
     }
   }
+
+  // cover
+  .ajaxcover .spinner {
+    height: 0;
+    position: absolute;
+  }
+
+  .cover-container {
+    min-width: 6em;
+  }
+  // cover - END
 }
 
 //// Sprites for Mediaicons
@@ -1997,8 +2008,8 @@ footer {
 //// access-icon in resultlist
 .result {
   .media-left {
-    min-width: 16%;
     text-align: center;
+    width: 17%;
 
     //// remove left padding for print
     @media print {
diff --git a/themes/finc/templates/record/cover.phtml b/themes/finc/templates/record/cover.phtml
index af93f5da6ee..f8d179eb3f3 100644
--- a/themes/finc/templates/record/cover.phtml
+++ b/themes/finc/templates/record/cover.phtml
@@ -10,12 +10,14 @@
 <?php elseif ($cover === false): ?>
   <img src="<?=$this->url('cover-unavailable')?>" <?php if ($linkPreview): ?>data-linkpreview="true" <?php endif; ?>class="nocover" alt="<?=$this->transEsc('No Cover Image')?>" aria-hidden="true" />
 <?php else: ?>
-    <div class="ajaxcover">
-        <div class="spinner"><i class="fa fa-spinner fa-spin"></i> <?=$this->translate('Loading')?>...</div>
+    <div id="cover-<?=$driver->getUniqueID()?>" class="ajaxcover">
+        <div class="spinner"><i class="fa fa-spinner fa-spin"></i></div>
         <div class="cover-container">
-            <a class="coverlink">
-            <img <?php if ($linkPreview): ?>data-linkpreview="true" <?php endif; ?>data-recordsource="<?=$this->escapeHtmlAttr($driver->getSourceIdentifier())?>" data-recordid="<?=$this->escapeHtmlAttr($driver->getUniqueID())?>" data-coversize="<?=$this->escapeHtmlAttr($size)?>" class="recordcover ajax" alt="<?=$this->escapeHtmlAttr($alt); ?>" />
-            </a>
+          <?=$this->render('record/coverReplacement')?>
+          <a class="coverlink hidden">
+            <img src onerror="loadCoverByElement({source:'<?=$this->escapeHtmlAttr($driver->getSourceIdentifier())?>', recordId:'<?=$this->escapeHtmlAttr($driver->getUniqueID())?>', size:'<?=$this->escapeHtmlAttr($size)?>'}, $('#cover-<?=$driver->getUniqueID()?>'))"
+              <?php if ($linkPreview): ?>data-linkpreview="true" <?php endif; ?> class="recordcover ajax" alt="<?=$this->escapeHtmlAttr($alt); ?>" />
+          </a>
         </div>
     </div>
 <?php endif; ?>
-- 
GitLab