¿Cómo agrego JavaScript específico para una vista?


26

Tengo una vista en mi sitio que tiene un nombre de clase específico. Quiero saber, dentro del archivo template.php de un tema, cómo puedo saber si una vista con un nombre de clase específico está disponible en la página solicitada.

Esto es muy importante para mí porque necesito incluir JavaScript y CSS específicos, cuando se usa una vista con un nombre de clase específico (como galería de imágenes) en una página.

Respuestas:


40

Podrías usar el template_preprocess_views_view()gancho para hacer esto:

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

Tenga en cuenta que también puede verificar la visualización específica de la vista usando:

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

Debería poder buscar una clase css personalizada como esta:

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

Muchas gracias, pero esta función reconoce la vista por nombre, quiero reconocer el nombre de la clase, porque hay varias vistas en una página que tiene el mismo nombre de clase. por ejemplo, 2 vistas tienen el nombre de clase 'galería-imagen' y 3 vistas tienen el nombre de clase 'caja de luz'. Quiero agregar js, por ejemplo, si una vista con el nombre de la clase css 'light-box' está disponible en la página.
Mehrdad201

¿No puedes simplemente mirar la pantalla? if($view->name == 'your-view-name' && $view->display_id == 'your-display-id')
Cyclonecode

no, porque no está claro cuántas vistas hay disponibles en la página. tal vez hubo 10 vistas de que todas tienen el mismo nombre de clase css.
Mehrdad201

Implementé este gancho y eliminé todos los cachés, pero no se llamó. No estoy seguro de por qué. Sí, verifiqué dos veces el nombre.
jdhildeb

Eso parece muy extraño? ¿Has reemplazado THEME con el nombre de tu tema real? Esto debería funcionar bien siempre que lo implemente correctamente.
Cyclonecode

8

Puede usar la función views_get_page_view para averiguar qué vista se está sirviendo en la página. Devuelve vistas objeto. Tenga en cuenta que en el fragmento de código a continuación debe comparar con el nombre legible por máquina de las vistas, pero, por supuesto, puede escribir su propia comparación basándose en el objeto de vista devuelto por views_get_page_view

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

6

En caso de que esto sea útil para cualquier otra persona que se encuentre con esta pregunta, busque como adjunto JavaScript para una vista de Drupal . En términos de D7 y Views 3.7, lo siguiente funcionó mejor para mí:

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

Esto fue beneficioso ya que quería mantener el código dentro de mi módulo, en lugar del tema, porque las mejoras aportadas por JavaScript no tenían nada que ver con la apariencia visual.

NOTA: Obviamente, HOOKdebe reemplazarse con el nombre de su módulo, en ambas ubicaciones, y CLASS GOES HEREtambién debe reemplazarse con la clase que está buscando.


Para mayor claridad, ¿por qué pre_render era mejor que pre_process?
Nick

@Nick ~ No hay un HOOK_views_pre_process( api.drupal.org/api/views/views.api.php/7 ) a menos que se refiera a la razón por la que usar esto THEME_preprocess_views_view, en cuyo caso es solo por preferencia de dónde desea agregar sus modificaciones de código. HOOK_views_pre_renderse puede conectar desde un módulo, mientras que THEME_preprocess_views_viewdebe ir en su archivo de tema / plantilla. También HOOK_views_post_renderpuedes usarlo si lo prefieres.
Pebbl

Lo siento, quise decir THEME_preprocess_views_view, sí ... estoy seguro de que lo he hecho hook_preprocess_views_viewen módulos antes.
Nick

4

Si está en drupal 6 o 7, también puede incluir activos de JavaScript con el contexto de módulo agregar activos. Lo cual requiere contexto, pero puede estar seguro de que siempre se incluirá cuando se visualice la vista.

https://drupal.org/project/context_addassets

Desde la página del proyecto del módulo:

¿Alguna vez ha querido incluir JavaScript o CSS cuando se está representando una vista o bloque en particular? ¿O alguna vez ha querido incluir javascript o css solo para la página principal sin tener que escribir código?

Contexto agregar activos le permite hacer esto. Tiene una interfaz de usuario fácil de usar que le permite hacer todo esto sin escribir ningún código. Debido a que utiliza ctools, todo esto también es exportable.


2

Escriba el código JavaScript que busca una clase específica en la vista, utilizando jQuery's hasClass () , e incluya su archivo JavaScript cuando se cumpla la condición.

Otra forma es poner una plantilla para su vista y agregar código JavaScript a través de esa plantilla usando drupal_add_js () .


¿Puedes decirme cómo puedo hacer esto? De hecho, ¿cómo puede incluir archivos css y js después de que una expresión condicional en el script java sea verdadera?
Mehrdad201

Para Drupal 8, esta respuesta describe cómo hacer una plantilla de vista personalizada para que la vista de salida haga esto: stackoverflow.com/a/43131240/227926
therobyouknow
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.