2bon

utils (cybervela.utils.js)

Основной класс утилит, содержащий различные вспомогательные функции.

Tooltips (Всплывающие подсказки)

Компонент реализует отображение всплывающих подсказок при наведении на элементы с атрибутом data-tooltip.

Методы

prepare() - Обрабатывает элементы с data-tooltip. Если data-tooltip-src="self" — использует содержимое элемента как текст подсказки и скрывает оригинальный текст.
bind() - Навешивает обработчик события mouseover, создаёт DOM-элемент подсказки, позиционирует его под целевым элементом. При mouseout подсказка исчезает с эффектом fadeOut.

Примеры использования

Базовая подсказка:

<span data-tooltip="Текст подсказки">Наведи сюда</span>

Результат: при наведении отобразится подсказка с текстом "Текст подсказки".

Использование data-tooltip="" data-tooltip-src="self":

<div data-tooltip-src="self">Этот текст станет подсказкой</div>

Результат: содержимое блока скроется, а при наведении отобразится подсказка с тем же текстом.

Позиционирование подсказки:

По умолчанию подсказка отображается под элементом (класс down). Для других позиций можно расширить логику в коде (например, добавить класс up для отображения над элементом).

ClassToggler (Переключатель классов)

Представляет собой JavaScript модуль classtoggler, который реализует функциональность переключения CSS классов через выпадающий список (select).

Модуль состоит из двух основных методов:

prepare() - инициализация и подготовка элементов
bind() - привязка обработчиков событий

Алгоритм работы

Метод prepare():
- - Ищет все элементы с атрибутом data-classtoggle
- - Для каждого найденного элемента:
  - a) Получает список классов из атрибута data-classtoggle (разделенных запятыми)
  - b) Получает подписи (captions) из атрибута data-captions
  - c) Определяет контейнер из атрибута data-container
  - d) Проверяет значение data-default для установки класса по умолчанию
  - e) Проверяет значение data-multiple для определения возможности множественного выбора
- - Создает опции в select-элементе:
  - a) Каждая опция получает класс из списка классов
  - b) Добавляется иконка с префиксом icon-
  - c) Устанавливается значение опции
  - d) Если есть подписи, они добавляются как текст опции
  - e) Если есть значение по умолчанию, соответствующая опция отмечается как выбранная
Метод bind(): - Привязывает обработчик события change к элементам с data-classtoggle
- - При изменении значения select:
  - a) Получает выбранное значение
  - b) Находит контейнер (либо из атрибута data-container, либо родительский элемент)
  - c) Удаляет все классы из списка data-classtoggle у контейнера
  - d) Добавляет новый выбранный класс
  - e) Синхронизирует состояние других select-элементов, которые указывают на тот же контейнер

Базовый синтаксис.

<select data-classtoggle="class1,class2,class3" 
  data-captions="Опция 1,Опция 2,Опция 3"
  data-container="#target-element"
  data-default="class1"
  data-multiple="false">
</select>

Пример:

DialogBox (Диалоговые окна)

Простое сообщение

utils.dialogBox.alert("Текст сообщения");

Сообщение с заголовком и callback

utils.dialogBox.alert({
  title: "Заголовок",
  message: "Текст сообщения",
  callback: function(result) {
  // обработка результата
  }
});

Подтверждение действия

utils.dialogBox.confirm({
  title: "Подтверждение",
  message: "Вы уверены?",
  callback: function(result) {
    if(result) {
      // пользователь нажал OK
    }
  }
});

Запрос ввода

utils.dialogBox.prompt({
  title: "Ввод",
  message: "Введите значение:",
  value: "значение по умолчанию",
  callback: function(result) {
  // result содержит введенное значение
  }
});

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

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

const loader = new loadingIndicator(core, '#container');

Показать индикатор

loader.show();

Скрыть индикатор

loader.hide();

Изменить HTML индикатора

loader.setHtml('<div>Загрузка...</div>');

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

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

utils.uploader.initialize('container-id');

