Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-17 19:04:30 -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

138
docs/lib/main.js
View File

@@ -1,28 +1,28 @@
'use strict';
"use strict";
document.addEventListener('DOMContentLoaded', function () {
document.addEventListener("DOMContentLoaded", function () {
// Search
var setSearchToggle = function setSearchToggle() {
var icon = document.getElementById('searchIcon');
var search = document.getElementById('search');
var input = document.getElementById('algoliaSearch');
var icon = document.getElementById("searchIcon");
var search = document.getElementById("search");
var input = document.getElementById("algoliaSearch");
if (!icon) {
return;
}
icon.addEventListener('click', function (event) {
search.classList.toggle('bd-is-visible');
icon.addEventListener("click", function (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', function (event) {
if (event.key === 'Escape') {
return search.classList.remove('bd-is-visible');
window.addEventListener("keydown", function (event) {
if (event.key === "Escape") {
return search.classList.remove("bd-is-visible");
}
});
};
@@ -32,7 +32,7 @@ document.addEventListener('DOMContentLoaded', function () {
// Navbar
var setNavbarVisibility = function setNavbarVisibility() {
var navbar = document.getElementById('navbar');
var navbar = document.getElementById("navbar");
if (!navbar) {
return;
@@ -40,19 +40,19 @@ document.addEventListener('DOMContentLoaded', function () {
var cs = getComputedStyle(navbar);
var paddingX = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);
var brand = navbar.querySelector('.navbar-brand');
var end = navbar.querySelector('.navbar-end');
var search = navbar.querySelector('.bd-search');
var original = document.getElementById('navbarStartOriginal');
var clone = document.getElementById('navbarStartClone');
var brand = navbar.querySelector(".navbar-brand");
var end = navbar.querySelector(".navbar-end");
var search = navbar.querySelector(".bd-search");
var original = document.getElementById("navbarStartOriginal");
var clone = document.getElementById("navbarStartClone");
var rest = navbar.clientWidth - paddingX - brand.clientWidth - end.clientWidth - search.clientWidth;
var space = original.clientWidth;
var all = document.querySelectorAll('#navbarStartClone > .bd-navbar-item');
var base = document.querySelectorAll('#navbarStartClone > .bd-navbar-item-base');
var more = document.querySelectorAll('#navbarStartOriginal > .bd-navbar-item-more');
var dropdown = document.querySelectorAll('#navbarStartOriginal .bd-navbar-dropdown > .navbar-item');
var all = document.querySelectorAll("#navbarStartClone > .bd-navbar-item");
var base = document.querySelectorAll("#navbarStartClone > .bd-navbar-item-base");
var more = document.querySelectorAll("#navbarStartOriginal > .bd-navbar-item-more");
var dropdown = document.querySelectorAll("#navbarStartOriginal .bd-navbar-dropdown > .navbar-item");
var count = 0;
var totalWidth = 0;
@@ -96,17 +96,17 @@ document.addEventListener('DOMContentLoaded', function () {
if (howManyMore > 0) {
for (var 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 (var j = howManyMore; j < more.length; j++) {
more[j].classList.remove('bd-is-visible');
more[j].classList.remove("bd-is-visible");
}
for (var k = howManyMore; k < dropdown.length; k++) {
dropdown[k].classList.remove('bd-is-hidden');
dropdown[k].classList.remove("bd-is-hidden");
}
};
@@ -114,35 +114,35 @@ document.addEventListener('DOMContentLoaded', function () {
// Cookies
var cookieBookModalName = 'bulma_closed_book_modal';
var cookieBookModalName = "bulma_closed_book_modal";
var cookieBookModal = Cookies.getJSON(cookieBookModalName) || false;
// Dropdowns
var $dropdowns = getAll('.dropdown:not(.is-hoverable)');
var $dropdowns = getAll(".dropdown:not(.is-hoverable)");
if ($dropdowns.length > 0) {
$dropdowns.forEach(function ($el) {
$el.addEventListener('click', function (event) {
$el.addEventListener("click", function (event) {
event.stopPropagation();
$el.classList.toggle('is-active');
$el.classList.toggle("is-active");
});
});
document.addEventListener('click', function (event) {
document.addEventListener("click", function (event) {
closeDropdowns();
});
}
function closeDropdowns() {
$dropdowns.forEach(function ($el) {
$el.classList.remove('is-active');
$el.classList.remove("is-active");
});
}
// Toggles
var $burgers = getAll('.navbar-burger');
var $burgers = getAll(".navbar-burger");
if ($burgers.length > 0) {
$burgers.forEach(function ($el) {
@@ -150,11 +150,11 @@ document.addEventListener('DOMContentLoaded', function () {
return;
}
$el.addEventListener('click', function () {
$el.addEventListener("click", function () {
var target = $el.dataset.target;
var $target = document.getElementById(target);
$el.classList.toggle('is-active');
$target.classList.toggle('is-active');
$el.classList.toggle("is-active");
$target.classList.toggle("is-active");
});
});
}
@@ -162,13 +162,13 @@ document.addEventListener('DOMContentLoaded', function () {
// Modals
var rootEl = document.documentElement;
var $modals = getAll('.modal');
var $modalButtons = getAll('.modal-button');
var $modalCloses = getAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button');
var $modals = getAll(".modal");
var $modalButtons = getAll(".modal-button");
var $modalCloses = getAll(".modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button");
if ($modalButtons.length > 0) {
$modalButtons.forEach(function ($el) {
$el.addEventListener('click', function () {
$el.addEventListener("click", function () {
var target = $el.dataset.target;
openModal(target);
});
@@ -177,7 +177,7 @@ document.addEventListener('DOMContentLoaded', function () {
if ($modalCloses.length > 0) {
$modalCloses.forEach(function ($el) {
$el.addEventListener('click', function () {
$el.addEventListener("click", function () {
closeModals();
});
});
@@ -185,18 +185,18 @@ document.addEventListener('DOMContentLoaded', function () {
function openModal(target) {
var $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(function ($el) {
$el.classList.remove('is-active');
$el.classList.remove("is-active");
});
}
document.addEventListener('keydown', function (event) {
document.addEventListener("keydown", function (event) {
var e = event || window.event;
if (e.keyCode === 27) {
@@ -207,22 +207,22 @@ document.addEventListener('DOMContentLoaded', function () {
// Clipboard
var $highlights = getAll('.highlight');
var $highlights = getAll(".highlight");
var itemsProcessed = 0;
if ($highlights.length > 0) {
$highlights.forEach(function ($el) {
var copyEl = '<button class="button bd-copy">Copy</button>';
var expandEl = '<button class="button is-small bd-expand">Expand</button>';
$el.insertAdjacentHTML('beforeend', copyEl);
$el.insertAdjacentHTML("beforeend", copyEl);
var $parent = $el.parentNode;
if ($parent && $parent.classList.contains('bd-is-more')) {
if ($parent && $parent.classList.contains("bd-is-more")) {
var 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++;
@@ -234,46 +234,48 @@ document.addEventListener('DOMContentLoaded', function () {
}
function addHighlightControls() {
var $highlightButtons = getAll('.highlight .bd-copy, .highlight .bd-expand');
var $highlightButtons = getAll(".highlight .bd-copy, .highlight .bd-expand");
$highlightButtons.forEach(function ($el) {
$el.addEventListener('mouseenter', function () {
$el.parentNode.classList.add('bd-is-hovering');
$el.parentNode.parentNode.classList.add('bd-is-hovering');
$el.addEventListener("mouseenter", function () {
$el.parentNode.classList.add("bd-is-hovering");
$el.parentNode.parentNode.classList.add("bd-is-hovering");
});
$el.addEventListener('mouseleave', function () {
$el.parentNode.classList.remove('bd-is-hovering');
$el.parentNode.parentNode.classList.remove('bd-is-hovering');
$el.addEventListener("mouseleave", function () {
$el.parentNode.classList.remove("bd-is-hovering");
$el.parentNode.parentNode.classList.remove("bd-is-hovering");
});
});
var $highlightExpands = getAll('.bd-snippet .bd-expand');
var $highlightExpands = getAll(".bd-snippet .bd-expand");
$highlightExpands.forEach(function ($el) {
$el.addEventListener('click', function () {
$el.parentNode.firstElementChild.style.maxHeight = 'none';
$el.addEventListener("click", function () {
$el.parentNode.firstElementChild.style.maxHeight = "none";
});
});
var $highlightShows = getAll('.bd-snippet .bd-show');
var $highlightShows = getAll(".bd-snippet .bd-show");
$highlightShows.forEach(function ($el) {
$el.addEventListener('click', function () {
var text = $el.querySelector('strong').textContent;
var newText = text === 'Show code' ? 'Hide code' : 'Show code';
$el.querySelector('strong').textContent = newText;
$el.parentNode.classList.toggle('bd-is-more-clipped');
$el.addEventListener("click", function () {
var text = $el.querySelector("strong").textContent;
var newText = text === "Show code" ? "Hide code" : "Show code";
$el.querySelector("strong").textContent = newText;
$el.parentNode.classList.toggle("bd-is-more-clipped");
});
});
}
setTimeout(function () {
new Clipboard('.bd-copy', {
new Clipboard(".bd-copy", {
target: function target(trigger) {
return trigger.previousElementSibling.firstElementChild;
}
});
new Clipboard(".bd-clipboard");
}, 100);
// Events
@@ -288,7 +290,7 @@ document.addEventListener('DOMContentLoaded', function () {
}, 10);
}
window.addEventListener('resize', handleResize);
window.addEventListener("resize", handleResize);
// Utils