Beyond the JDocument, the Asset Tags Builder manages the generation of script and style tags for an Html Document.
composer require anibalsanchez/extly-html-asset-tags-builder
require_once JPATH_ROOT.'/libraries/my-library/vendor/autoload.php';
use Extly\Infrastructure\Support\HtmlAsset\Repository as HtmlAssetRepository;
// Create the repository, where all tags are defined and stored before the rendering
$htmlAssetRepository = HtmlAssetRepository::getInstance();The tags builder has the following predefined ways to include these scripts and styles:
- InlineScriptTag
- InlineStyleTag
- LinkCriticalStylesheetTag
- LinkDeferStylesheetTag
- ScriptTag
For instance, ScriptTag defers the script and the LinkDeferStylesheetTag loads the stylesheet with a script at the end of the body.
Sample code:
use Extly\Infrastructure\Support\HtmlAsset\Asset\InlineScriptTag;
use Extly\Infrastructure\Support\HtmlAsset\Asset\LinkCriticalStylesheetTag;
use Extly\Infrastructure\Support\HtmlAsset\Asset\LinkDeferStylesheetTag;
use Extly\Infrastructure\Support\HtmlAsset\Asset\ScriptTag;
// Add template js
$templateJsFile = CMSHTMLHelper::script('template.js', ['relative' => true, 'pathOnly' => true]);
$templateJsFile = $templateJsFile.'?'.(new JVersion)->getMediaVersion();
$htmlAssetRepository->push(new ScriptTag($templateJsFile));
// Add Stylesheets
$templateCssFile = CMSHTMLHelper::stylesheet('template.css', ['relative' => true, 'pathOnly' => true]);
$templateCssFile = $templateCssFile.'?'.(new JVersion)->getMediaVersion();
$htmlAssetRepository->push(new LinkCriticalStylesheetTag($templateCssFile));
// Additional inline head scripts
$headScripts = $this->params->get('headScripts');
if (!empty($headScripts)) {
$htmlAssetRepository->push(new InlineScriptTag($headScripts));
}
// FontAwesome at the end of the body
$linkStylesheetTag = new LinkDeferStylesheetTag('https://use.fontawesome.com/releases/v5.6.3/css/all.css');
$htmlAssetRepository->push($linkStylesheetTag);These classes help to define the proper renderers for the head and body scripts. In the template, they are called in this way:
Statement to generate the scripts and styles for the document head:
<jdoc:include type="xthtmlassets" />Statement to generate the scriptsat the bottom of the document body:
<jdoc:include type="xthtmlassets" />namespace Joomla\CMS\Document\Renderer\Html;
defined('JPATH_PLATFORM') or die;
use Extly\Infrastructure\Support\HtmlAsset\HtmlAssetTagsBuilder;
use Extly\Infrastructure\Support\HtmlAsset\Repository;
/**
* HTML document renderer for the document `<head>` element.
*/
class XTHtmlAssetsRenderer extends HeadRenderer
{
/**
* Renders the document head and returns the results as a string.
*
* @param string $head (unused)
* @param array $params Associative array of values
* @param string $content The script
*
* @return string The output of the script
*/
public function render($head, $params = [], $content = null)
{
$document = $this->_doc;
// Nothing loaded by default
$document->_styleSheets = [];
$document->_style = [];
$document->_scripts = [];
$document->_script = [];
// My Script and Styles
$headScript = new HtmlAssetTagsBuilder()->generate(Repository::GLOBAL_POSITION_HEAD);
return parent::render($head, $params, $content).$headScript;
}
}namespace Joomla\CMS\Document\Renderer\Html;
defined('JPATH_PLATFORM') or die;
use Extly\Infrastructure\Support\HtmlAsset\HtmlAssetTagsBuilder;
use Extly\Infrastructure\Support\HtmlAsset\Repository;
/**
* HTML document renderer for the document `<head>` element.
*/
class XTHtmlAssetsBodyRenderer extends HeadRenderer
{
/**
* Renders the document head and returns the results as a string.
*
* @param string $head (unused)
* @param array $params Associative array of values
* @param string $content The script
*
* @return string The output of the script
*/
public function render($head, $params = [], $content = null)
{
return new HtmlAssetTagsBuilder()->generate(Repository::GLOBAL_POSITION_BODY);
}
}- Inspired by PrestaShop
JavascriptManager - JAB18 - Let’s build a Joomla PWA PWS website
The MIT License (MIT)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent