Forum OpenACS Development: Suggestion for xowiki javascript includes

1: Suggestion for xowiki javascript includes

Posted by Richard Hamilton on 12/04/10 04:53 PM

Summary
~~~~~~~
It would be handy to be able to do something like the following to direct xowiki to add the script to the document head wrapped in a conditional comment:

[[js:IE9.js|-if lt_IE9]]

What do you think?

Explanation
~~~~~~~~~~~
I have found myself in a situation where I cannot avoid adding some extra code specifically to cope with IE6 and IE7 W3C non-compliance.

I can hack the openacs template to do this (yuk), or set openacs to allow script tags in form input (double yuk!) but I think it would be an enhancement if xowiki supported conditional comments in a js include.

At the moment putting:

into the xowiki::Form content field, as you would expect, results in the script being included in the document head and the conditional comment appearing empty in the page body.

Regards
Richard

2: Re: Suggestion for xowiki javascript includes (response to 1)

Posted by Gustaf Neumann on 12/04/10 06:52 PM

hmm, i would not recommend to use IE's conditional comments, and i am reluctant to provide e.g. user-agent based browser detection (which is not recommended in general, feature detection from js is better).

In your case, i would recommend to detect IE from JavaScript and load additional files conditionally from js. Since you use apparently YUI, the following links might be a starter

http://developer.yahoo.com/yui/yuiloader/
http://www.nczonline.net/blog/2009/07/28/the-best-way-to-load-external-javascript/
http://www.slideshare.net/caridy/yui-3-loading-strategies

3: Re: Suggestion for xowiki javascript includes (response to 2)

Posted by Richard Hamilton on 12/06/10 12:49 AM

Gustaf,

Thank you. Yes on reflection I think you are right. I was experimenting with a general purpose js module that claimed to make IE5.5, IE6 and IE7 fully W3C compliant. It seemed to me that something like this might have had general applicability for openacs and xowiki. However, testing established that it doesn't work properly anyway!

The server side user agent detection option would certainly seem to be a more robust route to take for simple tcl pages, however I am not clear how I might go about arranging for xowiki to do this. I presume multiple versions of each page would be required which may not be ideal.

I will do as you suggest and load a script that modifies my stylesheet after it is loaded for each of the older non-compliant browsers.

As an aside, if one wanted to provide a stylesheet for different user agents (i.e. cellphone, braille machine or some other device) from xowiki, how would this be done?

Regards
Richard

4: Re: Suggestion for xowiki javascript includes (response to 1)

Posted by Dave Bauer on 12/06/10 01:21 AM

In general jQuery, YUI, etc all should add a layer of compatibility if you stick to their apis.

Also, it seems like you'd want the css/js compatibility as a layer that would load site-wide.

This way any specific code in xowiki could rely on the compatibility already being applied.

5: Re: Suggestion for xowiki javascript includes (response to 4)

Posted by Richard Hamilton on 12/06/10 10:50 AM

"...it seems like you'd want the css/js compatibility as a layer that would load site-wide"

I see what you mean, rather than having to add page by page, yes.

One of the main reasons for me using the YUI3 API is to offload the compatibility issues but I haven't found an analogous way to do the same with the CSS. Do you know of any tools that will abstract the CSS issue as well, or is that down to manual tweaks applied based of feature testing in YUI?

6: Re: Suggestion for xowiki javascript includes (response to 2)

Posted by Richard Hamilton on 12/06/10 12:13 PM

Actually, this raises an interesting question with respect to the IE specific conditional comments and whether or not they are a good idea. (I'm sorry that this has drifted a bit off-topic).

Browser detection won't work. Feature detection is better, and the abstractions in YUI and other libraries pretty much do most of the work for you.

However, where your requirements are restricted to the need to supply minor CSS modifications that are absolutely specific to IE6 (for example to cope with the incorrect implementation of the block width calculations, or the lack of a child selector), is it better to start poking around in the DOM of ALL browsers to establish the reported block width for a single element (or the property value you set with the child selector), or better to use the conditional comments that Microsoft has provided for the purpose to insert changes only with IE6?