use the new notification tools for the confirmation dialog

cms/static/js/base.js

@@ -402,24 +402,54 @@ function _deleteItem($el) {
 function removeAsset(e) {
     e.preventDefault();
 
-    // replace with new notification moodal
-    if (!confirm('Are you sure you wish to delete this item. It cannot be reversed!\n\nAlso any content that links/refers to this item will no longer work (e.g. broken images and/or links)')) return;
-
-    var remove_asset_url = $('.asset-library').data('remove-asset-callback-url');
-    var location = $(this).closest('tr').data('id');
     var that = this;
-    $.post(remove_asset_url,
-        { 'location': location },
-        function() {
-            // show the alert
-            $(".wrapper-alert-confirmation").addClass("is-shown").attr('aria-hidden','false');
-            $(that).closest('tr').remove();
-            analytics.track('Deleted Asset', {
-                'course': course_location_analytics,
-                'id': location
-            });
-        }
-    );
+    var msg = new CMS.Models.ConfirmAssetDeleteMessage({
+        title: gettext("Delete File Confirmation"),
+        message: gettext("Are you sure you wish to delete this item. It cannot be reversed!\n\nAlso any content that links/refers to this item will no longer work (e.g. broken images and/or links)"),
+        actions: {
+            primary: {
+                text: gettext("OK"),
+                click: function(view) {
+                    // call the back-end to actually remove the asset
+                    $.post(view.model.get('remove_asset_url'),
+                        { 'location': view.model.get('asset_location') },
+                        function() {
+                            // show the post-commit confirmation
+                            $(".wrapper-alert-confirmation").addClass("is-shown").attr('aria-hidden','false');
+                            view.model.get('row_to_remove').remove();
+                            analytics.track('Deleted Asset', {
+                                'course': course_location_analytics,
+                                'id': view.model.get('asset_location')
+                            });
+                        }
+                    );
+                    view.hide();
+                }
+            },
+            secondary: [{
+                text: gettext("Cancel"),
+                click: function(view) {
+                    view.hide();
+                }
+            }]
+        },
+        remove_asset_url: $('.asset-library').data('remove-asset-callback-url'),
+        asset_location: $(this).closest('tr').data('id'),
+        row_to_remove: $(this).closest('tr')
+    });
+
+    // workaround for now. We can't spawn multiple instances of the Prompt View
+    // so for now, a bit of hackery to just make sure we have a single instance
+    // note: confirm_delete_prompt is in asset_index.html
+    if (confirm_delete_prompt === null)
+        confirm_delete_prompt = new CMS.Views.Prompt({model: msg});
+    else
+    {
+        confirm_delete_prompt.model = msg;
+        confirm_delete_prompt.show();
+    }
+
+    return;
 }
 
 function showUploadModal(e) {
@@ -482,6 +512,9 @@ function displayFinishedUpload(xhr) {
     var html = Mustache.to_html(template, resp);
     $('table > tbody').prepend(html);
 
+    // re-bind the listeners to delete it
+    $('.remove-asset-button').bind('click', removeAsset);
+
     analytics.track('Uploaded a File', {
         'course': course_location_analytics,
         'asset_url': resp.url

cms/static/js/models/feedback.js

@@ -42,6 +42,12 @@ CMS.Models.ErrorMessage = CMS.Models.SystemFeedback.extend({
     })
 });
 
+CMS.Models.ConfirmAssetDeleteMessage = CMS.Models.SystemFeedback.extend({
+    defaults: $.extend({}, CMS.Models.SystemFeedback.prototype.defaults, {
+        "intent": "warning"
+    })
+});
+
 CMS.Models.ConfirmationMessage = CMS.Models.SystemFeedback.extend({
     defaults: $.extend({}, CMS.Models.SystemFeedback.prototype.defaults, {
         "intent": "confirmation"

cms/templates/asset_index.html

@@ -8,6 +8,11 @@
 
 <%block name="jsextra">
 <script src="${static.url('js/vendor/mustache.js')}"></script>
+
+<script type='text/javascript'>
+  // we just want a singleton
+  confirm_delete_prompt = null;
+</script>
 </%block>
 
 <%block name="content">