MokoConsulting/MokoCassiopeia
1
1
Fork 0
Code Issues 4 Pull Requests Actions Packages Releases 1 Activity

Rewrite offline page to use WebAssetManager
Some checks failed
Repo Health / Access control (push) Failing after 1s
Details
Repo Health / Release configuration (push) Has been skipped
Details
Repo Health / Scripts governance (push) Has been skipped
Details
Repo Health / Repository health (push) Has been skipped
Details

Browse Source 
- All CSS/JS loading now uses $wa->useStyle/useScript matching index.php
- Added template.offline and template.offline.min to joomla.asset.json
- Font Awesome, Osaka font, themes, user overrides all via WAM

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jonathan Miller
2026-04-16 18:38:10 -05:00
parent d6383468cd
commit 6708569c6f
2 changed files with 40 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/joomla.asset.json
View File

@@ -34,6 +34,18 @@
"uri": "media/templates/site/mokocassiopeia/css/template.min.css",
"attributes": {"media": "all"}
},
{
"name": "template.offline",
"type": "style",
"uri": "media/templates/site/mokocassiopeia/css/offline.css",
"attributes": {"media": "all"}
},
{
"name": "template.offline.min",
"type": "style",
"uri": "media/templates/site/mokocassiopeia/css/offline.min.css",
"attributes": {"media": "all"}
},
{
"name": "template.user",
"type": "style",

55
src/offline.php
View File

@@ -26,56 +26,57 @@ use Joomla\CMS\Uri\Uri;
$app = Factory::getApplication();
$doc = Factory::getDocument();
$wa = $doc->getWebAssetManager();
$params = $this->params ?: $app->getTemplate(true)->params;
$direction = $this->direction ?: 'ltr';
/* -----------------------
Load CSS + theme palettes
Load assets via WebAssetManager (matches index.php pattern)
------------------------ */
$useMin = !((int) $params->get('development_mode', 0) === 1);
$assetSuffix = $useMin ? '.min' : '';
$base = rtrim(Uri::root(true), '/') . '/templates/' . $this->template . '/css/';
$jsBase = rtrim(Uri::root(true), '/') . '/templates/' . $this->template . '/js/';
$params_developmentmode = (bool) $params->get('developmentmode', false) || (bool) $app->get('debug', false);
$suffix = $params_developmentmode ? '' : '.min';
$doc->addStyleSheet($base . 'template' . $assetSuffix . '.css', ['version' => 'auto'], ['id' => 'moko-template']);
$doc->addStyleSheet($base . 'offline' . $assetSuffix . '.css', ['version' => 'auto'], ['id' => 'moko-offline']);
// Core template CSS + offline overlay CSS
$wa->useStyle('template.base' . $suffix);
$wa->useStyle('template.offline' . $suffix);
/* Load Osaka font for site title */
$doc->addStyleSheet($base . 'fonts/osaka.css', ['version' => 'auto'], ['id' => 'moko-font-osaka']);
// Osaka font
$wa->useStyle('template.font.osaka');
/* Load Font Awesome 7 Free (local) — Kit code not supported on offline page */
$faBase = rtrim(Uri::root(true), '/') . '/templates/' . $this->template . '/vendor/fa7free/css/';
$doc->addStyleSheet($faBase . 'all' . $assetSuffix . '.css', ['version' => 'auto'], ['id' => 'moko-fa7free']);
// Font Awesome 7 Free
$wa->useStyle('vendor.fa7free.all' . $suffix);
/* Load theme palettes */
$doc->addStyleSheet($base . 'theme/light.standard' . $assetSuffix . '.css', ['version' => 'auto'], ['id' => 'moko-light-standard']);
$doc->addStyleSheet($base . 'theme/dark.standard' . $assetSuffix . '.css', ['version' => 'auto'], ['id' => 'moko-dark-standard']);
// Theme palettes
$wa->useStyle('template.light.standard' . $suffix);
$wa->useStyle('template.dark.standard' . $suffix);
/* Load custom palettes only if selected in template configuration AND files exist */
// Custom palettes (if selected and files exist)
$params_LightColorName = (string) $params->get('colorLightName', 'standard');
$params_DarkColorName = (string) $params->get('colorDarkName', 'standard');
if ($params_LightColorName === 'custom' && file_exists(JPATH_ROOT . '/media/templates/site/mokocassiopeia/css/theme/light.custom.css'))
{
$doc->addStyleSheet($base . 'theme/light.custom' . $assetSuffix . '.css', ['version' => 'auto'], ['id' => 'moko-light-custom']);
$wa->useStyle('template.light.custom' . $suffix);
}
if ($params_DarkColorName === 'custom' && file_exists(JPATH_ROOT . '/media/templates/site/mokocassiopeia/css/theme/dark.custom.css'))
{
$doc->addStyleSheet($base . 'theme/dark.custom' . $assetSuffix . '.css', ['version' => 'auto'], ['id' => 'moko-dark-custom']);
$wa->useStyle('template.dark.custom' . $suffix);
}
/* Load user assets last */
$doc->addStyleSheet($base . 'user' . $assetSuffix . '.css', ['version' => 'auto'], ['id' => 'moko-user']);
// User overrides (loaded last)
$wa->useStyle('template.user');
/* Bootstrap CSS/JS for accordion */
// Template JS (theme switcher, var-copy, etc.)
if ($params_developmentmode) {
$wa->useScript('template.js');
} else {
$wa->useScript('template.js.min');
}
$wa->useScript('user.js');
// Bootstrap (accordion)
HTMLHelper::_('bootstrap.loadCss', true, $doc);
HTMLHelper::_('bootstrap.framework');
/* Load template.js for theme switcher */
$doc->addScript($jsBase . 'template' . $assetSuffix . '.js', ['version' => 'auto', 'defer' => true], ['id' => 'moko-template-js']);
/* Load user.js last */
$doc->addScript($jsBase . 'user' . $assetSuffix . '.js', ['version' => 'auto', 'defer' => true], ['id' => 'moko-user-js']);
/* -----------------------
Title + Meta
------------------------ */