From 89a27c4bd6f7993d3c20a481615d2f023e221afd Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 30 Jan 2026 05:40:40 +0000 Subject: [PATCH] Implement conditional TOC loading and cleanup Bootstrap/TOC code Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com> --- src/media/css/template.css | 100 ------------------------------------ src/media/js/template.js | 20 +------- src/templates/component.php | 23 --------- src/templates/error.php | 20 -------- src/templates/index.php | 17 +----- 5 files changed, 2 insertions(+), 178 deletions(-) diff --git a/src/media/css/template.css b/src/media/css/template.css index e27f5d2..f807945 100644 --- a/src/media/css/template.css +++ b/src/media/css/template.css @@ -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); diff --git a/src/media/js/template.js b/src/media/js/template.js index 8970e36..c183742 100644 --- a/src/media/js/template.js +++ b/src/media/js/template.js @@ -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')},createChildNavList:function(e){var t=this.createNavList();return e.append(t),t},generateNavEl:function(e,t){var n=a('');n.attr("href","#"+e),n.text(t);var r=a("
  • ");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(1params->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: diff --git a/src/templates/error.php b/src/templates/error.php index 18155cf..5cea3d0 100644 --- a/src/templates/error.php +++ b/src/templates/error.php @@ -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'); diff --git a/src/templates/index.php b/src/templates/index.php index 4375332..9e9b03f 100644 --- a/src/templates/index.php +++ b/src/templates/index.php @@ -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', '');