Javascript-based WebBlocks Generators and Mutators

[ebollens]

I've started work on a WebBlocks project for generating and mutating WebBlocks structures. This is needed for work with @melcassio @marywatkins @quyenv and @albertwu, as it will allow me to provide a "style generator" as part of the WebBlocks-kit.

My work thus far can be found here:
https://github.com/ebollens/WebBlocks.Blocks.js

I see this as eventually being an optional package that can be included with WebBlocks core, as well as something that can go into the documentation to help people actually tinker with styles live.

/CC @loganfranken @edsakabu @chris4ucla @lnicks

The test case and starting example was Entity/Message:

---

Creation

Initialization

The most basic way to define a message:

var message = new WebBlocks.Blocks.Message({
    'header': 'Heading',
    'content': 'This is some message content',
    'color': 'primary dark'
});
$('body').append(message);

Setters and Getters

For the message entity, several setters are exposed:

var message = new WebBlocks.Blocks.Message();
message.setHeader('Message Header');
message.setContent('Message Text');
message.setColor('danger');
$('body').append(message);

Equivalent getters (getHeader, getContent, getColor) and unsetters (unsetHeader,unsetContent,unsetColor`) also exist.

Shorthand

Adding some short-hand simplifies this:

with(WebBlocks.Blocks) {
    $('body').append(new Message({
        'header': 'Heading',
        'content': 'This is some message content',
        'color': 'primary dark'
    }));
}

Use with cautiously (see reference).

Mutation

Basic

An existing element can be cast into a WebBlocks.Block as:

var block = WebBlocks.Blocks.makeBlock($('div.message'));
// use getters, setters, unsetters, etc. on block

jQuery Helper

The jQuery.toBlock.js library provides a shorthand:

var block = $('#your-message').toBlock();
// use getters, setters, unsetters, etc. on block

Note that this method only supports a single block at once; if you have more than one, consider:

$('div.message').each(function(){
    var block = $(this).toBlock();
    // use getters, setters, unsetters, etc. on block
});

[loganfranken]

This looks good to me @ebollens; I think a JavaScript API could open up some really exciting possibilities.

[ebollens]

Happen to mean something like this?

[loganfranken]

@ebollens Nice!