Media Library: Code styling in media-library.js

This commit is contained in:
Lombiq
2019-05-23 17:55:22 +02:00
committed by Benedek Farkas
parent 40e56c5dd9
commit 9cafbb82c6
2 changed files with 55 additions and 55 deletions

View File

@@ -1,15 +1,15 @@
var enhanceViewModel = function(viewModel) { var enhanceViewModel = function (viewModel) {
// extension point for other modules to alter the view model // extension point for other modules to alter the view model
}; };
var baseViewModel = function() { var baseViewModel = function () {
}; };
$(function () { $(function () {
(function (settings) { (function (settings) {
function attachFolderTitleDropEvent (elements) { function attachFolderTitleDropEvent(elements) {
elements.droppable({ elements.droppable({
accept: function () { accept: function () {
var targetId = $(this).data('term-id'); var targetId = $(this).data('term-id');
@@ -105,7 +105,7 @@ $(function () {
self.selected = ko.observable(); self.selected = ko.observable();
self.status = ko.observable(''); self.status = ko.observable('');
self.summary = ko.observable(''); self.summary = ko.observable('');
self.cssClass = ko.computed(function() { self.cssClass = ko.computed(function () {
var css = ''; var css = '';
if (self.selected()) { if (self.selected()) {
css += ' selected'; css += ' selected';
@@ -118,12 +118,12 @@ $(function () {
return css; return css;
}); });
self.publicationStatus = ko.computed(function() { self.publicationStatus = ko.computed(function () {
return self.data.published ? "" : draftText; return self.data.published ? "" : draftText;
}); });
// operations // operations
self.setData = function(value) { self.setData = function (value) {
self.data = value; self.data = value;
}; };
} }
@@ -171,7 +171,7 @@ $(function () {
self.getMediaItems = function (count, append) { self.getMediaItems = function (count, append) {
var folderPath = self.displayed() || ''; var folderPath = self.displayed() || '';
if (self.mediaPendingRequest()) { if (self.mediaPendingRequest()) {
return; return;
} }
@@ -188,12 +188,12 @@ $(function () {
var url = self.loadMediaItemsUrl(folderPath, self.results().length, count, self.orderMedia(), self.mediaType()); var url = self.loadMediaItemsUrl(folderPath, self.results().length, count, self.orderMedia(), self.mediaType());
console.log(url); console.log(url);
$.ajax({ $.ajax({
type: "GET", type: "GET",
url: url, url: url,
cache: false cache: false
}).done(function(data) { }).done(function (data) {
var mediaItems = data.mediaItems; var mediaItems = data.mediaItems;
var mediaItemsFolderPath = data.folderPath; var mediaItemsFolderPath = data.folderPath;
@@ -214,9 +214,9 @@ $(function () {
} }
} }
} }
}).fail(function(data) { }).fail(function (data) {
console.error(data); console.error(data);
}).always(function() { }).always(function () {
self.pendingRequest(false); self.pendingRequest(false);
}); });
}; };
@@ -225,30 +225,30 @@ $(function () {
self.results().forEach(function (item) { self.results().forEach(function (item) {
viewModel.toggleSelect(item, true); viewModel.toggleSelect(item, true);
}); });
} };
self.clearSelection = function() { self.clearSelection = function () {
this.focus(null); this.focus(null);
// unselect previous elements // unselect previous elements
self.selection().forEach(function(item) { self.selection().forEach(function (item) {
item.selected(false); item.selected(false);
}); });
self.selection([]); self.selection([]);
}; };
self.focus.subscribe(function(oldValue) { self.focus.subscribe(function (oldValue) {
if (oldValue) { if (oldValue) {
oldValue.hasFocus(false); oldValue.hasFocus(false);
} }
}, this, "beforeChange"); }, this, "beforeChange");
self.afterRenderMediaFolderTemplate = function(elements, model) { self.afterRenderMediaFolderTemplate = function (elements, model) {
var childTitles = $(elements).find(".media-library-folder-title"); var childTitles = $(elements).find(".media-library-folder-title");
attachFolderTitleDropEvent(childTitles); attachFolderTitleDropEvent(childTitles);
}; };
self.focus.subscribe(function(newValue) { self.focus.subscribe(function (newValue) {
if (newValue) { if (newValue) {
newValue.hasFocus(true); newValue.hasFocus(true);
@@ -261,21 +261,21 @@ $(function () {
type: "GET", type: "GET",
url: url, url: url,
cache: false cache: false
}).done(function(data) { }).done(function (data) {
newValue.summary(data); newValue.summary(data);
}); });
} }
} }
}); });
self.displayFolder = function(folderPath) { self.displayFolder = function (folderPath) {
self.results([]); self.results([]);
self.displayed(folderPath); self.displayed(folderPath);
self.loadMediaItemsUrl = function (f, skip, count, order, mediaType) { self.loadMediaItemsUrl = function (f, skip, count, order, mediaType) {
return settings.mediaItemsActionUrl + '?folderPath=' + encodeURIComponent(f) + '&skip=' + skip + '&count=' + count + '&order=' + order + '&mediaType=' + mediaType; return settings.mediaItemsActionUrl + '?folderPath=' + encodeURIComponent(f) + '&skip=' + skip + '&count=' + count + '&order=' + order + '&mediaType=' + mediaType;
}; };
self.getMediaItems(pageCount); self.getMediaItems(pageCount);
}; };
@@ -284,22 +284,22 @@ $(function () {
self.displayFolder(folderPath); self.displayFolder(folderPath);
}; };
self.selectRecent = function() { self.selectRecent = function () {
History.pushState({ action: 'selectRecent' }, '', '?recent'); History.pushState({ action: 'selectRecent' }, '', '?recent');
self.loadMediaItemsUrl = function (folderPath, skip, count, order, mediaType) { self.loadMediaItemsUrl = function (folderPath, skip, count, order, mediaType) {
return settings.recentMediaItemsActionUrl + '?skip=' + skip + '&count=' + count + '&order=' + order + '&mediaType=' + mediaType; return settings.recentMediaItemsActionUrl + '?skip=' + skip + '&count=' + count + '&order=' + order + '&mediaType=' + mediaType;
}; };
self.results([]); self.results([]);
self.displayed(null); self.displayed(null);
self.getMediaItems(pageCount); self.getMediaItems(pageCount);
}; };
self.toggleSelect = function(searchResult, force) { self.toggleSelect = function (searchResult, force) {
var index = $.inArray(searchResult, self.selection()); var index = $.inArray(searchResult, self.selection());
if (index == -1 || force) { if (index == -1 || force) {
self.selection.remove(function(item) { return item.data.id == searchResult.data.id; }); self.selection.remove(function (item) { return item.data.id == searchResult.data.id; });
self.selection.push(searchResult); self.selection.push(searchResult);
searchResult.selected(true); searchResult.selected(true);
} else { } else {
@@ -310,7 +310,7 @@ $(function () {
this.focus(searchResult); this.focus(searchResult);
}; };
self.select = function(searchResult) { self.select = function (searchResult) {
var index = $.inArray(searchResult, self.selection()); var index = $.inArray(searchResult, self.selection());
if (index == -1) { if (index == -1) {
self.clearSelection(); self.clearSelection();
@@ -321,14 +321,14 @@ $(function () {
this.focus(searchResult); this.focus(searchResult);
}; };
self.scrolled = function(data, event) { self.scrolled = function (data, event) {
var elem = event.target; var elem = event.target;
if (elem.scrollTop > (elem.scrollHeight - elem.offsetHeight - 300)) { if (elem.scrollTop > (elem.scrollHeight - elem.offsetHeight - 300)) {
self.getMediaItems(pageCount, true); self.getMediaItems(pageCount, true);
} }
}; };
self.importMedia = function() { self.importMedia = function () {
var url = settings.importActionUrl + '?folderPath=' + encodeURIComponent(self.displayed()); var url = settings.importActionUrl + '?folderPath=' + encodeURIComponent(self.displayed());
window.location = url; window.location = url;
}; };
@@ -372,13 +372,13 @@ $(function () {
self.isExpanded = ko.observable(false); self.isExpanded = ko.observable(false);
self.isSelected = ko.computed(function() { self.isSelected = ko.computed(function () {
return (self.mediaIndexViewModel.displayed() == self.folderPath()); return (self.mediaIndexViewModel.displayed() == self.folderPath());
}); });
self.fetchChildren = function (deepestChildPath) { self.fetchChildren = function (deepestChildPath) {
self.childFoldersFetchStatus = 1; self.childFoldersFetchStatus = 1;
var getChildFolderListUrl = function (f) { var getChildFolderListUrl = function (f) {
return settings.childFolderListingActionUrl + '?folderPath=' + encodeURIComponent(f); return settings.childFolderListingActionUrl + '?folderPath=' + encodeURIComponent(f);
}; };
@@ -454,7 +454,7 @@ $(function () {
}); });
enhanceViewModel(viewModel); enhanceViewModel(viewModel);
ko.applyBindings(viewModel); ko.applyBindings(viewModel);
if (settings.hasFolderPath && settings.folderPath != settings.rootFolderPath) { if (settings.hasFolderPath && settings.folderPath != settings.rootFolderPath) {
@@ -482,7 +482,7 @@ $(function () {
History.pushState({ action: 'selectRecent' }, '', '?recent'); History.pushState({ action: 'selectRecent' }, '', '?recent');
} }
window.onpopstate = function(event) { window.onpopstate = function (event) {
if (event && event.state && event.state.action == 'displayFolder') { if (event && event.state && event.state.action == 'displayFolder') {
viewModel.displayFolder(event.state.folder); viewModel.displayFolder(event.state.folder);
} }
@@ -492,7 +492,7 @@ $(function () {
} }
}; };
$("#media-library-main-list").on("mousedown", "li", function(e) { $("#media-library-main-list").on("mousedown", "li", function (e) {
// only for left click // only for left click
if (e.which != 1) { if (e.which != 1) {
return; return;
@@ -504,37 +504,37 @@ $(function () {
} else { } else {
viewModel.select(searchResult); viewModel.select(searchResult);
} }
}).on("contextmenu", "li", function() { }).on("contextmenu", "li", function () {
var searchResult = ko.dataFor(this); var searchResult = ko.dataFor(this);
viewModel.toggleSelect(searchResult); viewModel.toggleSelect(searchResult);
return false; return false;
}); });
var pickAndClose = function () { var pickAndClose = function () {
if (parent.$.colorbox) { if (parent.$.colorbox) {
var selectedData = []; var selectedData = [];
for (var i = 0; i < viewModel.selection().length; i++) { for (var i = 0; i < viewModel.selection().length; i++) {
var selection = viewModel.selection()[i]; var selection = viewModel.selection()[i];
selectedData.push(selection.data); selectedData.push(selection.data);
} }
parent.$.colorbox.selectedData = selectedData; parent.$.colorbox.selectedData = selectedData;
parent.$.colorbox.close(); parent.$.colorbox.close();
}; };
} };
$("#media-library-main-selection-select > .button-select").on('click', function () { $("#media-library-main-selection-select > .button-select").on('click', function () {
pickAndClose(); pickAndClose();
}); });
$("#media-library-toolbar > .button-select-all").on('click', function () { $("#select-all-button").on('click', function () {
viewModel.selectAll(); viewModel.selectAll();
}); });
$("#media-library-main-list").on('dblclick', function () { $("#media-library-main-list").on('dblclick', function () {
pickAndClose(); pickAndClose();
}); });
$("#media-library-main-selection-select > .button-cancel").on('click', function() { $("#media-library-main-selection-select > .button-cancel").on('click', function () {
if (parent.$.colorbox) { if (parent.$.colorbox) {
parent.$.colorbox.selectedData = null; parent.$.colorbox.selectedData = null;
parent.$.colorbox.close(); parent.$.colorbox.close();
@@ -542,12 +542,12 @@ $(function () {
; ;
}); });
$("#media-library-main-list").on("mouseover", ".media-thumbnail", function() { $("#media-library-main-list").on("mouseover", ".media-thumbnail", function () {
if (!$(this).hasClass("ui-draggable")) { if (!$(this).hasClass("ui-draggable")) {
$(this).draggable({ $(this).draggable({
revert: 'invalid', revert: 'invalid',
//containment: 'li', //containment: 'li',
helper: function(event) { helper: function (event) {
var clone = $(event.currentTarget).clone().removeAttr('id'); var clone = $(event.currentTarget).clone().removeAttr('id');
clone.removeClass('selected'); clone.removeClass('selected');
clone.addClass('dragged-selection'); clone.addClass('dragged-selection');
@@ -562,7 +562,7 @@ $(function () {
cursor: 'move', cursor: 'move',
distance: 10, distance: 10,
appendTo: 'body', appendTo: 'body',
create: function() { create: function () {
// position the handler a little left to the center to let the number of selected items to appear // 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 }); $(this).draggable("option", "cursorAt", { left: $(this).width() / 2 - 20, top: $(this).height() / 2 });
} }
@@ -570,13 +570,13 @@ $(function () {
} }
}); });
$('#delete-selection-button').click(function() { $('#delete-selection-button').click(function () {
if (!confirm(settings.deleteConfirmationMessage)) { if (!confirm(settings.deleteConfirmationMessage)) {
return false; return false;
} }
var ids = []; var ids = [];
viewModel.selection().forEach(function(item) { ids.push(item.data.id); }); viewModel.selection().forEach(function (item) { ids.push(item.data.id); });
var url = settings.deleteActionUrl; var url = settings.deleteActionUrl;
$.ajax({ $.ajax({
@@ -588,9 +588,9 @@ $(function () {
mediaItemIds: ids, mediaItemIds: ids,
__RequestVerificationToken: settings.antiForgeryToken __RequestVerificationToken: settings.antiForgeryToken
} }
}).done(function(result) { }).done(function (result) {
if (result) { if (result) {
viewModel.results.remove(function(item) { viewModel.results.remove(function (item) {
return ids.indexOf(item.data.id) != -1; return ids.indexOf(item.data.id) != -1;
}); });

View File

@@ -22,7 +22,7 @@
<a href="#" data-bind="attr: { href: '@HttpUtility.JavaScriptStringEncode(Url.Action("Create", "Folder", new { area = "Orchard.MediaLibrary"}))?folderPath=' + encodeURIComponent(displayed() ? displayed() : '') }" class="button" id="button-create-folder">@T("Create Folder")</a> <a href="#" data-bind="attr: { href: '@HttpUtility.JavaScriptStringEncode(Url.Action("Create", "Folder", new { area = "Orchard.MediaLibrary"}))?folderPath=' + encodeURIComponent(displayed() ? displayed() : '') }" class="button" id="button-create-folder">@T("Create Folder")</a>
@Display(Model.CustomActionsShapes) @Display(Model.CustomActionsShapes)
<button class="button-select-all">@T("Select All")</button> <button class="button" id="select-all-button">@T("Select All")</button>
</div> </div>
<div id="media-library-main"> <div id="media-library-main">
<div id="media-library-main-navigation"> <div id="media-library-main-navigation">