LobiList

LobiList is jQuery plugin for todo lists. Supports drag & drop of todos. Multiple lists with different colors. Support for communication to backend.

6087 Download View on Github

Version 1.0.6 released. View release notes

Coming soon v2.0

What's new

  • HTML5 localStorage support. Save lists and items in HTML5 localStorage.
  • Cookie support. Save lists and items in cookies.
  • Improved UI
  • Improved communication to server side.
  • Example of real world case.
  • Serialize the whole plugin data into single object.
  • Much more improvements and bug fixes.

Features

  • Multiple list support
  • Different styles
  • Drag & drop list
  • Drag & drop todos
  • Ajax configuration urls for todo CRUD
  • Checkboxes to mark/unmark todo as done
  • Powerful event management

Installation and dependencies.

LobiList is depended on jQuery, jQuery ui and bootstrap.

  • Download plugin source files or
  • run bower install lobilist --save to install using bower

1. Include necessary css/js files


<!DOCTYPE html>
<html>
   <head>
        <!--Default installation-->
        <link rel="stylesheet" href="lib/jquery/jquery-ui.min.css"/>
        <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css"/>
        <link rel="stylesheet" href="dist/lobilist.min.css">

        <!--Installation using bower. Preferred!!! -->
        <!--<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"/>-->
        <!--<link rel="stylesheet" href="bower_components/jquery-ui/themes/ui-lightness/jquery-ui.min.css"/>-->
        <!--<link rel="stylesheet" href="bower_components/lobilist/dist/lobilist.min.css"/>-->
   </head>

   <body>
        <!--Default installation-->
        <script src="lib/jquery/jquery.min.js"></script>
        <script src="lib/jquery/jquery-ui.min.js"></script>
        <script src="lib/jquery/jquery.ui.touch-punch-improved.js"></script>
        <script src="lib/bootstrap/js/bootstrap.min.js"></script>
        <script src="dist/lobilist.min.js"></script>

        <!--Installation using bower. Preferred!!! -->
        <!--<script src="bower_components/jquery/dist/jquery.min.js"></script>-->
        <!--<script src="bower_components/jquery-ui/jquery-ui.min.js"></script>-->
        <!--<script src="bower_components/jquery-ui-touch-punch-improved/jquery.ui.touch-punch-improved.js"></script>-->
        <!--<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>-->
        <!--<script src="bower_components/lobilist/dist/lobilist.min.js"></script>-->
   </body>
</html>

2. Initialize plugin

Create empty tag and call plugin

<div class="lobilist-demo"></div>
<script>
   $(function(){
        $('#lobilist-demo').lobiList({
            //Options go here
            ...
        });
    });
</script>

Options

Default options for all plugin instances

// Available style for lists
'listStyles': ['lobilist-default', 'lobilist-danger', 'lobilist-success', 'lobilist-warning', 'lobilist-info', 'lobilist-primary'],
// Default options for all lists
listsOptions: {
    id: false,
    title: '',
    items: []
},
// Default options for all todo items
itemOptions: {
    id: false,
    title: '',
    description: '',
    dueDate: '',
    done: false
},

lists: [],
// Urls to communicate to backend for todos
actions: {
    'load': '',
    'update': '',
    'insert': '',
    'delete': ''
},
// Whether to show checkboxes or not
useCheckboxes: true,
// Show/hide todo remove button
enableTodoRemove: true,
// Show/hide todo edit button
enableTodoEdit: true,
// Whether to make lists and todos sortable
sortable: true,
// Default action buttons for all lists
controls: ['edit', 'add', 'remove', 'styleChange'],
//List style
defaultStyle: 'lobilist-default',
// Whether to show lists on single line or not
onSingleLine: true


//Overriding default options
$.fn.lobiList.DEFAULT_OPTIONS = $.extend({}, $.fn.lobiList.DEFAULT_OPTIONS, {
    ... //override any options from default options
});
-->

Methods

Methods for LobiList can be called in two ways.

1. You can get the instance and call the method

//get the LobiList instance
var instance = $('#todo-lists-demo').data('lobiList');
//call the methods
instance.addList({
    title: 'TODO list',
    defaultStyle: 'lobilist-danger',
    useCheckboxes: false,
    item: [
        ...
    ]
});

2. Or you can call the method directly

