Created
February 26, 2018 12:04
-
-
Save alexusmai/e393122eacb9f00fa25fd746c3eccfc6 to your computer and use it in GitHub Desktop.
Bulma - js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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