Bildergalerie

Beim ersten Öffnen einer mam/gallery Oberfläche wird automatisch ein Datensatz in der Tabelle 2019-05-07_10-29-32_.Bildergalerie v5.3#base/galleryConfiguration (Konfiguration der Bildergalerie) mit einem Konfigurations-Schlüssel angelegt.

Konfiguration

Konfigurations-Schlüssel zu mam/gallery:

• base-cmsCareerEntry
• base-cmsEventsEntry
• base-cmsNewsEntry
• base-mamFile
• base-mamFolder
• base-mamFormatPreset
• base-shopArticle
• base-shopArticleTemplate
• base-shopDeliveryMethod
• base-shopGroup
• base-shopOrderArticle
• base-shopSessionArticle
• base-shopVariantAttribute
• cms-ui
• w2p-h5e
• w2p-mail
• w2p-nested
• w2p-strict

Verwendung

Wenn Sie sich zum Beispiel in einem Artikel (in shop/Article) befinden, können Sie im Datensatz mit einem Klick auf "Dateien" eine Datei auswählen. 

Nachdem Sie auf "Dateien" geklickt haben, öffnet sich die mam/gallery Oberfläche. Folgende Tabelle dient Ihnen zur Hilfe beim Benutzen.

Hier ein Beispiel, wenn sich keine Dateien im Hauptpfad befindet, bzw. keine Dateien gefunden werden konnten. Die Seitenauswahl ist ausgeblendet und eine entsprechende Meldung mit dem Text "Keine Dateien vorhanden" wird angezeigt.

Aktionen

Im Kopfbereich der Galerie lassen sich unter Umständen Buttons finden, über die bestimmte Aktionen ausgeführt werden können.

• Upload: Wurde der Upload in der Konfiguration der Galerie aktiviert, so können Dateien in dieser Organisationseinheit hochgeladen werden. Derzeit ist diese Funktion nur für "Favorisierte Dateien" und "Meine Dateien" verfügbar.

Aufbau der Galerie

Die Galerie besitzt grundlegend drei Einsteigspunkte:

• Ui/Modal/Engine::gallery
• Ui/Modal/Engine::gallery/margin
• UI/Modal/Engine::gallery/files/wrapper

gallery

Den Haupteinstiegspunkt bildet gallery. Wird diese Methode aufgerufen, wird der Rahmen für die Galerie platziert. Die Marginalie bzw. der Hauptbereich werden nachgeladen.

gallery/margin

Die Marginalie wird über den Aufruf gallery/margin nachgeladen. In der Marginalie befinden sich Elemente, die der Navigation dienen. Diese Elemente geben an, was im Hauptbereich dargestellt wird.

Im "Header" der Marginalie können Buttons aus dem Styleguide platziert werden. Diese Buttons werden üblicherweise genutzt um die Navigation zu Dateien zu ermöglichen, die keine dahinterliegende Struktur besitzen (z.B. willkürliche Session Dateien).

Im "Body" der Marginalie werden hingegen strukturierte Organisationseinheiten dargestellt, welche wiederum Dateien enthalten. Ein Beispiel für eine solche strukturierte Organisationseinheit ist eine Ordner, der weitere Unterordner besitzt und explizit über die Konfiguration der Galerie freigegeben wurde.

gallery/files/wrapper

Der Hauptbereich wird über den Aufruf gallery/files/wrapper geladen. Während sich die Marginalie mit der Frage beschäftigt, was dargestellt wird, beschäftigt sich der Hauptbereich hingegen damit, wie die vorab "gewählten" Inhalte dargestellt werden. Der Hauptbereich wird wiederum in zwei Bereiche untergliedert.

gallery/request

In dieser Ansicht werden Elemente platziert, mit denen man die Filterung und Ansichtseinstellungen für die Dateikacheln beeinflussen kann. In diesem Bereich finden sich gängige Funktionen wie z.B. eine Suche oder Sortierungsmöglichkeiten wieder. Die Steuerungsparameter wie z.B. der Suchbegriff des Suchfeldes können über eigene JavaScript-Dateien an das JavaScript von gallery/request übermittelt werden. Wurden die gewünschten Parameter übermittelt, lässt sich eine neue Anfrage für Dateien auslösen. Somit gibt es nur eine zentrale Stelle, welche die Anfragen für die Galerie ausführt. Die in gallery/request platzierten Elemente sind somit möglichst unabhängig voneinander.

gallery/files

Dieser Aufruf bezieht die geforderten Dateien anhand der Steuerungs- und Filterparameter aus Marginalie und Request, aus der Datenbank und mappt diese zu den Kachel-Objekten aus dem Styleguide.

Events 

PHP

Alle Events der Galerie leiten von der abstrakten Klasse GalleryEventAbstract ab. Diese abstrakte Klasse sieht es vor, den Events die Parameter bereitzustellen, welche von fast jedem Listener/Subscriber gebraucht werden.

Diese Parameter sind:

Die Galerie löst die folgenden Events aus, um die Manipulation der Galerie möglich zu machen:

Ui/Modal implementiert zahlreiche Listener, um die Basisfunktionalität der Galerie bereitzustellen.

JavaScript

Sämtliche detail-Objekte der Events einer Galerie sollten den String "galleryIdentifier" enthalten, da es möglich ist, dass mehrere Galerien aktiv sind. Dieser Identifier wird zur Unterscheidung benötigt.

onCollectGalleryRequestParams: function (event) {
  if (event.detail.galleryIdentifier === this.galleryIdentifier) {
  var eventOptions = {
    detail: {
      params:
        {
          query: this.element.value
        },
      galleryIdentifier: this.galleryIdentifier
    },
    bubbles: true
  }

  var customEvent = new CustomEvent('onUpdateGalleryRequestParams', eventOptions);
    this.element.dispatchEvent(customEvent)
  }
}