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

#10274 Variant sorting should take into account that there might not be any language (#10278) (#10284)

Browse Source 
Co-authored-by: Niels Lyngsø <nsl@umbraco.com>
Co-authored-by: Mads Rasmussen <madsr@hey.com>
This commit is contained in:
Niels Lyngsø
2021-05-19 12:06:17 +02:00
committed by GitHub
parent 14558aea06
commit 017b56eee1
2 changed files with 46 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbfocuslock.directive.js
View File

@@ -40,7 +40,9 @@
function getDomNodes(){ function getDomNodes(){
infiniteEditorsWrapper = document.querySelector('.umb-editors'); infiniteEditorsWrapper = document.querySelector('.umb-editors');
infiniteEditors = Array.from(infiniteEditorsWrapper.querySelectorAll('.umb-editor')); if(infiniteEditorsWrapper) {
infiniteEditors = Array.from(infiniteEditorsWrapper.querySelectorAll('.umb-editor') || []);
}
} }
function getFocusableElements(targetElm) { function getFocusableElements(targetElm) {
@@ -84,22 +86,24 @@
var defaultFocusedElement = getAutoFocusElement(focusableElements); var defaultFocusedElement = getAutoFocusElement(focusableElements);
var lastKnownElement; var lastKnownElement;
// If an inifite editor is being closed then we reset the focus to the element that triggered the the overlay // If an infinite editor is being closed then we reset the focus to the element that triggered the the overlay
if(closingEditor){ if(closingEditor){
var lastItemIndex = $rootScope.lastKnownFocusableElements.length - 1;
var editorInfo = infiniteEditors[0].querySelector('.editor-info');
// If there is only one editor open, search for the "editor-info" inside it and set focus on it // If there is only one editor open, search for the "editor-info" inside it and set focus on it
// This is relevant when a property editor has been selected and the editor where we selected it from // This is relevant when a property editor has been selected and the editor where we selected it from
// is closed taking us back to the first layer // is closed taking us back to the first layer
// Otherwise set it to the last element in the lastKnownFocusedElements array // Otherwise set it to the last element in the lastKnownFocusedElements array
if(infiniteEditors.length === 1 && editorInfo !== null){ if(infiniteEditors && infiniteEditors.length === 1){
lastKnownElement = editorInfo; var editorInfo = infiniteEditors[0].querySelector('.editor-info');
if(infiniteEditors && infiniteEditors.length === 1 && editorInfo !== null) {
lastKnownElement = editorInfo;
// Clear the array // Clear the array
clearLastKnownFocusedElements(); clearLastKnownFocusedElements();
}
} }
else { else {
var lastItemIndex = $rootScope.lastKnownFocusableElements.length - 1;
lastKnownElement = $rootScope.lastKnownFocusableElements[lastItemIndex]; lastKnownElement = $rootScope.lastKnownFocusableElements[lastItemIndex];
// Remove the last item from the array so we always set the correct lastKnowFocus for each layer // Remove the last item from the array so we always set the correct lastKnowFocus for each layer
@@ -149,20 +153,24 @@
} }
function cleanupEventHandlers() { function cleanupEventHandlers() {
var activeEditor = infiniteEditors[infiniteEditors.length - 1]; //if we're in infinite editing mode
var inactiveEditors = infiniteEditors.filter(editor => editor !== activeEditor); if(infiniteEditors.length > 0) {
var activeEditor = infiniteEditors[infiniteEditors.length - 1];
var inactiveEditors = infiniteEditors.filter(editor => editor !== activeEditor);
if(inactiveEditors.length > 0) { if(inactiveEditors.length > 0) {
for (var index = 0; index < inactiveEditors.length; index++) { for (var index = 0; index < inactiveEditors.length; index++) {
var inactiveEditor = inactiveEditors[index]; var inactiveEditor = inactiveEditors[index];
// Remove event handlers from inactive editors // Remove event handlers from inactive editors
inactiveEditor.removeEventListener('keydown', handleKeydown); inactiveEditor.removeEventListener('keydown', handleKeydown);
}
}
else {
// Why is this one only begin called if there is no other infinite editors, wouldn't it make sense always to clean this up?
// Remove event handlers from the active editor
activeEditor.removeEventListener('keydown', handleKeydown);
} }
}
else {
// Remove event handlers from the active editor
activeEditor.removeEventListener('keydown', handleKeydown);
} }
} }
@@ -173,10 +181,7 @@
// Fetch the DOM nodes we need // Fetch the DOM nodes we need
getDomNodes(); getDomNodes();
// Cleanup event handlers if we're in infinite editing mode cleanupEventHandlers();
if(infiniteEditors.length > 0){
cleanupEventHandlers();
}
getFocusableElements(targetElm); getFocusableElements(targetElm);
@@ -204,17 +209,19 @@
// Make sure to disconnect the observer so we potentially don't end up with having many active ones // Make sure to disconnect the observer so we potentially don't end up with having many active ones
disconnectObserver = true; disconnectObserver = true;
// Pass the correct editor in order to find the focusable elements if(infiniteEditors && infiniteEditors.length > 1) {
var newTarget = infiniteEditors[infiniteEditors.length - 2]; // Pass the correct editor in order to find the focusable elements
var newTarget = infiniteEditors[infiniteEditors.length - 2];
if(infiniteEditors.length > 1){ if(infiniteEditors.length > 1) {
// Setting closing till true will let us re-apply the last known focus to then opened layer that then becomes // Setting closing till true will let us re-apply the last known focus to then opened layer that then becomes
// active // active
closingEditor = true; closingEditor = true;
onInit(newTarget); onInit(newTarget);
return; return;
}
} }
// Clear lastKnownFocusableElements // Clear lastKnownFocusableElements

15
src/Umbraco.Web.UI.Client/src/common/services/contenteditinghelper.service.js
View File

@@ -789,10 +789,10 @@ function contentEditingHelper(fileManager, $q, $location, $routeParams, editorSt
*/ */
sortVariants: function (a, b) { sortVariants: function (a, b) {
const statesOrder = {'PublishedPendingChanges':1, 'Published': 1, 'Draft': 2, 'NotCreated': 3}; const statesOrder = {'PublishedPendingChanges':1, 'Published': 1, 'Draft': 2, 'NotCreated': 3};
const compareDefault = (a,b) => (!a.language.isDefault ? 1 : -1) - (!b.language.isDefault ? 1 : -1); const compareDefault = (a,b) => (a.language && a.language.isDefault ? -1 : 1) - (b.language && b.language.isDefault ? -1 : 1);
// Make sure mandatory variants goes on top, unless they are published, cause then they already goes to the top and then we want to mix them with other published variants. // Make sure mandatory variants goes on top, unless they are published, cause then they already goes to the top and then we want to mix them with other published variants.
const compareMandatory = (a,b) => (a.state === 'PublishedPendingChanges' || a.state === 'Published') ? 0 : (!a.language.isMandatory ? 1 : -1) - (!b.language.isMandatory ? 1 : -1); const compareMandatory = (a,b) => (a.state === 'PublishedPendingChanges' || a.state === 'Published') ? 0 : (a.language && a.language.isMandatory ? -1 : 1) - (b.language && b.language.isMandatory ? -1 : 1);
const compareState = (a, b) => (statesOrder[a.state] || 99) - (statesOrder[b.state] || 99); const compareState = (a, b) => (statesOrder[a.state] || 99) - (statesOrder[b.state] || 99);
const compareName = (a, b) => a.displayName.localeCompare(b.displayName); const compareName = (a, b) => a.displayName.localeCompare(b.displayName);
@@ -813,17 +813,18 @@ function contentEditingHelper(fileManager, $q, $location, $routeParams, editorSt
*/ */
getSortedVariantsAndSegments: function (variantsAndSegments) { getSortedVariantsAndSegments: function (variantsAndSegments) {
const sortedVariants = variantsAndSegments.filter(variant => !variant.segment).sort(this.sortVariants); const sortedVariants = variantsAndSegments.filter(variant => !variant.segment).sort(this.sortVariants);
let segments = variantsAndSegments.filter(variant => variant.segment); let variantsWithSegments = variantsAndSegments.filter(variant => variant.segment);
let sortedAvailableVariants = []; let sortedAvailableVariants = [];
sortedVariants.forEach((variant) => { sortedVariants.forEach((variant) => {
const sortedMatchedSegments = segments.filter(segment => segment.language.culture === variant.language.culture).sort(this.sortVariants); const sortedMatchedSegments = variantsWithSegments.filter(segment => segment.language && variant.language && segment.language.culture === variant.language.culture).sort(this.sortVariants);
segments = segments.filter(segment => segment.language.culture !== variant.language.culture); // remove variants for this culture
variantsWithSegments = variantsWithSegments.filter(segment => !segment.language || segment.language && variant.language && segment.language.culture !== variant.language.culture);
sortedAvailableVariants = [...sortedAvailableVariants, ...[variant], ...sortedMatchedSegments]; sortedAvailableVariants = [...sortedAvailableVariants, ...[variant], ...sortedMatchedSegments];
}) })
// if we have segments without a parent language variant we need to add the remaining segments to the array // if we have segments without a parent language variant we need to add the remaining variantsWithSegments to the array
sortedAvailableVariants = [...sortedAvailableVariants, ...segments.sort(this.sortVariants)]; sortedAvailableVariants = [...sortedAvailableVariants, ...variantsWithSegments.sort(this.sortVariants)];
return sortedAvailableVariants; return sortedAvailableVariants;
} }