Options
ignoreOnClick
Type: Array
Default: ['input', 'textarea', 'select', 'option', 'button']

Selectors of DOM elements to be ignored when pressed. Children of selected elements are also ignored.

Uses CSS syntax, for example:

'button'
All HTML elements with tag name 'button' will be ignored.
'#someid'
The HTML element with id 'someid' will be ignored.
'.someclass'
All HTML elements with class 'someclass' will be ignored.

Selectors may also be combined, for example:

'button.ignore'
All HTML elements with tag name 'button' and class 'ignore' will be ignored.
'#someid.ignore'
The HTML element with id 'someid' will be ignored if, when pressed, it has the class 'ignore'.
'.someclass.ignore'
All HTML elements with classes 'someclass' and 'ignore' will be ignored.
EXAMPLE JS
var props = {
    ignoreOnClick: ['button.ignore', '#someid.ignore', '.someclass.ignore']
};
lithiumlist.attachToList(
    ...,
    props
);
leftButtonClass
Type: String
Default: 'left-button'

The class name of DOM elements that will act as buttons to trigger an automatic full left slide of the list item.

EXAMPLE JS
var props = {
    leftButon: 'button-left'
};
lithiumlist.attachToList(
    ...,
    props
);
leftBySwipe
Type: Boolean
Default: true

Enable or disable swiping list items to the left.

EXAMPLE JS
var props = {
    leftBySwipe: false
};
lithiumlist.attachToList(
    ...,
    props
);
leftCloneClass
Type: String
Default: 'left-clone'

The active list item is cloned during sorting and sliding. This option sets a class name that is added to the clone during left sliding.

EXAMPLE JS
var props = {
    leftCloneClass: 'clone-left'
};
lithiumlist.attachToList(
    ...,
    props
);
leftCloneSlideBackClass
Type: String
Default: 'left-clone-slide-back'

The active list item is cloned during sorting and sliding. This option sets a class name that is added to the clone while it is sliding back to its starting position at the end of a left slide.

EXAMPLE JS
var props = {
    leftCloneSlideBackClass: 'back-slide-clone-left'
};
lithiumlist.attachToList(
    ...,
    props
);
leftCloneSlideOutClass
Type: String
Default: 'left-clone-slide-out'

The active list item is cloned during sorting and sliding. This option sets a class name that is added to the clone while it is sliding out of the list at the end of a left slide.

EXAMPLE JS
var props = {
    leftCloneSlideOutClass: 'out-slide-clone-left'
};
lithiumlist.attachToList(
    ...,
    props
);
leftEnabled
Type: Boolean
Default: true

Enable or disable sliding list items to the left. If set to false, swiping a list item to the left or pressing a left button will do nothing.

EXAMPLE JS
var props = {
    leftEnabled: false
};
lithiumlist.attachToList(
    ...,
    props
);
leftItemActiveClass
Type: String
Default: 'left-item-active'

A class name that is added to the active list item during left sliding.

EXAMPLE JS
var props = {
    leftItemActiveClass: 'active-item-left'
};
lithiumlist.attachToList(
    ...,
    props
);
leftListClass
Type: String
Default: 'left-list'

A class name that is added to listCont when a list item begins sliding to the left (either via a swipe or because a left button was pressed).

EXAMPLE JS
var props = {
    leftListClass: 'list-left'
};
lithiumlist.attachToList(
    ...,
    props
);
leftMasks
Type: Array
Default:
[{
    background: 'rgba(252, 13, 27, 1)',
    classNameDefault: 'left-mask',
    classNameSlideOut: 'left-mask-slide-out',
    classNameSlideBack: 'left-mask-slide-back',
    childNode: null
}]

An array of objects, each of which contains the properties of a mask that will cover the active list item during left sliding. Currently, only the first element in the array is used. All others are ignored. If the array is empty, no mask will appear during left sliding.

Each object must have the following properties:

background
Type: String
A value that is set as the mask's 'background' style.
classNameDefault
Type: String
A class name that is added to the mask.
classNameSlideOut
Type: String
A class name that is added to the mask while the clone is sliding out of the list.
classNameSlideBack
Type: String
A class name that is added to the mask while the clone is sliding back to its starting position.
childNode
Type: Element
An HTML element (which way contain child elements) that is appended to the mask. Useful for inserting an icon or label indicating to the user what left sliding will do.
EXAMPLE JS
var props = {
    leftMasks: [{
        background: 'rgba(252, 13, 27, 1)',
        classNameDefault: 'mask-left',
        classNameSlideOut: 'out-slide-mask-left',
        classNameSlideBack: 'back-slide-mask-left',
        childNode: null
    }]
};
lithiumlist.attachToList(
    ...,
    props
);
leftOuterClass
Type: String
Default: 'left-outer'

