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

Add navbar component, Fix JS highlight

Browse Source
This commit is contained in:
Jeremy Thomas
2017-07-02 16:52:20 +01:00
parent 6fe8ce9795
commit 43b034e0af
15 changed files with 345 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
docs/_javascript/main.js
View File

@@ -15,15 +15,14 @@ document.addEventListener('DOMContentLoaded', () => {
// Modals
const $html = document.documentElement;
const $modals = Array.prototype.slice.call(document.querySelectorAll('.modal'), 0);
const $modalButtons = Array.prototype.slice.call(document.querySelectorAll('.modal-button'), 0);
const $modalCloses = Array.prototype.slice.call(document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button'), 0);
const $modals = getAll('.modal');
const $modalButtons = getAll('.modal-button');
const $modalCloses = getAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button');
if ($modalButtons.length > 0) {
$modalButtons.forEach($el => {
$el.addEventListener('click', () => {
const target = $el.dataset.target;
console.log('target', target);
const $target = document.getElementById(target);
$html.classList.add('is-clipped');
$target.classList.add('is-active');
@@ -53,4 +52,60 @@ document.addEventListener('DOMContentLoaded', () => {
});
}
// Clipboard
const $highlights = getAll('.highlight');
let itemsProcessed = 0;
if ($highlights.length > 0) {
$highlights.forEach($el => {
const copy = '<button class="copy">Copy</button>';
const expand = '<button class="expand">Expand</button>';
$el.insertAdjacentHTML('beforeend', copy);
if ($el.firstElementChild.scrollHeight > 600) {
$el.insertAdjacentHTML('beforeend', expand);
}
itemsProcessed++;
if (itemsProcessed === $highlights.length) {
addHighlightControls();
}
});
}
function addHighlightControls() {
const $highlightButtons = getAll('.highlight .copy, .highlight .expand');
$highlightButtons.forEach($el => {
$el.addEventListener('mouseenter', () => {
$el.parentNode.style.boxShadow = '0 0 0 1px #ed6c63';
});
$el.addEventListener('mouseleave', () => {
$el.parentNode.style.boxShadow = 'none';
});
});
const $highlightExpands = getAll('.highlight .expand');
$highlightExpands.forEach($el => {
$el.addEventListener('click', () => {
$el.parentNode.firstElementChild.style.maxHeight = 'none';
});
});
}
new Clipboard('.copy', {
target: function(trigger) {
return trigger.previousSibling;
}
});
// Functions
function getAll(selector) {
return Array.prototype.slice.call(document.querySelectorAll(selector), 0);
}
});