Подключение jQuery UI Spinner для форм в Drupal 7

Столкнулся сегодня с формой, к которой необходимо было добавить текстовое поле со стрелочкам для изменения величины. Как оказалось то, что я искал называется jQuery UI Spinner. Однако радость моя была недолгой, так как Spinner был добавлен в jQuery UI только в v1.9 версии, коробочная версия Drupal содержит как назло v1.8.7.

Ставить для этого модуль jQuery Update я не решился, так как со старых времен помню его конфликтность даже с теми же Views. Был уже готов начать писать собственное решение на скорую руку, как в Skype мне подбросили ссылочку на самостоятельную библиотеку jQuery UI Spinner. Спасибо и тому, кто скинул ссылку, и тому, кто создал эту библиотеку!

Беглое тестирование библиотеки показало хорошие результаты и это с учетом того, что вам не надо обновлять даже jQuery из коробки Drupal. Небольшой пример как это все подключить с использованием Libraries API.

Подключение библиотеки

Библиотека на GitHub: jQuery UI Spinner.

Первым делом скачайте библиотеку GitHub и поместите ее в папку 'sites/all/libraries' под названием 'jquery_ui_spinner'. Далее в своем модуле расскажите системе об этой библиотеке.

/**
 * Implements hook_libraries_info().
 */
function MY_MODULE_libraries_info() {
  // Подключаем jQuery UI Spinner
  $libraries['jquery_ui_spinner'] = array(
    'name' => 'jQuery UI Spinner',
    'vendor url' => 'https://github.com/btburnett3/jquery.ui.spinner',
    'download url' => 'https://github.com/btburnett3/jquery.ui.spinner',
    'version arguments' => array(
      'file' => 'ui.spinner.js',
      'pattern' => '@(?i:jQuery UI Spinner) ([0-9\.a-z]+)@',
      'lines' => 5,
    ),
    'files' => array(
      'js' => array(
        'ui.spinner.min.js',
      ),
      'css' => array(
        'ui.spinner.css'
      ),
    ),
  );
 
  return $libraries;
}

Пример создания элемента Spinner через Forms API.

/**
 * Пример формы.
 *
 * @param $form
 * @param $form_state
 * @return mixed
 */
function MY_MODULE_cart_form($form, &$form_state) {
  drupal_add_library('system', 'jquery.form');
  drupal_add_library('system', 'ui.dialog');
 
  if (($library = libraries_detect('jquery_ui_spinner')) && !empty($library['installed'])) {
    $library = libraries_load('jquery_ui_spinner');
    $form['#attached']['js'][] = drupal_get_path('module', 'MY_MODULE') . '/js/my_module_cart.js';
  }
 
  // Всякие ненужные элементы формы..
 
  $form['cash'] = array(
    '#type' => 'textfield',
    '#title' => t('Cash'),
    '#size' => 10,
  );
 
  if (!empty($library['loaded'])) {
    $form['cash']['#attributes']['class'][] = 'form-spinner';
  }
 
  // Всякие ненужные сабмит кнопки..
 
  return $form;
}

И осталось создать JS-файл, который будет навешивать стрелочки и весь остальной функционал Spinner:

(function ($) {
  Drupal.behaviors.myModule = {
    attach:function (context, settings) {
      $('input.form-spinner', context).spinner({min: 1, max: 100});
    }
  };
})(jQuery);