Fluid UI - Infusion

Updated: 02/16/2024

This module integrates the https://fluidproject.org/infusion accessibility framework, which allows visitors to customize site appearance, including font size, line height, site contrast, generate a table of contents from the <h> tags, and underlining and bolding links.

The module adds a "+ show display preferences" tab to the top right of the page, which toggles the UI Options. The framework uses cookies to save user preferences.

The module includes a precompiled framework JS file from the source but you can compile a new file using the source code

For a full description of the module, visit the project page.

Submit bug reports and feature suggestions, or track changes in the issue queue.

About the new D10/D11 Module (02/16/2026)

A lot of things changed in the Infusion Library, it doesn't use Grunt (of course) to compile the library, now it uses NPM to download and compile the library, below I'll list the updated instructions for compiling your version of the infusion library if you want, although the module has a freshly-compiled infusion library for you

Table of contents

• Requirements
• Installation
• Configuration
• Customization <<<<<<< HEAD
• Running the Module PHPUnit tests =======
• Running PHPUnit Functional / FunctionalJavascript tests

097b78d6

Requirements

This module requires the following library:

FluidUI Infusion Library

Installation

• Download the source code

• From the project root directory, run:

  npm install

  For installing/updating the project dependencies

• Also from the project root directory, run:

  npm run build:pkg:custom -- --exclude=jquery --include="fluid-ui-options"

  For building the fluid-ui-options" package from the source files

  • On the "/libraries" directory from your site's document root (probably /web), create the "infusion" directory.

  • Copy "build/src/" from the project root directory to your Drupal /libraries/infusion directory (it should have these directories inside: components, framework, lib, module).

  • In the infusion directory, copy all the files *.js and *.map files from the dist/ project root directory to your Drupal web/libraries/infusion/ directory, it should have these files:

    • infusion-all.js
    • infusion-all.js.map
    • infusion-all-no-jquery.js
    • infusion-all-no-jquery.js.map
    • infusion-framework.js
    • infusion-framework.js.map
    • ... We use infusion-all-no-jquery.js in our project but can experiment with the other javascript files and see if there huge changes performance-wise.

Then install the module as usual with composer:

composer require 'drupal/fluidui:^3.0'

Configuration

You can control the list of pages where the toolbox will not be displayed and also if you want the toolbox to be displayed on admin pages (such as /admin/content, /admin/structure, etc.). The configuration form is found on /admin/config/fluidui/adminsettings

Customization

• Style customization Use the module's css/fluid.css file to customize the appearance and placement of the "+ show display preferences" tab.

• Multilingual support The framework supports multilingual labels and text, but it must be created manually and cannot be created from the Drupal admin UI.

  Follow these instructions and replace "fr" with the language code of your choice:

  1. Copy /messages/en to /messages/fr and translate the contents of variables in the files to your language
  2. Copy /toc/en to /toc/fr and translate TableOfContents.html
  3. Edit /js/fluidui_load.js according to the following example code:

  var langCode = drupalSettings.path.currentLanguage;

  if (langCode == "en") {
    fluid.uiOptions.prefsEditor(".flc-prefsEditor-separatedPanel", {
      tocTemplate: modulePath + "/infusion/src/components/tableOfContents/html/TableOfContents.html",
      terms: {
        templatePrefix: modulePath + "/infusion/src/framework/preferences/html",
        messagePrefix: modulePath + "/messages/en"
      }
    });
  } else if (langCode == "fr") {
    fluid.uiOptions.prefsEditor(".flc-prefsEditor-separatedPanel", {
      tocTemplate: modulePath + "/toc/fr/TableOfContents.html",
      terms: {
        templatePrefix: modulePath + "/infusion/src/framework/preferences/html",
        messagePrefix: modulePath + "/messages/fr"
      }
    });
  }

Running PHPUnit Functional / FunctionalJavascript tests

If you want to run the module tests (located at the directory tests/src), don't forget to set up PHPUnit to work in your local environment (DDEV / Lando), https://www.drupal.org/docs/develop/automated-testing/phpunit-in-drupal/running-phpunit-tests to configure PHPUnit in your local environment, I am using DDEV, so https://www.drupal.org/docs/develop/automated-testing/phpunit-in-drupal/running-phpunit-tests#s-example-values-for-ddev some additional configuration in the phpunit.xml file.

