Agregar archivos JavaScript a las páginas administrativas

¿Cómo agrego archivos JavaScript / CSS en cada página de administración, usando un módulo?

Usando un módulo, puede seguir dos métodos:

• Implementando hook_init ()
• Implementando hook_form_alter ()

El primer método le permitiría agregar archivos JavaScript (o CSS) adicionales a cualquier página de administración, mientras que el segundo método le permitiría agregar esos archivos solo a las páginas que contienen formularios.

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

Reemplace "mymodule" con el nombre corto de su módulo; reemplace "mymodule.js" y "mymodule.css" con los nombres reales de los archivos JavaScript y CSS.

system_init () contiene el siguiente código, para agregar archivos específicos a páginas administrativas.

  $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 () es la función que en su documentación se describe como:

Determine si una ruta está en la sección administrativa del sitio.

Tenga en cuenta que algunas rutas relacionadas con los nodos, como node/<nid>/edit, podrían incluirse en la sección administrativa, dependiendo de la configuración que se encuentre en admin / apariencia.

La lista de las rutas de nodo que podrían incluirse en las páginas administrativas se devuelve desde 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, por algún motivo, necesita evitar cualquier página con una ruta como nodo / *, debe agregar un código específico para evitarlos, si lo está utilizando path_is_admin(). Tenga en cuenta que cualquier módulo podría cambiar las páginas que se consideran parte de las páginas administrativas.

En ambos casos, la alternativa sería usar una biblioteca, si el módulo implementa hooks_library () con un código similar al siguiente.

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

En este caso, la implementación anterior de hook_form_alter()se convertiría en la siguiente.

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

En lugar de llamar drupal_add_js(), y drupal_add_css(), el código debería llamar drupal_add_library('mymodule', 'mymodule.library').

La ventaja de usar hook_library()es:

• Las dependencias entre bibliotecas se manejan automáticamente. Eso es lo que sucede en el caso de system_library (), que define dos bibliotecas usando las siguientes definiciones.

    // 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')Se incluirían las llamadas , misc / collapse.js y misc / form.js.

• Los archivos CSS asociados con la biblioteca se cargarían automáticamente junto con los archivos JavaScript.

• Cada vez que la biblioteca usaría más archivos JavaScript o CSS, el código para incluir la biblioteca no cambiaría; todavía estaría usando $form['#attached']['library'][] = array('mymodule', 'mymodule.library');, o drupal_add_library('mymodule', 'mymodule.library').

No es necesario usar current_path () cuando puede usar arg () . Si la ruta de la página actual es admin / structure / block, entonces

• arg(0) volverá "admin"
• arg(1) volverá "structure"
• arg(2) volverá "block"

Actualizar

hook_init()no se usa más de Drupal 8. La alternativa para Drupal 8 está utilizando hook_form_alter(), hook_page_attachments()o hook_page_attachements_alter(). hook_page_build()y hook_page_alter()ya no se usan en Drupal 8.
Lo que dije sobre el uso de una biblioteca de JavaScript sigue siendo cierto, incluso si se sugiere usarlo #attachedpara adjuntar una biblioteca (o un archivo JavaScript o un archivo CSS) a una página. Drupal 8 ya no permite adjuntar solo archivos JavaScript o CSS a una página; siempre debe adjuntar una biblioteca, que es un conjunto de archivos JavaScript y CSS, eventualmente hecha solo de archivos JavaScript o CSS.

Aquí hay dos enfoques para agregar JS / CSS a las páginas.

Puede agregar JavaScript y CSS directamente al archivo de plantilla page.tpl.php, ya que los archivos de plantilla son archivos PHP, puede verificar la URL usando arg () y presentarlos en consecuencia.

Alternativamente, y mejor ya que es independiente del tema, cree un módulo que implemente hook_init () y llame a drupal_add_js () o drupal_add_css () basado en current_path () .

Algo como el siguiente código funcionaría.

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

Creé un módulo usando los pasos descritos aquí: http://purewebmedia.biz/article/2014/04/23/adding-your-own-css-admin-theme

Copié el texto del módulo como se describe en esa página:

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

Sin embargo, la verificación del administrador fue defectuosa cuando yo (como una de las cosas) quería diseñar los botones de envío en todas las páginas, así como el formulario de edición de nodos. Como esa ruta va al nodo / editar y no al administrador, la verificación me hizo rascarme la cabeza durante horas.

Así que se me ocurrió esta versión para hacer mi módulo simple llamado 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));
    }
}

Lo que es diferente a la respuesta aquí es verificar si la ruta está en la parte administrativa del sitio con path_is_admin en lugar de usar arg . El uso de arg hizo que mi archivo css no se cargara en el nodo de edición y otras páginas.

Se considera una mala práctica agregar JS y CSS hook_init(). En su lugar, usará 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');
  }
}

Acabo de usar otro método que puede atraer a los desarrolladores front-end. Subtema su tema de administrador preferido y luego agregue un simple:

scripts[] = myscripts.js

a su archivo theme.info que contiene el javascript que necesita para sus páginas de administración. Si lo desea, puede agregar más anulaciones, ya que esto heredará los recursos de su tema de administrador favorito.