Slot

Pre-Populated

new sl.Class('./data/inventory.json', 'my_id_val', { target: '#myTarget' }); // (data repository, current ID, targetID)

Strip

new sl.Class('./data/inventory.json', ['id', 'id', 'id'], { target: '#myTarget', type: 'strip' });

Set Image Retrieval Repository

All images are pulled from a library of ID references at the moment. You can change some of the parameters with the following options or changing app/scripts/models/settings.js and then running grunt build on a terminal.

imageUrl: 'data/images.json',
imageKey: 'image',
imageSrcKey: 'src',

Missing data handling

Kicks in whenever an ID is missing from your data

new sl.Class('./data/inventory.json', 'missing_id', { target: '#myTarget', required: true });

Set input data

Supports the following HTML attributes. Will also trigger a red outline when HTML5 invalid fires.

new sl.Class('./data/inventory.json', 'epic_sword', {
    name: 'slot-input',
    required: true // Slots only, no strips
});

Create with pure HTML/CSS

Wraps the any input with class="slot-input" in a div. Optional data-options param is parsed as options

<input class="slot-input"
       type="text"
       name="myInput"
       required="true"
       class="slot-input"
       value="epic_sword"
       data-url="./data/inventory.json"
       data-options='{ "size": "normal" }' />

Strip support

<input class="slot-input"
       type="text"
       name="myInput"
       class="slot-strip"
       value='["epic_sword", "epic_sword_vertical"]'
       data-url="./data/inventory.json"
       data-options='{ "name": "strip" }' />

Filter by previous input

You can filter the given results for a particular input by providing the following options. The passed filter ID or input retrieves an array of values from the key. All results in the modal are then limited by the array of IDs.

// @NOTE Provided settings.filter object may only be a slots, no strips (although) strips can be filtered
filter: '#target_input' || 'data_id' || inputElement, // Note only support jQuery IDs
filterUrl: './data/inventory.json',
filterKey: 'url'

Filter by data ID only

Filter by pre-existing input ID

Filter

Results

Filter by Slot class

Filter

Results

Filter by slot for a strip

Note that you can only filter a strip with a slot. You cannot filter a slot with a strip.

Compact version

new sl.Class('./data/inventory.json', 'my_id_val', { size: 'compact' });

Vertical layout (strips only)

new sl.Class('./data/inventory.json', 'my_id_val', { size: 'vertical' });