If you want to run the FunctionalJavascript tests, https://www.drupal.org/docs/develop/automated-testing/phpunit-in-drupal/running-phpunit-javascript-tests to set up https://github.com/ddev/ddev-selenium-standalone-chrome, once you have PHPUnit up and working, you can run the tests:

daniel@wweb:/var/www/html$ ./vendor/bin/phpunit -c html/core/phpunit.xml ./html/modules/contrib/fluidui/tests/src/Functional
Functional/           FunctionalJavascript/ 
daniel@wxt61x-web:/var/www/html$ ./vendor/bin/phpunit -c html/core/phpunit.xml ./html/modules/contrib/fluidui/tests/src/Functional/FluidUIAdminPagesTest.php 
PHPUnit 10.5.45 by Sebastian Bergmann and contributors.

Runtime:       PHP 8.3.14
Configuration: /var/www/html/html/core/phpunit.xml

..                                                                  2 / 2 (100%)

HTML output was generated.
http://wxt61x.ddev.site/sites/simpletest/browser_output/Drupal_Tests_fluidui_Functional_FluidUIAdminPagesTest-1-39871407.html
http://wxt61x.ddev.site/sites/simpletest/browser_output/Drupal_Tests_fluidui_Functional_FluidUIAdminPagesTest-2-39871407.html
http://wxt61x.ddev.site/sites/simpletest/browser_output/Drupal_Tests_fluidui_Functional_FluidUIAdminPagesTest-3-39871407.html
http://wxt61x.ddev.site/sites/simpletest/browser_output/Drupal_Tests_fluidui_Functional_FluidUIAdminPagesTest-4-39871407.html
http://wxt61x.ddev.site/sites/simpletest/browser_output/Drupal_Tests_fluidui_Functional_FluidUIAdminPagesTest-5-86002840.html
http://wxt61x.ddev.site/sites/simpletest/browser_output/Drupal_Tests_fluidui_Functional_FluidUIAdminPagesTest-6-86002840.html
http://wxt61x.ddev.site/sites/simpletest/browser_output/Drupal_Tests_fluidui_Functional_FluidUIAdminPagesTest-7-86002840.html
http://wxt61x.ddev.site/sites/simpletest/browser_output/Drupal_Tests_fluidui_Functional_FluidUIAdminPagesTest-8-86002840.html
http://wxt61x.ddev.site/sites/simpletest/browser_output/Drupal_Tests_fluidui_Functional_FluidUIAdminPagesTest-9-86002840.html


Time: 00:11.371, Memory: 6.00 MB

OK (2 tests, 8 assertions)

All the Functional tests passed, you can open in your browser any of these URLs to see the results of the test

Running FunctionalJavascript tests

The procedure to run the Javascript tests is the same, provided that you followed the steps below:

daniel@wxt61x-web:/var/www/html$ ./vendor/bin/phpunit -c html/core/phpunit.xml ./html/modules/contrib/fluidui/tests/src/FunctionalJavascript/FluidUIDisplayWidgetTest.php
PHPUnit 10.5.45 by Sebastian Bergmann and contributors.

Runtime:       PHP 8.3.14
Configuration: /var/www/html/html/core/phpunit.xml

..                                                                  2 / 2 (100%)

HTML output was generated.
http://wxt61x.ddev.site/sites/simpletest/browser_output/Drupal_Tests_fluidui_FunctionalJavascript_FluidUIDisplayWidgetTest-45-48249400.html
http://wxt61x.ddev.site/sites/simpletest/browser_output/Drupal_Tests_fluidui_FunctionalJavascript_FluidUIDisplayWidgetTest-46-48249400.html
http://wxt61x.ddev.site/sites/simpletest/browser_output/Drupal_Tests_fluidui_FunctionalJavascript_FluidUIDisplayWidgetTest-47-63378143.html
http://wxt61x.ddev.site/sites/simpletest/browser_output/Drupal_Tests_fluidui_FunctionalJavascript_FluidUIDisplayWidgetTest-48-63378143.html
http://wxt61x.ddev.site/sites/simpletest/browser_output/Drupal_Tests_fluidui_FunctionalJavascript_FluidUIDisplayWidgetTest-49-63378143.html
http://wxt61x.ddev.site/sites/simpletest/browser_output/Drupal_Tests_fluidui_FunctionalJavascript_FluidUIDisplayWidgetTest-50-63378143.html


Time: 00:23.316, Memory: 6.00 MB

OK (2 tests, 14 assertions)