Instantly share code, notes, and snippets.

Embed
What would you like to do?
Bulma - js
// Mobile menu - nav
document.addEventListener('DOMContentLoaded', function () {
// Get all "navbar-burger" elements
let $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
// Check if there are any navbar burgers
if ($navbarBurgers.length > 0) {
// Add a click event on each of them
$navbarBurgers.forEach(function ($el) {
$el.addEventListener('click', function () {
// Get the target from the "data-target" attribute
let target = $el.dataset.target;
let $target = document.getElementById(target);
// Toggle the class on both the "navbar-burger" and the "navbar-menu"
$el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
}
// Allow all cards content and footers to be collapsed
let cardItems = Array.prototype.slice.call(document.querySelectorAll('.card-header-icon'), 0);
if (cardItems.length > 0) {
cardItems.forEach(function(el) {
el.addEventListener('click', () => {
let card = el.parentElement.parentElement;
let content = card.querySelector('.card-content');
let footer = card.querySelector('.card-footer');
if(content !== undefined) {
content.classList.toggle('is-hidden');
}
if(footer !== undefined) {
footer.classList.toggle('is-hidden');
}
});
});
}
// Allow tabs to be changed
let tabItems = Array.prototype.slice.call(document.querySelectorAll('.tabs > ul > li'), 0);
if (tabItems.length > 0) {
tabItems.forEach(function(el) {
el.addEventListener('click', () => {
let target = document.getElementById(el.dataset.target);
let currentActive = el.parentElement.querySelector('.is-active');
let currentTarget = document.getElementById(currentActive.dataset.target);
// Hide current tab and make current tab header not active
currentTarget.classList.toggle('is-hidden');
currentActive.classList.toggle('is-active');
// Highlight new tab and show content
el.classList.toggle('is-active');
target.classList.toggle('is-hidden');
});
});
}
// Message close button - hide message
let messageItems = Array.prototype.slice.call(document.querySelectorAll('.message > .message-header > .delete'), 0);
if (messageItems.length > 0) {
messageItems.forEach(function(el) {
el.addEventListener('click', () => {
// Message block
let message = el.parentElement.parentElement;
// Hide
message.classList.add('is-hidden');
});
});
}
// Notification close button - hide notification
let notificationItems = Array.prototype.slice.call(document.querySelectorAll('.notification > .delete'), 0);
if (notificationItems.length > 0) {
notificationItems.forEach(function(el) {
el.addEventListener('click', () => {
// Notification block
let notification = el.parentElement;
// Hide
notification.classList.add('is-hidden');
});
});
}
// File input
let fileInput = Array.prototype.slice.call(document.querySelectorAll('.file.has-name > .file-label > .file-input'), 0);
if (fileInput.length > 0) {
fileInput.forEach(function(el) {
el.addEventListener('change', () => {
let fileName = el.parentElement.querySelector('.file-name');
// add file name
fileName.innerHTML = el.files[0].name;
});
});
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment