Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-15 10:14:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

Fix #3461

Browse Source
This commit is contained in:
Jeremy Thomas
2022-01-16 00:00:43 +00:00
parent 5aa114d445
commit 6b70094da8
24 changed files with 542 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
docs/_javascript/main.js
View File

@@ -1,26 +1,26 @@
document.addEventListener('DOMContentLoaded', () => {
document.addEventListener("DOMContentLoaded", () => {
// Search
const setSearchToggle = () => {
const icon = document.getElementById('searchIcon');
const search = document.getElementById('search');
const input = document.getElementById('algoliaSearch');
const icon = document.getElementById("searchIcon");
const search = document.getElementById("search");
const input = document.getElementById("algoliaSearch");
if (!icon) {
return;
}
icon.addEventListener('click', (event) => {
search.classList.toggle('bd-is-visible');
icon.addEventListener("click", (event) => {
search.classList.toggle("bd-is-visible");
if (search.classList.contains('bd-is-visible')) {
if (search.classList.contains("bd-is-visible")) {
algoliaSearch.focus();
}
});
window.addEventListener('keydown', (event) => {
if (event.key === 'Escape') {
return search.classList.remove('bd-is-visible');
window.addEventListener("keydown", (event) => {
if (event.key === "Escape") {
return search.classList.remove("bd-is-visible");
}
});
};
@@ -30,7 +30,7 @@ document.addEventListener('DOMContentLoaded', () => {
// Navbar
const setNavbarVisibility = () => {
const navbar = document.getElementById('navbar');
const navbar = document.getElementById("navbar");
if (!navbar) {
return;
@@ -38,11 +38,11 @@ document.addEventListener('DOMContentLoaded', () => {
const cs = getComputedStyle(navbar);
const paddingX = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);
const brand = navbar.querySelector('.navbar-brand');
const end = navbar.querySelector('.navbar-end');
const search = navbar.querySelector('.bd-search');
const original = document.getElementById('navbarStartOriginal');
const clone = document.getElementById('navbarStartClone');
const brand = navbar.querySelector(".navbar-brand");
const end = navbar.querySelector(".navbar-end");
const search = navbar.querySelector(".bd-search");
const original = document.getElementById("navbarStartOriginal");
const clone = document.getElementById("navbarStartClone");
const rest =
navbar.clientWidth -
@@ -53,16 +53,16 @@ document.addEventListener('DOMContentLoaded', () => {
const space = original.clientWidth;
const all = document.querySelectorAll(
'#navbarStartClone > .bd-navbar-item'
"#navbarStartClone > .bd-navbar-item"
);
const base = document.querySelectorAll(
'#navbarStartClone > .bd-navbar-item-base'
"#navbarStartClone > .bd-navbar-item-base"
);
const more = document.querySelectorAll(
'#navbarStartOriginal > .bd-navbar-item-more'
"#navbarStartOriginal > .bd-navbar-item-more"
);
const dropdown = document.querySelectorAll(
'#navbarStartOriginal .bd-navbar-dropdown > .navbar-item'
"#navbarStartOriginal .bd-navbar-dropdown > .navbar-item"
);
let count = 0;
@@ -86,17 +86,17 @@ document.addEventListener('DOMContentLoaded', () => {
if (howManyMore > 0) {
for (let i = 0; i < howManyMore; i++) {
more[i].classList.add('bd-is-visible');
dropdown[i].classList.add('bd-is-hidden');
more[i].classList.add("bd-is-visible");
dropdown[i].classList.add("bd-is-hidden");
}
}
for (let j = howManyMore; j < more.length; j++) {
more[j].classList.remove('bd-is-visible');
more[j].classList.remove("bd-is-visible");
}
for (let k = howManyMore; k < dropdown.length; k++) {
dropdown[k].classList.remove('bd-is-hidden');
dropdown[k].classList.remove("bd-is-hidden");
}
};
@@ -104,35 +104,35 @@ document.addEventListener('DOMContentLoaded', () => {
// Cookies
const cookieBookModalName = 'bulma_closed_book_modal';
const cookieBookModalName = "bulma_closed_book_modal";
const cookieBookModal = Cookies.getJSON(cookieBookModalName) || false;
// Dropdowns
const $dropdowns = getAll('.dropdown:not(.is-hoverable)');
const $dropdowns = getAll(".dropdown:not(.is-hoverable)");
if ($dropdowns.length > 0) {
$dropdowns.forEach(($el) => {
$el.addEventListener('click', (event) => {
$el.addEventListener("click", (event) => {
event.stopPropagation();
$el.classList.toggle('is-active');
$el.classList.toggle("is-active");
});
});
document.addEventListener('click', (event) => {
document.addEventListener("click", (event) => {
closeDropdowns();
});
}
function closeDropdowns() {
$dropdowns.forEach(($el) => {
$el.classList.remove('is-active');
$el.classList.remove("is-active");
});
}
// Toggles
const $burgers = getAll('.navbar-burger');
const $burgers = getAll(".navbar-burger");
if ($burgers.length > 0) {
$burgers.forEach(($el) => {
@@ -140,11 +140,11 @@ document.addEventListener('DOMContentLoaded', () => {
return;
}
$el.addEventListener('click', () => {
$el.addEventListener("click", () => {
const target = $el.dataset.target;
const $target = document.getElementById(target);
$el.classList.toggle('is-active');
$target.classList.toggle('is-active');
$el.classList.toggle("is-active");
$target.classList.toggle("is-active");
});
});
}
@@ -152,15 +152,15 @@ document.addEventListener('DOMContentLoaded', () => {
// Modals
const rootEl = document.documentElement;
const $modals = getAll('.modal');
const $modalButtons = getAll('.modal-button');
const $modals = getAll(".modal");
const $modalButtons = getAll(".modal-button");
const $modalCloses = getAll(
'.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button'
".modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button"
);
if ($modalButtons.length > 0) {
$modalButtons.forEach(($el) => {
$el.addEventListener('click', () => {
$el.addEventListener("click", () => {
const target = $el.dataset.target;
openModal(target);
});
@@ -169,7 +169,7 @@ document.addEventListener('DOMContentLoaded', () => {
if ($modalCloses.length > 0) {
$modalCloses.forEach(($el) => {
$el.addEventListener('click', () => {
$el.addEventListener("click", () => {
closeModals();
});
});
@@ -177,18 +177,18 @@ document.addEventListener('DOMContentLoaded', () => {
function openModal(target) {
const $target = document.getElementById(target);
rootEl.classList.add('is-clipped');
$target.classList.add('is-active');
rootEl.classList.add("is-clipped");
$target.classList.add("is-active");
}
function closeModals() {
rootEl.classList.remove('is-clipped');
rootEl.classList.remove("is-clipped");
$modals.forEach(($el) => {
$el.classList.remove('is-active');
$el.classList.remove("is-active");
});
}
document.addEventListener('keydown', (event) => {
document.addEventListener("keydown", (event) => {
const e = event || window.event;
if (e.keyCode === 27) {
@@ -199,7 +199,7 @@ document.addEventListener('DOMContentLoaded', () => {
// Clipboard
const $highlights = getAll('.highlight');
const $highlights = getAll(".highlight");
let itemsProcessed = 0;
if ($highlights.length > 0) {
@@ -207,19 +207,19 @@ document.addEventListener('DOMContentLoaded', () => {
const copyEl = '<button class="button bd-copy">Copy</button>';
const expandEl =
'<button class="button is-small bd-expand">Expand</button>';
$el.insertAdjacentHTML('beforeend', copyEl);
$el.insertAdjacentHTML("beforeend", copyEl);
const $parent = $el.parentNode;
if ($parent && $parent.classList.contains('bd-is-more')) {
if ($parent && $parent.classList.contains("bd-is-more")) {
const showEl =
'<button class="button is-small bd-show"><span class="icon"><i class="fas fa-code"></i></span><strong>Show code</strong></button>';
$parent.insertAdjacentHTML('afterbegin', showEl);
$parent.insertAdjacentHTML("afterbegin", showEl);
} else if (
$el.firstElementChild.scrollHeight > 480 &&
$el.firstElementChild.clientHeight <= 480
) {
$el.insertAdjacentHTML('beforeend', expandEl);
$el.insertAdjacentHTML("beforeend", expandEl);
}
itemsProcessed++;
@@ -232,47 +232,49 @@ document.addEventListener('DOMContentLoaded', () => {
function addHighlightControls() {
const $highlightButtons = getAll(
'.highlight .bd-copy, .highlight .bd-expand'
".highlight .bd-copy, .highlight .bd-expand"
);
$highlightButtons.forEach(($el) => {
$el.addEventListener('mouseenter', () => {
$el.parentNode.classList.add('bd-is-hovering');
$el.parentNode.parentNode.classList.add('bd-is-hovering');
$el.addEventListener("mouseenter", () => {
$el.parentNode.classList.add("bd-is-hovering");
$el.parentNode.parentNode.classList.add("bd-is-hovering");
});
$el.addEventListener('mouseleave', () => {
$el.parentNode.classList.remove('bd-is-hovering');
$el.parentNode.parentNode.classList.remove('bd-is-hovering');
$el.addEventListener("mouseleave", () => {
$el.parentNode.classList.remove("bd-is-hovering");
$el.parentNode.parentNode.classList.remove("bd-is-hovering");
});
});
const $highlightExpands = getAll('.bd-snippet .bd-expand');
const $highlightExpands = getAll(".bd-snippet .bd-expand");
$highlightExpands.forEach(($el) => {
$el.addEventListener('click', () => {
$el.parentNode.firstElementChild.style.maxHeight = 'none';
$el.addEventListener("click", () => {
$el.parentNode.firstElementChild.style.maxHeight = "none";
});
});
const $highlightShows = getAll('.bd-snippet .bd-show');
const $highlightShows = getAll(".bd-snippet .bd-show");
$highlightShows.forEach(($el) => {
$el.addEventListener('click', () => {
const text = $el.querySelector('strong').textContent;
const newText = text === 'Show code' ? 'Hide code' : 'Show code';
$el.querySelector('strong').textContent = newText;
$el.parentNode.classList.toggle('bd-is-more-clipped');
$el.addEventListener("click", () => {
const text = $el.querySelector("strong").textContent;
const newText = text === "Show code" ? "Hide code" : "Show code";
$el.querySelector("strong").textContent = newText;
$el.parentNode.classList.toggle("bd-is-more-clipped");
});
});
}
setTimeout(() => {
new Clipboard('.bd-copy', {
new Clipboard(".bd-copy", {
target: (trigger) => {
return trigger.previousElementSibling.firstElementChild;
},
});
new Clipboard(".bd-clipboard");
}, 100);
// Events
@@ -287,7 +289,7 @@ document.addEventListener('DOMContentLoaded', () => {
}, 10);
}
window.addEventListener('resize', handleResize);
window.addEventListener("resize", handleResize);
// Utils