CiviCRM Community Forums (archive)

Hi there,

I ran into a problem with the new JS and CSS inclusion within the new jquery.files.tpl and jquery.tpl. I needed to include externally hosted JS and CSS files for Google Maps Local search functionality for my maps. But including external references to javascript files with a full URL such as this one below, did not get rendered once added in the new jquery.files.tpl file:

<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=GMAPS_API_KEY"></script>

I wrote a patch against civicrm.module to allow Durpal to properly include for 'external' JS and CSS as in the above case. In Drupal 6 external JS is not handled by drupal_add_js(), but instead by drupal_set_html_head(); [I believe that in Drupal 7 it will be the same API call to drupal_add_js(..., 'external').]

Brief description of patch:

Starting in 3.1 branch drupal_add_js() and drupal_add_css() are used to include custom JS and CSS files by parsing the new jquery.files.tpl file dynamically. With the proposed patch it is possible to include straight "http://..." references to JS and CSS files hosted on external servers within a Drupal/CiviCRM installation. One common example are web services offered by Google or Yahoo which require inclusion of externally hosted JS and CSS. Simply add the required full URL into the jquery.files.tpl file:

/sites/all/modules/civicrm/templates/CRM/common/jquery.files.tpl

....
packages/jquery/plugins/jquery.timeentry.pack.js
packages/jquery/plugins/jquery.mousewheel.pack.js

packages/jquery/plugins/jquery.toolTip.js

http://www.google.com/uds/css/gsearch.css
http://www.google.com/uds/solutions/localsearch/gmlocalsearch.css
http://maps.google.com/maps?file=api&v=2&key=GMAPS_API_KEY
http://www.google.com/uds/api?file=uds.js&v=1.0
http://www.google.com/uds/solutions/localsearch/gmlocalsearch.js

packages/jquery/css/dataTable.css
packages/jquery/plugins/jquery.dataTables.min.js
....


NOTE: I had to come up with a workaround for the Google Maps API call by searching for "file=api" since that call itself is not designated as a JS file.

I think going forward it would be useful to change the layout of the jquery.files.tpl file to allow for explicit typing of JS versus CSS in two separate sections of the file rather than simply inferring the file type from the filename.

Hope this patch helps anyone else who's run into this problem.

Cheers,

Taiga


--- /var/www/DRUPALROOT/sites/all/modules/civicrm/drupal/civicrm.module 2010-05-06 04:01:35.633571476 -0500
+++ new.civicrm.module  2010-05-06 05:59:33.918208289 -0500
@@ -49,11 +49,23 @@
             if ( empty( $line ) ) {
                 continue;
             }
-            if ( strpos( $line, '.js' ) !== false ) {
-                drupal_add_js( drupal_get_path('module', 'civicrm' ) . '/../' . $line );
-            } else if ( strpos( $line, '.css' ) !== false ) {
-                drupal_add_css( drupal_get_path('module', 'civicrm' ) . '/../' . $line );
-            }
+           if ( strpos( $line, 'http:' ) !== false ) {
+               $urlpart = preg_split('/http:/', $line);
+               if ( strpos( $line, '.js' ) !== false ) {
+                   drupal_set_html_head( '<script src="http:'.$urlpart[1].'" type="text/javascript"></script>' );
+               } else if ( strpos( $line, 'file=api' ) !== false ) {
+                   drupal_set_html_head( '<script src="http:'.$urlpart[1].'" type="text/javascript"></script>' );
+               } else if ( strpos( $line, '.css' ) !== false ) {
+                   drupal_set_html_head( '<style type="text/css">@import url("http:'.$urlpart[1].'");</style>' );
+                   #drupal_add_css( 'http://'.$urlpart[1], 'external' );
+               }
+           } else {
+               if ( strpos( $line, '.js' ) !== false ) {
+                   drupal_add_js( drupal_get_path('module', 'civicrm' ) . '/../' . $line );
+               } else if ( strpos( $line, '.css' ) !== false ) {
+                   drupal_add_css( drupal_get_path('module', 'civicrm' ) . '/../' . $line );
+               }
+           }
         }

         // add Common.js