FbIN/htmly
1
0
Fork 0
mirror of https://github.com/danpros/htmly.git synced 2026-04-18 19:46:21 +05:30
Code Issues Projects Releases Packages Wiki Activity

Add TOC

Browse source 
Allow to add TOC using shortcode (<!--toc-->). TOC add button in text editor.
This commit is contained in:
danpros 2024-02-20 22:47:45 +07:00
commit 6c8c1271c2
11 changed files with 100 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

9
system/admin/editor/js/Markdown.Editor.js
View file

@ -52,6 +52,8 @@
readmore: "Read More <!--more--> Ctrl+M",
toc: "TOC <!--toc-->",
table: "Table - Ctrl+J",
undo: "Undo - Ctrl+Z",
@ -1520,6 +1522,7 @@
}));
buttons.hr = makeButton("wmd-hr-button", getString("hr"), "fa fa-ellipsis-h", bindCommand("doHorizontalRule"));
buttons.readmore = makeButton("wmd-readmore-button", getString("readmore"), "fa fa-arrow-right", bindCommand("doReadMore"));
buttons.toc = makeButton("wmd-toc-button", getString("toc"), "fa fa-list-alt", bindCommand("doTOC"));
//makeSpacer(3);
buttons.undo = makeButton("wmd-undo-button", getString("undo"), "fa fa-undo", null);
buttons.undo.execute = function (manager) {
@ -2256,6 +2259,12 @@
chunk.skipLines(0, 1, true);
}
commandProto.doTOC = function (chunk, postProcessing) {
chunk.startTag = "<!--toc-->";
chunk.selection = "";
chunk.skipLines(0, 1, true);
}
commandProto.doStrikethrough = function (chunk, postProcessing) {
// Get rid of whitespace and fixup newlines.

7
system/includes/functions.php
View file

@ -518,6 +518,13 @@ function get_posts($posts, $page = 1, $perpage = 0)
// Get the contents and convert it to HTML
$post->body = MarkdownExtra::defaultTransform(remove_html_comments($content));
$toc = explode('<!--toc-->', $post->body);
if (isset($toc['1'])) {
$load = <<<EOF
<script>window.onload = function () {generateTOC('.post-{$post->date}');};</script>
EOF;
$post->body = $toc['0'] . $load . '<div class="toc" id="toc-wrapper" style="display:none;" ><details><summary title="TOC"><span class="details">Table of Contents</span></summary><div class="inner"><div id="toc"></div></div></details></div><script src="'. site_url().'system/resources/js/toc.js"></script>' . $toc['1'];
}
// Convert image tags to figures
if (config('fig.captions') == 'true') {

2
system/resources/css/adminlte.min.css vendored
View file

File diff suppressed because one or more lines are too long

76
system/resources/js/toc.js Normal file
View file

@ -0,0 +1,76 @@
/*jslint
white: true,
browser: true,
vars: true
*/
/**
* Generates a table of contents for your document based on the headings
* present. Anchors are injected into the document and the
* entries in the table of contents are linked to them. The table of
* contents will be generated inside of the first element with the id `toc`.
* @param {HTMLDOMDocument} documentRef Optional A reference to the document
* object. Defaults to `document`.
* @author Matthew Christopher Kastor-Inare III
* @version 20130726
* @example
* // call this after the page has loaded
* generateTOC();
*/
/**
* Modified by @danpros
* select only in selector ID
* using the heading title as the slug IDs
* insert the anchor inside the heading
* fix browser not scrolling to the hash
*/
function generateTOC (id) {
var documentRef = document;
var selector = id + ' h1,' + id + ' h2,' + id + ' h3,' + id + ' h4,' + id + ' h5,' + id + ' h6';
var toc = documentRef.getElementById('toc');
var headings = [].slice.call(documentRef.body.querySelectorAll(selector));
if (headings && headings.length) {
headings.forEach(function (heading, index) {
heading.setAttribute('id', 'toc-' + heading.textContent.replace(/\s+/g, '-').toLowerCase());
heading.setAttribute('class', 'toc-link');
var anchor = documentRef.createElement('a');
anchor.setAttribute('href', '#toc-' + heading.textContent.replace(/\s+/g, '-').toLowerCase());
anchor.setAttribute('class', 'anchor');
anchor.innerHTML = '<svg fill="currentColor" viewBox="0 0 24 24" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76.0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71.0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71.0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76.0 5-2.24 5-5s-2.24-5-5-5z"></path></svg>';
var link = documentRef.createElement('a');
link.setAttribute('href', '#toc-' + heading.textContent.replace(/\s+/g, '-').toLowerCase());
link.textContent = heading.textContent;
var div = documentRef.createElement('div');
div.setAttribute('class', heading.tagName.toLowerCase() + '-toc');
heading.appendChild(anchor);
div.appendChild(link);
toc.appendChild(div);
});
documentRef.getElementById('toc-wrapper').style.display = 'inline-block';
}
if (window.location.hash) {
var hash = window.location.hash;
scrollToHash(hash);
}
}
// fix browser not scrolling to the hash
function scrollToHash (hash) {
setTimeout(function() {
hashtag = hash;
location.hash = '';
location.hash = hashtag;
}, 300);
}
try {
module.exports = generateTOC;
} catch (e) {
// module.exports is not defined
}

2
themes/blog/post.html.php
View file

@ -39,7 +39,7 @@
<span itemprop="author"><a href="<?php echo $p->authorUrl;?>"><?php echo $p->authorName;?></a></span>
</p>
</div>
<div class="desc text-left" itemprop="articleBody">
<div class="desc text-left post-<?php echo $p->date;?>" itemprop="articleBody">
<?php echo $p->body; ?>
</div><!--//desc-->
<div style="margin-top:30px;position:relative;">

2
themes/clean/post.html.php
View file

@ -38,7 +38,7 @@
<blockquote><?php echo $p->quote ?></blockquote>
</div>
<?php } ?>
<div class="post-body" itemprop="articleBody">
<div class="post-body post-<?php echo $p->date;?>" itemprop="articleBody">
<?php echo $p->body; ?>
</div>
<div class="tags"><strong><?php echo i18n('Tags'); ?>:</strong> <?php echo $p->tag;?></div>

2
themes/doks/post.html.php
View file

@ -45,7 +45,7 @@
</div>
<div class="content-body" id="content">
<div class="content-body post-<?php echo $p->date;?>" id="content">
<?php echo $post->body;?>
<p class="post-footer">

2
themes/logs/post.html.php
View file

@ -38,7 +38,7 @@
<blockquote><?php echo $p->quote ?></blockquote>
</div>
<?php } ?>
<div class="post-body" itemprop="articleBody">
<div class="post-body post-<?php echo $p->date;?>" itemprop="articleBody">
<?php echo $p->body; ?>
</div>
<div class="tags"><strong><?php echo i18n('Tags');?></strong> <?php echo $p->tag;?></div>

