Heimdall

JavaScript personnalisé

Annuler

window.addEventListener("load", () => {
  // Trouver le champ de recherche
  const search =
    document.querySelector('input[type="search"]') ||
    document.querySelector('#search') ||
    document.querySelector('input[placeholder*="Chercher"]') ||
    document.querySelector('input[type="text"]');

if (!search) {
    console.log("[Heimdall] Champ de recherche introuvable");
    return;
  }

// On cible le bloc qui contient réellement la barre (souvent un form, sinon parent)
  const form = search.closest("form") || search.parentElement;
  // On tente aussi un niveau au-dessus, parfois c’est lui qui bouge réellement
  const target = (form && form.parentElement) ? form.parentElement : form;

// Nettoyer si déjà présent
  const old = document.querySelector("#heimdall-clock-wrap");
  if (old) old.remove();

// ====== Horloge + date (fixe en haut) ======
  const wrap = document.createElement("div");
  wrap.id = "heimdall-clock-wrap";
  wrap.style.cssText = `
    position:fixed;
    top:10px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px; /* moins d'espace entre heure et date */
    z-index:9999;
    pointer-events:none;
  `;

const clock = document.createElement("div");
  clock.id = "heimdall-clock";
  clock.style.cssText = `
    padding:10px 18px;
    border-radius:14px;
    background:rgba(0,0,0,.38);
    color:rgba(220,220,220,0.92);
    font-family:system-ui,JetBrains Mono, monospace;
    font-size:34px;
    font-weight:600;
    letter-spacing:0.5px;
    line-height:1;
    text-shadow: 0 2px 8px rgba(0,0,0,0.45);
  `;

const date = document.createElement("div");
  date.id = "heimdall-date";
  date.style.cssText = `
    padding:7px 14px;
    border-radius:12px;
    background:rgba(0,0,0,.26);
    color:rgba(220,220,220,0.78);
    font-family:system-ui,JetBrains Mono, monospace;
    font-size:20px;
    font-weight:500;
    line-height:1.1;
    text-shadow: 0 2px 8px rgba(0,0,0,0.40);
  `;

wrap.appendChild(clock);
  wrap.appendChild(date);
  document.body.appendChild(wrap);

// Date FR longue : "Samedi 31 Janvier"
  const formatDateFR = (d) => {
    const parts = new Intl.DateTimeFormat("fr-FR", {
      weekday: "long",
      day: "2-digit",
      month: "long"
    }).formatToParts(d);

const get = (type) => (parts.find(p => p.type === type)?.value || "");
    const cap = (s) => s ? s.charAt(0).toUpperCase() + s.slice(1) : s;

return `${cap(get("weekday"))} ${get("day")} ${cap(get("month"))}`;
  };

// Heure + date
  const tick = () => {
    const d = new Date();
    clock.textContent = d.toLocaleTimeString("fr-FR", { hour: "2-digit", minute: "2-digit" });
    date.textContent = formatDateFR(d);
  };
  tick();
  setInterval(tick, 1000);

// ====== ✅ Garantir 20px entre la DATE et la barre ======
  // On garde le transform d'origine (si Heimdall en met un)
  const baseTransform = target.style.transform || "";

const ensureGap = () => {
    // Reset avant recalcul
    target.style.transform = baseTransform;

const wrapRect = wrap.getBoundingClientRect();     // bas de la date
    const targetRect = target.getBoundingClientRect(); // haut du bloc recherche

const desiredTop = wrapRect.bottom + 20;           // ✅ 20px sous la date
    const delta = desiredTop - targetRect.top;

if (delta > 0) {
      // On ajoute un translateY sans casser le reste
      const extra = ` translateY(${Math.ceil(delta)}px)`;
      target.style.transform = baseTransform + extra;
    }
  };

// Laisse le layout se poser puis ajuste
  setTimeout(ensureGap, 50);
  setTimeout(ensureGap, 250);
  window.addEventListener("resize", ensureGap);
});