Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 2 commits into from
May 19, 2021
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e19a598
#10274 Variant sorting should take into account that there might not …
nielslyngsoe May 18, 2021
1ec5bfc
ensure the use of infiniteEditors is only done when infiniteEditors i…
nielslyngsoe May 18, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
75 changes: 41 additions & 34 deletions src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbfocuslock.directive.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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){
lastKnownElement = editorInfo;

// Clear the array
clearLastKnownFocusedElements();
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
Expand Down Expand Up @@ -149,20 +153,24 @@
}

function cleanupEventHandlers() {
var activeEditor = infiniteEditors[infiniteEditors.length - 1];
var inactiveEditors = infiniteEditors.filter(editor => editor !== activeEditor);

if(inactiveEditors.length > 0) {
for (var index = 0; index < inactiveEditors.length; index++) {
var inactiveEditor = inactiveEditors[index];

// Remove event handlers from inactive editors
inactiveEditor.removeEventListener('keydown', handleKeydown);
//if we're in infinite editing mode
if(infiniteEditors.length > 0) {
var activeEditor = infiniteEditors[infiniteEditors.length - 1];
var inactiveEditors = infiniteEditors.filter(editor => editor !== activeEditor);

if(inactiveEditors.length > 0) {
for (var index = 0; index < inactiveEditors.length; index++) {
var inactiveEditor = inactiveEditors[index];

// Remove event handlers from inactive editors
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);
}
}

Expand All @@ -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();
}
cleanupEventHandlers();

getFocusableElements(targetElm);

Expand Down Expand Up @@ -204,17 +209,19 @@
// Make sure to disconnect the observer so we potentially don't end up with having many active ones
disconnectObserver = true;

// Pass the correct editor in order to find the focusable elements
var newTarget = infiniteEditors[infiniteEditors.length - 2];
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){
// Setting closing till true will let us re-apply the last known focus to then opened layer that then becomes
// active
closingEditor = true;
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;

onInit(newTarget);
onInit(newTarget);

return;
return;
}
}

// Clear lastKnownFocusableElements
Expand Down
15 changes: 8 additions & 7 deletions src/Umbraco.Web.UI.Client/src/common/services/contenteditinghelper.service.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand All @@ -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;
}
Expand Down