TeamSpeak3-Webviewer: Dynamically Loaded CSS?

[David.C]

Fairly new to TS3 and just put a server up and want to make sure I am on the right track and not chasing a rabbit down the hole or doing something that somebody else already done.

Issue: I need to be able to include CSS file dynamically based upon a GET parameter. No, I don't want 50 million config files around just for the sake of changing CSS dynamically.

I started down this path ... passed the parameter in, added it to the styles array ... but of course that didn't work because the page is cached and not built on the fly (at first I thought only the stats were cached ... silly me).

I can think of several ways to skin this cat, but I thought before I go chasing rabbits down holes I should ask out here if this was handled already and I am just missing it. Also, I am running the iframe option as the ajax option throw a parse error, probably cause I am on 5.2?

Thought 1: Break up the cache into two parts ... pre-CSS and post-CSS. Then, when assembling the page, pull in the pre-CSS section, insert the custom CSS link, then pull in the post-CSS cache. Fairly simple, but not really elegant.

Thought 2: Create a module to insert in-line CSS (or molest an existing module to insert in-line CSS). I don't really like this option because I would rather have a link, then having in-line CSS.

Thought 3: Add "HTML" placeholder comments to the Cache Build routine, then preg_replace in the custom CSS file after the place holders. I think I like this option the best as it seems the least invasive. It would be even better if I added placeholders to *all* the sections in the head, then created a module that would run over the head, check the options array for add-ins, then ... well ... add them in.

Is option 3 the best option? and I can't believe I am the first to have this problem ... has somebody else already solved this in a better fashion? or a similar fashion?

Thanks in advance for any help on this matter.

[David.C]

37 Views and no feedback ... I would be disappointed, but I don't know if the lack of response is apathy or lack of knowledge.

Here is what I did:

1) htmlframe.php: Added Line: <!-- RuntimeStyle Start --><!-- RuntimeStyle End -->

2) style.php: Added Method: addRuntime($text, $output). $text is the url/filename, $output is the output before it's sent. Simple str_replace substituting the placeholder for the CSS link

3) bootstrap: Added Line to grab variable from $_GET and store varible in $config.

4) TSViewer: Inside $output check loop: $output = $mManager->getModule("style")->addRuntime($config["club_css"],$output);

Not as elegant as I would have liked ... but saves me from having to setup configs for each possible CSS style.

[drak3]

Hi,
sorry for the late reply, but the problem is quite tricky.
Currently there is no "official" way for including a custom css with caching enabled.
So the only currently simple method is disable caching and add a call to $mManager->getModule("style")->loadStyle($filename);
We also opened a ticket on github addressing this problem: https://github.com/devMX/TeamSpeak3-Webviewer/issues/96
Currently thinkable solutions are some sort of postprocessing such as you implemented it, just with a specific event fired, or a posibility to influence the caching module so one can write a module that caches depending on a get parameter. (I personally like this most since it seems easyer and does not need some kind of template postprocessing)

I have to admit that the code is relatively messy and inflexible, as I wasn't that expirienced when writing this app (to be honest, it was my first bigger project...) so it may take some time to implement this features as I have to rewrite (and understand ) some more code.
We are also planning version 2, which will be more flexible and should be more easily extendable. But we're just planning, so i can't give you a specific date.
So, if your solution is working, you should keep it, and maybe we'll implement this feature in v1.

cheers,

drak3