display clear button option

Arkounay · Nov 27, 2023 · 44400db · 44400db
1 parent 0f92bdd
commit 44400db
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 22 deletions.
diff --git a/Form/UxMediaType.php b/Form/UxMediaType.php
@@ -22,6 +22,7 @@ public function buildView(FormView $view, FormInterface $form, array $options):
             'allow_crop' => $options['allow_crop'],
             'crop_options' => $options['crop_options'],
             'display_file_manager' => $options['display_file_manager'],
+            'display_clear_button' => $options['display_clear_button'],
         ]);
     }
 
@@ -42,6 +43,7 @@ public function configureOptions(OptionsResolver $resolver): void
             'error_bubbling' => false,
             'display_file_manager' => true,
             'extra' => [],
+            'display_clear_button' => true,
         ]);
 
         $resolver->setRequired('conf');

diff --git a/README.md b/README.md
@@ -106,6 +106,7 @@ Works like [Artgris/MediaBundle](https://github.com/artgris/MediaBundle) except
 $builder->add('Media', UxMediaType::class, [
     'conf' => 'default',
     'display_file_manager' => true,
+    'display_clear_button' => true,
     'allow_crop' => true,
     'crop_options' => [
         'display_crop_data' => true,

diff --git a/Resources/assets/dist/media_controller.js b/Resources/assets/dist/media_controller.js
@@ -83,10 +83,10 @@ var _default = /*#__PURE__*/function (_Controller) {
 
     _this = _super.call.apply(_super, [this].concat(args));
 
-    _classPrivateMethodInitSpec(_assertThisInitialized(_this), _disableCropButton);
-
     _classPrivateMethodInitSpec(_assertThisInitialized(_this), _hideClearButton);
 
+    _classPrivateMethodInitSpec(_assertThisInitialized(_this), _disableCropButton);
+
     _classPrivateMethodInitSpec(_assertThisInitialized(_this), _setErrorMessage);
 
     _classPrivateMethodInitSpec(_assertThisInitialized(_this), _uploadFiles);
@@ -157,7 +157,8 @@ var _default = /*#__PURE__*/function (_Controller) {
       var hasValue = this.pathValue !== '';
 
       _classPrivateMethodGet(this, _disableCropButton, _disableCropButton2).call(this);
-      _classPrivateMethodGet(this, _hideClearButton, _hideClearButton2).call(this);
+
+      _classPrivateMethodGet(this, _hideClearButton, _hideClearButton2).call(this, !hasValue);
 
       if (hasValue) {
         if (this.pathValue.match(/.(jpg|jpeg|png|gif|svg)/i)) {
@@ -168,13 +169,11 @@ var _default = /*#__PURE__*/function (_Controller) {
             _this2.imageLoaded = false;
 
             _classPrivateMethodGet(_this2, _disableCropButton, _disableCropButton2).call(_this2);
-            _classPrivateMethodGet(_this2, _hideClearButton, _hideClearButton2).call(_this2);
           });
           img.addEventListener('load', function () {
             _this2.imageLoaded = true;
 
             _classPrivateMethodGet(_this2, _disableCropButton, _disableCropButton2).call(_this2, !img.getAttribute('src').match(/^\/.+(jpg|jpeg|png|gif)$/i));
-            _classPrivateMethodGet(_this2, _hideClearButton, _hideClearButton2).call(_this2, !img.getAttribute('src'));
           });
           this.filePreviewTarget.innerHTML = '';
           this.filePreviewTarget.appendChild(img);
@@ -190,7 +189,6 @@ var _default = /*#__PURE__*/function (_Controller) {
             this.filePreviewTarget.innerHTML = "<div class=\"border p-2 text-secondary bg-light rounded\">".concat(icon, "</div>");
 
             _classPrivateMethodGet(this, _disableCropButton, _disableCropButton2).call(this);
-            _classPrivateMethodGet(this, _hideClearButton, _hideClearButton2).call(this);
           } else {
             this.filePreviewTarget.innerHTML = '';
           }

diff --git a/Resources/assets/src/media_controller.js b/Resources/assets/src/media_controller.js
@@ -143,7 +143,7 @@ export default class extends Controller {
         this.inputPathTarget.value = this.pathValue;
         const hasValue = this.pathValue !== '';
         this.#disableCropButton();
-        this.#hideClearButton();
+        this.#hideClearButton(!hasValue);
         if (hasValue) {
             if (this.pathValue.match(/.(jpg|jpeg|png|gif|svg)/i)) {
                 const img = document.createElement('img');
@@ -152,12 +152,10 @@ export default class extends Controller {
                 img.addEventListener('error', () => {
                     this.imageLoaded = false;
                     this.#disableCropButton();
-                    this.#hideClearButton();
                 });
                 img.addEventListener('load', () => {
                     this.imageLoaded = true;
                     this.#disableCropButton(!img.getAttribute('src').match(/^\/.+(jpg|jpeg|png|gif)$/i));
-                    this.#hideClearButton(!img.getAttribute('src'));
                 });
                 this.filePreviewTarget.innerHTML = '';
                 this.filePreviewTarget.appendChild(img);
@@ -170,7 +168,6 @@ export default class extends Controller {
                     }
                     this.filePreviewTarget.innerHTML = `<div class="border p-2 text-secondary bg-light rounded">${icon}</div>`;
                     this.#disableCropButton();
-                    this.#hideClearButton();
                 } else {
                     this.filePreviewTarget.innerHTML = '';
                 }

diff --git a/templates/_ux_media_widget.html.twig b/templates/_ux_media_widget.html.twig
@@ -76,18 +76,20 @@
                             {% include '@ArkounayUxMedia/_ux_crop_modal.html.twig' with {crop_options: form.vars.crop_options} %}
                         {% endif %}
 
-                        <button type="button" class="btn btn-light btn-upload"
-                                data-action="arkounay--ux-media--media#clear"
-                                data-arkounay--ux-media--media-target="clearButton">
-                            <span>
-                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
-                                 class="bi bi-trash"
-                                 viewBox="0 0 16 16"> <path
-                                        d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/> <path
-                                        fill-rule="evenodd"
-                                        d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/> </svg>
-                            </span>
-                        </button>
+                        {% if form.vars.display_clear_button %}
+                            <button type="button" class="btn btn-light btn-upload"
+                                    data-action="arkounay--ux-media--media#clear"
+                                    data-arkounay--ux-media--media-target="clearButton">
+                                <span>
+                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+                                     class="bi bi-trash"
+                                     viewBox="0 0 16 16"> <path
+                                            d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/> <path
+                                            fill-rule="evenodd"
+                                            d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/> </svg>
+                                </span>
+                            </button>
+                        {% endif %}
 
                         <button type="button" class="btn btn-light btn-upload"
                                 data-controller="arkounay--ux-media--upload"