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

Integrate Bootstrap TOC library for article table of contents

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 01:20:49 +00:00
parent d00fc75bca
commit 63e00827db
7 changed files with 253 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/media/vendor/bootstrap-toc/bootstrap-toc.css vendored Normal file
View File

@@ -0,0 +1,46 @@
/*!
* Bootstrap Table of Contents v1.0.1 (https://afeld.github.io/bootstrap-toc/)
* Copyright 2015 Aidan Feldman
* Licensed under MIT (https://github.com/afeld/bootstrap-toc/blob/gh-pages/LICENSE.md)
*/
/* All levels of nav */
nav[data-toggle='toc'] .nav > li > a {
display: block;
padding: 4px 20px;
font-size: 13px;
font-weight: 500;
color: var(--cassiopeia-color-link, #0d6efd);
}
nav[data-toggle='toc'] .nav > li > a:hover,
nav[data-toggle='toc'] .nav > li > a:focus {
padding-left: 19px;
color: var(--cassiopeia-color-hover, #0a58ca);
text-decoration: none;
background-color: transparent;
border-left: 1px solid var(--cassiopeia-color-primary, #0d6efd);
}
nav[data-toggle='toc'] .nav > .active > a,
nav[data-toggle='toc'] .nav > .active:hover > a,
nav[data-toggle='toc'] .nav > .active:focus > a {
padding-left: 18px;
font-weight: bold;
color: var(--cassiopeia-color-primary, #0d6efd);
background-color: transparent;
border-left: 2px solid var(--cassiopeia-color-primary, #0d6efd);
}
/* Nav: second level (shown on .active) */
nav[data-toggle='toc'] .nav .nav {
display: none; /* Hide by default, but at >768px, show it */
padding-bottom: 10px;
}
nav[data-toggle='toc'] .nav > .active > ul {
display: block;
}
@media (min-width: 768px) {
nav[data-toggle='toc'] .nav .nav {
display: block;
}
}

170
src/media/vendor/bootstrap-toc/bootstrap-toc.js vendored Normal file
View File

@@ -0,0 +1,170 @@
/*!
* Bootstrap Table of Contents v1.0.1 (https://afeld.github.io/bootstrap-toc/)
* Copyright 2015 Aidan Feldman
* Licensed under MIT (https://github.com/afeld/bootstrap-toc/blob/gh-pages/LICENSE.md)
*/
(function($) {
'use strict';
window.Toc = {
helpers: {
// return all matching elements in the set, or their descendants
findOrFilter: function($el, selector) {
// http://danielnouri.org/notes/2011/03/14/a-jquery-find-that-also-finds-the-root-element/
// http://stackoverflow.com/a/12731439/358804
var $descendants = $el.find(selector);
return $el.filter(selector).add($descendants).filter(':not([data-toc-skip])');
},
generateUniqueIdBase: function(el) {
var text = $(el).text();
// adapted from
// https://github.com/bryanbraun/anchorjs/blob/5a7f01cbd56f8aa8413084a64e7d1cbb1d4b0e56/anchor.js#L237-L257
// and
// https://github.com/twbs/bootstrap/blob/b8a84c3e48ce62e5d1954c52d3796b3fcbeab8a9/site/docs/4.1/assets/js/src/application.js#L47-L53
// Remove punctuation and spaces
var base = text
.toLowerCase()
.replace(/[^\w\s-]/g, '')
.replace(/[\s]+/g, '-');
return base || el.tagName.toLowerCase();
},
generateUniqueId: function(el) {
var anchorBase = this.generateUniqueIdBase(el);
for (var i = 0; ; i++) {
var anchor = anchorBase;
if (i > 0) {
// add suffix
anchor += '-' + i;
}
// check if ID already exists
if (!document.getElementById(anchor)) {
return anchor;
}
}
},
generateAnchor: function(el) {
if (el.id) {
return el.id;
} else {
var anchor = this.generateUniqueId(el);
el.id = anchor;
return anchor;
}
},
createNavList: function() {
return $('<ul class="nav"></ul>');
},
createChildNavList: function($parent) {
var $childList = this.createNavList();
$parent.append($childList);
return $childList;
},
generateNavEl: function(anchor, text) {
var $a = $('<a class="nav-link"></a>');
$a.attr('href', '#' + anchor);
$a.text(text);
var $li = $('<li class="nav-item"></li>');
$li.append($a);
return $li;
},
generateNavItem: function(headingEl) {
var anchor = this.generateAnchor(headingEl);
var $heading = $(headingEl);
var text = $heading.data('toc-text') || $heading.text();
return this.generateNavEl(anchor, text);
},
// Find the first heading level (`<h1>`, then `<h2>`, etc.) that has more than one element. Defaults to 1 (for `<h1>`).
getTopLevel: function($scope) {
for (var i = 1; i <= 6; i++) {
var $headings = this.findOrFilter($scope, 'h' + i);
if ($headings.length > 1) {
return i;
}
}
return 1;
},
// returns the elements for the top level, and the next below it
getHeadings: function($scope, topLevel) {
var topSelector = 'h' + topLevel;
var secondaryLevel = topLevel + 1;
var secondarySelector = 'h' + secondaryLevel;
return this.findOrFilter($scope, topSelector + ',' + secondarySelector);
},
getNavLevel: function(el) {
return parseInt(el.tagName.charAt(1), 10);
},
populateNav: function($topContext, topLevel, $headings) {
var $context = $topContext;
var $prevNav;
var helpers = this;
$headings.each(function(i, el) {
var $newNav = helpers.generateNavItem(el);
var navLevel = helpers.getNavLevel(el);
// determine the proper $context
if (navLevel === topLevel) {
// use top level
$context = $topContext;
} else if ($prevNav && $context === $topContext) {
// create a new level of the tree and switch to it
$context = helpers.createChildNavList($prevNav);
} // else use the current $context
$context.append($newNav);
$prevNav = $newNav;
});
},
parseOps: function(arg) {
var opts;
if (arg.jquery) {
opts = {
$nav: arg
};
} else {
opts = arg;
}
opts.$scope = opts.$scope || $(document.body);
return opts;
}
},
// accepts a jQuery object, or an options object
init: function(opts) {
opts = this.helpers.parseOps(opts);
// ensure that the data attribute is in place for styling
opts.$nav.attr('data-toggle', 'toc');
var $topContext = this.helpers.createChildNavList(opts.$nav);
var topLevel = this.helpers.getTopLevel(opts.$scope);
var $headings = this.helpers.getHeadings(opts.$scope, topLevel);
this.helpers.populateNav($topContext, topLevel, $headings);
}
};
$(function() {
$('nav[data-toggle="toc"]').each(function(i, el) {
var $nav = $(el);
Toc.init($nav);
});
});
})(jQuery);

1
src/media/vendor/bootstrap-toc/index.html vendored Normal file
View File

@@ -0,0 +1 @@
<!DOCTYPE html><title></title>

85
src/templates/html/com_content/article/toc-left.php
View File

@@ -11,7 +11,7 @@
* INGROUP: MokoCassiopeia
* PATH: ./templates/mokocassiopeia/html/com_content/article/toc-left.php
* VERSION: 03.06.02
* BRIEF: Article layout with table of contents on the left side
* BRIEF: Article layout with table of contents on the left side using Bootstrap TOC
*/
defined('_JEXEC') or die;
@@ -20,7 +20,11 @@ use Joomla\CMS\Factory;
use Joomla\CMS\HTML\HTMLHelper;
use Joomla\CMS\Language\Associations;
use Joomla\CMS\Layout\LayoutHelper;
use Joomla\Component\Content\Administrator\Extension\ContentComponent;
// Load Bootstrap TOC assets
$wa = Factory::getApplication()->getDocument()->getWebAssetManager();
$wa->useStyle('vendor.bootstrap-toc');
$wa->useScript('vendor.bootstrap-toc.js');
// Get article params
$params = $this->item->params;
@@ -29,7 +33,7 @@ $urls = json_decode($this->item->urls);
$canEdit = $params->get('access-edit');
$info = $params->get('info_block_position', 0);
// Check if associations are implemented. If they are, define the parameter.
// Check if associations are implemented
$assocParam = (Associations::isEnabled() && $params->get('show_associations'));
?>
@@ -38,15 +42,14 @@ $assocParam = (Associations::isEnabled() && $params->get('show_associations'));
<!-- Table of Contents - Left Side -->
<div class="col-lg-3 col-md-4 order-md-1 mb-4">
<div class="sticky-top toc-wrapper" style="top: 20px;">
<nav id="toc" class="toc-container">
<nav id="toc" data-toggle="toc" class="toc-container">
<h5 class="toc-title"><?php echo HTMLHelper::_('string.truncate', $this->item->title, 50); ?></h5>
<nav id="toc-nav" class="nav flex-column"></nav>
</nav>
</div>
</div>
<!-- Article Content -->
<div class="col-lg-9 col-md-8 order-md-2">
<div class="col-lg-9 col-md-8 order-md-2" data-toc-scope>
<meta itemprop="inLanguage" content="<?php echo ($this->item->language === '*') ? Factory::getApplication()->get('language') : $this->item->language; ?>" />
<?php if ($this->params->get('show_page_heading')) : ?>
@@ -112,52 +115,6 @@ $assocParam = (Associations::isEnabled() && $params->get('show_associations'));
</div>
</div>
<script>
(function() {
'use strict';
document.addEventListener('DOMContentLoaded', function() {
const content = document.querySelector('.article-content');
const tocNav = document.getElementById('toc-nav');
if (!content || !tocNav) return;
const headings = content.querySelectorAll('h2, h3, h4, h5, h6');
if (headings.length === 0) {
document.getElementById('toc').style.display = 'none';
return;
}
headings.forEach((heading, index) => {
if (!heading.id) {
heading.id = 'heading-' + index;
}
const link = document.createElement('a');
link.className = 'nav-link';
link.href = '#' + heading.id;
link.textContent = heading.textContent;
const level = parseInt(heading.tagName.substring(1));
link.style.paddingLeft = ((level - 2) * 15 + 10) + 'px';
tocNav.appendChild(link);
});
tocNav.querySelectorAll('a').forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href').substring(1);
const target = document.getElementById(targetId);
if (target) {
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
});
});
});
})();
</script>
<style>
.toc-container {
background: var(--cassiopeia-color-bg, #fff);
@@ -171,28 +128,8 @@ $assocParam = (Associations::isEnabled() && $params->get('show_associations'));
font-size: 1rem;
font-weight: 600;
color: var(--cassiopeia-color-text, #212529);
}
#toc-nav .nav-link {
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
color: var(--cassiopeia-color-link, #0d6efd);
text-decoration: none;
display: block;
border-left: 2px solid transparent;
transition: all 0.2s ease;
}
#toc-nav .nav-link:hover {
color: var(--cassiopeia-color-hover, #0a58ca);
background-color: var(--cassiopeia-color-hover-bg, rgba(0, 0, 0, 0.05));
border-left-color: var(--cassiopeia-color-primary, #0d6efd);
}
#toc-nav .nav-link.active {
color: var(--cassiopeia-color-primary, #0d6efd);
border-left-color: var(--cassiopeia-color-primary, #0d6efd);
background-color: var(--cassiopeia-color-hover-bg, rgba(0, 0, 0, 0.05));
border-bottom: 1px solid var(--cassiopeia-color-border, #dee2e6);
padding-bottom: 0.5rem;
}
@media (max-width: 767.98px) {

85
src/templates/html/com_content/article/toc-right.php
View File

@@ -11,7 +11,7 @@
* INGROUP: MokoCassiopeia
* PATH: ./templates/mokocassiopeia/html/com_content/article/toc-right.php
* VERSION: 03.06.02
* BRIEF: Article layout with table of contents on the right side
* BRIEF: Article layout with table of contents on the right side using Bootstrap TOC
*/
defined('_JEXEC') or die;
@@ -20,7 +20,11 @@ use Joomla\CMS\Factory;
use Joomla\CMS\HTML\HTMLHelper;
use Joomla\CMS\Language\Associations;
use Joomla\CMS\Layout\LayoutHelper;
use Joomla\Component\Content\Administrator\Extension\ContentComponent;
// Load Bootstrap TOC assets
$wa = Factory::getApplication()->getDocument()->getWebAssetManager();
$wa->useStyle('vendor.bootstrap-toc');
$wa->useScript('vendor.bootstrap-toc.js');
// Get article params
$params = $this->item->params;
@@ -29,14 +33,14 @@ $urls = json_decode($this->item->urls);
$canEdit = $params->get('access-edit');
$info = $params->get('info_block_position', 0);
// Check if associations are implemented. If they are, define the parameter.
// Check if associations are implemented
$assocParam = (Associations::isEnabled() && $params->get('show_associations'));
?>
<div class="com-content-article item-page<?php echo $this->pageclass_sfx; ?>">
<div class="row">
<!-- Article Content -->
<div class="col-lg-9 col-md-8 order-md-1">
<div class="col-lg-9 col-md-8 order-md-1" data-toc-scope>
<meta itemprop="inLanguage" content="<?php echo ($this->item->language === '*') ? Factory::getApplication()->get('language') : $this->item->language; ?>" />
<?php if ($this->params->get('show_page_heading')) : ?>
@@ -103,61 +107,14 @@ $assocParam = (Associations::isEnabled() && $params->get('show_associations'));
<!-- Table of Contents - Right Side -->
<div class="col-lg-3 col-md-4 order-md-2 mb-4">
<div class="sticky-top toc-wrapper" style="top: 20px;">
<nav id="toc" class="toc-container">
<nav id="toc" data-toggle="toc" class="toc-container">
<h5 class="toc-title"><?php echo HTMLHelper::_('string.truncate', $this->item->title, 50); ?></h5>
<nav id="toc-nav" class="nav flex-column"></nav>
</nav>
</div>
</div>
</div>
</div>
<script>
(function() {
'use strict';
document.addEventListener('DOMContentLoaded', function() {
const content = document.querySelector('.article-content');
const tocNav = document.getElementById('toc-nav');
if (!content || !tocNav) return;
const headings = content.querySelectorAll('h2, h3, h4, h5, h6');
if (headings.length === 0) {
document.getElementById('toc').style.display = 'none';
return;
}
headings.forEach((heading, index) => {
if (!heading.id) {
heading.id = 'heading-' + index;
}
const link = document.createElement('a');
link.className = 'nav-link';
link.href = '#' + heading.id;
link.textContent = heading.textContent;
const level = parseInt(heading.tagName.substring(1));
link.style.paddingLeft = ((level - 2) * 15 + 10) + 'px';
tocNav.appendChild(link);
});
tocNav.querySelectorAll('a').forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href').substring(1);
const target = document.getElementById(targetId);
if (target) {
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
});
});
});
})();
</script>
<style>
.toc-container {
background: var(--cassiopeia-color-bg, #fff);
@@ -171,28 +128,8 @@ $assocParam = (Associations::isEnabled() && $params->get('show_associations'));
font-size: 1rem;
font-weight: 600;
color: var(--cassiopeia-color-text, #212529);
}
#toc-nav .nav-link {
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
color: var(--cassiopeia-color-link, #0d6efd);
text-decoration: none;
display: block;
border-left: 2px solid transparent;
transition: all 0.2s ease;
}
#toc-nav .nav-link:hover {
color: var(--cassiopeia-color-hover, #0a58ca);
background-color: var(--cassiopeia-color-hover-bg, rgba(0, 0, 0, 0.05));
border-left-color: var(--cassiopeia-color-primary, #0d6efd);
}
#toc-nav .nav-link.active {
color: var(--cassiopeia-color-primary, #0d6efd);
border-left-color: var(--cassiopeia-color-primary, #0d6efd);
background-color: var(--cassiopeia-color-hover-bg, rgba(0, 0, 0, 0.05));
border-bottom: 1px solid var(--cassiopeia-color-border, #dee2e6);
padding-bottom: 0.5rem;
}
@media (max-width: 767.98px) {

13
src/templates/joomla.asset.json
View File

@@ -217,6 +217,19 @@
"type": "style",
"uri": "media/templates/site/mokocassiopeia/css/vendor/vm.css",
"attributes": {"media": "all"}
},
{
"name": "vendor.bootstrap-toc",
"type": "style",
"uri": "media/templates/site/mokocassiopeia/vendor/bootstrap-toc/bootstrap-toc.css",
"attributes": {"media": "all"}
},
{
"name": "vendor.bootstrap-toc.js",
"type": "script",
"uri": "media/templates/site/mokocassiopeia/vendor/bootstrap-toc/bootstrap-toc.js",
"dependencies": ["jquery"],
"attributes": {"defer": true}
}
]
}