Modal – Library Setup

Das Modal ist ein gutes Beispiel für eine Bibliothek, in der eigene Anpassungen vorgenommen werden können. Außerdem gibt es verschiedene Arten von Modals. Diese Gelegenheit können wir nutzen, um Vererbung in der Praxis anzusehen.

Things to think about

Wenn wir eine Komponente bauen, müssen wir zwei Dinge beachten:

• Die Anzahl der Instanzen
• Die Anzahl der Variationen

Number of instances

Auf einer Seite können mehrere Instanzen eines Modals eingebunden werden. Eine Website kann zwei verschiedene Trigger mit zwei verschiedenen Modals haben.

Wie platzieren wir diese Modals im HTML? Dafür gibt es zwei Möglichkeiten:

• Pattern 1: alle Modals liegen innerhalb eines .modal-overlay
• Pattern 2: jedes Modal hat sein eigenes .modal-overlay

<!-- Pattern 1 -->
<div class="modal-overlay">
  <div class="modal">...</div>
  <div class="modal">...</div>
</div>

<!-- Pattern 2 -->
<div class="modal-overlay">
  <div class="modal">...</div>
</div>

<div class="modal-overlay">
  <div class="modal">...</div>
</div>

Beide Ansätze funktionieren, aber Pattern 2 ist flexibler. User müssen ihr Modal nicht zwingend in ein .modal-overlay platzieren, was insbesondere dann nützlich ist, wenn sie keine Kontrolle über das HTML haben. Wir machen also mit Pattern 2 weiter.

Wenn wir Pattern 2 nutzen, müssen wir das Öffnen des Modals anpassen. Wir hängen .is-open an .modal-overlay statt an <body>.

<!-- Opens a modal -->
<div class="modal-overlay is-open">
  <div class="modal">...</div>
</div>

Number of Variations

Es gibt vier verschiedene Arten von Modals:

• vom User getriggerte Modals (User klickt Button, Modal geht auf)
• zeitgesteuerte Modals (Modal öffnet sich nach einer bestimmten Zeit automatisch)
• Scroll-based Modals (Modal öffnet sich, wenn man zu einer bestimmten Stelle gescrollt hat)
• Exit-intent Modals (öffnen sich, wenn man die Seite eigentlich verlassen will)

Wenn wir in der Bibliothek alle vier Modals zur Verfügung stellen wollen, können wir eine “Typ” Variable erstellen, die der User angeben muss:

// Pseudo code
function Modal(settings) {
  const { type } = settings;
  if (type === 'normal') UserTriggeredModal(settings);
  if (type === 'timed') TimeBasedModal(settings);
  if (type === 'scroll') ScrollBasedModal(settings);
  if (type === 'exit-intent') ExitItentModal(settings);
}

Setting up the Modal library

Zuerst erstellen wir eine neue modal.js. Diese importieren wir in main.js:

<script type="module" src="main.js"></script>

main.js

import './modal.js'

Creating the modal

Da wir eine Bibliothek bauen, wollen wir ein Modal-Objekt exportieren. Wir nehmen dafür Factory Functions (aber jedes andere OOP geht auch).

modal.js

export default function Modal() {
  // ...
}

Wir müssen dieses Modal in main.js importieren:

main.js

import Modal from './modal.js'

Jetzt können wir ein Modal mit Modal erzeugen:

main.js

Modal();

Das tut jetzt noch nichts, aber wir machen gleich weiter …