MC-3653: Can Drag & Drop Child Content Types Into Hidden Content Types

- Update variable naming
- Add new variable for hidden class used by sortable

Author: davemacaulay

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type-menu/hide-show-option.js

@@ -10,11 +10,11 @@ import OptionInterface from "./option.d";
 
 export default class HideShowOption extends Option implements OptionInterface {
 
-    public static SHOW_TEXT = $t("Show");
-    public static SHOW_ICON = "<i class='icon-pagebuilder-show'></i>";
+    public static showText = $t("Show");
+    public static showIcon = "<i class='icon-pagebuilder-show'></i>";
 
-    public static HIDE_TEXT = $t("Hide");
-    public static HIDE_ICON = "<i class='icon-pagebuilder-hide'></i>";
+    public static hideText = $t("Hide");
+    public static hideIcon = "<i class='icon-pagebuilder-hide'></i>";
 
     /**
      * @param {OptionConfigInterface} options
@@ -39,11 +39,11 @@ export default class HideShowOption extends Option implements OptionInterface {
     private onDisplayChange(state: DataObject) {
         const display: boolean = !!state.display;
         if (display) {
-            this.icon(HideShowOption.HIDE_ICON);
-            this.title(HideShowOption.HIDE_TEXT);
+            this.icon(HideShowOption.hideIcon);
+            this.title(HideShowOption.hideText);
         } else {
-            this.icon(HideShowOption.SHOW_ICON);
-            this.title(HideShowOption.SHOW_TEXT);
+            this.icon(HideShowOption.showText);
+            this.title(HideShowOption.showIcon);
         }
     }
 }

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/column-group/preview.js

@@ -16,6 +16,7 @@ import {DataObject} from "../../data-store";
 import {animationTime} from "../../drag-drop/container-animation";
 import {moveContentType} from "../../drag-drop/move-content-type";
 import {getDraggedContentTypeConfig} from "../../drag-drop/registry";
+import {hiddenClass} from "../../drag-drop/sortable";
 import {createStyleSheet} from "../../utils/create-stylesheet";
 import {default as ColumnGroupPreview} from "../column-group/preview";
 import BindResizeHandleEventParamsInterface from "../column/bind-resize-handle-event-params";
@@ -542,7 +543,7 @@ export default class Preview extends PreviewCollection {
     private initMouseMove(group: JQuery): void {
         let intersects: boolean = false;
         $(document).on("mousemove touchmove", (event: JQueryEventObject) => {
-            if (group.parents(".pagebuilder-content-type-hidden").length > 0) {
+            if (group.parents(hiddenClass).length > 0) {
                 return;
             }
 

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/preview.js

@@ -420,8 +420,8 @@ export default class Preview {
         if (this.parent.config.is_hideable) {
             options.hideShow = new HideShowOption({
                 preview: this,
-                icon: HideShowOption.SHOW_ICON,
-                title: HideShowOption.SHOW_TEXT,
+                icon: HideShowOption.showIcon,
+                title: HideShowOption.showText,
                 action: this.onOptionVisibilityToggle,
                 classes: ["hide-show-content-type"],
                 sort: 40,

app/code/Magento/PageBuilder/view/adminhtml/web/js/drag-drop/sortable.js

@@ -16,6 +16,12 @@ import {getAllowedContainersClasses} from "./matrix";
 import {moveContentType} from "./move-content-type";
 import {getDraggedContentTypeConfig, setDraggedContentTypeConfig} from "./registry";
 
+/**
+ * The class used when hiding a content type
+ * @type {string}
+ */
+export const hiddenClass = ".pagebuilder-content-type-hidden";
+
 /**
  * Return the sortable options for an instance which requires sorting / dropping functionality
  *
@@ -135,7 +141,7 @@ let placeholderContainer: Element;
  */
 function onSort(preview: Preview, event: Event, ui: JQueryUI.SortableUIParams) {
     if ($(this).sortable("option", "disabled") ||
-        ui.placeholder.parents(".pagebuilder-content-type-hidden").length > 0
+        ui.placeholder.parents(hiddenClass).length > 0
     ) {
         ui.placeholder.hide();
     } else {
@@ -189,7 +195,7 @@ function onSortReceive(preview: Preview, event: Event, ui: JQueryUI.SortableUIPa
     const contentTypeConfig = getDraggedContentTypeConfig();
     if (contentTypeConfig) {
         // If the sortable instance is disabled don't complete this operation
-        if ($(this).sortable("option", "disabled") || $(this).parents(".pagebuilder-content-type-hidden").length > 0) {
+        if ($(this).sortable("option", "disabled") || $(this).parents(hiddenClass).length > 0) {
             return;
         }
 
@@ -238,7 +244,7 @@ function onSortReceive(preview: Preview, event: Event, ui: JQueryUI.SortableUIPa
  */
 function onSortUpdate(preview: Preview, event: Event, ui: JQueryUI.SortableUIParams) {
     // If the sortable instance is disabled don't complete this operation
-    if ($(this).sortable("option", "disabled") || ui.item.parents(".pagebuilder-content-type-hidden").length > 0) {
+    if ($(this).sortable("option", "disabled") || ui.item.parents(hiddenClass).length > 0) {
         ui.item.remove();
         $(this).sortable("cancel");