Merge pull request #2 from taroj1205:feat/color-change

feat(color-change): implement draggable theme color picker with position persistence
This commit is contained in:
taroj1205 2024-11-11 22:45:42 +13:00 committed by GitHub
commit 0d36566ae0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -2,12 +2,62 @@
type="color"
id="themeColor"
value="#f98175"
class="cursor-pointer rounded border-none bg-transparent"
class="cursor-move rounded border-none bg-transparent"
aria-label="Theme color"
/>
<script>
const colorInput = document.querySelector("#themeColor") as HTMLInputElement;
let isDragging = false;
let currentX: number;
let currentY: number;
let initialX: number;
let initialY: number;
// Load saved position from localStorage
const savedX = localStorage.getItem("themeColorX");
const savedY = localStorage.getItem("themeColorY");
if (savedX && savedY) {
colorInput.style.left = savedX;
colorInput.style.top = savedY;
}
colorInput?.addEventListener("mousedown", (e) => {
// Only handle left click
if (e.button !== 0) return;
isDragging = true;
initialX = e.clientX - colorInput.offsetLeft;
initialY = e.clientY - colorInput.offsetTop;
});
colorInput?.addEventListener("contextmenu", (e) => {
e.preventDefault();
// Reset position
colorInput.style.removeProperty("left");
colorInput.style.removeProperty("top");
localStorage.removeItem("themeColorX");
localStorage.removeItem("themeColorY");
});
document.addEventListener("mousemove", (e) => {
if (!isDragging) return;
e.preventDefault();
currentX = e.clientX - initialX;
currentY = e.clientY - initialY;
colorInput.style.left = `${currentX}px`;
colorInput.style.top = `${currentY}px`;
// Save position to localStorage
localStorage.setItem("themeColorX", `${currentX}px`);
localStorage.setItem("themeColorY", `${currentY}px`);
});
document.addEventListener("mouseup", () => {
isDragging = false;
});
colorInput?.addEventListener("input", (e) => {
const color = (e.target as HTMLInputElement).value;
document.documentElement.style.setProperty("--primary", color);