Сортировщик карточек путешественника
Модуль для сортировки карточек представлен в файле travel/travelRoute.js
.
В файле travel/script.js
представлено использование модуля.
Демонстрацию работы можно посмотреть открыв в браузере travel/index.html
.
Формат входных данных
Формат входных данных представляет собой массив с объектами (карточками) cards:
[
{
from: string,
to: string,
transport: {
type: string,
someProp?: string,
someProt?: string
}
}
]
Функции модуля:
travelRoute.createRoute(cards): sortedCards
Cортирует набор карточек, выстраивая цепочку маршрута.
Функция может вернуть null в 3 случаях:
- Если исходный массив карточек пуст;
- Если не удалось определить начало пути, например маршрут закольцован.
- Если из карточек нельзя построить неразрывный маршрут.
travelRoute.formatCards(cards): string[]
Конвертирует массив карточек в строковое представление. Для работы функции необходимо добавить шаблоны всех используемых типов транспорта. Функция вернет null если массив карточек пуст.
travelRoute.addTemplate(type: string, template: string): void
Добавляет шаблон конкретного типа транспорта для того, чтобы карточку можно было конвертировать в строковое представление.
Для каждого типа транспорта будет использоваться свой шаблон.
Шаблон имеет следующий вид:
Text {{prop1}} more text {% text {{prop2}} | default text %}
Где:
{{prop1}}
, {{prop2}}
- названия свойств, которые соответствует свойствам карточки.
{% text {{prop2}} | default text %}
- условная конструкция, если свойство prop2 отсутствует в карточке будет подставлен текст справа от |
то есть default text.
Пример использования:
// Добавляем шаблоны
travelRoute.addTemplate('train', 'Take {{tname}} {{number}} from {{from}} to {{to}}. Train carriage {{carriage}}. Seat {{seat}}.');
travelRoute.addTemplate('bus', 'Take the {{tname}} {{number}} from {{from}} to {{to}}. {% Seat {{seat}} | No seat assigment %}.');
// Создаем массив с карточками
const unsortedCards = [
{
from: 'Barcelona',
to: 'Moscow',
transport: {
type: 'bus',
tname: 'hyper bus',
number: '666',
seat: '13'
}
},
{
from: 'Madrid',
to: 'Barcelona',
transport: {
type: 'train',
tname: 'train',
number: '78A',
carriage: '12',
seat: '45B',
}
}
];
// Передаем массив карточек в метод createRoute, который вернет маршрут (отсортировав карточки).
const cards = travelRoute.createRoute(unsortedCards);
// После конвертируем полученный массив с карточками в строковое представление
const stringCards = travelRoute.formatCards(cards);
Фреймворк для работы с CSS классами
Фреймворк представлен в файле cm/cm.js
.
Демонстрацию работы можно посмотреть открыв в браузере cm/index.html
.
Работа с фреймворком
Для работы с фреймворком достаточно вызвать функцию cm(selector: string, one:boolean)
и указать в качестве selector любой CSS-селектор.
Если аргумент one равен true то будет найден только самый первый результат, по умолчанию значение false - то есть функция ищет все подходящие dom элементы.
Функция возвращает обертку с методами над найденными dom элементами.
Через свойство el доступны сами dom элементы в массиве cm(selector: string).el
Методы
cm(selector).addClass(class: string)
- Добавляет класс элементу/элементам
cm(selector).removeClass(class: string)
- Удаляет класс у элемента/элементов
cm(selector).toggleClass(class: string)
- Переключает класс элементу/элементам (удаляет или добавляет)
Все методы можно "чейнить", тоесть вызывать последовательно:
cm('.class').addClass('new').removeClass('remove');
Статические методы
cm.registerMethod(name: string, function)
- Добавляет новый метод во фреймворк с именем name и функциональностью function. Внутри function через this доступен текущий результат работы функции cm.
Пример использования:
cm.registerMethod('hasClass', function(cl) {
const result = [];
this.el.forEach(node => {
result.push(Boolean(~node.classList.value.search(cl)));
});
return result.length > 1 ? result : result[0];
});