Lightroom

Published by theTerrible on

Hover over here.

This was something I thought would be really easy to create with just JS and CSS. Turns out it was.

All I’m doing is captured where your inputs are and creating a radial gradient around it, like a flashlight.

Small note: on mobile the right side of the page has what looks like a white column. I have no idea why this is.

const blackOut = document.querySelector(".main");
blackOut.style.background = "black";
blackOut.style.color="black";
AttachEvents(blackOut, "mousemove", flashlight);
AttachEvents(blackOut, "mouseout", darkness);
AttachEvents(blackOut, "touchmove", flashlight);
AttachEvents(blackOut, "touchend", darkness);
const ligthSwitch = document.querySelector(".light-switch");
AttachEvents(ligthSwitch, "click", toggleLightRoom);
function AttachEvents(element, type, handler){
    element.addEventListener(type, handler);
}
function DetachEvents(element, type, handler){
    element.removeEventListener(type, handler);
}
function flashlight(e) {
    e = e || window.event;
    if (e.type == "touchmove"){
        var clientX = e.touches[0].clientX + window.pageXOffset;
        var clientY = e.touches[0].clientY + window.pageYOffset;
    } else {
        var clientX = e.clientX + window.pageXOffset;
        var clientY = e.clientY + window.pageYOffset;
    }
    this.style.background = "radial-gradient(circle at top " + clientY + "px left " + clientX + "px, white, black 20%)";
}
function darkness(e) {
    this.style.background = "black";
}
function toggleLightRoom(e){
    const blackOut = document.querySelector(".main");
    if (this.classList.contains("off")){
        this.classList.remove("off");
        this.classList.add("on");
        DetachEvents(blackOut, "mousemove", flashlight);
        DetachEvents(blackOut, "mouseout", darkness);
        DetachEvents(blackOut, "touchmove", flashlight);
        DetachEvents(blackOut, "touchend", darkness);
        blackOut.style.background = "white";
    } else {
        this.classList.add("off");
        this.classList.remove("on");
        AttachEvents(blackOut, "mousemove", flashlight);
        AttachEvents(blackOut, "mouseout", darkness);
        AttachEvents(blackOut, "touchmove", flashlight);
        AttachEvents(blackOut, "touchend", darkness);
    }
}

Yup, it’s just that easy!

Categories: Code