Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-84450

Create a compatibility helper for Boostrap v4 > v5 data-attributes

XMLWordPrintable

    • MOODLE_500_STABLE
    • MOODLE_500_STABLE
    • MDL-84450-main
    • Hide

      Setup

      1. Download and install block_bs4compat.zip
      2. Add the "Bootstrap 4 compatibility" block to your dashboard.

      Test 1

      1. Set "Debug messages" to level DEVELOPER (site administration -> development -> debugging).
      2. Go to the dashboard
      3. Click on Check compatibility in the installed block
      4. Confirm the examples shown in the "Bootstrap 4 compatibility - Check compatibility" page work correctly
      5. Open the browser console
      6. Confirm there are warning messages indicating "Silent Bootstrap 4 to 5 compatibility"

      Test 2

      1. Set "Debug messages" to level NONE (site administration -> development -> debugging).
      2. Go to the dashboard
      3. Confirm the examples shown in the "Bootstrap 4 compatibility - Check compatibility" page work correctly
      4. Open the browser console
      5. Confirm there are no "Silent Bootstrap 4 to 5 compatibility" messages.
      Show
      Setup Download and install block_bs4compat.zip Add the "Bootstrap 4 compatibility" block to your dashboard. Test 1 Set "Debug messages" to level DEVELOPER (site administration -> development -> debugging). Go to the dashboard Click on Check compatibility in the installed block Confirm the examples shown in the "Bootstrap 4 compatibility - Check compatibility" page work correctly Open the browser console Confirm there are warning messages indicating "Silent Bootstrap 4 to 5 compatibility" Test 2 Set "Debug messages" to level NONE (site administration -> development -> debugging). Go to the dashboard Confirm the examples shown in the "Bootstrap 4 compatibility - Check compatibility" page work correctly Open the browser console Confirm there are no "Silent Bootstrap 4 to 5 compatibility" messages.
    • Hide

      Code verified against automated checks.

      Checked MDL-84450 using repository: https://github.com/roland04/moodle.git

      More information about this report

      Built on: Wed Feb 26 11:37:55 AM UTC 2025

      Show
      Code verified against automated checks. Checked MDL-84450 using repository: https://github.com/roland04/moodle.git main (0 errors / 0 warnings) [branch: MDL-84450-main | CI Job ] More information about this report Built on: Wed Feb 26 11:37:55 AM UTC 2025
    • Hide

      Launching automatic jobs for branch MDL-84450-main

      Built on: Tue Feb 11 08:30:31 AM UTC 2025

      Show
      Launching automatic jobs for branch MDL-84450 -main https://ci.moodle.org/view/Testing/job/DEV.02%20-%20Developer-requested%20PHPUnit/18238/ PHPUnit (sqlsrv) https://ci.moodle.org/view/Testing/job/DEV.01%20-%20Developer-requested%20Behat/62297/ Behat (NonJS - boost and classic) https://ci.moodle.org/view/Testing/job/DEV.01%20-%20Developer-requested%20Behat/62298/ Behat (Firefox - boost) https://ci.moodle.org/view/Testing/job/DEV.01%20-%20Developer-requested%20Behat/62299/ Behat (Firefox - classic) https://ci.moodle.org/view/Testing/job/DEV.01%20-%20Developer-requested%20Behat/62300/ App tests (stable app version) Built on: Tue Feb 11 08:30:31 AM UTC 2025
    • 2
    • HQ 2025 Sprint I1.1 Moppies

      Per Bootstrap migration documentation:

      "[Breaking] Data attributes for all JavaScript plugins are now namespaced to help distinguish Bootstrap functionality from third parties and your own code. For example, we use data-bs-toggle instead of data-toggle."

      Those data attributes have been migrated in core as part of MDL-75669 (in this specific commit: https://github.com/roland04/moodle/commit/1f5ff590b15f5063aed5321d6a1a91f696bc25da).

      Creating a JS helper module that silently does the replacement will help third-party to have some time for the migration.

      The usage should be something like:

      import initBootstrap4Compatibility from 'theme_boost/bs4-compat';
      		 
      [...]
      		 
      // Init Bootstrap 4 compatibility giving an specific element to look into.
      		 
      initBootstrap4Compatibility(document.querySelector('[data-region="bs4-compat"]'));
      		 
       
      		 
      // Init Bootstrap 4 compatibility in the entire document.
      		 
      initBootstrap4Compatibility();

      or 

      require(['theme_boost/bs4-compat'], function(BS4Compat) {
      		 
          BS4Compat();
      		 
      });

        1. screenshot-1.png
          79 kB
          Mikel Martín Corrales
        3. screenshot-2.png
          166 kB
          Mikel Martín Corrales
        4. screenshot-3.png
          117 kB
          Ferran Recio
        5. MDL-84450-2.png
          231 kB
          Ron Carl Alfon Yu
        6. MDL-84450.png
          283 kB
          Ron Carl Alfon Yu

            mikelmartíncorrales Mikel Martín Corrales
            mikelmartíncorrales Mikel Martín Corrales
            Laurent David Laurent David
            Ferran Recio Ferran Recio
            Ron Carl Alfon Yu Ron Carl Alfon Yu
            Votes:
            0 Vote for this issue
            Watchers:
            9 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - 0 minutes
                0m
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 2 days, 6 hours, 50 minutes
                2d 6h 50m

                  Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.