110 lines
3.7 KiB
HTML
110 lines
3.7 KiB
HTML
{{ if $.Param "enableToc" }}
|
|
|
|
<div class="sidebar">
|
|
<div class="toc">
|
|
<h6 class="toc__title">{{ i18n "toc-label" }}</h6>
|
|
<ul id="toc"></ul>
|
|
</div>
|
|
</div>
|
|
|
|
{{ $toc := resources.Get `js/jquery.toc.min.js` | resources.Fingerprint }}
|
|
<script defer src="{{ $toc.RelPermalink }}"></script>
|
|
|
|
<script>
|
|
$(document).ready(function () {
|
|
var navbar = $('.navbar');
|
|
|
|
$("#toc").toc({ content: ".single__contents", headings: "h1,h2,h3,h4" });
|
|
$('#toc > li').each(function () {
|
|
$(this).find('ul').css('display', 'none');
|
|
});
|
|
$('#toc a').each(function () {
|
|
$(this).click(function () {
|
|
navbar.removeClass('navbar--show');
|
|
navbar.removeClass('navbar--hide');
|
|
navbar.addClass('navbar--hide');
|
|
|
|
$(".single__contents :header").each(function () {
|
|
$('.toc a').removeClass('active');
|
|
});
|
|
$(this).addClass('active');
|
|
|
|
$('#toc > li').each(function () {
|
|
$(this).find('ul').css('display', 'none');
|
|
});
|
|
$(this).next().css('display', 'block');
|
|
$(this).parents('ul').css('display', 'block');
|
|
});
|
|
});
|
|
|
|
// Add link button for every
|
|
var text, clip = new ClipboardJS('.anchor');
|
|
var headers = $('.single__contents :header').not('h6').not('h5');
|
|
headers.append(function (index, html) {
|
|
var element = $(this);
|
|
var url = encodeURI(document.location.origin + document.location.pathname);
|
|
var link = url + "#" + element[0].id;
|
|
return " <span class='anchor hide' data-clipboard-text='" + link + "' style='position: relative;'>" +
|
|
"<span style='font-size: 1rem; position: absolute; right: -2rem; top: 50%; transform: translateY(-50%)'>🔗</span>" +
|
|
"</span>"
|
|
;
|
|
});
|
|
headers.on('mouseenter', function () {
|
|
$(this).find('.anchor').attr('class', 'anchor');
|
|
});
|
|
headers.on('mouseleave', function () {
|
|
$(this).find('.anchor').attr('class', 'anchor hide');
|
|
});
|
|
|
|
$(".anchor").on('mouseleave', function (e) {
|
|
$(this).attr('aria-label', null).removeClass('tooltipped tooltipped-s tooltipped-w');
|
|
});
|
|
|
|
clip.on('success', function (e) {
|
|
e.clearSelection();
|
|
$(e.trigger).attr('aria-label', 'Link copied to clipboard!').addClass('tooltipped tooltipped-s');
|
|
});
|
|
|
|
// clipboard
|
|
var clipInit = false;
|
|
$('code').each(function () {
|
|
var code = $(this),
|
|
text = code.text();
|
|
|
|
if (text.length > 30) {
|
|
if (!clipInit) {
|
|
var text, clip = new ClipboardJS('.copy-to-clipboard', {
|
|
text: function (trigger) {
|
|
text = $(trigger).prev('code').text();
|
|
return text.replace(/^\$\s/gm, '');
|
|
}
|
|
});
|
|
|
|
var inPre;
|
|
clip.on('success', function (e) {
|
|
e.clearSelection();
|
|
inPre = $(e.trigger).parent().prop('tagName') == 'PRE';
|
|
$(e.trigger).attr('aria-label', 'Copied to clipboard!').addClass('tooltipped tooltipped-' + (inPre ? 'w' : 's'));
|
|
});
|
|
|
|
clip.on('error', function (e) {
|
|
inPre = $(e.trigger).parent().prop('tagName') == 'PRE';
|
|
$(e.trigger).attr('aria-label', fallbackMessage(e.action)).addClass('tooltipped tooltipped-' + (inPre ? 'w' : 's'));
|
|
$(document).one('copy', function () {
|
|
$(e.trigger).attr('aria-label', 'Copied to clipboard!').addClass('tooltipped tooltipped-' + (inPre ? 'w' : 's'));
|
|
});
|
|
});
|
|
|
|
clipInit = true;
|
|
}
|
|
|
|
code.after('<span class="copy-to-clipboard" title="Copy to clipboard" />');
|
|
code.next('.copy-to-clipboard').on('mouseleave', function () {
|
|
$(this).attr('aria-label', null).removeClass('tooltipped tooltipped-s tooltipped-w');
|
|
});
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
{{ end }} |