WebLoader

Component for CSS and JS files loading.

Author: Jan Marek Licence: MIT

Updated for Nette 3/3.1 and PHP 8.0 by Gappa.

Example

Control factory in Nette presenter:

<?phpprotectedfunctioncreateComponentCss()
{
$files = newWebLoader\FileCollection(WWW_DIR . '/css');
$files->addFiles(array(
'style.css',
WWW_DIR . '/colorbox/colorbox.css',
));
$files->addWatchFiles(Finder::findFiles('*.css', '*.less')->in(WWW_DIR . '/css'));
$compiler = WebLoader\Compiler::createCssCompiler($files, WWW_DIR . '/temp');
$compiler->addFilter(newWebLoader\Filter\VariablesFilter(array('foo' => 'bar')));
$compiler->addFilter(function ($code) {
return cssmin::minify($code, "remove-last-semicolon");
});
$control = newWebLoader\Nette\CssLoader($compiler, '/webtemp');
$control->setMedia('screen');
return$control;
}

Template:

{control css}

Example with Nette Framework extension used

Configuration in app/config/config.neon:

extensions:
webloader: WebLoader\Nette\Extension
services:
wlCssFilter: WebLoader\Filter\CssUrlsFilter(%wwwDir%)
lessFilter: WebLoader\Filter\LessFilter
jwlCssMinFilter: Joseki\Webloader\CssMinFilter
webloader:
css:
default:
files:
- style.css
- {files: ["*.css", "*.less"], from: %appDir%/presenters} # Nette\Utils\Finder support
filters:
- @jwlCssMinFilter
fileFilters:
- @lessFilter
- @wlCssFilter
watchFiles: # only watch modify file
- {files: ["*.css", "*.less"], from: css}
- {files: ["*.css", "*.less"], in: css}
js:
default:
files:
- %appDir%/../libs/nette/nette/client-side/netteForms.js
- web.js

For older versions of Nette, you have to register the extension in app/bootstrap.php:

$webloaderExtension = new \WebLoader\Nette\Extension();
$webloaderExtension->install($configurator);

Usage in app/presenters/BasePresenter.php:

/** @var \WebLoader\Nette\LoaderFactory @inject */public$webLoader;
/** @return CssLoader */protectedfunctioncreateComponentCss()
{
return$this->webLoader->createCssLoader('default');
}
/** @return JavaScriptLoader */protectedfunctioncreateComponentJs()
{
return$this->webLoader->createJavaScriptLoader('default');
}

Template:

{control css}
{control js}