Enhance the javascript

Merge branch 'main' into main-lmp-contextual-theme-switcher
Tests: update navbar in visual modal test (#39294 )
2025-07-21 00:02:04 -04:00 · 2023-10-23 17:06:39 +02:00 · 2023-10-23 14:24:27 +02:00 · 2023-10-13 10:28:08 +02:00 · 2023-10-13 07:41:40 +02:00 · 2023-10-12 09:31:14 +02:00
9 changed files with 66 additions and 62 deletions
--- a/js/tests/visual/modal.html
+++ b/js/tests/visual/modal.html
@ -13,21 +13,25 @@
    </style>
  </head>
  <body>
-    <nav class="navbar navbar-full navbar-dark bg-dark">
-      <button class="navbar-toggler hidden-lg-up" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
-      <div class="collapse navbar-expand-md" id="navbarResponsive">
-        <a class="navbar-brand" href="#">This shouldn't jump!</a>
-        <ul class="navbar-nav">
-          <li class="nav-item">
-            <a class="nav-link active" href="#" aria-current="page">Home</a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="#">Link</a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="#">Link</a>
-          </li>
-        </ul>
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+      <div class="container-fluid">
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarResponsive">
+          <a class="navbar-brand" href="#">This shouldn't jump!</a>
+          <ul class="navbar-nav">
+            <li class="nav-item">
+              <a class="nav-link active" href="#" aria-current="page">Home</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#">Link</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#">Link</a>
+            </li>
+          </ul>
+        </div>
      </div>
    </nav>

--- a/package-lock.json
+++ b/package-lock.json
@ -27,7 +27,7 @@
        "@rollup/plugin-commonjs": "^25.0.4",
        "@rollup/plugin-node-resolve": "^15.2.1",
        "@rollup/plugin-replace": "^5.0.2",
-        "autoprefixer": "^10.4.15",
+        "autoprefixer": "^10.4.16",
        "bundlewatch": "^0.3.3",
        "clean-css-cli": "^5.6.2",
        "cross-env": "^7.0.3",
@ -56,7 +56,7 @@
        "lockfile-lint": "^4.12.1",
        "nodemon": "^3.0.1",
        "npm-run-all2": "^6.0.6",
-        "postcss": "^8.4.30",
+        "postcss": "^8.4.31",
        "postcss-cli": "^10.1.0",
        "rollup": "^3.29.3",
        "rollup-plugin-istanbul": "^4.0.0",
@ -2879,9 +2879,9 @@
      }
    },
    "node_modules/autoprefixer": {
-      "version": "10.4.15",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.15.tgz",
-      "integrity": "sha512-KCuPB8ZCIqFdA4HwKXsvz7j6gvSDNhDP7WnUjBleRkKjPdvCmHFuQ77ocavI8FT6NdvlBnE2UFr2H4Mycn8Vew==",
+      "version": "10.4.16",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.16.tgz",
+      "integrity": "sha512-7vd3UC6xKp0HLfua5IjZlcXvGAGy7cBAXTg2lyQ/8WpNhd6SiZ8Be+xm3FyBSYJx5GKcpRCzBh7RH4/0dnY+uQ==",
      "dev": true,
      "funding": [
        {
@ -2899,8 +2899,8 @@
      ],
      "dependencies": {
        "browserslist": "^4.21.10",
-        "caniuse-lite": "^1.0.30001520",
-        "fraction.js": "^4.2.0",
+        "caniuse-lite": "^1.0.30001538",
+        "fraction.js": "^4.3.6",
        "normalize-range": "^0.1.2",
        "picocolors": "^1.0.0",
        "postcss-value-parser": "^4.2.0"
@ -3507,9 +3507,9 @@
      }
    },
    "node_modules/caniuse-lite": {
-      "version": "1.0.30001534",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001534.tgz",
-      "integrity": "sha512-vlPVrhsCS7XaSh2VvWluIQEzVhefrUQcEsQWSS5A5V+dM07uv1qHeQzAOTGIMy9i3e9bH15+muvI/UHojVgS/Q==",
+      "version": "1.0.30001547",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001547.tgz",
+      "integrity": "sha512-W7CrtIModMAxobGhz8iXmDfuJiiKg1WADMO/9x7/CLNin5cpSbuBjooyoIUVB5eyCc36QuTVlkVa1iB2S5+/eA==",
      "dev": true,
      "funding": [
        {
@ -8579,9 +8579,9 @@
      }
    },
    "node_modules/postcss": {
-      "version": "8.4.30",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.30.tgz",
-      "integrity": "sha512-7ZEao1g4kd68l97aWG/etQKPKq07us0ieSZ2TnFDk11i0ZfDW2AwKHYU8qv4MZKqN2fdBfg+7q0ES06UA73C1g==",
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
      "dev": true,
      "funding": [
        {
@ -13461,14 +13461,14 @@
      "dev": true
    },
    "autoprefixer": {
-      "version": "10.4.15",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.15.tgz",
-      "integrity": "sha512-KCuPB8ZCIqFdA4HwKXsvz7j6gvSDNhDP7WnUjBleRkKjPdvCmHFuQ77ocavI8FT6NdvlBnE2UFr2H4Mycn8Vew==",
+      "version": "10.4.16",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.16.tgz",
+      "integrity": "sha512-7vd3UC6xKp0HLfua5IjZlcXvGAGy7cBAXTg2lyQ/8WpNhd6SiZ8Be+xm3FyBSYJx5GKcpRCzBh7RH4/0dnY+uQ==",
      "dev": true,
      "requires": {
        "browserslist": "^4.21.10",
-        "caniuse-lite": "^1.0.30001520",
-        "fraction.js": "^4.2.0",
+        "caniuse-lite": "^1.0.30001538",
+        "fraction.js": "^4.3.6",
        "normalize-range": "^0.1.2",
        "picocolors": "^1.0.0",
        "postcss-value-parser": "^4.2.0"
@ -13890,9 +13890,9 @@
      }
    },
    "caniuse-lite": {
-      "version": "1.0.30001534",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001534.tgz",
-      "integrity": "sha512-vlPVrhsCS7XaSh2VvWluIQEzVhefrUQcEsQWSS5A5V+dM07uv1qHeQzAOTGIMy9i3e9bH15+muvI/UHojVgS/Q==",
+      "version": "1.0.30001547",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001547.tgz",
+      "integrity": "sha512-W7CrtIModMAxobGhz8iXmDfuJiiKg1WADMO/9x7/CLNin5cpSbuBjooyoIUVB5eyCc36QuTVlkVa1iB2S5+/eA==",
      "dev": true
    },
    "chainsaw": {
@ -17593,9 +17593,9 @@
      "dev": true
    },
    "postcss": {
-      "version": "8.4.30",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.30.tgz",
-      "integrity": "sha512-7ZEao1g4kd68l97aWG/etQKPKq07us0ieSZ2TnFDk11i0ZfDW2AwKHYU8qv4MZKqN2fdBfg+7q0ES06UA73C1g==",
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
      "dev": true,
      "requires": {
        "nanoid": "^3.3.6",
--- a/package.json
+++ b/package.json
@ -111,7 +111,7 @@
    "@rollup/plugin-commonjs": "^25.0.4",
    "@rollup/plugin-node-resolve": "^15.2.1",
    "@rollup/plugin-replace": "^5.0.2",
-    "autoprefixer": "^10.4.15",
+    "autoprefixer": "^10.4.16",
    "bundlewatch": "^0.3.3",
    "clean-css-cli": "^5.6.2",
    "cross-env": "^7.0.3",
@ -140,7 +140,7 @@
    "lockfile-lint": "^4.12.1",
    "nodemon": "^3.0.1",
    "npm-run-all2": "^6.0.6",
-    "postcss": "^8.4.30",
+    "postcss": "^8.4.31",
    "postcss-cli": "^10.1.0",
    "rollup": "^3.29.3",
    "rollup-plugin-istanbul": "^4.0.0",
--- a/site/assets/js/code-examples.js
+++ b/site/assets/js/code-examples.js
@ -17,6 +17,7 @@
  // Insert copy to clipboard button before .highlight
  const btnTitle = 'Copy to clipboard'
  const btnEdit = 'Edit on StackBlitz'
+  // const btnTheme = 'Toggle local theme'

  const btnHtml = [
    '<div class="bd-code-snippet">',
@ -51,6 +52,7 @@

  snippetButtonTooltip('.btn-clipboard', btnTitle)
  snippetButtonTooltip('.btn-edit', btnEdit)
+  // snippetButtonTooltip('.btn-theme', btnTheme)

  const clipboard = new ClipboardJS('.btn-clipboard', {
    target: trigger => trigger.closest('.bd-code-snippet').querySelector('.highlight'),
--- a/site/assets/scss/_clipboard-js.scss
+++ b/site/assets/scss/_clipboard-js.scss
@ -18,7 +18,8 @@
 }

 .btn-clipboard,
-.btn-edit {
+.btn-edit,
+.btn-theme > .dropdown-toggle {
  display: block;
  padding: .5em;
  line-height: 1;
--- a/site/content/docs/5.3/components/popovers.md
+++ b/site/content/docs/5.3/components/popovers.md
@ -249,7 +249,7 @@ const popover = new bootstrap.Popover(element, {
 const popover = bootstrap.Popover.getOrCreateInstance('#example') // Returns a Bootstrap popover instance

 // setContent example
-myPopover.setContent({
+popover.setContent({
  '.popover-header': 'another title',
  '.popover-body': 'another content'
 })
--- a/site/content/docs/5.3/utilities/background.md
+++ b/site/content/docs/5.3/utilities/background.md
@ -22,7 +22,7 @@ Background utilities like `.bg-*` that generated from our original `$theme-color
 {{< colors.inline >}}
 {{- range (index $.Site.Data "theme-colors") }}
 <div class="p-3 mb-2 bg-{{ .name }}{{ if .contrast_color }} text-{{ .contrast_color }}{{ else }} text-white{{ end }}">.bg-{{ .name }}</div>
-<div class="p-3 mb-2 bg-{{ .name }}-subtle text-emphasis-{{ .name }}">.bg-{{ .name }}-subtle</div>
+<div class="p-3 mb-2 bg-{{ .name }}-subtle text-{{ .name }}-emphasis">.bg-{{ .name }}-subtle</div>
 {{- end -}}
 {{< /colors.inline >}}
 <p class="p-3 mb-2 bg-body-secondary">.bg-body-secondary</p>
--- a/site/layouts/shortcodes/example.html
+++ b/site/layouts/shortcodes/example.html
@ -31,13 +31,8 @@
      <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom">
        <small class="font-monospace text-body-secondary text-uppercase">{{- $lang -}}</small>
        <div class="d-flex ms-auto">
-          <div class="position-relative">
-            <button class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center"
-                    type="button"
-                    aria-expanded="false"
-                    data-bs-toggle="dropdown"
-                    data-bs-display="static"
-                    aria-label="Toggle theme (auto)">
+          <div class="btn-theme dropdown" title="Toggle local theme">
+            <button class="dropdown-toggle d-flex align-items-center" type="button" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static" aria-label="Toggle theme (auto)">
              <svg class="bi my-1 theme-icon-active"><use href="#circle-half"></use></svg>
            </button>
            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme-text">
--- a/site/static/docs/5.3/assets/js/color-modes.js
+++ b/site/static/docs/5.3/assets/js/color-modes.js
@ -19,27 +19,29 @@
    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
  }

-  const setTheme = theme => {
+  const setTheme = (theme, element = document.documentElement) => {
    if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      document.documentElement.setAttribute('data-bs-theme', 'dark')
+      element.setAttribute('data-bs-theme', 'dark')
    } else {
-      document.documentElement.setAttribute('data-bs-theme', theme)
+      element.setAttribute('data-bs-theme', theme)
    }
  }

  setTheme(getPreferredTheme())

-  const showActiveTheme = (theme, focus = false, themeSwitcher = document.querySelector('#bd-theme')) => {
+  const showActiveTheme = (theme, focus = false, selectedToggler = document.querySelector('#bd-theme')) => {
+    const themeSwitcher = selectedToggler.closest('.dropdown')
    if (!themeSwitcher) {
      return
    }

+    const themeSwitcherButton = themeSwitcher.querySelector('.dropdown-toggle')
    const themeSwitcherText = document.querySelector('#bd-theme-text')
-    const activeThemeIcon = themeSwitcher.parentElement.querySelector('.theme-icon-active use')
-    const btnToActive = themeSwitcher.parentElement.querySelector(`[data-bs-theme-value="${theme}"]`)
+    const activeThemeIcon = themeSwitcher.querySelector('.theme-icon-active use')
+    const btnToActive = themeSwitcher.querySelector(`[data-bs-theme-value="${theme}"]`)
    const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')

-    themeSwitcher.parentElement.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+    themeSwitcher.querySelectorAll('[data-bs-theme-value]').forEach(element => {
      element.classList.remove('active')
      element.setAttribute('aria-pressed', 'false')
    })
@ -48,10 +50,10 @@
    btnToActive.setAttribute('aria-pressed', 'true')
    activeThemeIcon.setAttribute('href', svgOfActiveBtn)
    const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})${btnToActive.closest('.highlight-toolbar') ? ' (local)' : ''}`
-    themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)
+    themeSwitcherButton.setAttribute('aria-label', themeSwitcherLabel)

    if (focus) {
-      themeSwitcher.focus()
+      themeSwitcherButton.focus()
    }
  }

@ -70,8 +72,8 @@
        toggle.addEventListener('click', () => {
          const theme = toggle.getAttribute('data-bs-theme-value')

-          if (toggle.closest('.highlight-toolbar')) {
-            toggle.closest('.highlight-toolbar').previousElementSibling.setAttribute('data-bs-theme', theme)
+          if (toggle.closest('.bd-code-snippet')) {
+            setTheme(theme, toggle.closest('.bd-code-snippet').firstChild)
            showActiveTheme(theme, true, toggle.closest('.dropdown-menu').previousElementSibling)
          } else {
            setStoredTheme(theme)
Author	SHA1	Message	Date
louismaxime.piton	930867b09a	Enhance the javascript	2023-10-23 17:06:39 +02:00
louismaxime.piton	aad8c9e353	Merge branch 'main' into main-lmp-contextual-theme-switcher	2023-10-23 14:24:27 +02:00
Julien Déramond	ce114117a8	Tests: update navbar in visual modal test (#39294 )	2023-10-13 10:28:08 +02:00
oliv37	72d6722b34	Docs: fix emphasis text utilities usage in Utilities > Background (#39293 )	2023-10-13 07:41:40 +02:00
Julien Déramond	790dc80753	Fix `getOrCreateInstance()` doc example (#39281 )	2023-10-12 09:31:14 +02:00
dependabot[bot]	7cdfa42608	Build(deps-dev): Bump autoprefixer from 10.4.15 to 10.4.16 (#39269 ) Bumps [autoprefixer](https://github.com/postcss/autoprefixer) from 10.4.15 to 10.4.16. - [Release notes](https://github.com/postcss/autoprefixer/releases) - [Changelog](https://github.com/postcss/autoprefixer/blob/main/CHANGELOG.md) - [Commits](https://github.com/postcss/autoprefixer/compare/10.4.15...10.4.16) --- updated-dependencies: - dependency-name: autoprefixer dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2023-10-11 07:41:44 +03:00
dependabot[bot]	0e7e888f8e	Build(deps-dev): Bump postcss from 8.4.30 to 8.4.31 (#39278 ) Bumps [postcss](https://github.com/postcss/postcss) from 8.4.30 to 8.4.31. - [Release notes](https://github.com/postcss/postcss/releases) - [Changelog](https://github.com/postcss/postcss/blob/main/CHANGELOG.md) - [Commits](https://github.com/postcss/postcss/compare/8.4.30...8.4.31) --- updated-dependencies: - dependency-name: postcss dependency-type: direct:development ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2023-10-11 07:41:02 +03:00