Add option to hide hierarchy preview in mobile (#4050)

config/vufind/config.ini

@@ -2322,6 +2322,8 @@ treeSearchLimit = 100
 ;simpleContainerLinks = true
 ; If true, throw an exception if hierarchy parent and sequence data is out of sync.
 validateHierarchySequences = true
+; Uncomment to hide tree record preview if display width is too narrow
+;hide_preview_in_narrow_displays = true
 
 ; This section will be used to configure the feedback module.
 ; Set "tab_enabled" to true in order to enable the feedback module.

module/VuFind/src/VuFind/RecordTab/HierarchyTree.php

@@ -208,6 +208,16 @@ public function getSearchLimit()
         return $config->Hierarchy->treeSearchLimit ?? -1;
     }
 
+    /**
+     * Disable record preview when screen width is narrow
+     *
+     * @return bool
+     */
+    public function hidePreviewInNarrowDisplays(): bool
+    {
+        return (bool)$this->config->Hierarchy?->hide_preview_in_narrow_displays;
+    }
+
     /**
      * Get the current active record. Returns record driver if there is an active
      * record or null otherwise.

themes/bootstrap3/js/hierarchy_tree.js

@@ -22,6 +22,9 @@ VuFind.register('hierarchyTree', function HierarchyTree() {
       console.error('Record preview element not found');
       return false;
     }
+    if (window.getComputedStyle(recordEl, null).getPropertyValue('display') === 'none') {
+      return false;
+    }
     const queryParams = new URLSearchParams({id: id, source: treeEl.dataset.source});
     fetch(VuFind.path + '/Hierarchy/GetRecord?' + queryParams.toString())
       .then((response) => response.text())

themes/bootstrap3/templates/RecordTab/collectionhierarchytree.phtml

@@ -1,13 +1,20 @@
 <?php
   $this->treeContext = 'Collection';
   $this->treePreviewElement = '#tree-preview';
+
+  $previewAttrs = [
+    'id' => 'tree-preview',
+  ];
+  if ($this->tab->hidePreviewInNarrowDisplays()) {
+    $previewAttrs['class'] = 'hidden-xs';
+  }
 ?>
 
 <div class="collection-hierarchytree">
   <div class="tree-panel">
     <?=$this->render('RecordTab/hierarchytree.phtml')?>
   </div>
-  <div id="tree-preview">
+  <div <?=$this->htmlAttributes($previewAttrs)?>>
     <?php if (($collectionRecord = $this->tab->getActiveRecord()) !== false): ?>
       <?php if ($collectionRecord === null): ?>
         <?=$this->render('collection/collection-record-error.phtml')?>

themes/bootstrap5/js/hierarchy_tree.js

@@ -22,6 +22,9 @@ VuFind.register('hierarchyTree', function HierarchyTree() {
       console.error('Record preview element not found');
       return false;
     }
+    if (window.getComputedStyle(recordEl, null).getPropertyValue('display') === 'none') {
+      return false;
+    }
     const queryParams = new URLSearchParams({id: id, source: treeEl.dataset.source});
     fetch(VuFind.path + '/Hierarchy/GetRecord?' + queryParams.toString())
       .then((response) => response.text())

themes/bootstrap5/templates/RecordTab/collectionhierarchytree.phtml

@@ -1,13 +1,20 @@
 <?php
   $this->treeContext = 'Collection';
   $this->treePreviewElement = '#tree-preview';
+
+  $previewAttrs = [
+    'id' => 'tree-preview',
+  ];
+  if ($this->tab->hidePreviewInNarrowDisplays()) {
+    $previewAttrs['class'] = 'hidden-xs';
+  }
 ?>
 
 <div class="collection-hierarchytree">
   <div class="tree-panel">
     <?=$this->render('RecordTab/hierarchytree.phtml')?>
   </div>
-  <div id="tree-preview">
+  <div <?=$this->htmlAttributes($previewAttrs)?>>
     <?php if (($collectionRecord = $this->tab->getActiveRecord()) !== false): ?>
       <?php if ($collectionRecord === null): ?>
         <?=$this->render('collection/collection-record-error.phtml')?>