Skip to content

Fix accordion mdb parent attribute #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
gerard1001 wants to merge 4 commits into
base: main
Choose a base branch
from
+192 −150
Open

Fix accordion mdb parent attribute #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5f2f64b
Fix accordion mdb parent attribute
gerard1001 Jun 10, 2026
e112e18
Build from mdb-ui-kit: replace -mdb- by -bs-
gerard1001 Jun 18, 2026
f56d9f3
Revise color scheme options & remove unused reinit js files
gerard1001 Jun 18, 2026
724d200
How to rebuild mdb.min.js from mdb-ui-kit
gerard1001 Jun 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 60 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,62 @@
# material-design
Material Design theme for Saltcorn based on mdbootstrap

## Rebuilding `mdb.min.js` from mdb-ui-kit

`public/js/mdb.min.js` is generated from [mdb-ui-kit](https://github.com/mdbootstrap/mdb-ui-kit) with MDB-specific attribute and class name prefixes patched from `mdb-` to `bs-` to stay consistent with Bootstrap naming used in this plugin.

### Steps

**1. Fork mdb-ui-kit**

Go to [https://github.com/mdbootstrap/mdb-ui-kit/tree/master](https://github.com/mdbootstrap/mdb-ui-kit/tree/master) and fork the repo to your GitHub account.

**2. Clone your fork**

```bash
git clone https://github.com/<your-username>/mdb-ui-kit.git
cd mdb-ui-kit
```

**3. (Optional) Patch the source files**

Replace `data-mdb-` with `data-bs-` across all JS source files:

```bash
find src -type f -name "*.js" -exec sed -i '' 's/data-mdb-/data-bs-/g' {} +
```

This keeps the fork's source consistent with the built output — only needed if you plan to rebuild the bundle from webpack source in the future.

**4. Add the build script to `package.json`**

In `mdb-ui-kit/package.json`, add this under `"scripts"`:

```json
"build": "sed 's/data-mdb-/data-bs-/g' js/mdb.umd.min.js | sed 's/startsWith(\"mdb\")/startsWith(\"bs\")/g' | sed 's/\\.replace(\\/\\^mdb\\/,\"\")/.replace(\\/\\^bs\\/,\"\")/g' > js/mdb.bs.umd.min.js"
```

This chains three replacements on `js/mdb.umd.min.js` (the pre-built bundle that ships with the repo) and writes the patched result to `js/mdb.bs.umd.min.js`:

| Original | Replaced with |
|---|---|
| `data-mdb-` | `data-bs-` |
| `startsWith("mdb")` | `startsWith("bs")` |
| `.replace(/^mdb/,"")` | `.replace(/^bs/,"")` |

**5. Run the build**

```bash
npm run build
```

**6. Copy `js/mdb.bs.umd.min.js` into this plugin as `public/js/mdb.min.js`**

Verify no `mdb-` attribute names leaked through:

```bash
grep 'data-mdb-' public/js/mdb.min.js # should print nothing
```

> Current bundle: MDB5 FREE **9.3.0**

91 changes: 28 additions & 63 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,15 @@ const {
} = require("@saltcorn/markup/tags");
const {
navbar,
navbarSolidOnScroll,
headersInHead,
headersInBody,
alert,
alert: _saltcornAlert,
activeChecker,
} = require("@saltcorn/markup/layout_utils");
const alert = (type, msg) => {
const html = _saltcornAlert(type, msg);
return html ? html.replace('class="alert ', 'data-bs-alert-init class="alert ') : html;
};
const renderLayout = require("@saltcorn/markup/layout");
const Form = require("@saltcorn/data/models/form");
const Workflow = require("@saltcorn/data/models/workflow");
Expand Down Expand Up @@ -79,13 +82,9 @@ const verticalUserSubItem = (currentUrl, config) => {
href: text(item.link || "#"),
...(item.tooltip
? {
"data-bs-toggle": "tooltip",
"data-bs-tooltip-init": "",
"data-bs-placement": "right",
"data-mdb-placement": "right",
"data-mdb-original-title": item.tooltip,
"data-bs-original-title": item.tooltip,
"data-mdb-tooltip-initialized": "true",
"data-bs-tooltip-initialized": "true",
title: item.tooltip,
}
: {}),
},
Expand All @@ -108,8 +107,6 @@ const verticalUserSubItem = (currentUrl, config) => {
"dropdown-item dropdown-toggle p-0 d-flex align-items-center justify-content-between",
"data-bs-toggle": "dropdown",
"aria-expanded": "false",
"data-mdb-dropdown-initialized": "true",
"data-bs-dropdown-initialized": "true",
},
item.label,
),
Expand Down Expand Up @@ -142,8 +139,8 @@ const verticalSubItem =
href: text(item.link),
...(item.tooltip
? {
"data-mdb-placement": "right",
"data-bs-toggle": "tooltip",
"data-bs-tooltip-init": "",
"data-bs-placement": "right",
title: item.tooltip,
}
: {}),
Expand Down Expand Up @@ -179,7 +176,7 @@ const verticalSubItem =
],
href: "#collapse_" + itemId,
role: "button",
"data-bs-toggle": "collapse",
"data-bs-collapse-init": "",
"aria-expanded": is_active ? "true" : "false",
"aria-controls": "collapse_" + itemId,
},
Expand All @@ -206,8 +203,6 @@ const verticalSubItem =
{
class: ["collapse", is_active && "show"],
id: "collapse_" + itemId,
"data-mdb-collapse-initialized": "true",
"data-bs-collapse-initialized": "true",
},
ul(
{
Expand All @@ -226,8 +221,8 @@ const verticalSubItem =
active(currentUrl, item) && "active",
],
href: text(item.link),
"data-mdb-placement": "right",
"data-bs-toggle": "tooltip",
"data-bs-tooltip-init": "",
"data-bs-placement": "right",
title: item.tooltip,
},
item.icon && item.icon !== "empty" && item.icon !== "undefined"
Expand Down Expand Up @@ -356,7 +351,7 @@ const verticalSideBarItem =
],
href: "#collapse_item_" + ix,
role: "button",
"data-bs-toggle": "collapse",
"data-bs-collapse-init": "",
"aria-expanded": is_active ? "true" : "false",
"aria-controls": "collapse_item_" + ix,
title: item?.tooltip,
Expand Down Expand Up @@ -408,8 +403,8 @@ const verticalSideBarItem =
...(is_active && { "aria-current": "page" }),
...(item.tooltip
? {
"data-mdb-placement": "right",
"data-bs-toggle": "tooltip",
"data-bs-tooltip-init": "",
"data-bs-placement": "right",
title: item.tooltip,
}
: {}),
Expand Down Expand Up @@ -811,11 +806,12 @@ const wrapIt = (
<script type="text/javascript" src="/plugins/public/material-design${verstring}/js/popper.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="/plugins/public/material-design${verstring}/js/mdb.min.js"></script>
<script type="text/javascript" src="/plugins/public/material-design${verstring}/js/reinit-dropdowns.js"></script>
<script type="text/javascript" src="/plugins/public/material-design${verstring}/js/reinit-mdb.js"></script>
<!-- Bind window.mdb to window.bootstrap for backward compatibility -->
<script>
window.bootstrap = window.mdb;
config = ${JSON.stringify(config || {})};

const navbar = document.querySelector(".navbar");

(function () {
Expand Down Expand Up @@ -982,7 +978,6 @@ const wrapIt = (
</script>

${headersInBody(headers)}
${config.colorscheme === "navbar-light" ? navbarSolidOnScroll : ""}
</body>
</html>`;
};
Expand Down Expand Up @@ -1309,13 +1304,9 @@ const horizontal_header_sections = (
href: text(item.link || "#"),
...(item.tooltip
? {
"data-bs-toggle": "tooltip",
"data-bs-tooltip-init": "",
"data-bs-placement": "left",
"data-mdb-placement": "left",
"data-mdb-original-title": item.tooltip,
"data-bs-original-title": item.tooltip,
"data-mdb-tooltip-initialized": "true",
"data-bs-tooltip-initialized": "true",
title: item.tooltip,
}
: {}),
},
Expand All @@ -1336,8 +1327,6 @@ const horizontal_header_sections = (
class: "dropdown-item dropdown-toggle p-0",
"data-bs-toggle": "dropdown",
"aria-expanded": "false",
"data-mdb-dropdown-initialized": "true",
"data-bs-dropdown-initialized": "true",
},
item.label,
),
Expand Down Expand Up @@ -1388,7 +1377,7 @@ const horizontal_header_sections = (
{
class: "navbar-toggler navbar-toggler-right collapsed",
type: "button",
"data-bs-toggle": "collapse",
"data-bs-collapse-init": "",
"data-bs-target": "#navbarResponsive",
"aria-controls": "navbarResponsive",
"aria-expanded": "false",
Expand All @@ -1401,8 +1390,6 @@ const horizontal_header_sections = (
{
class: ["collapse navbar-collapse"],
id: "navbarResponsive",
"data-mdb-collapse-initialized": "true",
"data-bs-collapse-initialized": "true",
},
ul(
{ class: "navbar-nav ms-auto my-2 my-lg-0" },
Expand All @@ -1428,8 +1415,7 @@ const horizontal_header_sections = (
"aria-haspopup": "true",
"aria-expanded": "false",
"data-bs-auto-close": "outside",
"data-mdb-dropdown-initialized": "true",
"data-bs-dropdown-initialized": "true",
// "data-mdb-dropdown-init": "true",
},
item.icon &&
item.icon !== "empty" &&
Expand Down Expand Up @@ -1472,13 +1458,9 @@ const horizontal_header_sections = (
href: text(item.link || "#"),
...(item.tooltip
? {
"data-bs-toggle": "tooltip",
"data-bs-tooltip-init": "",
"data-bs-placement": "bottom",
"data-mdb-placement": "bottom",
"data-mdb-original-title": item.tooltip,
"data-bs-original-title": item.tooltip,
"data-mdb-tooltip-initialized": "true",
"data-bs-tooltip-initialized": "true",
title: item.tooltip,
}
: {}),
},
Expand Down Expand Up @@ -1510,9 +1492,7 @@ const horizontal_header_sections = (
"data-bs-toggle": "dropdown",
"aria-haspopup": "true",
"aria-expanded": "false",
"data-bs-auto-close": "outside",
"data-mdb-dropdown-initialized": "true",
"data-bs-dropdown-initialized": "true",
"data-bs-auto-close": "outside"
},
item.icon &&
item.icon !== "empty" &&
Expand Down Expand Up @@ -1613,23 +1593,14 @@ const configuration_workflow = (config) =>
attributes: {
options: [
{ name: "", label: "Default" },
{ name: "sidenav-light bg-light", label: "Light" },
{ name: "sidenav-light", label: "Transparent Light" },
{ name: "sidenav-dark bg-dark", label: "Dark" },
{ name: "sidenav-dark bg-primary", label: "Dark Primary" },
{
name: "sidenav-dark bg-secondary",
label: "Dark Secondary",
},
{ name: "sidenav-light bg-light", label: "Light" },
{ name: "sidenav-light bg-white", label: "White" },
{ name: "sidenav-light", label: "Transparent Light" },
{
name: "sidenav-light navbar-scrolling bg-light",
label: "Scrolling Light",
},
{
name: "sidenav-dark navbar-scrolled bg-dark",
label: "Scrolled Dark",
},
],
},
showIf: { layout_style: "Vertical" },
Expand All @@ -1642,22 +1613,16 @@ const configuration_workflow = (config) =>
default: "",
attributes: {
options: [
{ name: "", label: "Default" },
{ name: "navbar-light bg-light", label: "Light" },
{ name: "navbar-light bg-white", label: "White" },
{ name: "navbar-dark bg-dark", label: "Dark" },
{ name: "navbar-dark bg-primary", label: "Dark Primary" },
{
name: "navbar-dark bg-secondary",
label: "Dark Secondary",
},
{ name: "navbar-light bg-light", label: "Light" },
{ name: "navbar-light bg-white", label: "White" },
{ name: "", label: "Transparent Light" },
{ name: "transparent-dark", label: "Transparent Dark" },
{
name: "navbar-scrolling bg-light",
label: "Scrolling Light",
},
{ name: "navbar-scrolled bg-dark", label: "Scrolled Dark" },
],
},
showIf: { layout_style: "Horizontal" },
Expand Down
3 changes: 3 additions & 0 deletions public/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,9 @@ html[data-bs-theme="dark"] .table> tbody > tr:nth-of-type(odd) > * {
.dropdown-menu.dropdown-menu-end {
max-width: fit-content;
}
.dropdown-menu.show {
max-width: fit-content;
}
/* Search component in "Page Configuration" */
[data-bs-theme="dark"] input.form-control.bg-light {
background-color: var(--bs-dark) !important;
Expand Down
8 changes: 4 additions & 4 deletions public/js/mdb.min.js
View file
Open in desktop

Large diffs are not rendered by default.

Loading