Dependencies - Cobler.js (COntent BuiLER) depends on sortable.js and adds the ability to drag items around that are defined by JSON objects that can have visual components. This can be used to construct various types of content depending on the individual 'slices' defined. Stock components exist for building forms with Berry.js ad for building out generic content. The stock components rely on several more libraries such as Berry.js, hogan.js, jQuery, and Bootstrap
A minimum setup might look something like this
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src='http://rubaxa.github.io/Sortable/Sortable.js'></script>
<script src='assets/js/cobler.js'></script>
</head>
<body>
<div class="myCobler">
</div>
</body>
</html>To get started we just need to initialize our cobler instance with some options
var cb = new Cobler({targets: document.getElementsByClassName('myCobler')})
{editor: true}
var options = {
targets: [document.getElementById('target')]
items: [[]]
};An array of elements that are acceptable targets for dragable elements.
An array of arrays where the inner arrays contain objects each representing one slice of the cobler.
If the Cobler instance is disabled then the html representation of each slice is rendered but moving and editing is disabled. This is used to render the result when not editing it.
Cobler utilizes a pub/sub event system, an event can be subscribed to by calling the 'on' methed of an instantiated Cobler. cb.on('change', function(e){ console.log(e); });
Events can also be triggered via cb.trigger('change') The following are the internal events that are triggered
triggered when a slice has been selected as the active slice
triggered when a slice has been deactivated
triggered when the values of any slice are triggered
triggered when a slice is added to a collection including being moved from another collection
triggered when a slice is removed from a collection including when being moved to a new collection
triggered when the order of slices in a collection changes
triggered when a slice is moved in anyway, either order or to a new collection
In order for Cobler.js to really be useful in any meaningful way we must define at least one type of 'slice' to be used. Each type of slice used by cobler needs to have its own api filled in to so that it can be interacted with. Often thes slices are packed together for similar goals, i.e. a form builder.
The render function recieves no inputs and returns the html for the view of the slice.
This function should return the JSON representation of this slice including all information needed to reconstruct it from scratch including the 'widgetType'
This funciton is called when the 'slice' goes into edit mode and should to get back out of edit mode the slice should be updated with new data.
Returns data needed to rerender the object this can be a subset of the toJSON function or completely different and does not need to include the 'widgetType'
This is a function that is passed an object that should update/initialize the slice
This function is triggered after the render function and can access the dom of the slice.
This is a reference to the outer draggable container that this slice lives inside of.