how do I add javascript to a specific panel-page

Question

I have created a panel page (i.e using panels). I can add html content to it from the panel itself using add content->New custom content. I can also add css classes (add body css classes).

Now I would like to add a jquery button to that panel page. I could add a javascript to my theme but then it would be called on every page load not only this specific panel-page. So I would like to add my javascript through my module.

But how do I programatically check that the current page beeing viewed is that specific page panel? Is there a hook that lets me check that?

Thanks,

baba

Answer 1

I'd probably do this in the theme with template_preprocess_panels_pane() - http://drupalcontrib.org/api/drupal/contributions!panels!panels.module/function/template_preprocess_panels_pane/7

You can do (make sure you have devel.module installed first)

MYTHEME_preprocess_panels_pane(&$vars) {
  dpm($vars);
}

and get a full print out of everything that's going on in all your panel panes. With enough digging, you should be able to find a $vars['_something_']['#attached']['js'] = YOUR_FILE; to hook into. I think you can do this in a module too, if that's what you want.

EDIT: After actually thinking about it though..

I would probably advise against this and just put it in your theme js. Unless it's an enormous amount of js, you're going to be taking better advantage of Drupal's js aggregation by not doing this. If you put the js in your theme, it'll be compiled into the main site js file automatically, whereas if you do something different when only this panel pane is showing, it'll require that an entirely different js file be aggregated and downloaded on pages when it shows.

Assuming this is a performance tweek, I think you might actually be headed in the wrong direction with this one, since browsers should cache this file after the first time it's downloaded.

edit: hook name typo

Answer 2

The theme template for your panel will look like this:

panels-pane--[pane type]--[pane subtype].tpl.php

and you can change the template for your specific needs, this page explains in much greater detail:

https://drupal.org/node/1678810

don't forget the homepage of the panels3 documentation:

https://drupal.org/node/496278

good place to start for all things panels related. The theming overrides is even linked from there.

Answer 3

Have you looked at the JS Injector module? It basically does exactly what you're looking for; inject javascript onto specific pages. It also allows you to specify where you want the javascript loaded (ie. header or footer). Very handy.

https://drupal.org/project/js_injector

Answer 4

I have done it using panel nodes which lets me "wrap" a panel in a node. Then I get access to the node using hook_node_view

function mymodule_node_view($node, $view_mode, $langcode)
{
 if( $node->nid == 49 )  /* 49 is the nid */
  {                                                                                                                                                     
   drupal_add_js(drupal_get_path('module', 'mymodule') . '/myJS.js', 'file');
  }
}