Aggiungi file JavaScript alle pagine amministrative

Come faccio ad aggiungere file JavaScript / CSS in ogni pagina di amministrazione, usando un modulo?

Utilizzando un modulo, puoi seguire due metodi:

• Implementazione hook_init ()
• Implementazione hook_form_alter ()

Il primo metodo ti consentirebbe di aggiungere i file JavaScript (o CSS) extra a qualsiasi pagina di amministrazione, mentre il secondo metodo ti consentirebbe di aggiungere quei file solo alle pagine che contengono moduli.

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

Sostituisci "mymodule" con il nome breve del tuo modulo; sostituire "mymodule.js" e "mymodule.css" con i nomi effettivi dei file JavaScript e CSS.

system_init () contiene il seguente codice, per aggiungere file specifici alle pagine amministrative.

  $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 () è la funzione che nella sua documentazione è descritta come:

Determinare se un percorso si trova nella sezione amministrativa del sito.

Considera che alcuni percorsi relativi al nodo, come node/<nid>/edit, potrebbero essere inclusi nella sezione amministrativa, a seconda dell'impostazione trovata su admin / aspetto.

L'elenco dei percorsi dei nodi che potrebbero essere inclusi nelle pagine amministrative viene restituito da 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, per qualsiasi motivo, è necessario evitare qualsiasi pagina con un percorso come nodo / *, è necessario aggiungere un codice specifico per evitarli, se si sta utilizzando path_is_admin() . Considera che qualsiasi modulo potrebbe cambiare le pagine che sono considerate parte delle pagine amministrative.

In entrambi i casi, l'alternativa sarebbe usare una libreria, se il modulo implementa hooks_library () con un codice simile al seguente.

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

In questo caso, l'implementazione precedente di hook_form_alter()diventerebbe la seguente.

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

Invece di chiamare drupal_add_js(), e drupal_add_css(), il codice dovrebbe chiamare drupal_add_library('mymodule', 'mymodule.library').

Il pro dell'utilizzo hook_library()è:

• Le dipendenze tra le librerie vengono gestite automaticamente. Questo è ciò che accade nel caso di system_library (), che definisce due librerie usando le seguenti definizioni.

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

  Chiamata drupal_add_library('system', 'drupal.collapse'), misc / collapse.js e misc / form.js verrebbero entrambi inclusi.

• I file CSS associati alla libreria verrebbero caricati automaticamente insieme ai file JavaScript.

• Ogni volta che la libreria userebbe più file JavaScript o CSS, il codice per includere la libreria non cambierebbe; sarebbe ancora in uso $form['#attached']['library'][] = array('mymodule', 'mymodule.library');, oppure drupal_add_library('mymodule', 'mymodule.library').

Non è necessario utilizzare current_path () quando è possibile utilizzare arg () . Se il percorso per la pagina corrente è admin / struttura / blocco, allora

• arg(0) tornerà "admin"
• arg(1) tornerà "structure"
• arg(2) tornerà "block"

Aggiornare

hook_init()non viene più utilizzato da Drupal 8. L'alternativa a Drupal 8 utilizza hook_form_alter(), hook_page_attachments()o hook_page_attachements_alter(). hook_page_build()e hook_page_alter()non sono più utilizzati in Drupal 8.
Quello che ho detto sull'utilizzo di una libreria JavaScript è ancora vero, anche se si suggerisce di utilizzare #attachedper allegare una libreria (o un file Javascript o un file CSS) a una pagina. Drupal 8 non consente più di allegare solo file JavaScript o CSS a una pagina; devi sempre allegare una libreria, che un insieme di file JavaScript e CSS, alla fine fatto solo di file JavaScript o CSS.

Ecco due approcci per aggiungere JS / CSS alle pagine.

Puoi aggiungere JavaScript e CSS direttamente al file modello page.tpl.php, poiché i file modello sono file PHP, puoi controllare l'URL usando arg () e presentare di conseguenza.

In alternativa, e meglio dal momento che è indipendente dal tema, crea un modulo che implementa hook_init () e chiama drupal_add_js () o drupal_add_css () basato su current_path () .

Qualcosa come il seguente codice funzionerebbe.

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

Ho creato un modulo usando i passaggi descritti qui: http://purewebmedia.biz/article/2014/04/23/adding-your-own-css-admin-theme

Copiato il testo del modulo come indicato in quella pagina:

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

Tuttavia, il controllo dell'amministratore era difettoso quando io (come una delle cose) volevo dare uno stile ai pulsanti di invio in tutte le pagine e al modulo di modifica del nodo. Dal momento che quel percorso va al nodo / modifica e non all'amministrazione, il controllo mi ha fatto grattare la testa per ore.

Quindi ho pensato a questa versione per creare il mio semplice modulo chiamato 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));
    }
}

Ciò che differisce dalla risposta qui è verificare se il percorso si trova nella parte amministrativa del sito con path_is_admin invece di usare arg . L'uso di arg ha causato il caricamento del mio file css sul nodo-modifica e su altre pagine.

È considerata una cattiva pratica aggiungere JS e CSS hook_init(). Invece useresti 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');
  }
}

Ho appena usato un altro metodo che potrebbe piacere agli sviluppatori front-end. Sottometti il tuo tema di amministrazione preferito e quindi aggiungi un semplice:

scripts[] = myscripts.js

al tuo file theme.info che contiene il javascript necessario per le tue pagine di amministrazione. Se lo desideri, puoi aggiungere più sostituzioni, poiché ciò erediterà le risorse del tuo tema di amministrazione preferito.