#20600: Dynamically attaching folder drop event

Work Item: 20600

Conflicts:
	src/Orchard.Web/Modules/Orchard.MediaLibrary/Views/Admin/Index.cshtml
This commit is contained in:
Stanley Goldman
2014-04-03 20:32:32 -04:00
committed by Nicholas Mayne
parent 13619b6d54
commit ed315c4535
2 changed files with 76 additions and 64 deletions

View File

@@ -9,6 +9,66 @@ var baseViewModel = function() {
$(function () {
(function (settings) {
function attachFolderTitleDropEvent (elements) {
elements.droppable({
accept: function () {
var targetId = $(this).data('term-id');
return targetId != viewModel.displayed();
},
over: function (event, ui) {
$(ui.helper).addClass('over');
$(this).addClass('dropping');
},
out: function (event, ui) {
$(ui.helper).removeClass('over');
$(this).removeClass('dropping');
},
tolerance: "pointer",
drop: function () {
$(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);
$.ajax({
type: "POST",
url: url,
dataType: "json",
traditional: true,
data: {
folderPath: folderPath,
mediaItemIds: ids,
__RequestVerificationToken: settings.antiForgeryToken
},
}).done(function (result) {
if (result) {
if (viewModel.displayed()) {
viewModel.results.remove(function (item) {
return ids.indexOf(item.data.id) != -1;
});
}
viewModel.clearSelection();
} else {
alert(errorMessage);
console.log('failed to move media items: ' + result.toString());
}
}).fail(function (result) {
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();
@@ -171,8 +231,13 @@ $(function () {
if (oldValue) {
oldValue.hasFocus(false);
}
}, this, "beforeChange");
}, this, "beforeChange");
self.afterRenderMediaFolderTemplate = function(elements, model) {
var childTitles = $(elements).find(".media-library-folder-title");
attachFolderTitleDropEvent(childTitles);
};
self.focus.subscribe(function(newValue) {
if (newValue) {
newValue.hasFocus(true);
@@ -376,6 +441,11 @@ $(function () {
self.isExpanded(true);
}
};
self.afterRenderMediaFolderTemplate = function (elements, model) {
var childTitles = $(elements).find(".media-library-folder-title");
attachFolderTitleDropEvent(childTitles);
};
}
$.map(settings.childFolders, function (childFolder, index) {
@@ -446,66 +516,8 @@ $(function () {
parent.$.colorbox.close();
}
;
});
$(".media-library-folder-title").droppable({
accept: function() {
var targetId = $(this).data('term-id');
return targetId != viewModel.displayed();
},
over: function(event, ui) {
$(ui.helper).addClass('over');
$(this).addClass('dropping');
},
out: function(event, ui) {
$(ui.helper).removeClass('over');
$(this).removeClass('dropping');
},
tolerance: "pointer",
drop: function() {
$(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);
$.ajax({
type: "POST",
url: url,
dataType: "json",
traditional: true,
data: {
folderPath: folderPath,
mediaItemIds: ids,
__RequestVerificationToken: settings.antiForgeryToken
},
}).done(function(result) {
if (result) {
if (viewModel.displayed()) {
viewModel.results.remove(function(item) {
return ids.indexOf(item.data.id) != -1;
});
}
viewModel.clearSelection();
} else {
alert(errorMessage);
console.log('failed to move media items: ' + result.toString());
}
}).fail(function (result) {
alert(errorMessage);
console.log('failed to move media items: ' + result.toString());
});
}
});
});
$("#media-library-main-list").on("mouseover", ".media-thumbnail", function() {
if (!$(this).hasClass("ui-draggable")) {
$(this).draggable({

View File

@@ -30,7 +30,7 @@
@Display(Model.CustomNavigationShapes)
<li id="media-library-main-navigation-tree">
<ul data-bind="template: { name: 'media-folder-template', foreach: mediaFolders }">
<ul data-bind="template: { name: 'media-folder-template', foreach: mediaFolders, afterRender: afterRenderMediaFolderTemplate}">
</ul>
</li>
</ul>
@@ -109,7 +109,7 @@ var mediaLibrarySettings = {
<div class="media-library-folder-title" data-bind="click: folderClicked, attr: { 'data-media-path': folderPath() }, css: {selected: isSelected()}">
<a href="#" class="media-library-navigation-folder-link"><i data-bind=" css: {'icon-folder-open-alt': isExpanded(), 'icon-folder-close-alt': !isExpanded()}"></i><span data-bind=" text: name"></span></a>
</div>
<ul data-bind="template: { name: 'media-folder-template', foreach: childFolders}, visible: childFolders().length > 0">
<ul data-bind="template: { name: 'media-folder-template', foreach: childFolders}, afterRender: afterRenderMediaFolderTemplate}, visible: childFolders().length > 0">
</ul>
</div>
</li>