2bon

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

Класс forms предназначен для обработки форм и их элементов на веб-странице. Он является частью системы Cybervela и предоставляет базовую функциональность для работы с формами.

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

const forms = new forms(core);

где core - экземпляр основного класса системы.

Работа с формами

Для работы с формами используйте класс form.xhr.

При отправке формы:

1. Форма должна иметь класс xhr
2. Можно указать callback-функцию через data-атрибут: data-callback="methodName"

Пример:

<form class="xhr" data-callback="handleFormSubmit">
поля формы 
</form>

После успешной отправки формы и получения ответа от сервера, выполняется указанная callback-функция для обработки полученных данных.

Метод prepare

Метод prepare() автоматически вызывается при создании экземпляра класса и выполняет следующие действия:

1. Настраивает обработчики событий для элементов загрузки Excel-файлов
2. Автоматически активирует клик по input-элементу при клике на родительский label

Загрузка Excel-файлов

Для создания элемента загрузки Excel-файла используйте следующую разметку:

<label>
  <input type="file" class="xls" accept=".xls,.xlsx">
</label>

При клике на label автоматически откроется диалог выбора файла.

Редактирование полей

Метод startEditing() позволяет активировать режим редактирования для элементов с классом .field_editable. Используется при клике на иконку редактирования (.edit_icon) или двойном клике по полю.

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

.warp_field_editable
  .field_editable(data-name="email" data-type="text") example@example.com
  .edit_icon(style="cursor: pointer") 
  input(type="file" class="xls")

При редактировании:

1. Создается input/textarea в зависимости от data-type
2. Отправляются данные на сервер при потере фокуса
3. Форма автоматически перезагружается

Обработка событий

Метод setEvents() настраивает:

• Делегирование кликов по иконкам редактирования
• Разделение одиночных/двойных кликов по ссылкам
• Обработку Enter для подтверждения изменений

Особенности поведения:

• Одиночный клик - переход по ссылке если это ссылка
• Двойной клик - редактирование

Пример полной формы

form.fields_editable(id="user_profile")
  .warp_field_editable
    .field_editable(data-name="name" data-type="text") Иван Иванов
    .edit_icon(style="cursor: pointer") 

  .warp_field_editable
    .field_editable(data-name="bio" data-type="textarea") Описание пользователя
    .edit_icon(style="cursor: pointer") 

  a(href="/profile") Ссылка (откроется при одиночном клике)

  label
    input(type="file" class="xls")

Вперед