From 3d284eece8cb449e614aa88e45553c5650742dbe Mon Sep 17 00:00:00 2001 From: Sipke Schoorstra Date: Mon, 28 Jul 2014 15:39:56 -0700 Subject: [PATCH 1/5] 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 From 6e4fcd6a2a56790f5626962cafd6376ffe2e49a9 Mon Sep 17 00:00:00 2001 From: Sipke Schoorstra Date: Mon, 28 Jul 2014 15:40:30 -0700 Subject: [PATCH 2/5] Consistifying line endings. --- .../Scripts/media-library.js | 800 +++++++++--------- 1 file changed, 400 insertions(+), 400 deletions(-) diff --git a/src/Orchard.Web/Modules/Orchard.MediaLibrary/Scripts/media-library.js b/src/Orchard.Web/Modules/Orchard.MediaLibrary/Scripts/media-library.js index 0b9283e1f..42298d8d7 100644 --- a/src/Orchard.Web/Modules/Orchard.MediaLibrary/Scripts/media-library.js +++ b/src/Orchard.Web/Modules/Orchard.MediaLibrary/Scripts/media-library.js @@ -1,51 +1,51 @@ -var enhanceViewModel = function(viewModel) { - // extension point for other modules to alter the view model -}; - -var baseViewModel = function() { - -}; - -$(function () { - (function (settings) { - +var enhanceViewModel = function(viewModel) { + // extension point for other modules to alter the view model +}; + +var baseViewModel = function() { + +}; + +$(function () { + (function (settings) { + function attachFolderTitleDropEvent (elements) { elements.droppable({ accept: function () { - var targetId = $(this).data('term-id'); + var targetId = $(this).data('term-id'); return targetId != viewModel.displayed(); - }, + }, over: function (event, ui) { - $(ui.helper).addClass('over'); + $(ui.helper).addClass('over'); $(this).addClass('dropping'); - }, + }, out: function (event, ui) { - $(ui.helper).removeClass('over'); + $(ui.helper).removeClass('over'); $(this).removeClass('dropping'); - }, - tolerance: "pointer", + }, + tolerance: "pointer", drop: function () { - $(this).removeClass('dropping'); - var folderPath = $(this).data('media-path'); - + $(this).removeClass('dropping'); + var folderPath = $(this).data('media-path'); + if (folderPath == viewModel.displayed()) { return; - } - - var ids = []; - viewModel.selection().forEach(function (item) { ids.push(item.data.id); }); - var url = settings.moveActionUrl; - - console.log(folderPath); - + } + + var ids = []; + viewModel.selection().forEach(function (item) { ids.push(item.data.id); }); + var url = settings.moveActionUrl; + + console.log(folderPath); + $.ajax({ - type: "POST", - url: url, - dataType: "json", - traditional: true, + type: "POST", + url: url, + dataType: "json", + traditional: true, data: { - folderPath: folderPath, - mediaItemIds: ids, + folderPath: folderPath, + mediaItemIds: ids, __RequestVerificationToken: settings.antiForgeryToken }, }).done(function (result) { @@ -54,90 +54,90 @@ $(function () { viewModel.results.remove(function (item) { return ids.indexOf(item.data.id) != -1; }); - } - + } + viewModel.clearSelection(); } else { - alert(errorMessage); + alert(errorMessage); console.log('failed to move media items: ' + result.toString()); } }).fail(function (result) { - alert(errorMessage); + alert(errorMessage); console.log('failed to move media items: ' + result.toString()); }); } }); - }; - - var listWidth = $('#media-library-main-list').width(); - var listHeight = $('#media-library-main-list').height(); - var itemSize = $('.thumbnail').first().width(); - var draftText = $("#media-library").data("draft-text"); - - var itemsPerRow = Math.floor(listWidth / itemSize); - var itemsPerColumn = Math.ceil(listHeight / itemSize); - - var pageCount = itemsPerRow * itemsPerColumn; - - function mediaPartViewModel(data) { - var self = this; - - // values - self.data = data; - - //id, - //contentType, - //contentTypeClass, - //title, - //alternateText, - //caption, - //resource, - //mimeType, - //mimeTypeClass, - //thumbnail, - //editLink, - - self.hasFocus = ko.observable(); - self.selected = ko.observable(); - self.status = ko.observable(''); - self.summary = ko.observable(''); - self.cssClass = ko.computed(function() { - var css = ''; - if (self.selected()) { - css += ' selected'; - } - - if (self.hasFocus()) { - css += ' has-focus'; - } - - return css; - }); - - self.publicationStatus = ko.computed(function() { - return self.data.published ? "" : draftText; - }); - - // operations - self.setData = function(value) { - self.data = value; - }; - } - - function mediaIndexViewModel() { - var self = this; - - // placeholder function called to retrieve content when scrolling - self.loadMediaItemsUrl = function (folderPath, skip, count, order, mediaType) { - }; - - // values - self.selection = ko.observableArray([]); - self.focus = ko.observable(); - self.results = ko.observableArray(); - self.displayed = ko.observable(); - self.mediaItemsCount = 0; - self.orderMedia = ko.observableArray(['created']); + }; + + var listWidth = $('#media-library-main-list').width(); + var listHeight = $('#media-library-main-list').height(); + var itemSize = $('.thumbnail').first().width(); + var draftText = $("#media-library").data("draft-text"); + + var itemsPerRow = Math.floor(listWidth / itemSize); + var itemsPerColumn = Math.ceil(listHeight / itemSize); + + var pageCount = itemsPerRow * itemsPerColumn; + + function mediaPartViewModel(data) { + var self = this; + + // values + self.data = data; + + //id, + //contentType, + //contentTypeClass, + //title, + //alternateText, + //caption, + //resource, + //mimeType, + //mimeTypeClass, + //thumbnail, + //editLink, + + self.hasFocus = ko.observable(); + self.selected = ko.observable(); + self.status = ko.observable(''); + self.summary = ko.observable(''); + self.cssClass = ko.computed(function() { + var css = ''; + if (self.selected()) { + css += ' selected'; + } + + if (self.hasFocus()) { + css += ' has-focus'; + } + + return css; + }); + + self.publicationStatus = ko.computed(function() { + return self.data.published ? "" : draftText; + }); + + // operations + self.setData = function(value) { + self.data = value; + }; + } + + function mediaIndexViewModel() { + var self = this; + + // placeholder function called to retrieve content when scrolling + self.loadMediaItemsUrl = function (folderPath, skip, count, order, mediaType) { + }; + + // values + self.selection = ko.observableArray([]); + self.focus = ko.observable(); + self.results = ko.observableArray(); + self.displayed = ko.observable(); + self.mediaItemsCount = 0; + self.orderMedia = ko.observableArray(['created']); self.mediaType = ko.observableArray([]); self.mediaFolders = ko.observableArray([]); @@ -164,73 +164,73 @@ $(function () { self.mediaPendingRequest(value); } }); - - self.getMediaItems = function (count, append) { - var folderPath = self.displayed() || ''; - - if (self.mediaPendingRequest()) { - return; - } - - if (append) { - if (self.results().length > 0 && self.results().length >= self.mediaItemsCount) { - return; - } - } else { - self.results([]); - } - - self.pendingRequest(true); - - var url = self.loadMediaItemsUrl(folderPath, self.results().length, count, self.orderMedia(), self.mediaType()); - console.log(url); - - $.ajax({ - type: "GET", - url: url, - cache: false - }).done(function(data) { + + self.getMediaItems = function (count, append) { + var folderPath = self.displayed() || ''; + + if (self.mediaPendingRequest()) { + return; + } + + if (append) { + if (self.results().length > 0 && self.results().length >= self.mediaItemsCount) { + return; + } + } else { + self.results([]); + } + + self.pendingRequest(true); + + var url = self.loadMediaItemsUrl(folderPath, self.results().length, count, self.orderMedia(), self.mediaType()); + console.log(url); + + $.ajax({ + type: "GET", + url: url, + cache: false + }).done(function(data) { var mediaItems = data.mediaItems; var mediaItemsFolderPath = data.folderPath; - + if (mediaItemsFolderPath !== self.displayed()) { return; - } - - self.mediaItemsCount = data.mediaItemsCount; - for (var i = 0; i < mediaItems.length; i++) { - var item = new mediaPartViewModel(mediaItems[i]); - self.results.push(item); - - // pre-select result which are already part of the selection - var selection = self.selection(); - for (var j = 0; j < selection.length; j++) { - if (selection[j].data.id == item.data.id) { - viewModel.toggleSelect(item, true); - } - } - } - }).fail(function(data) { - console.error(data); - }).always(function() { - self.pendingRequest(false); - }); - }; - - self.clearSelection = function() { - this.focus(null); - // unselect previous elements - self.selection().forEach(function(item) { - item.selected(false); - }); - - self.selection([]); - }; - - self.focus.subscribe(function(oldValue) { - if (oldValue) { - oldValue.hasFocus(false); - } + } + + self.mediaItemsCount = data.mediaItemsCount; + for (var i = 0; i < mediaItems.length; i++) { + var item = new mediaPartViewModel(mediaItems[i]); + self.results.push(item); + + // pre-select result which are already part of the selection + var selection = self.selection(); + for (var j = 0; j < selection.length; j++) { + if (selection[j].data.id == item.data.id) { + viewModel.toggleSelect(item, true); + } + } + } + }).fail(function(data) { + console.error(data); + }).always(function() { + self.pendingRequest(false); + }); + }; + + self.clearSelection = function() { + this.focus(null); + // unselect previous elements + self.selection().forEach(function(item) { + item.selected(false); + }); + + self.selection([]); + }; + + self.focus.subscribe(function(oldValue) { + if (oldValue) { + oldValue.hasFocus(false); + } }, this, "beforeChange"); self.afterRenderMediaFolderTemplate = function(elements, model) { @@ -238,104 +238,104 @@ $(function () { attachFolderTitleDropEvent(childTitles); }; - self.focus.subscribe(function(newValue) { - if (newValue) { - newValue.hasFocus(true); - - // load summary admin if not alreay done - if (newValue.summary() == '') { - var id = newValue.data.id; - var url = settings.mediaItemActionUrl + '/' + id; - - $.ajax({ - type: "GET", - url: url, - cache: false - }).done(function(data) { - newValue.summary(data); - }); - } - } - }); - - self.displayFolder = function(folderPath) { - self.results([]); - self.displayed(folderPath); - - self.loadMediaItemsUrl = function (f, skip, count, order, mediaType) { - return settings.mediaItemsActionUrl + '?folderPath=' + encodeURIComponent(f) + '&skip=' + skip + '&count=' + count + '&order=' + order + '&mediaType=' + mediaType; - }; - + self.focus.subscribe(function(newValue) { + if (newValue) { + newValue.hasFocus(true); + + // load summary admin if not alreay done + if (newValue.summary() == '') { + var id = newValue.data.id; + var url = settings.mediaItemActionUrl + '/' + id; + + $.ajax({ + type: "GET", + url: url, + cache: false + }).done(function(data) { + newValue.summary(data); + }); + } + } + }); + + self.displayFolder = function(folderPath) { + self.results([]); + self.displayed(folderPath); + + self.loadMediaItemsUrl = function (f, skip, count, order, mediaType) { + return settings.mediaItemsActionUrl + '?folderPath=' + encodeURIComponent(f) + '&skip=' + skip + '&count=' + count + '&order=' + order + '&mediaType=' + mediaType; + }; + self.getMediaItems(pageCount); - }; - - self.selectFolder = function (folderPath) { - History.pushState({ action: 'displayFolder', folderPath: folderPath }, '', '?folderPath=' + folderPath); - self.displayFolder(folderPath); - }; - - self.selectRecent = function() { - History.pushState({ action: 'selectRecent' }, '', '?recent'); - - self.loadMediaItemsUrl = function (folderPath, skip, count, order, mediaType) { - return settings.recentMediaItemsActionUrl + '?skip=' + skip + '&count=' + count + '&order=' + order + '&mediaType=' + mediaType; - }; - - self.results([]); - self.displayed(null); - self.getMediaItems(pageCount); - }; - - self.toggleSelect = function(searchResult, force) { - var index = $.inArray(searchResult, self.selection()); - if (index == -1 || force) { - self.selection.remove(function(item) { return item.data.id == searchResult.data.id; }); - self.selection.push(searchResult); - searchResult.selected(true); - } else { - self.selection.remove(searchResult); - searchResult.selected(false); - } - - this.focus(searchResult); - }; - - self.select = function(searchResult) { - var index = $.inArray(searchResult, self.selection()); - if (index == -1) { - self.clearSelection(); - self.selection([searchResult]); - searchResult.selected(true); - } - - this.focus(searchResult); - }; - - self.scrolled = function(data, event) { - var elem = event.target; - if (elem.scrollTop > (elem.scrollHeight - elem.offsetHeight - 300)) { - self.getMediaItems(pageCount, true); - } - }; - - self.importMedia = function() { - var url = settings.importActionUrl + '?folderPath=' + encodeURIComponent(self.displayed()); - window.location = url; - }; - - var selectFolderOrRecent = function () { - if (self.displayed()) { - self.selectFolder(self.displayed()); - } else { - self.selectRecent(); - } - }; - self.orderMedia.subscribe(selectFolderOrRecent); + }; + + self.selectFolder = function (folderPath) { + History.pushState({ action: 'displayFolder', folderPath: folderPath }, '', '?folderPath=' + folderPath); + self.displayFolder(folderPath); + }; + + self.selectRecent = function() { + History.pushState({ action: 'selectRecent' }, '', '?recent'); + + self.loadMediaItemsUrl = function (folderPath, skip, count, order, mediaType) { + return settings.recentMediaItemsActionUrl + '?skip=' + skip + '&count=' + count + '&order=' + order + '&mediaType=' + mediaType; + }; + + self.results([]); + self.displayed(null); + self.getMediaItems(pageCount); + }; + + self.toggleSelect = function(searchResult, force) { + var index = $.inArray(searchResult, self.selection()); + if (index == -1 || force) { + self.selection.remove(function(item) { return item.data.id == searchResult.data.id; }); + self.selection.push(searchResult); + searchResult.selected(true); + } else { + self.selection.remove(searchResult); + searchResult.selected(false); + } + + this.focus(searchResult); + }; + + self.select = function(searchResult) { + var index = $.inArray(searchResult, self.selection()); + if (index == -1) { + self.clearSelection(); + self.selection([searchResult]); + searchResult.selected(true); + } + + this.focus(searchResult); + }; + + self.scrolled = function(data, event) { + var elem = event.target; + if (elem.scrollTop > (elem.scrollHeight - elem.offsetHeight - 300)) { + self.getMediaItems(pageCount, true); + } + }; + + self.importMedia = function() { + var url = settings.importActionUrl + '?folderPath=' + encodeURIComponent(self.displayed()); + window.location = url; + }; + + var selectFolderOrRecent = function () { + if (self.displayed()) { + self.selectFolder(self.displayed()); + } else { + self.selectRecent(); + } + }; + self.orderMedia.subscribe(selectFolderOrRecent); self.mediaType.subscribe(selectFolderOrRecent); - } - - var viewModel = new mediaIndexViewModel(); - + } + + var viewModel = new mediaIndexViewModel(); + function mediaFolderViewModel(data) { var self = this; @@ -420,20 +420,20 @@ $(function () { var childTitles = $(elements).find(".media-library-folder-title"); attachFolderTitleDropEvent(childTitles); }; - } - + } + $.map(settings.childFolders, function (childFolder, index) { viewModel.mediaFolders.push(new mediaFolderViewModel(childFolder)); - }); - - enhanceViewModel(viewModel); - - ko.applyBindings(viewModel); - - if (settings.hasFolderPath) { - viewModel.displayFolder(settings.folderPath); - - //fetch displayed folder structure + }); + + enhanceViewModel(viewModel); + + ko.applyBindings(viewModel); + + if (settings.hasFolderPath) { + viewModel.displayFolder(settings.folderPath); + + //fetch displayed folder structure (function (displayedFolder) { var folders = viewModel.mediaFolders(); for (var x = 0; x < folders.length; x++) { @@ -444,125 +444,125 @@ $(function () { break; } } - })(settings.folderPath); - - History.pushState({ - action: 'displayFolder', - folderPath: settings.folderPath - }, '', '?folderPath=' + settings.folderPath); - } else { - viewModel.selectRecent(); - History.pushState({ action: 'selectRecent' }, '', '?recent'); - } - - window.onpopstate = function(event) { - if (event && event.state && event.state.action == 'displayFolder') { - viewModel.displayFolder(event.state.folder); - } - - if (event && event.state && event.state.action == 'selectRecent') { - viewModel.selectRecent(); - } - }; - - $("#media-library-main-list").on("mousedown", "li", function(e) { - // only for left click - if (e.which != 1) { - return; + })(settings.folderPath); + + History.pushState({ + action: 'displayFolder', + folderPath: settings.folderPath + }, '', '?folderPath=' + settings.folderPath); + } else { + viewModel.selectRecent(); + History.pushState({ action: 'selectRecent' }, '', '?recent'); + } + + window.onpopstate = function(event) { + if (event && event.state && event.state.action == 'displayFolder') { + viewModel.displayFolder(event.state.folder); } - - var searchResult = ko.dataFor(this); - if (e.ctrlKey) { - viewModel.toggleSelect(searchResult); - } else { - viewModel.select(searchResult); - } - }).on("contextmenu", "li", function() { - var searchResult = ko.dataFor(this); - viewModel.toggleSelect(searchResult); - return false; - }); - - $("#media-library-main-selection-select > .button-select").on('click', function() { - if (parent.$.colorbox) { - var selectedData = []; - for (var i = 0; i < viewModel.selection().length; i++) { - var selection = viewModel.selection()[i]; - selectedData.push(selection.data); - } - parent.$.colorbox.selectedData = selectedData; - parent.$.colorbox.close(); - } - ; - }); - - $("#media-library-main-selection-select > .button-cancel").on('click', function() { - if (parent.$.colorbox) { - parent.$.colorbox.selectedData = null; - parent.$.colorbox.close(); - } - ; + + if (event && event.state && event.state.action == 'selectRecent') { + viewModel.selectRecent(); + } + }; + + $("#media-library-main-list").on("mousedown", "li", function(e) { + // only for left click + if (e.which != 1) { + return; + } + + var searchResult = ko.dataFor(this); + if (e.ctrlKey) { + viewModel.toggleSelect(searchResult); + } else { + viewModel.select(searchResult); + } + }).on("contextmenu", "li", function() { + var searchResult = ko.dataFor(this); + viewModel.toggleSelect(searchResult); + return false; }); - $("#media-library-main-list").on("mouseover", ".media-thumbnail", function() { - if (!$(this).hasClass("ui-draggable")) { - $(this).draggable({ - revert: 'invalid', - //containment: 'li', - helper: function(event) { - var clone = $(event.currentTarget).clone().removeAttr('id'); - clone.removeClass('selected'); - clone.addClass('dragged-selection'); - - if (viewModel.selection().length > 1) { - clone.append($('

    ' + viewModel.selection().length + '

    ')); - } - - return clone; - - }, - cursor: 'move', - distance: 10, - appendTo: 'body', - create: function() { - // position the handler a little left to the center to let the number of selected items to appear - $(this).draggable("option", "cursorAt", { left: $(this).width() / 2 - 20, top: $(this).height() / 2 }); - } - }); - } - }); - - $('#delete-selection-button').click(function() { - if (!confirm(settings.deleteConfirmationMessage)) { - return false; - } - - var ids = []; - viewModel.selection().forEach(function(item) { ids.push(item.data.id); }); - var url = settings.deleteActionUrl; - - $.ajax({ - type: "POST", - url: url, - dataType: "json", - traditional: true, - data: { - mediaItemIds: ids, - __RequestVerificationToken: settings.antiForgeryToken - } - }).done(function(result) { - if (result) { - viewModel.results.remove(function(item) { - return ids.indexOf(item.data.id) != -1; - }); - - viewModel.clearSelection(); - } else { - console.log('failed to delete media items'); - } - return false; - }); - return false; - }); - })(window.mediaLibrarySettings); -}) + $("#media-library-main-selection-select > .button-select").on('click', function() { + if (parent.$.colorbox) { + var selectedData = []; + for (var i = 0; i < viewModel.selection().length; i++) { + var selection = viewModel.selection()[i]; + selectedData.push(selection.data); + } + parent.$.colorbox.selectedData = selectedData; + parent.$.colorbox.close(); + } + ; + }); + + $("#media-library-main-selection-select > .button-cancel").on('click', function() { + if (parent.$.colorbox) { + parent.$.colorbox.selectedData = null; + parent.$.colorbox.close(); + } + ; + }); + + $("#media-library-main-list").on("mouseover", ".media-thumbnail", function() { + if (!$(this).hasClass("ui-draggable")) { + $(this).draggable({ + revert: 'invalid', + //containment: 'li', + helper: function(event) { + var clone = $(event.currentTarget).clone().removeAttr('id'); + clone.removeClass('selected'); + clone.addClass('dragged-selection'); + + if (viewModel.selection().length > 1) { + clone.append($('

    ' + viewModel.selection().length + '

    ')); + } + + return clone; + + }, + cursor: 'move', + distance: 10, + appendTo: 'body', + create: function() { + // position the handler a little left to the center to let the number of selected items to appear + $(this).draggable("option", "cursorAt", { left: $(this).width() / 2 - 20, top: $(this).height() / 2 }); + } + }); + } + }); + + $('#delete-selection-button').click(function() { + if (!confirm(settings.deleteConfirmationMessage)) { + return false; + } + + var ids = []; + viewModel.selection().forEach(function(item) { ids.push(item.data.id); }); + var url = settings.deleteActionUrl; + + $.ajax({ + type: "POST", + url: url, + dataType: "json", + traditional: true, + data: { + mediaItemIds: ids, + __RequestVerificationToken: settings.antiForgeryToken + } + }).done(function(result) { + if (result) { + viewModel.results.remove(function(item) { + return ids.indexOf(item.data.id) != -1; + }); + + viewModel.clearSelection(); + } else { + console.log('failed to delete media items'); + } + return false; + }); + return false; + }); + })(window.mediaLibrarySettings); +}) From 5a633330eba6644e24d2b6a18f15305fd8798338 Mon Sep 17 00:00:00 2001 From: Sipke Schoorstra Date: Mon, 28 Jul 2014 17:17:32 -0700 Subject: [PATCH 3/5] Adding PromptOnNavigate option. --- .../Scripts/media-library-picker.js | 33 ++++++++++--------- .../Fields/MediaLibraryPicker.Edit.cshtml | 3 +- .../Views/MediaLibraryPicker.cshtml | 6 ++-- 3 files changed, 24 insertions(+), 18 deletions(-) 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 index e451a07bd..27110b0c0 100644 --- a/src/Orchard.Web/Modules/Orchard.MediaLibrary/Scripts/media-library-picker.js +++ b/src/Orchard.Web/Modules/Orchard.MediaLibrary/Scripts/media-library-picker.js @@ -10,6 +10,7 @@ var pipe = element.data("pipe"); var returnUrl = element.data("return-url"); var addUrl = element.data("add-url"); + var promptOnNavigate = element.data("prompt-on-navigate"); var addButton = element.find(".button.add"); var template = '
  • {thumbnail}

    {title}

    ' + removeText + '' + pipe + '' + editText + '
    • '; @@ -30,21 +31,23 @@ 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; - }); + + if (promptOnNavigate) { + 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(); 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 33ecc2ecd..e7ff51031 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 @@ -9,4 +9,5 @@ Multiple: settings.Multiple, Required: settings.Required, Hint: settings.Hint, - ContentItems: Model.ContentItems) \ No newline at end of file + ContentItems: Model.ContentItems, + PromptOnNavigate: true) \ 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 index b5a7bb466..d5dc16ee5 100644 --- a/src/Orchard.Web/Modules/Orchard.MediaLibrary/Views/MediaLibraryPicker.cshtml +++ b/src/Orchard.Web/Modules/Orchard.MediaLibrary/Views/MediaLibraryPicker.cshtml @@ -13,6 +13,7 @@ var multiple = (bool)(Model.Multiple ?? false); var required = (bool)(Model.Required ?? false); var hint = (string) Model.Hint; + var promptOnNavigate = (bool) (Model.PromptOnNavigate ?? true); var contentItems = (IEnumerable)Model.ContentItems ?? Enumerable.Empty(); var contentManager = WorkContext.Resolve(); } @@ -25,8 +26,9 @@ data-dirty-text="@T("You have unsaved changes. Please only accept to leave if you don't mind losing those changes.")" data-pipe="@T(" | ")" data-add-url="@HttpUtility.JavaScriptStringEncode(Url.Action("Index", "Admin", new { area = "Orchard.MediaLibrary", dialog = true }))" - data-return-url="@HttpUtility.JavaScriptStringEncode(Request.RawUrl)"> - + data-return-url="@HttpUtility.JavaScriptStringEncode(Request.RawUrl)" + data-prompt-on-navigate="@promptOnNavigate.ToString().ToLower()"> +
    @T("You need to save your changes.")
      From 658aa8384db97e3aaf1e889876158d9dd10bcf8d Mon Sep 17 00:00:00 2001 From: Sipke Schoorstra Date: Mon, 28 Jul 2014 17:58:31 -0700 Subject: [PATCH 4/5] Bugfixing. The "showSaveMsg" function needs to be there regardless of the "promptOnNavigate" value. --- .../Scripts/media-library-picker.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) 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 index 27110b0c0..3af7a7e9b 100644 --- a/src/Orchard.Web/Modules/Orchard.MediaLibrary/Scripts/media-library-picker.js +++ b/src/Orchard.Web/Modules/Orchard.MediaLibrary/Scripts/media-library-picker.js @@ -32,12 +32,14 @@ } }; - if (promptOnNavigate) { - window.mediaLibraryDirty = false; - var showSaveMsg = function() { - element.find('.media-library-picker-message').show(); - window.mediaLibraryDirty = true; - }; + var showSaveMsg = function () { + element.find('.media-library-picker-message').show(); + window.mediaLibraryDirty = true; + }; + + window.mediaLibraryDirty = false; + + if (promptOnNavigate) { if (!window.mediaLibraryNavigateAway) { $(window).on("beforeunload", window.mediaLibraryNavigateAway = function() { if (window.mediaLibraryDirty) { From e50c2e1d398d7850f3442343d5d304fded02117e Mon Sep 17 00:00:00 2001 From: Sipke Schoorstra Date: Mon, 28 Jul 2014 18:13:28 -0700 Subject: [PATCH 5/5] Adding ShowSaveWarning option. --- .../Orchard.MediaLibrary/Scripts/media-library-picker.js | 4 ++++ .../EditorTemplates/Fields/MediaLibraryPicker.Edit.cshtml | 3 ++- .../Orchard.MediaLibrary/Views/MediaLibraryPicker.cshtml | 4 +++- 3 files changed, 9 insertions(+), 2 deletions(-) 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 index 3af7a7e9b..d98a34979 100644 --- a/src/Orchard.Web/Modules/Orchard.MediaLibrary/Scripts/media-library-picker.js +++ b/src/Orchard.Web/Modules/Orchard.MediaLibrary/Scripts/media-library-picker.js @@ -11,6 +11,7 @@ var returnUrl = element.data("return-url"); var addUrl = element.data("add-url"); var promptOnNavigate = element.data("prompt-on-navigate"); + var showSaveWarning = element.data("show-save-warning"); var addButton = element.find(".button.add"); var template = '
    • {thumbnail}

      {title}

      ' + removeText + '' + pipe + '' + editText + '
      • '; @@ -33,6 +34,9 @@ }; var showSaveMsg = function () { + if (!showSaveWarning) + return; + element.find('.media-library-picker-message').show(); window.mediaLibraryDirty = true; }; 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 e7ff51031..9a0f21f4d 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 @@ -10,4 +10,5 @@ Required: settings.Required, Hint: settings.Hint, ContentItems: Model.ContentItems, - PromptOnNavigate: true) \ No newline at end of file + PromptOnNavigate: true, + ShowSaveWarning: true) \ 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 index d5dc16ee5..f4927c98c 100644 --- a/src/Orchard.Web/Modules/Orchard.MediaLibrary/Views/MediaLibraryPicker.cshtml +++ b/src/Orchard.Web/Modules/Orchard.MediaLibrary/Views/MediaLibraryPicker.cshtml @@ -14,6 +14,7 @@ var required = (bool)(Model.Required ?? false); var hint = (string) Model.Hint; var promptOnNavigate = (bool) (Model.PromptOnNavigate ?? true); + var showSaveWarning = (bool)(Model.ShowSaveWarning); var contentItems = (IEnumerable)Model.ContentItems ?? Enumerable.Empty(); var contentManager = WorkContext.Resolve(); } @@ -27,7 +28,8 @@ data-pipe="@T(" | ")" data-add-url="@HttpUtility.JavaScriptStringEncode(Url.Action("Index", "Admin", new { area = "Orchard.MediaLibrary", dialog = true }))" data-return-url="@HttpUtility.JavaScriptStringEncode(Request.RawUrl)" - data-prompt-on-navigate="@promptOnNavigate.ToString().ToLower()"> + data-prompt-on-navigate="@promptOnNavigate.ToString().ToLower()" + data-show-save-warning="@showSaveWarning.ToString().ToLower()">
      @T("You need to save your changes.")