Cybervela - это JavaScript фреймворк версии 2.0.2, разработанный для создания веб-приложений. Фреймворк построен на основе jQuery 3.7 и использует модульную архитектуру.

Основные компоненты

1. Ядро (cybervela.js)

• Основной класс фреймворка, который инициализирует все модули
• Управляет сессиями пользователей
• Обрабатывает AJAX-запросы к серверу
• Предоставляет базовые утилиты для работы с данными

Подробнее

2. Утилиты (cybervela.utils.js)

Включает несколько важных подсистем:

• Тултипы — система всплывающих подсказок
• Переключатели классов — управление CSS-классами элементов
• Диалоговые окна — реализация alert, confirm и prompt
• Загрузчик файлов — система загрузки файлов с поддержкой drag&drop и предпросмотром изображений
• Индикатор загрузки — визуальное отображение процесса загрузки
• Система уведомлений — вывод информационных сообщений пользователю

Подробнее

3. Формы (cybervela.forms.js)

• Управление HTML-формами
• Валидация данных
• Обработка отправки форм через AJAX

Подробнее

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

• Система модальных окон
• Управление их отображением и скрытием
• Поддержка различных типов модальных окон

Подробнее

5. Профиль пользователя (cybervela.userprofile.js)

• Управление данными пользователя
• Работа с профилем

Подробнее

6. Шаблоны (cybervela.templates.js)

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

• Условных блоков: `{#if condition}...{/if}`
• Циклов: `{#each array}...{/each}`
• Включений других шаблонов: `{#include templateName}`
• Выражений: `{expression}` (поддержка переменных, методов, операций)
• Безопасного контекста выполнения с встроенными функциями (работа с массивами, строками, числами, датами, объектами)
• Интеграции с DOM-шаблонами через класс `templates`

Подробнее

7. Слайдеры (cybervela.sliders.js)

• Модуль для создания и управления слайдерами (каруселями) на странице
• Поддержка навигации, индикаторов и динамического обновления содержимого

Подробнее

8. Каталоги и фильтры (cybervela.catalogs.js)

• Модуль для отображения каталогов товаров или позиций с поддержкой фильтрации
• Включает расширяемую систему фильтров: чекбоксы, цветовые фильтры, диапазоны, рейтинги и т.д.
• Позволяет динамически загружать и отображать данные каталога

Подробнее

Основные возможности

1. Работа с сессиями
   • Хранение токенов сессии
   • Управление данными в localStorage
   • Автоматическая привязка сессии к запросам
2. Система уведомлений
   • Поддержка различных типов уведомлений (info, success, warning, error, danger)
   • Настраиваемое время показа
   • Анимации появления/исчезновения
3. Работа с файлами
   • Drag&drop загрузка
   • Предпросмотр изображений
   • Обрезка изображений
   • Валидация типов файлов
4. UI компоненты
   • Модальные окна
   • Диалоговые окна
   • Тултипы
   • Индикаторы загрузки
5. Сетевое взаимодействие
   • AJAX-запросы к серверу
   • Обработка ошибок
   • Автоматическая привязка сессии

Инициализация

Фреймворк инициализируется скриптом, который размещается в конце HTML-документа или в отдельном файле, подключаемом к странице. Скрипт служит основной точкой входа для инициализации всех необходимых компонентов приложения.

Пример инициализации

<script type="module">
import { cybervela } from '/js/cybervela.js';

var application;

jQuery(document).ready(() => {
  // Initialize application
  application = new cybervela('forms, modals, sliders, userprofile, catalogs', {}, () => {
    jQuery('.curtain').fadeOut();
  });

  window.application = application;
});
</script>

application.notify.add({caption: "Заголовок", text: "Текст сообщения", type: "info"});
application.modals.show({title: "Заголовок", content: "Содержимое"});