Switch to Bootstrap 5 as the base theme.

Gruntfile.local.js

@@ -7,7 +7,13 @@ module.exports = function(grunt) {
   grunt.registerTask("finna:scss", function finnaScssFunc() {
     const config = getFinnaSassConfig({
       outputStyle: style,
-      quietDeps: true
+      quietDeps: true,
+      silenceDeprecations: [
+        'import',
+        'color-functions',
+        'global-builtin',
+        'legacy-js-api'
+      ]
     }, false);
     grunt.config.set('dart-sass', config);
     grunt.task.run('dart-sass');
@@ -82,7 +88,8 @@ module.exports = function(grunt) {
         }
         config.options.includePaths = getLoadPaths('themes/' + themeList[i] + '/scss/finna.scss');
         config.options.includePaths.push('vendor/');
-        config.options.includePaths.push(path.resolve('themes/bootstrap3/scss/vendor'));
+        config.options.includePaths.push(path.resolve('themes/bootstrap5/scss/vendor'));
+        config.options.includePaths.push(path.resolve('themes/bootstrap5/node_modules'));
 
         sassConfig[themeList[i]] = config;
       }

module/Finna/src/Finna/View/Helper/Root/LayoutClass.php

@@ -40,7 +40,7 @@
  * @license  http://opensource.org/licenses/gpl-2.0.php GNU General Public License
  * @link     http://vufind.org/wiki/vufind2:developer_manual Wiki
  */
-class LayoutClass extends \VuFind\View\Helper\Bootstrap3\LayoutClass
+class LayoutClass extends \VuFind\View\Helper\Bootstrap5\LayoutClass
 {
     /**
      * Helper to allow easily configurable page layout -- given a broad class

module/Finna/src/Finna/View/Helper/Root/Navibar.php

@@ -5,7 +5,7 @@
  *
  * PHP version 8
  *
- * Copyright (C) The National Library of Finland 2014.
+ * Copyright (C) The National Library of Finland 2014-2025.
  *
  * This program is free software; you can redistribute it and/or modify
  * it under the terms of the GNU General Public License version 2,
@@ -23,6 +23,7 @@
  * @category VuFind
  * @package  View_Helpers
  * @author   Samuli Sillanpää <[email protected]>
+ * @author   Ere Maijala <[email protected]>
  * @license  http://opensource.org/licenses/gpl-2.0.php GNU General Public License
  * @link     http://vufind.org   Main Site
  */
@@ -42,6 +43,7 @@
  * @category VuFind
  * @package  View_Helpers
  * @author   Samuli Sillanpää <[email protected]>
+ * @author   Ere Maijala <[email protected]>
  * @license  http://opensource.org/licenses/gpl-2.0.php GNU General Public License
  * @link     http://vufind.org   Main Site
  */
@@ -194,20 +196,25 @@ public function getMenuItemUrl(array $data)
      */
     public function getLanguageUrl($lng)
     {
-        $url = $this->view->serverUrl(true);
-        $parts = parse_url($url);
-
-        $params = [];
-        if (isset($parts['query'])) {
-            parse_str($parts['query'], $params);
-            $url = substr($url, 0, strpos($url, '?'));
-        }
+        $url = $this->router->getRequestUri();
+        $params = $url->getQueryAsArray();
         $params['lng'] = $lng;
-        $url .= '?' . http_build_query($params);
-        if (isset($parts['fragment'])) {
-            $url .= '#' . $parts['fragment'];
-        }
-        return $url;
+        $url->setQuery(http_build_query($params));
+        return $url->toString();
+    }
+
+    /**
+     * Check if a URL points to the current page
+     *
+     * @param string $url URL
+     *
+     * @return bool
+     */
+    public function isCurrentPage(string $url): bool
+    {
+        $requestUri = $this->router->getRequestUri();
+        return $url === (string)$requestUri
+            || $url === $requestUri->getPath();
     }
 
     /**

themes/bootstrap5/js/account_ajax.js

@@ -92,8 +92,7 @@ VuFind.register('account', function Account() {
         accountIconEl.dataset.bsToggle = 'tooltip';
         accountIconEl.dataset.bsPlacement = 'bottom';
         accountIconEl.title = VuFind.translate('account_has_alerts');
-        const tooltip = bootstrap.Tooltip.getOrCreateInstance(accountIconEl);
-        tooltip.show();
+        bootstrap.Tooltip.getOrCreateInstance(accountIconEl);
       } else {
         const tooltip = bootstrap.Tooltip.getOrCreateInstance(accountIconEl);
         tooltip.dispose();

themes/bootstrap5/js/lightbox.js

@@ -368,8 +368,8 @@ VuFind.register('lightbox', function Lightbox() {
     // remove nodes on whose click, the modal closes
     var nodesWhichAreNotCloseTargets = focusableNodes.filter(function nodeFilter(node) {
       return !node.hasAttribute("data-lightbox-close") && (
-        !node.hasAttribute("data-dismiss") ||
-        node.getAttribute("data-dismiss") !== "modal"
+        !node.hasAttribute("data-bs-dismiss") ||
+        node.getAttribute("data-bs-dismiss") !== "modal"
       );
     });
 

themes/custom/scss/finna.scss

@@ -1,27 +1,77 @@
-@import "../../finna2/scss/scss-functions";
+// Include Bootstrap functions first (so you can manipulate colors, SVGs, calc, etc)
+@import "scss-functions";
+@import "bootstrap/scss/functions";
 
 // Custom theme variable overrides
 @import "variables-custom";
 
 // Variable overrides
 @import "variables";
 
+// Include Font Awesome
+$fa-font-path: "../../bootstrap5/css/vendor/font-awesome/webfonts" !default;
+@import "vendor/font-awesome/fontawesome";
+@import "vendor/font-awesome/brands";
+@import "vendor/font-awesome/regular";
+@import "vendor/font-awesome/solid";
+@import "vendor/font-awesome/v4-shims";
+
 // Finna Bootstrap variable overrides
 @import "../../finna2/scss/global/bootstrap-variable-overrides";
 
-// Font Awesome (loaded via include path to silence warnings from dependencies)
-@import "font-awesome/font-awesome";
+// Include remainder of required Bootstrap stylesheets (including any separate color mode stylesheets)
+@import "bootstrap/scss/variables";
+
+// Include any map overrides here
+@import "global/bootstrap-map-overrides";
+
+// Include remainder of required parts
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/root";
+@import "bootstrap/scss/reboot";
+
+// Optionally include any other parts as needed
+@import "bootstrap/scss/accordion";
+@import "bootstrap/scss/alert";
+@import "bootstrap/scss/badge";
+@import "bootstrap/scss/breadcrumb";
+@import "bootstrap/scss/buttons";
+@import "bootstrap/scss/button-group";
+@import "bootstrap/scss/card";
+@import "bootstrap/scss/carousel";
+@import "bootstrap/scss/containers";
+@import "bootstrap/scss/dropdown";
+@import "bootstrap/scss/forms";
+@import "bootstrap/scss/grid";
+@import "bootstrap/scss/helpers";
+@import "bootstrap/scss/images";
+@import "bootstrap/scss/list-group";
+@import "bootstrap/scss/modal";
+@import "bootstrap/scss/nav";
+@import "bootstrap/scss/navbar";
+@import "bootstrap/scss/offcanvas";
+@import "bootstrap/scss/pagination";
+@import "bootstrap/scss/popover";
+@import "bootstrap/scss/tables";
+@import "bootstrap/scss/tooltip";
+@import "bootstrap/scss/transitions";
+@import "bootstrap/scss/type";
+@import "bootstrap/scss/utilities";
+
+// Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
+@import "bootstrap/scss/utilities/api";
 
-// Bootstrap v3.4.1 (loaded via include path to silence warnings from dependencies)
-@import "vendor/bootstrap/bootstrap";
+// Bootstrap 3 compatibility layer
+@import "global/finna-bs3-compat";
 
 // Finna variables
 @import "../../finna2/scss/global/variables";
 
-// Bootstrap3 theme components
-@import "../../bootstrap3/scss/components/cookie-consent/index";
-@import "../../bootstrap3/scss/components/keyboard";
-@import "../../bootstrap3/scss/components/trees";
+// Bootstrap5 theme components
+@import "../../bootstrap5/scss/components/cookie-consent/index";
+@import "../../bootstrap5/scss/components/keyboard";
+@import "../../bootstrap5/scss/components/trees";
 
 @import "../../finna2/scss/global";
 @import "../../finna2/scss/finna-other";

themes/custom/templates/content/Additions/header-navibar.phtml

@@ -1,7 +1,7 @@
 <!-- START of: finna - layout/Additions/header-navibar.phtml -->
-<!-- add li elements with class custom to match style if you need links after language options -->
+<?php // add li elements with classes "nav-item custom" to match style if you need links after language options ?>
 <!--
-<li class="custom">
+<li class="nav-item custom">
   <a href="" target="_blank">≤?=$this->transEsc('menu_translate');?></a>
 </li>....
 -->

themes/finna2/js/finna-a11y.js

@@ -4,32 +4,18 @@ finna.a11y = (function a11y() {
    * Initialize event listeners for bootstrap accessibility
    */
   function initA11y() {
-
-    // On dropdown open
-    $(document).on('shown.bs.dropdown', function dropdownOpen(event) {
-      var dropdown = $(event.target);
-
-      // Set aria-expanded to true
-      dropdown.find('.dropdown-toggle').attr('aria-expanded', true);
-
-      // Set focus on the first link in the dropdown
-      setTimeout(function shiftFocus() {
-        dropdown.find('.dropdown-menu li:first-child a').trigger("focus");
-      }, 50);
-    });
-
-    // On dropdown close
-    $(document).on('hidden.bs.dropdown', function dropdownClose(event) {
-      var dropdown = $(event.target);
-
-      // Set aria-expanded to false
-      dropdown.find('.dropdown-toggle').attr('aria-expanded', false);
-
-      // Set focus back to dropdown toggle
-      dropdown.find('.dropdown-toggle').trigger("focus");
+    // Focus first dropdown item when a dropdown is opened
+    document.addEventListener('shown.bs.dropdown', (e) => {
+      const dropdownEl = e.target.closest('.dropdown');
+      if (dropdownEl) {
+        const firstItemEl = dropdownEl.querySelector(':scope > .dropdown-menu > li > .dropdown-item');
+        if (firstItemEl) {
+          firstItemEl.focus();
+        }
+      }
     });
 
-    // Restore focus back to trigger element after lightbox is closed.
+    // Restore focus back to trigger element after lightbox is closed
     $(document).on('show.bs.modal', function triggerFocusShift() {
       let triggerElement = document.activeElement;
       $(document).one('hidden.bs.modal', function restoreFocus() {

themes/finna2/js/finna-bs3-compat.js

@@ -0,0 +1,123 @@
+/*global VuFind*/
+VuFind.register('finnaBootstrap3CompatibilityLayer', function finnaBootstrap3CompatibilityLayer() {
+  /**
+   * Initialize nav support
+   */
+  function initNav() {
+    document.querySelectorAll('.nav').forEach((navEl) => {
+      if (navEl.classList.contains('nav-tabs')) {
+        // Apply active class to tab li for back-compatibility:
+        const observer = new MutationObserver((mutations) => {
+          mutations.forEach((mutation) => {
+            if ('attributes' !== mutation.type || mutation.attributeName !== 'class') {
+              return;
+            }
+            const target = mutation.target;
+            if (target.nodeName === 'A' && target.parentNode && target.classList.contains('active')) {
+              target.parentNode.classList.add('active');
+            } else {
+              target.parentNode.classList.remove('active');
+            }
+          });
+        });
+        observer.observe(navEl, { attributes: true, attributeFilter: ['class'], subtree: true });
+      }
+      navEl.querySelectorAll(':scope > li').forEach((liEl) => {
+        const aEl = liEl.querySelector(':scope > a');
+        if (liEl.classList.contains('dropdown__item')) {
+          if (aEl && !aEl.classList.contains('btn')) {
+            aEl.classList.add('dropdown-item');
+            if (liEl.classList.contains('active')) {
+              aEl.classList.add('active');
+            }
+          }
+        } else if (aEl) {
+          const oldStateA = VuFind.disableTransitions(aEl);
+          if (!aEl.classList.contains('btn') && !aEl.closest('.browsebar')) {
+            aEl.classList.add('nav-link');
+          }
+          if (liEl.classList.contains('active')) {
+            aEl.classList.add('active');
+            if (null === liEl.closest('.searchForm')) {
+              liEl.classList.remove('active');
+            }
+          }
+          // Use a timeout to allow the transition to complete before restoring the state:
+          setTimeout(() => { VuFind.restoreTransitions(aEl, oldStateA); }, 0);
+        }
+      });
+    });
+
+    // Reverse effects of record.js:
+    setTimeout(
+      () => {
+        $('.record-tabs .nav-tabs a').off('shown.bs.tab');
+        document.querySelectorAll('.record-tabs .nav-tabs li').forEach((liEl) => {
+          liEl.removeAttribute('aria-selected');
+        });
+      },
+      0
+    );
+  }
+
+  /**
+   * Initialize breadcrumb support
+   */
+  function initBreadcrumbs() {
+    document.querySelectorAll('.breadcrumb li').forEach((el) => {
+      el.classList.add('breadcrumb-item');
+    });
+  }
+
+  /**
+   * Initialize form element support
+   */
+  function initFormElements() {
+    document.querySelectorAll('select.form-control').forEach((el) => {
+      el.classList.add('form-select');
+    });
+  }
+
+  /**
+   * Initialize pagination support
+   */
+  function initPagination() {
+    document.querySelectorAll('.pagination li').forEach((el) => {
+      el.classList.add('page-item');
+      const linkEl = el.querySelector('a');
+      if (linkEl) {
+        linkEl.classList.add('page-link');
+      } else {
+        el.innerHTML = '<a href="#" class="page-link">' + el.innerHTML + '</a>';
+      }
+    });
+  }
+
+  /**
+   * Initialize dropdown support
+   */
+  function initDropdownStyles() {
+    document.querySelectorAll('ul.dropdown-menu > li > a').forEach((el) => {
+      el.classList.add('dropdown-item');
+    });
+    document.querySelectorAll('.dropdown-menu-right').forEach((el) => {
+      el.classList.add('dropdown-menu-end');
+    });
+  }
+
+  /**
+   * Initialize all back-compatibility support functions
+   */
+  function init() {
+    initNav();
+    initFormElements();
+    initBreadcrumbs();
+    initPagination();
+
+    initDropdownStyles();
+  }
+
+  return {
+    init: init
+  };
+});