#21155: Remove All in MediaLibraryPicker field.

Work Item: 21155

src/Orchard.Web/Modules/Orchard.MediaLibrary/Scripts/media-library-picker.js

@@ -5,6 +5,7 @@
         var multiple = element.data("multiple");
         var removeText = element.data("remove-text");
         var removePrompt = element.data("remove-prompt");
+        var removeAllPrompt = element.data("remove-all-prompt");
         var editText = element.data("edit-text");
         var dirtyText = element.data("dirty-text");
         var pipe = element.data("pipe");
@@ -13,6 +14,7 @@
         var promptOnNavigate = element.data("prompt-on-navigate");
         var showSaveWarning = element.data("show-save-warning");
         var addButton = element.find(".button.add");
+        var removeAllButton = element.find(".button.remove");
         var template = 
             '<li><div data-id="{contentItemId}" class="media-library-picker-item"><div class="thumbnail">{thumbnail}<div class="overlay"><h3>{title}</h3></div></div></div><a href="#" data-id="{contentItemId}" class="media-library-picker-remove">' + removeText + '</a>' + pipe + '<a href="{editLink}?ReturnUrl=' + returnUrl + '">' + editText + '</a></li>';
         
@@ -31,6 +33,13 @@
             else {
                 addButton.show();
             }
+
+            if(itemsCount > 1) {
+                removeAllButton.show();
+            }
+            else {
+                removeAllButton.hide();
+            }
         };
 
         var showSaveMsg = function () {
@@ -98,6 +107,15 @@
             
         });
 
+        removeAllButton.click(function (e) {
+            e.preventDefault();
+            if (!confirm(removeAllPrompt)) return false;
+            element.find('.media-library-picker.items ul').children('li').remove();
+            refreshIds();
+            showSaveMsg();
+            return false;
+        });
+
         element.on("click",'.media-library-picker-remove', function(e) {
             e.preventDefault();
             if (!confirm(removePrompt)) return false;

src/Orchard.Web/Modules/Orchard.MediaLibrary/Views/MediaLibraryPicker.cshtml

@@ -23,6 +23,7 @@
           data-multiple="@multiple.ToString().ToLower()"
           data-remove-text="@T("Remove")"
           data-remove-prompt="@T("Do you really want to remove that media?")"
+          data-remove-all-prompt="@T("Do you really want to remove all media?")"
           data-edit-text="@T("Edit")"
           data-dirty-text="@T("You have unsaved changes. Please only accept to leave if you don't mind losing those changes.")"
           data-pipe="@T(" | ")"
@@ -30,7 +31,7 @@
           data-return-url="@HttpUtility.JavaScriptStringEncode(Request.RawUrl)"
           data-prompt-on-navigate="@promptOnNavigate.ToString().ToLower()"
           data-show-save-warning="@showSaveWarning.ToString().ToLower()">
-    <label @if (required) { <text> class="required" </text>   }>@displayName</label>
+    <label @if (required) { <text> class="required" </text>    }>@displayName</label>
     <div class="message message-Warning media-library-picker-message">@T("You need to save your changes.")</div>
     <div class="items media-library-picker" summary="@displayName">
         <ul>
@@ -46,7 +47,6 @@
                             <div class="overlay">
                                 <h3>@Html.ItemDisplayText(contentItem)</h3>
                             </div>
-
                         </div>
                     </div>
                     <a href="#" data-id="@contentItem.Id" class="media-library-picker-remove">@T("Remove")</a>@T(" | ")
@@ -57,6 +57,7 @@
     </div>
     <div>
         <span class="button add">@T("Add")</span>
+        <span class="button remove" style="display: none;">@T("Remove All")</span>
     </div>
     <input type="hidden" name="@fieldName" value="@String.Join(",", contentItems.Select(x => x.Id))" class="selected-ids" />
     <span class="hint">@hint</span>