dey-dey / featherweight-lists

Plain ol' js list creator

Feather Weight UI - ListForm Component

Easily create list items!

var listForm = require('featherweight-lists');
var mainForm = listForm({
  layout: 'horizontal-left',
  onChange: function(inputValue) {
    console.log('input changed! (' + inputValue + ')');
  },
  onAdd: function(item) {
    console.log('item added! (' + item.value + ')');
  },
  onRemove: function(item) {
    console.log('item removed! (' + item.value + ')');
  },
  onClear: function() {
    console.log('wohoo empty! ', mainForm.data()); // logs empty array
  },
  itemTransitionOut: function(el, done) {
    var transitionClass = 'transition-out';
    el.classList.add(transitionClass);
    setTimeout(function(){
        el.classList.remove(transitionClass);
    }, 200);
  }
});

# Run Demo

You can find the example code in `./example.js`.

If you run a simple webserver in this directory to serve `./index.html` and static assets. 

For example with python's `SimpleHTTPServer`:

        $ python -m SimpleHTTPServer

The main demo displays the events and hooks provided by the list form component API.

Options

Each item in a list has a data represenation as follows:

DataItem = { value: String }

Option Name	Value	Default	Notes about values
layout	String	'vertical-top'	viable options are: 'vertical-top', 'vertical-bottom', 'horizontal-left', 'horizontal-right'. See example for layout renderings.
placeholder	String	'Item Text'
onChange	Function(value: String)	null	value is the current value of the text input. This is attached to the input element's keyup event.
onAdd	Function(item: DataItem)	null	item is a DataItem, see the above object for reference. Whenever an item is added, this function is called.
onRemove	Function(item: DataItem)	null	item is a DataItem, see the above object for reference. Whenever an item is removed, this function is called.
onClear	Function()	null	this method clears the items in the list
itemTransitionOut	Function(itemElement: HtmlNode, done: Function)	null	itemElement is the container of the current item being removed. By default this is called when the click event is fired on the dom element's remove button. done must be called when your animation is completed to prevent memory leaks.
inputValidation	Function(value: String)	value !== ''	This function is called when the

ListForm Instance API

Option Name	Type	Notes
el	HTMLElement	This is the container dom node
clear	Function	This function clears all the items in the list
data	Function	This function returns an array of all the DataItems
destroy	Function	This clears the data, unbinds even handlers, and removes the dom element