Membina Sambungan Pemilih Warna-tutorial css-php.cn

Membina Sambungan Pemilih Warna

DDD

Lepaskan： 2024-09-13 14:16:01

asal

532 orang telah melayarinya

Building a Color Picker Extension

pengenalan

Dalam catatan blog ini, kami akan meneroka cara mencipta sambungan penyemak imbas pemilih warna yang ringkas tetapi berkuasa. Sambungan ini membolehkan pengguna memilih warna dengan mudah daripada skrin mereka, melihat sejarah warna yang dipilih dan mengurus palet warna mereka dengan interaksi mudah.

Gambaran Keseluruhan Projek

Pelanjutan Color Picker menyediakan antara muka mesra pengguna kepada:

Pilih warna daripada skrin menggunakan EyeDropper API.
Lihat sejarah warna yang dipilih.
Salin kod warna ke papan keratan.
Kosongkan semua warna yang dipilih.

Ciri-ciri

Memilih Warna: Gunakan EyeDropper API untuk memilih warna daripada mana-mana bahagian skrin anda.
Sejarah Warna: Kekalkan senarai warna yang dipilih dengan akses mudah.
Salin Papan Keratan: Salin kod warna dengan cepat ke papan keratan.
Kosongkan Semua: Alih keluar semua warna daripada sejarah dengan satu klik.

Teknologi yang Digunakan

HTML: Penanda untuk pop timbul sambungan.
CSS: Penggayaan untuk pop timbul dan elemennya.
JavaScript: Mengendalikan pemilihan warna, memaparkan sejarah warna dan mengurus operasi papan keratan.
EyeDropper API: Membenarkan memilih warna daripada skrin.
localStorage: Menyimpan warna yang dipilih merentas sesi.

Struktur Projek

HTML (index.html): Mengandungi struktur untuk antara muka pemilih warna.
CSS (style.css): Menggayakan pop timbul dan elemennya.
JavaScript (script.js): Mengurus kefungsian seperti memilih warna, memaparkannya dan berinteraksi dengan storan setempat.
Manifes (manifest.json): Mentakrifkan metadata dan konfigurasi sambungan.

Pemasangan

Untuk menguji sambungan secara setempat:

Simpan fail ke dalam direktori.
Buka Chrome dan navigasi ke chrome://extensions/.
Dayakan "Mod pembangun" (togol di bahagian atas sebelah kanan).
Klik "Muat dibongkar" dan pilih direktori projek anda.

Penggunaan

Klik butang "Pilih Warna" dalam pop timbul sambungan untuk mengaktifkan pemilih warna.
Pilih warna dari mana-mana sahaja pada skrin.
Lihat warna yang dipilih dalam pop timbul dan klik pada mana-mana warna untuk menyalin kodnya ke papan keratan.
Klik "Kosongkan Semua" untuk mengalih keluar semua warna daripada sejarah.

Penerangan Kod

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
</head>
<body>
    <div class="popup">
        <div class="picker">
            <button id="color-picker">Pick Color</button>
        </div>
        <div class="picked-colors hide">
            <header>
                <p class="title">Picked colors</p>
                <span class="clear-all">Clear All</span>
            </header>
            <ul class="all-colors"></ul>
        </div>
    </div>
</body>
</html>

Salin selepas log masuk

JavaScript

const colorPickerBtn = document.querySelector("#color-picker");
const clearAll = document.querySelector(".clear-all");
const colorList = document.querySelector(".all-colors");
const pickedColors = JSON.parse(localStorage.getItem("picked-colors") || "[]");

const copyColor = (elem) => {
    elem.innerText = "Copied";
    navigator.clipboard.writeText(elem.dataset.color);
    setTimeout(() => elem.innerText = elem.dataset.color, 1000);
}

