50 lines
1.7 KiB
JavaScript
50 lines
1.7 KiB
JavaScript
"use strict";
|
|
|
|
/* eslint-disable */
|
|
|
|
if (location.hash.substring(1).startsWith(encodeURIComponent("{"))) {
|
|
location.pathname = "/playground/";
|
|
}
|
|
|
|
window.addEventListener("load", function() {
|
|
// We don't have access to a unique body css attribute for just the homepage
|
|
// so instead it is set on load. It's only really visible on a vertical overscroll
|
|
document.body.style.backgroundColor = "rgb(24, 32, 37)";
|
|
|
|
var logoWrapper = document.querySelector(".animatedLogoWrapper");
|
|
var logo = document.querySelector(".prettier-logo-wide");
|
|
var lastDash = logo.querySelector("g:last-of-type path:last-of-type");
|
|
|
|
function handleLogoDrag(event) {
|
|
logo.classList.add("rolling");
|
|
event.preventDefault();
|
|
}
|
|
|
|
logoWrapper.setAttribute("draggable", "true");
|
|
logoWrapper.addEventListener("touchstart", handleLogoDrag);
|
|
logoWrapper.addEventListener("dragstart", handleLogoDrag);
|
|
|
|
lastDash.addEventListener("animationend", function(event) {
|
|
if (event.animationName.match(/roll/)) {
|
|
logo.classList.remove("rolling");
|
|
}
|
|
});
|
|
|
|
var yarnButton = document.querySelector(".showYarnButton");
|
|
var npmButton = document.querySelector(".showNpmButton");
|
|
var getStartedSection = document.querySelector(".getStartedSection");
|
|
|
|
npmButton.addEventListener("click", function(event) {
|
|
event.preventDefault();
|
|
npmButton.classList.add("active");
|
|
yarnButton.classList.remove("active");
|
|
getStartedSection.classList.add("getStartedSection--npm");
|
|
});
|
|
yarnButton.addEventListener("click", function(event) {
|
|
event.preventDefault();
|
|
yarnButton.classList.add("active");
|
|
npmButton.classList.remove("active");
|
|
getStartedSection.classList.remove("getStartedSection--npm");
|
|
});
|
|
});
|