A class name that is added to outerCont when a list item begins sliding to the left (either via a swipe or because a left button was pressed). Has no effect if outerCont is window.

EXAMPLE JS
var props = {
    leftOuterClass: 'outer-left'
};
lithiumlist.attachToList(
    ...,
    props
);
leftSlideBackDuration
Type: Integer
Default: 200

The duration, in milliseconds, of the left slide back animation.

EXAMPLE JS
var props = {
    leftSlideBackDuration: 300
};
lithiumlist.attachToList(
    ...,
    props
);
leftSlideOutDuration
Type: Integer
Default: 300

The duration, in milliseconds, of the left slide out animation.

EXAMPLE JS
var props = {
    leftSlideOutDuration: 400
};
lithiumlist.attachToList(
    ...,
    props
);
leftSwipeEndThreshold
Type: String
Default: '30%'

The threshold at which a left swipe will, when released, slide out. Must be a percentage (for example, '30%') or a number of pixels (for example, '20px'). In either case, it is measured from the right edge of listCont.

EXAMPLE JS
var props = {
    leftSwipeEndThreshold: '40%'
};
lithiumlist.attachToList(
    ...,
    props
);
leftSwipeStartThreshold
Type: String
Default: '20px'

The threshold at which a left swipe will start moving the item. Must be a percentage (for example, '5%') or a number of pixels (for example, '10px'). In either case, it is measured from the right edge of listCont.

EXAMPLE JS
var props = {
    leftSwipeStartThreshold: '30px'
};
lithiumlist.attachToList(
    ...,
    props
);
rightButtonClass
Type: String
Default: 'right-button'

The class name of DOM elements that will act as buttons to trigger an automatic full right slide of the list item.

EXAMPLE JS
var props = {
    rightButon: 'button-right'
};
lithiumlist.attachToList(
    ...,
    props
);
rightBySwipe
Type: Boolean
Default: true

Enable or disable swiping list items to the right.

EXAMPLE JS
var props = {
    rightBySwipe: false
};
lithiumlist.attachToList(
    ...,
    props
);
rightCloneClass
Type: String
Default: 'right-clone'

The active list item is cloned during sorting and sliding. This option sets a class name that is added to the clone during right sliding.

EXAMPLE JS
var props = {
    rightCloneClass: 'clone-right'
};
lithiumlist.attachToList(
    ...,
    props
);
rightCloneSlideBackClass
Type: String
Default: 'right-clone-slide-back'

The active list item is cloned during sorting and sliding. This option sets a class name that is added to the clone while it is sliding back to its starting position at the end of a right slide.

EXAMPLE JS
var props = {
    rightCloneSlideBackClass: 'back-slide-clone-right'
};
lithiumlist.attachToList(
    ...,
    props
);
rightCloneSlideOutClass
Type: String
Default: 'right-clone-slide-out'

The active list item is cloned during sorting and sliding. This option sets a class name that is added to the clone while it is sliding out of the list at the end of a right slide.

EXAMPLE JS
var props = {
    rightCloneSlideOutClass: 'out-slide-clone-right'
};
lithiumlist.attachToList(
    ...,
    props
);
rightEnabled
Type: Boolean
Default: true

Enable or disable sliding list items to the right. If set to false, swiping a list item to the right or pressing a right button will do nothing.

EXAMPLE JS
var props = {
    rightEnabled: false
};
lithiumlist.attachToList(
    ...,
    props
);
rightItemActiveClass
Type: String
Default: 'right-item-active'

A class name that is added to the active list item during right sliding.

EXAMPLE JS
var props = {
    rightItemActiveClass: 'active-item-right'
};
lithiumlist.attachToList(
    ...,
    props
);
rightListClass
Type: String
Default: 'right-list'

A class name that is added to listCont when a list item begins sliding to the right (either via a swipe or because a right button was pressed).

EXAMPLE JS
var props = {
    rightListClass: 'list-right'
};
lithiumlist.attachToList(
    ...,
    props
);
rightMasks
Type: Array
Default:
[{
    background: 'rgba(15, 127, 18, 1)',
    classNameDefault: 'right-mask',
    classNameSlideOut: 'right-mask-slide-out',
    classNameSlideBack: 'right-mask-slide-back',
    childNode: null
}]