HTML структура:

<div data-container="container-id" data-config='{
  "filesize": 5242880,
  "limit": 50,
  "multiple": "no",
  "imagesresize": "1024:1024",
  "imagesratio": "512:384"
  }'>
  <div>
    <input type="hidden" name="image[]" value="">
    <img src="" alt="">
  </div>
</div>

Параметры конфигурации:

filesize - максимальный размер файла в байтах
limit - максимальное количество файлов
multiple - разрешить множественный выбор (yes/no)
imagesresize - максимальные размеры изображения (ширина:высота)
imagesratio - пропорции для обрезки изображения (ширина:высота)

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

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

const notifier = new notify(4000, 500, '#container');

Добавление уведомления

notifier.add({
caption: "Заголовок",
text: "Текст уведомления",
type: "success", // info, success, warning, error, danger
close_btn: true
});

Параметры конструктора:

timeout - время отображения уведомления (мс)
speed - скорость анимации (мс)
container - селектор контейнера для уведомлений

Типы уведомлений:

info - информационное
success - успешное
warning - предупреждение
error - ошибка
danger - опасность

Система вкладок (Tabs)

Система вкладок реализована как часть класса utils и представляет собой модуль для создания и управления табами на веб-странице.

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

Система инициализируется при создании экземпляра класса utils
Метод prepare() вызывает tabs.prepare() для настройки всех табов на странице.

Основные методы

prepare()

Находит все элементы с классом .tabs на странице
Для каждого найденного экземпляра табов вызывает makeHandles()

makeHandles(instance)

Создает элементы управления для табов
Получает контейнер управления из атрибута data-controls
Получает шаблон из атрибута data-controls-template (опционально)
Для каждой вкладки создает соответствующий элемент управления
Поддерживает различные типы контейнеров (DIV, UL, OL)
Связывает вкладки с элементами управления через bindTab()

bindTab(tab, handle)

Создает обработчик клика для элемента управления
При клике:
- Удаляет класс active у всех соседних элементов управления
- Удаляет класс active у всех соседних вкладок
- Добавляет класс active текущей вкладке и элементу управления

open(cont, value)

Программно открывает вкладку по её значению
Активирует соответствующую ссылку и её контейнер

Алгоритм работы

Инициализация системы:

Создание экземпляра utils
Вызов prepare()
Поиск всех элементов .tabs
Для каждого найденного элемента:
- - Получение контейнера управления
- - Создание элементов управления
- - Связывание вкладок с элементами управления

Создание элементов управления:

Получение контейнера из data-controls
Получение шаблона из data-controls-template (если есть)
Для каждой вкладки:
- - Получение заголовка из data-tab-caption
- - Создание элемента управления
- - Добавление класса active если вкладка активна
- - Связывание с вкладкой
- - Добавление в контейнер управления

Обработка клика по вкладке:

Получение события клика
Деактивация всех соседних элементов управления
Деактивация всех соседних вкладок
Активация текущей вкладки
Активация текущего элемента управления

Использование в HTML

Для использования системы вкладок необходимо:

Создать контейнер с классом .tabhandles
Создать контейнер с классом .tabs
Добавить атрибут data-controls с селектором контейнера управления
Опционально добавить data-controls-template для кастомного шаблона
Создать вкладки с классом .tab
Добавить data-tab-caption для заголовка вкладки

Пример структуры:

<div class="tabhandles"></div>

<div class="tabs" data-controls="#tab-controls">
  <div class="tab" data-tab-caption="Вкладка 1">Содержимое 1</div>
  <div class="tab" data-tab-caption="Вкладка 2">Содержимое 2</div>
</div>

Особенности

Система поддерживает различные типы контейнеров управления (DIV, UL, OL)
Возможность использования кастомных шаблонов для элементов управления
Автоматическая синхронизация состояния активной вкладки
Поддержка программного управления через метод open()
Интеграция с jQuery для кроссбраузерной совместимости

