From 63489d9aab188ea16e3359c6b120a9c9fde55059 Mon Sep 17 00:00:00 2001
From: Robert Lange <robert.lange@uni-leipzig.de>
Date: Wed, 6 Jan 2021 14:37:30 +0100
Subject: [PATCH] refs #18845 [finc] optimize ajax covers
for details see issue/18845
---
.../finc/src/finc/View/Helper/Root/Record.php | 18 ++++++++-
themes/finc/js/covers.js | 21 ++++++++++
themes/finc/scss/compiled.scss | 8 +++-
.../DefaultRecord/collection-info.phtml | 2 +-
.../RecordDriver/DefaultRecord/core.phtml | 2 +-
.../DefaultRecord/record-icon-class.phtml | 1 -
.../DefaultRecord/record-icon-text.phtml | 20 ++++++++++
.../DefaultRecord/record-icon.phtml | 38 +++++++------------
.../DefaultRecord/result-list.phtml | 3 +-
.../FincMissing/result-list.phtml | 2 +-
.../templates/RecordDriver/SolrAI/core.phtml | 2 +-
.../RecordDriver/SolrAI/result-list.phtml | 1 +
.../RecordDriver/SolrLido/core.phtml | 2 +-
.../RecordDriver/SolrMarc/core.phtml | 2 +-
.../templates/myresearch/historicloans.phtml | 2 +-
.../templates/myresearch/illrequests.phtml | 2 +-
themes/finc/templates/record/cover.phtml | 37 +++++++++++-------
17 files changed, 111 insertions(+), 52 deletions(-)
create mode 100644 themes/finc/templates/RecordDriver/DefaultRecord/record-icon-text.phtml
diff --git a/module/finc/src/finc/View/Helper/Root/Record.php b/module/finc/src/finc/View/Helper/Root/Record.php
index c12efed0937..847bec98d2c 100644
--- a/module/finc/src/finc/View/Helper/Root/Record.php
+++ b/module/finc/src/finc/View/Helper/Root/Record.php
@@ -116,7 +116,7 @@ class Record extends \VuFind\View\Helper\Root\Record
/**
* Get the CSS class used to properly render an icon for given value
*
- * @param string $value Value to convert into CSS class
+ * @param string $value (identifier) Value to convert into CSS class
* @param string $classfile Define alternative file for icon class without
* suffix. Default: record-icon-class.phtml
*
@@ -130,6 +130,20 @@ class Record extends \VuFind\View\Helper\Root\Record
);
}
+ /**
+ * Get the CSS class used to properly render an icon for given value
+ *
+ * @param string $classfile Define alternative file for icon text without
+ *
+ * @return string
+ */
+ public function getRecordIconText($classfile = 'record-icon-text')
+ {
+ return $this->renderTemplate(
+ $classfile . '.phtml'
+ );
+ }
+
/**
* Returns if style based icons should be shown (if covers are disabled!)
*
@@ -338,7 +352,7 @@ class Record extends \VuFind\View\Helper\Root\Record
}
// is pattern set and matches so try rewrite url
if (isset($r['pattern']) && 0 != preg_match('/' . $r['pattern'] . '/i', trim($link['url']))) {
- // if function is set and available then perform on url
+ // if function is set and available then perform on url
if (isset($r['function']) && is_callable($r['function'])) {
$link['url'] = $r['function']($link['url']);
}
diff --git a/themes/finc/js/covers.js b/themes/finc/js/covers.js
index 1f150538799..f54f93b677c 100644
--- a/themes/finc/js/covers.js
+++ b/themes/finc/js/covers.js
@@ -1,3 +1,22 @@
+/* global Finc */
+// show picture in large size after click within a modal
+function registerCoverForModal(anchor, url) {
+ if (anchor === null || anchor === undefined || url === null || url === undefined) {
+ return;
+ }
+
+ anchor.click(function(event) {
+ event.preventDefault();
+ VuFind.modal('show');
+ var largeSizeUrl = url + '&size=large';
+ $.get(largeSizeUrl).done(function() {
+ $('#modal').find('.modal-body').html('<img src="' + largeSizeUrl + '">');
+ }).fail(function() {
+ $('#modal').find('.modal-body').html('<img src="' + url + '">');
+ });
+ });
+}
+
/* this is a backport from VF 7 core, remove on upgrade */
/* global VuFind */
function loadCoverByElement(data, element) {
@@ -15,6 +34,7 @@ function loadCoverByElement(data, element) {
anchor.show();
anchor.attr('href', response.data.url);
anchor.removeClass('hidden'); // finc specific
+ registerCoverForModal(anchor, response.data.url); // finc specific
} else {
img.remove();
if (typeof response.data.html !== 'undefined') {
@@ -45,5 +65,6 @@ function loadCovers() {
loadCoverByElement(data, $(this));
});
}
+
// 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 094ad9742b4..79421497168 100644
--- a/themes/finc/scss/compiled.scss
+++ b/themes/finc/scss/compiled.scss
@@ -2172,8 +2172,14 @@ footer {
}
span {
- font-size: .8em;
+ font-size: 1rem;
+ padding-top: .75rem;
+ text-align: center;
width: 100%;
+
+ @media screen and (max-width: $screen-xs-max) {
+ display: block;
+ }
}
}
diff --git a/themes/finc/templates/RecordDriver/DefaultRecord/collection-info.phtml b/themes/finc/templates/RecordDriver/DefaultRecord/collection-info.phtml
index da6f1ba8e88..9a632703f39 100644
--- a/themes/finc/templates/RecordDriver/DefaultRecord/collection-info.phtml
+++ b/themes/finc/templates/RecordDriver/DefaultRecord/collection-info.phtml
@@ -6,7 +6,7 @@
$cover = $coverDetails['html'];
$preview = $this->record($this->driver)->getPreviews(); ?>
<?php if ($QRCode || $cover || $preview): ?>
- <div class="media-left <?=$this->escapeHtmlAttr($coverDetails['size'])?>" aria-hidden="<?=$cover?'true':'false'?>>
+ <div class="media-left <?=$this->escapeHtmlAttr($coverDetails['size'])?>">
<?php /* Display thumbnail if appropriate: */ ?>
<?php if ($cover): ?>
<?=$cover?>
diff --git a/themes/finc/templates/RecordDriver/DefaultRecord/core.phtml b/themes/finc/templates/RecordDriver/DefaultRecord/core.phtml
index abfa3146c70..2fb24aa1bf3 100644
--- a/themes/finc/templates/RecordDriver/DefaultRecord/core.phtml
+++ b/themes/finc/templates/RecordDriver/DefaultRecord/core.phtml
@@ -9,7 +9,7 @@
$preview = $this->record($this->driver)->getPreviews();
?>
<?php if ($QRCode || $cover || $preview): ?>
- <div class="media-left <?= $this->escapeHtmlAttr($coverDetails['size']) ?> img-col" aria-hidden="<?=$cover?'true':'false'?>">
+ <div class="media-left <?= $this->escapeHtmlAttr($coverDetails['size']) ?> img-col">
<?php /* Display thumbnail if appropriate: */ ?>
<?php if ($cover): ?>
<?=$cover?>
diff --git a/themes/finc/templates/RecordDriver/DefaultRecord/record-icon-class.phtml b/themes/finc/templates/RecordDriver/DefaultRecord/record-icon-class.phtml
index 7e915e408fb..c9db1eba114 100644
--- a/themes/finc/templates/RecordDriver/DefaultRecord/record-icon-class.phtml
+++ b/themes/finc/templates/RecordDriver/DefaultRecord/record-icon-class.phtml
@@ -2,7 +2,6 @@
$normalizedValue = preg_replace('/[^a-z0-9]/', '', strtolower($this->value));
// Convert normalizedValue to styles
-// finc: same list of states for icons like in de_15 #13704 - VE
switch ($normalizedValue) {
case 'local':
echo 'fa-home';
diff --git a/themes/finc/templates/RecordDriver/DefaultRecord/record-icon-text.phtml b/themes/finc/templates/RecordDriver/DefaultRecord/record-icon-text.phtml
new file mode 100644
index 00000000000..50bd4d1b6e9
--- /dev/null
+++ b/themes/finc/templates/RecordDriver/DefaultRecord/record-icon-text.phtml
@@ -0,0 +1,20 @@
+<!-- finc: recordDriver - DefaultRecord - record-icon-text -->
+<?php
+ /* block copied from record-icon - RL */
+ $recordType = $this->driver->getRecordType();
+ if ($recordType == "marcfincpda") {
+ $type = $recordType;
+ } elseif ($recordType == "lido") {
+ $type = "object";
+ } else {
+ $type = implode('', $this->driver->getFacetAvail());
+ }
+?>
+<?php if ($iconClass = $this->record($this->driver)->getRecordIconClass($type)): ?>
+ <span class="access-icon hidden-print">
+ <span>
+ <?=$this->translate("($iconClass)")?>
+ </span>
+ </span>
+<?php endif; ?>
+<!-- finc: recordDriver - DefaultRecord - record-icon-text - END -->
\ No newline at end of file
diff --git a/themes/finc/templates/RecordDriver/DefaultRecord/record-icon.phtml b/themes/finc/templates/RecordDriver/DefaultRecord/record-icon.phtml
index b1326e32980..b36f126e35c 100644
--- a/themes/finc/templates/RecordDriver/DefaultRecord/record-icon.phtml
+++ b/themes/finc/templates/RecordDriver/DefaultRecord/record-icon.phtml
@@ -1,30 +1,18 @@
<!-- finc: recordDriver - DefaultRecord - record-icon -->
<?php
-/* finc: template is identical with de_15 #13704 - VE */
-
-/*$formats = [];
-foreach ($this->driver->getFormats() as $format) {
- $formats[] = $this->record($this->driver)->getRecordIconClass($format);
-}
-$formats = array_unique($formats);
-asort($formats);
-?>
-<span class="record-icon"><img src="<?=$this->imageLink("small/".array_pop($formats).".png")?>" class="hidden-xs" alt="<?=$this->transEsc("record icon")?>" /></span>
-*/
-
-if ($this->driver->getRecordType() == "marcfincpda") {
- $iconClass = $this->record($this->driver)->getRecordIconClass("marcfincpda");
-} elseif ($this->driver->getRecordType() == "lido") {
- $iconClass = $this->record($this->driver)->getRecordIconClass("object");
-} else {
- /* finc: solr field facet_avail instead of access_facet (field deprecated) #15375 - GG */
- $facetAvail = $this->driver->getFacetAvail();
- $facetAvail = implode('', $facetAvail);
- $iconClass = $this->record($this->driver)->getRecordIconClass($facetAvail);
-}
+ /* finc: template is NOT identical with de_15 - RL */
+ $recordType = $this->driver->getRecordType();
+ if ($recordType == "marcfincpda") {
+ $type = $recordType;
+ } elseif ($recordType == "lido") {
+ $type = "object";
+ } else {
+ $type = implode('', $this->driver->getFacetAvail());
+ }
+ $iconClass = $this->record($this->driver)->getRecordIconClass($type);
?>
<span class="access-icon hidden-print">
- <i class="fa <?=$iconClass?>"></i>
- <span class="hidden-xs"> <?=$this->transEsc("$this->escapeHtml($iconClass)")?></span>
+ <i aria-hidden="true" class="fa <?=$iconClass?>"></i>
+ <?php /* separate access text from icon - moved to cover.phtml */ ?>
</span>
-<!-- finc: recordDriver - DefaultRecord - record-icon - END -->
+<!-- finc: recordDriver - DefaultRecord - record-icon - END -->
\ No newline at end of file
diff --git a/themes/finc/templates/RecordDriver/DefaultRecord/result-list.phtml b/themes/finc/templates/RecordDriver/DefaultRecord/result-list.phtml
index 384afa895b7..767f185304e 100644
--- a/themes/finc/templates/RecordDriver/DefaultRecord/result-list.phtml
+++ b/themes/finc/templates/RecordDriver/DefaultRecord/result-list.phtml
@@ -8,7 +8,7 @@ $thumbnailAlignment = $this->record($this->driver)->getThumbnailAlignment('resul
$describedById = $driver->getSourceIdentifier() . '|' . $driver->getUniqueId();
if ($cover):
ob_start(); ?>
- <div class="media-<?=$thumbnailAlignment?> <?=$this->escapeHtmlAttr($coverDetails['size'])?>" aria-hidden="true">
+ <div class="media-<?=$thumbnailAlignment?> <?=$this->escapeHtmlAttr($coverDetails['size'])?>">
<?=$cover?>
</div>
<?php $thumbnail = ob_get_contents(); ?>
@@ -18,6 +18,7 @@ if ($cover):
<?php ob_start(); ?>
<div class="media-<?=$thumbnailAlignment?> record-icon">
<?=$this->record($this->driver)->getRecordIcon()?>
+ <?=$this->record($this->driver)->getRecordIconText()?>
</div>
<?php $thumbnail = ob_get_contents(); ?>
<?php ob_end_clean(); ?>
diff --git a/themes/finc/templates/RecordDriver/FincMissing/result-list.phtml b/themes/finc/templates/RecordDriver/FincMissing/result-list.phtml
index aab0e1066fe..d6edbf31147 100644
--- a/themes/finc/templates/RecordDriver/FincMissing/result-list.phtml
+++ b/themes/finc/templates/RecordDriver/FincMissing/result-list.phtml
@@ -13,7 +13,7 @@ $thumbnail = false;
$thumbnailAlignment = $this->record($this->driver)->getThumbnailAlignment('result');
if ($cover):
ob_start(); ?>
- <div class="media-<?=$thumbnailAlignment?> <?=$this->escapeHtmlAttr($coverDetails['size'])?>" aria-hidden="true">
+ <div class="media-<?=$thumbnailAlignment?> <?=$this->escapeHtmlAttr($coverDetails['size'])?>">
<?=$cover?>
</div>
<?php $thumbnail = ob_get_contents(); ?>
diff --git a/themes/finc/templates/RecordDriver/SolrAI/core.phtml b/themes/finc/templates/RecordDriver/SolrAI/core.phtml
index 0898ed1578e..8ff58d1fdd3 100644
--- a/themes/finc/templates/RecordDriver/SolrAI/core.phtml
+++ b/themes/finc/templates/RecordDriver/SolrAI/core.phtml
@@ -10,7 +10,7 @@
$preview = $this->record($this->driver)->getPreviews();
?>
<?php if ($QRCode || $cover || $preview): ?>
- <div class="media-left <?= $this->escapeHtmlAttr($coverDetails['size']) ?> img-col" aria-hidden="<?=$cover?'true':'false'?>">
+ <div class="media-left <?= $this->escapeHtmlAttr($coverDetails['size']) ?> img-col">
<?php /* Display thumbnail if appropriate: */ ?>
<?php if ($cover): ?>
<?=$cover?>
diff --git a/themes/finc/templates/RecordDriver/SolrAI/result-list.phtml b/themes/finc/templates/RecordDriver/SolrAI/result-list.phtml
index 0b8dc222334..16be9bd855b 100644
--- a/themes/finc/templates/RecordDriver/SolrAI/result-list.phtml
+++ b/themes/finc/templates/RecordDriver/SolrAI/result-list.phtml
@@ -16,6 +16,7 @@ if ($cover):
<?php ob_start(); ?>
<div class="media-<?=$thumbnailAlignment?> record-icon">
<?=$this->record($this->driver)->getRecordIcon()?>
+ <?=$this->record($this->driver)->getRecordIconText()?>
</div>
<?php $thumbnail = ob_get_contents(); ?>
<?php ob_end_clean(); ?>
diff --git a/themes/finc/templates/RecordDriver/SolrLido/core.phtml b/themes/finc/templates/RecordDriver/SolrLido/core.phtml
index a2022ca6cc3..8eed15270f9 100644
--- a/themes/finc/templates/RecordDriver/SolrLido/core.phtml
+++ b/themes/finc/templates/RecordDriver/SolrLido/core.phtml
@@ -30,7 +30,7 @@
$preview = $this->record($this->driver)->getPreviews();
?>
<?php if ($QRCode || $cover || $preview): ?>
- <div class="media-left <?=$this->escapeHtmlAttr($coverDetails['size'])?> img-col" aria-hidden="<?=$cover?'true':'false'?>">
+ <div class="media-left <?=$this->escapeHtmlAttr($coverDetails['size'])?> img-col"?>">
<?php /* Display thumbnail if appropriate: */ ?>
<?php if ($cover): ?>
<?=$cover?>
diff --git a/themes/finc/templates/RecordDriver/SolrMarc/core.phtml b/themes/finc/templates/RecordDriver/SolrMarc/core.phtml
index d0013407559..36078b3bbbd 100644
--- a/themes/finc/templates/RecordDriver/SolrMarc/core.phtml
+++ b/themes/finc/templates/RecordDriver/SolrMarc/core.phtml
@@ -10,7 +10,7 @@
$preview = $this->record($this->driver)->getPreviews();
?>
<?php if ($QRCode || $cover || $preview): ?>
- <div class="media-left <?=$this->escapeHtmlAttr($coverDetails['size'])?> img-col" aria-hidden="<?=$cover?'true':'false'?>">
+ <div class="media-left <?=$this->escapeHtmlAttr($coverDetails['size'])?> img-col">
<?php /* Display thumbnail if appropriate: */ ?>
<?php if ($cover): ?>
<?=$cover?>
diff --git a/themes/finc/templates/myresearch/historicloans.phtml b/themes/finc/templates/myresearch/historicloans.phtml
index a86d384a051..44605abc8de 100644
--- a/themes/finc/templates/myresearch/historicloans.phtml
+++ b/themes/finc/templates/myresearch/historicloans.phtml
@@ -51,7 +51,7 @@
$thumbnailAlignment = $this->record($resource)->getThumbnailAlignment('account');
if ($cover):
ob_start(); ?>
- <div class="media-<?=$thumbnailAlignment ?> <?=$this->escapeHtmlAttr($coverDetails['size'])?>" aria-hidden="true">
+ <div class="media-<?=$thumbnailAlignment ?> <?=$this->escapeHtmlAttr($coverDetails['size'])?>">
<?=$cover ?>
</div>
<?php $thumbnail = ob_get_contents();
diff --git a/themes/finc/templates/myresearch/illrequests.phtml b/themes/finc/templates/myresearch/illrequests.phtml
index 32f59dd9217..6f87f860b07 100644
--- a/themes/finc/templates/myresearch/illrequests.phtml
+++ b/themes/finc/templates/myresearch/illrequests.phtml
@@ -66,7 +66,7 @@
$thumbnailAlignment = $this->record($resource)->getThumbnailAlignment('account');
if ($cover):
ob_start(); ?>
- <div class="media-<?=$thumbnailAlignment ?> <?=$this->escapeHtmlAttr($coverDetails['size'])?>" aria-hidden="true">
+ <div class="media-<?=$thumbnailAlignment ?> <?=$this->escapeHtmlAttr($coverDetails['size'])?>">
<?=$cover ?>
</div>
<?php $thumbnail = ob_get_contents(); ?>
diff --git a/themes/finc/templates/record/cover.phtml b/themes/finc/templates/record/cover.phtml
index d528c97f635..ccc96247aef 100644
--- a/themes/finc/templates/record/cover.phtml
+++ b/themes/finc/templates/record/cover.phtml
@@ -3,22 +3,31 @@
<?php /* If you want to load covers in lightbox use .recordcover;
the class .nocover prevents nocover images from loading in lightbox or can be used to hide the images */ ?>
<?php $alt = $alt ?? $this->transEsc('Cover Image')?>
+<?php $coverId = "cover-" . $driver->getUniqueID() . "-" . time(); ?>
<?php if ($cover): ?>
- <?php if ($this->link): ?><a href="<?=$this->escapeHtmlAttr($this->link)?>" target="_blank" tabindex="-1"><?php endif; ?>
- <img alt="<?=$alt?>" <?php if ($linkPreview): ?>data-linkpreview="true" <?php endif; ?>class="recordcover" src="<?=$this->escapeHtmlAttr($cover); ?>" aria-hidden="true"/>
- <?php if ($this->link): ?></a><?php endif; ?>
+ <?php if ($this->link): ?><a id="<?=$coverId?>" href="<?=$this->escapeHtmlAttr($this->link)?>" tabindex="-1" aria-hidden="true"><?php endif; ?>
+ <img alt="<?=$alt?>" <?php if ($linkPreview): ?>data-linkpreview="true" <?php endif; ?>class="recordcover" src="<?=$this->escapeHtmlAttr($cover); ?>" />
+ <?php if ($this->link): ?>
+ </a>
+ <script>
+ registerCoverForModal($('#<?=$coverId?>'), '<?=$this->link?>');
+ </script>
+ <?php endif; ?>
<?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" />
+ <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" tabindex="-1" />
<?php else: ?>
- <div id="cover-<?=$driver->getUniqueID()?>" class="ajaxcover">
- <div class="spinner"><i class="fa fa-spinner fa-spin"></i></div>
- <div class="cover-container">
- <?=$this->render('record/coverReplacement')?>
- <a class="coverlink hidden" tabindex="-1">
- <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>
+ <div id="<?=$coverId?>" class="ajaxcover">
+ <div class="spinner"><i class="fa fa-spinner fa-spin"></i></div>
+ <div class="cover-container">
+ <?=$this->render('record/coverReplacement')?>
+ <a class="coverlink hidden" aria-hidden="true" tabindex="-1">
+ <img <?php if ($linkPreview): ?>data-linkpreview="true" <?php endif; ?> class="recordcover ajax" alt="<?=$this->escapeHtmlAttr($alt); ?>" />
+ </a>
+ <script>
+ loadCoverByElement({source:'<?=$this->escapeHtmlAttr($driver->getSourceIdentifier())?>', recordId:'<?=$this->escapeHtmlAttr($driver->getUniqueID())?>', size:'<?=$this->escapeHtmlAttr($size)?>'}, $('#<?=$coverId?>'));
+ </script>
+ </div>
+ </div>
<?php endif; ?>
+<?=$this->record($this->driver)->getRecordIconText()?>
<!-- finc: record - cover - END -->
--
GitLab