Skip to content
Snippets Groups Projects
Commit e4ab4cdc authored by Justin Toupin's avatar Justin Toupin
Browse files

Refactored the way keyboard movement works for improved stability / performance.

parent 2b2b5474
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
js/layout-paragraphs-widget.js
+ 91
− 86
View file @ e4ab4cdc
......@@ -421,6 +421,62 @@
updateDisabled($widget);
updateLayoutControls($widget);
}
/**
* An array reducer to massage the list of posible move positions when an item is moving down.
* Layout containers are moved to *after* their contents to correctly order the available DOM positions.
* @param {Array} results The results to return.
* @param {Array} item The current item.
* @return {Object} The massaged results.
*/
function massagePositionsDown(results, item) {
const level = $(item).parents(".layout-paragraphs-layout").length;
if (level < results.level) {
const last = results.layouts.pop();
results.positions.push(last);
}
if ($(item).is(".layout-paragraphs-layout") && item !== results.item) {
// We need to add layout containers *after* their contents.
results.layouts.push(item);
} else {
// All other items just get added to the list.
// The item being moved always gets added to the list.
results.positions.push(item);
}
results.level = level;
return results;
}
/**
* An array reducer to massage the list of posible move positions when an item is moving down.
* Regions are moved to *after* their contents to correctly order the available DOM positions.
* @param {Array} results The results to return.
* @param {Array} item The current item.
* @return {Object} The massaged results.
*/
function massagePositionsUp(results, item) {
const region =
$(item).closest(".layout-paragraphs-layout-region").length > 0
? $(item).closest(".layout-paragraphs-layout-region")[0]
: null;
if (region !== results.region && results.region !== null) {
// Move regions to *after* their contents.
results.positions.push(results.region);
}
if (
!$(item).is(".layout-paragraphs-layout-region") &&
!$(item).is(".layout-paragraphs-disabled-items__items")
) {
// Always just add non-region items to the list,
// but never add the disabled bin when moving up.
results.positions.push(item);
}
if ($(item).is(".layout-paragraphs-disabled-items__items")) {
// If we're moving up, add the active items container as next
// above the disabled bin.
results.positions.push(results.activeItems);
}
results.region = region;
return results;
}
function move(e) {
const { $layoutItem } = e.data;
const $widget = $layoutItem.closest(".layout-paragraphs-field");
......@@ -451,99 +507,49 @@
$widget.find(".layout-paragraphs-moving-message").remove();
// Build a list of all possible positions.
const allPositions = $(
const positions = $(
".layout-paragraphs-item, .layout-paragraphs-layout-region, .layout-paragraphs-disabled-items__items",
$widget
)
.toArray()
// Todo: make sure this works!
.filter(i => !$.contains($layoutItem[0], i));
const lastActivePos = allPositions.findIndex(el =>
$(el).hasClass("layout-paragraphs-disabled-items__items")
);
// Add the "active items" container as the last item before the disabled bin.
allPositions.splice(lastActivePos, 0, $(".active-items", $widget)[0]);
// The last posible position will always be the disabled bin; append it to the list.
allPositions.push(
$(".layout-paragraphs-disabled-items__items", $widget)[0]
);
const filterFunctions = {
up: massagePositionsUp,
down: massagePositionsDown
};
const filteredPositions = positions.reduce(filterFunctions[dir], {
positions: [],
layouts: [],
level: 0,
region: null,
item: $layoutItem[0],
activeItems: $(".active-items", $widget)[0]
}).positions;
// Get the position (index) of the current item we are moving.
const pos = allPositions.findIndex(el => el === $layoutItem[0]);
const pos = filteredPositions.findIndex(el => el === $layoutItem[0]);
// Loop through all possible positons, attempting to move to the next in line.
// If a move if not valid, we continue looping until we reach a valid move.
// Usually this results in simply bumping one position forward/backward.
for (
let i = pos + (dir === "up" ? -1 : 1);
allPositions[i] !== undefined;
filteredPositions[i] !== undefined;
i += dir === "up" ? -1 : 1
) {
let $next = $(allPositions[i]);
let method;
const $next = $(filteredPositions[i]);
// Establish the correct jQuery method for moving the item
// based on what the next item is and which direction we are moving.
const methods =
$next.is(".layout-paragraphs-layout-region") ||
$next.is(".active-items")
? ["append", "prepend"]
: ["before", "after"];
const method = dir === "up" ? methods[0] : methods[1];
let valid = true;
if ($next.hasClass("layout-paragraphs-layout-region")) {
// Moving into a region.
if (dir === "up" && $layoutItem.parent()[0] === $next[0]) {
// If we are moving up and at the top of a region, we need to
// break out to the next position up the chain.
valid = false;
} else {
method = dir === "up" ? "append" : "prepend";
}
} else if ($next.hasClass("layout-paragraphs-layout")) {
// Moving into a layout.
if (dir === "down" && $layoutItem.parent()[0] === $next.parent()[0]) {
// When moving down, we need to prevent skipping an entire layout
// and instead move ahead into the first avialable region inside the layout.
valid = false;
} else {
method = "before";
}
} else if (
$next.hasClass("layout-paragraphs-item") &&
$next.parent()[0] === $layoutItem.parent()[0]
) {
// Moving forward or backward ahead or before a sibling item.
method = dir === "up" ? "before" : "after";
} else if ($next.hasClass("layout-paragraphs-item")) {
// Moving out of one region and either before or after a paragraph item.
method = dir === "up" ? "after" : "before";
} else if (
$next.hasClass("active-items") &&
$layoutItem.parents(
".layout-paragraphs-layout-region, .layout-paragraphs-disabled-items__items"
).length > 0
) {
// If in a region or in the disabled bin and the active items container is next,
// move to the end of active items.
method = "append";
} else if (
$next.hasClass("active-items") &&
$layoutItem.parent().hasClass("active-items")
) {
// If we're at the end of the active items, bump ahead to next item.
valid = false;
} else if (
$next.hasClass("layout-paragraphs-disabled-items__items") &&
$layoutItem.parent().hasClass("active-items")
) {
// If not in a region and disabled bin is next, dump the item into disabled.
method = "prepend";
} else if (
$next.hasClass("layout-paragraphs-disabled-items__items") &&
dir === "down"
) {
method = "append";
} else if (
$next.hasClass("layout-paragraphs-disabled-items__items") &&
dir === "up"
) {
$next = $(".active-items", $widget);
method = "append";
}
// Check for compliance with widget settings.
if (
widgetSettings.requireLayouts &&
$layoutItem.hasClass("layout-paragraphs-layout") === false &&
!$layoutItem.is(".layout-paragraphs-layout") &&
$next.closest(".layout-paragraphs-disabled-items__items").length ===
0 &&
$next.closest(".layout-paragraphs-layout-region").length === 0
......@@ -551,8 +557,9 @@
valid = false;
}
if (
widgetSettings.maxDepth <
$next.parents(".layout-paragraphs-layout-region").length
$layoutItem.is(".layout-paragraphs-layout") &&
$next.parents(".layout-paragraphs-layout").length >
widgetSettings.maxDepth
) {
valid = false;
}
......@@ -712,14 +719,12 @@
return false;
}
}
if (widgetSettings.maxDepth) {
if (
$(el).is(".layout-paragraphs-layout") &&
$(target).parents(".layout-paragraphs-layout").length >
widgetSettings.maxDepth
) {
return false;
}
if (
$(el).is(".layout-paragraphs-layout") &&
$(target).parents(".layout-paragraphs-layout").length >
widgetSettings.maxDepth
) {
return false;
}
if ($(target).parents(".layout-paragraphs-disabled-items").length) {
if (
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment