Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add copy logic to Media Picker #9957

Merged
merged 3 commits into from
Mar 15, 2021
Merged

Add copy logic to Media Picker #9957

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fc1a2c7
Add copy logic to Media Picker
patrickdemooij9 Mar 9, 2021
7500b78
Add action for copy all
patrickdemooij9 Mar 10, 2021
0a0270b
Fix for selectable media item
patrickdemooij9 Mar 15, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 42 additions & 1 deletion src/Umbraco.Web.UI.Client/src/common/services/clipboard.service.js
View file
Open in desktop
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
Open in desktop
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