From a7f065901f819a6fa74c15144a1638a2edd0f294 Mon Sep 17 00:00:00 2001
From: Juha Luoma <33253757+LuomaJuha@users.noreply.github.com>
Date: Thu, 14 Nov 2024 15:37:58 +0200
Subject: [PATCH] Add class for components (#4071)

---
 .../src/VuFind/View/Helper/Root/Component.php | 12 ++++++
 .../_ui/components/confirm-button.phtml       |  6 ++-
 .../components/hide-offcanvas-button.phtml    |  6 ++-
 .../_ui/components/menu-button.phtml          |  1 +
 .../_ui/components/show-sidebar-button.phtml  | 42 ++++++++++++++-----
 .../_ui/components/confirm-button.phtml       |  6 ++-
 .../components/hide-offcanvas-button.phtml    |  6 ++-
 .../_ui/components/menu-button.phtml          |  1 +
 .../_ui/components/show-sidebar-button.phtml  | 42 ++++++++++++++-----
 9 files changed, 96 insertions(+), 26 deletions(-)

diff --git a/module/VuFind/src/VuFind/View/Helper/Root/Component.php b/module/VuFind/src/VuFind/View/Helper/Root/Component.php
index 49b80a90c5d..3c2e005adb9 100644
--- a/module/VuFind/src/VuFind/View/Helper/Root/Component.php
+++ b/module/VuFind/src/VuFind/View/Helper/Root/Component.php
@@ -23,6 +23,7 @@
  * @category VuFind
  * @package  View_Helpers
  * @author   Demian Katz <demian.katz@villanova.edu>
+ * @author   Juha Luoma <juha.luoma@helsinki.fi>
  * @license  http://opensource.org/licenses/gpl-2.0.php GNU General Public License
  * @link     https://vufind.org/wiki/development Wiki
  */
@@ -37,11 +38,19 @@
  * @category VuFind
  * @package  View_Helpers
  * @author   Demian Katz <demian.katz@villanova.edu>
+ * @author   Juha Luoma <juha.luoma@helsinki.fi>
  * @license  http://opensource.org/licenses/gpl-2.0.php GNU General Public License
  * @link     https://vufind.org/wiki/development Wiki
  */
 class Component extends AbstractHelper
 {
+    /**
+     * Local cache of CSS class names for components (component name => class name).
+     *
+     * @var array
+     */
+    protected array $cssClassCache = [];
+
     /**
      * Expand path and render template
      *
@@ -67,6 +76,9 @@ public function __invoke(string $name, $params = []): string
 
         ++$invocation;
         $params['_invocation'] = $invocation;
+        // Prefix normalized component name with vc- (VuFind component) to avoid accidental style assignments
+        $this->cssClassCache[$name] ??= 'vc-' . preg_replace('/[^-_A-Za-z0-9]/', '-', $name);
+        $params['_componentClass'] = $this->cssClassCache[$name];
 
         return $this->view->render("_ui/$path/" . $name, $params);
     }
diff --git a/themes/bootstrap3/templates/_ui/components/confirm-button.phtml b/themes/bootstrap3/templates/_ui/components/confirm-button.phtml
index 593d144d4b3..518c9d86e22 100644
--- a/themes/bootstrap3/templates/_ui/components/confirm-button.phtml
+++ b/themes/bootstrap3/templates/_ui/components/confirm-button.phtml
@@ -79,8 +79,12 @@
     $confirmAttrs['data-lightbox-ignore'] = '';
     $cancelAttrs['data-lightbox-ignore'] = '';
   }
+
+  $wrapperAttrs = [
+    'class' => 'btn-group ' . $this->_componentClass,
+  ];
 ?>
-<div class="btn-group">
+<div<?=$this->htmlAttributes($wrapperAttrs)?>>
   <?php if ($this->buttonLink): ?>
     <a<?=$this->htmlAttributes($buttonAttrs)?>><?=$buttonLabelHtml?></a>
   <?php else: ?>
diff --git a/themes/bootstrap3/templates/_ui/components/hide-offcanvas-button.phtml b/themes/bootstrap3/templates/_ui/components/hide-offcanvas-button.phtml
index 3740e235a61..608bba566c5 100644
--- a/themes/bootstrap3/templates/_ui/components/hide-offcanvas-button.phtml
+++ b/themes/bootstrap3/templates/_ui/components/hide-offcanvas-button.phtml
@@ -1,7 +1,11 @@
 <?php
     $side = $this->config()->offcanvasSide();
+    $buttonAttrs = [
+        'class' => 'close-offcanvas btn btn-link ' . $this->_componentClass,
+        'data-toggle' => 'vufind-offcanvas',
+    ];
 ?>
-<button class="close-offcanvas btn btn-link" data-toggle="vufind-offcanvas">
+<button<?=$this->htmlAttributes($buttonAttrs)?>>
     <?='right' === $side ? $this->icon($this->layout()->rtl ? 'offcanvas-hide-left' : 'offcanvas-hide-right') : ''?>
     <span class="btn-link__label"><?=$this->transEsc('navigate_back') ?></span>
     <?='left' === $side ? $this->icon($this->layout()->rtl ? 'offcanvas-hide-right' : 'offcanvas-hide-left') : ''?>
diff --git a/themes/bootstrap3/templates/_ui/components/menu-button.phtml b/themes/bootstrap3/templates/_ui/components/menu-button.phtml
index 3baa61de269..961703a8a4b 100644
--- a/themes/bootstrap3/templates/_ui/components/menu-button.phtml
+++ b/themes/bootstrap3/templates/_ui/components/menu-button.phtml
@@ -5,6 +5,7 @@
   if ($this->wrapperClass ?? false) {
     $wrapperClass = $this->wrapperClass . ' dropdown'; // Bootstrap class
   }
+  $wrapperClass .= ' ' . $this->_componentClass;
 
   $toggleTag = 'button';
   $defaultAttrs = [
diff --git a/themes/bootstrap3/templates/_ui/components/show-sidebar-button.phtml b/themes/bootstrap3/templates/_ui/components/show-sidebar-button.phtml
index 77aa8bfd3e2..35f26f0904d 100644
--- a/themes/bootstrap3/templates/_ui/components/show-sidebar-button.phtml
+++ b/themes/bootstrap3/templates/_ui/components/show-sidebar-button.phtml
@@ -1,11 +1,31 @@
-<?php if (null === ($side = $this->config()->offcanvasSide())): ?>
-    <a class="search-filter-toggle" href="#<?=$this->escapeHtmlAttr($this->targetId)?>" title="<?=$this->transEscAttr($this->title ?? 'sidebar_expand') ?>">
-        <?=$this->transEsc($this->linkText) ?>
-    </a>
-<?php else: ?>
-    <a class="search-filter-toggle icon-link" href="#<?=$this->escapeHtmlAttr($this->targetId)?>" data-toggle="vufind-offcanvas" title="<?=$this->transEscAttr($this->title ?? 'sidebar_expand')?>">
-        <?='left' === $side ? $this->icon($this->layout()->rtl ? 'offcanvas-show-right' : 'offcanvas-show-left', 'icon-link__icon') : ''?>
-        <span class="icon-link__label"><?=$this->transEsc($this->linkText) ?></span>
-        <?='right' === $side ? $this->icon($this->layout()->rtl ? 'offcanvas-show-left' : 'offcanvas-show-right', 'icon-link__icon') : ''?>
-    </a>
-<?php endif; ?>
+<?php
+    $side = $this->config()->offcanvasSide();
+    $aAttrs = [
+        'class' => 'search-filter-toggle ' . $this->_componentClass,
+        'title' => $this->translate($this->title ?? 'sidebar_expand'),
+        'href' => '#' . $this->targetId,
+    ];
+    $iconBefore = '';
+    $iconAfter = '';
+    $spanAttrs = [];
+    if ($side) {
+        $aAttrs['class'] .= ' icon-link';
+        $aAttrs['data-toggle'] = 'vufind-offcanvas';
+        if ($side === 'left') {
+            $iconBefore = $this->icon($this->layout()->rtl ? 'offcanvas-show-right' : 'offcanvas-show-left', 'icon-link__icon');
+        } else {
+            $iconAfter = $this->icon($this->layout()->rtl ? 'offcanvas-show-left' : 'offcanvas-show-right', 'icon-link__icon');
+        }
+        $spanAttrs = [
+            'class' => 'icon-link__label',
+        ];
+    }
+?>
+
+<a<?=$this->htmlAttributes($aAttrs)?>>
+    <?php if ($spanAttrs): ?>
+        <?=$iconBefore?><span<?=$this->htmlAttributes($spanAttrs)?>><?=$this->transEsc($this->linkText);?></span><?=$iconAfter?>
+    <?php else: ?>
+        <?=$this->transEsc($this->linkText);?>
+    <?php endif; ?>
+</a>
diff --git a/themes/bootstrap5/templates/_ui/components/confirm-button.phtml b/themes/bootstrap5/templates/_ui/components/confirm-button.phtml
index 32f5f8c4714..d3c7c44f9eb 100644
--- a/themes/bootstrap5/templates/_ui/components/confirm-button.phtml
+++ b/themes/bootstrap5/templates/_ui/components/confirm-button.phtml
@@ -79,8 +79,12 @@
     $confirmAttrs['data-lightbox-ignore'] = '';
     $cancelAttrs['data-lightbox-ignore'] = '';
   }
+
+  $wrapperAttrs = [
+    'class' => 'btn-group ' . $this->_componentClass,
+  ];
 ?>
-<div class="btn-group">
+<div<?=$this->htmlAttributes($wrapperAttrs)?>>
   <?php if ($this->buttonLink): ?>
     <a<?=$this->htmlAttributes($buttonAttrs)?>><?=$buttonLabelHtml?></a>
   <?php else: ?>
diff --git a/themes/bootstrap5/templates/_ui/components/hide-offcanvas-button.phtml b/themes/bootstrap5/templates/_ui/components/hide-offcanvas-button.phtml
index 3740e235a61..608bba566c5 100644
--- a/themes/bootstrap5/templates/_ui/components/hide-offcanvas-button.phtml
+++ b/themes/bootstrap5/templates/_ui/components/hide-offcanvas-button.phtml
@@ -1,7 +1,11 @@
 <?php
     $side = $this->config()->offcanvasSide();
+    $buttonAttrs = [
+        'class' => 'close-offcanvas btn btn-link ' . $this->_componentClass,
+        'data-toggle' => 'vufind-offcanvas',
+    ];
 ?>
-<button class="close-offcanvas btn btn-link" data-toggle="vufind-offcanvas">
+<button<?=$this->htmlAttributes($buttonAttrs)?>>
     <?='right' === $side ? $this->icon($this->layout()->rtl ? 'offcanvas-hide-left' : 'offcanvas-hide-right') : ''?>
     <span class="btn-link__label"><?=$this->transEsc('navigate_back') ?></span>
     <?='left' === $side ? $this->icon($this->layout()->rtl ? 'offcanvas-hide-right' : 'offcanvas-hide-left') : ''?>
diff --git a/themes/bootstrap5/templates/_ui/components/menu-button.phtml b/themes/bootstrap5/templates/_ui/components/menu-button.phtml
index 936098d08c2..02fd7c4bf9a 100644
--- a/themes/bootstrap5/templates/_ui/components/menu-button.phtml
+++ b/themes/bootstrap5/templates/_ui/components/menu-button.phtml
@@ -5,6 +5,7 @@
   if ($this->wrapperClass ?? false) {
     $wrapperClass = $this->wrapperClass . ' dropdown'; // Bootstrap class
   }
+  $wrapperClass .= ' ' . $this->_componentClass;
 
   $toggleTag = 'button';
   $defaultAttrs = [
diff --git a/themes/bootstrap5/templates/_ui/components/show-sidebar-button.phtml b/themes/bootstrap5/templates/_ui/components/show-sidebar-button.phtml
index 77aa8bfd3e2..35f26f0904d 100644
--- a/themes/bootstrap5/templates/_ui/components/show-sidebar-button.phtml
+++ b/themes/bootstrap5/templates/_ui/components/show-sidebar-button.phtml
@@ -1,11 +1,31 @@
-<?php if (null === ($side = $this->config()->offcanvasSide())): ?>
-    <a class="search-filter-toggle" href="#<?=$this->escapeHtmlAttr($this->targetId)?>" title="<?=$this->transEscAttr($this->title ?? 'sidebar_expand') ?>">
-        <?=$this->transEsc($this->linkText) ?>
-    </a>
-<?php else: ?>
-    <a class="search-filter-toggle icon-link" href="#<?=$this->escapeHtmlAttr($this->targetId)?>" data-toggle="vufind-offcanvas" title="<?=$this->transEscAttr($this->title ?? 'sidebar_expand')?>">
-        <?='left' === $side ? $this->icon($this->layout()->rtl ? 'offcanvas-show-right' : 'offcanvas-show-left', 'icon-link__icon') : ''?>
-        <span class="icon-link__label"><?=$this->transEsc($this->linkText) ?></span>
-        <?='right' === $side ? $this->icon($this->layout()->rtl ? 'offcanvas-show-left' : 'offcanvas-show-right', 'icon-link__icon') : ''?>
-    </a>
-<?php endif; ?>
+<?php
+    $side = $this->config()->offcanvasSide();
+    $aAttrs = [
+        'class' => 'search-filter-toggle ' . $this->_componentClass,
+        'title' => $this->translate($this->title ?? 'sidebar_expand'),
+        'href' => '#' . $this->targetId,
+    ];
+    $iconBefore = '';
+    $iconAfter = '';
+    $spanAttrs = [];
+    if ($side) {
+        $aAttrs['class'] .= ' icon-link';
+        $aAttrs['data-toggle'] = 'vufind-offcanvas';
+        if ($side === 'left') {
+            $iconBefore = $this->icon($this->layout()->rtl ? 'offcanvas-show-right' : 'offcanvas-show-left', 'icon-link__icon');
+        } else {
+            $iconAfter = $this->icon($this->layout()->rtl ? 'offcanvas-show-left' : 'offcanvas-show-right', 'icon-link__icon');
+        }
+        $spanAttrs = [
+            'class' => 'icon-link__label',
+        ];
+    }
+?>
+
+<a<?=$this->htmlAttributes($aAttrs)?>>
+    <?php if ($spanAttrs): ?>
+        <?=$iconBefore?><span<?=$this->htmlAttributes($spanAttrs)?>><?=$this->transEsc($this->linkText);?></span><?=$iconAfter?>
+    <?php else: ?>
+        <?=$this->transEsc($this->linkText);?>
+    <?php endif; ?>
+</a>