Wie füge ich JavaScript-spezifisch für eine Ansicht hinzu?

26

Ich habe eine Ansicht auf meiner Site, die einen bestimmten Klassennamen hat. Ich möchte wissen, wie ich in der template.php-Datei eines Themas feststellen kann, ob auf der angeforderten Seite eine Ansicht mit einem bestimmten Klassennamen verfügbar ist.

Dies ist sehr wichtig für mich, da ich spezifisches JavaScript und CSS einbinden muss, wenn eine Ansicht mit einem spezifischen Klassennamen (wie z. B. eine Bildergalerie) in einer Seite verwendet wird.

Mehrdad201
quelle

Antworten:

40

Sie können den template_preprocess_views_view()Haken verwenden, um dies zu tun:

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

Beachten Sie, dass Sie die spezifische Anzeige der Ansicht auch überprüfen können, indem Sie Folgendes verwenden:

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

Sie sollten in der Lage sein, nach einer benutzerdefinierten CSS-Klasse wie der folgenden zu suchen:

if ($view->name == 'your-view-name' && $view->display[$view->current_display]->display_options['css_class'] == 'your-css-class') {
   // include javascript & css here
}
Cyclonecode
quelle
Vielen Dank, aber diese Funktion erkennt die Ansicht anhand des Namens. Ich möchte den Klassennamen erkennen, da auf einer Seite mehrere Ansichten mit demselben Klassennamen vorhanden sind. Beispiel: 2 Ansichten haben den Klassennamen 'Galerie-Bild' und 3 Ansichten den Klassennamen 'Leuchtturm'. Ich möchte js zum Beispiel hinzufügen, wenn eine Ansicht mit dem CSS-Klassennamen 'light-box' auf der Seite verfügbar ist.
Mehrdad201
Können Sie nicht einfach die Anzeige überprüfen? if($view->name == 'your-view-name' && $view->display_id == 'your-display-id')
Cyclonecode
nein, da nicht klar ist, wie viele Ansichten auf der Seite verfügbar sind. Vielleicht gab es 10 Aufrufe, die alle den gleichen CSS-Klassennamen hatten.
Mehrdad201
Ich habe diesen Hook implementiert und alle Caches geleert - aber er wurde nicht aufgerufen. Nicht sicher warum. Ja, ich habe den Namen überprüft.
Jdhildeb
Das scheint sehr seltsam? Sie haben THEMA durch den Namen Ihres eigentlichen Themas ersetzt? Dies sollte funktionieren, solange Sie es korrekt implementieren.
Cyclonecode
8

Mit der Funktion views_get_page_view können Sie herausfinden, welche Ansicht auf der Seite bereitgestellt wird. Es gibt das Objekt views zurück. Beachten Sie, dass Sie im folgenden Code-Snippet den maschinenlesbaren Namen von Ansichten vergleichen sollten. Sie können jedoch auch einen eigenen Vergleich auf der Grundlage des von views_get_page_view zurückgegebenen Ansichtsobjekts erstellen

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

Nur für den Fall, dass dies für andere nützlich ist, die über diese Frage stolpern und wie ich nach JavaScript für eine Drupal-Ansicht suchen . In Bezug auf D7 & Views 3.7 hat Folgendes für mich am besten funktioniert:

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

Dies war von Vorteil, da ich den Code in meinem Modul behalten wollte und nicht das Thema - da die durch JavaScript vorgenommenen Verbesserungen nichts mit dem visuellen Erscheinungsbild zu tun hatten.

ANMERKUNG: Sollte natürlich HOOKan beiden Stellen durch Ihren Modulnamen ersetzt werden und CLASS GOES HEREsollte auch durch die Klasse ersetzt werden, nach der Sie suchen.

Pebbl
quelle
Warum war pre_render der Übersichtlichkeit halber besser als pre_process?
Nick
@ Nick ~ Es gibt keine HOOK_views_pre_process( api.drupal.org/api/views/views.api.php/7 ) es sei denn , Sie sind also den Grund , warum diese über verwenden THEME_preprocess_views_view- in diesem Fall ist es nur aus der Präferenz von wo Sie möchten Ihre Code-Änderungen hinzufügen. HOOK_views_pre_renderkann von einem Modul aus eingebunden werden, THEME_preprocess_views_viewsollte aber in Ihre Theme- / Template-Datei passen. Sie könnten auch verwenden, HOOK_views_post_renderwenn Sie es vorziehen.
Pebbl
Tut mir leid, ich meinte THEME_preprocess_views_view, ja ... ich bin sicher, ich habe das schon hook_preprocess_views_viewin Modulen gemacht.
Nick
4

Wenn Sie mit Drupal 6 oder 7 arbeiten, können Sie auch Javascript-Assets in den Modulkontext einbeziehen und Assets hinzufügen. Was Kontext erfordert, aber Sie können sicher sein, dass er immer enthalten ist, wenn die Ansicht gerendert wird.

https://drupal.org/project/context_addassets

Auf der Projektseite des Moduls:

Wollten Sie schon immer Javascript oder CSS einbinden, wenn eine bestimmte Ansicht oder ein bestimmter Block gerendert wird? Oder wollten Sie schon immer Javascript oder CSS nur für die Titelseite einbinden, ohne Code schreiben zu müssen?

Mit der Option "Assets im Kontext hinzufügen" können Sie dies tun. Die Benutzeroberfläche ist einfach zu bedienen, damit Sie dies alles tun können, ohne Code schreiben zu müssen. Da ctools verwendet wird, ist dies alles auch exportierbar.

chrisjlee
quelle
2

Schreiben Sie mithilfe von hasClass () von jQuery JavaScript-Code, der in der Ansicht nach einer bestimmten Klasse sucht , und fügen Sie Ihre JavaScript-Datei hinzu, wenn die Bedingung erfüllt ist.

Eine andere Möglichkeit besteht darin, eine Vorlage für Ihre Ansicht zu erstellen und mithilfe von drupal_add_js () JavaScript-Code über diese Vorlage hinzuzufügen .

Niksmac
quelle
Kannst du mir sagen, wie ich das machen kann? In der Tat, wie kann CSS und JS-Dateien nach einem bedingten Ausdruck in Java-Skript enthalten ist wahr?!
Mehrdad201
Für Drupal 8, umreißt diese Antwort , wie eine benutzerdefinierte Ansicht Vorlage machen für die Ansicht Ausgabe , dies zu tun: stackoverflow.com/a/43131240/227926
therobyouknow