mirror of
https://github.com/OrchardCMS/Orchard.git
synced 2025-10-15 19:54:57 +08:00
#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:

committed by
Nicholas Mayne

parent
13619b6d54
commit
ed315c4535
@@ -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({
|
||||
|
@@ -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>
|
||||
|
Reference in New Issue
Block a user