На одном из сайтов на Drupal 8 возникла задача сделать обязательным ручной ввод анонса для поля Body и дать ему ограничение в 150 символов. Немного погуглив, я не нашел готового модуля для управления этим полем, так что было принято решение пилить свой. После нескольких попыток подойти к задаче с разных сторон я остановился на реализации задачи на стороне JavaScript. Алгоритм решения выглядит следующим образом: в хуке form_alter подключаем библиотеку со своими CSS и JS, в которых задаем полю «Анонс» видимость (по умолчанию оно скрыто) и навешиваем атрибут «required», плюс добавляем немного удобства в виде счетчика введенных символов. В итоге код самого модуля оказался элементарным:
<?php /** * Implements hook_form_alter(). */ function summary_form_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state, $form_id) { if($form_id == "node_news_edit_form" || $form_id == "node_news_form") { $form['#attached']['library'][] = 'summary/form'; } } |
Ну а все самое интересное определяется в JavaScript’е:
//Задать максимальное количество символов
var MaxLen = 150;
$(document).ready(function () {
$("#edit-body-0-summary").prop('required',true);
$("label[for='edit-body-0-summary']").text("Анонс");
$("#edit-body-0-summary--description").text("Осталось " + MaxLen + " символов");
$("#edit-body-0-summary").keyup(function () {
CountSummary();
});
$( "#edit-body-0-summary" ).change(function() {
CountSummary();
});
});
function CountSummary()
{
count = $("#edit-body-0-summary").val().length;
lost = MaxLen - parseInt(count);
if (count == parseInt(MaxLen)) {
$("#edit-body-0-summary").val($("#edit-body-0-summary").val().slice(0, -1));
$("#edit-body-0-summary--description").html("Достигнут предел анонса!");
} else {
$("#edit-body-0-summary--description").text("Осталось " + lost + " символов");
}
}
Честно говоря, меня немного напрягает изменение формы на стороне клиента, поэтому буду благодарен подсказке, как перенести всю логику на PHP.
Полные исходники модуля можно скачать тут.