Skip to content

Commit

Permalink
Add copy logic to Media Picker (umbraco#9957)
Browse files Browse the repository at this point in the history 
* Add copy logic to Media Picker

* Add action for copy all

* Fix for selectable media item
  • Loading branch information
@patrickdemooij9
patrickdemooij9 committed Mar 15, 2021
1 parent b7c1ad2 commit f7c032a
Show file tree
Hide file tree
Showing 7 changed files with 291 additions and 149 deletions.
43 changes: 42 additions & 1 deletion src/Umbraco.Web.UI.Client/src/common/services/clipboard.service.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ function clipboardService($window, notificationsService, eventsService, localSto
const TYPES = {};
TYPES.ELEMENT_TYPE = "elementType";
TYPES.BLOCK = "block";
TYPES.IMAGE = "image";
TYPES.RAW = "raw";

var clearPropertyResolvers = {};
Expand Down Expand Up @@ -284,7 +285,7 @@ function clipboardService($window, notificationsService, eventsService, localSto
*
* @param {string} type A string defining the type of data to storing, example: 'elementType', 'contentNode'
* @param {string} alias A string defining the alias of the data to store, example: 'product'
* @param {object} entry A object containing the properties to be saved, this could be the object of a ElementType, ContentNode, ...
* @param {object} data A object containing the properties to be saved, this could be the object of a ElementType, ContentNode, ...
* @param {string} displayLabel (optional) A string swetting the label to display when showing paste entries.
* @param {string} displayIcon (optional) A string setting the icon to display when showing paste entries.
* @param {string} uniqueKey (optional) A string prodiving an identifier for this entry, existing entries with this key will be removed to ensure that you only have the latest copy of this data.
Expand Down Expand Up @@ -318,6 +319,46 @@ function clipboardService($window, notificationsService, eventsService, localSto

};

/**
* @ngdoc method
* @name umbraco.services.clipboardService#copy
* @methodOf umbraco.services.clipboardService
*
* @param {string} type A string defining the type of data to storing, example: 'elementType', 'contentNode'
* @param {string} alias A string defining the alias of the data to store, example: 'product'
* @param {object[]} data An array of objects containing the properties to be saved, this could be the object of a ElementType, ContentNode, ...
*
* @description
* Saves multiple JS-object to the clipboard.
*/
service.copyMultiple = function (type, alias, data, firstLevelClearupMethod) {

var storage = retriveStorage();

data.forEach(item => {
var displayLabel = item.displayLabel || item.name;
var displayIcon = item.displayIcon || iconHelper.convertFromLegacyIcon(item.icon);
var uniqueKey = item.uniqueKey || item.key || console.error("missing unique key for this content");

// remove previous copies of this entry:
storage.entries = storage.entries.filter(
(entry) => {
return entry.unique !== uniqueKey;
}
);

var entry = { unique: uniqueKey, type: type, alias: alias, data: prepareEntryForStorage(type, item, firstLevelClearupMethod), label: displayLabel, icon: displayIcon, date: Date.now() };
storage.entries.push(entry);
});

if (saveStorage(storage) === true) {
notificationsService.success("Clipboard", "Copied to clipboard.");
} else {
notificationsService.error("Clipboard", "Couldnt copy this data to clipboard.");
}

};


/**
* @ngdoc method
Expand Down
76 changes: 63 additions & 13 deletions ...raco.Web.UI.Client/src/views/common/infiniteeditors/mediapicker/mediapicker.controller.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
//used for the media picker dialog
angular.module("umbraco")
.controller("Umbraco.Editors.MediaPickerController",
function ($scope, $timeout, mediaResource, entityResource, userService, mediaHelper, mediaTypeHelper, eventsService, treeService, localStorageService, localizationService, editorService, umbSessionStorage, notificationsService) {
function ($scope, $timeout, mediaResource, entityResource, userService, mediaHelper, mediaTypeHelper, eventsService, treeService, localStorageService, localizationService, editorService, umbSessionStorage, notificationsService, clipboardService) {

var vm = this;

Expand All @@ -19,6 +19,8 @@ angular.module("umbraco")
vm.enterSubmitFolder = enterSubmitFolder;
vm.focalPointChanged = focalPointChanged;
vm.changePagination = changePagination;
vm.onNavigationChanged = onNavigationChanged;
vm.clickClearClipboard = clickClearClipboard;

vm.clickHandler = clickHandler;
vm.clickItemName = clickItemName;
Expand All @@ -27,6 +29,9 @@ angular.module("umbraco")
vm.selectLayout = selectLayout;
vm.showMediaList = false;

vm.navigation = [];
vm.clipboardImages = [];

var dialogOptions = $scope.model;

$scope.disableFolderSelect = (dialogOptions.disableFolderSelect && dialogOptions.disableFolderSelect !== "0") ? true : false;
Expand Down Expand Up @@ -100,15 +105,43 @@ angular.module("umbraco")

function setTitle() {
if (!$scope.model.title) {
localizationService.localize("defaultdialogs_selectMedia")
localizationService.localizeMany(["defaultdialogs_selectMedia", "defaultdialogs_tabClipboard"])
.then(function (data) {
$scope.model.title = data;
$scope.model.title = data[0];


vm.navigation = [{
"alias": "empty",
"name": data[0],
"icon": "icon-umb-media",
"active": true,
"view": ""
},
{
"alias": "clipboard",
"name": data[1],
"icon": "icon-paste-in",
"view": "",
"disabled": vm.clipboardImages.length === 0
}];

vm.activeTab = vm.navigation[0];
});
}
}

function onInit() {

clipboardService.retriveEntriesOfType(clipboardService.TYPES.IMAGE, ["Media"]).forEach(item => {
var media = item.data.media;
if ((($scope.disableFolderSelect || $scope.onlyImages) && media.isFolder) ||
($scope.onlyFolders && !media.isFolder)) {
return;
}
setDefaultData(media);
vm.clipboardImages.push(media);
});

setTitle();

userService.getCurrentUser().then(function (userData) {
Expand Down Expand Up @@ -149,7 +182,7 @@ angular.module("umbraco")
.then(function (node) {
$scope.target = node;
// Moving directly to existing node's folder
gotoFolder({ id: node.parentId }).then(function() {
gotoFolder({ id: node.parentId }).then(function () {
selectMedia(node);
$scope.target.url = mediaHelper.resolveFileFromEntity(node);
$scope.target.thumbnail = mediaHelper.resolveFileFromEntity(node, true);
Expand All @@ -169,10 +202,10 @@ angular.module("umbraco")

function upload(v) {
var fileSelect = $(".umb-file-dropzone .file-select");
if (fileSelect.length === 0){
if (fileSelect.length === 0) {
localizationService.localize('media_uploadNotAllowed').then(function (message) { notificationsService.warning(message); });
}
else{
else {
fileSelect.trigger("click");
}
}
Expand Down Expand Up @@ -395,6 +428,19 @@ angular.module("umbraco")
});
};

function onNavigationChanged(tab) {
vm.activeTab.active = false;
vm.activeTab = tab;
vm.activeTab.active = true;
};

function clickClearClipboard() {
vm.onNavigationChanged(vm.navigation[0]);
vm.navigation[1].disabled = true;
vm.clipboardImages = [];
clipboardService.clearEntriesOfType(clipboardService.TYPES.IMAGE, ["Media"]);
};

var debounceSearchMedia = _.debounce(function () {
$scope.$apply(function () {
if (vm.searchOptions.filter) {
Expand Down Expand Up @@ -504,13 +550,7 @@ angular.module("umbraco")
var allowedTypes = dialogOptions.filter ? dialogOptions.filter.split(",") : null;

for (var i = 0; i < data.length; i++) {
if (data[i].metaData.MediaPath !== null) {
data[i].thumbnail = mediaHelper.resolveFileFromEntity(data[i], true);
data[i].image = mediaHelper.resolveFileFromEntity(data[i], false);
}
if (data[i].metaData.UpdateDate !== null){
data[i].updateDate = data[i].metaData.UpdateDate;
}
setDefaultData(data[i]);
data[i].filtered = allowedTypes && allowedTypes.indexOf(data[i].metaData.ContentTypeAlias) < 0;
}

Expand All @@ -523,6 +563,16 @@ angular.module("umbraco")
});
}

function setDefaultData(item) {
if (item.metaData.MediaPath !== null) {
item.thumbnail = mediaHelper.resolveFileFromEntity(item, true);
item.image = mediaHelper.resolveFileFromEntity(item, false);
}
if (item.metaData.UpdateDate !== null) {
item.updateDate = item.metaData.UpdateDate;
}
}

function preSelectMedia() {
for (var folderIndex = 0; folderIndex < $scope.images.length; folderIndex++) {
var folderImage = $scope.images[folderIndex];
Expand Down
Loading

0 comments on commit f7c032a

Please sign in to comment.