Основные модули системы

Модуль утилиты (cybervala.utils.js)

Класс utils содержит основные функции инициализации, обновления и подготовки интерфейсных элементов:

• tooltip-подсказки (data-tooltip)
• переключение классов (data-classtoggle)
• вкладки (tabs) с динамической загрузкой
• навигационные breadcrumbs
• бургер-меню (burger)
• пагинация (pagination)
• рейтинг (rating)

Индикатор загрузки (loadingIndicator)

Отображает спиннер во время AJAX-запросов с поддержкой:

• show() - показать индикатор
• hide() - скрыть индикатор
• setHtml() - изменить HTML содержимое

Загрузчик файлов (uploader)

Поддерживает:

• Drag&Drop загрузку
• Автоматическое изменение размеров изображений
• Обрезку изображений по шаблону
• Пакетную отправку файлов
• Прогресс-бар загрузки

Уведомления (notify)

Система сообщений с возможностью:

• Добавления уведомлений разных типов (info, success, error)
• Автозакрытия
• Ручного закрытия крестиком

Модуль форм (cybervela.forms.js)

Модуль реализует интерактивные элементы редактирования данных:

• Excel-загрузчик - активация через клик по label
• Редактируемые поля:
• Текстовые поля и textarea по типу data-type
• Сохранение при потере фокуса или Enter
• Восстановление исходного значения при отмене
• Семантические события:
• Двойной клик - режим редактирования
• Одиночный клик - переход по ссылке
• Обработка сочетаний клавиш (Ctrl/Cmd + клик)
• Интеграция с сервером - автоматическая отправка формы после редактирования

Модуль модальные окна (cybervela.modals.js)

Модуль обеспечивает работу с диалоговыми окнами и диалогами:

• Динамические окна:
• Создание через атрибут `data-modal`
• Конфигурация через параметры: id, locked, classes, nocache, closebtn
• Поддержка AJAX-загрузки содержимого по href
• Интеграция с loadingIndicator для отображения загрузки
• Режимы кэширования/без кэша
• Возможность закрытия по клику вне окна (unsteady)
• Диалоговые окна (dialogBox)**:
• `alert()` - простые информационные окна
• `confirm()` - окна подтверждения действий
• `prompt()` - окна ввода текста
• Поддержка callback-функций для обработки результатов
• Управление стеком окон:
• Хранение активных окон в массиве `windows`
• Счетчик блокировок (`faders`) для управления скроллом
• Автоматическое удаление окон после закрытияМодальные окна (modals)

Модуль профиль пользователя (cybervela.userprofile.js)

Модуль управляет личными данными пользователя и процессами авторизации:

• Загрузка данных:
• Инициализация через `loadData()` с использованием AJAX
• Парсинг JSON-структур (fullname, contacts, aboutme)
• Обновление DOM через `core.updateBinds()`
• Отрисовка контактов:
• Динамическое создание элементов `.contact` с редактируемыми полями
• Интеграция с `makeContactLink()` для генерации ссылок
• Поддержка иконки редактирования с доступностью (tabindex, role)
• Авторизация и верификация:
• Метод `auth()` для обработки логина и показа формы подтверждения
• Метод `verification()` для проверки кода и таймера повторной отправки
• Интеграция с `core.decount()` для обратного отсчета
• Выход из системы:
• Метод `logout()` с очисткой сессии и опциональным редиректом
• Интеграция с `core.dropSessionToken()` и `setSessionToken()`
• Состояние авторизации:
• Добавление классов `authorized/unauthorized` к `:root`
• Обновление интерфейса через `update()`

Модуль шаблоны (cybervela.templates.js)

Модуль реализует систему шаблонизации для динамической вставки данных в HTML:

• Класс TemplateEngine:
• Рендеринг шаблонов:
• `render(templateId, data)` - основной метод для отрисовки
• `processTemplate()` - обработка всех типов директив
• Поддержка синтаксиса:
• Условия `{#if condition}...{/if}`
• Циклы `{#each array}...{/each}`
• Включения `{#include templateName}`
• JavaScript выражения `{expression}`
• Безопасность:
• Экранирование HTML через `escapeHtml()`
• Декодирование HTML-сущностей через `decodeHtmlEntities()`
• Использование безопасного контекста `createSafeContext()`
• Работа с данными:
• Получение вложенных значений `getNestedValue()`
• Вычисление выражений `evaluateExpression()`
• Дополнительные функции:
• `renderToElement()` - создание DOM-элемента из шаблона
• Встроенные функции для работы с массивами, строками, числами и датами
• Класс templates:
• Управление шаблонами:
• `set(container)` - загрузка шаблонов из DOM
• `get(id)` - получение шаблонов по идентификатору
• Архитектура:
• Хранение шаблонов в массиве `instances`
• Интеграция:
• Работа с DOM и динамическим контентом
• Совместимость с другими модулями через `core` зависимости

Модуль слайдеры (cybervela.sliders.js)

Модуль реализует карусельный компонент с поддержкой навигации, индикаторов и свайпов:

• Основные классы:
• Slider - отдельный экземпляр слайдера
• sliders - менеджер слайдеров
• Функциональность:
• Инициализация:
• Автоматическое создание ID для контейнеров
• Поддержка нескольких слайдеров на странице
• Структура:
• `.slider-list > .slider-track` - контейнер для слайдов
• `.item` - отдельный слайд
• `.prev/.next` - стрелки навигации
• `.indicators` - индикаторы позиции
• Позиционирование:
• Адаптивная ширина слайдов
• Пересчет размеров при загрузке изображений
• Обработка изменения размера окна
• Навигация:
• Клик по стрелкам
• Клик по индикаторам
• Свайпы (touch/mouse)
• Блокировка кнопок при достижении концов
• Анимация:
• CSS transition для плавного перемещения
• Управление состоянием через `slideTo()`
• Методы:
• `next()` - следующий слайд
• `prev()` - предыдущий слайд
• `goTo(index)` - переход к конкретному слайду
• `update()` - принудительное обновление позиции
• Интеграция:
• Работа с DOM-элементами через jQuery
• События `resize`, `mousedown`, `touchstart`
• Обработка состояния через `current` индекс
• Особенности:
• Автоматическое определение количества слайдов
• Защита от выхода за границы (первый/последний слайд)
• Адаптивность к изменению размеров окна

Модуль каталоги (cybervela.catalogs.js)

Модуль реализует систему отображения и фильтрации каталогов с поддержкой шаблонов, AJAX-загрузки и интерактивных фильтров:

• Класс catalog:
• Основная функциональность:
• Инициализация через конструктор с параметрами (categories, caption)
• Загрузка данных через `loadData()` с использованием AJAX
• Рендеринг элементов через `drawCatalog()` с выбором шаблона
• Поддержка нескольких типов шаблонов и порядка выбора
• Шаблонизация:
• Интеграция с `TemplateEngine` для рендеринга элементов
• Автоматический выбор шаблона по типу или порядку (order/inverse/random)
• Резервный шаблон при отсутствии подходящих
• Методы:
• `renderItems(items, template)` - отрисовка элементов
• `selectTemplate(templates, order)` - выбор шаблона
• `drawPosition(template, data)` - отрисовка отдельного элемента
• Класс catalogs:
• Управление экземплярами:
• Счетчик загруженных экземпляров (`loadedInstances`)
• Автоматическое создание ID для контейнеров
• Обработка завершения загрузки всех экземпляров
• Интеграция:
• Работа с DOM-элементами через jQuery
• События инициализации/обновления
• Фильтры:
• Базовый класс FilterBase:
• Общая логика для всех фильтров (значения, обработчики событий)
• Методы управления состоянием (enable/disable, reset)
• Типы фильтров:
• `ListCheckbox` - чекбоксы с опцией "Все"
• `ListColorsCheckbox` - цветовые фильтры с визуальным представлением
• `Toggle` - переключатель вкл/выкл
• `RangeSlider` - слайдер диапазона значений
• `Rating` - рейтинг с звездами и чекбоксами "N и больше"
• Особенности:
• Реактивное обновление значений
• Поддержка кастомных обработчиков onChange
• Валидация и ограничение значений
• Интеграция:
• Связь с `core` для управления модулями
• Поддержка динамического контента через шаблоны