mag-component-modal-check-list

Modal check list component

Modal check list is a component to build user interface, an instance of Component module. It is based on mag-component-modal and mag-component-check-list.

Installation

npm install mag-component-modal-check-list

Usage

Add component to the scope:

var ModalCheckList = require('mag-component-modal-check-list');

The component config besides mag-component-modal contans mag-component-check-list config in property list. This property list may contain one unique item. When unique item is checked, all other items will be unchecked. When another item is checked, unique item will be unchecked.

Create instance with custom config:

var modalCheckList = new ModalCheckList({
    // mag-component-modal config
    title: 'sort',
    titleCounter: false,
    className: 'sort',
    events: {
        show: function () {
            this.focus();
        },
        'checked:change': function ( event ) {
            console.log(event);            
        }
    },
    // mag-component-check-list config
    list: {
        size: 2,
        data: [
            // unique item
            {state: true, title: 'All content', value: 1, unique: true},
            {state: false, title: 'Music', value: 2},
            {state: false, title: 'Video', value: 3}
        ]
    }
});
 
page.add(modalCheckList);

To work with mag-component-check-list properties:

modalCheckList.list;

To change item state:

modalCheckList.list.changeState($domItem);

To uncheck all items:

modalCheckList.clearChecked(newFocusPosition);

To get all checked items data:

console.log(modalCheckList.checkedData);

Development mode

There is a global var DEVELOP which activates additional consistency checks and protection logic not available in release mode.

Contribution

If you have any problems or suggestions please open an issue according to the contribution rules.

License

mag-component-modal-check-list is released under the MIT License.