Wix-Color-Picker

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>PostMessage Color Picker</title>
    <style>
      body {
        font-family: sans-serif;
        padding: 2rem;
        text-align: center;
      }
      .swatches {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        justify-content: center;
        margin-top: 20px;
      }
      .swatch {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 2px solid #333;
        cursor: pointer;
        transition: transform 0.2s;
      }
      .swatch:hover {
        transform: scale(1.1);
      }
      #selectedColor {
        margin-top: 1rem;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h2>Color Picker</h2>
    <div class="swatches" id="swatchContainer"></div>
    <div id="selectedColor">Selected Color: None</div>
    <script>
      const swatchContainer = document.getElementById("swatchContainer");
      const selectedColorDisplay = document.getElementById("selectedColor");
      window.addEventListener("message", (event) => {
        try {
          const { type, colors } = event.data;
          if (type === "loadColors" && Array.isArray(colors)) {
            swatchContainer.innerHTML = ""; // Clear old swatches
            colors.forEach(color => {
              const swatch = document.createElement("div");
              swatch.className = "swatch";
              swatch.style.backgroundColor = color;
              swatch.dataset.color = color;
              swatch.addEventListener("click", () => {
                const selectedColor = swatch.dataset.color;
                selectedColorDisplay.textContent = `Selected Color: ${selectedColor}`;
                window.parent.postMessage({
                  type: "colorSelected",
                  color: selectedColor
                }, "*");
              }); swatchContainer.appendChild(swatch);
            });
          }
        } catch (err)...