bulma/docs/lib/main.js

302 lines
8.2 KiB
JavaScript
Raw Normal View History

2022-01-16 00:00:43 +00:00
"use strict";
2017-07-01 17:30:39 +00:00
2022-01-16 00:00:43 +00:00
document.addEventListener("DOMContentLoaded", function () {
// Search
2017-07-01 17:30:39 +00:00
var setSearchToggle = function setSearchToggle() {
2022-01-16 00:00:43 +00:00
var icon = document.getElementById("searchIcon");
var search = document.getElementById("search");
var input = document.getElementById("algoliaSearch");
2018-04-09 19:19:29 +00:00
if (!icon) {
return;
}
2018-04-09 19:19:29 +00:00
2022-01-16 00:00:43 +00:00
icon.addEventListener("click", function (event) {
search.classList.toggle("bd-is-visible");
2018-04-09 19:19:29 +00:00
2022-01-16 00:00:43 +00:00
if (search.classList.contains("bd-is-visible")) {
algoliaSearch.focus();
2018-04-09 19:19:29 +00:00
}
});
2022-01-16 00:00:43 +00:00
window.addEventListener("keydown", function (event) {
if (event.key === "Escape") {
return search.classList.remove("bd-is-visible");
2018-04-10 22:52:51 +00:00
}
});
};
2018-04-10 22:52:51 +00:00
setSearchToggle();
2018-04-10 22:52:51 +00:00
// Navbar
2018-04-10 22:52:51 +00:00
var setNavbarVisibility = function setNavbarVisibility() {
2022-01-16 00:00:43 +00:00
var navbar = document.getElementById("navbar");
2018-04-10 22:52:51 +00:00
if (!navbar) {
return;
2018-04-10 22:52:51 +00:00
}
var cs = getComputedStyle(navbar);
var paddingX = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);
2022-01-16 00:00:43 +00:00
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");
2018-04-10 22:52:51 +00:00
var rest = navbar.clientWidth - paddingX - brand.clientWidth - end.clientWidth - search.clientWidth;
2018-04-10 22:52:51 +00:00
var space = original.clientWidth;
2022-01-16 00:00:43 +00:00
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;
var showMore = function showMore() {};
var hideMore = function hideMore() {};
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;
try {
for (var _iterator = all[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
var item = _step.value;
totalWidth += item.offsetWidth;
if (totalWidth > rest) {
break;
}
count++;
2018-04-10 22:52:51 +00:00
}
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator.return) {
_iterator.return();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
}
}
}
2018-04-10 22:52:51 +00:00
var howManyMore = Math.max(0, count - base.length);
2017-07-20 19:01:55 +00:00
if (howManyMore > 0) {
for (var i = 0; i < howManyMore; i++) {
2022-01-16 00:00:43 +00:00
more[i].classList.add("bd-is-visible");
dropdown[i].classList.add("bd-is-hidden");
}
}
2017-07-29 12:02:00 +00:00
for (var j = howManyMore; j < more.length; j++) {
2022-01-16 00:00:43 +00:00
more[j].classList.remove("bd-is-visible");
}
for (var k = howManyMore; k < dropdown.length; k++) {
2022-01-16 00:00:43 +00:00
dropdown[k].classList.remove("bd-is-hidden");
}
};
setNavbarVisibility();
// Cookies
2022-01-16 00:00:43 +00:00
var cookieBookModalName = "bulma_closed_book_modal";
var cookieBookModal = Cookies.getJSON(cookieBookModalName) || false;
2017-07-29 12:02:00 +00:00
// Dropdowns
2022-01-16 00:00:43 +00:00
var $dropdowns = getAll(".dropdown:not(.is-hoverable)");
2017-07-20 19:01:55 +00:00
if ($dropdowns.length > 0) {
$dropdowns.forEach(function ($el) {
2022-01-16 00:00:43 +00:00
$el.addEventListener("click", function (event) {
2017-07-20 19:01:55 +00:00
event.stopPropagation();
2022-01-16 00:00:43 +00:00
$el.classList.toggle("is-active");
2017-07-20 19:01:55 +00:00
});
});
2022-01-16 00:00:43 +00:00
document.addEventListener("click", function (event) {
2017-07-21 07:30:56 +00:00
closeDropdowns();
});
}
function closeDropdowns() {
$dropdowns.forEach(function ($el) {
2022-01-16 00:00:43 +00:00
$el.classList.remove("is-active");
2017-07-20 19:01:55 +00:00
});
}
2017-07-02 16:34:44 +00:00
// Toggles
2017-07-01 17:30:39 +00:00
2022-01-16 00:00:43 +00:00
var $burgers = getAll(".navbar-burger");
2017-07-01 17:30:39 +00:00
2017-07-02 16:34:44 +00:00
if ($burgers.length > 0) {
$burgers.forEach(function ($el) {
2020-12-09 15:44:40 +00:00
if (!$el.dataset.target) {
return;
}
2022-01-16 00:00:43 +00:00
$el.addEventListener("click", function () {
2017-07-02 16:34:44 +00:00
var target = $el.dataset.target;
var $target = document.getElementById(target);
2022-01-16 00:00:43 +00:00
$el.classList.toggle("is-active");
$target.classList.toggle("is-active");
2017-07-02 16:34:44 +00:00
});
2017-07-01 17:30:39 +00:00
});
}
// Modals
2017-10-26 18:47:48 +00:00
var rootEl = document.documentElement;
2022-01-16 00:00:43 +00:00
var $modals = getAll(".modal");
var $modalButtons = getAll(".modal-button");
var $modalCloses = getAll(".modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button");
2017-07-01 17:30:39 +00:00
if ($modalButtons.length > 0) {
$modalButtons.forEach(function ($el) {
2022-01-16 00:00:43 +00:00
$el.addEventListener("click", function () {
2017-07-01 17:30:39 +00:00
var target = $el.dataset.target;
2018-03-26 14:33:31 +00:00
openModal(target);
2017-07-01 17:30:39 +00:00
});
});
}
if ($modalCloses.length > 0) {
$modalCloses.forEach(function ($el) {
2022-01-16 00:00:43 +00:00
$el.addEventListener("click", function () {
2017-07-01 17:30:39 +00:00
closeModals();
});
});
}
2018-03-26 14:33:31 +00:00
function openModal(target) {
var $target = document.getElementById(target);
2022-01-16 00:00:43 +00:00
rootEl.classList.add("is-clipped");
$target.classList.add("is-active");
2018-03-26 14:33:31 +00:00
}
2017-07-01 17:30:39 +00:00
function closeModals() {
2022-01-16 00:00:43 +00:00
rootEl.classList.remove("is-clipped");
2017-07-01 17:30:39 +00:00
$modals.forEach(function ($el) {
2022-01-16 00:00:43 +00:00
$el.classList.remove("is-active");
2017-07-01 17:30:39 +00:00
});
}
2017-07-02 15:52:20 +00:00
2022-01-16 00:00:43 +00:00
document.addEventListener("keydown", function (event) {
2018-04-08 18:54:36 +00:00
var e = event || window.event;
2018-04-08 18:54:36 +00:00
if (e.keyCode === 27) {
closeModals();
closeDropdowns();
}
});
2017-07-02 15:52:20 +00:00
// Clipboard
2022-01-16 00:00:43 +00:00
var $highlights = getAll(".highlight");
2017-07-02 15:52:20 +00:00
var itemsProcessed = 0;
if ($highlights.length > 0) {
$highlights.forEach(function ($el) {
var copyEl = '<button class="button bd-copy">Copy</button>';
2017-10-09 11:27:08 +00:00
var expandEl = '<button class="button is-small bd-expand">Expand</button>';
2022-01-16 00:00:43 +00:00
$el.insertAdjacentHTML("beforeend", copyEl);
2017-07-02 15:52:20 +00:00
2017-10-09 11:27:08 +00:00
var $parent = $el.parentNode;
2022-01-16 00:00:43 +00:00
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>';
2022-01-16 00:00:43 +00:00
$parent.insertAdjacentHTML("afterbegin", showEl);
2017-10-09 14:38:12 +00:00
} else if ($el.firstElementChild.scrollHeight > 480 && $el.firstElementChild.clientHeight <= 480) {
2022-01-16 00:00:43 +00:00
$el.insertAdjacentHTML("beforeend", expandEl);
2017-07-02 15:52:20 +00:00
}
itemsProcessed++;
2017-07-02 15:52:20 +00:00
if (itemsProcessed === $highlights.length) {
addHighlightControls();
}
});
}
function addHighlightControls() {
2022-01-16 00:00:43 +00:00
var $highlightButtons = getAll(".highlight .bd-copy, .highlight .bd-expand");
2017-07-02 15:52:20 +00:00
$highlightButtons.forEach(function ($el) {
2022-01-16 00:00:43 +00:00
$el.addEventListener("mouseenter", function () {
$el.parentNode.classList.add("bd-is-hovering");
$el.parentNode.parentNode.classList.add("bd-is-hovering");
2017-07-02 15:52:20 +00:00
});
2022-01-16 00:00:43 +00:00
$el.addEventListener("mouseleave", function () {
$el.parentNode.classList.remove("bd-is-hovering");
$el.parentNode.parentNode.classList.remove("bd-is-hovering");
2017-07-02 15:52:20 +00:00
});
});
2022-01-16 00:00:43 +00:00
var $highlightExpands = getAll(".bd-snippet .bd-expand");
2017-07-02 15:52:20 +00:00
$highlightExpands.forEach(function ($el) {
2022-01-16 00:00:43 +00:00
$el.addEventListener("click", function () {
$el.parentNode.firstElementChild.style.maxHeight = "none";
2017-07-02 15:52:20 +00:00
});
});
2017-10-09 11:27:08 +00:00
2022-01-16 00:00:43 +00:00
var $highlightShows = getAll(".bd-snippet .bd-show");
2017-10-09 11:27:08 +00:00
$highlightShows.forEach(function ($el) {
2022-01-16 00:00:43 +00:00
$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");
2017-10-09 11:27:08 +00:00
});
});
2017-07-02 15:52:20 +00:00
}
2018-02-13 11:15:12 +00:00
setTimeout(function () {
2022-01-16 00:00:43 +00:00
new Clipboard(".bd-copy", {
2018-02-13 11:15:12 +00:00
target: function target(trigger) {
return trigger.previousElementSibling.firstElementChild;
}
});
2022-01-16 00:00:43 +00:00
new Clipboard(".bd-clipboard");
2018-02-13 11:15:12 +00:00
}, 100);
2017-07-02 15:52:20 +00:00
// Events
2017-07-02 15:52:20 +00:00
var resizeTimer = void 0;
2020-05-10 23:25:29 +00:00
function handleResize() {
window.clearTimeout(resizeTimer);
2018-04-11 00:14:29 +00:00
resizeTimer = window.setTimeout(function () {
setNavbarVisibility();
}, 10);
2018-04-10 22:52:51 +00:00
}
2022-01-16 00:00:43 +00:00
window.addEventListener("resize", handleResize);
2018-04-11 00:14:29 +00:00
// Utils
function getAll(selector) {
var parent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document;
2018-04-11 00:14:29 +00:00
return Array.prototype.slice.call(parent.querySelectorAll(selector), 0);
2018-04-11 00:14:29 +00:00
}
2017-07-01 17:30:39 +00:00
});