dogfather-universe/workspace/assets/js/unsere-seiten.js

/* =====================================================================
   UNSERE SEITEN (19.09.2026)

   Zwei Dinge macht diese Datei, und beide gehen auf denselben Satz von
   Filipe zurück: „egal wo man drauf drückt ... sobald man drauf drückt
   weiter geleitet".

     1. Die GANZE Karte ist ein Weg nach draußen, nicht nur der Knopf.
     2. Der Rabattcode wandert mit einem Tippen in die Zwischenablage.

   WARUM DIE KARTE KEIN <a> IST, DAS ALLES UMSCHLIESST: Darin steckt ein
   Knopf (der Code) und ein weiterer Link (der Knopf „Shop öffnen").
   Ein Link in einem Link ist kein gültiges HTML — Browser reparieren
   das still, indem sie den äußeren beenden, und dann ist die halbe
   Karte tot. Deshalb: ein Klick-Zuhörer auf der Karte, der Kinder mit
   eigener Bedeutung in Ruhe lässt.

   UND DER LINK BLEIBT TROTZDEM EIN LINK. Wer mit der Tastatur
   unterwegs ist, bekommt weiterhin den Knopf „Seite öffnen" als
   Haltepunkt. Die Karte selbst wird NICHT fokussierbar gemacht: Das
   gäbe einen zweiten Tab-Halt mit demselben Ziel — für jemanden, der
   sich durchtabbt, sieht das aus wie ein Fehler.
   ===================================================================== */
(() => {
  'use strict';

  /* ---- 1. DIE GANZE KARTE IST DER WEG ------------------------------ */

  /** Hat der Klick schon eine eigene Bedeutung getroffen?
   *
   *  Ein Klick auf „Shop öffnen" soll den Shop öffnen (und nicht
   *  zusätzlich die Karte auslösen), ein Klick auf den Code soll
   *  kopieren. Alles andere — Bild, Überschrift, Text, leere Fläche —
   *  ist Karte. */
  function hatEigeneBedeutung(ziel) {
    return !!ziel.closest('a, button, input, textarea, select, label, [role="button"]');
  }

  /** Markiert gerade jemand Text? Dann will er lesen, nicht weg.
   *
   *  Ohne diese Abfrage reißt es einen beim Loslassen der Maus aus der
   *  Seite — der häufigste Ärger an klickbaren Karten überhaupt. */
  function markiertGerade() {
    const s = window.getSelection?.();
    return !!s && !s.isCollapsed && String(s).trim().length > 0;
  }

  for (const karte of document.querySelectorAll('.aussen[data-weg]')) {
    const weg = karte.dataset.weg;
    if (!weg) continue;

    karte.addEventListener('click', (e) => {
      if (e.button !== 0) return;                 /* nur die linke Taste */
      if (hatEigeneBedeutung(e.target)) return;
      if (markiertGerade()) return;
      /* `noopener` ist Pflicht: Ohne das könnte die geöffnete Seite
         über `window.opener` auf unsere zugreifen. */
      window.open(weg, '_blank', 'noopener,noreferrer');
    });

    /* Mittlere Maustaste = „in neuem Tab" — dieselbe Erwartung wie bei
       einem echten Link, also dieselbe Antwort. */
    karte.addEventListener('auxclick', (e) => {
      if (e.button !== 1) return;
      if (hatEigeneBedeutung(e.target)) return;
      e.preventDefault();
      window.open(weg, '_blank', 'noopener,noreferrer');
    });
  }

  /* ---- 2. DER RABATTCODE ------------------------------------------- */

  const knopf = document.getElementById('code-knopf');
  const hinweis = document.getElementById('code-hinweis');

  if (knopf && hinweis) {
    const urtext = hinweis.textContent;
    let zurueck = 0;

    /** Kopieren mit Auffanglösung.
     *
     *  `navigator.clipboard` gibt es nur auf gesicherten Verbindungen,
     *  und auf einigen älteren Android-Browsern gar nicht. Scheitert es,
     *  wird der Code wenigstens MARKIERT — dann reicht ein langes
     *  Antippen. Ein Knopf, der nichts tut und nichts sagt, ist
     *  schlimmer als gar keiner. */
    async function kopieren(text) {
      try {
        if (navigator.clipboard?.writeText) {
          await navigator.clipboard.writeText(text);
          return 'kopiert';
        }
      } catch { /* weiter zur Auffanglösung */ }

      try {
        const feld = document.createElement('textarea');
        feld.value = text;
        feld.setAttribute('readonly', '');
        feld.style.position = 'fixed';
        feld.style.opacity = '0';
        document.body.append(feld);
        feld.select();
        const ging = document.execCommand?.('copy');
        feld.remove();
        if (ging) return 'kopiert';
      } catch { /* auch das ging nicht */ }

      /* Letzter Ausweg: den Code im Knopf markieren. */
      try {
        const wort = knopf.querySelector('.gutschein__wort');
        if (wort) {
          const bereich = document.createRange();
          bereich.selectNodeContents(wort);
          const auswahl = window.getSelection();
          auswahl.removeAllRanges();
          auswahl.addRange(bereich);
          return 'markiert';
        }
      } catch { /* dann eben gar nicht */ }
      return 'nein';
    }

    knopf.addEventListener('click', async () => {
      const code = knopf.dataset.code || '';
      if (!code) return;
      const wie = await kopieren(code);

      hinweis.textContent =
        wie === 'kopiert'  ? 'kopiert ✓' :
        wie === 'markiert' ? 'markiert – jetzt kopieren' :
                             'bitte von Hand abschreiben';
      knopf.dataset.kopiert = wie === 'kopiert' ? 'ja' : 'nein';

      /* Nach ein paar Sekunden steht wieder da, was zu tun ist —
         sonst sieht die Karte beim nächsten Besuch so aus, als sei
         gerade eben etwas passiert. */
      clearTimeout(zurueck);
      zurueck = setTimeout(() => {
        hinweis.textContent = urtext;
        delete knopf.dataset.kopiert;
      }, 4000);
    });
  }
})();