Smart loading of JavaScript

Tuesday 20 January 2009 7:26:20 pm

Hi

We are trying to figure out a smart way to load external JS and CSS files.
From my best knowledge the built in solution allows you to specify what JavaScripts or CSS files that should be loaded. But the problem with this approach is that you need to load the same JavaScripts on every page.

We have extending this solution slightly so that you can set different JavaScripts for different class types and browser types. This goes for both CSS and JS. For example

ad_image_gallery[]=prototype.js
ad_image_gallery[]=scriptaculous.js

Then we do some simple check in include that handles CSS and JS.
Add correct caching and this works fine.

This approach is definitively an improvement over the deafault but not enough.

Lets say we use a magnifier zoom on selected images. The user can set a specific tag for activating this effect in the admin. So what do we do now, do we load CSS and JavaScript for this on every page? What if there are no images with zoom? Images can be used on many types of pages so how would that be defined?

We tried to use the persistent variables to set the files needed and then use that in pagelayout.tpl but that seemed to be very tricky.

So I would humbly like to ask the community if anyone has faced the same challenge?
Any input or ideas would be apriciated...

Fredrik

http://www.areadigital.org

Custom google maps with eZ Publish

http://www.meresverige.dk
http://dsbfirst.meresverige.dk

Wednesday 21 January 2009 1:32:57 am

We tried to use the persistent variables to set the files needed and then use that in pagelayout.tpl but that seemed to be very tricky.

From ezoe:
view:

{set scope=global persistent_variable=hash('title', 'New %tag_name tag'|i18n('design/standard/ezoe', '', hash( '%tag_name', concat('<', $tag_name, '>') )),
                                           'scripts', array('javascript/ezoe/ez_core.js',
                                                            'javascript/ezoe/ez_core_animation.js',
                                                            'javascript/ezoe/ez_core_accordion.js',
                                                            'javascript/ezoe/popup_utils.js'),
                                           'css', array()
                                           )}

popup_pagelayout (slightly modified):

{if is_set( $module_result.content_info.persistent_variable.scripts )}
{foreach $module_result.content_info.persistent_variable.scripts as $script}
    <script type="text/javascript" src={$script|ezdesign}></script>

{/foreach}
{/if}

eZ Online Editor 5: http://projects.ez.no/ezoe || eZJSCore (Ajax): http://projects.ez.no/ezjscore || eZ Publish EE http://ez.no/eZPublish/eZ-Publish-Enterprise-Subscription
@: http://twitter.com/andrerom

Wednesday 21 January 2009 4:47:14 am

In response to Thomas proposal for ezc, in eZ Publish you can already archive this.
Install ezcore extensions and change the pagelayout javascript /css loading to look something like this:

{def $css_include_list = array(
                "core.css",
                "pagelayout.css",
                "content.css",
                "websitetoolbar.css",
                ezini( 'StylesheetSettings', 'CSSFileList', 'design.ini' ),
                first_set( $module_result.content_info.persistent_variable.css_files, array() )
         )
         $js_include_list  = array(
                ezini( 'JavaScriptSettings', 'JavaScriptList', 'design.ini' ),
                first_set( $module_result.content_info.persistent_variable.scripts, array() )
         )}
{* If you use ezflow, should have been sent as part of persistent_variable in timeline.php though *}
{if is_set( $display_timeline_sider )}
    {set $css_include_list = $css_include_list|append('calendar/yui-calendar.css',
                                                      'timeline/timeline.css')}
{/if}

{* Dependancy on ezcore, packs css files togheter to improve performance *}
{ezcss( $css_include_list )}

{* Dependancy on ezcore, packs js files togheter to improve performance, 3 = use jsmin *}
{ezscript( $js_include_list,,,3 )}

Note that the file packing is automatically disabled if site.ini[TemplateSettings]DevelopmentMode is enabled to help you during development.
Also note that there are similar functions in oe 5.0 (ezoecss and ezoescript), but jsmin is not bundeled so not so strong minification.
Also also note that the code above should be inside a uri specific cache block.

@Thomas: code can be found her(very eZ Publish specific though):
http://svn.projects.ez.no/ezcore/trunk/ezcore/classes/ezpacker.php
The concept is simple, calculate where the js/css files are (eZ Publish design specific), fix the image include paths(css), minify the total js/css code and cache the result so you don't have to do it all over again.

eZ Online Editor 5: http://projects.ez.no/ezoe || eZJSCore (Ajax): http://projects.ez.no/ezjscore || eZ Publish EE http://ez.no/eZPublish/eZ-Publish-Enterprise-Subscription
@: http://twitter.com/andrerom

Thursday 22 January 2009 1:51:00 am

Just to make sure im not missing something.

With this approach would it be possible to collect more values to the persistent variable?

Lets say I want to add a few CSS files in the main template and then in the image template we want to add some more. Basically appending to the persistent_variable.

Fredrik

http://www.areadigital.org

Custom google maps with eZ Publish

http://www.meresverige.dk
http://dsbfirst.meresverige.dk

Thursday 22 January 2009 5:47:44 am

I've been thinking about such a template operator for some time now. I'll probably write one when I've got the time.

As for <i>Note: This will only work in node templates, as content/view and content/versionview are the only views that sends this value to pagelayout in the 'content_info' hash.</i>:

That's quite unfortunate (and has been reported as a bug/feature request before). It shouldn't be a problem to add the persistent_variable to other views, should it? Does it help if we provide patches (i.e. would it get into the eZ Publish kernel in a reasonable amount of time)? And (as a workaround), should it be possible to set a global variable in a template operator if the corresponding template variable does not exist?

Accessible website starting from eZ publish 3.0 (currently: 4.1.0): http://pluspunkt.at

Tuesday 27 January 2009 7:30:29 pm

André, that sounds like a very interesting idea.
Let me know if there is anyway of us sharing the fruits of your work :)

Fredrik

http://www.areadigital.org

Custom google maps with eZ Publish

http://www.meresverige.dk
http://dsbfirst.meresverige.dk

Thursday 19 March 2009 12:19:52 am

Patch above is part of ezwebin 1.4 included in eZ Publish 4.1, just use ezpagedata_set and ezpagedata_append to add parameters to persistent_variable (and protected member if persistent_variable is not supported by current view).

_set: set an index on the persistent_variable hash
_append: append a variable on a index on the persistent_variable hash

ex:

{ezpagedata_set('script_list', array( 'some.js' ))}
{ezpagedata_append('script_list', 'someother.js')}

persistent_variable will now be:
hash( 'script_list', array( 'some.js', 'someother.js' ) )

eZ Online Editor 5: http://projects.ez.no/ezoe || eZJSCore (Ajax): http://projects.ez.no/ezjscore || eZ Publish EE http://ez.no/eZPublish/eZ-Publish-Enterprise-Subscription
@: http://twitter.com/andrerom