Download the PHP package mouf/html.utils.weblibrarymanager without Composer
On this page you can find all versions of the php package mouf/html.utils.weblibrarymanager. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download mouf/html.utils.weblibrarymanager
More information about mouf/html.utils.weblibrarymanager
Files in mouf/html.utils.weblibrarymanager
Package html.utils.weblibrarymanager
Short Description The Javascript/CSS library manager is a PHP class in charge of keeping track of the JS and CSS files that have been included so far in a web page. Basically, you tell the Javascript/CSS library manager to import a JS/CSS file and it will make sure it is included, only once, and that all dependencies are included as well.
License MIT
Homepage https://github.com/thecodingmachine/html.utils.weblibrarymanager
Informations about the package html.utils.weblibrarymanager
WebLibraryManager: a PHP class to manage Javascript/CSS dependencies in your project
Tutorial
If you need a nice introduction to managing JS/CSS files with Mouf, read the JS/CSS introduction of the "getting things done with mouf" project.
Introduction
WebLibraryManager is a Mouf package that allows you to import CSS/Javascript in your project the simple way. Since v4, WebLibraryManager is using container-interop/service-provider and therefore is framework agnostic.
When installed, the WebLibraryManager package creates a Mouf\Html\Utils\WebLibraryManager\WebLibraryManager
instance.
The usage is simple: when you want to import a new Javascript/CSS library, you create an instance of WebLibrary, you put the list of CSS/JS files in it, and you add this instance to WebLibraryManager.
When you call the toHtml()
method of the WebLibraryManager, it will output all HTML tags to import CSS files first, then all JS files.
If your WebLibrary depends on other web libraries (for instance, if you import jQueryUI, that requires jQuery), the WebLibraryManager will manage all the dependencies for you. If you have special needs about the way to import CSS/JS files, you can develop your own WebLibraryRenderer that will render your library (for instance with inline JS, ...)
Installing WebLibraryManager:
WebLibraryManager comes as a composer package (the name of the package is mouf/html.utils.weblibrarymanager) Usually, you do not install this package by yourself. It should be a dependency of a Mouf template that you will use.
Still want to install it manually? Use the packagist package:
composer.json
Getting an instance of WebLibraryManager
Most of the time, you will be using WebLibraryManager
through a Mouf template.
You can simply get an instance of the WebLibraryManager
from the template:
Adding a JS or CSS file programmatically
The most trivial use of the WebLibraryManager is adding a JS or CSS file to your web page. To do this, you simply write:
You can add any kind of script at the end of the <head> tag using:
You can also declare a complete WebLibrary
object and add it.
This codes create a new WebLibrary and adds it to the WebLibraryManager. The WebLibrary takes an array of Javascript files as first argument, and an array of CSS files as second argument.
Alternatively, if you want to add some CSS styles or Javascript scripts (or anything else) to your <head> tag,
you can simply use the InlineWebLibrary
class that let's you add what you want in the JS, CSS or additional part
of your template.
Outputing the result
Simply use the toHtml()
method to output the content of the WebLibraryManager
:
This call is usually performed by your template.
The WebLibraryManager will group its output in 3 categories:
- CSS declarations go first
- Then JS file declarations
- And finally anything else (usually JS scripts directly put in the web page)
Adding a new WebLibrary by configuration
You can register a new WebLibrary in your container using a service provider.
Assuming you use Funky for creating your service providers, your code will look like this:
Writing your own WebLibraries
If you have specific needs, the WebLibrary class might not be enough. For instance, you might want to output something else than <script> tags.
For these use-cases, you can write a class that implement the WebLibraryInterface
interface.
Since the WebLibraryManager uses Mouf's rendering system, you will need to provide a template for
your class with 3 different contexts: "js", "css" and "additional".
Here is a simple sample:
The GoogleAnalyticsWebLibrary
is a simple class that will output Javascript required by Google Analytics.
This class contains almost nothing except the 2 properties required (accountKey
and domainName
).
Rendering is performed by the 3 templates here:
- JS template is empty
- CSS template is empty
- Additional template contains the Google Analytics code.
Because the Google Analytics tracking code is in the "additional" section, it will be displayed after all CSS and JS files are loaded.
All versions of html.utils.weblibrarymanager with dependencies
mouf/html.renderer Version ^2.0
mouf/html.htmlelement Version ^2.0
thecodingmachine/funky Version ^1
mindplay/composer-locator Version ^2.1.3
psr/container Version ^1