$('#todo-lists-demo').lobiList('addList', {
    title: 'TODO list',
    defaultStyle: 'lobilist-danger',
    useCheckboxes: false,
    item: [
        ...
    ]
});
Name
Parameters
Return type
Description
addList(list) - Returns Just added List instance
Parameters
list - List|Object, The List instance to add
List - Just added List instance
Add new list
destroy - Returns LobiList.
Parameters none
LobiList
Destroy the LobiList
getNextId - Returns Integer
Parameters none
Integer
Get next id which will be assigned to new TODO

Methods for List

1. Grab the List instance from $lists array.

var $lobilist = $('selector').data('lobiList');
//$lobilist.$lists will contain all List instances in this list group
$lobilist.$lists[0].addItem({
    title: '',
    description: ''
});
2. Grab the each list container div which saves its List instance in its data-lobiList attribute. 
$('selector').lobiList({
    lists: [
        {
            id: 'todoList1',
            title: 'TODO',
            items: [
                ...
            ]
        }
    ]
});
var $list = $('#todoList1').data('lobiList');
$list.addItem({
    title: '',
    description: ''
});
Name
Parameters
Return type
Description
addItem(item, errorCallback) - Returns List
Parameters
item - Object, The item Object
errorCallback - Function, The callback which is called when server returned response but response.success=false
List
Add item. If action.insert url is provided request is sent to the server. Server response example: {"success": Boolean}. If response.success is true item is added. Otherwise errorCallback callback is called if it was provided.
updateItem(item, errorCallback) - Returns List
Parameters
item - Object, The item Object to update
errorCallback - Function, The callback which is called when server returned response but response.success=false
List
Update item. If action.update url is provided request is sent to the server. Server response example: {"success": Boolean}. If response.success is true item is updated. Otherwise errorCallback callback is called if it was provided.
deleteItem(item, errorCallback) - Returns List
Parameters
item - Object, The item Object to delete
errorCallback - Function, The callback which is called when server returned response but
List
Delete item from the list. If action.delete url is provided request is sent to the server. Server response example: {"success": Boolean} If response.success=true item is deleted from the list and afterItemDelete event if triggered. Otherwise errorCallback callback is called if it was provided.
saveOrUpdateItem(item, errorCallback) - Returns List
Parameters
item - Object, The item Object
errorCallback - Function, The callback which is called when server returned response but
List
If item does not have id, it is considered as new and is added to the list. If it has id it is updated. If update and insert actions are provided corresponding request is sent to the server
startTitleEditing - Returns List - instance
Parameters: none
List - instance
Start title editing
finishTitleEditing - Returns List - instance
Parameters: none
List - instance
Finish title editing
cancelTitleEditing - Returns List - instance
Parameters: none
List - instance
Cancel title editing
remove - Returns Just removed List instance
Parameters none
Just removed List instance
Remove list
editItem - Returns List instance
Parameters
id - String, The id of the item to start updating
List instance
Start editing of item
suppressEvents - Returns List instance
Parameters none
List instance
Suppress events. None of the events will be triggered until you call resumeEvents
resumeEvents - Returns List instance
Parameters none
List instance
Resume all events

Events

Name
Parameters
Description
init
Parameters:
LobiList - The LobiList instance
Fires when LobiList is initialized
beforeDestroy
Parameters:
LobiList - The LobiList to be destroyed
Fires before Lobilist is destroyed. Return false if you do not want LobiList to be destroyed.
afterDestroy
Parameters:
LobiList - The destroyed LobiList instance
Fires after Lobilist is destroyed.
beforeListAdd
Parameters:
LobiList - The LobiList instance
List - The List instance to be added
Fires before List is added to LobiList. Return false to prevent adding list.
afterListAdd
Parameters:
LobiList - The LobiList instance
List - Just added List instance
Fires after List is added to LobiList.
beforeListRemove
Parameters:
List - The List to be removed
Fires before List is removed. Returning false will prevent removing the list
afterListRemove
Parameters:
List - The remove List
Fires after List is removed
beforeItemAdd
Parameters:
List - The List in which the item is going to be added
Object - The item object
Fires before item is added in List. Return false if you want to prevent removing item
afterItemAdd
Parameters:
List - The List in which the item is added
Object - The item object
Fires after item is added in List
beforeItemUpdate
Parameters:
List - The List instance
Object - The item object which is going to be updated
Fires before item is updated. Returning false will prevent updating item
afterItemUpdate
Parameters:
List - The List object
Object - The updated item object
Fires after item is updated
beforeItemDelete
Parameters:
List - The List instance
Object - The item object to be deleted
Fires before item is deleted. Returning false will prevent deleting the item
afterItemDelete
Parameters:
List - The List object
Object - The deleted item object
Fires after item is deleted.
afterListReorder
Parameters:
LobiList - The LobiList instance
List - The List instance which changed its position
Fires after List position is changed among its siblings
afterItemReorder
Parameters:
List - The List instance
Object - The jQuery object of item
Fires after item position is changed (it is reordered) in list
afterMarkAsDone
Parameters:
List - The List instance
Object - The jQuery checkbox object
Fires after item is marked as done.
afterMarkAsUndone
Parameters:
List - The List instance
Object - The jQuery checkbox object
Fires after item is marked as undone
beforeAjaxSent
Parameters:
List - The List instance
Object - The jquery ajax parameters object. You can add additional headers or parameters
Fires before ajax call is sent to backend. This event is very useful is you want to add default parameters or headers to every request. Such as CSRF token parameter or Access Token header
-->

