swcs/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactorying of umb-editor, splitview, variants

Browse Source
This commit is contained in:
Niels Lyngsø
2020-01-23 14:50:58 +01:00
parent 109d9e1f7b
commit 30be926949
12 changed files with 101 additions and 254 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbtabbedcontent.directive.js
+14 -16
View File
@@ -4,7 +4,7 @@
/** This directive is used to render out the current variant tabs and properties and exposes an API for other directives to consume */
function tabbedContentDirective($timeout) {
function link($scope, $element, $attrs) {
function link($scope, $element) {
var appRootNode = $element[0];
@@ -19,8 +19,8 @@
var viewFocusY = scrollableNode.scrollTop + scrollableNode.clientHeight * .5;
for(var i in $scope.content.tabs) {
var group = $scope.content.tabs[i];
for(var i in $scope.variant.tabs) {
var group = $scope.variant.tabs[i];
var node = propertyGroupNodesDictionary[group.id];
if (viewFocusY >= node.offsetTop && viewFocusY <= node.offsetTop + node.clientHeight) {
setActiveAnchor(group);
@@ -32,18 +32,18 @@
function setActiveAnchor(tab) {
if (tab.active !== true) {
var i = $scope.content.tabs.length;
var i = $scope.variant.tabs.length;
while(i--) {
$scope.content.tabs[i].active = false;
$scope.variant.tabs[i].active = false;
}
tab.active = true;
}
}
function getActiveAnchor() {
var i = $scope.content.tabs.length;
var i = $scope.variant.tabs.length;
while(i--) {
if ($scope.content.tabs[i].active === true)
return $scope.content.tabs[i];
if ($scope.variant.tabs[i].active === true)
return $scope.variant.tabs[i];
}
return false;
}
@@ -120,14 +120,11 @@
//expose the property/methods for other directives to use
this.content = $scope.content;
this.activeVariant = _.find(this.content.variants, variant => {
return variant.active;
});
$scope.activeVariant = this.activeVariant;
console.log($scope)
console.log(this.content);
$scope.defaultVariant = _.find(this.content.variants, variant => {
return variant.language.isDefault;
return variant.language && variant.language.isDefault;
});
$scope.unlockInvariantValue = function(property) {
@@ -137,7 +134,7 @@
$scope.$watch("tabbedContentForm.$dirty",
function (newValue, oldValue) {
if (newValue === true) {
$scope.content.isDirty = true;
$scope.variant.isDirty = true;
}
}
);
@@ -150,7 +147,8 @@
controller: controller,
link: link,
scope: {
content: "="
content: "=",
variant: "="
}
};
src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbvariantcontent.directive.js
+5 -5
View File
@@ -7,9 +7,9 @@
var umbVariantContent = {
templateUrl: 'views/components/content/umb-variant-content.html',
bindings: {
content: "<",
page: "<",
editor: "<",
content: "=",
page: "=",
editor: "=",
editorIndex: "<",
editorCount: "<",
onCloseSplitView: "&",
@@ -24,7 +24,7 @@
controller: umbVariantContentController
};
function umbVariantContentController($scope, $element, $location) {
function umbVariantContentController($scope) {
var unsubscribe = [];
@@ -43,7 +43,7 @@
function onInit() {
// disable the name field if the active content app is not "Content"
vm.nameDisabled = false;
angular.forEach(vm.editor.content.apps, function(app){
angular.forEach(vm.content.apps, function(app){
if(app.active && app.alias !== "umbContent" && app.alias !== "umbInfo" && app.alias !== "umbListView") {
vm.nameDisabled = true;
}
src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbvariantcontenteditors.directive.js
+24 -160
View File
@@ -8,7 +8,7 @@
templateUrl: 'views/components/content/umb-variant-content-editors.html',
bindings: {
page: "<",
content: "<", // TODO: Not sure if this should be = since we are changing the 'active' property of a variant
content: "=", // TODO: Not sure if this should be = since we are changing the 'active' property of a variant
culture: "<",
segment: "<",
onSelectApp: "&?",
@@ -47,6 +47,9 @@
/** Called when the component initializes */
function onInit() {
prevContentDateUpdated = angular.copy(vm.content.updateDate);
_.each(vm.content.variants, function (v) {
v.active = false;// needs to be set before used for it to be re-active.
});
setActiveVariant();
}
@@ -95,21 +98,14 @@
&&
(v.segment === vm.segment)
) {
v.active = true;
activeVariant = v;
}
else {
v.active = false;
}
});
if (!activeVariant) {
// Set the first variant to active if we can't find it.
// If the content item is invariant, then only one item exists in the array.
vm.content.variants[0].active = true;
activeVariant = vm.content.variants[0];
}
insertVariantEditor(0, initVariant(activeVariant, 0));
insertVariantEditor(0, activeVariant);
if (vm.editors.length > 1) {
//now re-sync any other editor content (i.e. if split view is open)
@@ -118,7 +114,7 @@
var variant = _.find(vm.content.variants, function (v) {
return (!v.language || v.language.culture === vm.editors[s].content.language.culture) && v.segment === vm.editors[s].content.segment;
});
vm.editors[s].content = initVariant(variant, s);
vm.editors[s].content = variant;
}
}
@@ -131,6 +127,10 @@
*/
function insertVariantEditor(index, variant) {
if (vm.editors[index]) {
vm.editors[index].content.active = false;
}
variant.active = true;
var variantCulture = variant.language ? variant.language.culture : "invariant";
var variantSegment = variant.segment;
@@ -140,6 +140,7 @@
//check if the segment at the index is the same, if it's null an editor will be added
var currentSegment = vm.editors.length === 0 || vm.editors.length <= index ? null : vm.editors[index].segment;
if (currentCulture !== variantCulture || currentSegment !== variantSegment) {
//Not the current culture which means we need to modify the array.
@@ -157,151 +158,30 @@
vm.editors[index].content = variant;
}
}
function initVariant(variant, editorIndex) {
//The model that is assigned to the editor contains the current content variant along
//with a copy of the contentApps. This is required because each editor renders it's own
//header and content apps section and the content apps contains the view for editing content itself
//and we need to assign a view model to the subView so that it is scoped to the current
//editor so that split views work.
//copy the apps from the main model if not assigned yet to the variant
if (!variant.apps) {
variant.apps = angular.copy(vm.content.apps);
}
//if this is a variant it has a culture/language or segment than we need to assign the variant drop down
if (variant.language || variant.segment !== null) {
//if the variant list that defines the header drop down isn't assigned to the variant then assign it now
if (!variant.variants) {
variant.variants = _.map(vm.content.variants,
function (v) {
return _.pick(v, "active", "language", "segment", "state");
});
}
else {
//merge the scope variants on top of the header variants collection (handy when needing to refresh)
angular.extend(variant.variants,
_.map(vm.content.variants,
function (v) {
return _.pick(v, "active", "language", "segment", "state");
}));
}
//ensure the current culture is set as the active one
for (var i = 0; i < variant.variants.length; i++) {
if (
(!variant.variants[i].language || variant.variants[i].language.culture === variant.language.culture)
&&
variant.variants[i].segment === variant.segment
) {
variant.variants[i].active = true;
}
else {
variant.variants[i].active = false;
}
}
/*
//SEGMENTS_TODO: Remove this part if not used.
var variantId = variantHelper.getId(variant);
// keep track of the open variants across the different split views
// push the first variant then update the variant index based on the editor index
if (vm.openVariants && vm.openVariants.length === 0) {
vm.openVariants.push(variantId);
} else {
vm.openVariants[editorIndex] = variantId;
}
*/
}
//then assign the variant to a view model to the content app
var contentApp = _.find(variant.apps, function (a) {
return a.alias === "umbContent";
});
if (contentApp) {
//The view model for the content app is simply the index of the variant being edited
var variantIndex = vm.content.variants.indexOf(variant);
contentApp.viewModel = variantIndex;
}
// make sure the same app it set to active in the new variant
if(activeAppAlias) {
angular.forEach(variant.apps, function(app) {
app.active = false;
if(app.alias === activeAppAlias) {
app.active = true;
}
});
}
return variant;
}
function getCultureFromVariant(variant) {
return variant.language ? variant.language.culture : null;
}
/**
* Adds a new editor to the editors array to show content in a split view
* @param {any} selectedVariant
*/
function openSplitView(selectedVariant) {
//Find the whole variant model based on the culture that was chosen
var variant = _.find(vm.content.variants, function (v) {
return getCultureFromVariant(v) === getCultureFromVariant(selectedVariant) && v.segment === selectedVariant.segment;
});
insertVariantEditor(vm.editors.length, initVariant(variant, vm.editors.length));
//only the content app can be selected since no other apps are shown, and because we copy all of these apps
//to the "editors" we need to update this across all editors
for (var e = 0; e < vm.editors.length; e++) {
var editor = vm.editors[e];
for (var i = 0; i < editor.content.apps.length; i++) {
var app = editor.content.apps[i];
if (app.alias === "umbContent") {
app.active = true;
// tell the world that the app has changed (but do it only once)
if (e === 0) {
selectApp(app);
}
}
else {
app.active = false;
}
}
}
// TODO: hacking animation states - these should hopefully be easier to do when we upgrade angular
editor.collapsed = true;
editor.loading = true;
$timeout(function () {
editor.collapsed = false;
editor.loading = false;
splitViewChanged();
}, 100);
insertVariantEditor(vm.editors.length, selectedVariant);
splitViewChanged();
}
/** Closes the split view */
function closeSplitView(editorIndex) {
// TODO: hacking animation states - these should hopefully be easier to do when we upgrade angular
var editor = vm.editors[editorIndex];
editor.loading = true;
editor.collapsed = true;
$timeout(function () {
vm.editors.splice(editorIndex, 1);
//remove variant from open variants
// SEGMENTS_TODO: Test this scenario.
//update the current culture to reflect the last open variant (closing the split view corresponds to selecting the other variant)
//$location.search({"cculture": vm.openVariants[0].language, "csegment": vm.openVariants[0]});
$location.search({"cculture": vm.editors[0].content.language ? vm.editors[0].content.language.culture : null, "csegment": vm.editors[0].content.segment});
splitViewChanged();
}, 400);
vm.editors.splice(editorIndex, 1);
editor.content.active = false;
//update the current culture to reflect the last open variant (closing the split view corresponds to selecting the other variant)
$location.search({"cculture": vm.editors[0].content.language ? vm.editors[0].content.language.culture : null, "csegment": vm.editors[0].content.segment});
splitViewChanged();
}
/**
@@ -314,6 +194,7 @@
var variantCulture = variant.language ? variant.language.culture : "invariant";
var variantSegment = variant.segment || null;
// Check if we already have this editor open, if so, do nothing.
if (vm.editors.find((editor) => (!editor.content.language || editor.content.language.culture === variantCulture) && editor.content.segment === variantSegment)) {
return;
}
@@ -327,25 +208,8 @@
}
else {
//Update the 'active' variant for this editor
var editor = vm.editors[editorIndex];
//set all variant drop down items as inactive for this editor and then set the selected one as active
for (var i = 0; i < editor.content.variants.length; i++) {
editor.content.variants[i].active = false;
}
variant.active = true;
//get the variant content model and initialize the editor with that
var contentVariant = _.find(vm.content.variants,
function (v) {
return (!v.language || v.language.culture === variantCulture) && v.segment === variantSegment;
});
editor.content = initVariant(contentVariant, editorIndex);
//update the editors collection
insertVariantEditor(editorIndex, contentVariant);
insertVariantEditor(editorIndex, variant);
}
}
src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorcontentheader.directive.js
+21 -37
View File
@@ -5,6 +5,9 @@
function link(scope) {
console.log("scope.content", scope.content);
console.log("scope.content.variants", scope.content.variants);
var unsubscribe = [];
if (!scope.serverValidationNameField) {
@@ -14,7 +17,7 @@
scope.serverValidationAliasField = "Alias";
}
scope.isNew = scope.content.state == "NotCreated";
scope.isNew = scope.editorContent.state == "NotCreated";
localizationService.localizeMany([
scope.isNew ? "placeholders_a11yCreateItem" : "placeholders_a11yEdit",
@@ -23,7 +26,7 @@
scope.a11yMessage = data[0];
scope.a11yName = data[1];
if (!scope.isNew) {
scope.a11yMessage += " " + scope.content.name;
scope.a11yMessage += " " + scope.editorContent.name;
} else {
var name = editorState.current.contentTypeName;
@@ -32,8 +35,8 @@
}
});
scope.vm = {};
scope.vm.hasVariants = false;
scope.vm.dropdownOpen = false;
scope.vm.currentVariant = "";
scope.vm.variantsWithError = [];
scope.vm.defaultVariant = null;
@@ -42,7 +45,6 @@
function checkErrorsOnOtherVariants() {
var check = false;
angular.forEach(scope.content.variants, function (variant) {
// SEGMENTS_TODO: Check that this correction is okay, can we even see the active var here?
if (variant.active !== true && scope.variantHasError(variant)) {
check = true;
}
@@ -51,7 +53,6 @@
}
function onVariantValidation(valid, errors, allErrors, culture, segment) {
// SEGMENTS_TODO: See wether we can use errors, allErrors?
var index = scope.vm.variantsWithError.findIndex((item) => item.culture === culture && item.segment === segment)
if(valid === true) {
if (index !== -1) {
@@ -67,14 +68,17 @@
function onInit() {
// find default.
// find default + check if we have variants.
angular.forEach(scope.content.variants, function (variant) {
if (variant.language !== null && variant.language.isDefault) {
scope.vm.defaultVariant = variant;
}
if (variant.language !== null || variant.segment !== null) {
scope.vm.hasVariants = true;
}
});
setCurrentVariant();
checkErrorsOnOtherVariants();
angular.forEach(scope.content.apps, (app) => {
if (app.alias === "umbContent") {
@@ -93,15 +97,6 @@
}
function setCurrentVariant() {
angular.forEach(scope.content.variants, function (variant) {
if (variant.active) {
scope.vm.currentVariant = variant;
checkErrorsOnOtherVariants();
}
});
}
function getCultureFromVariant(variant) {
return variant.language ? variant.language.culture : null;
}
@@ -146,40 +141,28 @@
scope.onOpenInSplitView({ "variant": variant });
}
};
/**
* keep track of open variants - this is used to prevent the same variant to be open in more than one split view
* @param {any} variant
*/
scope.variantIsOpen = function (variant) {
// SEGMENTS_TODO: ... does this work?
if (scope.content.variants.find((v) => variant.active === true && (getCultureFromVariant(v) === getCultureFromVariant(variant)) && variant.segment === variant.segment)) {
console.log("VARIANT IS OPEN")
return;
}
console.log("VARIANT IS closed", scope.content.variants)
}
/**
* Check whether a variant has a error, used to display errors in variant switcher.
* @param {any} culture
*/
scope.variantHasError = function(variant) {
// if we are looking for the default language we also want to check for invariant.
if (variant.language.culture === scope.vm.defaultVariant.language.culture && variant.segment === null) {
if(scope.vm.variantsWithError.find((item) => item.culture === "invariant" && item.segment === null) !== undefined) {
return true;
if(variant.language) {
// if we are looking for the variant with default language then we also want to check for invariant variant.
if (variant.language.culture === scope.vm.defaultVariant.language.culture && variant.segment === null) {
if(scope.vm.variantsWithError.find((item) => item.culture === "invariant" && item.segment === null) !== undefined) {
return true;
}
}
}
if(scope.vm.variantsWithError.find((item) => item.culture === variant.language.culture && item.segment === variant.segment) !== undefined) {
if(scope.vm.variantsWithError.find((item) => (!variant.language || item.culture === variant.language.culture) && item.segment === variant.segment) !== undefined) {
return true;
}
return false;
}
onInit();
/*
//watch for the active culture changing, if it changes, update the current variant
if (scope.content.variants) {
scope.$watch(function () {
@@ -196,7 +179,7 @@
}
});
}
*/
scope.$on('$destroy', function () {
for (var u in unsubscribe) {
unsubscribe[u]();
@@ -216,6 +199,7 @@
menu: "=",
hideActionsMenu: "<?",
content: "=",
editorContent: "=",
hideChangeVariant: "<?",
onSelectNavigationItem: "&?",
onSelectAnchorItem: "&?",
src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorsubview.js
+2 -1
View File
@@ -6,7 +6,7 @@
**/
function EditorSubViewDirective() {
function link(scope, el, attr, ctrl) {
function link(scope) {
//The model can contain: view, viewModel, name, alias, icon
if (!scope.model.view) {
@@ -20,6 +20,7 @@
templateUrl: 'views/components/editor/umb-editor-sub-view.html',
scope: {
model: "=",
variant: "=?",
content: "="
},
link: link
src/Umbraco.Web.UI.Client/src/views/components/content/umb-content-node-info.html
+5 -5
View File
@@ -44,7 +44,7 @@
<umb-box-header
title="{{historyLabel}}">
<umb-button
ng-hide="node.trashed"
type="button"
@@ -64,7 +64,7 @@
<umb-load-indicator ng-show="loadingAuditTrail"></umb-load-indicator>
<div ng-show="auditTrail.length === 0" style="padding: 10px;">
<umb-empty-state
<umb-empty-state
position="center"
size="small">
<localize key="content_noChanges"></localize>
@@ -79,7 +79,7 @@
<div class="history-item__break">
<div class="history-item__avatar">
<umb-avatar
<umb-avatar
color="secondary"
size="xs"
name="{{item.userName}}"
@@ -105,7 +105,7 @@
<localize key="auditTrails_{{ item.logType | lowercase }}" tokens="[item.parameters]">{{ item.comment }}</localize>
</span>
</div>
</div>
@@ -126,7 +126,7 @@
</div>
<div class="umb-package-details__sidebar">
<umb-box data-element="node-info-general">
<umb-box-header title-key="general_general"></umb-box-header>
<umb-box-content class="block-form">
src/Umbraco.Web.UI.Client/src/views/components/content/umb-tabbed-content.html
+5 -5
View File
@@ -1,6 +1,6 @@
<div>
<ng-form name="tabbedContentForm">
<div class="umb-group-panel" retrive-dom-element="registerPropertyGroup(element[0], attributes.appAnchor)" data-app-anchor="{{group.id}}" data-element="group-{{group.alias}}" ng-repeat="group in content.tabs track by group.label">
<div class="umb-group-panel" retrive-dom-element="registerPropertyGroup(element[0], attributes.appAnchor)" data-app-anchor="{{group.id}}" data-element="group-{{group.alias}}" ng-repeat="group in variant.tabs track by group.label">
<div class="umb-group-panel__header">
<div id="group-{{group.id}}">{{ group.label }}</div>
@@ -11,13 +11,13 @@
data-element="property-{{property.alias}}"
ng-repeat="property in group.properties track by property.alias"
property="property"
show-inherit="content.variants.length > 1 && ((!activeVariant.language.isDefault && !property.culture) || (activeVariant.segment && !property.segment)) && !property.unlockInvariantValue"
show-inherit="content.variants.length > 1 && ((!variant.language.isDefault && !property.culture) || (variant.segment && !property.segment)) && !property.unlockInvariantValue"
inherits-from="defaultVariant.language.name">
<div ng-class="{'o-40 cursor-not-allowed': content.variants.length > 1 && ((!activeVariant.language.isDefault && !property.culture) || (activeVariant.segment && !property.segment)) && !property.unlockInvariantValue}">
<div ng-class="{'o-40 cursor-not-allowed': content.variants.length > 1 && ((!variant.language.isDefault && !property.culture) || (variant.segment && !property.segment)) && !property.unlockInvariantValue}">
<umb-property-editor
model="property"
preview="content.variants.length > 1 && ((!activeVariant.language.isDefault && !property.culture) || (activeVariant.segment && !property.segment)) && !property.unlockInvariantValue">
preview="content.variants.length > 1 && ((!variant.language.isDefault && !property.culture) || (variant.segment && !property.segment)) && !property.unlockInvariantValue">
</umb-property-editor>
</div>
@@ -27,7 +27,7 @@
</div>
<umb-empty-state
ng-if="content.tabs.length === 0"
ng-if="variant.tabs.length === 0"
position="center">
<localize key="content_noProperties"></localize>
</umb-empty-state>
src/Umbraco.Web.UI.Client/src/views/components/content/umb-variant-content-editors.html
+1 -2
View File
@@ -1,7 +1,6 @@
<div class="umb-split-views">
<div class="umb-split-view"
ng-repeat="editor in vm.editors track by editor.culture+'.'+editor.segment"
ng-class="{'umb-split-view--collapsed': editor.collapsed}">
ng-repeat="editor in vm.editors track by editor.culture+'.'+editor.segment">
<umb-variant-content
page="vm.page"
src/Umbraco.Web.UI.Client/src/views/components/content/umb-variant-content.html
+7 -6
View File
@@ -5,13 +5,14 @@
<div class="umb-split-view__content" ng-show="!vm.editor.loading">
<ng-form name="contentHeaderForm" ng-if="vm.editor.content.apps.length > 0">
<ng-form name="contentHeaderForm" ng-if="vm.content.apps.length > 0">
<umb-editor-content-header
menu="vm.page.menu"
hide-menu="vm.page.hideActionsMenu"
name="vm.editor.content.name"
name-disabled="vm.nameDisabled"
content="vm.editor.content"
editor-content="vm.editor.content"
content="vm.content"
on-select-navigation-item="vm.selectApp(item)"
on-select-anchor-item="vm.selectAppAnchor(item, anchor)"
hide-change-variant="vm.page.hideChangeVariant"
@@ -25,7 +26,7 @@
</umb-editor-content-header>
</ng-form>
<umb-editor-container ng-if="vm.editor.content.apps.length > 0">
<umb-editor-container ng-if="vm.content.apps.length > 0">
<!-- Deleted Context Message Bar (Displayed when viewing node in recycle bin) -->
<div ng-show="vm.content.trashed" class="umb-editor--trashed-message">
@@ -33,14 +34,14 @@
</div>
<div class="umb-editor-sub-views">
<div ng-repeat="app in vm.editor.content.apps track by app.alias">
<umb-editor-sub-view model="app" content="vm.content" />
<div ng-repeat="app in vm.content.apps track by app.alias">
<umb-editor-sub-view model="app" content="vm.content" variant="vm.editor.content" />
</div>
</div>
</umb-editor-container>
<umb-empty-state
ng-if="vm.editor.content.apps.length === 0"
ng-if="vm.content.apps.length === 0"
position="center">
<localize key="content_noProperties"></localize>
</umb-empty-state>
src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-content-header.html
+10 -10
View File
@@ -39,25 +39,25 @@
autocomplete="off" maxlength="255" />
</ng-form>
<a ng-if="content.variants.length > 0 && hideChangeVariant !== true" class="umb-variant-switcher__toggle" href="" ng-click="vm.dropdownOpen = !vm.dropdownOpen" ng-class="{'--error': vm.errorsOnOtherVariants}">
<span ng-bind="::getVariantDisplayName(vm.currentVariant)"></span>
<button type="button" ng-if="vm.hasVariants === true && hideChangeVariant !== true" class="umb-variant-switcher__toggle" ng-click="vm.dropdownOpen = !vm.dropdownOpen" ng-class="{'--error': vm.errorsOnOtherVariants}">
<span ng-bind="getVariantDisplayName(editorContent)"></span>
<ins class="umb-variant-switcher__expand" ng-class="{'icon-navigation-down': !vm.dropdownOpen, 'icon-navigation-up': vm.dropdownOpen}">&nbsp;</ins>
</a>
</button>
<span ng-if="hideChangeVariant" class="umb-variant-switcher__toggle">
<span ng-bind="::getVariantDisplayName(variant)"></span>
<span ng-if="vm.hasVariants === true && hideChangeVariant" class="umb-variant-switcher__toggle">
<span ng-bind="getVariantDisplayName(editorContent)"></span>
</span>
<umb-dropdown ng-if="vm.dropdownOpen" style="min-width: 100%; max-height: 250px; overflow-y: auto; margin-top: 5px;" on-close="vm.dropdownOpen = false" umb-keyboard-list>
<umb-dropdown-item
ng-repeat="variant in content.variants"
ng-repeat="variant in content.variants track by $index"
class="umb-variant-switcher__item"
ng-class="{'--current': variant.active, '--not-allowed': variantIsOpen(variant), '--error': variantHasError(variant)}"
ng-class="{'--current': variant === editorContent, '--not-allowed': variant.active && vm.dropdownOpen, '--error': variantHasError(variant)}"
>
<a href="" class="umb-variant-switcher__name-wrapper" ng-click="selectVariant($event, variant)" prevent-default>
<span class="umb-variant-switcher__name" ng-bind="::getVariantDisplayName(variant)"></span>
<button type="button" class="umb-variant-switcher__name-wrapper" ng-click="selectVariant($event, variant)" prevent-default>
<span class="umb-variant-switcher__name" ng-bind="getVariantDisplayName(variant)"></span>
<umb-variant-state variant="variant" class="umb-variant-switcher__state"></umb-variant-state>
</a>
</button>
<div ng-if="splitViewOpen !== true && !variant.active" class="umb-variant-switcher__split-view" ng-click="openInSplitView($event, variant)">Open in split view</div>
</umb-dropdown-item>
</umb-dropdown>
src/Umbraco.Web.UI.Client/src/views/content/apps/content/content.controller.js
+4 -5
View File
@@ -16,17 +16,16 @@
vm.loading = true;
function onInit() {
//get the variant by index (see notes above)
vm.content = $scope.content.variants[$scope.model.viewModel];
serverValidationManager.notify();
vm.loading = false;
timeout = null;// ensure timeout is set to null, so we know that its not running anymore.
//if this variant has a culture/language assigned, then we need to watch it since it will change
//if the language drop down changes and we need to re-init
if (vm.content.language) {
if ($scope.variant.language) {
unbindLanguageWatcher = $scope.$watch(function () {
return vm.content.language.culture;
return $scope.variant.language.culture;
}, function (newVal, oldVal) {
if (newVal !== oldVal) {
requestUpdate();
@@ -37,7 +36,7 @@
}
unbindSegmentWatcher = $scope.$watch(function () {
return vm.content.segment;
return $scope.variant.segment;
}, function (newVal, oldVal) {
if (newVal !== oldVal) {
requestUpdate();
src/Umbraco.Web.UI.Client/src/views/content/apps/content/content.html
+3 -2
View File
@@ -2,7 +2,8 @@
<umb-tabbed-content
ng-if="!vm.loading"
content="vm.content">
variant="variant"
content="content">
</umb-tabbed-content>
</div>