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

Add conditional custom palette loading and user.js support to all templates

Browse Source 
Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
2026-03-08 03:30:34 +00:00
parent 086ccebd80
commit d7ff91d90d
5 changed files with 64 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/component.php
View File

@@ -71,30 +71,18 @@ $templatePath = 'media/templates/site/mokocassiopeia';
// Core template CSS
$wa->useStyle('template.base'); // css/template.css
// Color theme (light + optional dark)
$colorLightKey = strtolower(preg_replace('/[^a-z0-9_.-]/i', '', $params_LightColorName));
$colorDarkKey = strtolower(preg_replace('/[^a-z0-9_.-]/i', '', $params_DarkColorName));
$lightKey = 'template.light.' . $colorLightKey;
$darkKey = 'template.dark.' . $colorDarkKey;
try {
$wa->useStyle('template.light.colors_standard');
} catch (\Throwable $e) {
$wa->registerAndUseStyle('template.light.colors_standard', $templatePath . '/css/theme/light.standard.css');
// Load theme palette stylesheets based on configuration
$wa->useStyle('template.light.standard'); // css/theme/light.standard.css
$wa->useStyle('template.dark.standard'); // css/theme/dark.standard.css
// Load custom palettes only if selected in template configuration AND files exist
if ($params_LightColorName === 'custom' && file_exists(JPATH_ROOT . '/media/templates/site/mokocassiopeia/css/theme/light.custom.css'))
{
$wa->useStyle('template.light.custom');
}
try {
$wa->useStyle('template.dark.colors_standard');
} catch (\Throwable $e) {
$wa->registerAndUseStyle('template.dark.colors_standard', $templatePath . '/css/theme/dark.standard.css');
}
try {
$wa->useStyle($lightKey);
} catch (\Throwable $e) {
$wa->registerAndUseStyle('template.light.dynamic', $templatePath . '/css/theme/light.' . $colorLightKey . '.css');
}
try {
$wa->useStyle($darkKey);
} catch (\Throwable $e) {
$wa->registerAndUseStyle('template.dark.dynamic', $templatePath . '/css/theme/dark.' . $colorDarkKey . '.css');
if ($params_DarkColorName === 'custom' && file_exists(JPATH_ROOT . '/media/templates/site/mokocassiopeia/css/theme/dark.custom.css'))
{
$wa->useStyle('template.dark.custom');
}
// Scripts
@@ -194,7 +182,9 @@ $params_rightIcon = htmlspecialchars($this->params->get('drawerRightIco
// Theme params
$params_theme_enabled = $this->params->get('theme_enabled', 1);
// Load user assets last (after all other styles and scripts)
$wa->useStyle('template.user'); // css/user.css
$wa->useScript('user.js'); // js/user.js
?>
<!DOCTYPE html>
<html class="component" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">

40
src/error.php
View File

@@ -60,30 +60,18 @@ $templatePath = 'media/templates/site/mokocassiopeia';
// Core template CSS
$wa->useStyle('template.base'); // css/template.css
// Color theme (light + optional dark)
$colorLightKey = strtolower(preg_replace('/[^a-z0-9_.-]/i', '', $params_LightColorName));
$colorDarkKey = strtolower(preg_replace('/[^a-z0-9_.-]/i', '', $params_DarkColorName));
$lightKey = 'template.light.' . $colorLightKey;
$darkKey = 'template.dark.' . $colorDarkKey;
try {
$wa->useStyle('template.light.standard');
} catch (\Throwable $e) {
$wa->registerAndUseStyle('template.light.standard', $templatePath . '/css/theme/light.standard.css');
// Load theme palette stylesheets based on configuration
$wa->useStyle('template.light.standard'); // css/theme/light.standard.css
$wa->useStyle('template.dark.standard'); // css/theme/dark.standard.css
// Load custom palettes only if selected in template configuration AND files exist
if ($params_LightColorName === 'custom' && file_exists(JPATH_ROOT . '/media/templates/site/mokocassiopeia/css/theme/light.custom.css'))
{
$wa->useStyle('template.light.custom');
}
try {
$wa->useStyle('template.dark.standard');
} catch (\Throwable $e) {
$wa->registerAndUseStyle('template.dark.standard', $templatePath . '/css/theme/dark.standard.css');
}
try {
$wa->useStyle($lightKey);
} catch (\Throwable $e) {
$wa->registerAndUseStyle('template.light.dynamic', $templatePath . '/css/theme/' . $colorLightKey . '.css');
}
try {
$wa->useStyle($darkKey);
} catch (\Throwable $e) {
$wa->registerAndUseStyle('template.dark.dynamic', $templatePath . '/css/theme/' . $colorDarkKey . '.css');
if ($params_DarkColorName === 'custom' && file_exists(JPATH_ROOT . '/media/templates/site/mokocassiopeia/css/theme/dark.custom.css'))
{
$wa->useStyle('template.dark.custom');
}
// Scripts
@@ -137,8 +125,6 @@ if ($this->params->get('faKitCode')) {
}
}
$wa->useStyle('template.user'); // css/user.css
// ------------------ Context (logo, bootstrap needs) ------------------
$sitename = htmlspecialchars($app->get('sitename'), ENT_QUOTES, 'UTF-8');
@@ -170,6 +156,10 @@ $errorObj = isset($this->error) && is_object($this->error) ? $this->error : nul
$errorCode = $errorObj ? (int) $errorObj->getCode() : 500;
$errorMsg = $errorObj ? $errorObj->getMessage() : Text::_('JERROR_AN_ERROR_HAS_OCCURRED');
$debugOn = defined('JDEBUG') && JDEBUG;
// Load user assets last (after all other styles and scripts)
$wa->useStyle('template.user'); // css/user.css
$wa->useScript('user.js'); // js/user.js
?>
<!DOCTYPE html>
<html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">

2
src/index.php
View File

@@ -241,7 +241,9 @@ if ($params_DarkColorName === 'custom' && file_exists(JPATH_ROOT . '/media/templ
$wa->useStyle('template.dark.custom');
}
// Load user assets last (after all other styles and scripts)
$wa->useStyle('template.user'); // css/user.css
$wa->useScript('user.js'); // js/user.js
?>
<!DOCTYPE html>
<html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">

12
src/joomla.asset.json
View File

@@ -46,6 +46,18 @@
"uri": "media/templates/site/mokocassiopeia/css/user.min.css",
"attributes": {"media": "all"}
},
{
"name": "user.js",
"type": "script",
"uri": "media/templates/site/mokocassiopeia/js/user.js",
"attributes": {"defer": true}
},
{
"name": "user.js.min",
"type": "script",
"uri": "media/templates/site/mokocassiopeia/js/user.min.js",
"attributes": {"defer": true}
},
{
"name": "template.font.osaka",
"type": "style",

29
src/offline.php
View File

@@ -40,19 +40,32 @@ $params = $this->params ?: $app->getTemplate(true)->params;
$direction = $this->direction ?: 'ltr';
/* -----------------------
Load ONLY template.css + colors_*.css (with min toggle)
Load ONLY template.css + theme palettes (with min toggle)
------------------------ */
$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/';
$doc->addStyleSheet($base . 'template' . $assetSuffix . '.css', ['version' => 'auto'], ['id' => 'moko-template']);
/* If you have a template param for color variant, set it here; defaults to 'standard' */
$colorKey = (string) ($params->get('colors', 'standard') ?: 'standard');
$colorKey = preg_replace('~[^a-z0-9_-]~i', '', $colorKey);
$doc->addStyleSheet($base . 'colors_' . $colorKey . $assetSuffix . '.css', ['version' => 'auto'], ['id' => 'moko-colors']);
/* Load user.css for custom user overrides */
/* 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']);
/* Load custom palettes only if selected in template configuration 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']);
}
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']);
}
/* Load user assets last (after all other styles and scripts) */
$doc->addStyleSheet($base . 'user' . $assetSuffix . '.css', ['version' => 'auto'], ['id' => 'moko-user']);
/* Bootstrap CSS/JS for accordion behavior; safe to keep. */
@@ -60,9 +73,11 @@ HTMLHelper::_('bootstrap.loadCss', true, $doc);
HTMLHelper::_('bootstrap.framework');
/* Load template.js for theme switcher and other functionality */
$jsBase = rtrim(Uri::root(true), '/') . '/templates/' . $this->template . '/js/';
$doc->addScript($jsBase . 'template' . $assetSuffix . '.js', ['version' => 'auto', 'defer' => true], ['id' => 'moko-template-js']);
/* Load user.js last for custom user scripts */
$doc->addScript($jsBase . 'user' . $assetSuffix . '.js', ['version' => 'auto', 'defer' => true], ['id' => 'moko-user-js']);
/* -----------------------
Title + Meta (Include Site Name in Page Titles)
------------------------ */