Serendipity Forums

Sounds clumsy, right? Here's what I want to do:

I'm looking for a way to conditionally include Javascript files, the condition being specific elements in the entry content. For example: "if the entry includes an image from the media db which is linked to a bigger version of the image, include the lightbox script" or "if the entry includes a pre element which is marked as code, include the syntax highlighting script".

The reason for this is performance -- there's just no need to include either one on every page of a blog. Especially if you're targeting mobile users, every KB is worth saving.

Now, I am aware this could easily be done using extended entry properties. Just add two entry properties and check in the template whether they're empty. If not, include JS. But this feels unsexy and is prone to error. It would be much easier to have a template variable or something.

Any ideas?

YL

Hi!

I suppose you'd want to have that condition inside the head section of the index.tpl, right?

That's harder, because you'd need a code in the head then that iterates over every entry being displayed, do a fulltext regular expression and evaluate it to show up. That costs much more performance than you save by making it optional.

JS files will be cached by the browser, so that should not hurt. The JS executed should be optimized. If jquery does not find a $('.entry pre') for example, the overhead is very small...

Regards,
Garvin

garvinhicking wrote:I suppose you'd want to have that condition inside the head section of the index.tpl, right?

Not necessarily. You might remember this from our discussions about adding jQuery -- for performance reasons, it often makes sense to include JS in the body, right before the </body> tag. That way, loading JS files won't block downloading the CSS file(s), especially since these days, most JS is executed after the document is rendered anyway.

garvinhicking wrote:JS files will be cached by the browser, so that should not hurt.

Actually, not necessarily either. Depending on the iOS version and device it's running on, Mobile Safari will not cache any component larger than a certain limit. See http://www.yuiblog.com/blog/2010/06/28/ ... he-limits/.

(The more I read about this, the less I want an iPhone myself.)

garvinhicking wrote: The JS executed should be optimized. If jquery does not find a $('.entry pre') for example, the overhead is very small...

Well, the JS file is still loaded. Depending on the implementation, it could also require loading an additional stylesheet (as most lightbox implementations do), which could reference background images ... oh, this is a friggin' mess! (Not S9y's mess, though.)

As I mentioned, this could very well be achieved using extended entry properties, so never mind.

YL

yellowled wrote:I'm looking for a way to conditionally include Javascript files, the condition being specific elements in the entry content. For example: "if the entry includes an image from the media db which is linked to a bigger version of the image, include the lightbox script" or "if the entry includes a pre element which is marked as code, include the syntax highlighting script".

Hi YL

Just a fastshot: Not very sexy too, but why don't you use the entries text to find out?
media db images have something like <!-- s9ymdb:75 --> which should be easy to get parsed by smarty via something like {$entry.body|replace:'<!-- s9ymdb':'<include js here><!-- s9ymdb'} and pre like {$entry.body|replace:'<pre class="syntax">':'<include js here><pre class="syntax">'}

....No, not good thats what Garvin mentioned about loosing performance...

but what about workaround the problem by adding a JS Category and switch the tpl to {if entry is in Category include JS} ?

Timbalu wrote:something like {$entry.body|replace:'<!-- s9ymdb':'<include js here><!-- s9ymdb'} and pre like {$entry.body|replace:'<pre class="syntax">':'<include js here><pre class="syntax">'}

I most definitely do not want to include js within the entry body.

Timbalu wrote:but what about workaround the problem by adding a JS Category and switch the tpl to {if entry is in Category include JS} ?

That would require multiple categories which in my humble opinion are, well, unnecessary.

Also, both solutions require additional markup for something which has nothing to do with markup. I do appreciate your thoughts, but this is not exactly reasonable. Besides, the only thing which makes the extended entry properties option unsexy is the fact that entry properties can not be a simple checkbox.

YL