Add bootstrap5 theme

.gitignore

@@ -26,6 +26,7 @@ node_modules
 package-lock.json
 public/swagger-ui
 tests/phpcs.cache.json
+themes/bootstrap5/scss/vendor/bootstrap
 local/DirLocations.ini
 local/config/vufind/*.ini
 local/config/vufind/*.json

Gruntfile.js

@@ -16,11 +16,14 @@ module.exports = function(grunt) {
     var parts = file.split('/');
     parts.pop(); // eliminate filename
 
-    // initialize search path with directory containing LESS file
+    // initialize search path with directory containing the LESS or SCSS file
     var retVal = [];
     retVal.push(parts.join('/'));
     retVal.push(parts.join('/') + '/vendor/');
 
+    var themeBase = parts.slice(0, -1);
+    retVal.push(themeBase.join('/') + '/node_modules/');
+
     // Iterate through theme.config.php files collecting parent themes in search path:
     while (config = fs.readFileSync("themes/" + parts[1] + "/theme.config.php", "UTF-8")) {
       // First identify mixins:
@@ -44,6 +47,9 @@ module.exports = function(grunt) {
       parts[1] = matches[1];
       retVal.push(parts.join('/') + '/');
       retVal.push(parts.join('/') + '/vendor/');
+
+      var parentThemeBase = parts.slice(0, -1);
+      retVal.push(parentThemeBase.join('/') + '/node_modules/');
     }
     return retVal;
   }
@@ -57,7 +63,7 @@ module.exports = function(grunt) {
     }
   }];
 
-  grunt.initConfig({
+  const gruntConfig = {
     // LESS compilation
     less: {
       compile: {
@@ -77,6 +83,7 @@ module.exports = function(grunt) {
       }
     },
     // SASS compilation
+    // 'scss' is also mapped to 'scssonly' below
     'scss': {
       'dart-sass': {
         options: {
@@ -201,7 +208,11 @@ module.exports = function(grunt) {
         tasks: ['scss']
       }
     }
-  });
+  };
+  // scssonly compiles scss files for themes that don't use less
+  gruntConfig.scssonly = gruntConfig.scss;
+
+  grunt.initConfig(gruntConfig);
 
   grunt.registerMultiTask('lessdev', function lessWithMaps() {
     grunt.config.set('less', {
@@ -224,9 +235,13 @@ module.exports = function(grunt) {
     grunt.config.set('dart-sass', getSassConfig(this.data.options, false));
     grunt.task.run('dart-sass');
   });
+  grunt.registerMultiTask('scssonly', function sassScan() {
+    grunt.config.set('dart-sass', getSassConfig(this.data.options, false, false));
+    grunt.task.run('dart-sass');
+  });
 
   grunt.registerMultiTask('check:scss', function sassCheck() {
-    grunt.config.set('dart-sass', getSassConfig(this.data.options, true));
+    grunt.config.set('dart-sass', getSassConfig(this.data.options, true, true));
     grunt.task.run('dart-sass');
   });
 
@@ -244,11 +259,12 @@ module.exports = function(grunt) {
     - grunt lessToSass  = transpile all LESS files to SASS.`);
   });
 
-  function getSassConfig(additionalOptions, checkOnly) {
+  function getSassConfig(additionalOptions, checkOnly, themesWithLess = null) {
     var sassConfig = {},
       path = require('path'),
       themeList = fs.readdirSync(path.resolve('themes')).filter(function (theme) {
-        return fs.existsSync(path.resolve('themes/' + theme + '/scss/compiled.scss'));
+        return fs.existsSync(path.resolve('themes/' + theme + '/scss/compiled.scss'))
+          && (null === themesWithLess || themesWithLess === fs.existsSync(path.resolve('themes/' + theme + '/less/compiled.less')));
       });
 
     for (var i in themeList) {

build.xml

@@ -116,13 +116,15 @@
     <phingcall target="eslint-report"/>
     <phingcall target="jshint-report"/>
     <phingcall target="phpstan-checkstyle"/>
+    <phingcall target="check-bootstrap5"/>
   </target>
 
   <!-- Quality Assurance Tasks -->
   <target name="qa-console" description="quality assurance tasks">
     <!-- Call standard tasks -->
     <phingcall target="qa-js-and-less"/>
     <phingcall target="qa-php"/>
+    <phingcall target="check-bootstrap5"/>
   </target>
 
   <!-- Quality Assurance Javascript Tasks -->
@@ -958,4 +960,154 @@ ${git_status}
       </filterchain>
     </reflexive>
   </target>
+
+  <!-- Update bootstrap3 templates from bootstrap5 -->
+  <!-- N.B. This destroys any existing bootstrap3 templates (except explicitly excluded ones) -->
+  <target name="update-bootstrap3">
+    <property name="templatesdir" value="${srcdir}/themes/bootstrap3/templates" />
+    <if>
+      <available file="${templatesdir}"></available>
+      <then>
+        <echo message="Checking for uncommitted changes in ${templatesdir}" />
+        <exec command="git diff --exit-code ${templatesdir}" checkreturn="true" passthru="true" />
+        <delete failonerror="true">
+          <fileset dir="${templatesdir}">
+            <exclude name="header.phtml" />
+          </fileset>
+        </delete>
+      </then>
+    </if>
+    <mkdir dir="${templatesdir}"></mkdir>
+    <copy todir="${templatesdir}">
+      <fileset dir="${srcdir}/themes/bootstrap5/templates" defaultexcludes="false">
+        <exclude name="header.phtml" />
+        <exclude name="RecordTab/similaritemscarousel.phtml" />
+      </fileset>
+    </copy>
+    <reflexive>
+      <fileset dir="${templatesdir}">
+        <include pattern="**/*.phtml" />
+        <exclude name="header.phtml" />
+        <exclude name="RecordTab/similaritemscarousel.phtml" />
+      </fileset>
+      <filterchain>
+        <replaceregexp>
+          <!-- HTML attributes -->
+          <regexp pattern=" data-bs-(dismiss|ride|slide|slide-to|target|toggle)=" replace=" data-\1=" />
+
+          <!-- HTMLAttributes helper -->
+          <regexp pattern="'data-bs-(dismiss|target|toggle)'" replace="'data-\1'" />
+        </replaceregexp>
+      </filterchain>
+    </reflexive>
+  </target>
+
+  <!-- Update bootstrap5 templates from bootstrap3 -->
+  <!-- N.B. This destroys any existing bootstrap5 templates (except explicitly excluded ones) -->
+  <target name="update-bootstrap5">
+    <property name="templatesdir" value="${srcdir}/themes/bootstrap5/templates" />
+    <if>
+      <available file="${templatesdir}"></available>
+      <then>
+        <echo message="Checking for uncommitted changes in ${templatesdir}" />
+        <exec command="git diff --exit-code ${templatesdir}" checkreturn="true" passthru="true" />
+        <delete failonerror="true">
+          <fileset dir="${templatesdir}">
+            <exclude name="header.phtml" />
+            <exclude name="RecordTab/similaritemscarousel.phtml" />
+          </fileset>
+        </delete>
+      </then>
+    </if>
+    <mkdir dir="${templatesdir}"></mkdir>
+    <copy todir="${templatesdir}">
+      <fileset dir="${srcdir}/themes/bootstrap3/templates" defaultexcludes="false">
+        <exclude name="header.phtml" />
+        <exclude name="RecordTab/similaritemscarousel.phtml" />
+      </fileset>
+    </copy>
+    <reflexive>
+      <fileset dir="${templatesdir}">
+        <include pattern="**/*.phtml" />
+      </fileset>
+      <filterchain>
+        <replaceregexp>
+          <!-- HTML attributes -->
+          <regexp pattern=" data-(dismiss|ride|slide|slide-to|target|toggle)=(?!&quot;vufind)" replace=" data-bs-\1=" />
+
+          <!-- HTMLAttributes helper -->
+          <regexp pattern="'data-(dismiss|target|toggle)'" replace="'data-bs-\1'" />
+        </replaceregexp>
+      </filterchain>
+    </reflexive>
+  </target>
+
+  <!-- Check that bootstrap5 is up to date with bootstrap3 -->
+  <target name="check-bootstrap5">
+    <property override="true" name="check_dir_base" value="${srcdir}/themes/bootstrap3/templates" />
+    <property override="true" name="check_dir_compare" value="${srcdir}/themes/bootstrap5/templates" />
+    <foreach target="check-dir-single-file" param="filename">
+      <fileset dir="${check_dir_base}" defaultexcludes="false">
+        <exclude name="header.phtml" />
+        <exclude name="RecordTab/similaritemscarousel.phtml" />
+        <different targetdir="${check_dir_compare}" ignoreFileTimes="true" />
+      </fileset>
+    </foreach>
+
+    <property override="true" name="check_dir_base" value="${srcdir}/themes/bootstrap3/scss" />
+    <property override="true" name="check_dir_compare" value="${srcdir}/themes/bootstrap5/scss" />
+    <foreach target="check-dir-single-file" param="filename">
+      <fileset dir="${check_dir_base}" defaultexcludes="false">
+        <exclude name="/" />
+        <exclude name="bootstrap.scss" />
+        <exclude name="components/similar-carousel.scss" />
+        <exclude name="vendor/**" />
+        <different targetdir="${check_dir_compare}" ignoreFileTimes="true" />
+      </fileset>
+    </foreach>
+
+    <property override="true" name="check_dir_base" value="${srcdir}/themes/bootstrap3/js" />
+    <property override="true" name="check_dir_compare" value="${srcdir}/themes/bootstrap5/js" />
+    <foreach target="check-dir-single-file" param="filename">
+      <fileset dir="${check_dir_base}" defaultexcludes="false">
+        <exclude name="/" />
+        <exclude name="account_ajax.js" />
+        <exclude name="cart.js" />
+        <exclude name="channels.js" />
+        <exclude name="facets.js" />
+        <exclude name="lightbox.js" />
+        <exclude name="vendor" />
+        <exclude name="vendor/bootstrap-accessibility.min.js" />
+        <exclude name="vendor/bootstrap.min.js" />
+        <different targetdir="${check_dir_compare}" ignoreFileTimes="true" />
+      </fileset>
+    </foreach>
+  </target>
+  <!-- subtask for check-bootstrap5 -->
+  <target name="check-dir-single-file">
+    <loadFile property="base_file" file="${check_dir_base}/${filename}">
+      <filterchain>
+        <replaceregexp>
+          <!-- HTML attributes -->
+          <regexp pattern=" data-(dismiss|ride|slide|slide-to|target|toggle)=(?!&quot;vufind)" replace=" data-bs-\1=" />
+
+          <!-- HTMLAttributes helper -->
+          <regexp pattern="'data-(dismiss|target|toggle)'" replace="'data-bs-\1'" />
+
+          <!-- button-size mixin -->
+          <regexp pattern="@include button-size\((.+),(.+),(.+),(.+),(.+)\)" replace="@include button-size(\1,\2,\3,\5)" />
+        </replaceregexp>
+      </filterchain>
+    </loadFile>
+    <loadFile property="compare_file" file="${check_dir_compare}/${filename}" />
+    <if>
+      <not>
+        <equals arg1="${base_file}" arg2="${compare_file}" />
+      </not>
+      <then>
+        <fail message="${check_dir_base}/${filename} and ${check_dir_compare}/${filename} are out of sync" />
+      </then>
+    </if>
+  </target>
+
 </project>