const showColor = () => {
    if (!pickedColors.length) return;
    colorList.innerHTML = pickedColors.map(color => `
        <li class="color">
            <span class="rect" style="background: ${color}; border: 1px solid ${color == "#ffffff" ? "#ccc" : color}"></span>
            <span class="value hex" data-color="${color}">${color}</span>
        </li>
    `).join("");
    document.querySelector(".picked-colors").classList.remove("hide");

    document.querySelectorAll(".color").forEach(li => {
        li.addEventListener("click", e => copyColor(e.currentTarget.lastElementChild));
    });
}
showColor();

const activateEyeDropper = () => {
    document.body.style.display = "none";
    setTimeout(async () => {
        try {
            const eyeDropper = new EyeDropper();
            const { sRGBHex } = await eyeDropper.open();
            navigator.clipboard.writeText(sRGBHex);

            if (!pickedColors.includes(sRGBHex)) {
                pickedColors.push(sRGBHex);
                localStorage.setItem("picked-colors", JSON.stringify(pickedColors));
                showColor();
            }
        } catch (error) {
            alert("Failed to copy the color code!");
        }
        document.body.style.display = "block";
    }, 10);
}

const clearAllColors = () => {
    pickedColors.length = 0;
    localStorage.setItem("picked-colors", JSON.stringify(pickedColors));
    document.querySelector(".picked-colors").classList.add("hide");
}

clearAll.addEventListener("click", clearAllColors);
colorPickerBtn.addEventListener("click", activateEyeDropper);

Salin selepas log masuk

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
.popup {
  width: 350px;
  background: #fff;
}
.popup :where(.picker, header, .all-colors) {
  display: flex;
  align-items: center;
}
.popup .picker {
  padding: 30px 0;
  background: #E3F2FD;
  justify-content: center;
}
.picker #color-picker {
  border: none;
  outline: none;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  padding: 10px 20px;
  border-radius: 5px;
  background: #5372F0;
  transition: 0.3s ease;
}
#color-picker:hover {
  background: #2c52ed;
}
.picked-colors {
  margin: 10px 15px;
}
.picked-colors header {
  justify-content: space-between;
}
header .title {
  font-size: 1rem;
}
header .clear-all {
  cursor: pointer;
  font-size: 0.9rem;
  color: #5372F0;
}
header .clear-all:hover {
  color: #143feb;
}
.picked-colors.hide {
  display: none;
}
.picked-colors .all-colors {
  flex-wrap: wrap;
  list-style: none;
  margin: 10px 0 15px;
}
.all-colors .color {
  display: flex;
  cursor: pointer;
  margin-bottom: 10px;
  width: calc(100% / 3);
}
.all-colors .rect {
  height: 21px;
  width: 21px;
  display: block;
  margin-right: 8px;
  border-radius: 5px;
}
.all-colors .color span {
  font-size: 0.96rem;
  font-weight: 500;
  text-transform: uppercase;
  font-family: "Open sans";
}

Salin selepas log masuk

Demo Langsung

Anda boleh menguji sambungan secara setempat dengan mengikut arahan pemasangan di atas. Setelah dipasang, pop timbul sambungan akan membolehkan anda memilih warna dan mengurus sejarah warna anda.

Kesimpulan

Sambungan Pemilih Warna ini menunjukkan cara menyepadukan API EyeDropper ke dalam sambungan penyemak imbas, memberikan pengguna alat yang berguna untuk pemilihan dan pengurusan warna. Sama ada anda seorang pereka bentuk atau hanya seseorang yang gemar bekerja dengan warna, sambungan ini boleh meningkatkan aliran kerja anda.

Kredit

EyeDropper API: Menyediakan kefungsian untuk memilih warna daripada skrin.
Fon Poppins: Digunakan untuk menggayakan teks dalam pop timbul.

Pengarang

Abhishek Gurjar ialah pembangun web berdedikasi yang bersemangat untuk mencipta aplikasi web yang praktikal dan berfungsi. Lihat lebih banyak projek beliau di GitHub.

Atas ialah kandungan terperinci Membina Sambungan Pemilih Warna. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!