diff --git a/src/Umbraco.Web.UI/umbraco_client/FolderBrowser/Css/folderbrowser.css b/src/Umbraco.Web.UI/umbraco_client/FolderBrowser/Css/folderbrowser.css index 686b7602f5..4d1e7e44cc 100644 --- a/src/Umbraco.Web.UI/umbraco_client/FolderBrowser/Css/folderbrowser.css +++ b/src/Umbraco.Web.UI/umbraco_client/FolderBrowser/Css/folderbrowser.css @@ -129,7 +129,12 @@ } .umbFolderBrowser .items li { - display: block; + display: inline-block; +} + +.umbFolderBrowser .items li div { + display: inline-block; + position: relative; list-style: none; margin: 5px; padding: 0; @@ -142,6 +147,7 @@ -moz-box-shadow: 2px 2px 2px #e0e0e0; -webkit-box-shadow: 2px 2px 2px #e0e0e0; box-shadow: 2px 2px 2px #e0e0e0; + cursor: pointer; } .umbFolderBrowser .img { @@ -167,4 +173,30 @@ vertical-align: middle; max-width: 100px; max-height: 100px; +} + +.umbFolderBrowser .items li.selected div { + background: #D5EFFC; + border-color: #99DEFD; +} + +.umbFolderBrowser .items li.selected .img { + background: #99DEFD; +} + +.umbFolderBrowser .items.ui-sortable-dragging li.selected { + display: none !important; +} + +.umbFolderBrowser .items.ui-sortable-dragging li.ui-sortable-helper, +.umbFolderBrowser .items.ui-sortable-dragging li.ui-sortable-placeholder { + display: inline-block !important; +} + +.umbFolderBrowser .items li.ui-sortable-helper div { + border: dotted 5px #99DEFD; +} + +.umbFolderBrowser .items li.ui-sortable-helper span { + display: none !important; } \ No newline at end of file diff --git a/src/Umbraco.Web.UI/umbraco_client/FolderBrowser/Js/folderbrowser.js b/src/Umbraco.Web.UI/umbraco_client/FolderBrowser/Js/folderbrowser.js index 29df398007..eda2ae45ea 100644 --- a/src/Umbraco.Web.UI/umbraco_client/FolderBrowser/Js/folderbrowser.js +++ b/src/Umbraco.Web.UI/umbraco_client/FolderBrowser/Js/folderbrowser.js @@ -3,6 +3,27 @@ Umbraco.Sys.registerNamespace("Umbraco.Controls"); (function ($, Base, window, document, undefined) { + var itemMappingOptions = { + 'create': function(o) { + var item = ko.mapping.fromJS(o.data); + item.selected = ko.observable(false); + item.toggleSelected = function (itm, e) { + + if (this.selected()) + return; + + if (!e.ctrlKey) { + for (var i = 0; i < o.parent().length; i++) { + o.parent()[i].selected(false); + } + } + + this.selected(true); + }; + return item; + } + }; + Umbraco.Controls.FolderBrowser = Base.extend({ // Private @@ -18,7 +39,7 @@ Umbraco.Sys.registerNamespace("Umbraco.Controls"); $.getJSON(self._opts.basePath + "/FolderBrowserService/GetChildNodes/" + self._parentId + "/" + self._viewModel.filterTerm(), function (data) { if (data != undefined && data.length > 0) { - ko.mapping.fromJS(data, {}, self._viewModel.items); + ko.mapping.fromJS(data, itemMappingOptions, self._viewModel.items); } else { self._viewModel.items([]); } @@ -33,14 +54,14 @@ Umbraco.Sys.registerNamespace("Umbraco.Controls"); return item.Id() === id; }); - return results.length == 1 ? results[0] : null; + return results.length == 1 ? results[0] : undefined; }, _editItem: function (id) { var self = this; var item = self._getItemById(id); - if (item === null) + if (item === undefined) throw Error("No item found with the id: " + id); window.location.href = "editMedia.aspx?id="+ item.Id(); @@ -50,7 +71,7 @@ Umbraco.Sys.registerNamespace("Umbraco.Controls"); var self = this; var item = self._getItemById(id); - if (item === null) + if (item === undefined) throw Error("No item found with the id: " + id); window.open(item.FileUrl(), "Download"); @@ -158,6 +179,7 @@ Umbraco.Sys.registerNamespace("Umbraco.Controls"); instructions + "
" + "" + "" + + "" + + "" + "Cancel" + "" + ""); @@ -221,6 +245,10 @@ Umbraco.Sys.registerNamespace("Umbraco.Controls"); $("#fileupload").fileUploader("uploadAll"); }); + $(".upload-overlay #overwriteExisting").click(function() { + $("input[name=overwriteExisting]").val($(this).is(":checked")); + }); + $(".upload-overlay .cancel").click(function (e) { e.preventDefault(); $("#fileupload").fileUploader("cancelAll"); @@ -272,6 +300,45 @@ Umbraco.Sys.registerNamespace("Umbraco.Controls"); animation: { show: "fadeIn", hide: "fadeOut" } }); }, + + _initItems: function () + { + var self = this; + + $(".umbFolderBrowser .items").sortable({ + helper: "clone", + opacity: 0.6 , + start: function (e, ui) { + // Add dragging class to container + $(".umbFolderBrowser .items").addClass("ui-sortable-dragging"); + + $(".umbFolderBrowser .items .ui-sortable-helper span").removeAttr("data-bind").text("Moving 1 item"); + }, + update: function (e, ui) { + //var oldIndex = self._viewModel.items.indexOf(self._viewModel.tempItem()); + var newIndex = ui.item.index(); + + $(".umbFolderBrowser .items .selected").sort(function (a,b) { + return parseInt($(a).data("order")) > parseInt($(b).data("order")) ? 1 : -1; + }).each(function(idx, itm) { + var id = $(itm).data("id"); + var item = self._getItemById(id); + if (item !== undefined) { + var oldIndex = self._viewModel.items.indexOf(item); + + // Update the index of the current item in the array + self._viewModel.items.splice((newIndex + idx), 0, self._viewModel.items.splice(oldIndex, 1)[0]); + } + }); + + }, + stop: function (e, ui) { + // Remove dragging class from container + $(".umbFolderBrowser .items").removeClass("ui-sortable-dragging"); + //TODO: Update on server + } + }); + }, // Constructor constructor: function (el, opts) @@ -294,6 +361,7 @@ Umbraco.Sys.registerNamespace("Umbraco.Controls"); self._initToolbar(); self._initOverlay(); self._initContextMenu(); + self._initItems(); // Bind the viewmodel ko.applyBindings(self._viewModel, el); diff --git a/src/Umbraco.Web.UI/web.Template.MBP13-PC.Debug.config b/src/Umbraco.Web.UI/web.Template.MBP13-PC.Debug.config index 2b61058024..c6c8dac313 100644 --- a/src/Umbraco.Web.UI/web.Template.MBP13-PC.Debug.config +++ b/src/Umbraco.Web.UI/web.Template.MBP13-PC.Debug.config @@ -18,7 +18,7 @@