composer.json

@@ -136,9 +136,13 @@
         "post-update-cmd": "@phing-install-dependencies",
         "qa": "phing qa-console -Ddefaultconfigs=true",
         "show-outdated": "composer show -oD --ignore-platform-req=ext-oci8",
-        "update-npm-dependencies": [
+        "update-npm-deps": [
             "npm update",
-            "cd themes/bootstrap3 && npm run updateDeps"
+            "cd themes/bootstrap3 && npm run updateDeps",
+            "cd themes/bootstrap5 && npm run updateDeps"
+        ],
+        "install-build-deps": [
+            "cd themes/bootstrap5 && npm run installBuildDeps"
         ]
     }
 }

config/vufind/config.ini

@@ -43,6 +43,8 @@ titleSeparator = "::"
 ;                (named after the earlier, now-deprecated blueprint theme)
 ;   sandal     = bootstrap3 theme with a "flat" styling applied (a newer look
 ;                than bootprint3).
+;   bootstrap5 = HTML5 theme using Bootstrap 5 with minimal styling (beta).
+;   sandal5    = Like sandal, but based on bootstrap5 (beta).
 theme           = sandal
 
 ; Uncomment the following line to use a different default theme for mobile devices.

module/VuFind/src/VuFind/View/Helper/Bootstrap3/BulkAction.php