2
themes/readable/post.html.php
View file

@ -38,7 +38,7 @@
<blockquote><?php echo $p->quote ?></blockquote>
</div>
<?php } ?>
<div class="post-body" itemprop="articleBody">
<div class="post-body post-<?php echo $p->date;?>" itemprop="articleBody">
<?php echo $p->body; ?>
</div>
<div class="tags"><strong><?php echo i18n('Tags');?>:</strong> <?php echo $p->tag;?></div>

2
themes/twentyfifteen/post.html.php
View file

@ -28,7 +28,7 @@
<h1 class="entry-title"><?php echo $p->title; ?></h1>
<?php } ?>
</header>
<div class="entry-content">
<div class="entry-content post-<?php echo $p->date;?>">
<?php echo $p->body; ?>
</div>
<style>.related {padding-bottom:2em;}.related p {margin-top:0;margin-bottom:0.5em;} .related ul {margin-left:1em;}</style>

2
themes/twentysixteen/post.html.php
View file

@ -17,7 +17,7 @@
<div class="entry-content">
<div class="content">
<div class="clearfix text-formatted field field--name-body">
<div class="content">
<div class="content post-<?php echo $p->date;?>">
<?php if (!empty($p->quote)):?>
<blockquote><?php echo $p->quote;?></blockquote>
<?php endif;?>