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

Implement conditional TOC loading and cleanup Bootstrap/TOC code

Browse Source 
Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
2026-01-30 05:40:40 +00:00
parent d2ab55d9b0
commit 89a27c4bd6
5 changed files with 2 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
src/media/css/template.css
View File

@@ -14012,10 +14012,6 @@ meter {
border-bottom-left-radius: 0;
}
.article-index .toclink.active {
color: currentColor;
}
.j-main-container .alert {
margin: 0.75rem;
}
@@ -16786,102 +16782,6 @@ form .form-select {
border-color: #C7C7C7
}
/* --- TOC right-rail container (non-invasive) --- */
.container-toc-right {
float: right;
width: 280px;
margin: 0 0 1.25rem 1.25rem;
/* gap from main content */
position: relative;
z-index: 1;
color: var(--container-toc-color);
}
/* Make the inner nav sticky without touching bootstrap-toc styles */
.container-toc-right>nav[id='toc'] {
position: sticky;
top: 6rem;
/* adjust to sit below your header/nav */
max-height: calc(100vh - 7rem);
overflow: auto;
background: var(--container-toc-bg);
border: 1px solid rgba(0, 0, 0, .08);
border-radius: .75rem;
padding: 1rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
}
/* Optional: title spacing if you render a heading inside #toc */
.container-toc-right>nav[id='toc']>.toc-title {
margin: 0 0 .5rem 0;
font-weight: 600;
border-bottom: 1px solid rgba(0, 0, 0, .06);
padding-bottom: .5rem;
}
/* Responsive: stack on smaller screens */
@media (max-width: 991.98px) {
.container-toc-right {
float: none;
width: 100%;
margin: 1rem 0;
}
.container-toc-right>nav[id='toc'] {
position: relative;
top: auto;
max-height: 300px;
}
}
/* --- TOC left-rail container (non-invasive) --- */
.container-toc-left {
float: left;
width: 280px;
margin: 0 1.25rem 1.25rem 0;
/* space on right side for main content */
position: relative;
z-index: 1;
color: var(--container-toc-color);
}
/* Make the inner nav sticky without altering bootstrap-toc core styles */
.container-toc-left>nav[id='toc'] {
position: sticky;
top: 6rem;
/* adjust if your site header height differs */
max-height: calc(100vh - 7rem);
overflow: auto;
background: var(--bs-body-bg, #fff);
border: 1px solid rgba(0, 0, 0, .08);
border-radius: .75rem;
padding: 1rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
}
/* Optional: TOC title styling */
.container-toc-left>nav[id='toc']>.toc-title {
margin: 0 0 .5rem 0;
font-weight: 600;
border-bottom: 1px solid rgba(0, 0, 0, .06);
padding-bottom: .5rem;
}
/* Responsive: stack under content on smaller screens */
@media (max-width: 991.98px) {
.container-toc-left {
float: none;
width: 100%;
margin: 1rem 0;
}
.container-toc-left>nav[id='toc'] {
position: relative;
top: auto;
max-height: 300px;
}
}
.container-below-topbar {
padding: var(--padding-x) var(--padding-y);
background-image: var(--container-below-topbar-bg-image);

20
src/media/js/template.js
View File

@@ -11,17 +11,12 @@
INGROUP: MokoCassiopeia
PATH: ./media/templates/site/moko-cassiopeia/js/template.js
VERSION: 03.06.01
BRIEF: Consolidated JavaScript for MokoCassiopeia template including theme, TOC, and utilities
BRIEF: Consolidated JavaScript for MokoCassiopeia template including theme and utilities
*/
(function (win, doc) {
"use strict";
// ========================================================================
// BOOTSTRAP TOC (inline minified version)
// ========================================================================
!function(a){"use strict";window.Toc={helpers:{findOrFilter:function(e,t){var n=e.find(t);return e.filter(t).add(n).filter(":not([data-toc-skip])")},generateUniqueIdBase:function(e){return a(e).text().trim().replace(/\'/gi,"").replace(/[& +$,:;=?@"#{}|^~[`%!'<>\]\.\/\(\)\*\\\n\t\b\v]/g,"-").replace(/-{2,}/g,"-").substring(0,64).replace(/^-+|-+$/gm,"").toLowerCase()||e.tagName.toLowerCase()},generateUniqueId:function(e){for(var t=this.generateUniqueIdBase(e),n=0;;n++){var r=t;if(0<n&&(r+="-"+n),!document.getElementById(r))return r}},generateAnchor:function(e){if(e.id)return e.id;var t=this.generateUniqueId(e);return e.id=t},createNavList:function(){return a('<ul class="nav navbar-nav"></ul>')},createChildNavList:function(e){var t=this.createNavList();return e.append(t),t},generateNavEl:function(e,t){var n=a('<a class="nav-link"></a>');n.attr("href","#"+e),n.text(t);var r=a("<li></li>");return r.append(n),r},generateNavItem:function(e){var t=this.generateAnchor(e),n=a(e),r=n.data("toc-text")||n.text();return this.generateNavEl(t,r)},getTopLevel:function(e){for(var t=1;t<=6;t++){if(1<this.findOrFilter(e,"h"+t).length)return t}return 1},getHeadings:function(e,t){var n="h"+t,r="h"+(t+1);return this.findOrFilter(e,n+","+r)},getNavLevel:function(e){return parseInt(e.tagName.charAt(1),10)},populateNav:function(r,a,e){var i,s=r,c=this;e.each(function(e,t){var n=c.generateNavItem(t);c.getNavLevel(t)===a?s=r:i&&s===r&&(s=c.createChildNavList(i)),s.append(n),i=n})},parseOps:function(e){var t;return(t=e.jquery?{$nav:e}:e).$scope=t.$scope||a(document.body),t}},init:function(e){(e=this.helpers.parseOps(e)).$nav.attr("data-toggle","toc");var t=this.helpers.createChildNavList(e.$nav),n=this.helpers.getTopLevel(e.$scope),r=this.helpers.getHeadings(e.$scope,n);this.helpers.populateNav(t,n,r)}},a(function(){a('nav[data-toggle="toc"]').each(function(e,t){var n=a(t);Toc.init(n)})})}(jQuery);
// ========================================================================
// THEME INITIALIZATION (Early theme application)
// ========================================================================
@@ -196,18 +191,6 @@
}
}
/**
* Initialize Bootstrap TOC if #toc element exists.
*/
function initTOC() {
if (typeof win.Toc !== "undefined" && doc.querySelector("#toc")) {
win.Toc.init({
$nav: $("#toc"),
$scope: $("main")
});
}
}
/**
* Initialize offcanvas drawer buttons for left/right drawers.
*/
@@ -305,7 +288,6 @@
win.addEventListener("scroll", handleScroll);
// Init features
initTOC();
initDrawers();
initBackTop();
}

