From 3f254f31a8eadf6a99d25a2d596659901f0faaf9 Mon Sep 17 00:00:00 2001
From: Manuel Raynaud <raynaud.manu@gmail.com>
Date: Wed, 30 Apr 2014 17:34:04 +0200
Subject: [PATCH] create confirmation message before deleting an image

---
 .../default/assets/js/image-upload.js         | 33 +++++++++++++++++--
 .../default/includes/image-upload-form.html   | 18 ++++++++++
 .../includes/image-upload-list-ajax.html      |  2 +-
 3 files changed, 49 insertions(+), 4 deletions(-)

diff --git a/templates/backOffice/default/assets/js/image-upload.js b/templates/backOffice/default/assets/js/image-upload.js
index 53afacd34..3d20728b1 100644
--- a/templates/backOffice/default/assets/js/image-upload.js
+++ b/templates/backOffice/default/assets/js/image-upload.js
@@ -8,6 +8,8 @@ $(function($){
     $.imageUploadManager.initImageDropZone = function() {
 
         $.imageUploadManager.onClickDeleteImage();
+        $.imageUploadManager.onClickModal();
+        $.imageUploadManager.onModalHidden();
         $.imageUploadManager.sortImage();
 
         var imageDropzone = new Dropzone("#images-dropzone", {
@@ -73,7 +75,26 @@ $(function($){
     $.imageUploadManager.onClickDeleteImage = function() {
         $('.image-manager .image-delete-btn').on('click', function (e) {
             e.preventDefault();
-            var $this = $(this);
+            $("#submit-delete-image").data("element-id", $(this).attr("id"));
+            $('#image_delete_dialog').modal("show");
+
+            return false;
+        });
+
+
+    };
+
+    $.imageUploadManager.onModalHidden = function() {
+        $("#image_delete_dialog").on('hidden.bs.modal', function (e) {
+            $("#submit-delete-image").data("element-id", "");
+        });
+    };
+
+    $.imageUploadManager.onClickModal = function() {
+        $("#submit-delete-image").on('click', function(e){
+
+            var $id= $(this).data("element-id");
+            var $this = $("#"+$id);
             var $parent = $this.parent();
             var $greatParent = $parent.parent();
 
@@ -92,6 +113,8 @@ $(function($){
                     }
                 }
             }).done(function(data) {
+                $('#image_delete_dialog').modal("hide");
+                $("#submit-delete-image").data("element-id", "");
                 $greatParent.remove();
                 $(".image-manager .message").html(
                     data
@@ -101,8 +124,12 @@ $(function($){
                 $( "#js-sort-image").children('li').each(function(position, element) {
                     $(element).find('.js-sorted-position').html(position + 1);
                 });
-            });
-            return false;
+            }).fail(function(){
+                $('#image_delete_dialog').modal("hide");
+                $("#submit-delete-image").data("element-id", "");
+            })
+
+            ;
         });
     };
 
diff --git a/templates/backOffice/default/includes/image-upload-form.html b/templates/backOffice/default/includes/image-upload-form.html
index 7b7d7eb65..7a60aa258 100644
--- a/templates/backOffice/default/includes/image-upload-form.html
+++ b/templates/backOffice/default/includes/image-upload-form.html
@@ -36,3 +36,21 @@ Parameters:
     var imageListErrorMessage = "{intl l='Can\'t load images, please refresh this page.'}";
     var imageReorderErrorMessage = "{intl l='Can\'t reorder images, please refresh this page.'}";
 </script>
+
+<div class="modal fade" id="image_delete_dialog" tabindex="-1" role="dialog" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+                <h3>{intl l="delete image"}</h3>
+            </div>
+                <div class="modal-body">
+                    {intl l="Do you really want to delete this image ?"}
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove"></span>{intl l="No"}</button>
+                    <button type="button" id="submit-delete-image" data-element-id="" class="btn btn-default btn-primary"><span class="glyphicon glyphicon-check"></span>{intl l="Yes"}</button>
+                </div>
+        </div>
+    </div>
+</div>
diff --git a/templates/backOffice/default/includes/image-upload-list-ajax.html b/templates/backOffice/default/includes/image-upload-list-ajax.html
index 185baa092..009cc6174 100644
--- a/templates/backOffice/default/includes/image-upload-list-ajax.html
+++ b/templates/backOffice/default/includes/image-upload-list-ajax.html
@@ -21,7 +21,7 @@ Parameters:
                     <a class="image-update-btn btn btn-default btn-xs" href="{url path="/admin/image/type/$imageType/$ID/update"}" data-error-message="{intl l='Please retry'}">
                         <span class="glyphicon glyphicon-edit"></span>
                     </a>
-                    <a class="image-delete-btn btn btn-default btn-xs" href="{url path="/admin/image/type/$imageType/delete/$ID"}" data-error-message="{intl l='Please retry'}">
+                    <a class="image-delete-btn btn btn-default btn-xs" id="image-{$ID}" href="{url path="/admin/image/type/$imageType/delete/$ID"}" data-error-message="{intl l='Please retry'}">
                         <span class="glyphicon glyphicon-trash"></span>
                     </a>
                 </div>