Modale anteprima argomento

Personalizzazione Componente del tema
4

Per chiunque utilizzi il tema simile a Reddit, ecco una soluzione che ho trovato funzionante.

Compatibilità con il tema simile a Reddit

Una nota per chi utilizza il tema simile a Reddit: il pulsante della finestra modale funziona, ma il trigger di riga predefinito no.

Il problema è che il tema simile a Reddit sostituisce il comportamento standard della riga dell’elenco degli argomenti e gestisce i clic sull’intera scheda dell’argomento. Di conseguenza, la gestione normale dei clic sulla riga della finestra modale non funziona come previsto.

Modificando l’impostazione della finestra modale di anteprima dell’argomento in:

Stile trigger: pulsante
Presa del plugin: topic-list-after-title

funziona correttamente, perché il tema simile a Reddit include già la presa topic-list-after-title.

Per mantenere il comportamento del clic sull’intera scheda, ho lasciato la finestra modale di anteprima dell’argomento in modalità pulsante e ho modificato l’azione openTopic() esistente del tema simile a Reddit in modo che attivi il pulsante funzionante della finestra modale.

L’azione originale del tema simile a Reddit è:

@action
openTopic(event) {
  if (
    (event.target.nodeName === "A" && !event.target.closest(".raw-link")) ||
    event.target.closest(".badge-wrapper")
  ) {
    return;
  }

  const { navigateToTopic, topic } = this.args.outletArgs;

  if (wantsNewWindow(event)) {
    window.open(topic.lastUnreadUrl, "_blank");
  } else {
    navigateToTopic(topic, topic.lastUnreadUrl);
  }
}

L’ho modificata in:

@action
openTopic(event) {
  if (
    (event.target.nodeName === "A" && !event.target.closest(".raw-link")) ||
    event.target.closest(".badge-wrapper") ||
    event.target.closest(".topic-preview-modal__trigger-wrapper")
  ) {
    return;
  }

  const { navigateToTopic, topic } = this.args.outletArgs;

  if (wantsNewWindow(event)) {
    window.open(topic.lastUnreadUrl, "_blank");
    return;
  }

  const previewButton = event.currentTarget.querySelector(
    ".topic-preview-modal__trigger-wrapper--button"
  );

  if (previewButton) {
    event.preventDefault();
    event.stopPropagation();
    previewButton.click();
    return;
  }

  navigateToTopic(topic, topic.lastUnreadUrl);
}

Il trigger del pulsante della finestra modale è reso come:

<div class="topic-preview-modal__trigger-wrapper">
  <span
    role="button"
    class="topic-preview-modal__trigger-wrapper--button"
  >

Quindi questo non ricrea alcuna logica della finestra modale. Semplicemente fa sì che il clic sulla scheda del tema simile a Reddit attivi il pulsante di anteprima esistente e funzionante.

Il risultato è:

  • Il clic sulla scheda dell’argomento apre la finestra modale di anteprima.

  • Il clic sul titolo dell’argomento apre la finestra modale di anteprima.

  • Il pulsante di anteprima continua a funzionare.

  • Il clic con Cmd/Ctrl apre ancora l’argomento normale in una nuova scheda.

  • La categoria e gli altri link normali continuano a comportarsi normalmente.

  • Se il pulsante di anteprima non è presente, il tema simile a Reddit torna alla normale navigazione degli argomenti.

Quindi la finestra modale sottostante funziona bene con il tema simile a Reddit; l’incompatibilità è specifica con il trigger di riga predefinito.

Ho anche nascosto il pulsante utilizzando

.topic-preview-modal__trigger-wrapper {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
3 Mi Piace