@boewa-software/url-to-lightbox-connector

URL to Lightbox Connector

Diese Komponente kann für die Verknüpfung des Seitenpfades mit der Erzeugung einer Lightbox genutzt werden.

Diese Komponente bietet keine Implementierung einer Lightbox, sondern stellt lediglich die Mechanismen zum Aufruf und zur Entfernung der Lightbox in Abhängigkeit zum Seitenpfad bereit.

Instalation

Die Instalation erfolgt wie ein klassisches NPM-Modul.

$ npm install --save @boewa-software/url-to-lightbox-connector

Nutzung

/**
 * 1. Komponente einbinden.
 */
import UrlToLightboxConnector from '@boewa-software/url-to-lightbox-connector';

/**
 * 2. Methode zur Erzeugung der Lightbox deklarieren.
 * 
 * @param sourcePath   Zur Lightbox gehöriger queryParameter
 * @param handleClose  Callback-Funktion zum Triggern der Logik zum schließen
 */
const renderLightbox = (sourcePath, handleClose) => {
    // Spezifischer Code um die Lightbox zu erzeugen, beispielsweise mit jQuery:
    const container = $(
        '<div class="my-lightbox-container">' +
             '<div class="lightbox">Lightbox:'+sourcePath+'</div>' +
        '</div>');
    container.appendTo('body');
    
    // Die Funktion muss ein Callback zurückgeben, um die erzeugte Lightbox wieder zu entfernen. 
    return () => {
        container.remove();
    };
};

// 3. Optionen deklarieren (optional)
const options = {
    // Name des Query-Parameters, an den die lightbox geknüpft ist
    queryParamName: 'modal',
    
    // History-Objekt, das für die Speicherung und Modifikation zuständig ist
    // Wenn diese option nicht gesetzt ist wird auf das npm-Modul 'history' zurückgegriffen.
    history: null,
    
    // History-Aktion zur erzeugung der Lightbox (push oder replace)
    openAction: 'push',
    
    // History-Aktion zum schließen der Lightbox (push, replace oder back)
    closeAction: 'back',
};

// 4. Connector initialisieren
const LightboxConnector = new UrlToLightboxConnector(
    renderLightbox,
    options
);

// 5. Mechanismus zur Auslösen der Lightbox erzeugen, z.B. mit jQuery
$('button[data-lightbox]').on('click', (e) => {
    const $button = $(e.target);
    LightboxConnector.openLightbox($button.data('lightbox'));
});