An array of objects, each of which contains the properties of a mask that will cover the active list item during right sliding. Currently, only the first element in the array is used. All others are ignored. If the array is empty, no mask will appear during right sliding.

Each object must have the following properties:

background
Type: String
A value that is set as the mask's 'background' style.
classNameDefault
Type: String
A class name that is added to the mask.
classNameSlideOut
Type: String
A class name that is added to the mask while the clone is sliding out of the list.
classNameSlideBack
Type: String
A class name that is added to the mask while the clone is sliding back to its starting position.
childNode
Type: Element
An HTML element (which way contain child elements) that is appended to the mask. Useful for inserting an icon or label indicating to the user what right sliding will do.
EXAMPLE JS
var props = {
    rightMasks: [{
        background: 'rgba(15, 127, 18, 1)',
        classNameDefault: 'mask-right',
        classNameSlideOut: 'out-slide-mask-right',
        classNameSlideBack: 'back-slide-mask-right',
        childNode: null
    }]
};
lithiumlist.attachToList(
    ...,
    props
);
rightOuterClass
Type: String
Default: 'right-outer'

A class name that is added to outerCont when a list item begins sliding to the right (either via a swipe or because a right button was pressed). Has no effect if outerCont is window.

EXAMPLE JS
var props = {
    rightOuterClass: 'outer-right'
};
lithiumlist.attachToList(
    ...,
    props
);
rightSlideBackDuration
Type: Integer
Default: 200

The duration, in milliseconds, of the right slide back animation.

EXAMPLE JS
var props = {
    rightSlideBackDuration: 300
};
lithiumlist.attachToList(
    ...,
    props
);
rightSlideOutDuration
Type: Integer
Default: 300

The duration, in milliseconds, of the right slide out animation.

EXAMPLE JS
var props = {
    rightSlideOutDuration: 400
};
lithiumlist.attachToList(
    ...,
    props
);
rightSwipeEndThreshold
Type: String
Default: '30%'

The threshold at which a right swipe will, when released, slide out. Must be a percentage (for example, '30%') or a number of pixels (for example, '20px'). In either case, it is measured from the right edge of listCont.

EXAMPLE JS
var props = {
    rightSwipeEndThreshold: '40%'
};
lithiumlist.attachToList(
    ...,
    props
);
rightSwipeStartThreshold
Type: String
Default: '20px'

The threshold at which a right swipe will start moving the item. Must be a percentage (for example, '5%') or a number of pixels (for example, '10px'). In either case, it is measured from the right edge of listCont.

EXAMPLE JS
var props = {
    rightSwipeStartThreshold: '30px'
};
lithiumlist.attachToList(
    ...,
    props
);
safariAutoOuterOverflow
Type: Boolean
Default: true

Applies only to desktop Safari. Ignored in all other browsers.

Setting overflow: hidden on outerCont fixes an issue in desktop Safari that interferes with automatic scrolling. By default, Lithium List applies this fix during automatic scrolling. In the unlikely event this behaviour is undesireable, set this option to false.

EXAMPLE JS
var props = {
    safariAutoOuterOverflow: false
};
lithiumlist.attachToList(
    ...,
    props
);
safariBodyUnselectable
Type: Boolean
Default: true

Applies only to desktop Safari. Ignored in all other browsers.

Setting user-select: none on the <body> element fixes an issue in desktop Safari regarding text selection outside of outerCont during sorting and swiping. By default, Lithium List applies this fix during these operations. In the unlikely event this behaviour is undesireable, set this option to false.

EXAMPLE JS
var props = {
    safariBodyUnselectable: false
};
lithiumlist.attachToList(
    ...,
    props
);
sortByLongPress
Type: Boolean
Default: true

Enable or disable sorting by long-pressing on an item.

EXAMPLE JS
var props = {
    sortByLongPress: false
};
lithiumlist.attachToList(
    ...,
    props
);
sortCloneBoxShadow
Type: String
Default: '0 5px 14px rgba(0,0,0,0.15), 0 6px 6px rgba(0,0,0,0.12)'

The active list item is cloned during sorting and sliding. This value is set as the 'box-shadow' style of the clone during sorting.

EXAMPLE JS
var props = {
    sortCloneBoxShadow: '0 5px 20px rgba(0,0,0,0.5)'
};
lithiumlist.attachToList(
    ...,
    props
);
sortCloneClass
Type: String
Default: 'sort-clone'

The active list item is cloned during sorting and sliding. This option sets a class name that is added to the clone during sorting.

