Rubricate it's javascript library inspired by Stream (Wagtail), Paragraphs (Drupal), inlines (Django).

Usage

Contents:

• Events
• Plugins

Classes:

• App
• AppForm
• PluginCollection
• PluginTypeCollection
• Messenger

Extensions

• rubricate.draggable
• rubricate.plugins

Installation

Add rubricate.js to html template. Create new instance of rubricate:

let appHtmlElement = document.getElementById('#element-id');
let app = Rubricate(appHtmlElement);

Options

You also can pass options object passed to every plugin constructor.

defaultData — json object used to display data and plugins by default. Must have a structure similar to the stream.getData() method returns.

let appHtmlElement = document.getElementById('#element-id');
let stream = Rubricate(appHtmlElement, {
    defaultData: {plugins:[]}
});

Example

Dummy example where we save data to text field on submit form:

<form id="my-form">
    <div id="my-app"></div>
    <input type="hidden" id="#my-form__app-json">
    <input type="submit" value="Submit">
</form>
<script src="rubricate.js"></script>

// init application
let appHtmlElement = document.getElementById('my-app');
let app = Rubricate(streamHtmlElement);

// add form onsubmit event listener
let form = document.getElementById('my-form');
let jsonStringField = document.getElementById('#my-form__app-json');

form.addEventHandler('submit', () => {
    jsonStringField.value = JSON.stringify(app.getData());
});