Добрый вечер, коллеги!
В общем, есть одна интересная задачка - она решена, но оптимизация оставляет желать лучшего, о чем и хотел с вами посоветоваться.
Суть задачи: есть в ангуляре массив строк
["Java", "projects", "dev", "test", "controller", "src", "main", "resources", "application"]
Каждая строка выводится в
li >
a через
*ngFor. Все
li - горизонтально, в строку. Так вот, когда элементы начинают залезать на следующую строку нужно усекать весь список по центру и добавлять туда "..." , то есть было:
Java projects dev test controller src main resources application
А на меньшем экране стало:
Java projects ... main resources application
В данный момент реализовано следующим образом:
public truncateRow() {
if (this.isExcessiveWidth() && this.truncatedItems.length > 3) {
const centralItemIndex = Math.floor((this.truncatedItems.length - 1) / 2);
this.truncatedItems.splice(centralItemIndex, 2, "...");
return setTimeout(() => {
this.truncateRow();
});
}
}
1. Проверяется необходимость усечения методом
isExcessiveWidth (сравнивает высоту
ul родителя с первым
li, если больше = нужно урезать) и наличие как минимум 3 строк в массиве, чтобы с учетом добавления "..." был минимум в 3 строки всегда.
2. Далее берем центральный элемент массива, вырезаем его и последующий, добавляем на их место троеточие.
3. Повторяем до тех пор пока условия не перестанут выполняться.
setTimeout нужен, чтобы дать новым измерениям
ul отрендериться.
Так вот собственно вопрос:
Все это работает, но: процесс "усечения" заметен для человеческого глаза - страдает user experience.
Возможно есть какой то другой подход, без рекурсии, либо с ней, но более оптимизированный?
Средний
