Додайте файли JavaScript на адміністративні сторінки

Як додати файли JavaScript / CSS на всі сторінки адміністрування за допомогою модуля?

За допомогою модуля можна дотримуватися двох методів:

• Реалізація Hook_init ()
• Реалізація moll_form_alter ()

Перший метод дозволить вам додати додаткові файли JavaScript (або CSS) на будь-які сторінки адміністрування, тоді як другий метод дозволить вам додавати ці файли лише на сторінки, що містять форми.

function mymodule_init() {
  if (arg(0) == 'admin') {
    $path = drupal_get_path('module', 'mymodule');
    drupal_add_js($path . '/mymodule.js');
    drupal_add_css($path . '/mymodule.css');
  }
}

function mymodule_form_alter(&$form, &$form_state, $form_id) {
  if (arg(0) == 'admin') {
    $path = drupal_get_path('module', 'mymodule');  
    $form['#attached']['css'][] = $path . '/mymodule.css';
    $form['#attached']['js'][] = $path . '/mymodule.js';
  }
}

Замініть "mymodule" на коротку назву вашого модуля; замініть "mymodule.js" та "mymodule.css" фактичними назвами файлів JavaScript та CSS.

system_init () містить наступний код для додавання певних файлів на адміністративні сторінки.

  $path = drupal_get_path('module', 'system');
  // Add the CSS for this module. These aren't in system.info, because they
  // need to be in the CSS_SYSTEM group rather than the CSS_DEFAULT group.
  drupal_add_css($path . '/system.base.css', array('group' => CSS_SYSTEM, 'every_page' => TRUE));

  // Add the system.admin.css file to the administrative pages.
  if (path_is_admin(current_path())) {
    drupal_add_css($path . '/system.admin.css', array('group' => CSS_SYSTEM));
  }

  drupal_add_css($path . '/system.menus.css', array('group' => CSS_SYSTEM, 'every_page' => TRUE));
  drupal_add_css($path . '/system.messages.css', array('group' => CSS_SYSTEM, 'every_page' => TRUE));
  drupal_add_css($path . '/system.theme.css', array('group' => CSS_SYSTEM, 'every_page' => TRUE));

path_is_admin () - це функція, яка в її документації описана як:

Визначте, чи є шлях в адміністративному розділі сайту.

Врахуйте, що деякі шляхи, пов'язані з вузлами, наприклад node/<nid>/edit, можуть бути включені в адміністративний розділ, залежно від налаштування, знайденого в адміністраторі / зовнішності.

