Wijets - Avenger

# Step-by-Step Documentation

## Initialize

- Include the wijets.js script to your document
- Call $.wijets().make(); near the end of your html
- Done!

## Basic Setup

All Wijetized Panels have to be grouped. There may be multiple groups in a page, however, panels cannot be dragged and dropped from one group to another. We start with initializing the group.

    <div class="row" data-widget-group="group1">
      ....
    </div>

Each panel within the group can be delegated with a single attribute with optional properties (encoded in JSON), such as:

    <div class="row" data-widget-group="group1">
      <div class="panel" data-widget="">
        ...
      </div>
    </div>

The buttons for the panels are injected with the data-actions-container="" attribute. All three together, the basic set up for wijetized panels become:

    <div class="row" data-widget-group="group1">
      <div class="panel" data-widget="">
        <div class="panel-heading">
          <div class="panel-ctrls" data-actions-container="">
          <div>
          <h2>Panel Heading</h2>
        </div>
        <div class="panel-body">
          ...
        </div>
      </div>
    </div>

## Options

Set all options with the `data-actions-container`

Option | Property | Default Attribute | Description
--- | --- | --- | ---
Collapse | `data-action-collapse` | `{"target": ".panel-body"}` | Allow collapsing on the target
Color Picker | `data-action-colorpicker` | N/A | Allow changing of widget header color
Title Editor | `data-edit-title` | N/A | Allow changing of header title

## The widget controls container

Actions like `colorpicker` and `edit` require a space to put the controls in. You can select and arbitrary element to be the controls container simply by adding the `data-widget-controls` attribute.

    <div class="row" data-widget-group="group1">
      <div class="panel" data-widget='{"id": "widget1"}'>
        ...
        <div class="panel-editbox" data-widget-controls=""></div>
        ...
      </div>
    </div>

So now when you click on the edit action, the input box gets injected into the div.panel-editbox element automatically!

## Persistence (localStorage)

You can make sure the properties of a widget (such as title and header color) persist across pageviews by passing an id property to the `data-widget` attribute, like so:

    <div class="row" data-widget-group="group1">
      <div class="panel" data-widget='{"id": "widget1"}'>
        ...
      </div>
    </div>

Note that the attribute's values are in single quotes (') since it has to be JSON encoded.

## More widget options

You can add these options to the `data-widget` attribute in JSON to modify widget behavior.

Option | Description
--- | ---
`data-widget='{"collapse": "true"}'` | Collapses the widget by default
`data-widget='{"draggable": "false"}'` | Makes the widget non-draggable

You can apply multiple options like so: `data-widget='{"draggable": "false", "collapsed": "true"}'`

« Previous Next »