diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditors.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditors.directive.js index e8e22518b3..20fba6eb6e 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditors.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditors.directive.js @@ -137,7 +137,7 @@ // This directive allows for us to run a custom $compile for the view within the repeater which allows // us to maintain a $scope hierarchy with the rendered view based on the $scope that initiated the // infinite editing. The retain the $scope hiearchy a special $parentScope property is passed in to the model. - function EditorRepeaterDirective($http, $templateCache, $compile) { + function EditorRepeaterDirective($http, $templateCache, $compile, angularHelper) { function link(scope, el, attr, ctrl) { var editor = scope && scope.$parent ? scope.$parent.model : null; @@ -159,14 +159,24 @@ }); // NOTE: the 'model' name here directly affects the naming convention used in infinite editors, this why you access the model - // like $scope.model.If this is changed, everything breaks.This is because we are entirely reliant upon ng - include and inheriting $scopes. + // like $scope.model.If this is changed, everything breaks.This is because we are entirely reliant upon ng-include and inheriting $scopes. // by default without a $parentScope used for infinite editing the 'model' propety will be set because the view creates the scopes in // ng-repeat by ng-repeat="model in editors" templateScope.model = editor; - - element.html(response.data); + element.show(); - $compile(element.contents())(templateScope); + + // if a parentForm is supplied then we can link them but to do that we need to inject a top level form + if (editor.$parentForm) { + element.html("" + response.data + ""); + } + + $compile(element)(templateScope); + + // if a parentForm is supplied then we can link them + if (editor.$parentForm) { + editor.$parentForm.$addControl(templateScope.infiniteEditorForm); + } }); } diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/overlays/umboverlay.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/overlays/umboverlay.directive.js index f595a14664..d1bdf6f42f 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/overlays/umboverlay.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/overlays/umboverlay.directive.js @@ -280,7 +280,7 @@ Opens an overlay to show a custom YSOD.
templateScope.model = scope.model; element.html(response.data); element.show(); - $compile(element.contents())(templateScope); + $compile(element)(templateScope); }); } } diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.html index efadc4dfd6..8c3bced573 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.html +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.html @@ -1 +1 @@ - + diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/inlineblock/inlineblock.editor.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/inlineblock/inlineblock.editor.html index a76894ac51..edf234455e 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/inlineblock/inlineblock.editor.html +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/inlineblock/inlineblock.editor.html @@ -1,16 +1,14 @@ - -
- -
- -
+
+ +
+
- +
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/labelblock/labelblock.editor.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/labelblock/labelblock.editor.html index 6d3f139db2..712cd1eff8 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/labelblock/labelblock.editor.html +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/labelblock/labelblock.editor.html @@ -1,10 +1,8 @@ - - - + diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umb-block-list-property-editor.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umb-block-list-property-editor.html index 4f60b5d567..fb94a00631 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umb-block-list-property-editor.html +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umb-block-list-property-editor.html @@ -18,49 +18,10 @@
+
-
- - - - - - -
- - - -
-
+ +
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umb-block-list-row.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umb-block-list-row.html new file mode 100644 index 0000000000..475c29b96a --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umb-block-list-row.html @@ -0,0 +1,45 @@ + +
+ + + + + + +
+ + + +
+
+ diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umbBlockListPropertyEditor.component.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umbBlockListPropertyEditor.component.js index b5907126f2..da4fc9cff8 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umbBlockListPropertyEditor.component.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umbBlockListPropertyEditor.component.js @@ -17,10 +17,10 @@ controller: BlockListController, controllerAs: "vm", bindings: { - model: "=", - propertyForm: "=" + model: "=" }, require: { + propertyForm: "^form", umbProperty: "?^umbProperty", umbVariantContent: '?^^umbVariantContent', umbVariantContentEditors: '?^^umbVariantContentEditors', @@ -28,7 +28,7 @@ } }); - function BlockListController($scope, editorService, clipboardService, localizationService, overlayService, blockEditorService, udiService, serverValidationManager) { + function BlockListController($scope, editorService, clipboardService, localizationService, overlayService, blockEditorService, udiService, serverValidationManager, angularHelper) { var unsubscribe = []; var modelObject; @@ -65,6 +65,16 @@ vm.$onInit = function() { + if (!vm.umbVariantContent) { + // not found, then fallback to searching the scope chain, this may be needed when DOM inheritance isn't maintained but scope + // inheritance is (i.e.infinite editing) + var found = angularHelper.traverseScopeChain($scope, s => s && s.vm && s.vm.constructor.name === "umbVariantContentController"); + vm.umbVariantContent = found ? found.vm : null; + if (!vm.umbVariantContent) { + throw "Could not find umbVariantContent in the $scope chain"; + } + } + // set the onValueChanged callback, this will tell us if the block list model changed on the server // once the data is submitted. If so we need to re-initialize vm.model.onValueChanged = onServerValueChanged; @@ -258,7 +268,7 @@ blockObject.active = true; } - function editBlock(blockObject, openSettings, blockIndex) { + function editBlock(blockObject, openSettings, blockIndex, parentForm) { // this must be set if (blockIndex === undefined) { @@ -289,6 +299,7 @@ var blockEditorModel = { $parentScope: $scope, // pass in a $parentScope, this maintains the scope inheritance in infinite editing + $parentForm: parentForm || vm.propertyForm, // pass in a $parentForm, this maintains the FormController hierarchy with the infinite editing view (if it contains a form) hideContent: blockObject.hideContentInOverlay, openSettings: openSettings === true, liveEditing: liveEditing, @@ -345,6 +356,8 @@ var amountOfAvailableTypes = vm.availableBlockTypes.length; var blockPickerModel = { + $parentScope: $scope, // pass in a $parentScope, this maintains the scope inheritance in infinite editing + $parentForm: vm.propertyForm, // pass in a $parentForm, this maintains the FormController hierarchy with the infinite editing view (if it contains a form) availableItems: vm.availableBlockTypes, title: vm.labels.grid_addElement, orderBy: "$index", @@ -378,7 +391,7 @@ if (inlineEditing === true) { activateBlock(vm.layout[createIndex].$block); } else if (inlineEditing === false && vm.layout[createIndex].$block.hideContentInOverlay !== true) { - editBlock(vm.layout[createIndex].$block, false, createIndex); + editBlock(vm.layout[createIndex].$block, false, createIndex, blockPickerModel.$parentForm); } } } @@ -521,6 +534,7 @@ }); } + // TODO: We'll need to pass in a parentForm here too function openSettingsForBlock(block, blockIndex) { editBlock(block, true, blockIndex); } diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umb-block-list-block.component.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umbblocklistblock.component.js similarity index 92% rename from src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umb-block-list-block.component.js rename to src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umbblocklistblock.component.js index d2d9e98cc7..afe389ef6f 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umb-block-list-block.component.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umbblocklistblock.component.js @@ -18,7 +18,8 @@ view: "@", block: "=", api: "<", - index: "<" + index: "<", + parentForm: "<" } } ); @@ -32,6 +33,7 @@ $scope.block = model.block; $scope.api = model.api; $scope.index = model.index; + $scope.parentForm = model.parentForm; }; // We need to watch for changes on primitive types and upate the $scope values. diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umbblocklistrow.component.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umbblocklistrow.component.js new file mode 100644 index 0000000000..96a3648192 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umbblocklistrow.component.js @@ -0,0 +1,34 @@ +(function () { + "use strict"; + + /** + * @ngdoc directive + * @name umbraco.directives.directive:umbBlockListRow + * @description + * renders each row for the block list editor + */ + + angular + .module("umbraco") + .component("umbBlockListRow", { + templateUrl: 'views/propertyeditors/blocklist/umb-block-list-row.html', + controller: BlockListRowController, + controllerAs: "vm", + bindings: { + blockEditorApi: "<", + layout: "<", + index: "<" + } + } + ); + + function BlockListRowController($scope) { + + var vm = this; + + vm.$onInit = function () { + + }; + } + +})(); diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umb-block-list-scoped-block.component.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umbblocklistscopedblock.component.js similarity index 94% rename from src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umb-block-list-scoped-block.component.js rename to src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umbblocklistscopedblock.component.js index 314ce1fcaa..2a6a185c0d 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umb-block-list-scoped-block.component.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umbblocklistscopedblock.component.js @@ -20,7 +20,8 @@ view: "@", block: "=", api: "<", - index: "<" + index: "<", + parentForm: "<" } } ); @@ -34,6 +35,7 @@ $scope.block = model.block; $scope.api = model.api; $scope.index = model.index; + $scope.parentForm = model.parentForm; var shadowRoot = $element[0].attachShadow({mode:'open'}); shadowRoot.innerHTML = `