The first step is to download ListExtender.js and import it along with any javascript using ListExtender into your html file.
Make sure you import ListExtender.js before any code that uses it.
<script defer type='text/javascript' src='https://julienbl.me/ListExtender/lib/ListExtender.min.js'></script>
The next step is to create your ListExtender object.
const myList = new ListExtender()
Finally, append your list to some parent container in the DOM
myList.appendTo('#containerId')
And that's it! You now have a working extending list in your website!
From here you can customize the list however you see fit. A good place to start would be setting the placeholder and input type.
myList.setPlaceholder('Placeholder Text')
myList.setInputType('text')
new ListExtender(options)
The ListExtender constructor takes an optional parameter, which is an options object. The properties of the options parameter determine the behaviour of the list.
The options object uses the following properties:
| Property | Default Value | Description |
|---|---|---|
| isUnordered | true | Determines whether the list is unordered or not |
| allowReorder | true | Determines whether users can drag and drop list items |
| showDeleteButton | false | Determines whether the delete button shows on the list |
All properties are optional and if not included will be replaced with the default value.
| Name | Description |
|---|---|
| element | The ul/ol element displayed in the DOM |
| maxSize | The maximum number of entries in the list |
| listSize | The number of elements in the list |
| Various styles.. | See styles tables below, use these to style your list! |
| delBtnThemes | Built-in themes for the delete button |
| Method Name | Params | Returns | Description |
|---|---|---|---|
| setInputType(type) | type: string Accepts following values: 'text' 'email' 'password' 'date' 'month' 'number' 'time' 'url' 'week' |
none | Sets the input type of list elements |
| setPlaceholder(placeholder) | placeholder: string | none | Sets the input field placeholder for list elements |
| setMinLength(minLength) | minLength: number | none | Sets the input field minimum length for list elements |
| setMaxLength(maxLength) | maxLength: number | none | Sets the input field maximum length for list elements |
| setId(id) | id: string | none | Sets the id of the list object |
| addClasses(classList) | classList: array[string] | none | Applies the given classes to the list object |
| removeClasses(classList) | classList: array[string] | none | Removes the given classes from the list object |
| addListItem() | none | none | Adds a new item to the list |
| addValidation(callback, errorMessage) | callback: function(value: string), errorMessage: string errorMessage is optional, callback function will be passed a string |
none | Adds a validation function to the list object. When validating, if function returns true validation will pass, else validation fails |
| addFromArray(data) | data: array[string] | none | Appends elements in data to the list |
| appendTo(query) | query: string A selector for querySelector |
none | Appends the list to the element matching query |
| addBefore(query) | query: string A selector for querySelector |
none | Places the list before the element matching query |
| addAfter(query) | query: string A selector for querySelector |
none | Places the list after the element matching query |
| getData() | none | array[string] | Returns all validated entries in the list |
| getAllData() | none | array[string] | Returns all entries in the list |
| setTheme(theme) | theme: object A theme object (see variables above) |
none | Sets the theme of the list to the given theme object |
| setDelBtnTheme(delBtnTheme) | delBtnTheme: object A theme object for delete buttons. See below for instructions on theming |
none | Sets the theme of the delete buttons in the list |