joomla/cms
29
0
Fork 0
mirror of https://github.com/joomla/joomla-cms.git synced 2024-06-28 08:03:40 +00:00
Code Packages Releases Activity

[4.0] Make lighthouse happy (#32141)

Browse Source 
I hope I got the comments and discussion right and problems are fixed so we are good to merge this as an improvement and example how someone can do it.
This commit is contained in:
Dimitris Grammatikogiannis 2021-04-19 09:24:09 +02:00 committed by GitHub
parent fab283efd8
commit c57cd15d1d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 135 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
libraries/src/Document/Renderer/Html/StylesRenderer.php
View File

@ -191,11 +191,21 @@ class StylesRenderer extends DocumentRenderer
$relation = isset($attribs['rel']) ? $attribs['rel'] : 'stylesheet';
if (isset($attribs['rel']))
{
unset($attribs['rel']);
}
// Render the element with attributes
$buffer .= '<link href="' . htmlspecialchars($src) . '" rel="' . $relation . '"';
$buffer .= $this->renderAttributes($attribs);
$buffer .= ' />';
if ($relation === 'lazy-stylesheet')
{
$buffer .= '<noscript><link href="' . htmlspecialchars($src) . '" rel="stylesheet" /></noscript>';
}
// This is for IE conditional statements support.
if (!\is_null($conditional))
{

3
modules/mod_menu/tmpl/default.php
View File

@ -13,7 +13,8 @@ use Joomla\CMS\Helper\ModuleHelper;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */
$wa = $app->getDocument()->getWebAssetManager();
$wa->registerAndUseScript('mod_menu', 'mod_menu/menu.min.js', [], ['defer' => true]);
$wa->registerAndUseScript('mod_menu', 'mod_menu/menu.min.js', [], ['type' => 'module']);
$wa->registerAndUseScript('mod_menu', 'mod_menu/menu-es5.min.js', [], ['nomodule' => true, 'defer' => true]);
$id = '';

8
templates/cassiopeia/component.php
View File

@ -51,12 +51,16 @@ $this->addHeadLink(HTMLHelper::_('image', 'joomla-favicon.svg', '', [], true, 1)
$this->addHeadLink(HTMLHelper::_('image', 'favicon.ico', '', [], true, 1), 'alternate icon', 'rel', ['type' => 'image/vnd.microsoft.icon']);
$this->addHeadLink(HTMLHelper::_('image', 'joomla-favicon-pinned.svg', '', [], true, 1), 'mask-icon', 'rel', ['color' => '#000']);
// Defer font awesome
$wa->getAsset('style', 'fontawesome')->setAttribute('rel', 'lazy-stylesheet');
?>
<!DOCTYPE html>
<html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<jdoc:include type="head" />
<jdoc:include type="metas" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<jdoc:include type="styles" />
<jdoc:include type="scripts" />
</head>
<body class="<?php echo $this->direction === 'rtl' ? 'rtl' : ''; ?>">
<jdoc:include type="message" />

4
templates/cassiopeia/error.php
View File

@ -84,6 +84,9 @@ else
$wrapper = $params->get('fluidContainer') ? 'wrapper-fluid' : 'wrapper-static';
$this->setMetaData('viewport', 'width=device-width, initial-scale=1');
// Defer font awesome
$wa->getAsset('style', 'fontawesome')->setAttribute('rel', 'lazy-stylesheet');
?>
<!DOCTYPE html>
<html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
@ -188,6 +191,5 @@ $this->setMetaData('viewport', 'width=device-width, initial-scale=1');
<?php endif; ?>
<jdoc:include type="modules" name="debug" style="none" />
</body>
</html>

2
templates/cassiopeia/html/mod_menu/dropdown-metismenu.php
View File

@ -15,7 +15,7 @@ use Joomla\Utilities\ArrayHelper;
/** @var WebAssetManager $wa */
$wa = $app->getDocument()->getWebAssetManager();
$wa->registerAndUseScript('metismenu', 'media/templates/cassiopeia/js/mod_menu/menu-metismenu.min.js', [], [], ['metismenujs']);
$wa->registerAndUseScript('metismenu', 'media/templates/cassiopeia/js/mod_menu/menu-metismenu.min.js', [], ['defer' => true], ['metismenujs']);
$attributes = [];
$attributes['class'] = 'mod-menu mod-menu_dropdown-metismenu metismenu mod-list ' . $class_sfx;

4
templates/cassiopeia/index.php
View File

@ -95,6 +95,9 @@ $wrapper = $this->params->get('fluidContainer') ? 'wrapper-fluid' : 'wrapper-sta
$this->setMetaData('viewport', 'width=device-width, initial-scale=1');
$stickyHeader = $this->params->get('stickyHeader') ? 'position-sticky sticky-top' : '';
// Defer font awesome
$wa->getAsset('style', 'fontawesome')->setAttribute('rel', 'lazy-stylesheet');
?>
<!DOCTYPE html>
<html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
@ -216,6 +219,5 @@ $stickyHeader = $this->params->get('stickyHeader') ? 'position-sticky sticky-top
<?php endif; ?>
<jdoc:include type="modules" name="debug" style="none" />
</body>
</html>

3
templates/cassiopeia/joomla.asset.json
View File

@ -54,6 +54,9 @@
"description": "The file containing the javascript for this template.",
"type": "script",
"uri": "template.js",
"attributes" : {
"defer": true
},
"dependencies": [
"core"
]

58
templates/cassiopeia/js/template.es5.js Normal file
View File

@ -0,0 +1,58 @@
/**
* @package Joomla.Site
* @subpackage Templates.Cassiopeia
* @copyright (C) 2017 Open Source Matters, Inc. <https://www.joomla.org>
* @license GNU General Public License version 2 or later; see LICENSE.txt
* @since 4.0
*/
Joomla = window.Joomla || {};
(function(Joomla, document) {
'use strict';
function initTemplate(event) {
var target = event && event.target ? event.target : document;
/**
* Prevent clicks on buttons within a disabled fieldset
*/
var fieldsets = target.querySelectorAll('fieldset.btn-group');
for (var i = 0; i < fieldsets.length; i++) {
var self = fieldsets[i];
if (self.getAttribute('disabled') === true) {
self.style.pointerEvents = 'none';
var btns = self.querySelectorAll('.btn');
for (var ib = 0; ib < btns.length; ib++) {
btns[ib].classList.add('disabled');
}
}
}
}
document.addEventListener('DOMContentLoaded', function (event) {
initTemplate(event);
/**
* Back to top
*/
var backToTop = document.getElementById('back-top');
if (backToTop) {
backToTop.addEventListener('click', function(event) {
event.preventDefault();
window.scrollTo(0, 0);
});
}
[].slice.call(document.head.querySelectorAll('link[rel="lazy-stylesheet"]'))
.forEach(function($link){
$link.rel = "stylesheet";
});
});
/**
* Initialize when a part of the page was updated
*/
document.addEventListener('joomla:updated', initTemplate);
})(Joomla, document);

75
templates/cassiopeia/js/template.js
View File

@ -9,45 +9,50 @@
Joomla = window.Joomla || {};
(function(Joomla, document) {
'use strict';
'use strict';
function initTemplate(event) {
var target = event && event.target ? event.target : document;
function initTemplate(event) {
var target = event && event.target ? event.target : document;
/**
* Prevent clicks on buttons within a disabled fieldset
*/
var fieldsets = target.querySelectorAll('fieldset.btn-group');
for (var i = 0; i < fieldsets.length; i++) {
var self = fieldsets[i];
if (self.getAttribute('disabled') === true) {
self.style.pointerEvents = 'none';
var btns = self.querySelectorAll('.btn');
for (var ib = 0; ib < btns.length; ib++) {
btns[ib].classList.add('disabled');
}
}
}
}
/**
* Prevent clicks on buttons within a disabled fieldset
*/
var fieldsets = target.querySelectorAll('fieldset.btn-group');
for (var i = 0; i < fieldsets.length; i++) {
var self = fieldsets[i];
if (self.getAttribute('disabled') === true) {
self.style.pointerEvents = 'none';
var btns = self.querySelectorAll('.btn');
for (var ib = 0; ib < btns.length; ib++) {
btns[ib].classList.add('disabled');
}
}
}
}
document.addEventListener('DOMContentLoaded', function (event) {
initTemplate(event);
document.addEventListener('DOMContentLoaded', function (event) {
initTemplate(event);
/**
* Back to top
*/
var backToTop = document.getElementById('back-top');
if (backToTop) {
backToTop.addEventListener('click', function(event) {
event.preventDefault();
window.scrollTo(0, 0);
});
}
});
/**
* Back to top
*/
var backToTop = document.getElementById('back-top');
if (backToTop) {
backToTop.addEventListener('click', function(event) {
event.preventDefault();
window.scrollTo(0, 0);
});
}
/**
* Initialize when a part of the page was updated
*/
document.addEventListener('joomla:updated', initTemplate);
[].slice.call(document.head.querySelectorAll('link[rel="lazy-stylesheet"]'))
.forEach(function($link){
$link.rel = "stylesheet";
});
});
/**
* Initialize when a part of the page was updated
*/
document.addEventListener('joomla:updated', initTemplate);
})(Joomla, document);

2
templates/cassiopeia/js/template.min.js vendored
View File

@ -1 +1 @@
Joomla=window.Joomla||{},function(e,t){"use strict";function n(e){for(var n=(e&&e.target?e.target:t).querySelectorAll("fieldset.btn-group"),o=0;o<n.length;o++){var l=n[o];if(!0===l.getAttribute("disabled")){l.style.pointerEvents="none";for(var a=l.querySelectorAll(".btn"),d=0;d<a.length;d++)a[d].classList.add("disabled")}}}t.addEventListener("DOMContentLoaded",function(e){n(e);var o=t.getElementById("back-top");o&&o.addEventListener("click",function(e){e.preventDefault(),window.scrollTo(0,0)})}),t.addEventListener("joomla:updated",n)}(Joomla,document);
Joomla=window.Joomla||{},function(e,t){"use strict";function l(e){for(var l=(e&&e.target?e.target:t).querySelectorAll("fieldset.btn-group"),n=0;n<l.length;n++){var o=l[n];if(!0===o.getAttribute("disabled")){o.style.pointerEvents="none";for(var r=o.querySelectorAll(".btn"),a=0;a<r.length;a++)r[a].classList.add("disabled")}}}t.addEventListener("DOMContentLoaded",(function(e){l(e);var n=t.getElementById("back-top");n&&n.addEventListener("click",(function(e){e.preventDefault(),window.scrollTo(0,0)})),[].slice.call(t.head.querySelectorAll('link[rel="lazy-stylesheet"]')).forEach((function(e){e.rel="stylesheet"}))})),t.addEventListener("joomla:updated",l)}(Joomla,document);

6
templates/cassiopeia/offline.php
View File

@ -75,12 +75,16 @@ else
$logo = '<img src="' . $templatePath . '/images/logo.svg" class="logo d-inline-block" alt="' . $sitename . '">';
}
// Defer font awesome
$wa->getAsset('style', 'fontawesome')->setAttribute('rel', 'lazy-stylesheet');
?>
<!DOCTYPE html>
<html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
<head>
<jdoc:include type="metas" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<jdoc:include type="head" />
<jdoc:include type="styles" />
<jdoc:include type="scripts" />
</head>
<body class="site">
<div class="outer">

3
templates/cassiopeia/scss/global/fonts-local_roboto.scss
View File

@ -1,5 +1,6 @@
// Fonts
@import "../../../../media/vendor/roboto-fontface/scss/roboto/roboto-fontface.css";
$roboto-font-path: "../../../../media/vendor/roboto-fontface/fonts" !default;
@import "../../../../media/vendor/roboto-fontface/scss/roboto/sass/roboto-fontface";
:root {
--cassiopeia-font-family-body: "Roboto", sans-serif;

1
templates/cassiopeia/scss/vendor/fontawesome-free/fontawesome.scss vendored
View File

@ -1,5 +1,6 @@
// Override the font path
$fa-font-path: "../../../../../media/vendor/fontawesome-free/webfonts" !default;
$fa-font-display: block !default;
// Font Awesome 5 Free
@import "../../../../../media/vendor/fontawesome-free/scss/fontawesome";