Полнофункциональный компонент выпадающего списка на базе UL/LI. Инициализируется автоматически в utils.prepare() под «шторкой». Каждый корневой UL.dropdown получает собственный JS-инстанс с независимым состоянием и обработчиками.

Возможности

Статическая разметка: авто-обогащение уже существующих ul.dropdown — добавляются иконки, таблицоподобные строки, сворачивание/разворачивание вложенных списков.
Вложенность: если у LI есть дочерний UL.dropdown, слева появляется иконка icon-circle-right, при раскрытии — icon-circle-down.
Без смещения строки: при клике дочерний список показывается строкой ниже, контролируется классом open у вложенного ul.dropdown.child.
Сохранение состояния: развернуто/свернуто сохраняется в localStorage и восстанавливается при перезагрузке.
Загрузка данных: при наличии атрибута data-loadable="..." элементы загружаются с сервера и реактивно отображаются; во время загрузки показывается нижняя строка «загрузка...».

Базовая структура DOM (после инициализации)

Компонент сам оборачивает содержимое LI в строку и добавляет служебные узлы:

ul.dropdown — корневой список
li — элемент
div.dropdown-row — «строка таблицы» для визуального выравнивания
i.toggle.icon-circle-right|icon-circle-down — индикатор наличия/состояния детей
div.dropdown-cell — контейнер пользовательского содержимого
ul.dropdown.child — вложенный список; класс open управляет видимостью

Алгоритм работы

На старте utils.prepare вызывается dropdown.init(), ищутся все ul.dropdown, которым ещё не установлен флаг data('cvDropdownInited').
Для каждого найденного списка создаётся инстанс: формируется storageKey для localStorage на основе id корневого UL (или генерируется при отсутствии id).
Если присутствует data-loadable:
- Существующие дочерние li переносятся в JS-массив items и рендерятся реактивно в корневой узел.
- Параллельно отправляется запрос на URL из data-loadable.
- До завершения — внизу добавляется строка «загрузка...». По приходу данных список обновляется; строка «загрузка...» скрывается.
Любое переключение разворота сохраняет новое состояние в localStorage.

Хранилище состояния

Ключ: dropdown_ плюс уникальный идентификатор.

Значение: JSON-массив идентификаторов развернутых элементов.

Атрибуты

id у ul.dropdown — рекомендуется для стабильного ключа в localStorage.
data-loadable="" — включает реактивную загрузку данных.
data-key у li — стабильный ключ элемента (используется для восстановления состояния).

Формат данных для `data-loadable`

Допустимы два варианта ответа:

[
  { "html": "Пункт 1", "key": "1", "children": [] },
  { "text": "Пункт 2", "children": [ { "text": "Дочерний 2.1" } ] }
]

или

{
  "items": [
    { "text": "Пункт A" },
    { "html": "Пункт B" }
  ]
}

Примеры использования

1) Статический список

<ul id="cats" class="dropdown">
  <li data-key="a1">Категория A</li>
  <li data-key="b1">
    Категория B
    <ul class="dropdown">
      <li data-key="b1-1">Товар B‑1</li>
      <li data-key="b1-2">Товар B‑2</li>
    </ul>
  </li>
  <li>Категория C</li>
</ul>

2) Загрузка с сервера

<ul id="goods" class="dropdown" data-loadable="url">
  <li data-key="preset-1">Предустановленный пункт</li>
</ul>

Вперед

utils (cybervela.utils.js)

Tooltips (Всплывающие подсказки)

Методы

Примеры использования

ClassToggler (Переключатель классов)

Алгоритм работы

DialogBox (Диалоговые окна)

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

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

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

Система вкладок (Tabs)

Основные методы

Алгоритм работы

Использование в HTML

Пример структуры:

Особенности

Dropdown (UL/LI)

Возможности

Базовая структура DOM (после инициализации)

Алгоритм работы

Хранилище состояния

Атрибуты

Формат данных для data-loadable

Примеры использования

1) Статический список

2) Загрузка с сервера

Формат данных для `data-loadable`