Skip to content

Commit

Permalink
refactor(demo): bring demo up-to-date with v4 changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@NickDJM
NickDJM authored Mar 6, 2024
1 parent 9c6ff78 commit 44c3971
Show file tree
Hide file tree
Showing 27 changed files with 360 additions and 200 deletions.
36 changes: 25 additions & 11 deletions demo/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,11 @@ import AccessibleMenuBootstrap5 from "../index";
import {
singleLevel,
twoLevel,
twoLevelTopLink,
twoLevelDisclosure,
twoLevelDisclosureTopLink,
threeLevel,
threeLevelTopLink,
threeLevelDisclosure,
threeLevelDisclosureTopLink,
} from "./menus";

/**
Expand All @@ -14,7 +16,7 @@ import {
* @param {string} structure - The DOM structure to use.
* @param {string} hover - The hover type for the menu.
* @param {HTMLElement} container - The container to generate the menu in.
* @param {object} [options = {}] - Option overrides.
* @param {object} [options] - Option overrides.
*/
function generateMenu(type, structure, hover, container, options = {}) {
menus.pop();
Expand All @@ -23,6 +25,8 @@ function generateMenu(type, structure, hover, container, options = {}) {

if (type === "Bootstrap5TopLinkDisclosureMenu") {
container.innerHTML = menuDOM.topLink;
} else if (type === "Bootstrap5DisclosureMenu") {
container.innerHTML = menuDOM.disclosure;
} else {
container.innerHTML = menuDOM.default;
}
Expand All @@ -33,26 +37,34 @@ function generateMenu(type, structure, hover, container, options = {}) {
nav.classList.remove("menubar");
nav.classList.remove("top-link-disclosure-menu");
nav.classList.remove("treeview");
document.body.classList.remove("disclosure-menu");
document.body.classList.remove("menubar");
document.body.classList.remove("top-link-disclosure-menu");
document.body.classList.remove("treeview");

if (MenuClass !== null) {
switch (type) {
case "Bootstrap5TopLinkDisclosureMenu":
nav.classList.add("top-link-disclosure-menu");
document.body.classList.add("top-link-disclosure-menu");

break;

case "Bootstrap5DisclosureMenu":
nav.classList.add("disclosure-menu");
document.body.classList.add("disclosure-menu");

break;

case "Bootstrap5Menubar":
nav.classList.add("menubar");
document.body.classList.add("menubar");

break;

case "Bootstrap5Treeview":
nav.classList.add("treeview");
document.body.classList.add("treeview");

break;
}
Expand All @@ -78,15 +90,18 @@ const hoverButtons = document.querySelectorAll("#hoverButtons button");
const menuStructures = {
one: {
default: singleLevel,
disclosure: singleLevel,
topLink: singleLevel,
},
two: {
default: twoLevel,
topLink: twoLevelTopLink,
disclosure: twoLevelDisclosure,
topLink: twoLevelDisclosureTopLink,
},
three: {
default: threeLevel,
topLink: threeLevelTopLink,
disclosure: threeLevelDisclosure,
topLink: threeLevelDisclosureTopLink,
},
};
const menuOptions = {
Expand All @@ -105,7 +120,6 @@ const preferredTheme = window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark"
: "light";
const setTheme = window.localStorage.getItem("setTheme") || preferredTheme;
const body = document.querySelector("body");
const themeToggle = document.querySelector("#themeToggle");

// Menu options.
Expand Down Expand Up @@ -156,13 +170,13 @@ hoverButtons.forEach((button) => {
});

// Set up theme switching.
document.querySelector("#themeToggle").addEventListener("click", () => {
if (body.dataset.bsTheme === "dark") {
body.dataset.bsTheme = "light";
themeToggle.addEventListener("click", () => {
if (document.body.dataset.bsTheme === "dark") {
document.body.dataset.bsTheme = "light";
window.localStorage.setItem("setTheme", "light");
themeToggle.innerHTML = "Dark Mode";
} else {
body.dataset.bsTheme = "dark";
document.body.dataset.bsTheme = "dark";
window.localStorage.setItem("setTheme", "dark");
themeToggle.innerHTML = "Light Mode";
}
Expand All @@ -175,7 +189,7 @@ document.addEventListener("DOMContentLoaded", () => {
generateMenu(menuType, menuStructure, hoverType, header, options);

if (setTheme === "dark") {
body.dataset.bsTheme = "dark";
document.body.dataset.bsTheme = "dark";
themeToggle.innerHTML = "Light Mode";
}
});
257 changes: 255 additions & 2 deletions demo/menus.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,80 @@ export const twoLevel =
</nav>
`;

export const twoLevelTopLink =
export const twoLevelDisclosure =
/* html */
`
<nav id="example-menu" aria-label="example" aria-describedby="disclaimer" class="navbar navbar-expand-lg bg-body-tertiary">
<button id="example-toggle" aria-label="Toggle example menu" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#exampleCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="exampleCollapse">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
<li class="nav-item dropdown">
<button class="nav-link dropdown-toggle btn btn-link" href="#" data-bs-toggle="dropdown">Mammals</button>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link dropdown-item" href="#">About</a></li>
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Wild</a></li>
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Domesticated</a></li>
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Habitats</a></li>
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Food</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<button class="nav-link dropdown-toggle btn btn-link" href="#" data-bs-toggle="dropdown">Reptiles</button>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link dropdown-item" href="#">About</a></li>
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Wild</a></li>
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Domesticated</a></li>
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Habitats</a></li>
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Food</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<button class="nav-link dropdown-toggle btn btn-link" href="#" data-bs-toggle="dropdown">Amphibians</button>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link dropdown-item" href="#">About</a></li>
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Wild</a></li>
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Domesticated</a></li>
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Habitats</a></li>
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Food</a></li>
</ul>
</li>
<li class="nav-item dropdown dropdown-left">
<button class="nav-link dropdown-toggle btn btn-link" href="#" data-bs-toggle="dropdown">Birds</button>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link dropdown-item" href="#">About</a></li>
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Wild</a></li>
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Domesticated</a></li>
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Habitats</a></li>
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Food</a></li>
</ul>
</li>
<li class="nav-item dropdown dropdown-left">
<button class="nav-link dropdown-toggle btn btn-link" href="#" data-bs-toggle="dropdown">Fish</button>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link dropdown-item" href="#">About</a></li>
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Wild</a></li>
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Domesticated</a></li>
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Habitats</a></li>
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Food</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="#">Map</a></li>
<li class="nav-item dropdown dropdown-left">
<button class="nav-link dropdown-toggle btn btn-link" href="#" data-bs-toggle="dropdown">Contact</button>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Email</a></li>
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Socials</a></li>
</ul>
</li>
</ul>
</div>
</nav>
`;

export const twoLevelDisclosureTopLink =
/* html */
`
<nav id="example-menu" aria-label="example" aria-describedby="disclaimer" class="navbar navbar-expand-lg bg-body-tertiary">
Expand Down Expand Up @@ -352,7 +425,187 @@ export const threeLevel =
</nav>
`;

export const threeLevelTopLink =
export const threeLevelDisclosure =
/* html */
`
<nav id="example-menu" aria-label="example" aria-describedby="disclaimer" class="navbar navbar-expand-lg bg-body-tertiary">
<button id="example-toggle" aria-label="Toggle example menu" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#exampleCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="exampleCollapse">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
<li class="nav-item dropdown">
<button class="nav-link dropdown-toggle btn btn-link" href="#" data-bs-toggle="dropdown">Mammals</button>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link dropdown-item" href="#">About</a></li>
<li class="nav-item dropdown">
<button class="nav-link dropdown-toggle btn btn-link" href="#" data-bs-toggle="dropdown">Wild</button>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Bears</a></li>
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Lions</a></li>
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Wolves</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<button class="nav-link dropdown-toggle btn btn-link" href="#" data-bs-toggle="dropdown">Domesticated</button>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Cats</a></li>
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Dogs</a></li>
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Horses</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Habitats</a></li>
<li class="nav-item dropdown">
<button class="nav-link dropdown-toggle btn btn-link" href="#" data-bs-toggle="dropdown">Food</button>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Can Eat</a></li>
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Can't Eat</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<button class="nav-link dropdown-toggle btn btn-link" href="#" data-bs-toggle="dropdown">Reptiles</button>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link dropdown-item" href="#">About</a></li>
<li class="nav-item dropdown">
<button class="nav-link dropdown-toggle btn btn-link" href="#" data-bs-toggle="dropdown">Wild</button>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Snakes</a></li>
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Lizards</a></li>
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Turtles</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<button class="nav-link dropdown-toggle btn btn-link" href="#" data-bs-toggle="dropdown">Domesticated</button>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Geckos</a></li>
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Tortoises</a></li>
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Iguanas</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Habitats</a></li>
<li class="nav-item dropdown">
<button class="nav-link dropdown-toggle btn btn-link" href="#" data-bs-toggle="dropdown">Food</button>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Can Eat</a></li>
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Can't Eat</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<button class="nav-link dropdown-toggle btn btn-link" href="#" data-bs-toggle="dropdown">Amphibians</button>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link dropdown-item" href="#">About</a></li>
<li class="nav-item dropdown">
<button class="nav-link dropdown-toggle btn btn-link" href="#" data-bs-toggle="dropdown">Wild</button>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Frogs</a></li>
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Toads</a></li>
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Salamanders</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<button class="nav-link dropdown-toggle btn btn-link" href="#" data-bs-toggle="dropdown">Domesticated</button>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Axolotls</a></li>
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Newts</a></li>
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Frogs</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Habitats</a></li>
<li class="nav-item dropdown">
<button class="nav-link dropdown-toggle btn btn-link" href="#" data-bs-toggle="dropdown">Food</button>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Can Eat</a></li>
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Can't Eat</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-item dropdown dropdown-left">
<button class="nav-link dropdown-toggle btn btn-link" href="#" data-bs-toggle="dropdown">Birds</button>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link dropdown-item" href="#">About</a></li>
<li class="nav-item dropdown">
<button class="nav-link dropdown-toggle btn btn-link" href="#" data-bs-toggle="dropdown">Wild</button>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Eagles</a></li>
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Hawks</a></li>
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Owls</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<button class="nav-link dropdown-toggle btn btn-link" href="#" data-bs-toggle="dropdown">Domesticated</button>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Parakeets</a></li>
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Pigeons</a></li>
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Chickens</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Habitats</a></li>
<li class="nav-item dropdown">
<button class="nav-link dropdown-toggle btn btn-link" href="#" data-bs-toggle="dropdown">Food</button>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Can Eat</a></li>
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Can't Eat</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-item dropdown dropdown-left">
<button class="nav-link dropdown-toggle btn btn-link" href="#" data-bs-toggle="dropdown">Fish</button>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link dropdown-item" href="#">About</a></li>
<li class="nav-item dropdown">
<button class="nav-link dropdown-toggle btn btn-link" href="#" data-bs-toggle="dropdown">Wild</button>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Trout</a></li>
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Carp</a></li>
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Perch</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<button class="nav-link dropdown-toggle btn btn-link" href="#" data-bs-toggle="dropdown">Domesticated</button>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Goldfish</a></li>
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Koi</a></li>
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Betta</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Habitats</a></li>
<li class="nav-item dropdown">
<button class="nav-link dropdown-toggle btn btn-link" href="#" data-bs-toggle="dropdown">Food</button>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Can Eat</a></li>
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Can't Eat</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="#">Map</a></li>
<li class="nav-item dropdown dropdown-left">
<button class="nav-link dropdown-toggle btn btn-link" href="#" data-bs-toggle="dropdown">Contact</button>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Email</a></li>
<li class="nav-item dropdown">
<button class="nav-link dropdown-toggle btn btn-link" href="#" data-bs-toggle="dropdown">Socials</button>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Twitter</a></li>
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Facebook</a></li>
<li class="nav-item"><a class="nav-link dropdown-item" href="#">Instagram</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
`;

export const threeLevelDisclosureTopLink =
/* html */
`
<nav id="example-menu" aria-label="example" aria-describedby="disclaimer" class="navbar navbar-expand-lg bg-body-tertiary">
Expand Down
3 changes: 0 additions & 3 deletions demo/scss/_custom-properties.scss
View file

This file was deleted.

Loading

0 comments on commit 44c3971

Please sign in to comment.