@@ -38,12 +38,6 @@
  * @license  http://opensource.org/licenses/gpl-2.0.php GNU General Public License
  * @link     https://vufind.org/wiki/development Wiki
  */
-class BulkAction extends \VuFind\View\Helper\Root\BulkAction
+class BulkAction extends \VuFind\View\Helper\Bootstrap5\BulkAction
 {
-    /**
-     * CSS class for button
-     *
-     * @var ?string
-     */
-    protected $buttonClass = 'toolbar-btn';
 }

module/VuFind/src/VuFind/View/Helper/Bootstrap3/CopyToClipboardButton.php

@@ -40,23 +40,6 @@
  * @license  https://opensource.org/licenses/gpl-2.0.php GNU General Public License
  * @link     https://vufind.org/wiki/development Wiki
  */
-class CopyToClipboardButton extends \Laminas\View\Helper\AbstractHelper
+class CopyToClipboardButton extends \VuFind\View\Helper\Bootstrap5\CopyToClipboardButton
 {
-    /**
-     * This helper creates button for copying content of an element into clipboard
-     *
-     * @param string $elementSelector jQuery selector for element to copy
-     *
-     * @return string HTML string
-     */
-    public function __invoke(string $elementSelector)
-    {
-        static $buttonNumber = 0;
-        $buttonNumber++;
-        $view = $this->getView();
-        return $view->render(
-            'Helpers/copy-to-clipboard-button.phtml',
-            ['selector' => $elementSelector, 'buttonNumber' => $buttonNumber]
-        );
-    }
 }

