(+ 1 1)

(format
  "<script type=\"text/JavaScript\">\n%s\n</script>\n"
  (save-excursion
    (org-babel-next-src-block)
    (cadr (org-babel-get-src-block-info))))

console.log("Hi From this unnamed text block, being called by inlineJSBlock()")

The other thing we are going to need, is a block that will load a JavaScript library. We can use the same principle, write an elisp code block that we can call in org-mode, but instead of jumping code blocks, we can just parse it a variable, using :var name in the source block.

(format "<script src=\"%s\"></script>" libpath)

#+CALL:includeJSLibrary(libpath="/scripts/lib/jquery-3.4.1.min.js")

<script src="/scripts/lib/jquery-3.4.1.min.js"></script>

The obvious place to start is jQuery's first few examples. One of the first that is sort of equivalent to a "hello, world" example is their alert example. They basically setup a callback for the click hook on a elements.

$( document ).ready(function() {
  $( 'a' ).click(function(event) {
    alert('Thanks for visiting!');
  });
});

So, now, any time you click on an a element, or a link, from this page, it will send you an alert before it loads the new page. Here, go to google and then come back.

Something you've probably noticed is the hover effect for the code blocks. I've setup callbacks for the mouseover and mouseout events that change the css styles.

They aren't perfect, as hovering over nested elements counts as mouseout, but it is a nice way to show interaction with a code heavy block post.

$( document ).ready(function() {
  $( "pre.src" ).mouseover((event) => {
    let style = {
      "box-shadow": ".5em .5em .5em #1a1a1a",
      "border": "2px solid #121212"
    };
    $( event.target ).css(style);
  });
  $( "pre.src" ).mouseout(() => {
    let style = {
      "box-shadow": ".3em .3em .3em #2a2a2a",
      "border": "1px solid #121212"
    };
    $( event.target ).css(style);
  });
});

Another potentially useful example is folding sections. jQuery has a handy function specifically to do this, called slideToggle. The way my export function is writing html, it is building sections so that a div surrounds a header a section content div, like this:

<div>
  <h3>Section title</h3>
  <div>
     ...
  </div>
</div>

This means that I can just use the next method on a jQuery class.

$( document ).ready(() => {
  $( "h3" ).click(() => {
    $( event.target ).next().slideToggle("slow");
  });
});

Now that we have the sections folding, we need to set something up to telegraph that sections titles can be interacted with, so that the user knows that they can actually do something with it.

I've done a couple of quick, simple things, as this is only an example. You may have noticed that the subsections turned blue. This time, instead of using mouseover and mouseout, I've just used hover and fed it a start and end callback.

The other thing that I thought was worth doing was changing the heading text to mark when a section has been collapsed. To achieve this I've just modified the target's innerHTML element to include an elipsis if it didn't have one, and remove one if it is already there.

$( document ).ready(() => {
  $( "h3" ).hover(() => {
    $( event.target ).css("color", "#8ac6f2");
  }, () => {
    $( event.target ).css("color", "white");
  });

  $( "h3" ).click(() => {
    let header = event.target.innerHTML;
    if ("..." == header.substring(header.length - 3))
      event.target.innerHTML = header.substring(0, header.length - 3);
    else
      event.target.innerHTML += "...";
  });
});

And there we have it. I can write a blog post about codeing things, explaining why I am doing it and showing my code, and actually have it run in browser, so they reader can interact with it.

I'm going to do a series as I build a character sheet for a role playing game, which should allow you to interact with it as you go.