Ajouter des fichiers JavaScript aux pages administratives

Comment ajouter des fichiers JavaScript / CSS dans toutes les pages d'administration, à l'aide d'un module?

À l'aide d'un module, vous pouvez suivre deux méthodes:

• Implémentation de hook_init ()
• Implémentation de hook_form_alter ()

La première méthode vous permettrait d'ajouter les fichiers JavaScript (ou CSS) supplémentaires à toutes les pages d'administration, tandis que la deuxième méthode vous permettrait d'ajouter ces fichiers uniquement aux pages contenant des formulaires.

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';
  }
}

Remplacez "mymodule" par le nom court de votre module; remplacer "mymodule.js" et "mymodule.css" par les noms réels des fichiers JavaScript et CSS.

system_init () contient le code suivant, pour ajouter des fichiers spécifiques aux pages administratives.

  $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 () est la fonction décrite dans sa documentation comme:

Déterminez si un chemin d'accès se trouve dans la section administrative du site.

Considérez que certains chemins liés aux nœuds, tels que node/<nid>/edit, pourraient être inclus dans la section administrative, selon le paramètre trouvé sur admin / apparence.

La liste des chemins de noeud pouvant être inclus dans les pages administratives est renvoyée par 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;

Si, pour une raison quelconque, vous devez éviter toute page avec un chemin d'accès tel que node / *, vous devez ajouter du code spécifique pour les éviter, si vous utilisez path_is_admin(). Considérez que n'importe quel module peut modifier les pages considérées comme faisant partie des pages administratives.

Dans les deux cas, l'alternative serait d'utiliser une bibliothèque, si le module implémente hooks_library () avec un code similaire au suivant.

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;
}

Dans ce cas, la mise en œuvre précédente de hook_form_alter()deviendrait la suivante.

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

Au lieu d'appeler drupal_add_js(), et drupal_add_css(), le code doit appeler drupal_add_library('mymodule', 'mymodule.library').

Le pro de l'utilisation hook_library()est:

• Les dépendances entre les bibliothèques sont gérées automatiquement. C'est ce qui se passe dans le cas de system_library (), qui définit deux bibliothèques en utilisant les définitions suivantes.

    // 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'),
      ),
    );

  L'appel drupal_add_library('system', 'drupal.collapse'), misc / collapse.js et misc / form.js seraient tous deux inclus.

• Les fichiers CSS associés à la bibliothèque seraient automatiquement chargés avec les fichiers JavaScript.

• Chaque fois que la bibliothèque utiliserait plus de fichiers JavaScript ou CSS, le code pour inclure la bibliothèque ne changerait pas; il utiliserait toujours $form['#attached']['library'][] = array('mymodule', 'mymodule.library');, ou drupal_add_library('mymodule', 'mymodule.library').

Il n'est pas nécessaire d'utiliser current_path () lorsque vous pouvez utiliser arg () . Si le chemin de la page actuelle est admin / structure / block, alors

• arg(0) reviendra "admin"
• arg(1) reviendra "structure"
• arg(2) reviendra "block"

Mise à jour

hook_init()n'est pas utilisé plus de Drupal 8. L'alternative pour Drupal 8 utilise hook_form_alter(), hook_page_attachments()ou hook_page_attachements_alter(). hook_page_build()et hook_page_alter()ne sont plus utilisés dans Drupal 8.
Ce que j'ai dit sur l'utilisation d'une bibliothèque JavaScript est toujours vrai, même s'il est suggéré d'utiliser #attachedpour attacher une bibliothèque (ou un fichier Javascript ou un fichier CSS) à une page. Drupal 8 ne permet plus de joindre uniquement des fichiers JavaScript ou CSS à une page; vous devez toujours attacher une bibliothèque, dont un ensemble de fichiers JavaScript et CSS, éventuellement constitué uniquement de fichiers JavaScript ou CSS.

Voici deux approches pour ajouter JS / CSS aux pages.

Vous pouvez ajouter JavaScript et CSS directement au fichier de modèle page.tpl.php, puisque les fichiers de modèle sont des fichiers PHP, vous pouvez vérifier l'URL en utilisant arg () et présenter en conséquence.

Alternativement, et mieux car il est indépendant du thème, créez un module qui implémente hook_init () , et appelez drupal_add_js () ou drupal_add_css () basé sur current_path () .

Quelque chose comme le code suivant fonctionnerait.

// 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');
  }
}

J'ai créé un module en utilisant les étapes décrites ici: http://purewebmedia.biz/article/2014/04/23/adding-your-own-css-admin-theme

Copiez le texte du module tel que décrit sur cette page:

    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));
  }
}

Cependant, la vérification d'administration était défectueuse lorsque je (comme l'une des choses) voulais styliser les boutons d'envoi dans toutes les pages ainsi que le formulaire d'édition de nœud. Puisque ce chemin va au nœud / modifier et non à l'administrateur, le contrôle m'a fait me gratter la tête pendant des heures.

J'ai donc proposé cette version pour créer mon module simple appelé 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));
    }
}

Ce qui est différent de la réponse ici est de vérifier si le chemin est dans la partie administrative du site avec path_is_admin au lieu d'utiliser arg . L'utilisation d'arg a empêché mon fichier css de se charger sur le node-edit et sur d'autres pages.

Il est considéré comme une mauvaise pratique d'ajouter JS et CSS à partir de hook_init(). Au lieu de cela, vous utiliseriez 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');
  }
}

Je viens d'utiliser une autre méthode qui peut plaire aux développeurs frontaux. Sous - thème votre thème d'administration préféré, puis ajoutez un simple:

scripts[] = myscripts.js

à votre fichier theme.info qui contient le javascript dont vous avez besoin pour vos pages d'administration. Si vous le souhaitez, vous pouvez ajouter d'autres remplacements, car cela héritera des ressources de votre thème d'administration préféré.