composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-02-13 07:24:13 +01:00
Code Issues Packages Projects Releases Wiki Activity

N°3685 Preload necessary fonts to speed up display

Browse Source
This commit is contained in:
Stephen Abello
2021-09-15 09:58:59 +02:00
committed by Molkobain
parent 61ee4d6807
commit b1b1d25186
4 changed files with 46 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
sources/application/Helper/WebResourcesHelper.php
View File

@@ -20,6 +20,31 @@ use utils;
*/
class WebResourcesHelper
{
//---------------------------------
// Fonts
//---------------------------------
/**
* Preload necessary fonts to display them as soon as possible when CSS rules are interpreted
*
* @return string[]
*
* @throws \Exception
*/
public static function GetPreloadedFonts(): array
{
return [
['font' => utils::GetAbsoluteUrlAppRoot().'css/font-combodo/combodo-webfont.woff2', 'type' => 'woff2'],
['font' => utils::GetAbsoluteUrlAppRoot().'css/font-awesome/webfonts/fa-solid-900.woff2', 'type' => 'woff2'],
['font' => utils::GetAbsoluteUrlAppRoot().'node_modules/@fontsource/raleway/files/raleway-all-400-normal.woff', 'type' => 'woff'],
['font' => utils::GetAbsoluteUrlAppRoot().'node_modules/@fontsource/raleway/files/raleway-all-500-normal.woff', 'type' => 'woff'],
['font' => utils::GetAbsoluteUrlAppRoot().'node_modules/@fontsource/raleway/files/raleway-all-600-normal.woff', 'type' => 'woff'],
['font' => utils::GetAbsoluteUrlAppRoot().'node_modules/@fontsource/raleway/files/raleway-all-700-normal.woff', 'type' => 'woff'],
['font' => utils::GetAbsoluteUrlAppRoot().'node_modules/@fontsource/raleway/files/raleway-all-400-italic.woff', 'type' => 'woff'],
['font' => utils::GetAbsoluteUrlAppRoot().'node_modules/@fontsource/raleway/files/raleway-all-500-italic.woff', 'type' => 'woff'],
];
}
//---------------------------------
// CKEditor
//---------------------------------

17
sources/application/WebPage/WebPage.php
View File

@@ -5,6 +5,7 @@
*/
use Combodo\iTop\Application\Helper\Session;
use Combodo\iTop\Application\Helper\WebResourcesHelper;
use Combodo\iTop\Application\TwigBase\Twig\TwigHelper;
use Combodo\iTop\Application\UI\Base\Component\Alert\AlertUIBlockFactory;
use Combodo\iTop\Application\UI\Base\Component\DataTable\DataTableUIBlockFactory;
@@ -146,6 +147,10 @@ class WebPage implements Page
* @since 3.0.0
*/
protected $aBlockParams;
/** @var array Contain fonts that needs to be preloaded
* @since 3.0.0
*/
protected $aPreloadedFonts;
protected $a_headers;
protected $a_base;
protected $iNextId;
@@ -196,6 +201,7 @@ class WebPage implements Page
$this->InitializeStyles();
$this->InitializeLinkedStylesheets();
$this->InitializeCompatibilityLinkedStylesheets();
$this->aPreloadedFonts = WebResourcesHelper::GetPreloadedFonts();
$this->a_headers = [];
$this->a_base = ['href' => '', 'target' => ''];
$this->iNextId = 0;
@@ -1298,6 +1304,7 @@ JS;
'sCharset' => static::PAGES_CHARSET,
'sLang' => $this->GetLanguageForMetadata(),
],
'aPreloadedFonts' => $this->aPreloadedFonts,
'aCssFiles' => $this->a_linked_stylesheets,
'aCssInline' => $this->a_styles,
'aJsInlineEarly' => $this->a_early_scripts,
@@ -1750,4 +1757,14 @@ EOD
{
return $this->aBlockParams;
}
/**
* @param array $aFonts
*
* @since 3.0.0
*/
public function AddPreloadedFonts(array $aFonts)
{
$this->aPreloadedFonts = array_merge($this->aPreloadedFonts, $aFonts);
}
}

1
sources/application/WebPage/iTopWebPage.php
View File

@@ -904,6 +904,7 @@ HTML;
$aData['aPage'] = array_merge(
$aData['aPage'],
[
'aPreloadedFonts' => $this->aPreloadedFonts,
'aCssFiles' => $this->a_linked_stylesheets,
'aCssInline' => $this->a_styles,
'aJsInlineEarly' => $this->a_early_scripts,

4
templates/pages/backoffice/webpage/layout.html.twig
View File

@@ -15,7 +15,9 @@
<link rel="shortcut icon" href="{{ aPage.sFaviconUrl|add_itop_version|raw }}">
{% endif %}
<link rel="search" type="application/opensearchdescription+xml" title="iTop" href="{{ aPage.sAbsoluteUrlAppRoot }}pages/opensearch.xml.php">
{% for sPreloadedFont in aPage.aPreloadedFonts %}
<link rel="preload" href="{{ sPreloadedFont['font'] }}" as="font" type="font/{{ sPreloadedFont['type'] }}" crossorigin>
{% endfor %}
{# Stylesheets MUST be loaded before any scripts otherwise we may face problems such as
- Visual glitches
- jQuery scripts spurious problems (like failing on a 'reload') #}