From 29f5463c0d6e6522740b0ab70a1a9c85242bc093 Mon Sep 17 00:00:00 2001 From: Bertrand Le Roy Date: Sun, 1 Sep 2013 19:07:21 -0700 Subject: [PATCH] Added Edit button for each image in media library field, restyled buttons, added remove confirmation, prevented accidental navigation when there are pending changes. --- .../Fields/MediaLibraryPicker.Edit.cshtml | 78 ++++++++++++------- 1 file changed, 51 insertions(+), 27 deletions(-) diff --git a/src/Orchard.Web/Modules/Orchard.MediaLibrary/Views/EditorTemplates/Fields/MediaLibraryPicker.Edit.cshtml b/src/Orchard.Web/Modules/Orchard.MediaLibrary/Views/EditorTemplates/Fields/MediaLibraryPicker.Edit.cshtml index 82df96dca..b38415df7 100644 --- a/src/Orchard.Web/Modules/Orchard.MediaLibrary/Views/EditorTemplates/Fields/MediaLibraryPicker.Edit.cshtml +++ b/src/Orchard.Web/Modules/Orchard.MediaLibrary/Views/EditorTemplates/Fields/MediaLibraryPicker.Edit.cshtml @@ -12,16 +12,22 @@ var settings = Model.Field.PartFieldDefinition.Settings.GetModel(); var contentManager = WorkContext.Resolve(); + var fieldIdForSelectedIds = Html.FieldIdFor(m => m.SelectedIds); + var fieldIdForIds = Html.FieldIdFor(m => m.Field.Ids); }
-
@T("You need to save your changes.")
-
+
@T("You need to save your changes.")
+
    @foreach (var contentItem in Model.ContentItems) { + var editRouteValues = contentManager.GetItemMetadata(contentItem).EditorRouteValues; + var editUrl = Url.Action( + Convert.ToString(editRouteValues["action"]), + editRouteValues.Merge(new RouteValueDictionary { { "ReturnUrl", Request.RawUrl } }));
  • -
    +
    @Display(contentManager.BuildDisplay(contentItem, "Thumbnail"))
    @@ -30,14 +36,15 @@
    - @T("Remove") + @T("Remove")@T(" | ") + @T("Edit")
    • }
- @T("Add") + @T("Add")
@Html.HiddenFor(m => m.SelectedIds) @@ -50,19 +57,19 @@ (function($) { - var required = @(settings.Required ? "true" : "false"); var multiple = @(settings.Multiple ? "true" : "false"); - var addButton = $('#btn-@Html.FieldIdFor(m => m.Field.Ids)'); - var @Html.FieldIdFor(m => m.Field.Ids)_Template = '
  • {thumbnail}

    {title}

    @T("Remove")
    • '; + var addButton = $('#btn-@fieldIdForIds'); + var @(fieldIdForIds)_Template = + '
  • {thumbnail}

    {title}

    @T("Remove")@T(" | ")@T("Edit")
    • '; var refreshIds = function() { - var id = $('#@Html.FieldIdFor(m => m.SelectedIds)'); + var id = $('#@fieldIdForSelectedIds'); id.val(''); - $("div[data-fieldid = @Html.FieldIdFor(m => m.Field.Ids)]").each(function() { + $("div[data-fieldid = @fieldIdForIds]").each(function() { id.val(id.val() + "," + $(this).attr("data-id")); }); - var itemsCount = $("div[data-fieldid = @Html.FieldIdFor(m => m.Field.Ids)]").length; + var itemsCount = $("div[data-fieldid = @fieldIdForIds]").length; if(!multiple && itemsCount > 0) { addButton.hide(); @@ -71,59 +78,76 @@ addButton.show(); } }; + + window.mediaLibraryDirty = false; + var showSaveMsg = function() { + $('#save-message-@fieldIdForIds').show(); + window.mediaLibraryDirty = true; + }; + if (!window.mediaLibraryNavigateAway) { + $(window).on("beforeunload", window.mediaLibraryNavigateAway = function() { + if (window.mediaLibraryDirty) { + return "@HttpUtility.JavaScriptStringEncode(T("You have unsaved changes. Please only accept to leave if you don't mind losing those changes.").Text)"; + } + }); + $("#@(fieldIdForSelectedIds)").closest("form").on("submit", function() { + window.mediaLibraryDirty = false; + }); + } refreshIds(); addButton.click(function() { var url = '@HttpUtility.JavaScriptStringEncode(Url.Action("Index", "Admin", new {area = "Orchard.MediaLibrary", dialog = true}))'; - $.colorbox({ href: url, iframe: true, reposition: true, width: "100%", height: "100%", - onLoad: function () { - // hide the scrollbars from the main window + onLoad: function() { // hide the scrollbars from the main window $('html, body').css('overflow', 'hidden'); $('#cboxClose').remove(); }, - onClosed: function () { + onClosed: function() { $('html, body').css('overflow', ''); - var selectedData = $.colorbox.selectedData; - if (selectedData == null) // Dialog cancelled, do nothing return; - for (var i = 0; i < selectedData.length; i++) { - - var template = @Html.FieldIdFor(m => m.Field.Ids)_Template.replace(/\{contentItemId\}/g, selectedData[i].id).replace(/\{thumbnail\}/g, selectedData[i].thumbnail).replace(/\{title\}/g, selectedData[i].title); + var template = @(fieldIdForIds)_Template + .replace(/\{contentItemId\}/g, selectedData[i].id) + .replace(/\{thumbnail\}/g, selectedData[i].thumbnail) + .replace(/\{title\}/g, selectedData[i].title) + .replace(/\{editLink\}/g, selectedData[i].editLink); var content = $(template); - $('#media-library-picker-@Html.FieldIdFor(m => m.Field.Ids) ul').append(content); + $('#media-library-picker-@fieldIdForIds ul').append(content); } refreshIds(); if (selectedData.length) { - $('#save-message-@Html.FieldIdFor(m => m.Field.Ids)').show(); + showSaveMsg(); } } }); }); - $(document).on("click",'#media-library-picker-@Html.FieldIdFor(m => m.Field.Ids) .media-library-picker-remove',function() { + $(document).on("click",'#media-library-picker-@fieldIdForIds .media-library-picker-remove', function(e) { + e.preventDefault(); + if (!confirm("@HttpUtility.JavaScriptStringEncode(T("Do you really want to remove that media?").Text)")) return false; $(this).closest('li').remove(); refreshIds(); - $('#save-message-@Html.FieldIdFor(m => m.Field.Ids)').show(); + showSaveMsg(); + return false; }); - $("#media-library-picker-@Html.FieldIdFor(m => m.Field.Ids) ul").sortable({ + $("#media-library-picker-@fieldIdForIds ul").sortable({ handle: '.thumbnail', - stop: function(event, ui) { + stop: function() { refreshIds(); - $('#save-message-@Html.FieldIdFor(m => m.Field.Ids)').show(); + showSaveMsg(); } }).disableSelection();