module/VuFind/src/VuFind/View/Helper/Bootstrap3/Flashmessages.php

@@ -38,20 +38,6 @@
  * @license  http://opensource.org/licenses/gpl-2.0.php GNU General Public License
  * @link     https://vufind.org/wiki/development Wiki
  */
-class Flashmessages extends \VuFind\View\Helper\Root\Flashmessages
+class Flashmessages extends \VuFind\View\Helper\Bootstrap5\Flashmessages
 {
-    /**
-     * Get the CSS class to correspond with a messenger namespace
-     *
-     * @param string $ns Namespace
-     *
-     * @return string
-     */
-    protected function getClassForNamespace($ns)
-    {
-        if ($ns == 'error') {
-            $ns = 'danger';
-        }
-        return 'flash-message alert alert-' . $ns;
-    }
 }

module/VuFind/src/VuFind/View/Helper/Bootstrap3/Highlight.php

@@ -38,14 +38,6 @@
  * @license  http://opensource.org/licenses/gpl-2.0.php GNU General Public License
  * @link     https://vufind.org/wiki/development Wiki
  */
-class Highlight extends \VuFind\View\Helper\Root\Highlight
+class Highlight extends \VuFind\View\Helper\Bootstrap5\Highlight
 {
-    /**
-     * Constructor
-     */
-    public function __construct()
-    {
-        $this->startTag = '<mark>';
-        $this->endTag = '</mark>';
-    }
 }