it-swarm.it

Aggiungi file JavaScript alle pagine amministrative

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

17
Onita

Utilizzando un modulo, puoi seguire due metodi:

Il primo metodo ti consentirebbe di aggiungere i file JavaScript (o CSS) extra a qualsiasi pagina di amministrazione, mentre il secondo metodo ti permetterebbe 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.

screenshot

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 node/*, è necessario aggiungere un codice specifico per evitarli, se si utilizza 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 di 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'),
        ),
      );
    

    Chiamando 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; continuerebbe a usare $form['#attached']['library'][] = array('mymodule', 'mymodule.library'); o 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) restituirà "admin"
  • arg(1) restituirà "structure"
  • arg(2) restituirà "block"

Aggiornare

hook_init() non è più utilizzato da Drupal 8. L'alternativa a Drupal 8 sta usando hook_form_alter(), - hook_page_attachments() , oppure hook_page_attachements_alter() . hook_page_build() e hook_page_alter() non sono più utilizzati in Drupal 8.
Quello che ho detto sull'uso di una libreria JavaScript è ancora vero, anche se si suggerisce di usare #attached per allegare una libreria (o un file Javascript o CSS file) 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 set di file JavaScript e CSS, alla fine fatto solo di JavaScript o File CSS.

25
kiamlaluno

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 PHP, puoi controllare l'URL usando arg () e presentare di conseguenza.

In alternativa, e meglio poiché è indipendente dal tema, crea un modulo che implementa hook_init () e chiama drupal_add_js () o drupal_add_css () in base a 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');
  }
}
3
Jason Smith

È considerata una cattiva pratica aggiungere JS e CSS da 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');
  }
}
1
leymannx

Ho appena usato un altro metodo che potrebbe piacere agli sviluppatori front-end. Sottotitolo 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.

1
Screenack

Ho creato un modulo usando i passaggi qui descritti: 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 fatto sì che il mio file css non si caricasse sul nodo-modifica e su altre pagine.

1
Valross.nu