<?phpnamespace App\Document\Areabrick;use Pimcore\Extension\Document\Areabrick\EditableDialogBoxConfiguration;use Pimcore\Extension\Document\Areabrick\EditableDialogBoxInterface;use Pimcore\Model\DataObject\VehicleFilterEntity;use Pimcore\Model\Document\Editable;use Pimcore\Model\Document\Editable\Area\Info;use Pimcore\Translation\Translator;class Keyvisual extends BaseAreabrick implements EditableDialogBoxInterface{ private const DEFAULT_SLIDES = 3; public function __construct(Translator $translator) { $this->translator = $translator; } public function getName(): string { return $this->translator->trans('Keyvisual', [], 'admin'); } public function action(Info $info): void { $info->setParams([ 'vehicleCategories' => $this->getVehicleCategories(), 'vehicleMakes' => $this->getVehicleMakes(), 'slideCount' => $this->getSlideCount($info) ]); } private function getVehicleCategories(): array { try { $currentCat = VehicleFilterEntity::getByName('Kategorie')->current(); return ($currentCat instanceof VehicleFilterEntity) ? $currentCat->getFilterValues()[0] : []; } catch (\Exception) { return []; } } private function getVehicleMakes(): array { try { $currentMak = VehicleFilterEntity::getByName('Marke')->current(); return ($currentMak instanceof VehicleFilterEntity) ? $currentMak->getFilterValues()[0] : []; } catch (\Exception) { return []; } } private function getSlideCount(?Info $info = null): int { if ($info === null) { return self::DEFAULT_SLIDES; } $slideCountEditable = $info->getDocument()->getEditable('slideCount'); return $slideCountEditable ? (int)$slideCountEditable->getValue() : self::DEFAULT_SLIDES; } public function getEditableDialogBoxConfiguration(Editable $area, ?Info $info): EditableDialogBoxConfiguration { $config = new EditableDialogBoxConfiguration(); $config->setWidth(900); $config->setHeight(800); $maxSlides = 10; $brandStyles = $info?->getDocument()?->getProperty('brandStyles') ?? 'none'; $tabItems = [ // General Settings Tab [ 'type' => 'panel', 'title' => $this->translator->trans('Einstellungen', [], 'admin'), 'layout' => 'fit', 'autoScroll' => true, 'bodyStyle' => 'padding: 20px', 'items' => [ [ 'type' => 'fieldset', 'title' => $this->translator->trans('Slides ein-/ausschalten', [], 'admin'), 'description' => $this->translator->trans('Aktivieren Sie die gewünschten Slides. Wenn kein Slide aktiviert ist, wird der bestehende Inhalt verwendet.', [], 'admin'), 'style' => 'margin-bottom: 15px', 'autoHeight' => true, 'defaults' => [ 'anchor' => '100%' ], 'items' => [ [ 'type' => 'container', 'layout' => [ 'type' => 'vbox', 'align' => 'stretch' ], 'height' => 'auto', 'style' => 'width: 100%', 'items' => array_map(function($i) { return [ 'type' => 'container', 'layout' => [ 'type' => 'hbox', 'align' => 'middle' ], 'height' => 40, 'style' => 'width: 100%; align-items: center; padding: 8px; margin-bottom: 5px; background: #f8f9fa; border-radius: 4px;', 'items' => [ [ 'type' => 'checkbox', 'name' => 'slide_active_' . $i, 'label' => $this->translator->trans('Slide %number%', ['%number%' => $i], 'admin'), 'style' => 'transform: scale(1.2); margin-right: 15px;', 'fieldStyle' => 'font-weight: 500; color: #495057;', 'flex' => 1, 'config' => [ 'defaultValue' => false ] ], [ 'type' => 'button', 'text' => $this->translator->trans('Bearbeiten', [], 'admin'), 'iconCls' => 'pimcore_icon_edit', 'style' => 'margin-left: auto; background: #0d6efd; color: white; border-radius: 4px; padding: 5px 10px;', 'handler' => 'function() { this.up("#keyvisual-config-tabs").setActiveTab(' . ($i + 1) . '); }' ] ] ]; }, range(1, $maxSlides)) ] ] ], [ 'type' => 'fieldset', 'title' => $this->translator->trans('Übergangsanimation', [], 'admin'), 'description' => $this->translator->trans('Configure how the slideshow animates and behaves', [], 'admin'), 'collapsible' => true, 'collapsed' => false, 'style' => 'margin-top: 20px', 'items' => [ [ 'type' => 'checkbox', 'name' => 'enable_autoplay', 'label' => $this->translator->trans('Automatischen Bildwechsel aktivieren', [], 'admin'), 'description' => $this->translator->trans('Automatically transition between slides', [], 'admin') ], [ 'type' => 'numeric', 'name' => 'autoplay_delay', 'label' => $this->translator->trans('Zeit zwischen Bildwechseln (in Millisekunden)', [], 'admin'), 'description' => $this->translator->trans('Time to wait before showing the next slide (in milliseconds)', [], 'admin'), 'config' => [ 'minValue' => 1000, 'maxValue' => 10000, 'defaultValue' => 5000, 'decimalPrecision' => 0, 'width' => 200 ], 'conditions' => [ 'enabled' => [ 'type' => 'editableRenderer', 'config' => [ 'renderlet' => 'enable_autoplay', 'operator' => '==', 'value' => true ] ] ] ] ] ], [ 'type' => 'fieldset', 'title' => $this->translator->trans('Zusatzfunktionen', [], 'admin'), 'description' => $this->translator->trans('Enable or disable additional functionality', [], 'admin'), 'collapsible' => true, 'collapsed' => false, 'style' => 'margin-top: 20px', 'items' => [ [ 'type' => 'checkbox', 'name' => 'show_widget', 'label' => $this->translator->trans('Search Widget anzeigen?', [], 'admin'), 'description' => $this->translator->trans('Display a search widget that allows users to quickly find vehicles', [], 'admin') ] ] ], [ 'type' => 'fieldset', 'title' => $this->translator->trans('Design Einstellungen', [], 'admin'), 'description' => $this->translator->trans('Wählen Sie das gewünschte Layout für den Slider', [], 'admin'), 'style' => 'margin-bottom: 15px', 'items' => [ [ 'type' => 'select', 'name' => 'keyvisual_design', 'label' => $this->translator->trans('Layout Variante', [], 'admin'), 'config' => [ 'defaultValue' => 'fullscreen', 'store' => [ ['fullscreen', $this->translator->trans('Vollbild (Standard)', [], 'admin')], ['compact', $this->translator->trans('Kompakt mit sichtbarem Content', [], 'admin')], ] ] ], [ 'type' => 'select', 'name' => 'keyvisual_mobile_design', 'label' => $this->translator->trans('Layout Variante (Mobile)', [], 'admin'), 'description' => $this->translator->trans('Spezifische Einstellung für mobile Geräte. Falls nicht gesetzt, wird die Desktop-Variante verwendet.', [], 'admin'), 'config' => [ 'defaultValue' => 'inherit', 'store' => [ ['inherit', $this->translator->trans('Desktop-Einstellung übernehmen', [], 'admin')], ['fullscreen', $this->translator->trans('Vollbild', [], 'admin')], ['compact', $this->translator->trans('Kompakt mit sichtbarem Content', [], 'admin')], ] ] ], [ 'type' => 'select', 'name' => 'content_text_alignment', 'label' => $this->translator->trans('Content Ausrichtung', [], 'admin'), 'config' => [ 'defaultValue' => 'text-start', 'store' => [ ['text-start', $this->translator->trans('Linksbündig', [], 'admin')], ['text-center', $this->translator->trans('Zentriert', [], 'admin')], ['text-end', $this->translator->trans('Rechtsbündig', [], 'admin')] ] ] ], ] ], ] ], // Legacy Content Tab [ 'type' => 'panel', 'title' => $this->translator->trans('Alte Version', [], 'admin'), 'layout' => 'fit', 'autoScroll' => true, 'bodyStyle' => 'padding: 20px', 'items' => [ [ 'type' => 'fieldset', 'title' => $this->translator->trans('Einzelner Slide', [], 'admin'), 'description' => $this->translator->trans('Diese Einstellungen werden verwendet, wenn keine Slides aktiviert sind.', [], 'admin'), 'items' => [ [ 'type' => 'image', 'name' => 'kv-image', 'label' => $this->translator->trans('Desktop Bild:', [], 'admin'), 'description' => $this->translator->trans('Empfohlene Größe: 1920x1080px', [], 'admin') ], [ 'type' => 'image', 'name' => 'kv-mobile-image', 'label' => $this->translator->trans('Mobile Bild:', [], 'admin'), 'description' => $this->translator->trans('Empfohlene Größe: 768x1024px', [], 'admin') ], [ 'type' => $brandStyles === 'Mini' ? 'wysiwyg' : 'input', 'name' => 'kv-headline', 'label' => $this->translator->trans('Überschrift:', [], 'admin') ], [ 'type' => 'input', 'name' => 'kv-text', 'label' => $this->translator->trans('Text:', [], 'admin') ], [ 'type' => 'link', 'name' => 'kv-link', 'label' => $this->translator->trans('Button Link:', [], 'admin') ], [ 'type' => 'select', 'name' => 'button_style', 'label' => $this->translator->trans('Button Style', [], 'admin'), 'config' => [ 'defaultValue' => 'btn-secondary', 'store' => [ ['btn-primary', $this->translator->trans('Blauer Button', [], 'admin')], ['btn-secondary', $this->translator->trans('Outline Button', [], 'admin')] ] ] ] ] ], [ 'type' => 'fieldset', 'title' => $this->translator->trans('Verbrauchshinweise', [], 'admin'), 'description' => $this->translator->trans('Konfigurieren Sie die Anzeige der Verbrauchshinweise', [], 'admin'), 'style' => 'margin-bottom: 15px', 'items' => [ [ 'type' => 'checkbox', 'name' => 'show_consumption_notice', 'label' => $this->translator->trans('Verbrauchshinweise anzeigen', [], 'admin') ], [ 'type' => 'checkbox', 'name' => 'consumption_notice_transparent', 'label' => $this->translator->trans('Transparenter Hintergrund', [], 'admin'), 'description' => $this->translator->trans('Nur Text ohne Hintergrund anzeigen', [], 'admin'), 'conditions' => [ 'enabled' => [ 'type' => 'editableRenderer', 'config' => [ 'renderlet' => 'show_consumption_notice', 'operator' => '==', 'value' => true ] ] ] ], [ 'type' => 'select', 'name' => 'consumption_notice_color', 'label' => $this->translator->trans('Textfarbe', [], 'admin'), 'config' => [ 'defaultValue' => 'white', 'store' => [ ['white', $this->translator->trans('Weiß', [], 'admin')], ['black', $this->translator->trans('Schwarz', [], 'admin')] ] ], 'conditions' => [ 'enabled' => [ 'type' => 'editableRenderer', 'config' => [ 'renderlet' => 'show_consumption_notice', 'operator' => '==', 'value' => true ] ] ] ], [ 'type' => 'textarea', 'name' => 'consumption_notice_text', 'label' => $this->translator->trans('Text für Verbrauchshinweise', [], 'admin'), 'description' => $this->translator->trans('Dieser Text wird unter dem Slider angezeigt', [], 'admin'), 'config' => [ 'height' => 100 ], 'conditions' => [ 'enabled' => [ 'type' => 'editableRenderer', 'config' => [ 'renderlet' => 'show_consumption_notice', 'operator' => '==', 'value' => true ] ] ] ] ] ] ] ] ]; // Create Tabs for all possible slides for ($i = 1; $i <= $maxSlides; $i++) { $tabItems[] = [ 'type' => 'panel', 'title' => $this->translator->trans('Slide ' . $i, [], 'admin'), 'layout' => 'fit', 'autoScroll' => true, 'bodyStyle' => 'padding: 20px', 'conditions' => [ 'enabled' => [ 'type' => 'editableRenderer', 'config' => [ 'renderlet' => 'slide_active_' . $i, 'operator' => '==', 'value' => true ] ] ], 'items' => [ [ 'type' => 'fieldset', 'title' => $this->translator->trans('Images', [], 'admin'), 'items' => [ [ 'type' => 'image', 'name' => 'slide_image_' . $i, 'label' => $this->translator->trans('Desktop Image:', [], 'admin'), 'description' => $this->translator->trans('Recommended size: 1920x1080px', [], 'admin'), 'required' => true ], [ 'type' => 'image', 'name' => 'slide_mobile_image_' . $i, 'label' => $this->translator->trans('Mobile Image:', [], 'admin'), 'description' => $this->translator->trans('Recommended size: 768x1024px', [], 'admin') ] ] ], [ 'type' => 'fieldset', 'title' => $this->translator->trans('Content', [], 'admin'), 'items' => [ [ 'type' => $brandStyles === 'Mini' ? 'wysiwyg' : 'input', 'name' => 'content_headline_' . $i, 'label' => $this->translator->trans('Headline', [], 'admin'), 'config' => $brandStyles === 'Mini' ? [ 'enterMode' => 2, 'toolbarGroups' => [ [ 'name' => 'basicstyles', 'groups' => ['basicstyles'] ] ] ] : [] ], [ 'type' => 'select', 'name' => 'content_headline_color_' . $i, 'label' => $this->translator->trans('Headline Farbe', [], 'admin'), 'config' => [ 'defaultValue' => 'text-white', 'store' => [ ['text-white', $this->translator->trans('Weiß (Standard)', [], 'admin')], ['text-black', $this->translator->trans('Schwarz', [], 'admin')], ['text-primary', $this->translator->trans('Primärfarbe', [], 'admin')], ['text-secondary', $this->translator->trans('Sekundärfarbe', [], 'admin')] ] ] ], [ 'type' => 'input', 'name' => 'content_text_' . $i, 'label' => $this->translator->trans('Text', [], 'admin') ], [ 'type' => 'select', 'name' => 'content_text_color_' . $i, 'label' => $this->translator->trans('Text Farbe', [], 'admin'), 'config' => [ 'defaultValue' => 'text-white', 'store' => [ ['text-white', $this->translator->trans('Weiß (Standard)', [], 'admin')], ['text-black', $this->translator->trans('Schwarz', [], 'admin')], ['text-primary', $this->translator->trans('Primärfarbe', [], 'admin')], ['text-secondary', $this->translator->trans('Sekundärfarbe', [], 'admin')] ] ] ], [ 'type' => 'select', 'name' => 'content_text_alignment_' . $i, 'label' => $this->translator->trans('Content Ausrichtung', [], 'admin'), 'config' => [ 'defaultValue' => 'inherit', 'store' => [ ['inherit', $this->translator->trans('Global Einstellung übernehmen', [], 'admin')], ['text-start', $this->translator->trans('Linksbündig', [], 'admin')], ['text-center', $this->translator->trans('Zentriert', [], 'admin')], ['text-end', $this->translator->trans('Rechtsbündig', [], 'admin')] ] ] ] ] ], [ 'type' => 'fieldset', 'title' => $this->translator->trans('Link Einstellungen', [], 'admin'), 'items' => [ [ 'type' => 'checkbox', 'name' => 'slide_clickable_' . $i, 'label' => $this->translator->trans('Gesamten Slide klickbar machen', [], 'admin'), 'description' => $this->translator->trans('Wenn aktiviert, ist der gesamte Slide klickbar', [], 'admin') ], [ 'type' => 'checkbox', 'name' => 'split_view_' . $i, 'label' => $this->translator->trans('Split-View aktivieren', [], 'admin'), 'description' => $this->translator->trans('Teilt den Slide in zwei klickbare Bereiche', [], 'admin') ], [ 'type' => 'fieldset', 'title' => $this->translator->trans('Split-View Links', [], 'admin'), 'conditions' => [ 'visible' => [ 'type' => 'editableRenderer', 'config' => [ 'renderlet' => 'split_view_' . $i, 'operator' => '==', 'value' => true ] ] ], 'items' => [ [ 'type' => 'link', 'name' => 'split_left_link_' . $i, 'label' => $this->translator->trans('Link linke Seite', [], 'admin'), 'description' => $this->translator->trans('Desktop: Links / Mobile: Oben', [], 'admin') ], [ 'type' => 'link', 'name' => 'split_right_link_' . $i, 'label' => $this->translator->trans('Link rechte Seite', [], 'admin'), 'description' => $this->translator->trans('Desktop: Rechts / Mobile: Unten', [], 'admin') ], [ 'type' => 'select', 'name' => 'split_ratio_' . $i, 'label' => $this->translator->trans('Aufteilung', [], 'admin'), 'description' => $this->translator->trans('Verhältnis der beiden Seiten', [], 'admin'), 'config' => [ 'defaultValue' => '50-50', 'store' => [ ['50-50', '50:50'], ['40-60', '40:60'], ['60-40', '60:40'] ] ] ] ] ], [ 'type' => 'link', 'name' => 'slide_link_' . $i, 'label' => $this->translator->trans('Slide Link', [], 'admin'), 'description' => $this->translator->trans('Link für den klickbaren Slide', [], 'admin'), 'conditions' => [ 'visible' => [ 'type' => 'editableRenderer', 'config' => [ 'renderlet' => 'slide_clickable_' . $i, 'operator' => '==', 'value' => true ] ] ] ], [ 'type' => 'checkbox', 'name' => 'show_button_' . $i, 'label' => $this->translator->trans('Button anzeigen', [], 'admin'), 'description' => $this->translator->trans('Zeigt einen Button mit eigenem Link an', [], 'admin') ], [ 'type' => 'link', 'name' => 'button_link_' . $i, 'label' => $this->translator->trans('Button Link', [], 'admin'), 'description' => $this->translator->trans('Link für den Button', [], 'admin'), 'conditions' => [ 'visible' => [ 'type' => 'editableRenderer', 'config' => [ 'renderlet' => 'show_button_' . $i, 'operator' => '==', 'value' => true ] ] ] ], [ 'type' => 'select', 'name' => 'button_style_' . $i, 'label' => $this->translator->trans('Button Style', [], 'admin'), 'config' => [ 'defaultValue' => 'btn-secondary', 'store' => [ ['btn-primary', $this->translator->trans('Blauer Button', [], 'admin')], ['btn-secondary', $this->translator->trans('Outline Button', [], 'admin')] ] ], 'conditions' => [ 'visible' => [ 'type' => 'editableRenderer', 'config' => [ 'renderlet' => 'show_button_' . $i, 'operator' => '==', 'value' => true ] ] ] ] ] ], [ 'type' => 'fieldset', 'title' => $this->translator->trans('Verbrauchshinweis', [], 'admin'), 'items' => [ [ 'type' => 'checkbox', 'name' => 'consumption_notice_active_' . $i, 'label' => $this->translator->trans('Verbrauchshinweis anzeigen', [], 'admin') ], [ 'type' => 'input', 'name' => 'consumption_notice_text_' . $i, 'label' => $this->translator->trans('Text', [], 'admin'), 'conditions' => [ 'visible' => [ 'type' => 'editableRenderer', 'config' => [ 'renderlet' => 'consumption_notice_active_' . $i, 'operator' => '==', 'value' => true ] ] ] ], [ 'type' => 'select', 'name' => 'consumption_notice_color_' . $i, 'label' => $this->translator->trans('Textfarbe', [], 'admin'), 'config' => [ 'defaultValue' => 'white', 'store' => [ ['value' => 'white', 'text' => $this->translator->trans('Weiß', [], 'admin')], ['value' => 'black', 'text' => $this->translator->trans('Schwarz', [], 'admin')] ] ], 'conditions' => [ 'visible' => [ 'type' => 'editableRenderer', 'config' => [ 'renderlet' => 'consumption_notice_active_' . $i, 'operator' => '==', 'value' => true ] ] ] ], [ 'type' => 'select', 'name' => 'consumption_notice_alignment_' . $i, 'label' => $this->translator->trans('Textausrichtung', [], 'admin'), 'config' => [ 'defaultValue' => 'text-center', 'store' => [ ['text-center', $this->translator->trans('Zentriert', [], 'admin')], ['text-start', $this->translator->trans('Linksbündig', [], 'admin')], ['text-end', $this->translator->trans('Rechtsbündig', [], 'admin')] ] ], 'conditions' => [ 'visible' => [ 'type' => 'editableRenderer', 'config' => [ 'renderlet' => 'consumption_notice_active_' . $i, 'operator' => '==', 'value' => true ] ] ] ], [ 'type' => 'checkbox', 'name' => 'consumption_notice_transparent_' . $i, 'label' => $this->translator->trans('Transparenter Hintergrund', [], 'admin'), 'conditions' => [ 'visible' => [ 'type' => 'editableRenderer', 'config' => [ 'renderlet' => 'consumption_notice_active_' . $i, 'operator' => '==', 'value' => true ] ] ] ] ] ] ] ]; } $config->setItems([ 'type' => 'tabpanel', 'layout' => 'fit', 'id' => 'keyvisual-config-tabs', 'bodyStyle' => 'padding: 0', 'items' => $tabItems ]); $config->setReloadOnClose(true); return $config; } public function getHtmlTagOpen(Info $info): string { return ''; } public function getHtmlTagClose(Info $info): string { return ''; }}