From 206c704fd80f54c5df31e897aeecdd624d81591c Mon Sep 17 00:00:00 2001
From: dadolun95 <dadolun@gmail.com>
Date: Mon, 2 Sep 2024 12:15:28 +0200
Subject: [PATCH] Add feature that allow user to add content types into Slide
 component (issue #384)

---
 .../Magento/PageBuilder/etc/adminhtml/di.xml  |  5 ++
 .../pagebuilder/content_type/slide.xml        | 76 ++++++++++++++++++-
 .../ui_component/pagebuilder_slide_form.xml   | 73 +++++++++++++++++-
 .../pagebuilder_slide_mobile_form.xml         |  2 +-
 .../slide/appearance/container.svg            | 11 +++
 .../element/slider-dependent-visual-select.js | 46 +++++++++++
 .../content-type/slide/container/master.html  | 11 +++
 .../content-type/slide/container/preview.html | 39 ++++++++++
 .../content-type/slider/default/preview.html  | 60 ++++++++-------
 9 files changed, 291 insertions(+), 32 deletions(-)
 mode change 100755 => 100644 app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_slide_form.xml
 create mode 100644 app/code/Magento/PageBuilder/view/adminhtml/web/css/images/content-type/slide/appearance/container.svg
 create mode 100644 app/code/Magento/PageBuilder/view/adminhtml/web/js/form/element/slider-dependent-visual-select.js
 create mode 100644 app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/container/master.html
 create mode 100644 app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/container/preview.html

diff --git a/app/code/Magento/PageBuilder/etc/adminhtml/di.xml b/app/code/Magento/PageBuilder/etc/adminhtml/di.xml
index de248a19513..b548a564b56 100644
--- a/app/code/Magento/PageBuilder/etc/adminhtml/di.xml
+++ b/app/code/Magento/PageBuilder/etc/adminhtml/di.xml
@@ -432,6 +432,11 @@
                     <item name="title" xsi:type="string" translate="true">Collage Right</item>
                     <item name="icon" xsi:type="string">Magento_PageBuilder::css/images/content-type/slide/appearance/collage-right.svg</item>
                 </item>
+                <item name="50" xsi:type="array">
+                    <item name="value" xsi:type="string">container</item>
+                    <item name="title" xsi:type="string" translate="true">Container</item>
+                    <item name="icon" xsi:type="string">Magento_PageBuilder::css/images/content-type/slide/appearance/container.svg</item>
+                </item>
             </argument>
         </arguments>
     </virtualType>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/pagebuilder/content_type/slide.xml b/app/code/Magento/PageBuilder/view/adminhtml/pagebuilder/content_type/slide.xml
index d7082cb3eda..e496d5aecd1 100644
--- a/app/code/Magento/PageBuilder/view/adminhtml/pagebuilder/content_type/slide.xml
+++ b/app/code/Magento/PageBuilder/view/adminhtml/pagebuilder/content_type/slide.xml
@@ -8,8 +8,9 @@
 <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_PageBuilder:etc/content_type.xsd">
     <type name="slide"
           label="Slide"
-          component="Magento_PageBuilder/js/content-type"
+          component="Magento_PageBuilder/js/content-type-collection"
           preview_component="Magento_PageBuilder/js/content-type/slide/preview"
+          master_component="Magento_PageBuilder/js/content-type/master-collection"
           form="pagebuilder_slide_form"
           menu_section="media"
           icon="icon-pagebuilder-slider"
@@ -22,8 +23,79 @@
         <parents default_policy="deny">
             <parent name="slider" policy="allow"/>
         </parents>
-        <children default_policy="deny"/>
+        <children default_policy="allow">
+            <parent name="slider" policy="deny"/>
+        </children>
         <appearances>
+            <appearance name="container"
+                        preview_template="Magento_PageBuilder/content-type/slide/container/preview"
+                        master_template="Magento_PageBuilder/content-type/slide/container/master"
+                        reader="Magento_PageBuilder/js/master-format/read/configurable">
+                <elements>
+                    <element name="main">
+                        <style name="min_height" source="min_height" converter="Magento_PageBuilder/js/converter/style/min-height"/>
+                        <style name="margins" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/margins" converter="Magento_PageBuilder/js/content-type/slide/converter/style/margins"/>
+                        <attribute name="name" source="data-content-type"/>
+                        <attribute name="slide_name" source="data-slide-name"/>
+                        <attribute name="appearance" source="data-appearance"/>
+                        <attribute name="show_button" source="data-show-button"/>
+                        <attribute name="show_overlay" source="data-show-overlay"/>
+                        <css name="css_classes"/>
+                    </element>
+                    <element name="link">
+                        <attribute name="link_url" reader="Magento_PageBuilder/js/property/link" persistence_mode="read"/>
+                        <attribute name="virtual_link_href" storage_key="link_url" source="href" converter="Magento_PageBuilder/js/converter/attribute/link-href" persistence_mode="write"/>
+                        <attribute name="virtual_link_target" storage_key="link_url" source="target" converter="Magento_PageBuilder/js/converter/attribute/link-target" persistence_mode="write"/>
+                        <attribute name="virtual_link_type" storage_key="link_url" source="data-link-type" converter="Magento_PageBuilder/js/converter/attribute/link-type" persistence_mode="write"/>
+                        <attribute name="title_attribute" source="title"/>
+                    </element>
+                    <element name="empty_link"/>
+                    <element name="overlay">
+                        <style name="overlay_color" source="background_color" converter="Magento_PageBuilder/js/content-type/slide/converter/style/overlay-background-color" persistence_mode="write"/>
+                        <attribute name="overlay_color_attribute" storage_key="overlay_color" source="data-overlay-color" converter="Magento_PageBuilder/js/content-type/slide/converter/attribute/overlay-color"/>
+                        <attribute name="alt" source="aria-label"/>
+                        <attribute name="title_attribute" source="title"/>
+                    </element>
+                    <element name="wrapper">
+                        <style name="background_color" source="background_color"/>
+                        <style name="background_image" source="background_image" converter="Magento_PageBuilder/js/converter/style/background-image" preview_converter="Magento_PageBuilder/js/converter/style/preview/background-image" persistence_mode="write"/>
+                        <style name="background_position" source="background_position"/>
+                        <style name="background_size" source="background_size"/>
+                        <style name="background_repeat" source="background_repeat"/>
+                        <style name="border" source="border_style" converter="Magento_PageBuilder/js/converter/style/border-style"/>
+                        <style name="border_color" source="border_color"/>
+                        <style name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/border-width"/>
+                        <style name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
+                        <style name="min_height" source="min_height" converter="Magento_PageBuilder/js/converter/style/min-height"/>
+                        <style name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/converter/style/paddings"/>
+                        <style name="text_align" source="text_align"/>
+                        <attribute name="background_images" source="data-background-images"/>
+                        <attribute name="background_type" source="data-background-type"/>
+                        <attribute name="video_source" source="data-video-src" converter="Magento_PageBuilder/js/content-type/video/converter/attribute/src"/>
+                        <attribute name="video_loop" source="data-video-loop"/>
+                        <attribute name="video_play_only_visible" source="data-video-play-only-visible"/>
+                        <attribute name="video_lazy_load" source="data-video-lazy-load"/>
+                        <attribute name="video_fallback_image" source="data-video-fallback-src" converter="Magento_PageBuilder/js/converter/attribute/src" preview_converter="Magento_PageBuilder/js/converter/attribute/preview/src"/>
+                    </element>
+                    <element name="content">
+                        <html name="content" preview_converter="Magento_PageBuilder/js/converter/html/directive"/>
+                    </element>
+                    <element name="button">
+                        <style name="opacity" source="opacity" converter="Magento_PageBuilder/js/content-type/slide/converter/style/button-opacity" persistence_mode="write"/>
+                        <style name="visibility" source="visibility" converter="Magento_PageBuilder/js/content-type/slide/converter/style/button-visibility" persistence_mode="write"/>
+                        <html name="button_text" converter="Magento_PageBuilder/js/converter/html/tag-escaper"/>
+                        <css name="button_type">
+                            <filter>
+                                <class source="pagebuilder-slide-button"/>
+                            </filter>
+                        </css>
+                    </element>
+                    <element name="video_overlay">
+                        <style name="video_overlay_color" source="background_color" converter="Magento_PageBuilder/js/converter/style/video-overlay-color" persistence_mode="write"/>
+                        <attribute name="video_overlay_color_attribute" storage_key="video_overlay_color" source="data-video-overlay-color" converter="Magento_PageBuilder/js/converter/attribute/video-overlay-color"/>
+                    </element>
+                </elements>
+            </appearance>
             <appearance name="collage-left"
                         preview_template="Magento_PageBuilder/content-type/slide/collage-left/preview"
                         master_template="Magento_PageBuilder/content-type/slide/collage-left/master"
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_slide_form.xml b/app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_slide_form.xml
old mode 100755
new mode 100644
index 8dfdccc19a1..70c2691851c
--- a/app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_slide_form.xml
+++ b/app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_slide_form.xml
@@ -44,7 +44,7 @@
                 <link name="hideLabel">${$.name}.appearance:options</link>
             </imports>
         </settings>
-        <field name="appearance" formElement="select" sortOrder="10" component="Magento_PageBuilder/js/form/element/dependent-visual-select">
+        <field name="appearance" formElement="select" sortOrder="10" component="Magento_PageBuilder/js/form/element/slider-dependent-visual-select">
             <argument name="data" xsi:type="array">
                 <item name="config" xsi:type="array">
                     <item name="default" xsi:type="string">poster</item>
@@ -57,6 +57,77 @@
                 </additionalClasses>
                 <dataType>text</dataType>
                 <elementTmpl>Magento_PageBuilder/form/element/visual-select</elementTmpl>
+                <switcherConfig>
+                    <name>pagebuilder_slide_form_pagebuiler_content</name>
+                    <rules>
+                        <rule name="0">
+                            <value>poster</value>
+                            <actions>
+                                <action name="0">
+                                    <target>pagebuilder_slide_form.pagebuilder_slide_form.general</target>
+                                    <callback>show</callback>
+                                </action>
+                                <action name="1">
+                                    <target>pagebuilder_slide_form.pagebuilder_slide_form.background</target>
+                                    <callback>show</callback>
+                                </action>
+                            </actions>
+                        </rule>
+                        <rule name="1">
+                            <value>collage-left</value>
+                            <actions>
+                                <action name="0">
+                                    <target>pagebuilder_slide_form.pagebuilder_slide_form.general</target>
+                                    <callback>show</callback>
+                                </action>
+                                <action name="1">
+                                    <target>pagebuilder_slide_form.pagebuilder_slide_form.background</target>
+                                    <callback>show</callback>
+                                </action>
+                            </actions>
+                        </rule>
+                        <rule name="2">
+                            <value>collage-centered</value>
+                            <actions>
+                                <action name="0">
+                                    <target>pagebuilder_slide_form.pagebuilder_slide_form.general</target>
+                                    <callback>show</callback>
+                                </action>
+                                <action name="1">
+                                    <target>pagebuilder_slide_form.pagebuilder_slide_form.background</target>
+                                    <callback>show</callback>
+                                </action>
+                            </actions>
+                        </rule>
+                        <rule name="3">
+                            <value>collage-right</value>
+                            <actions>
+                                <action name="0">
+                                    <target>pagebuilder_slide_form.pagebuilder_slide_form.general</target>
+                                    <callback>show</callback>
+                                </action>
+                                <action name="1">
+                                    <target>pagebuilder_slide_form.pagebuilder_slide_form.background</target>
+                                    <callback>show</callback>
+                                </action>
+                            </actions>
+                        </rule>
+                        <rule name="4">
+                            <value>container</value>
+                            <actions>
+                                <action name="0">
+                                    <target>pagebuilder_slide_form.pagebuilder_slide_form.general</target>
+                                    <callback>hide</callback>
+                                </action>
+                                <action name="1">
+                                    <target>pagebuilder_slide_form.pagebuilder_slide_form.background</target>
+                                    <callback>hide</callback>
+                                </action>
+                            </actions>
+                        </rule>
+                    </rules>
+                    <enabled>true</enabled>
+                </switcherConfig>
             </settings>
             <formElements>
                 <select>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_slide_mobile_form.xml b/app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_slide_mobile_form.xml
index 8e2f4380fae..04c33d9d1c8 100644
--- a/app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_slide_mobile_form.xml
+++ b/app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_slide_mobile_form.xml
@@ -31,7 +31,7 @@
             </settings>
         </dataProvider>
     </dataSource>
-    <fieldset name="appearance_fieldset">
+    <fieldset name="appearance_fieldset" component="Magento_PageBuilder/js/form/element/dependent-fieldset">
         <field name="min_height">
             <argument name="data" xsi:type="array">
                 <item name="config" xsi:type="array">
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/css/images/content-type/slide/appearance/container.svg b/app/code/Magento/PageBuilder/view/adminhtml/web/css/images/content-type/slide/appearance/container.svg
new file mode 100644
index 00000000000..08fa8f22cca
--- /dev/null
+++ b/app/code/Magento/PageBuilder/view/adminhtml/web/css/images/content-type/slide/appearance/container.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="218" height="110" viewBox="0 0 218 110" xmlns="http://www.w3.org/2000/svg">
+  <defs/>
+  <g fill="none" fill-rule="evenodd">
+    <rect width="149" height="69" x="35" y="21" fill="#524D49"/>
+    <rect width="72.066" height="42.32" x="72.971" y="32.438" fill="#FFF" style=""/>
+    <rect width="15.783" height="17.104" x="72.745" y="32.171" fill="#524D49" style=""/>
+    <rect width="20.972" height="4" x="64.69" y="35.868" fill="#FFF" style=""/>
+    <rect width="4.832" height="17.905" x="72.45" y="28.79" fill="#FFF" style=""/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/js/form/element/slider-dependent-visual-select.js b/app/code/Magento/PageBuilder/view/adminhtml/web/js/form/element/slider-dependent-visual-select.js
new file mode 100644
index 00000000000..10c6a83f470
--- /dev/null
+++ b/app/code/Magento/PageBuilder/view/adminhtml/web/js/form/element/slider-dependent-visual-select.js
@@ -0,0 +1,46 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+define([
+    'Magento_PageBuilder/js/form/element/dependent-visual-select',
+    'uiRegistry',
+    'ko'
+], function (uiComponent, registry) {
+    'use strict';
+
+    return uiComponent.extend({
+
+        /**
+         * Force switcherConfig re-trigger on click
+         * @returns {exports}
+         */
+        initObservable: function () {
+            let self = this;
+            this._super().observe(['value']);
+            this.value.subscribe(function (value) {
+                self.reTriggerClick(this, value);
+            });
+            return this;
+        },
+
+        reTriggerClick: function (self, value) {
+            let switcherParent = registry.get('pagebuilder_slide_form.pagebuilder_slide_form.appearance_fieldset.appearance');
+            if (typeof switcherParent !== "undefined" && typeof switcherParent.switcherConfig !== "undefined") {
+                switcherParent.switcherConfig.rules.forEach(function (rule) {
+                    if (rule.value === value) {
+                        rule.actions.forEach(function (action) {
+                            if (action.callback === "show") {
+                                registry.get(action.target).visible(true);
+                            }
+                            if (action.callback === "hide") {
+                                registry.get(action.target).visible(false);
+                            }
+                        });
+                    }
+                });
+            }
+        }
+    });
+});
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/container/master.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/container/master.html
new file mode 100644
index 00000000000..81d196b0c72
--- /dev/null
+++ b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/container/master.html
@@ -0,0 +1,11 @@
+<!--
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+<div attr="Object.assign({}, data.main.attributes(), { id: contentType.parentContentType.id })"
+     ko-style="Object.assign(data.wrapper.style(), data.main.style())"
+     css="data.main.css">
+    <render args="masterTemplate" ></render>
+</div>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/container/preview.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/container/preview.html
new file mode 100644
index 00000000000..5bfee9a33fc
--- /dev/null
+++ b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/container/preview.html
@@ -0,0 +1,39 @@
+<!--
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+<div class="container-type pagebuilder-slide"
+     attr="data.main.attributes"
+     css="data.main.css"
+     event="{ mouseover: onMouseOver, mouseout: onMouseOut }">
+    <div class="pagebuilder-slide-wrapper"
+         ko-style="Object.assign(data.main.style(), data.wrapper.style(), {backgroundImage: getBackgroundImage()})"
+         event="mouseover: onMouseOverWrapper, mouseout: onMouseOutWrapper, mousedown: activateEditor"
+         attr="data.wrapper.attributes"
+         afterRender="initParallax">
+        <div class="element-children content-type-container"
+             style="padding-top: 30px;"
+             each="contentType.getChildren()"
+             css="getChildrenCss()"
+             attr="{id: contentType.id + '-children'}"
+             data-bind="sortable: getSortableOptions()"
+             afterRender="function (element) { if (typeof afterChildrenRender === 'function') { afterChildrenRender(element); } }">
+            <if args="$parent.isContainer()">
+                <div class="pagebuilder-drop-indicator"></div>
+            </if>
+            <if args="$parent.isContainer() && typeof $parent.contentType.getChildren === 'function'">
+                <div class="container-type-wrapper"
+                     template="{ name: preview.template, data: preview, afterRender: preview.dispatchAfterRenderEvent.bind(preview) }"
+                     attr="{ id: id }" css="{'container-type-hidden': !preview.display()}">
+                </div>
+                <div class="pagebuilder-drop-indicator"></div>
+            </if>
+        </div>
+        <div class="pagebuilder-empty-container empty-placeholder"
+             style="margin-top: 30px;"
+             css="placeholderCss()"
+             translate="'Drag content types or columns here'"></div>
+    </div>
+</div>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slider/default/preview.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slider/default/preview.html
index f519b4b606b..73bf599d4cc 100644
--- a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slider/default/preview.html
+++ b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slider/default/preview.html
@@ -4,34 +4,38 @@
  * See COPYING.txt for license details.
  */
 -->
-
-<div class="pagebuilder-content-type pagebuilder-slider children-min-height"
-     attr="data.main.attributes"
-     event="{ mouseover: onMouseOver, mouseout: onMouseOut },  mouseoverBubble: false">
-    <render args="getOptions().template" ></render>
-    <div class="slider-container"
-         css="data.main.css"
-         ko-style="data.main.style">
-        <render args="childTemplate" ></render>
-    </div>
-    <div class="slider-controls focus-options">
-        <div class="slider-navigation"
-             afterRender="afterNavigationRender"
-             each="$parent.getChildren()"
-             data-bind="sortableChildren: { handle: '.navigation-dot-anchor', containment: 'parent', placeholder: 'navigation-dot sortable-placeholder', tolerance: 'pointer', start: onSortStart.bind($parent.preview), stop: onSortStop.bind($parent.preview) }">
-            <div class="navigation-dot"
-                 tabindex="0"
-                 event="focusin: $parent.setFocusedSlide.bind($parent, $index(), false), focusout: $parent.onFocusOut.bind($parent)"
-                 css="active: $parent.activeSlide() === $index(), focus: $parent.focusedSlide() === $index()">
-                <a class="navigation-dot-anchor" href="#" click="$parent.onControlClick.bind($parent, $index())" data-bind="hasFocusNoScroll: $parent.focusedSlide() === $index()"></a>
-                <with args="preview">
-                    <render with="preview" args="getOptions().template" ></render>
-                </with>
-                <span if="preview.slideName() !== ''"
-                      class="tooltip-content"
-                      role="tooltip"
-                      text="preview.slideName">
-                </span>
+<div class="pagebuilder-content-type-wrapper pagebuilder-content-type-affordance">
+    <div class="pagebuilder-content-type pagebuilder-slider children-min-height pagebuilder-content-type-affordance"
+         attr="data.main.attributes"
+         style="padding-top: 10px;"
+         event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
+        <div class="pagebuilder-display-label"
+             text="function () { return displayLabel().toUpperCase(); }()"></div>
+        <render args="getOptions().template" ></render>
+        <div class="slider-container"
+             css="data.main.css"
+             ko-style="data.main.style">
+            <render args="childTemplate" ></render>
+        </div>
+        <div class="slider-controls focus-options">
+            <div class="slider-navigation"
+                 afterRender="afterNavigationRender"
+                 each="$parent.getChildren()"
+                 data-bind="sortableChildren: { handle: '.navigation-dot-anchor', containment: 'parent', placeholder: 'navigation-dot sortable-placeholder', tolerance: 'pointer', start: onSortStart.bind($parent.preview), stop: onSortStop.bind($parent.preview) }">
+                <div class="navigation-dot"
+                     tabindex="0"
+                     event="focusin: $parent.setFocusedSlide.bind($parent, $index(), false), focusout: $parent.onFocusOut.bind($parent)"
+                     css="active: $parent.activeSlide() === $index(), focus: $parent.focusedSlide() === $index()">
+                    <a class="navigation-dot-anchor" href="#" click="$parent.onControlClick.bind($parent, $index())" data-bind="hasFocusNoScroll: $parent.focusedSlide() === $index()"></a>
+                    <with args="preview">
+                        <render with="preview" args="getOptions().template" ></render>
+                    </with>
+                    <span if="preview.slideName() !== ''"
+                          class="tooltip-content"
+                          role="tooltip"
+                          text="preview.slideName">
+                    </span>
+                </div>
             </div>
         </div>
     </div>