mirror of
https://github.com/jgthms/bulma.git
synced 2024-12-26 14:34:22 +00:00
184 lines
3.9 KiB
JavaScript
184 lines
3.9 KiB
JavaScript
|
document.addEventListener("DOMContentLoaded", () => {
|
||
|
const CIRCLES = {
|
||
|
a: {
|
||
|
x: 0,
|
||
|
y: -400,
|
||
|
unit: 400,
|
||
|
speed: 1800,
|
||
|
},
|
||
|
b: {
|
||
|
x: 0,
|
||
|
y: -540,
|
||
|
unit: 540,
|
||
|
speed: 3600,
|
||
|
},
|
||
|
c: {
|
||
|
x: 0,
|
||
|
y: -680,
|
||
|
unit: 680,
|
||
|
speed: 5400,
|
||
|
},
|
||
|
};
|
||
|
|
||
|
const DOTS = {
|
||
|
// A
|
||
|
axbom: {
|
||
|
startAngle: 1000,
|
||
|
circle: "a",
|
||
|
},
|
||
|
ale_codes: {
|
||
|
startAngle: 0,
|
||
|
circle: "a",
|
||
|
},
|
||
|
modular: {
|
||
|
startAngle: 600,
|
||
|
circle: "a",
|
||
|
},
|
||
|
opensource: {
|
||
|
startAngle: 1600,
|
||
|
circle: "a",
|
||
|
},
|
||
|
free: {
|
||
|
startAngle: -800,
|
||
|
circle: "a",
|
||
|
},
|
||
|
responsive: {
|
||
|
startAngle: -1300,
|
||
|
circle: "a",
|
||
|
},
|
||
|
// B
|
||
|
dartsass: {
|
||
|
startAngle: -1000,
|
||
|
circle: "b",
|
||
|
},
|
||
|
skeletons: {
|
||
|
startAngle: 0,
|
||
|
circle: "b",
|
||
|
},
|
||
|
dark: {
|
||
|
startAngle: 1000,
|
||
|
circle: "b",
|
||
|
},
|
||
|
flexbox: {
|
||
|
startAngle: 2400,
|
||
|
circle: "b",
|
||
|
},
|
||
|
cssvars: {
|
||
|
startAngle: 3200,
|
||
|
circle: "b",
|
||
|
},
|
||
|
themes: {
|
||
|
startAngle: 4500,
|
||
|
circle: "b",
|
||
|
},
|
||
|
// C
|
||
|
autocolor: {
|
||
|
startAngle: -1000,
|
||
|
circle: "c",
|
||
|
},
|
||
|
smartgrid: {
|
||
|
startAngle: 800,
|
||
|
circle: "c",
|
||
|
},
|
||
|
infinitysearch: {
|
||
|
startAngle: 2000,
|
||
|
circle: "c",
|
||
|
},
|
||
|
bruhandle: {
|
||
|
startAngle: 4000,
|
||
|
circle: "c",
|
||
|
},
|
||
|
jesseschoff: {
|
||
|
startAngle: 6000,
|
||
|
circle: "c",
|
||
|
},
|
||
|
MyTopSecretName: {
|
||
|
startAngle: 7500,
|
||
|
circle: "c",
|
||
|
},
|
||
|
};
|
||
|
|
||
|
const animate = (el, id) => {
|
||
|
let { startAngle, circle } = DOTS[id];
|
||
|
let { unit, speed, x, y } = CIRCLES[circle];
|
||
|
el.style.setProperty("--animation-delay", `var(--circle-delay-${circle})`);
|
||
|
|
||
|
const rad = startAngle * (Math.PI / speed);
|
||
|
const left = Math.cos(rad) * unit + x;
|
||
|
const top = unit * (1 - Math.sin(rad)) + y;
|
||
|
const transform = `translate3d(${left}px, ${top}px, 0)`;
|
||
|
el.style.transform = transform;
|
||
|
DOTS[id].startAngle = DOTS[id].startAngle - 1;
|
||
|
};
|
||
|
|
||
|
const $dots = document.querySelectorAll(".js-dot");
|
||
|
|
||
|
$dots.forEach(($dot) => {
|
||
|
const id = $dot.dataset.id;
|
||
|
setInterval(() => {
|
||
|
animate($dot, id);
|
||
|
}, 10);
|
||
|
});
|
||
|
|
||
|
// 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";
|
||
|
} else {
|
||
|
$message.style.display = "none";
|
||
|
}
|
||
|
|
||
|
showing = Math.min(Math.max(parseInt(showing), 1), 12);
|
||
|
|
||
|
$columns.forEach(($el) => {
|
||
|
$el.style.display = "none";
|
||
|
});
|
||
|
$columns.slice(0, showing).forEach(($el) => {
|
||
|
$el.style.display = "block";
|
||
|
});
|
||
|
|
||
|
$markup.innerHTML =
|
||
|
'<span class="nt"><div</span> <span class="na">class=</span><span class="s">"columns"</span><span class="nt">></span>';
|
||
|
$markup.insertAdjacentHTML("beforeend", "\n");
|
||
|
|
||
|
for (let i = 0; i < showing; i++) {
|
||
|
$markup.insertAdjacentHTML(
|
||
|
"beforeend",
|
||
|
' <span class="nt"><div</span> <span class="na">class=</span><span class="s">"column"</span><span class="nt">></span>',
|
||
|
);
|
||
|
$markup.insertAdjacentHTML("beforeend", i + 1);
|
||
|
$markup.insertAdjacentHTML(
|
||
|
"beforeend",
|
||
|
'<span class="nt"></div></span>',
|
||
|
);
|
||
|
$markup.insertAdjacentHTML("beforeend", "\n");
|
||
|
}
|
||
|
|
||
|
$markup.insertAdjacentHTML(
|
||
|
"beforeend",
|
||
|
'<span class="nt"></div></span>',
|
||
|
);
|
||
|
}
|
||
|
|
||
|
$add.addEventListener("click", () => {
|
||
|
showing++;
|
||
|
showColumns();
|
||
|
});
|
||
|
|
||
|
$remove.addEventListener("click", () => {
|
||
|
showing--;
|
||
|
showColumns();
|
||
|
});
|
||
|
});
|