lsm/Orchard
1
0
Fork 0
mirror of https://github.com/OrchardCMS/Orchard.git synced 2026-02-09 09:16:41 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Added Edit button for each image in media library field, restyled buttons, added remove confirmation, prevented accidental navigation when there are pending changes.

Browse Source
This commit is contained in:
Bertrand Le Roy
2013-09-01 19:07:21 -07:00
parent a0dc4ba9ba
commit 29f5463c0d
1 changed files with 51 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/Orchard.Web/Modules/Orchard.MediaLibrary/Views/EditorTemplates/Fields/MediaLibraryPicker.Edit.cshtml
View File

@@ -12,16 +12,22 @@
var settings = Model.Field.PartFieldDefinition.Settings.GetModel<MediaLibraryPickerFieldSettings>(); var settings = Model.Field.PartFieldDefinition.Settings.GetModel<MediaLibraryPickerFieldSettings>();
var contentManager = WorkContext.Resolve<IContentManager>(); var contentManager = WorkContext.Resolve<IContentManager>();
var fieldIdForSelectedIds = Html.FieldIdFor(m => m.SelectedIds);
var fieldIdForIds = Html.FieldIdFor(m => m.Field.Ids);
} }
<fieldset> <fieldset>
<label @if(settings.Required) { <text>class="required"</text> }>@Model.Field.DisplayName</label> <label @if(settings.Required) { <text>class="required"</text> }>@Model.Field.DisplayName</label>
<div id="save-message-@Html.FieldIdFor(m => m.Field.Ids)" class="message message-Warning media-library-picker-message">@T("You need to save your changes.")</div> <div id="save-message-@fieldIdForIds" class="message message-Warning media-library-picker-message">@T("You need to save your changes.")</div>
<div id="media-library-picker-@Html.FieldIdFor(m => m.Field.Ids)" class="items media-library-picker" summary="@Model.Field.DisplayName"> <div id="media-library-picker-@fieldIdForIds" class="items media-library-picker" summary="@Model.Field.DisplayName">
<ul> <ul>
@foreach (var contentItem in Model.ContentItems) { @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 } }));
<li> <li>
<div data-id="@contentItem.Id" data-fieldid="@Html.FieldIdFor(m => m.Field.Ids)" class="media-library-picker-item"> <div data-id="@contentItem.Id" data-fieldid="@fieldIdForIds" class="media-library-picker-item">
<div class="thumbnail"> <div class="thumbnail">
@Display(contentManager.BuildDisplay(contentItem, "Thumbnail")) @Display(contentManager.BuildDisplay(contentItem, "Thumbnail"))
<div class="overlay"> <div class="overlay">
@@ -30,14 +36,15 @@
</div> </div>
</div> </div>
<span data-id="@contentItem.Id" class="media-library-picker-remove button grey">@T("Remove")</span> <a href="#" data-id="@contentItem.Id" class="media-library-picker-remove">@T("Remove")</a>@T(" | ")
<a href="@editUrl">@T("Edit")</a>
</li> </li>
} }
</ul> </ul>
</div> </div>
<div> <div>
<span id="btn-@Html.FieldIdFor(m => m.Field.Ids)" class="button">@T("Add")</span> <span id="btn-@fieldIdForIds" class="button">@T("Add")</span>
</div> </div>
@Html.HiddenFor(m => m.SelectedIds) @Html.HiddenFor(m => m.SelectedIds)
@@ -50,19 +57,19 @@
(function($) { (function($) {
var required = @(settings.Required ? "true" : "false");
var multiple = @(settings.Multiple ? "true" : "false"); var multiple = @(settings.Multiple ? "true" : "false");
var addButton = $('#btn-@Html.FieldIdFor(m => m.Field.Ids)'); var addButton = $('#btn-@fieldIdForIds');
var @Html.FieldIdFor(m => m.Field.Ids)_Template = '<li><div data-id="{contentItemId}" data-fieldid="@Html.FieldIdFor(m => m.Field.Ids)" class="media-library-picker-item"><div class="thumbnail">{thumbnail}<div class="overlay"><h3>{title}</h3></div><div></div><span data-id="{contentItemId}" class="media-library-picker-remove button grey">@T("Remove")</span></li>'; var @(fieldIdForIds)_Template =
'<li><div data-id="{contentItemId}" data-fieldid="@fieldIdForIds" 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">@T("Remove")</a>@T(" | ")<a href="{editLink}?ReturnUrl=@Request.RawUrl">@T("Edit")</a></li>';
var refreshIds = function() { var refreshIds = function() {
var id = $('#@Html.FieldIdFor(m => m.SelectedIds)'); var id = $('#@fieldIdForSelectedIds');
id.val(''); 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")); 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) { if(!multiple && itemsCount > 0) {
addButton.hide(); addButton.hide();
@@ -71,59 +78,76 @@
addButton.show(); 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(); refreshIds();
addButton.click(function() { addButton.click(function() {
var url = '@HttpUtility.JavaScriptStringEncode(Url.Action("Index", "Admin", new {area = "Orchard.MediaLibrary", dialog = true}))'; var url = '@HttpUtility.JavaScriptStringEncode(Url.Action("Index", "Admin", new {area = "Orchard.MediaLibrary", dialog = true}))';
$.colorbox({ $.colorbox({
href: url, href: url,
iframe: true, iframe: true,
reposition: true, reposition: true,
width: "100%", width: "100%",
height: "100%", height: "100%",
onLoad: function () { onLoad: function() { // hide the scrollbars from the main window
// hide the scrollbars from the main window
$('html, body').css('overflow', 'hidden'); $('html, body').css('overflow', 'hidden');
$('#cboxClose').remove(); $('#cboxClose').remove();
}, },
onClosed: function () { onClosed: function() {
$('html, body').css('overflow', ''); $('html, body').css('overflow', '');
var selectedData = $.colorbox.selectedData; var selectedData = $.colorbox.selectedData;
if (selectedData == null) // Dialog cancelled, do nothing if (selectedData == null) // Dialog cancelled, do nothing
return; return;
for (var i = 0; i < selectedData.length; i++) { for (var i = 0; i < selectedData.length; i++) {
var template = @(fieldIdForIds)_Template
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); .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); var content = $(template);
$('#media-library-picker-@Html.FieldIdFor(m => m.Field.Ids) ul').append(content); $('#media-library-picker-@fieldIdForIds ul').append(content);
} }
refreshIds(); refreshIds();
if (selectedData.length) { 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(); $(this).closest('li').remove();
refreshIds(); 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', handle: '.thumbnail',
stop: function(event, ui) { stop: function() {
refreshIds(); refreshIds();
$('#save-message-@Html.FieldIdFor(m => m.Field.Ids)').show(); showSaveMsg();
} }
}).disableSelection(); }).disableSelection();