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

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

@@ -40,7 +40,9 @@
function getDomNodes(){
infiniteEditorsWrapper = document.querySelector('.umb-editors');
infiniteEditors = Array.from(infiniteEditorsWrapper.querySelectorAll('.umb-editor'));
if(infiniteEditorsWrapper) {
infiniteEditors = Array.from(infiniteEditorsWrapper.querySelectorAll('.umb-editor') || []);
}
}
function getFocusableElements(targetElm) {
@@ -84,22 +86,24 @@
var defaultFocusedElement = getAutoFocusElement(focusableElements);
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){
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
// 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
// Otherwise set it to the last element in the lastKnownFocusedElements array
if(infiniteEditors.length === 1 && editorInfo !== null){
if(infiniteEditors && infiniteEditors.length === 1){
var editorInfo = infiniteEditors[0].querySelector('.editor-info');
if(infiniteEditors && infiniteEditors.length === 1 && editorInfo !== null) {
lastKnownElement = editorInfo;
// Clear the array
clearLastKnownFocusedElements();
}
}
else {
var lastItemIndex = $rootScope.lastKnownFocusableElements.length - 1;
lastKnownElement = $rootScope.lastKnownFocusableElements[lastItemIndex];
// Remove the last item from the array so we always set the correct lastKnowFocus for each layer
@@ -149,6 +153,8 @@
}
function cleanupEventHandlers() {
//if we're in infinite editing mode
if(infiniteEditors.length > 0) {
var activeEditor = infiniteEditors[infiniteEditors.length - 1];
var inactiveEditors = infiniteEditors.filter(editor => editor !== activeEditor);
@@ -161,10 +167,12 @@
}
}
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);
}
}
}
function onInit(targetElm) {
@@ -173,10 +181,7 @@
// Fetch the DOM nodes we need
getDomNodes();
// Cleanup event handlers if we're in infinite editing mode
if(infiniteEditors.length > 0){
cleanupEventHandlers();
}
getFocusableElements(targetElm);
@@ -204,10 +209,11 @@
// Make sure to disconnect the observer so we potentially don't end up with having many active ones
disconnectObserver = true;
if(infiniteEditors && infiniteEditors.length > 1) {
// 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
// active
closingEditor = true;
@@ -216,6 +222,7 @@
return;
}
}
// Clear lastKnownFocusableElements
clearLastKnownFocusedElements();

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) {
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.
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 compareName = (a, b) => a.displayName.localeCompare(b.displayName);
@@ -813,17 +813,18 @@ function contentEditingHelper(fileManager, $q, $location, $routeParams, editorSt
*/
getSortedVariantsAndSegments: function (variantsAndSegments) {
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 = [];
sortedVariants.forEach((variant) => {
const sortedMatchedSegments = segments.filter(segment => segment.language.culture === variant.language.culture).sort(this.sortVariants);
segments = segments.filter(segment => segment.language.culture !== variant.language.culture);
const sortedMatchedSegments = variantsWithSegments.filter(segment => segment.language && variant.language && segment.language.culture === variant.language.culture).sort(this.sortVariants);
// 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];
})
// if we have segments without a parent language variant we need to add the remaining segments to the array
sortedAvailableVariants = [...sortedAvailableVariants, ...segments.sort(this.sortVariants)];
// if we have segments without a parent language variant we need to add the remaining variantsWithSegments to the array
sortedAvailableVariants = [...sortedAvailableVariants, ...variantsWithSegments.sort(this.sortVariants)];
return sortedAvailableVariants;
}