diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbtabbedcontent.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbtabbedcontent.directive.js index bd123d17c7..707a4f1e3e 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbtabbedcontent.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbtabbedcontent.directive.js @@ -5,23 +5,23 @@ function tabbedContentDirective($timeout, $filter, contentEditingHelper) { function link($scope, $element) { - + var appRootNode = $element[0]; - + // Directive for cached property groups. var propertyGroupNodesDictionary = {}; - + var scrollableNode = appRootNode.closest(".umb-scrollable"); scrollableNode.addEventListener("scroll", onScroll); scrollableNode.addEventListener("mousewheel", cancelScrollTween); $scope.activeTabKey = ''; - $scope.tabs = []; - + $scope.tabs = []; + function onScroll(event) { - + var viewFocusY = scrollableNode.scrollTop + scrollableNode.clientHeight * .5; - + for(var i in $scope.content.tabs) { var group = $scope.content.tabs[i]; var node = propertyGroupNodesDictionary[group.id]; @@ -35,9 +35,9 @@ return; } } - + } - + function setActiveAnchor(tab) { if (tab.active !== true) { var i = $scope.content.tabs.length; @@ -57,18 +57,18 @@ } function getScrollPositionFor(id) { if (propertyGroupNodesDictionary[id]) { - return propertyGroupNodesDictionary[id].offsetTop - 20;// currently only relative to closest relatively positioned parent + return propertyGroupNodesDictionary[id].offsetTop - 20;// currently only relative to closest relatively positioned parent } return null; } function scrollTo(id) { var y = getScrollPositionFor(id); if (getScrollPositionFor !== null) { - + var viewportHeight = scrollableNode.clientHeight; var from = scrollableNode.scrollTop; var to = Math.min(y, scrollableNode.scrollHeight - viewportHeight); - + var animeObject = {_y: from}; $scope.scrollTween = anime({ targets: animeObject, @@ -94,7 +94,7 @@ $scope.scrollTween.pause(); } } - + $scope.registerPropertyGroup = function(element, appAnchor) { propertyGroupNodesDictionary[appAnchor] = element; }; @@ -116,13 +116,8 @@ $scope.setActiveTab($scope.tabs[0]); } - - // for validation to work for each tab we need to associate a group with a tab. - $scope.content.tabs.forEach(group => { - group.validationAlias = contentEditingHelper.generateTabValidationAlias(group, $scope.content.tabs); - }); }); - + $scope.$on("editors.apps.appChanged", function($event, $args) { // if app changed to this app, then we want to scroll to the current anchor if($args.app.alias === "umbContent") { @@ -130,35 +125,35 @@ $timeout(jumpTo.bind(null, [activeAnchor.id])); } }); - + $scope.$on("editors.apps.appAnchorChanged", function($event, $args) { if($args.app.alias === "umbContent") { setActiveAnchor($args.anchor); scrollTo($args.anchor.id); } }); - + //ensure to unregister from all dom-events $scope.$on('$destroy', function () { cancelScrollTween(); scrollableNode.removeEventListener("scroll", onScroll); scrollableNode.removeEventListener("mousewheel", cancelScrollTween); }); - + } function controller($scope) { - + //expose the property/methods for other directives to use this.content = $scope.content; - + if($scope.contentNodeModel) { $scope.defaultVariant = _.find($scope.contentNodeModel.variants, variant => { // defaultVariant will never have segment. Wether it has a language or not depends on the setup. return !variant.segment && ((variant.language && variant.language.isDefault) || (!variant.language)); }); } - + $scope.unlockInvariantValue = function(property) { property.unlockInvariantValue = !property.unlockInvariantValue; }; @@ -175,14 +170,14 @@ if (property.unlockInvariantValue) { return false; } - + var contentLanguage = $scope.content.language; var canEditCulture = !contentLanguage || // If the property culture equals the content culture it can be edited property.culture === contentLanguage.culture || // A culture-invariant property can only be edited by the default language variant - (property.culture == null && contentLanguage.isDefault); + (property.culture == null && contentLanguage.isDefault); var canEditSegment = property.segment === $scope.content.segment; @@ -206,7 +201,7 @@ return directive; } - + angular.module('umbraco.directives').directive('umbTabbedContent', tabbedContentDirective); })(); diff --git a/src/Umbraco.Web.UI.Client/src/views/components/elementeditor/umbelementeditorcontent.component.js b/src/Umbraco.Web.UI.Client/src/views/components/elementeditor/umbelementeditorcontent.component.js index 604bf0538b..6bcd554247 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/elementeditor/umbelementeditorcontent.component.js +++ b/src/Umbraco.Web.UI.Client/src/views/components/elementeditor/umbelementeditorcontent.component.js @@ -24,7 +24,7 @@ vm.getScope = getScope; // used by property editors to get a scope that is the root of split view, content apps etc. vm.setActiveTab = setActiveTab; - + $scope.$watchCollection('vm.model.variants[0].tabs', () => { vm.tabs = $filter("filter")(vm.model.variants[0].tabs, (tab) => { return tab.type === 1; @@ -33,14 +33,9 @@ if (vm.tabs.length > 0) { // if we have tabs and some groups that doesn't belong to a tab we need to render those on an "Other" tab. contentEditingHelper.registerGenericTab(vm.model.variants[0].tabs); - + setActiveTab(vm.tabs[0]); } - - // for validation to work for each tab we need to associate a group with a tab. - vm.model.variants[0].tabs.forEach(group => { - group.validationAlias = contentEditingHelper.generateTabValidationAlias(group, vm.model.variants[0].tabs); - }); }); function getScope() { diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html index 3ffda3e4e0..350a6ea6f4 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html @@ -132,7 +132,7 @@ sorting="sortingMode" on-change-sort-order-value="onChangeGroupSortOrderValue(group)" val-server-field-name="{{'Groups[' + $index + '].Name'}}" - val-tab-alias="{{group.validationAlias}}"> + val-tab-alias="{{group.alias}}">