hugo-theme-zzo/layouts/partials/sidebar/sidebar-single.html

{{ if $.Param "enableSidebar" }}
{{ if $.Param "enableToc" }}

<div class="sidebar">
  <div class="toc__flexbox">
    <h6 class="toc__title">{{ i18n "toc-label" }}</h6>
    <label class="switch">
      <input id="toggle-toc" type="checkbox" checked>
      <span class="slider round"></span>
    </label>
  </div>
  <div class="toc">    
    <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").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');
        });
      }
    });

    // toc visibility
    $("#toggle-toc").change(function() {
      if (this.checked) {
        $('.toc').removeClass('hide');
      } else {
        $('.toc').removeClass('hide').addClass('hide');
      }
    });
  });   
</script>

{{ end }}
{{ end }}