web-dev-qa-db-fra.com

Ajouter des fichiers JavaScript aux pages administratives

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

7javascripttheming
17
Onita

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

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 permettait 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.

screenshot

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, l'implémentation 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 de hook_library() est:

  • Les dépendances entre bibliothèques sont automatiquement gérées. 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 de drupal_add_library('system', 'drupal.collapse'), misc/collapse.js et misc/form.js serait 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) renverra "admin"
  • arg(1) renverra "structure"
  • arg(2) renverra "block"

Mise à jour

hook_init() n'est plus utilisé depuis 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 #attached pour attacher une bibliothèque (ou un fichier Javascript, ou un CSS fichier) à une page. Drupal 8 ne permet plus de joindre uniquement des fichiers JavaScript ou CSS à une page; vous devez toujours attacher une bibliothèque, qui est un ensemble de fichiers JavaScript et CSS, éventuellement constitués uniquement de JavaScript ou Fichiers CSS.

25
kiamlaluno

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 PHP fichiers, vous pouvez vérifier l'URL en utilisant arg () et présenter en conséquence.

Alternativement, et mieux puisqu'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 chemin_actuel () .

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');
  }
}
3
Jason Smith

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

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é.

1
Screenack

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) souhaitais styliser les boutons d'envoi dans toutes les pages ainsi que le formulaire d'édition de nœud. Comme 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 d'autres pages.

1
Valross.nu