drupal_add_js and drupal_add_css

[jalama]

In Drupal is there any reason these two functions are not used more?  That way CiviCRM could leverage the js and css compression, helping in page render times.  If not, is may be helpful to skip loading /templates/CRM/common/jquery.tpl in favor of writing those .js file load into the civicrm_html_head function.

So in civicrm.module starting at line 60 replace the current code with.  I commented out the old lines an could not get the line adding dojo.js to work with the drupal_add_js function.  I did this one a local install and it seems to run fine, though with minimal testing of a few forms.

Code: [Select]

   if ( $includeCommon ) {
        drupal_add_css(drupal_get_path('module', 'civicrm') . '/../css/skins/aqua/theme.css','module','all',TRUE);
        //$head .= "<style type=\"text/css\">@import url({$config->resourceBase}css/skins/aqua/theme.css);</style>\n";
        //drupal_add_js($config->resourceBase.'packages/dojo/dojo/dojo.js\ djConfig=\"isDebug: false, parseOnLoad: true, usePlainJson: true\"','module','header',FALSE,TRUE,TRUE);
        $head .= "<script type=\"text/javascript\" src=\"{$config->userFrameworkResourceURL}packages/dojo/dojo/dojo.js\" djConfig=\"isDebug: false, parseOnLoad: true, usePlainJson: true\" ></script>";
        drupal_add_js(drupal_get_path('module', 'civicrm') . '/../packages/dojo/dojo/commonWidgets.js','module');
        //$head .= "<script type=\"text/javascript\" src=\"{$config->userFrameworkResourceURL}packages/dojo/dojo/commonWidgets.js\"></script>";
        drupal_add_css(drupal_get_path('module', 'civicrm') . '/../packages/dojo/dijit/themes/tundra/tundra.css','module','all',TRUE);
        //$head .= "<style type=\"text/css\">@import url({$config->resourceBase}packages/dojo/dijit/themes/tundra/tundra.css);</style>";
        drupal_add_js(drupal_get_path('module', 'civicrm') . '/../js/calendar.js','module');
        //$head .= "<script type=\"text/javascript\" src=\"{$config->resourceBase}js/calendar.js\"></script>";
        drupal_add_js(drupal_get_path('module', 'civicrm') . '/../js/lang/calendar-lang.php?'.$config->lcMessages,'module');
        //$head .= "<script type=\"text/javascript\" src=\"{$config->resourceBase}js/lang/calendar-lang.php?{$config->lcMessages}\"></script>";
        drupal_add_js(drupal_get_path('module', 'civicrm') . '/../js/calendar-setup.js','module');
        //$head .= "<script type=\"text/javascript\" src=\"{$config->resourceBase}js/calendar-setup.js\"></script>";
    }

[Kurund Jalmi]

In Drupal is there any reason these two functions are not used more?  That way CiviCRM could leverage the js and css compression, helping in page render times.

I can't remember any specific reason for not using drupal_add_js and drupal_add_css, looks like legacy code. We will make changes in trunk and test.

If not, is may be helpful to skip loading /templates/CRM/common/jquery.tpl in favor of writing those .js file load into the civicrm_html_head function.

We need to initialize jquery before we render any form, hence we include it in  civicrm_html_head();

Kurund

[jalama]

With the second comment I want to make sure what I said makes sense.  What I'm asking is could we replace the reference to jquery.tpl with something like the code below.  That way those files could get included in the css and js compression offered by Drupal.  Probably best to contain it inside the if ( $includeCommon )  clause under the code I pasted in the beginning of this thread

so drop

Code: [Select]

$template =& CRM_Core_Smarty::singleton( );
    $head .= $template->fetch( 'CRM/common/jquery.tpl' );
   

so starting at line 60 civicrm_html_head would look like this

Code: [Select]

    if ( $includeCommon ) {
        drupal_add_css(drupal_get_path('module', 'civicrm') . '/../css/skins/aqua/theme.css','module','all',TRUE);
        $head .= "<script type=\"text/javascript\" src=\"{$config->userFrameworkResourceURL}packages/dojo/dojo/dojo.js\" djConfig=\"isDebug: false, parseOnLoad: true, usePlainJson: true\" ></script>";
        drupal_add_js(drupal_get_path('module', 'civicrm') . '/../packages/dojo/dojo/commonWidgets.js','module');
        drupal_add_css(drupal_get_path('module', 'civicrm') . '/../packages/dojo/dijit/themes/tundra/tundra.css','module','all',TRUE);
        drupal_add_js(drupal_get_path('module', 'civicrm') . '/../js/calendar.js','module');
        drupal_add_js(drupal_get_path('module', 'civicrm') . '/../js/lang/calendar-lang.php?'.$config->lcMessages,'module');
        drupal_add_js(drupal_get_path('module', 'civicrm') . '/../js/calendar-setup.js','module');
       //this is the beginning of what used to live in jquery.tpl
       drupal_add_js(drupal_get_path('module', 'civicrm') . '/../packages/jquery/jquery.js','module');
      drupal_add_js(drupal_get_path('module', 'civicrm') . '/../packages/jquery/jquery-ui.js','module');
      drupal_add_css(drupal_get_path('module', 'civicrm') . '/../packages/jquery/css/jquery-ui.css','module','all',TRUE);
      drupal_add_js(drupal_get_path('module', 'civicrm') . '/../packages/jquery/plugins/flexigrid.js','module');
      drupal_add_css(drupal_get_path('module', 'civicrm') . '/../packages/jquery/css/flexigrid.css','module','all',TRUE);
      drupal_add_js(drupal_get_path('module', 'civicrm') . '/../packages/jquery/plugins/jquery.autocomplete.js','module');
      drupal_add_css(drupal_get_path('module', 'civicrm') . '/../packages/jquery/css/jquery.autocomplete.css','module','all',TRUE);
      drupal_add_js(drupal_get_path('module', 'civicrm') . '/../packages/jquery/plugins/jquery.chainedSelects.js','module');
      drupal_add_js(drupal_get_path('module', 'civicrm') . '/../packages/jquery/plugins/jquery.treeview.min.js','module');
      drupal_add_js(drupal_get_path('module', 'civicrm') . '/../packages/jquery/plugins/jquery.bgiframe.pack.js','module');
      drupal_add_js(drupal_get_path('module', 'civicrm') . '/../packages/tinymce/jscripts/tiny_mce/tiny_mce.js','module');
     <script type="text/javascript">var cj = jQuery.noConflict(); $ = cj;</script>
}

    return $head;


