Seitenvergleich

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.

Image Removed

...

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. 

Image Removed

...

Um die Konfiguration der Galerie zu erweitern, sollten weitere Entitäten erstellt werden, die einen Fremdschlüsselbezug zu einem Galeriedatensatzes besitzen. Die Konfigurationsoberfläche kann über das OnPopulateForm-Event von ComponentForm erweitert werden.

Verwendung

Die Galerie kann über den entsprechenden Button eines Datei-Feldes geöffnet werden. Die Galerie wird dabei in einem Modal platziert.

Die Galerie ist standardmäßig aus folgenden Elementen aufgebaut.

Image Removed

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.

Image Removed

...

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 zwei Einsteigspunkte:

• Ui/Modal/Engine::gallery
  

  Ui/Modal/Engine::gallery/margin

  • Haupteinstiegspunkt. Diese Methode liefert die Galerie als Ganzes aus.

• UI/Modal/Engine::pwa/gallery/files/wrapper

  • Diese Methode ist für den Hauptbereich zuständig. Wird ein Element einer Organisationseinheit gewählt, wird der Hauptinhalt entsprechend aktualisiert.

gallery

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

...

Marginalie

Die Marginalie wird über den Aufruf gallery/margin nachgeladendie Methode Ui\Modal\Manager::buildMargin erstellt. In der Marginalie befinden sich Elemente, die der Navigation dienen. Diese Elemente geben an, was im Hauptbereich dargestellt wird.

Im "Header" Kopfbereich der Marginalie können Buttons aus dem Styleguide befindet sich eine Toolbar, in der Buttons platziert werden können. 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" Körper der Marginalie hingegen werden hingegen strukturierte Organisationseinheiten dargestellt, welche wiederum Dateien enthalten. Ein Beispiel für eine solche strukturierte Organisationseinheit ist eine solche Organisationseinheiten sind Ordner, der die weitere Unterordner besitzt besitzen und explizit über die Konfiguration der Galerie freigegeben wurdewurden.

...

Hauptbereich

Der Hauptbereich wird über den Aufruf gallery/files/wrapper Ui\Modal\Engine::pwaGalleryContent 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 ; eine Kopfzeile, in der Steuerelemente angezeigt werden und ein Hauptbereich in dem hauptsächlich die Dateikarten angezeigt werden.

Im Kopfbereich 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 galleryRequest ü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 galleryRequest platzierten Elemente sind somit möglichst unabhängig voneinander.

gallery/files

Im Hauptbereich werden die auf Basis der im Kopfbereich bereitgestellten Steuerungsparameter gesammelten Dateien in Form von Karten dargestellt. 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:

...

...

Dieser boolesche Parameter steuert die Ausführungslogik des Subscribers. Ist der Parameter "false", wird der Subscriber keine weitere Listener-Logik ausführen.

Wird dieser Wert von einem Listener gesetzt, kann dieser so sicherstellen, dass nach ihm keine weiteren Listener ausgeführt werden.

...

Die

...

Galerie löst

...

Events aus, um die Manipulation der Galerie möglich zu machen

...

Mit diesem Event kann entschieden werden, ob die Marginalie dargestellt werden soll, oder nicht.

(Dieses Event wird wahrscheinlich entfallen, da die Datenstruktur der Konfiguration vor dem Release der v5.6 angepasst werden muss und sich so eine bessere Möglichkeit dieser Steuerung ergeben wird).

...

. Diese Events verfügen über ein Kontext-Objekt, welches alle nötigen Daten beinhaltet.
Folgende Events werden ausgelöst, um die Inhalte der Galerie zu füllen. Es existieren weitere Events, um die Galerie präziser zu manipulieren.

Event	Beschreibung
OnPopulateMargin	Ein Event, um den FrameworkContainer der Marginalie zu füllen. GalleryCore löst in Reaktion auf dieses Event diese weiteren Events aus: Ui\Modal\lib\event\Margin\OnPopulateToolbar Ui\Modal\lib\event\Margin\OnPopulateTree
OnPopulateGalleryContent	Ein Even, um den FrameworkContainer des Hauptbereiches zu füllen. GalleryCore löst in Reaktion auf dieses Event diese weiteren Events aus: Ui\Modal\lib\event\GalleryRequest\OnPopulateToolbar Ui\Modal\lib\event\GalleryFiles\OnPopulateGalleryFiles Ui\Modal\lib\event\GalleryFiles\OnPopulateGalleryFile

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

Übersicht aller Events

...

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)
  }
}

Einbindung in der Dateiauswahl

Die Galerie kann im Feld vom Typ "Dateiauswahl" hinzugefügt werden. Um das zu ermöglichen, muss die Konfiguration des Feldes angepasst werden.

In der Konfiguration muss ein neues Objekt "gallery" angelegt werden. Dieses Objekt besitzt zwei Eigenschaften:

• isEnabled

  • Boolescher Wert. Dieser Wert entscheidet, ob der Button für die Galerie dargestellt werden soll.

• configKey

  • Zeichenkette. Der Identifikator des gewünschten Galerie-Datensatzes.

InputFile.gallery

"identifier": "identifierInputFile1",
"labels": {
	"de": "Dateifeld mit Galerie",
	"en": "File field with gallery"
},
"formType": "file",
"configuration": {
	"gallery": {
		"isEnabled": true,
		"configKey": "base-shopArticle"
	}
}

Bildauswahl als Eingabefeld

Es ist möglich eine Sammlung von Bildern als Eingabefeld zu nutzen. Somit erfolgt die Bildauswahl nicht über das Modal der Galerie, sondern durch einen Klick auf ein Bild, welches direkt beim Feld dargestellt wird. Der Bilderpool wird durch den Primärordner einer Galerie festgelegt. Diese Galerie muss in der Konfiguration festgelegt werden. Der Typ für das Feld ist ImageSelect.

{
  "identifier": "imageSelection",
  "labels": {
    "de": "Bildauswahl",
    "en": "ImageSelection"
  },
  "formType": "ImageSelect",
  "configuration": {
    "galleryId": 95
  }
}