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 v1 beta link

Browse Source
This commit is contained in:
Jeremy Thomas
2024-01-11 03:58:20 +00:00
parent f1d23c178d
commit 363f29b026
7 changed files with 316 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
docs/_javascript/index.js
View File

@@ -1,84 +1,128 @@
document.addEventListener('DOMContentLoaded', () => {
document.addEventListener("DOMContentLoaded", () => {
// Intro
const introVideo = document.getElementById('introVideo');
const introIframe = document.getElementById('introIframe');
const npmClipboard = new Clipboard('#npmCopy');
const introVideo = document.getElementById("introVideo");
const introIframe = document.getElementById("introIframe");
const npmClipboard = new Clipboard("#npmCopy");
if (window.Vimeo) {
const introPlayer = new Vimeo.Player(introIframe);
introPlayer.ready().then(function() {
introVideo.classList.add('has-loaded');
introPlayer.ready().then(function () {
introVideo.classList.add("has-loaded");
});
}
npmClipboard.on('success', function(e) {
e.trigger.innerText = 'copied!';
e.trigger.classList.add('is-success');
npmClipboard.on("success", function (e) {
e.trigger.innerText = "copied!";
e.trigger.classList.add("is-success");
setTimeout(() => {
e.trigger.innerText = 'copy';
e.trigger.classList.remove('is-success');
e.trigger.innerText = "copy";
e.trigger.classList.remove("is-success");
}, 500);
e.clearSelection();
});
npmClipboard.on('error', function(e) {
e.trigger.innerText = 'error!';
e.trigger.classList.add('is-error');
npmClipboard.on("error", function (e) {
e.trigger.innerText = "error!";
e.trigger.classList.add("is-error");
setTimeout(() => {
e.trigger.innerText = 'copy';
e.trigger.classList.remove('is-error');
e.trigger.innerText = "copy";
e.trigger.classList.remove("is-error");
}, 500);
});
// Grid
const $grid = document.getElementById('grid');
const $columns = Array.prototype.slice.call(document.querySelectorAll('#grid > .column'), 0);
const $markup = document.querySelector('#markup code');
const $message = document.getElementById('message');
const $add = document.getElementById('add');
const $remove = document.getElementById('remove');
const $grid = document.getElementById("grid");
const $columns = Array.prototype.slice.call(
document.querySelectorAll("#grid > .column"),
0
);
const $markup = document.querySelector("#markup code");
const $message = document.getElementById("message");
const $add = document.getElementById("add");
const $remove = document.getElementById("remove");
let showing = 5;
function showColumns() {
if (showing === 13) {
$message.style.display = 'block';
$message.style.display = "block";
} else {
$message.style.display = 'none';
$message.style.display = "none";
}
showing = Math.min(Math.max(parseInt(showing), 1), 12);
$columns.forEach($el => {
$el.style.display = 'none';
$columns.forEach(($el) => {
$el.style.display = "none";
});
$columns.slice(0, showing).forEach($el => {
$el.style.display = 'block';
$columns.slice(0, showing).forEach(($el) => {
$el.style.display = "block";
});
$markup.innerHTML = '<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;columns&quot;</span><span class="nt">&gt;</span>';
$markup.insertAdjacentHTML('beforeend', '\n');
$markup.innerHTML =
'<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;columns&quot;</span><span class="nt">&gt;</span>';
$markup.insertAdjacentHTML("beforeend", "\n");
for(let i = 0; i < showing; i++) {
$markup.insertAdjacentHTML('beforeend', ' <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;column&quot;</span><span class="nt">&gt;</span>');
$markup.insertAdjacentHTML('beforeend', i + 1);
$markup.insertAdjacentHTML('beforeend', '<span class="nt">&lt;/div&gt;</span>');
$markup.insertAdjacentHTML('beforeend', '\n');
for (let i = 0; i < showing; i++) {
$markup.insertAdjacentHTML(
"beforeend",
' <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;column&quot;</span><span class="nt">&gt;</span>'
);
$markup.insertAdjacentHTML("beforeend", i + 1);
$markup.insertAdjacentHTML(
"beforeend",
'<span class="nt">&lt;/div&gt;</span>'
);
$markup.insertAdjacentHTML("beforeend", "\n");
}
$markup.insertAdjacentHTML('beforeend', '<span class="nt">&lt;/div&gt;</span>');
$markup.insertAdjacentHTML(
"beforeend",
'<span class="nt">&lt;/div&gt;</span>'
);
}
$add.addEventListener('click', () => {
$add.addEventListener("click", () => {
showing++;
showColumns();
});
$remove.addEventListener('click', () => {
$remove.addEventListener("click", () => {
showing--;
showColumns();
});
// Amis
const $amis = document.getElementById("amis");
fetch("https://jgthms.com/amis.json")
.then((response) => {
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
return response.json();
})
.then((response) => {
const { by_id, home } = response;
home.forEach((id) => {
const ami = by_id[id];
const { url, alt = "", width, height } = ami;
const el = document.createElement("a");
el.className = "bd-sponsor-item bd-partner-sponsor";
el.href = "url";
el.target = "_blank";
el.title = alt;
const extension = ami.svg ? ".svg" : ".png";
const img = document.createElement("img");
img.src = `/images/amis/${id}${extension}`;
img.height = height;
img.width = width;
el.appendChild(img);
$amis.appendChild(el);
});
});
});