From 6fd45f653c32d066ca0d7754e87f87a233c015ff Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Sun, 27 Feb 2022 17:46:40 +0100 Subject: [PATCH] Media entry editor listview children (#12061) --- .../common/services/mediapreview.service.js | 11 ++- .../mediaentryeditor.controller.js | 99 ++++++++++--------- .../listview/listview.controller.js | 13 ++- 3 files changed, 69 insertions(+), 54 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/services/mediapreview.service.js b/src/Umbraco.Web.UI.Client/src/common/services/mediapreview.service.js index b922e07c9c..5e5aeed872 100644 --- a/src/Umbraco.Web.UI.Client/src/common/services/mediapreview.service.js +++ b/src/Umbraco.Web.UI.Client/src/common/services/mediapreview.service.js @@ -1,4 +1,4 @@ -/** +/** * @ngdoc service * @name umbraco.services.mediaPreview * @description A service providing views used for dealing with previewing files. @@ -56,12 +56,15 @@ function mediaPreview() { */ getMediaPreview: function (fileExtension) { - fileExtension = fileExtension.toLowerCase(); + if (fileExtension) + { + fileExtension = fileExtension.toLowerCase(); - var previewObject = _mediaPreviews.find((preview) => preview.fileExtensions.indexOf(fileExtension) !== -1); + var previewObject = _mediaPreviews.find(preview => preview.fileExtensions.indexOf(fileExtension) !== -1); - if(previewObject !== undefined) { + if (previewObject !== undefined) { return previewObject.view; + } } return DEFAULT_FILE_PREVIEW; diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/mediaentryeditor/mediaentryeditor.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/mediaentryeditor/mediaentryeditor.controller.js index eea8e87034..732127ffa0 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/mediaentryeditor/mediaentryeditor.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/mediaentryeditor/mediaentryeditor.controller.js @@ -3,25 +3,35 @@ angular.module("umbraco") function ($scope, localizationService, entityResource, editorService, overlayService, eventsService, mediaHelper) { var unsubscribe = []; - var vm = this; - + + const vm = this; + vm.loading = true; vm.model = $scope.model; vm.mediaEntry = vm.model.mediaEntry; vm.currentCrop = null; - - localizationService.localizeMany([ - vm.model.createFlow ? "general_cancel" : "general_close", - vm.model.createFlow ? "general_create" : "buttons_submitChanges" - ]).then(function (data) { - vm.closeLabel = data[0]; - vm.submitLabel = data[1]; - }); - vm.title = ""; + + vm.focalPointChanged = focalPointChanged; + vm.onImageLoaded = onImageLoaded; + vm.openMedia = openMedia; + vm.repickMedia = repickMedia; + vm.selectCrop = selectCrop; + vm.deselectCrop = deselectCrop; + vm.resetCrop = resetCrop; + vm.submitAndClose = submitAndClose; + vm.close = close; function init() { + localizationService.localizeMany([ + vm.model.createFlow ? "general_cancel" : "general_close", + vm.model.createFlow ? "general_create" : "buttons_submitChanges" + ]).then(data => { + vm.closeLabel = data[0]; + vm.submitLabel = data[1]; + }); + updateMedia(); unsubscribe.push(eventsService.on("editors.media.saved", function(name, args) { @@ -35,6 +45,7 @@ angular.module("umbraco") function updateMedia() { vm.loading = true; + entityResource.getById(vm.mediaEntry.mediaKey, "Media").then(function (mediaEntity) { vm.media = mediaEntity; vm.imageSrc = mediaHelper.resolveFileFromEntity(mediaEntity, true); @@ -44,11 +55,11 @@ angular.module("umbraco") vm.hasDimensions = false; vm.isCroppable = false; - localizationService.localize("mediaPicker_editMediaEntryLabel", [vm.media.name, vm.model.documentName]).then(function (data) { + localizationService.localize("mediaPicker_editMediaEntryLabel", [vm.media.name, vm.model.documentName]).then(data => { vm.title = data; }); }, function () { - localizationService.localize("mediaPicker_deletedItem").then(function (localized) { + localizationService.localize("mediaPicker_deletedItem").then(localized => { vm.media = { name: localized, icon: "icon-picture", @@ -60,15 +71,12 @@ angular.module("umbraco") }); }); } - - vm.onImageLoaded = onImageLoaded; + function onImageLoaded(isCroppable, hasDimensions) { vm.isCroppable = isCroppable; vm.hasDimensions = hasDimensions; - }; - - - vm.repickMedia = repickMedia; + } + function repickMedia() { vm.model.propertyEditor.changeMediaFor(vm.model.mediaEntry, onMediaReplaced); } @@ -84,24 +92,23 @@ angular.module("umbraco") // updateMedia(); } - - vm.openMedia = openMedia; + function openMedia() { - var mediaEditor = { + const mediaEditor = { id: vm.mediaEntry.mediaKey, - submit: function () { + submit: () => { editorService.close(); }, - close: function () { + close: () => { editorService.close(); } }; + editorService.mediaEditor(mediaEditor); } - - vm.focalPointChanged = function(left, top) { + function focalPointChanged(left, top) { //update the model focalpoint value vm.mediaEntry.focalPoint = { left: left, @@ -111,22 +118,17 @@ angular.module("umbraco") //set form to dirty to track changes setDirty(); } - - - - vm.selectCrop = selectCrop; + function selectCrop(targetCrop) { vm.currentCrop = targetCrop; setDirty(); // TODO: start watchin values of crop, first when changed set to dirty. - }; - - vm.deselectCrop = deselectCrop; + } + function deselectCrop() { vm.currentCrop = null; - }; - - vm.resetCrop = resetCrop; + } + function resetCrop() { if (vm.currentCrop) { $scope.$evalAsync( () => { @@ -140,18 +142,22 @@ angular.module("umbraco") vm.imageCropperForm.$setDirty(); } - - vm.submitAndClose = function () { + function submitAndClose() { if (vm.model && vm.model.submit) { vm.model.submit(vm.model); } } - - vm.close = function () { - if (vm.model && vm.model.close) { - if (vm.model.createFlow === true || vm.imageCropperForm.$dirty === true) { - var labels = vm.model.createFlow === true ? ["mediaPicker_confirmCancelMediaEntryCreationHeadline", "mediaPicker_confirmCancelMediaEntryCreationMessage"] : ["prompt_discardChanges", "mediaPicker_confirmCancelMediaEntryHasChanges"]; - localizationService.localizeMany(labels).then(function (localizations) { + + function close() { + if (vm.model && vm.model.close) + { + if (vm.model.createFlow === true || vm.imageCropperForm.$dirty === true) + { + const labelKeys = vm.model.createFlow === true + ? ["mediaPicker_confirmCancelMediaEntryCreationHeadline", "mediaPicker_confirmCancelMediaEntryCreationMessage"] + : ["prompt_discardChanges", "mediaPicker_confirmCancelMediaEntryHasChanges"]; + + localizationService.localizeMany(labelKeys).then(localizations => { const confirm = { title: localizations[0], view: "default", @@ -159,11 +165,11 @@ angular.module("umbraco") submitButtonLabelKey: "general_discard", submitButtonStyle: "danger", closeButtonLabelKey: "prompt_stay", - submit: function () { + submit: () => { overlayService.close(); vm.model.close(vm.model); }, - close: function () { + close: () => { overlayService.close(); } }; @@ -177,6 +183,7 @@ angular.module("umbraco") } init(); + $scope.$on("$destroy", function () { unsubscribe.forEach(x => x()); }); diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.controller.js index c66ff1a461..c98cd8b039 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.controller.js @@ -146,6 +146,7 @@ function listViewController($scope, $interpolate, $routeParams, $injector, $time } var listParamsForCurrent = $routeParams.id == $routeParams.list; + $scope.options = { useInfiniteEditor: $scope.model.config.useInfiniteEditor === true, pageSize: $scope.model.config.pageSize ? $scope.model.config.pageSize : 10, @@ -169,6 +170,7 @@ function listViewController($scope, $interpolate, $routeParams, $injector, $time allowBulkDelete: $scope.model.config.bulkActionPermissions.allowBulkDelete, cultureName: $routeParams.cculture ? $routeParams.cculture : $routeParams.mculture }; + _.each($scope.options.includeProperties, function (property) { property.nameExp = !!property.nameTemplate ? $interpolate(property.nameTemplate) @@ -268,12 +270,13 @@ function listViewController($scope, $interpolate, $routeParams, $injector, $time $scope.getContent = function (contentId) { $scope.reloadView($scope.contentId, true); - } + }; $scope.reloadView = function (id, reloadActiveNode) { if (!id) { return; } + $scope.viewLoaded = false; $scope.folders = []; @@ -327,7 +330,7 @@ function listViewController($scope, $interpolate, $routeParams, $injector, $time $scope.options.pageNumber = 1; $scope.reloadView($scope.contentId); } - } + }; $scope.onSearchStartTyping = function() { $scope.viewLoaded = false; @@ -708,13 +711,15 @@ function listViewController($scope, $interpolate, $routeParams, $injector, $time } function initView() { + var id = $routeParams.id; if (id === undefined) { // no ID found in route params - don't list anything as we don't know for sure where we are return; } - - $scope.contentId = id; + + // Get current id for node to load it's children + $scope.contentId = editorState.current ? editorState.current.id : id; $scope.isTrashed = editorState.current ? editorState.current.trashed : id === "-20" || id === "-21"; $scope.options.allowBulkPublish = $scope.options.allowBulkPublish && !$scope.isTrashed;