[Kurund Jalmi]

I think for most of the jquery plugins, we used compressed file. Does drupal compresses it further ?

Kurund

[jalama]

Yea under Site Configuration | Performance you can choose to compress the js and css files into one file respectively, therefore requiring fewer http requests.  So someone could cut out 15 http requests with the code below, assuming they use that setting (which I do for every site).  It really does make a difference in page load speeds.

Though compression may be the wrong word, maybe concatenate would be the better word to use?

[jalama]

okay a little more debugging,

Code: [Select]

    if ( $includeCommon ) {
      drupal_add_css(drupal_get_path('module', 'civicrm') . '/../css/skins/aqua/theme.css','module','all',TRUE);
      $head .= "<script type=\"text/javascript\" src=\"{$config->userFrameworkResourceURL}packages/dojo/dojo/dojo.js\" djConfig=\"isDebug: false, parseOnLoad: true, usePlainJson: true\" ></script>";
      drupal_add_js(drupal_get_path('module', 'civicrm') . '/../packages/dojo/dojo/commonWidgets.js','module');
      drupal_add_css(drupal_get_path('module', 'civicrm') . '/../packages/dojo/dijit/themes/tundra/tundra.css','module','all',TRUE);
      drupal_add_js(drupal_get_path('module', 'civicrm') . '/../js/calendar.js','module');
      $head .= "<script type=\"text/javascript\" src=\"{$config->resourceBase}js/lang/calendar-lang.php?{$config->lcMessages}\"></script>";
      drupal_add_js(drupal_get_path('module', 'civicrm') . '/../js/calendar-setup.js','module');
      //this is the beginning of what used to live in jquery.tpl
      drupal_add_js(drupal_get_path('module', 'civicrm') . '/../packages/jquery/jquery.js','module');
      drupal_add_js(drupal_get_path('module', 'civicrm') . '/../packages/jquery/jquery-ui.js','module');
      drupal_add_css(drupal_get_path('module', 'civicrm') . '/../packages/jquery/css/jquery-ui.css','module','all',TRUE);
      drupal_add_js(drupal_get_path('module', 'civicrm') . '/../packages/jquery/plugins/flexigrid.js','module');
      drupal_add_css(drupal_get_path('module', 'civicrm') . '/../packages/jquery/css/flexigrid.css','module','all',TRUE);
      drupal_add_js(drupal_get_path('module', 'civicrm') . '/../packages/jquery/plugins/jquery.autocomplete.js','module');
      drupal_add_css(drupal_get_path('module', 'civicrm') . '/../packages/jquery/css/jquery.autocomplete.css','module','all',TRUE);
      drupal_add_js(drupal_get_path('module', 'civicrm') . '/../packages/jquery/plugins/jquery.chainedSelects.js','module');
      drupal_add_js(drupal_get_path('module', 'civicrm') . '/../packages/jquery/plugins/jquery.treeview.min.js','module');
      drupal_add_js(drupal_get_path('module', 'civicrm') . '/../packages/jquery/plugins/jquery.bgiframe.pack.js','module');
      drupal_add_js(drupal_get_path('module', 'civicrm') . '/../packages/tinymce/jscripts/tiny_mce/tiny_mce.js','module');
      $head .= "<script type=\"text/javascript\">var cj = jQuery.noConflict(); $ = cj;</script>";
    }

    return $head;


[Donald Lobo]

we did not use drupal_add_js because this broke dojo . i did not investigate what/why/how a lot, but tried it a few times and the end result was a broken civicrm

lobo

[jalama]

Do you remember what functionality was broken?  I'm kicking it around on a local version of a client's site and it seem to be working.  So far though All I have tested is reviewing records, adding gifts and setting up new events.

[jalama]

FYI

Been testing this a little.  Ran into my first issue.  This stops the display of custom fields in the edit screen of contacts when the js and css are optimized.

[najoory]

My local Apache crashes when I try to add such way all 700+ Kb scripts   Thinking about manually join all js and css in single file. Also want to try PHP Speedy instead of default Drupal mechanism.

[xavier]

increase your available mem in php does help, doesn't it ?

[Kurund Jalmi]

We plan to optimize css and js in 3.1.3, check: http://issues.civicrm.org/jira/browse/CRM-5878

Kurund