Come faccio ad aggiungere JavaScript specifico per una vista?


26

Ho una vista nel mio sito che ha un nome di classe specifico. Voglio sapere, all'interno del file template.php di un tema, come posso sapere se nella pagina richiesta è disponibile una vista con un nome di classe specifico.

Questo è molto importante per me perché devo includere JavaScript e CSS specifici, quando in una pagina viene utilizzata una vista con un nome di classe specifico (come galleria di immagini).

Risposte:


40

Puoi usare l' template_preprocess_views_view()hook per fare questo:

function THEME_preprocess_views_view(&$vars) {
  $view = &$vars['view'];
  // Make sure it's the correct view
  if ($view->name == 'your-view-name') {
    // add needed javascript
    drupal_add_js(drupal_get_path('theme', 'your-theme') . '/your-js.js');
    // add needed stylesheet
    drupal_add_css(drupal_get_path('theme', 'your-theme') . '/your-css.css');
  }
}

Nota che puoi anche controllare la visualizzazione specifica della vista usando:

if ($view->name == 'your-view-name' && $view->current_display == 'your-display-id') {
  // include javascript & css here
}

Dovresti essere in grado di verificare una classe CSS personalizzata come questa:

if ($view->name == 'your-view-name' && $view->display[$view->current_display]->display_options['css_class'] == 'your-css-class') {
   // include javascript & css here
}

Grazie mille, ma questa funzione riconosce la vista per nome, voglio riconoscere il nome della classe, perché ci sono diverse viste in una pagina con lo stesso nome di classe. ad esempio, 2 viste hanno un nome di classe "galleria-immagine" e 3 viste hanno un nome di classe "light-box". Voglio aggiungere js per esempio se nella pagina è disponibile una vista con il nome della classe css 'light-box'.
Mehrdad201

Non puoi semplicemente controllare il display? if($view->name == 'your-view-name' && $view->display_id == 'your-display-id')
ciclico

no, perché non è chiaro quante visualizzazioni siano disponibili nella pagina. forse ci sono state 10 visualizzazioni che hanno tutte lo stesso nome di classe CSS.
Mehrdad201

Ho implementato questo hook e scaricato tutte le cache, ma non è stato chiamato. Non so perché. Sì, ho ricontrollato il nome.
jdhildeb,

Sembra molto strano? Hai sostituito TEMA con il nome del tuo tema attuale? Questo dovrebbe funzionare bene finché lo si implementa correttamente.
ciclico

8

Puoi utilizzare la funzione views_get_page_view per scoprire quale vista viene pubblicata sulla pagina. Restituisce oggetto views. Si noti che nello snippet di codice riportato di seguito è necessario confrontare con il nome leggibile dalla macchina delle viste, ma ovviamente è possibile scrivere il proprio confronto basandosi sull'oggetto vista restituito da views_get_page_view

function YOURTHEMENAME_preprocess_page(&$variables) {
    $view = views_get_page_view();
    if($view->name == 'YOURVIEW') {
    //Do what ever you want 
    }

6

Nel caso in cui questo sia utile a chiunque si imbatta in questa domanda, cercando come ho fatto per allegare JavaScript a una vista Drupal . In termini di D7 e Views 3.7, per me ha funzionato meglio:

function HOOK_views_pre_render ( &$view ) { 
  /// check to make sure the view has a classname
  if ( $view->display_handler && !empty($view->display_handler->options['css_class']) ) {
    $cln = $view->display_handler->options['css_class'];
    $cls = 'CLASS GOES HERE';
    /// test that the classname contains our class
    if ( preg_match('/(^|\s+)' . preg_quote($cls) . '(\s+|$)/i', $cln) ) {
      /// build the path to the js, which is local to my module, js/view.js
      $sep = DIRECTORY_SEPARATOR;
      $dir = rtrim(drupal_get_path('module', 'HOOK'), $sep);
      $pth = "{$dir}{$sep}js{$sep}view.js";
      drupal_add_js($pth);
    }
  }
}

Questo è stato utile perché volevo mantenere il codice all'interno del mio modulo, piuttosto che il tema, perché i miglioramenti apportati da JavaScript non avevano nulla a che fare con l'aspetto visivo.

NOTA: Ovviamente HOOKdovrebbe essere sostituito con il nome del modulo, in entrambe le posizioni, e CLASS GOES HEREdovrebbe anche essere sostituito con la classe che stai cercando.


Per chiarezza, perché pre_render era meglio di pre_process?
Nick,

@Nick ~ Non esiste un HOOK_views_pre_process( api.drupal.org/api/views/views.api.php/7 ) a meno che tu non stia indicando il motivo per cui utilizzare questo over THEME_preprocess_views_view- nel qual caso è solo per preferenza di dove desideri aggiungere le modifiche al codice. HOOK_views_pre_renderpuò essere collegato da un modulo, mentre THEME_preprocess_views_viewdovrebbe andare nel tuo file tema / modello. Puoi anche usare HOOK_views_post_renderse preferisci.
Pebbl

Scusa, volevo dire THEME_preprocess_views_view, sì ... Sono sicuro di averlo fatto hook_preprocess_views_viewprima nei moduli.
Nick,

4

Se sei su drupal 6 o 7 puoi anche includere risorse javascript con il contesto del modulo aggiungere risorse. Il che richiede un contesto, ma ti assicurerai che verrà sempre incluso quando viene visualizzata la vista.

https://drupal.org/project/context_addassets

Dalla pagina del progetto del modulo:

Hai mai desiderato includere javascript o css durante il rendering di una particolare vista o blocco? O hai mai desiderato includere javascript o css solo per la prima pagina senza dover scrivere codice?

Il contesto Aggiungi risorse ti consente di farlo. Ha un'interfaccia utente facile da usare per permetterti di fare tutto questo senza scrivere alcun codice. Poiché utilizza ctools tutto ciò è anche esportabile.


2

Scrivi il codice JavaScript che cerca una classe specifica nella vista, usando hasClass () di jQuery e includi il tuo file JavaScript quando la condizione è soddisfatta.

Un altro modo è inserire un modello per la visualizzazione e aggiungere il codice JavaScript attraverso quel modello usando drupal_add_js () .


Puoi dirmi, come posso fare questo. In effetti, come può includere i file css e js dopo che un'espressione condizionale nello script java è vera ??!
Mehrdad201

Per Drupal 8, questa risposta delinea come realizzare un modello di visualizzazione personalizzata per l'uscita al fine di fare questo: stackoverflow.com/a/43131240/227926
therobyouknow
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.