Easy List Manipulation JavaScript Library – ListExtender.js

Preview:

Description:

ListExtender.js is a simple list manipulation JavaScript library that can be used to add, remove, edit, sort, validate, get items in a list view.

Features:

• Double click list items to edit.
• Add new list items with an input field.
• Sort list items via drag and drop.
• Optional Delete button for each list item.
• 8 themes.

How to use it:

1. Load the ListExtender JavaScript library in the HTML.

<script src="js/ListExtender.js"></script>

2. Create a new instance of the List Extender.

const myList = new ListExtender();

3. Insert the list into your content.

myList.addAfter('#myList h2');

4. Set the placeholder of the input field.

myList.setPlaceholder('Type something here!');

5. Set the initial list items using the addFromArray method.

myList.addFromArray(['CSSScript', 'jQueryScript', 'Google.com', 'Facebook.com']);

6. Apply a custom validator to the list.

myList.validateList.addValidation(value => {
  return (value.match(/\d{4}-\d{2}-\d{2}/) && value.match(/\d{4}-\d{2}-\d{2}/)[0] === value) ||
  (value.match(/\d{2}\/\d{2}\/\d{4}/) && value.match(/\d{2}\/\d{2}\/\d{4}/)[0] === value) ||
  (value.match(/\d{8}/) && value.match(/\d{8}/)[0] === value)
}, 'Please follow specified format!!')

7. Set the list theme. Available themes:

• simpleLight
• simpleDark
• cream
• hacker
• underwater
• MLA
• PuTTY
• emoji

myList.setTheme(themeName);

8. Available options.

const myList = new ListExtender({
      // is unordered list
      isUnordered: true,
      // allows sortable
      allowReorder: true,
      // shows delete button
      showDeleteButton: false,
      
});

9. More API methods.

// set the input type:
// 'text'
// 'email'
// 'password'
// 'date'
// 'month'
// 'number'
// 'time'
// 'url'
// 'week'
myList.setInputType(type)
// set the minimum length of the input field
myList.setMinLength(minLength);
// set the maximum length of the input field
myList.setMaxLength(maxLength);
// apply a unique ID to the lsit
myList.setId(id);
// apply additional CSS classes to the list
myList.addClasses(classList);
// remove CSS classes from the list
myList.removeClasses(classList);
// add a new item to the list
myList.addListItem();
// append the list before the element
myList.addBefore(query);
// get data
myList.getData();
myList.getAllData();