23
src/templates/component.php
View File

@@ -45,21 +45,6 @@ $params_custom_head_start = $this->params->get('custom_head_start', null);
$params_custom_head_end = $this->params->get('custom_head_end', null);
$params_developmentmode = $this->params->get('developmentmode', false);
// Bootstrap behaviors (assets handled via WAM)
HTMLHelper::_('bootstrap.framework');
HTMLHelper::_('bootstrap.alert');
HTMLHelper::_('bootstrap.button');
HTMLHelper::_('bootstrap.carousel');
HTMLHelper::_('bootstrap.collapse');
HTMLHelper::_('bootstrap.dropdown');
HTMLHelper::_('bootstrap.modal');
HTMLHelper::_('bootstrap.offcanvas');
HTMLHelper::_('bootstrap.popover');
HTMLHelper::_('bootstrap.scrollspy');
HTMLHelper::_('bootstrap.tab');
HTMLHelper::_('bootstrap.tooltip');
HTMLHelper::_('bootstrap.toast');
// Detecting Active Variables
$option = $input->getCmd('option', '');
$view = $input->getCmd('view', '');
@@ -86,13 +71,6 @@ $templatePath = 'media/templates/site/mokocassiopeia';
// Core template CSS
$wa->useStyle('template.base'); // css/template.css
// Optional vendor CSS
$wa->useStyle('vendor.bootstrap-toc');
// Optional demo/showcase CSS (available for use, not loaded by default)
// To use: Create the CSS file and register it in joomla.asset.json, then add to your article/module
// Example: $wa->useStyle('template.social-media-demo');
// 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));
@@ -122,7 +100,6 @@ try {
// Scripts
$wa->useScript('template.js');
$wa->useScript('theme-init.js');
$wa->useScript('vendor.bootstrap-toc.js');
/**
* VirtueMart detection:

20
src/templates/error.php
View File

@@ -41,22 +41,6 @@ $params_custom_head_start = $params->get('custom_head_start', '');
$params_custom_head_end = $params->get('custom_head_end', '');
$params_developmentmode = $params->get('developmentmode', false);
// Bootstrap behaviors (assets handled via WAM)
HTMLHelper::_('bootstrap.framework');
HTMLHelper::_('bootstrap.loadCss', true);
HTMLHelper::_('bootstrap.alert');
HTMLHelper::_('bootstrap.button');
HTMLHelper::_('bootstrap.carousel');
HTMLHelper::_('bootstrap.collapse');
HTMLHelper::_('bootstrap.dropdown');
HTMLHelper::_('bootstrap.modal');
HTMLHelper::_('bootstrap.offcanvas');
HTMLHelper::_('bootstrap.popover');
HTMLHelper::_('bootstrap.scrollspy');
HTMLHelper::_('bootstrap.tab');
HTMLHelper::_('bootstrap.tooltip');
HTMLHelper::_('bootstrap.toast');
// ------------------ Params ------------------
$stickyHeader = (bool) $params->get('stickyHeader', 0);
@@ -74,9 +58,6 @@ $templatePath = 'media/templates/site/mokocassiopeia';
// Core template CSS
$wa->useStyle('template.base'); // css/template.css
// Optional vendor CSS
$wa->useStyle('vendor.bootstrap-toc');
// 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));
@@ -107,7 +88,6 @@ try {
$wa->useScript('template.js');
$wa->useScript('theme-init.js');
$wa->useScript('darkmode-toggle.js');
$wa->useScript('vendor.bootstrap-toc.js');
// Meta
$this->setMetaData('viewport', 'width=device-width, initial-scale=1');

17
src/templates/index.php
View File

@@ -61,22 +61,7 @@ $params_developmentmode = $this->params->get('developmentmode', false);
$params_theme_enabled = $this->params->get('theme_enabled', 1);
$params_theme_fab_enabled = $this->params->get('theme_fab_enabled', 1);
$params_theme_fab_pos = $this->params->get('theme_fab_pos', 'br');
/*
// Bootstrap behaviors (assets handled via WAM)
HTMLHelper::_('bootstrap.framework');
HTMLHelper::_('bootstrap.alert');
HTMLHelper::_('bootstrap.button');
HTMLHelper::_('bootstrap.carousel');
HTMLHelper::_('bootstrap.collapse');
HTMLHelper::_('bootstrap.dropdown');
HTMLHelper::_('bootstrap.modal');
HTMLHelper::_('bootstrap.offcanvas');
HTMLHelper::_('bootstrap.popover');
HTMLHelper::_('bootstrap.scrollspy');
HTMLHelper::_('bootstrap.tab');
HTMLHelper::_('bootstrap.tooltip');
HTMLHelper::_('bootstrap.toast');
*/
// Detecting Active Variables
$option = $input->getCmd('option', '');
$view = $input->getCmd('view', '');