modal-manager.js

import Modal from './container';
import Manager from './manager';

// Wir erstellen uns ein paar Standard-Werte,
// damit wir nicht jedes mal alles konfigurieren müssen.
const DEFAULTS = {
  id: 'data-modal',
  overlay: 'data-modal-overlay',
  openTrigger: 'data-modal-open',
  closeTrigger: 'data-modal-close',
};

export default class ModalManager extends Manager {
  constructor(options) {
    super();
    this.nodes = options.nodes;
    this.overlay = options.overlay;
    this.triggers = options.triggers;
    
    // Die Settings werden aus den reingegebenen options und den defaults erstellt.
    // Die options überschreiben dabei die Defaults.
    this.settings = Object.assign({}, DEFAULTS, options);
  }

  // Initialisiert alle nodes als Modal.
  init() {
    this.nodes.forEach((node) => {
      const id = node.getAttribute(this.settings.id);
      
      // Wir benötigen in einem einzelnen Modal nur die Elemente,
      // die auch die ID der Komponente haben.
      const triggers = {
        open: Manager.filterNodesByAttribute(this.triggers.open, this.settings.openTrigger, id),
        close: Manager.filterNodesByAttribute(this.triggers.close, this.settings.closeTrigger, id),
      };
      
      // Hier erstellen wir tatsächlich ein neues Modal und geben alle benötigten Informationen weiter.
      const instance = new Modal({
        node,
        overlay: this.overlay,
        triggers,
      });
      
      // Nun fügen wir diese Instanz im Manager hinzu.
      this.add(id, instance);
    });
    return this;
  }
}