How to load JS/ CSS Plugins (colorbox, cycle2, ...)

[pwFoo]

How should I add JS/ CSS files in PW? 

1. Load in template file if needed (simple, maybe have to copied to more template files or included with a inc-file)
2. Create a colorbox module with needed plugin files (js, css, ...) and (auto-)load inside a template if needed. As module also configuration parameters are possible.

At the moment (tests only) I include js/ css straight in the template file.

How to add js/ css files to a FilenameArray I found here:

http://processwire.com/talk/topic/4776-have-a-scriptsstyles-loader-like-wp/

[pwired]

Your answers can be found here:

http://processwire.com/talk/topic/2782-template-design-better-route/#entry27206

http://processwire.com/talk/topic/2210-help-getting-a-custom-styles-php-file-working/?p=20641

[pwFoo]

Thanks pwired, both links are excellent!   

[Soma]

In some projects I use a mix of the $config->scripts and $config->styles FilenameArray to add scripts in templates. And one similar to the one Ryan, where I can create js and css files with the name of the template and they'll get loaded if existing.

In a recent project I use a custom

$config->siteScripts = new FilenameArray();
$config->siteStyles = new FilenameArray();

I set in a autoload module. Then I add the script in a template:

$config->siteScripts->add($config->urls->templates . "js/yx.js");

This also allows for modules I create, for example widgets (that are not autoload), that need scripts/styles to add them with simply adding the method above in the init(). So as soon as I load the module in the front-end they'll get added to the array.

To output, I use the same method as found in default.php from the admin template.

<?php foreach($config->siteScripts->unique() as $file) echo "\n\t<script src='$file'></script>"; ?>

You could also just use the $config->scripts used in the backend, but if you use form (InputfieldForm) API in the front-end, loading inputfields modules will also load scripts and styles from those in the filename array. This may not desired, that's why I use a custom filename array.

For anything basic and global, I add scripts and styles hardcoded in the main template.

[Martijn Geerts]

In a recent project I have plans to do almost identical.

I use all own & sitescripts for $config->styles & scripts. The new FilenameArray(); I gonna use for all Banners and adds & stuff. This way I can be sure that all my own scripts and styles comes absolutely first. They are all loaded on demand, there are no hardcoded links in the templates scripts except for jQuery.

[pwFoo]

Thanks Soma, looks like a good PW solution! I like it. 

Which one is taken depends on the project (own css/ js per template or added via FilenameArray)...

I have to think about my needs and choose the proper solution

[pwFoo]

I decided to use the way Soma suggested
 
Created css, js and views folder inside templates and include a layout.php file for basic layout/ design at the end of each site template (=controller) file. 
Templates are used as controller and use views via templateFile class.

$config->jsFiles = new FilenameArray();
$config->cssFiles = new FilenameArray();

Simple add scripts at the top like this.

$jsFiles = array('js/first.js', 'js/second.js');
$cssFiles = array('css/normalize.min.css', 'css/pocketgrid.min.css', 'css/layout.css');

Because of the js/ css order (site template add scripts/ styles before layout template) I have to take care about the add/ prepend order of the basic/ first styles and scripts. Solved it with array_reverse.

$tplDir = $config->urls->templates;
foreach (array_reverse($jsFiles) as $jsFile) {
$config->jsFiles->prepend($tplDir . $jsFile);
}
 
foreach (array_reverse($cssFiles) as $cssFile) {
$config->cssFiles->prepend($tplDir . $cssFile);
}

Last step is output at the layout.tpl.php view

$view->set ('js', $config->jsFiles->unique());
$view->set ('css', $config->cssFiles->unique()); 

<?php foreach($js as $file): ?>
<script src="<?php echo $file; ?>"></script>
<?php endforeach; foreach($css as $file): ?>
<link rel="stylesheet" href="<?php echo $file; ?>" />
<?php endforeach; ?>

To build my layout I use normalize.css V1 and pocketgrid (thanks Soma ).

[Martijn Geerts]

Little site note on the unique methode after the Wirearray of files:

$config->jsFiles->unique()

Appending unique isn't needed anymore, as the ->add('script-here') insures it's uniqueness. This works for 2.2, 2.3 and dev. 

[pwFoo]

Thanks for your hint. You're right, works fine without unique