EXAMPLE JS
var props = {
    sortCloneClass: 'clone-sort'
};
lithiumlist.attachToList(
    ...,
    props
);
sortCloneMaxOverhang
Type: String
Default: '50%'

The active list item is cloned during sorting and sliding. This option sets the maximum amount by which the clone can overhang the top or bottom of the list during sorting. Must be a percentage (for example, '75%'), a number of pixels (for example, '20px') or null. If it is a percentage, it is measured as a percentage of the height of the clone. If it is null, no maximum overhang is enforced.

EXAMPLE JS
var props = {
    sortCloneMaxOverhang: '75%'
};
lithiumlist.attachToList(
    ...,
    props
);
sortCloneScale
Type: String
Default: '1.02'

The active list item is cloned during sorting and sliding. This value is set as the 'transform: scale()' style of the clone during sorting. To prevent scaling of the clone, set this to '1'.

EXAMPLE JS
var props = {
    sortCloneScale: '1'
};
lithiumlist.attachToList(
    ...,
    props
);
sortDragHandleClass
Type: String
Default: 'sort-drag-handle'

The class name of DOM elements that will act as drag handles for sorting.

EXAMPLE JS
var props = {
    sortDragHandleClass: 'handle-drag-sort'
};
lithiumlist.attachToList(
    ...,
    props
);
sortEnabled
Type: Boolean
Default: true

Enable or disable sorting of items. If set to false, long-pressing an item or pressing its drag handle will do nothing.

EXAMPLE JS
var props = {
    sortEnabled: false
};
lithiumlist.attachToList(
    ...,
    props
);
sortEndDuration
Type: Integer
Default: 300

The active list item is cloned during sorting and sliding. At the end of sorting the clone animates to its final position. This option sets the duration of that animation.

EXAMPLE JS
var props = {
    sortEndDuration: 400
};
lithiumlist.attachToList(
    ...,
    props
);
sortItemActiveClass
Type: String
Default: 'sort-item-active'

A class name that is added to the active list item during sorting.

EXAMPLE JS
var props = {
    sortItemActiveClass: 'active-item-sort'
};
lithiumlist.attachToList(
    ...,
    props
);
sortItemActiveHide
Type: Boolean
Default: true

Enable or disable automatic hiding of the active list item during sorting. If this option is set to true, the 'visibility' style of the active list item is set to 'hidden' during sorting, and 'visible' at other times.

EXAMPLE JS
var props = {
    sortItemActiveHide: false
};
lithiumlist.attachToList(
    ...,
    props
);
sortListClass
Type: String
Default: 'sort-list'

A class name that is added to listCont during sorting.

EXAMPLE JS
var props = {
    sortListClass: 'list-sort'
};
lithiumlist.attachToList(
    ...,
    props
);
sortMoveStartDelay
Type: Integer
Default: 400

The duration, in milliseconds, of the long-press required to start sorting an item. Does not apply to pressing a sort drag handle.

EXAMPLE JS
var props = {
    sortMoveStartDelay: 800
};
lithiumlist.attachToList(
    ...,
    props
);
sortOuterClass
Type: String
Default: 'sort-outer'

A class name that is added to outerCont during sorting. Has no effect if outerCont is window.

EXAMPLE JS
var props = {
    sortOuterClass: 'outer-sort'
};
lithiumlist.attachToList(
    ...,
    props
);
sortScrollEnabled
Type: Boolean
Default: true

Enable or disable automatic scrolling during sorting of items.

EXAMPLE JS
var props = {
    sortScrollEnabled: false
};
lithiumlist.attachToList(
    ...,
    props
);
sortScrollSpeed
Type: Integer
Default: 3

Sets the speed of automatic scrolling: 1 (slowest) to 5 (fastest).

EXAMPLE JS
var props = {
    sortScrollSpeed: 1
};
lithiumlist.attachToList(
    ...,
    props
);
sortStartDuration
Type: Integer
Default: 300

The active list item is cloned during sorting and sliding. At the start of sorting the clone's scale animates to sortCloneScale. This option sets the duration of that animation.

EXAMPLE JS
var props = {
    sortStartDuration: 400
};
lithiumlist.attachToList(
    ...,
    props
);
sortReorderDuration
Type: Integer
Default: 200

During sorting, list items animate to new positions. This option sets the duration of that animation.

EXAMPLE JS
var props = {
    sortReorderDuration: 300
};
lithiumlist.attachToList(
    ...,
    props
);