From 3d284eece8cb449e614aa88e45553c5650742dbe Mon Sep 17 00:00:00 2001 From: Sipke Schoorstra Date: Mon, 28 Jul 2014 15:39:56 -0700 Subject: [PATCH] Implementing reusable MediaLibraryPicker shape. --- .../Orchard.MediaLibrary.csproj | 4 + .../Scripts/media-library-picker.js | 110 ++++++++++++ .../Fields/MediaLibraryPicker.Edit.cshtml | 162 +----------------- .../Views/MediaLibraryPicker.cshtml | 59 +++++++ 4 files changed, 180 insertions(+), 155 deletions(-) create mode 100644 src/Orchard.Web/Modules/Orchard.MediaLibrary/Scripts/media-library-picker.js create mode 100644 src/Orchard.Web/Modules/Orchard.MediaLibrary/Views/MediaLibraryPicker.cshtml diff --git a/src/Orchard.Web/Modules/Orchard.MediaLibrary/Orchard.MediaLibrary.csproj b/src/Orchard.Web/Modules/Orchard.MediaLibrary/Orchard.MediaLibrary.csproj index c628bf094..2f25912e9 100644 --- a/src/Orchard.Web/Modules/Orchard.MediaLibrary/Orchard.MediaLibrary.csproj +++ b/src/Orchard.Web/Modules/Orchard.MediaLibrary/Orchard.MediaLibrary.csproj @@ -76,6 +76,7 @@ + @@ -346,6 +347,9 @@ + + + 10.0 $(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion) diff --git a/src/Orchard.Web/Modules/Orchard.MediaLibrary/Scripts/media-library-picker.js b/src/Orchard.Web/Modules/Orchard.MediaLibrary/Scripts/media-library-picker.js new file mode 100644 index 000000000..e451a07bd --- /dev/null +++ b/src/Orchard.Web/Modules/Orchard.MediaLibrary/Scripts/media-library-picker.js @@ -0,0 +1,110 @@ +(function($) { + + $(".media-library-picker-field").each(function() { + var element = $(this); + var multiple = element.data("multiple"); + var removeText = element.data("remove-text"); + var removePrompt = element.data("remove-prompt"); + var editText = element.data("edit-text"); + var dirtyText = element.data("dirty-text"); + var pipe = element.data("pipe"); + var returnUrl = element.data("return-url"); + var addUrl = element.data("add-url"); + var addButton = element.find(".button.add"); + var template = + '
  • {thumbnail}

    {title}

    ' + removeText + '' + pipe + '' + editText + '
    • '; + + var refreshIds = function() { + var id = element.find('.selected-ids'); + id.val(''); + element.find(".media-library-picker-item").each(function() { + id.val(id.val() + "," + $(this).attr("data-id")); + }); + + var itemsCount = element.find(".media-library-picker-item").length; + + if(!multiple && itemsCount > 0) { + addButton.hide(); + } + else { + addButton.show(); + } + }; + + window.mediaLibraryDirty = false; + var showSaveMsg = function() { + element.find('.media-library-picker-message').show(); + window.mediaLibraryDirty = true; + }; + if (!window.mediaLibraryNavigateAway) { + $(window).on("beforeunload", window.mediaLibraryNavigateAway = function() { + if (window.mediaLibraryDirty) { + return dirtyText; + } + }); + element.closest("form").on("submit", function() { + window.mediaLibraryDirty = false; + }); + } + + refreshIds(); + + addButton.click(function () { + var url = addUrl; + $.colorbox({ + href: url, + iframe: true, + reposition: true, + width: "100%", + height: "100%", + onLoad: function() { // hide the scrollbars from the main window + $('html, body').css('overflow', 'hidden'); + $('#cboxClose').remove(); + }, + onClosed: function() { + $('html, body').css('overflow', ''); + var selectedData = $.colorbox.selectedData; + if (selectedData == null) // Dialog cancelled, do nothing + return; + + var selectionLength = multiple ? selectedData.length : Math.min(selectedData.length, 1); + + for (var i = 0; i < selectionLength ; i++) { + var tmpl = 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 = $(tmpl); + element.find('.media-library-picker.items ul').append(content); + } + + refreshIds(); + + if (selectedData.length) { + showSaveMsg(); + } + } + }); + + }); + + element.on("click",'.media-library-picker-remove', function(e) { + e.preventDefault(); + if (!confirm(removePrompt)) return false; + $(this).closest('li').remove(); + refreshIds(); + showSaveMsg(); + return false; + }); + + element.find(".media-library-picker.items ul").sortable({ + handle: '.thumbnail', + stop: function() { + refreshIds(); + showSaveMsg(); + } + }).disableSelection(); + }); + +})(jQuery); \ No newline at end of file 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 3ae435583..33ecc2ecd 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 @@ -1,160 +1,12 @@ @model Orchard.MediaLibrary.ViewModels.MediaLibraryPickerFieldViewModel -@using Orchard.ContentManagement -@using Orchard.Utility.Extensions; @using Orchard.MediaLibrary.Settings; - @{ - Script.Require("jQueryUI_Sortable").AtFoot(); - Style.Include("media-library-picker-admin.css"); - - Script.Require("jQueryColorBox").AtFoot(); - Style.Require("jQueryColorBox"); - 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.")
    -
    -
      - @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")) -
      -

      @Html.ItemDisplayText(contentItem)

      -
      - -
      -
      - @T("Remove")@T(" | ") - @T("Edit") -
      • - } -
    -
    - -
    - @T("Add") -
    - - @Html.HiddenFor(m => m.SelectedIds) - @settings.Hint -
    - -@using (Script.Foot()) { - -} \ No newline at end of file +@Display.MediaLibraryPicker( + FieldName: Html.FieldNameFor(m => m.SelectedIds), + DisplayName: Model.Field.DisplayName, + Multiple: settings.Multiple, + Required: settings.Required, + Hint: settings.Hint, + ContentItems: Model.ContentItems) \ No newline at end of file diff --git a/src/Orchard.Web/Modules/Orchard.MediaLibrary/Views/MediaLibraryPicker.cshtml b/src/Orchard.Web/Modules/Orchard.MediaLibrary/Views/MediaLibraryPicker.cshtml new file mode 100644 index 000000000..b5a7bb466 --- /dev/null +++ b/src/Orchard.Web/Modules/Orchard.MediaLibrary/Views/MediaLibraryPicker.cshtml @@ -0,0 +1,59 @@ +@using Orchard.ContentManagement +@using Orchard.Utility.Extensions; + +@{ + Style.Include("media-library-picker-admin.css"); + Style.Require("jQueryColorBox"); + Script.Require("jQueryUI_Sortable").AtFoot(); + Script.Require("jQueryColorBox").AtFoot(); + Script.Include("media-library-picker.js").AtFoot(); + + var fieldName = (string) Model.FieldName; + var displayName = (string) Model.DisplayName; + var multiple = (bool)(Model.Multiple ?? false); + var required = (bool)(Model.Required ?? false); + var hint = (string) Model.Hint; + var contentItems = (IEnumerable)Model.ContentItems ?? Enumerable.Empty(); + var contentManager = WorkContext.Resolve(); +} + +
    + +
    @T("You need to save your changes.")
    +
    +
      + @foreach (var contentItem in contentItems) { + var editRouteValues = contentManager.GetItemMetadata(contentItem).EditorRouteValues; + var editUrl = Url.Action( + Convert.ToString(editRouteValues["action"]), + editRouteValues.Merge(new RouteValueDictionary { { "ReturnUrl", Request.RawUrl } })); +
    • +
      +
      + @Display(BuildDisplay(contentItem, "Thumbnail")) +
      +

      @Html.ItemDisplayText(contentItem)

      +
      + +
      +
      + @T("Remove")@T(" | ") + @T("Edit") +
      • + } +
    +
    +
    + @T("Add") +
    + x.Id))" class="selected-ids" /> + @hint +
    \ No newline at end of file