From 1b0113d3aaad8f98ea215190fb6cd8c415f9b3e2 Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Thu, 5 Sep 2019 17:53:04 +0200 Subject: [PATCH] v8: Edit embed in grid (#4899) --- .../src/less/components/umb-grid.less | 12 ++++ .../infiniteeditors/embed/embed.controller.js | 36 ++++++++++-- .../common/infiniteeditors/embed/embed.html | 39 +++++++------ .../grid/editors/embed.controller.js | 55 ++++++++++++------- .../propertyeditors/grid/editors/embed.html | 13 +++-- src/Umbraco.Web.UI/Umbraco/config/lang/da.xml | 1 + 6 files changed, 110 insertions(+), 46 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-grid.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-grid.less index 2eafe9b3d7..ba0b32bb0d 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-grid.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-grid.less @@ -408,7 +408,19 @@ margin-bottom: 10px; } +.umb-grid .umb-editor-preview { + position: relative; + .umb-editor-preview-overlay { + cursor: pointer; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 1; + } +} // Active states // ------------------------- diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/embed/embed.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/embed/embed.controller.js index 06a5f028ef..f34dc949ab 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/embed/embed.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/embed/embed.controller.js @@ -7,6 +7,7 @@ var origWidth = 500; var origHeight = 300; + vm.loading = false; vm.trustedPreview = null; $scope.model.embed = { @@ -17,9 +18,16 @@ preview: "", success: false, info: "", - supportsDimensions: "" + supportsDimensions: false }; + if ($scope.model.original) { + angular.extend($scope.model.embed, $scope.model.original); + + showPreview(); + } + + vm.toggleConstrain = toggleConstrain; vm.showPreview = showPreview; vm.changeSize = changeSize; vm.submit = submit; @@ -37,10 +45,10 @@ if ($scope.model.embed.url) { $scope.model.embed.show = true; - $scope.model.embed.preview = "
"; $scope.model.embed.info = ""; $scope.model.embed.success = false; + vm.loading = true; $http({ method: 'GET', @@ -54,29 +62,41 @@ $scope.model.embed.preview = ""; - switch (response.data.OEmbedStatus) { case 0: //not supported + $scope.model.embed.preview = ""; $scope.model.embed.info = "Not supported"; + $scope.model.embed.success = false; + $scope.model.embed.supportsDimensions = false; + vm.trustedPreview = null; break; case 1: //error + $scope.model.embed.preview = ""; $scope.model.embed.info = "Could not embed media - please ensure the URL is valid"; + $scope.model.embed.success = false; + $scope.model.embed.supportsDimensions = false; + vm.trustedPreview = null; break; case 2: + $scope.model.embed.success = true; + $scope.model.embed.supportsDimensions = response.data.SupportsDimensions; $scope.model.embed.preview = response.data.Markup; vm.trustedPreview = $sce.trustAsHtml(response.data.Markup); - $scope.model.embed.supportsDimensions = response.data.SupportsDimensions; - $scope.model.embed.success = true; break; } + + vm.loading = false; + }, function() { + $scope.model.embed.success = false; $scope.model.embed.supportsDimensions = false; $scope.model.embed.preview = ""; $scope.model.embed.info = "Could not embed media - please ensure the URL is valid"; - }); + vm.loading = false; + }); } else { $scope.model.embed.supportsDimensions = false; $scope.model.embed.preview = ""; @@ -105,6 +125,10 @@ } + function toggleConstrain() { + $scope.model.embed.constrain = !$scope.model.embed.constrain; + } + function submit() { if($scope.model && $scope.model.submit) { $scope.model.submit($scope.model); diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/embed/embed.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/embed/embed.html index 23559c6123..19cf9b2278 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/embed/embed.html +++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/embed/embed.html @@ -16,7 +16,7 @@ - + - - -

-
- - -
- - + + + +
+ + +

+
+ +
+ + + - - - + + + - - - + + + +
+
@@ -62,6 +68,7 @@ button-style="success" label-key="general_submit" state="vm.saveButtonState" + disabled="!model.embed.url.length || !model.embed.preview.length" action="vm.submit(model)"> diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/embed.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/embed.controller.js index a45e569897..0f8a8df895 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/embed.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/embed.controller.js @@ -1,26 +1,42 @@ angular.module("umbraco") .controller("Umbraco.PropertyEditors.Grid.EmbedController", function ($scope, $timeout, $sce, editorService) { - - - - function getEmbed() { - return $sce.trustAsHtml($scope.control.value); - } - - - $scope.embedHtml = getEmbed(); - $scope.$watch('control.value', function(newValue, oldValue) { - if(angular.equals(newValue, oldValue)){ - return; // simply skip that - } + + function onInit() { - $scope.embedHtml = getEmbed(); - }, false); - $scope.setEmbed = function() { + var embedPreview = angular.isObject($scope.control.value) && $scope.control.value.preview ? $scope.control.value.preview : $scope.control.value; + + $scope.trustedValue = embedPreview ? $sce.trustAsHtml(embedPreview) : null; + + if(!$scope.control.value) { + $timeout(function(){ + if($scope.control.$initializing){ + $scope.setEmbed(); + } + }, 200); + } + } + + $scope.setEmbed = function () { + + var original = angular.isObject($scope.control.value) ? $scope.control.value : null; + var embed = { - submit: function(model) { - $scope.control.value = model.embed.preview; + original: original, + submit: function (model) { + + var embed = { + constrain: model.embed.constrain, + height: model.embed.height, + width: model.embed.width, + url: model.embed.url, + info: model.embed.info, + preview: model.embed.preview + }; + + $scope.control.value = embed; + $scope.trustedValue = $sce.trustAsHtml(embed.preview); + editorService.close(); }, close: function() { @@ -29,5 +45,6 @@ angular.module("umbraco") }; editorService.embed(embed); }; - + + onInit(); }); diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/embed.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/embed.html index 8cfa71f082..de80b05760 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/embed.html +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/embed.html @@ -1,10 +1,13 @@
-
- -
Click to embed
-
+
+ +
Click to embed
+
-
+
+
+
+
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml index 81e6b6bf12..c4bffedb28 100644 --- a/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml +++ b/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml @@ -584,6 +584,7 @@ Luk vindue Kommentar Bekræft + Proportioner Behold proportioner Indhold Fortsæt