Diver

Diver is a tool that Joe developed to migrate as much responsibility over the DOM away from HTML and CSS and give it to JavaScript. Diver allows you to create DOM elements programmatically and save references to them for later use. For the most part, Diver is responsible for every HTML element in Thunder that lives within <body>.

Diver has gone through its iterations over the years and as it stands in 2020 has made improvements that are unfortunately unavailable to the version we committed to in 2015.

Structure

Javascript code

















var Diver = require('diver');

Diver
.a('main')
    .b('chunk top')
        .c('first-child').html('Hello World')
        .c('second-child').html('<span>foobar</span>')
    .b('second-chunk #second')
        .c('pick /select');
            for(var i = 1; i<=3; i++)
            Diver
            .d('option /option', {value: i}).html('Option '+i);
Diver
    .b('third-chunk');

var d = Diver.pop();

Generated HTML

















<div class="main">
    <div class="chunk top">
        <div class="first-child">Hello World</div>
        <div class="second-child">
            <span>foobar</span>
        </div>
    </div>
    <div id="second" class="second-chunk">
        <select class="pick">
            <option class="option" value=1>Option 1</option>
            <option class="option" value=2>Option 2</option>
            <option class="option" value=3>Option 3</option>
        </select>
    </div>
    <div class="third-chunk"></div>
</div>

The .a, .b, .c, etc. functions denote child/sibling relationships between adjacent elements. The white space indentation is not necessary, but it lends readability by visually paralleling HTML.

The default functionality of Diver is to create div elements with class names. You can affect this behavior by using certain characters. Adding a leading # will denote that a word is an id instead of a class. A / indicates that the element type should be something other than a div. Properties can be added to elements by including a second parameter objects with the property as a key/value pair.

The function .html() allows you to add markup within the node.

Diver must be explicitly told when you're done building your structure, which you do by calling Diver.pop(). This returns a Diver object which contains references to all of the children of the main node by their class name. This also means that you can continue to build your object with multiple separate calls to Diver until it is finally popped.

References

Diver nodes are wrapped jQuery objects, so selection and interaction with nodes bears similarity to working with jQuery. For example, if you wanted to add a click listener to the "enter" div:



d.enter.on('click', function(){
    //do something
});

Be sure to take note that dashes are converted to underscores for Diver object references. Therefore, "third-chunk" becomes "third_chunk".



d.third_chunk.on('mousedown', function(){
    //enter warpdrive
});

The important difference between Diver and jQuery is that Diver is opinionated about how elements are selected and by the nature of its design, implicity scopes references to the object in which they were popped.

Consider the following:












Diver
.a('foo')
    .b('bar');
var alpha = Diver.pop();

Diver
.a('foo')
    .b('bar');
var bravo = Diver.pop();

alpha.bar.append(bravo);
//append is available to us via jQuery

Though there are two nodes with the "bar" class name in the same, it is trivial to make distinct reference to them.


alpha.bar.on('click', function() { //something });
bravo.bar.on('click', function() { //a different something });

Warnings

Be sure to Diver.pop()! Diver is a singleton so if you forget to pop, then some far off file that is the next to pop() will grab all of your elements.

Diver

Structure

References

Warnings

Read more

Thunder Reporting

Thunder Signatures

Thunder Logging

Thunder MedPass and Electron