[Solved] From jQuery to vanilla javascript

by


NOTE: I had to downgrade the jQuery to match the tocify

What is the point of rewriting jQuery when you are still dependent on jQuery?

Findings so far without having access to the HTML

  1. The jQuery also does not work – .size has been removed in jQuery 3.0.
    Use the .length property instead. translates to document.querySelectorAll("#content h1").length – vanilla does not have has
  2. Your (function() { means you have to add the JS after the document. Instead use window.addEventListener("load",function() {
  3. append is not vanilla
  4. element.attr is not vanilla. element.getAttribute("id") or just element.id
  5. show/hide is not vanilla. You need classList.toggle("hide") OR use media queries or set the hidden attribute
  6. element.resize is not vanilla. window.addEventListener("resize", handleTocOnResize); is or element.onresize
  7. getElementsByName is not valid on an ID and would return a node list if the element(s) had name, which is not a valid attribute on a div.
  8. getElementsByClassNameYou cannot change classes on a node list – I changed to querySelector
  9. document.width is not vanilla. 
window.addEventListener("load", function() {
  document.getElementById("toc").innerHTML += "<div id='generated-toc'></div>";
  const $genToc = $("#generated-toc"); // seems it MUST be a jQuery object
  $genToc.tocify({
    extendPage: true,
    context: "#content",
    highlightOnScroll: true,
    hideEffect: "slideUp",
    hashGenerator: function(text, element) {
      return element.id;
    },
    smoothScroll: false,
    theme: "none",
    selectors: document.querySelectorAll("#content h1").length > 0 ? "h1,h2,h3,h4,h5" : "h2,h3,h4,h5",
    ignoreSelector: ".discrete"
  });

  var handleTocOnResize = function() {
    // https://gist.github.com/joshcarr/2f861bd37c3d0df40b30
    const w=window,d=document,e=d.documentElement,g=d.getElementsByTagName('body')[0],x=w.innerWidth||e.clientWidth||g.clientWidth;
    const show = x < 768 // or use media queries
   // $genToc[0].classList.toggle("hide", !show);
    document.querySelector(".sectlevel0").classList.toggle("hide", show);
    document.querySelector(".sectlevel0").classList.toggle("hide", show);
  }

  window.addEventListener("resize", handleTocOnResize);
  handleTocOnResize();
});
.hide {
  display: none
}


.tocify-header {
    font-style: italic;
}

.tocify-subheader {
    font-style: normal;
    font-size: 90%;
}

.tocify ul {
    margin: 0;
 }

.tocify-focus {
    color: #7a2518; 
    background-color: rgba(0, 0, 0, 0.1);
}

.tocify-focus > a {
    color: #7a2518; 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tocify/1.9.0/javascripts/jquery.tocify.min.js"></script>


<div id="content">
  <h1>Toc</h1>
  <p class="sectlevel0">Level 0</p>
  <p class="sectlevel1">Level 1</p>
</div>
<div id="toc"></div>

jQuery test version to see if we can make the original code work

const handleTocOnResize = function() {
  const show = $(document).width() < 768;
  $("#generated-toc").toggle(!show);
  $(".sectlevel0").toggle(show);
  $(".sectlevel1").toggle(show);
};


$(function() {
  $("#toc").append("<div id='generated-toc'></div>");
  $("#generated-toc").tocify({
    extendPage: true,
    context: "#content",
    highlightOnScroll: true,
    hideEffect: "slideUp",
    hashGenerator: function(text, element) {
      return $(element).attr("id");
    },
    smoothScroll: false,
    theme: "none",
    selectors: $("#content h1").length > 0 ? "h1,h2,h3,h4,h5" : "h2,h3,h4,h5",
    ignoreSelector: ".discrete"
  });


  $(window).on("resize", handleTocOnResize);
  handleTocOnResize();
});
.hide {
  display: none
}

.tocify-header {
  font-style: italic;
}

.tocify-subheader {
  font-style: normal;
  font-size: 90%;
}

.tocify ul {
  margin: 0;
}

.tocify-focus {
  color: #7a2518;
  background-color: rgba(0, 0, 0, 0.1);
}

.tocify-focus>a {
  color: #7a2518;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tocify/1.9.0/javascripts/jquery.tocify.min.js"></script>

<div id="content">
  <h1>Toc</h1>
  <p class="sectlevel0">Level 0</p>
  <p class="sectlevel1">Level 1</p>
</div>
<div id="toc"></div>

3

solved From jQuery to vanilla javascript