From jQuery to vanilla javascript

Question

I have this chunk of code which is using jQuery and I want it to be a vanilla javascript.

I used self executable function and got rid of the $. Well it stops working as soon as I get rid of the first $ before the anonymous function and rewrite it in vanilla JS...

$(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").has("h1").size() > 0 ? "h1,h2,h3,h4,h5" : "h2,h3,h4,h5",
    ignoreSelector: ".discrete"
  });

  var handleTocOnResize = function() {
    if ($(document).width() < 768) {
      $("#generated-toc").hide();
      $(".sectlevel0").show();
      $(".sectlevel1").show();
    } else {
      $("#generated-toc").show();
      $(".sectlevel0").hide();
      $(".sectlevel1").hide();
    }
  }

  $(window).resize(handleTocOnResize);
  handleTocOnResize();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

So I write it like this...But for some reason(s) it isn 't working...

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

  var handleTocOnResize = function() {
    if (document.width() < 768) {
      document.getElementsByName("generated-toc").hide();
      document.getElementsByClassName("sectlevel0").show();
      document.getElementsByClassName("sectlevel1").show();
    } else {
      document.getElementById("generated-toc").show();
      document.getElementsByClassName("sectlevel0").hide();
      document.getElementsByClassName("sectlevel1").hide();
    }
  }

  window.resize(handleTocOnResize);
  handleTocOnResize();
})();

You are mixing Jquery and Javascript. This will not work the way you have done it. — Always Helping, Jun 09 '20 at 07:31
@UsmanMunir This is a fix that is used for asciidoctor's dynamic table of content (toc): https://stackoverflow.com/questions/34481638/how-to-use-tocify-with-asciidoctor-for-a-dynamic-toc Where toc is created at compile time. — 71GA, Jun 09 '20 at 07:57

mplungjan · Accepted Answer · 2020-06-09T08:37:03.410

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

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
Your (function() { means you have to add the JS after the document. Instead use window.addEventListener("load",function() {
append is not vanilla
element.attr is not vanilla. element.getAttribute("id") or just element.id
show/hide is not vanilla. You need classList.toggle("hide") OR use media queries or set the hidden attribute
element.resize is not vanilla. window.addEventListener("resize", handleTocOnResize); is or element.onresize
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.
getElementsByClassNameYou cannot change classes on a node list - I changed to querySelector
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>

[`resize` is vanilla](https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event) — KooiInc, Jun 09 '20 at 08:12
@KooiInc `element.resize` is not valid. It should be `element.onresize` or as I wrote `element.addEventListener("resize")` — mplungjan, Jun 09 '20 at 08:14

From jQuery to vanilla javascript

1 Answers1