Список шляхів до вузлів, які можуть бути включені до адміністративних сторінок, повертається з node_admin_paths () .

  if (variable_get('node_admin_theme')) {
    $paths = array(
      'node/*/edit' => TRUE, 
      'node/*/delete' => TRUE, 
      'node/*/revisions' => TRUE, 
      'node/*/revisions/*/revert' => TRUE, 
      'node/*/revisions/*/delete' => TRUE, 
      'node/add' => TRUE, 
      'node/add/*' => TRUE,
    );
    return $paths;

Якщо з будь-якої причини вам потрібно уникати будь-якої сторінки з таким шляхом, як вузол / *, вам потрібно додати конкретний код, щоб уникнути цього, якщо ви використовуєте path_is_admin() . Подумайте, що будь-який модуль може змінити сторінки, які вважаються частиною адміністративних сторінок.

В обох випадках альтернативою було б використання бібліотеки, якщо модуль реалізує hooks_library () з кодом, аналогічним наступному.

function mymodule_library() {
  $path = drupal_get_path('module', 'mymodule');

  $libraries['mymodule.library'] = array(
    'title' => 'MyModule Library', 
    'version' => '1.0', 
    'js' => array(
      $path . '/mymodule.js' => array(),
    ), 
    'css' => array(
      $path . '/mymodule.css' => array(
        'type' => 'file', 
        'media' => 'screen',
      ),
    ),
  );

  return $libraries;
}

У цьому випадку попередня реалізація hook_form_alter() стане наступною.

function mymodule_form_alter(&$form, &$form_state, $form_id) {
  if (arg(0) == 'admin') {
    $form['#attached']['library'][] = array('mymodule', 'mymodule.library');
  }
}

Замість того, щоб дзвонити drupal_add_js() і drupal_add_css(), код повинен дзвонитиdrupal_add_library('mymodule', 'mymodule.library') .

Про використання hook_library() є:

• Залежності між бібліотеками обробляються автоматично. Саме це відбувається у випадку system_library (), який визначає дві бібліотеки, використовуючи наступні визначення.

    // Drupal's form library.
    $libraries['drupal.form'] = array(
      'title' => 'Drupal form library', 
      'version' => VERSION, 
      'js' => array(
        'misc/form.js' => array(
          'group' => JS_LIBRARY,
          'weight' => 1,
        ),
      ),
    );
  
    // Drupal's collapsible fieldset.
    $libraries['drupal.collapse'] = array(
      'title' => 'Drupal collapsible fieldset', 
      'version' => VERSION, 
      'js' => array(
        'misc/collapse.js' => array('group' => JS_DEFAULT),
      ), 
      'dependencies' => array(
        // collapse.js relies on drupalGetSummary in form.js
        array('system', 'drupal.form'),
      ),
    );

  Дзвінок drupal_add_library('system', 'drupal.collapse') , різне / кол.js та misc / form.js будуть включені.

• Файли CSS, пов’язані з бібліотекою, автоматично завантажуються разом у файли JavaScript.

• Кожного разу, коли бібліотека використовує більше JavaScript або CSS-файлів, код для включення бібліотеки не змінюється; він все одно буде використовувати $form['#attached']['library'][] = array('mymodule', 'mymodule.library');, або drupal_add_library('mymodule', 'mymodule.library').

Немає необхідності використовувати current_path (), коли ви можете використовувати arg () . Якщо шлях для поточної сторінки адміністратор / структура / блок, то

• arg(0) повернеться "admin"
• arg(1) повернеться "structure"
• arg(2) повернеться "block"

Оновлення

hook_init()не використовується більше від Drupal 8. Альтернатива для Drupal 8 використовує hook_form_alter(), hook_page_attachments()або hook_page_attachements_alter(). hook_page_build()і hook_page_alter()більше не використовуються в Drupal 8.
Те, що я говорив про використання бібліотеки JavaScript, все ще відповідає дійсності, навіть якщо пропонується використовувати #attachedдля додавання бібліотеки (або файлу Javascript, або CSS-файла) до сторінки. Drupal 8 більше не дозволяє приєднувати до сторінки лише файли JavaScript або CSS; Вам потрібно завжди додавати бібліотеку, яка набір файлів JavaScript і CSS, зрештою, складається лише з файлів JavaScript або CSS.

Ось два підходи до додавання JS / CSS на сторінки.

Ви можете додати JavaScript та CSS безпосередньо до файлу шаблону page.tpl.php, оскільки файли шаблонів є PHP-файлами, ви можете перевірити URL-адресу, використовуючи arg () та представити відповідну інформацію.

Крім того, а ще краще, оскільки це не залежно від теми, створіть модуль, який реалізує mock_init () , і виклич drupal_add_js () або drupal_add_css () на основі current_path () .

Щось на зразок наступного коду буде працювати.

// Runs on every page load.
function mymodule_init() {
  // Check if current path is under "admin"
  if (substr(current_path(), 0, 5) == 'admin') {
    drupal_add_css('path/to/my/css');
    drupal_add_js('path/to/my/js');
  }
}

Я створив модуль, використовуючи описані тут кроки: http://purewebmedia.biz/article/2014/04/23/adding-your-own-css-admin-theme

Скопійовано текст модуля, як описано на цій сторінці:

    function mymodule_preprocess_html(&$variables) {
// Add conditional stylesheets for admin pages on admin theme.
  if (arg(0)=="admin") {
    // reference your current admin theme  
    $theme_path = drupal_get_path('theme', 'commerce_kickstart_admin');
    // reference your own stylesheet    
    drupal_add_css(drupal_get_path('module', 'mymodule') . '/css/mymodule.css', array('weight' => CSS_THEME));
  }
}

Однак перевірка адміністратора виявилася помилковою, коли я (як одна із речей) хотів стилізувати кнопки подання на всіх сторінках, а також форму редагування вузла. Оскільки цей шлях йде до вузла / редагування, а не адміністратора, чек змусив мене чесати голову годинами.

Тому я придумав цю версію, щоб зробити свій простий модуль під назвою admin_css.

admin_css.info

name = admin_css
description = Custom css alterations for editor interface
core = 7.x
version = 7.x-1.01

admin_css.module

function admin_css_preprocess_html(&$variables) {
    if (path_is_admin) {
        $theme_path = drupal_get_path('theme', 'seven');
        drupal_add_css(drupal_get_path('module', 'admin_css') . '/css/admin_css.css', array('weight' => 0));
    }
}

Що тут відрізняється від відповіді - це перевірити, чи є шлях в адміністративній частині сайту з path_is_admin замість використання arg . Використання arg спричинило, що мій css-файл не завантажується на node-edit та інших сторінках.

Неправильною є практика додавання JS та CSS від hook_init(). Замість цього ви використовуєте hook_page_build():

/**
 * Implements hook_page_build().
 */
function MYMODULE_page_build(&$page) {

  if (path_is_admin(current_path())) {

    drupal_add_js(drupal_get_path('module', 'MYMODULE') . '/scripts/magic.js');
  }
}

Я щойно застосував інший метод, який може сподобатися переднім розробникам. Підтеміть бажану тему адміністратора та додайте просту:

scripts[] = myscripts.js

у ваш файл topic.info, який містить необхідний вам javascript для ваших сторінок адміністратора. За бажанням ви можете додати більше змін, оскільки це успадкує ресурси улюбленої теми адміністратора.