Responsive TOC element oxygen builder.json

{"component":{"id":212,"name":"ct_code_block","options":{"ct_id":212,"ct_parent":28,"selector":"code_block-212-125","original":{"code-php":"<div class=\"toc\">\n  <h3 id=\"toggle-toc\">Table of Contents</h3>\n  <ul id=\"toc-list\">\n    <!-- TOC links will be inserted here dynamically -->\n  </ul>\n</div>\n\n\n","code-js":"jQuery(document).ready(function($) {\n  // Check if in builder mode\n  if (window.angular) return;\n\n  // TOC setup\n  var container = $('#toc-list');\n  var headings = $('#div_block-25-125 h2');\n  var number = 0;\n\n  headings.each(function() {\n    if (!$(this).attr('id')) {\n      $(this).attr('id', 'toc-item-' + number);\n      number++;\n    }\n    var tocItem = $('<li>').appendTo(container);\n    $('<a>').text($(this).text()).attr('href', '#' + $(this).attr('id')).appendTo(tocItem);\n  });\n\n  // Toggle TOC visibility on mobile\n  $('#toggle-toc').on('click', function() {\n    $('#toc-list').toggleClass('show');\n  });\n\n  // Minimize TOC when a link inside is clicked\n  $('#toc-list').on('click', 'a', function() {\n    $('#toc-list').removeClass('show');\n  });\n});\n\n\n// Highlighting the TOC element of the section that is currently scrolled\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n  const headings = document.querySelectorAll('h2'); // Select all h2 headings\n  let lastHighlighted = null; // Store the last highlighted TOC link\n\n  window.addEventListener('scroll', function() {\n    const windowHeight = window.innerHeight;\n    let currentVisibleHeading = null; // The current heading visible in the top half\n\n    // Determine the last heading entering the top half of the viewport\n    headings.forEach(heading => {\n      const rect = heading.getBoundingClientRect();\n      if (rect.top >= 0 && rect.top <= windowHeight / 2) {\n        currentVisibleHeading = heading; // Update the current visible heading\n      }\n    });\n\n    // Update the highlight if a new heading has entered the top half\n    if (currentVisibleHeading) {\n      const correspondingTocLink = document.querySelector(`a[href=\"#${currentVisibleHeading.id}\"]`);\n      if (lastHighlighted !== correspondingTocLink) {\n        if (lastHighlighted) {\n          lastHighlighted.classList.remove('highlight');\n        }\n        correspondingTocLink.classList.add('highlight');\n        lastHighlighted = correspondingTocLink; // Update the last highlighted link\n      }\n    } else {\n      // Optionally, keep the last highlight active if no new heading has entered\n      // This part is based on whether you want the highlight to disappear\n      // when no headings are in the top half.\n      // Remove the else block if you want the last highlight to remain until a new h2 enters.\n    }\n  });\n});\n","code-css":".toc-wrapper {\n  overflow: visible;\n}\n    .toc h2 {\n      margin-top: 0;\n    }\n    .toc {\n      display:flex;\n      flex-direction: column;\n      border: 1px solid #f5f5f5;\n      border-radius: var(--bor-rad-50);\n      box-shadow: 4px 4px 0 #d5fb00;\n      padding: 7%;\n    }\n\n  \n  \n  \n  .toc ul {\n    list-style-type: none;\n    padding-left: 0;\n  }\n  \n  .toc li {\n    margin-bottom: 5px;\n  }\n  \n  .toc a {\n    color: #f5f5f5;\n    text-decoration: none;\n    font-weight: 400;\n    transition: 0.4s ease-in-out;\n  }\n\n  /*Stuling TOC elements on hover and when they enter the viewport*/\n  .toc a:hover,.toc .highlight {\n    color: #d5fb00;\n    letter-spacing: 0.01em;\n  \n  }\n\n\n/*TOC styles on mobile devices*/\n@media (max-width: 800px) {\n  .sidebar--toc  {\n    z-index: 5;\n  }\n  \n    .toc {\n      position: fixed; /* Fix the TOC to the viewport */\n      padding: 2.5%;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      z-index: 5; /* Make sure it's above other content */\n      background: #19191b; /* Background color for visibility */\n      transition: top 0.3s ease-in-out;\n    }\n\n    .toc h3 {\n      order: +1;\n      bottom: 0; /* Position at the bottom of the viewport */\n      left: 0;\n      width: 100%; /* Span the full width of the container */\n      margin: 0; /* Reset margin */\n      color: white; /* Color of the text */\n      text-align: center;\n      cursor: pointer;\n    }\n\n    .toc ul {\n      display: none; /* Initially hide the TOC list */\n      width: 100%; /* Full width */\n      padding: 0; /* Reset padding */\n      flex-direction: column;\n      margin-bottom: 2rem; /* Give space for the toggle button */\n    }\n\n      .toc ul.show {\n        display: flex; /* Show the TOC list when toggled */\n      }\n}\n"},"nicename":"TOC CODE block","activeselector":false,"classes":["toc-wrapper"]},"depth":5},"classes":{"toc-wrapper":{"key":"toc-wrapper","original":{"overflow":"visible"}}}}