From 1c9162cb99bfeccda67155b1e5b6b5215a5b5430 Mon Sep 17 00:00:00 2001
From: sophie-mulard <smulard@gmail.com>
Date: Thu, 7 Mar 2024 15:22:27 +0100
Subject: [PATCH] Allow new element type change

---
 Resources/js/content.js         |  1 +
 Resources/js/slide.js           | 17 ++++++++++++++++-
 Resources/public/css/slide.scss | 27 +++++++++++++++++++++------
 3 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/Resources/js/content.js b/Resources/js/content.js
index f8727194..66a7cc43 100644
--- a/Resources/js/content.js
+++ b/Resources/js/content.js
@@ -55,6 +55,7 @@ function getNewFieldForm(url, type, baseName, addAfter = true) {
       e.preventDefault();
       saveNewFieldData(this, baseName, addAfter);
     });
+    slide.enableBackButton(() => openSlideForNewField(baseName, addAfter));
     slide.open();
     initSortables(slide.content);
   });
diff --git a/Resources/js/slide.js b/Resources/js/slide.js
index 9c5b8419..3a5b0c8b 100644
--- a/Resources/js/slide.js
+++ b/Resources/js/slide.js
@@ -4,11 +4,15 @@ class Slide
 {
     constructor() {
         this.closeBtn = $('<button type="button" class="btn-close"><i class="fa-solid fa-xmark"></i></button>');
+        this.backBtn = $('<button type="button" class="btn-back"><i class="fa-solid fa-arrow-left"></i></button>');
+        this.buttons = $('<div class="slide-buttons"></div>');
+        this.buttons.append(this.backBtn);
+        this.buttons.append(this.closeBtn);
         this.header = $('<div class="acb-lateral-slide-header"></div>');
         this.content = $('<div class="acb-lateral-slide-content"></div>');
         this.footer = $('<div class="acb-lateral-slide-footer"></div>');
         this.element = $('<div class="acb-lateral-slide"></div>');
-        this.element.append(this.closeBtn);
+        this.element.append(this.buttons);
         this.element.append(this.header);
         this.element.append(this.content);
         this.element.append(this.footer);
@@ -41,6 +45,7 @@ class Slide
         this.header.html('');
         this.content.html('');
         this.footer.html('');
+        this.disableBackButton();
     }
 
     open() {
@@ -53,6 +58,16 @@ class Slide
 
     close() {
         $('body').removeClass('acb-lateral-slide-open');
+        this.disableBackButton();
+    }
+
+    enableBackButton(callback) {
+      this.element.addClass('new-field-form');
+      this.backBtn.on('click', callback);
+    }
+    disableBackButton() {
+      this.element.removeClass('new-field-form');
+      this.backBtn.off('click');
     }
 }
 
diff --git a/Resources/public/css/slide.scss b/Resources/public/css/slide.scss
index 39d8f7d9..077f9fb0 100644
--- a/Resources/public/css/slide.scss
+++ b/Resources/public/css/slide.scss
@@ -18,15 +18,30 @@ $zindex: 1000;
         margin-right: 0;
     }
 
-    .btn-close {
+    .slide-buttons {
         position: absolute;
         top: 16px;
         right: 16px;
-        width: 24px;
-        height: 24px;
-        border: none;
-        background: none;
-        font-size: 16px;
+        button {
+            width: 24px;
+            height: 24px;
+            border: none;
+            background: none;
+            font-size: 16px;
+            + button {
+                margin-left: 10px;
+            }
+            &.btn-back {
+                display: none;
+            }
+        }
+    }
+    &.new-field-form {
+        .slide-buttons {
+            button.btn-back {
+                display: inline-block;
+            }
+        }
     }
 
     .acb-lateral-slide-header {