Examples

Basic example


$('selector').lobiList({
    lists: [
        {
            title: 'TODO',
            defaultStyle: 'lobilist-info',
            items: [
                {
                    title: 'Floor cool cinders',
                    description: 'Thunder fulfilled travellers folly, wading, lake.',
                    dueDate: '2015-01-31'
                },
                {
                    title: 'Periods pride',
                    description: 'Accepted was mollis',
                    done: true
                },
                {
                    title: 'Flags better burns pigeon',
                    description: 'Rowed cloven frolic thereby, vivamus pining gown intruding strangers prank treacherously darkling.'
                },
                {
                    title: 'Accepted was mollis',
                    description: 'Rowed cloven frolic thereby, vivamus pining gown intruding strangers prank treacherously darkling.',
                    dueDate: '2015-02-02'
                }
            ]
        },
        {
            title: 'DOING',
            items: [
                {
                    title: 'Composed trays',
                    description: 'Hoary rattle exulting suspendisse elit paradises craft wistful. Bayonets allures prefer traits wrongs flushed. Tent wily matched bold polite slab coinage celerities gales beams.'
                },
                {
                    title: 'Chic leafy'
                },
                {
                    title: 'Guessed interdum armies chirp writhes most',
                    description: 'Came champlain live leopards twilight whenever warm read wish squirrel rock.',
                    dueDate: '2015-02-04',
                    done: true
                }
            ]
        }
    ]
});

Custom datepicker

This example uses Bootstrap datepicker


$('selector').lobiList({
    lists: [
        {
            title: 'TODO',
            defaultStyle: 'lobilist-info',
            items: [
                {
                    title: 'Floor cool cinders',
                    description: 'Thunder fulfilled travellers folly, wading, lake.',
                    dueDate: '2015-01-31'
                }
            ]
        }
    ],
    afterListAdd: function(lobilist, list){
        var $dueDateInput = list.$el.find('form [name=dueDate]');
        $dueDateInput.datepicker();
    }
});

Event handling

