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

Backoffice support for viewing segments

Browse Source
This commit is contained in:
Daniël Knippers
2019-08-29 13:23:11 +02:00
parent ec6b38175c
commit 10bf55dbaa
3 changed files with 56 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbvariantcontenteditors.directive.js
+54 -26
View File
@@ -9,7 +9,7 @@
bindings: {
page: "<",
content: "<", // TODO: Not sure if this should be = since we are changing the 'active' property of a variant
culture: "<",
variantId: "<",
onSelectApp: "&?",
onSelectAppAnchor: "&?",
onBack: "&?",
@@ -40,12 +40,14 @@
//Used to track how many content views there are (for split view there will be 2, it could support more in theory)
vm.editors = [];
//Used to track the open variants across the split views
// The values are the variant ids of the currently open variants.
// See getVariantId() for the current format.
vm.openVariants = [];
/** Called when the component initializes */
function onInit() {
prevContentDateUpdated = angular.copy(vm.content.updateDate);
setActiveCulture();
setActiveVariant();
}
/** Called when the component has linked all elements, this is when the form controller is available */
@@ -59,15 +61,15 @@
*/
function onChanges(changes) {
if (changes.culture && !changes.culture.isFirstChange() && changes.culture.currentValue !== changes.culture.previousValue) {
setActiveCulture();
if (changes.variantId && !changes.variantId.isFirstChange() && changes.variantId.currentValue !== changes.variantId.previousValue) {
setActiveVariant();
}
}
/** Allows us to deep watch whatever we want - executes on every digest cycle */
function doCheck() {
if (!angular.equals(vm.content.updateDate, prevContentDateUpdated)) {
setActiveCulture();
setActiveVariant();
prevContentDateUpdated = angular.copy(vm.content.updateDate);
}
}
@@ -79,13 +81,13 @@
}
/**
* Set the active variant based on the current culture (query string)
* Set the active variant based on the current culture + segment (query string)
*/
function setActiveCulture() {
function setActiveVariant() {
// set the active variant
var activeVariant = null;
var activeVariant = null;
_.each(vm.content.variants, function (v) {
if (v.language && v.language.culture === vm.culture) {
if (getVariantId(v) === vm.variantId) {
v.active = true;
activeVariant = v;
}
@@ -105,9 +107,10 @@
if (vm.editors.length > 1) {
//now re-sync any other editor content (i.e. if split view is open)
for (var s = 1; s < vm.editors.length; s++) {
var editorVariantId = getVariantId(vm.editors[s].content);
//get the variant from the scope model
var variant = _.find(vm.content.variants, function (v) {
return v.language.culture === vm.editors[s].content.language.culture;
return getVariantId(v) === editorVariantId;
});
vm.editors[s].content = initVariant(variant, s);
}
@@ -122,19 +125,19 @@
*/
function insertVariantEditor(index, variant) {
var variantCulture = variant.language ? variant.language.culture : "invariant";
var variantId = getVariantId(variant);
//check if the culture at the index is the same, if it's null an editor will be added
var currentCulture = vm.editors.length === 0 || vm.editors.length <= index ? null : vm.editors[index].culture;
//check if the variant at the index is the same, if it's null an editor will be added
var currentVariantId = vm.editors.length === 0 || vm.editors.length <= index ? null : vm.editors[index].variantId;
if (currentCulture !== variantCulture) {
if (currentVariantId !== variantId) {
//Not the current culture which means we need to modify the array.
//NOTE: It is not good enough to just replace the `content` object at a given index in the array
// since that would mean that directives are not re-initialized.
vm.editors.splice(index, 1, {
content: variant,
//used for "track-by" ng-repeat
culture: variantCulture
variantId: variantId
});
}
else {
@@ -143,6 +146,27 @@
}
}
function getVariantId(variant) {
var hasLanguage = variant.language && !!variant.language.culture;
var hasSegment = !!variant.segment;
var sep = ";";
if (!hasLanguage && !hasSegment) {
// Invariant
return "";
} else if (hasLanguage && !hasSegment) {
// Culture only
return variant.language.culture;
} else if (!hasLanguage && hasSegment) {
// Segment only
return sep + variant.segment;
} else {
// Culture and Segment
return variant.language.culture + sep + variant.segment;
}
}
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
@@ -161,7 +185,7 @@
if (!variant.variants) {
variant.variants = _.map(vm.content.variants,
function (v) {
return _.pick(v, "active", "language", "state");
return _.pick(v, "active", "language", "segment", "state");
});
}
else {
@@ -169,13 +193,14 @@
angular.extend(variant.variants,
_.map(vm.content.variants,
function (v) {
return _.pick(v, "active", "language", "state");
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.culture === variant.language.culture) {
if (variant.variants[i].language.culture === variant.language.culture &&
variant.variants[i].segment === variant.segment) {
variant.variants[i].active = true;
}
else {
@@ -183,12 +208,13 @@
}
}
var variantId = getVariantId(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(variant.language.culture);
if (vm.openVariants && vm.openVariants.length === 0) {
vm.openVariants.push(variantId);
} else {
vm.openVariants[editorIndex] = variant.language.culture;
vm.openVariants[editorIndex] = variantId;
}
}
@@ -221,11 +247,11 @@
* @param {any} selectedVariant
*/
function openSplitView(selectedVariant) {
var selectedCulture = selectedVariant.language.culture;
var variant = getVariantId(selectedVariant);
//Find the whole variant model based on the culture that was chosen
var variant = _.find(vm.content.variants, function (v) {
return v.language.culture === selectedCulture;
return getVariantId(v) === variant;
});
insertVariantEditor(vm.editors.length, initVariant(variant, vm.editors.length));
@@ -282,8 +308,10 @@
*/
function selectVariant(variant, editorIndex) {
var variantId = getVariantId(variant);
// prevent variants already open in a split view to be opened
if(vm.openVariants.indexOf(variant.language.culture) !== -1) {
if (vm.openVariants.indexOf(variantId) !== -1) {
return;
}
@@ -292,7 +320,7 @@
if (editorIndex === 0) {
//If we've made it this far, then update the query string.
//The editor will respond to this query string changing.
$location.search("cculture", variant.language.culture);
$location.search("cculture", variantId);
}
else {
@@ -307,7 +335,7 @@
//get the variant content model and initialize the editor with that
var contentVariant = _.find(vm.content.variants,
function (v) {
return v.language.culture === variant.language.culture;
return getVariantId(v) === variantId;
});
editor.content = initVariant(contentVariant, editorIndex);
src/Umbraco.Web.UI.Client/src/views/components/content/edit.html
+1 -1
View File
@@ -9,7 +9,7 @@
<umb-variant-content-editors
page="page"
content="content"
culture="culture"
variant-id="culture"
on-select-app="appChanged(app)"
on-select-app-anchor="appAnchorChanged(app, anchor)"
on-back="onBack()"
src/Umbraco.Web.UI.Client/src/views/components/content/umb-variant-content-editors.html
+1 -1
View File
@@ -1,6 +1,6 @@
<div class="umb-split-views">
<div class="umb-split-view"
ng-repeat="editor in vm.editors track by editor.culture"
ng-repeat="editor in vm.editors track by editor.variantId"
ng-class="{'umb-split-view--collapsed': editor.collapsed}">
<umb-variant-content