Adicionar arquivos JavaScript às páginas administrativas

Como adiciono arquivos JavaScript / CSS em todas as páginas de administração, usando um módulo?

Usando um módulo, você pode seguir dois métodos:

• Implementando hook_init ()
• Implementando hook_form_alter ()

O primeiro método permitiria adicionar arquivos JavaScript (ou CSS) extras a qualquer página de administração, enquanto o segundo método permitiria adicionar esses arquivos apenas a páginas que contenham formulários.

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

Substitua "mymodule" pelo nome abreviado do seu módulo; substitua "mymodule.js" e "mymodule.css" pelos nomes reais dos arquivos JavaScript e CSS.

system_init () contém o seguinte código, para adicionar arquivos específicos às 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 () é a função que em sua documentação é descrita como:

Determine se um caminho está na seção administrativa do site.

Considere que alguns caminhos relacionados ao nó, como node/<nid>/edit, podem ser incluídos na seção administrativa, dependendo da configuração encontrada em admin / aparência.

A lista dos caminhos do nó que podem ser incluídos nas páginas administrativas é retornada de 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;

Se, por qualquer motivo, você precisar evitar qualquer página com um caminho como node / *, precisará adicionar um código específico para evitá-los, se estiver usando path_is_admin(). Considere que qualquer módulo pode alterar as páginas consideradas parte das páginas administrativas.

Nos dois casos, a alternativa seria usar uma biblioteca, se o módulo implementasse hooks_library () com código semelhante ao seguinte.

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

Nesse caso, a implementação anterior de hook_form_alter()se tornaria a seguinte.

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

Em vez de chamar drupal_add_js()e drupal_add_css(), o código deve chamar drupal_add_library('mymodule', 'mymodule.library').

O profissional do uso hook_library()é:

• Dependências entre bibliotecas são tratadas automaticamente. É o que acontece no caso de system_library (), que define duas bibliotecas usando as seguintes definições.

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

  As chamadas drupal_add_library('system', 'drupal.collapse')misc / collapse.js e misc / form.js seriam incluídas.

• Os arquivos CSS associados à biblioteca seriam carregados automaticamente juntos os arquivos JavaScript.

• Sempre que a biblioteca usasse mais arquivos JavaScript ou CSS, o código para incluir a biblioteca não mudaria; ainda estaria usando $form['#attached']['library'][] = array('mymodule', 'mymodule.library');, ou drupal_add_library('mymodule', 'mymodule.library').

Não há necessidade de usar current_path () quando você pode usar arg () . Se o caminho para a página atual for admin / structure / block, então

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

Atualizar

hook_init()não é usado mais do Drupal 8. A alternativa para Drupal 8 está a utilizar hook_form_alter(), hook_page_attachments(), ou hook_page_attachements_alter(). hook_page_build()e hook_page_alter()não são mais usados ​​no Drupal 8.
O que eu disse sobre o uso de uma biblioteca JavaScript ainda é verdadeiro, mesmo que seja sugerido o uso #attachedpara anexar uma biblioteca (ou um arquivo Javascript ou arquivo CSS) a uma página. O Drupal 8 não permite mais anexar apenas arquivos JavaScript ou CSS a uma página; você sempre deve anexar uma biblioteca, com um conjunto de arquivos JavaScript e CSS, eventualmente feitos apenas de arquivos JavaScript ou CSS.

Aqui estão duas abordagens para adicionar JS / CSS às páginas.

Você pode adicionar JavaScript e CSS diretamente ao arquivo de modelo page.tpl.php, já que os arquivos de modelo são arquivos PHP, é possível verificar a URL usando arg () e apresentar de acordo.

Como alternativa, e melhor como é independente do tema, crie um módulo que implemente hook_init () e chame drupal_add_js () ou drupal_add_css () com base no current_path () .

Algo como o código a seguir funcionaria.

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

Criei um módulo usando as etapas descritas aqui: http://purewebmedia.biz/article/2014/04/23/adding-your-own-css-admin-theme

Copiou o texto do módulo conforme descrito nessa 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));
  }
}

No entanto, a verificação do administrador estava com defeito quando eu (como uma das coisas) quis estilizar os botões de envio em todas as páginas, bem como o formulário de edição do nó. Como esse caminho vai para o nó / edição e não para o administrador, a verificação me fez coçar a cabeça por horas.

Então, eu vim com esta versão para criar meu módulo simples chamado 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));
    }
}

O que é diferente da resposta aqui é verificar se o caminho está na parte administrativa do site com path_is_admin em vez de usar arg . O uso de arg fez com que meu arquivo css não fosse carregado nas páginas de edição do nó e outras.

É considerado uma prática ruim adicionar JS e CSS hook_init(). Em vez disso, você usaria 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');
  }
}

Acabei de usar outro método que pode apelar para desenvolvedores front-end. Subtema seu tema de administrador preferido e adicione um simples:

scripts[] = myscripts.js

ao seu arquivo theme.info que contém o javascript necessário para suas páginas de administração. Se desejar, você pode adicionar mais substituições, pois isso herdará os recursos do seu tema de administrador favorito.