$('selector').click(function () {
    list = $('#todo-lists-demo-events')
    .lobiList({
        init: function () {
            Lobibox.notify('default', {
                msg: 'init'
            });
        },
        beforeDestroy: function () {
            Lobibox.notify('default', {
                msg: 'beforeDestroy'
            });
        },
        afterDestroy: function () {
            Lobibox.notify('default', {
                msg: 'afterDestroy'
            });
        },
        beforeListAdd: function () {
            Lobibox.notify('default', {
                msg: 'beforeListAdd'
            });
        },
        afterListAdd: function () {
            Lobibox.notify('default', {
                msg: 'afterListAdd'
            });
        },
        beforeListRemove: function (list) {
            Lobibox.notify('default', {
                msg: 'beforeListRemove'
            });
        },
        afterListRemove: function () {
            Lobibox.notify('default', {
                msg: 'afterListRemove'
            });
        },
        beforeItemAdd: function () {
            Lobibox.notify('default', {
                msg: 'beforeItemAdd'
            });
        },
        afterItemAdd: function () {
            Lobibox.notify('default', {
                msg: 'afterItemAdd'
            });
        },
        beforeItemUpdate: function () {
            Lobibox.notify('default', {
                msg: 'beforeItemUpdate'
            });
        },
        afterItemUpdate: function () {
            Lobibox.notify('default', {
                msg: 'afterItemUpdate'
            });
        },
        beforeItemDelete: function () {
            Lobibox.notify('default', {
                msg: 'beforeItemDelete'
            });
        },
        afterItemDelete: function () {
            Lobibox.notify('default', {
                msg: 'afterItemDelete'
            });
        },
        beforeListDrop: function () {
            Lobibox.notify('default', {
                msg: 'beforeListDrop'
            });
        },
        afterListReorder: function () {
            Lobibox.notify('default', {
                msg: 'afterListReorder'
            });
        },
        beforeItemDrop: function () {
            Lobibox.notify('default', {
                msg: 'beforeItemDrop'
            });
        },
        afterItemReorder: function () {
            Lobibox.notify('default', {
                msg: 'afterItemReorder'
            });
        },
        afterMarkAsDone: function () {
            Lobibox.notify('default', {
                msg: 'afterMarkAsDone'
            });
        },
        afterMarkAsUndone: function () {
            Lobibox.notify('default', {
                msg: 'afterMarkAsUndone'
            });
        },
        lists: [
            {
                title: 'TODO',
                defaultStyle: 'lobilist-info',
                items: [
                    {
                        title: 'Floor cool cinders',
                        description: 'Thunder fulfilled travellers folly, wading, lake.',
                        dueDate: '2015-01-31'
                    },
                    {
                        title: 'Periods pride',
                        description: 'Accepted was mollis',
                        done: true
                    },
                    {
                        title: 'Flags better burns pigeon',
                        description: 'Rowed cloven frolic thereby, vivamus pining gown intruding strangers prank ' +
                        'treacherously darkling.'
                    },
                    {
                        title: 'Accepted was mollis',
                        description: 'Rowed cloven frolic thereby, vivamus pining gown intruding strangers prank ' +
                        'treacherously darkling.',
                        dueDate: '2015-02-02'
                    }
                ]
            }
        ]
    })
    .data('lobiList');
});

Custom controls

$('selector').lobiList({
    lists: [
        {
            title: 'TODO',
            defaultStyle: 'lobilist-info',
            controls: ['edit', 'styleChange'],
            items: [
                {
                    title: 'Floor cool cinders',
                    description: 'Thunder fulfilled travellers folly, wading, lake.',
                    dueDate: '2015-01-31'
                }
            ]
        },
        {
            title: 'Disabled custom checkboxes',
            defaultStyle: 'lobilist-danger',
            controls: ['edit', 'add', 'remove'],
            useLobicheck: false,
            items: [
                {
                    title: 'Periods pride',
                    description: 'Accepted was mollis',
                    done: true
                }
            ]
        },
        {
            title: 'Controls disabled',
            controls: false,
            items: [
                {
                    title: 'Composed trays',
                    description: 'Hoary rattle exulting suspendisse elit paradises craft wistful. ' +
                    'Bayonets allures prefer traits wrongs flushed. Tent wily matched bold polite slab coinage ' +
                    'celerities gales beams.'
                }
            ]
        },
        {
            title: 'Disabled todo edit/remove',
            enableTodoRemove: false,
            enableTodoEdit: false,
            items: [
                {
                    title: 'Composed trays',
                    description: 'Hoary rattle exulting suspendisse elit paradises craft wistful. ' +
                    'Bayonets allures prefer traits wrongs flushed. Tent wily matched bold polite slab coinage ' +
                    'celerities gales beams.'
                }
            ]
        }
    ]
});

Disabled drag & drop

$('selector').lobiList({
    sortable: false,
    lists: [
        {
            title: 'TODO',
            defaultStyle: 'lobilist-info',
            controls: ['edit', 'styleChange'],
            items: [
                {
                    title: 'Floor cool cinders',
                    description: 'Thunder fulfilled travellers folly, wading, lake.',
                    dueDate: '2015-01-31'
                }
            ]
        },
        {
            title: 'Controls disabled',
            controls: false,
            items: [
                {
                    title: 'Composed trays',
                    description: 'Hoary rattle exulting suspendisse elit paradises craft wistful. Bayonets allures prefer traits wrongs flushed. Tent wily matched bold polite slab coinage celerities gales beams.'
                }
            ]
        }
    ]
});
-->

Release Notes

  • v1.0.6
  • [bug] Fixed beforeItemDelete event bug.
  • [new] Added list styleChange event.
  • [new] Added list titleUpdate event.
  • [new] Added suppressEvents and resumeEvents methods.
  • [bug] Fixes several bugs.

VPS servers from 5$.

Easily deploy an SSD cloud server on @DigitalOcean in 55 seconds. Sign up using the following link and receive $10 in credit