Public Methods
apply
cancel
Options
dragAndDrop
removeBtn
removeBtnClass
removeBtnWidth
removeBtnThickness
removeBtnColor
removeBtnHoverColor
removeBtnBgColor
removeBtnBgHoverColor
removeBtnSharpness
removeBtnPosition
removeBtnMargin
removeBtnCircle
modalConfirm
modalText
showRemoveNotifications
showAddNotifications
removeNotificationText
addNotificationText
notificationPosition
notificationTimer
anim
animEasing
animDuration
animRemoveTranslateX
animRemoveTranslateY
animAddTranslateX
animAddTranslateY
beforeRemove
outlineItemOnHover
nestingLevel
itemizeAddedElement
onAddItem
Public Properties
containers
items
globalOptions
apply(targets, options)
Apply itemization of targeted containers.
Arguments:
| Name | Type | Default | Description |
|---|---|---|---|
| targets | String | "[itemize]" |
Regular javascript "querySelectorAll" syntax. Example: ".container" or ".container, #special_container". If no target is specified, default targets will be elements with the "itemize" attribute. |
| options | Object | Default properties are listed below | Custom options |
Important: if you want to exclude a DOM element from being itemized simply add "notitemize" to its attributes.
cancel(targets)
Cancel itemization of targeted containers.
Arguments:
| Name | Type | Default | Description |
|---|---|---|---|
| targets | String | "[itemize]" | Regular javascript "querySelectorAll" syntax. Example: ".container" or ".container, #special_container". If no target is specified, default targets will be elements with the "itemize" attribute. |
Options
(Object) Argument of the public method "apply".
All the properties (except "beforeRemove" and "onAddItem") can be set
in the HTML with attributes. Attributes have priority over custom options.
Example:
<div itemize class="container" modalConfirm="true" modalText="Are you really sure?" notificationTimer="2000">
Or in the "apply" function's arguments.
Example:
var itemManager = new Itemize();
itemManager.apply(".container", {
modalConfirm: true,
modalText: "Are you really sure?",
notificationTimer: 2000
});
// It also works without specifying a target (it will target all elements with the "itemize" attribute):
itemManager.apply({
modalConfirm: true,
modalText: "Are you really sure?",
notificationTimer: 2000
});
Global options can be specified at initialisation. However, options specified with the "apply" function or in
HTML
attributes have priority over global options
Example:
var itemManager = new Itemize({
modalConfirm: true,
modalText: "Are you really sure?",
notificationTimer: 2000
});
itemManager.apply(".container")
});
<div itemize class="container" modalConfirm="true" modalText="Are you really sure?" notificationTimer="2000">
var itemManager = new Itemize();
itemManager.apply(".container", {
modalConfirm: true,
modalText: "Are you really sure?",
notificationTimer: 2000
});
// It also works without specifying a target (it will target all elements with the "itemize" attribute):
itemManager.apply({
modalConfirm: true,
modalText: "Are you really sure?",
notificationTimer: 2000
});
var itemManager = new Itemize({
modalConfirm: true,
modalText: "Are you really sure?",
notificationTimer: 2000
});
itemManager.apply(".container")
});Properties:
| Name | Type | Default | Description |
|---|---|---|---|
| dragAndDrop | Boolean | false | If true then enables items to be sortable. Drag and drop an item to a new spot, and the other items will reorganize themselves. | removeBtn | Boolean | true | If true then the default remove button will be used. If false and removeBtnClass is not specified, a click on the item itself will remove it. |
| removeBtnClass | String | null | If specified then replace the default remove button with your custom button, targeted by the specified class. |
| removeBtnWidth | Number | 20 | The width of the remove button. |
| removeBtnThickness | Number | 2 | The thickness of the cross icon. |
| removeBtnColor | String | #565C67 | The color of the cross icon. |
| removeBtnHoverColor | String | #ffffff | The color of the cross icon on hover. |
| removeBtnBgColor | String | rgba(200, 200, 200, 0.5) | The background color of the remove button. |
| removeBtnBgHoverColor | String | #959595 | The background color of the remove button on hover. |
| removeBtnSharpness | String | 0% | The sharpness of the cross icon's edges. (in "px" or "%") |
| removeBtnPosition | String | top-right | The position of the remove button. Accepted values: "top-right", "center-right", "bottom-right", "bottom-center", "bottom-left", "center-left", "top-left", "top-center". |
| removeBtnMargin | Number | 2 | The margin of the remove button. |
| removeBtnCircle | Boolean | true | If true then the remove button's border will be a circle. |
| modalConfirm | Boolean | false | If true then a confirm modal will pop on every remove button click. |
| modalText | String | Are you sure to remove this item? | Specifies the text to display in the confirm box. |
| showRemoveNotifications | Boolean | false | If true then a notification message will pop for every removed item. |
| showAddNotifications | Boolean | false | If true then a notification message will pop for every added item. |
| removeNotificationText | String | Item removed | Specifies the text to display in the notification message for removed items. |
| addNotificationText | String | Item added | Specifies the text to display in the notification message for added items. |
| notificationPosition | String | bottom-right | The position of the notification messages. Accepted values: "top-right", "center-right", "bottom-right", "bottom-center", "bottom-left", "center-left", "top-left", "top-center". |
| notificationTimer | Number | 4000 | The time (in millisecond) to wait before the notification message disappears. |
| anim | Boolean | true | If false then turn off all animations. |
| animEasing | String | ease-in-out | Animation easing. Only accepts the pre-defined values "linear", "ease", "ease-in", "ease-out", and "ease-in-out", or a custom "cubic-bezier" value like "cubic-bezier(0.42, 0, 0.58, 1)". |
| animDuration | Number | 500 | Animation duration in millisecond. |
| animRemoveTranslateX | Number | 0 | Horizontal translation value (from 0 to "animRemoveTranslateX" ) of the animation when an item is removed. |
| animRemoveTranslateY | Number | -100 | vertical translation value (from 0 to "animRemoveTranslateY" ) of the animation when an item is removed. |
| animAddTranslateX | Number | 0 | Horizontal translation value (from "animAddTranslateX" to 0) of the animation when an item is added. |
| animAddTranslateY | Number | -100 | vertical translation value (from animAddTranslateY to 0) of the animation when an item is added. |
| outlineItemOnHover | Boolean | false | highlight item when you hover your mouse over the remove button. |
| nestingLevel | Number | 1 | Controls the nesting level of the itemization. A nestingLevel of 2 will also itemize the children of the target's children and so on. |
| itemizeAddedElement | Boolean | true | If false then disable the automatic itemization of new added DOM elements of an itemized container. |
| beforeRemove | Function | null |
Function called when an item is about to be removed. The item to remove (DOM element) is passed as
argument. Synchronous: You have to return "true" if you want to actually remove the item or "false" if you don't want to remove it. Asynchronous: You have to return a new promise and call resolve() if you want to actually remove the item or reject() if you don't want to remove it. Example (Synchronous):
Example (Asynchronous):
|
| onAddItem | Function | null | Function called when an item is added. The added item (DOM element) is passed as argument. |
Public properties
| Name | Type | Description |
|---|---|---|
| containers | Array | Array of itemized containers |
| items | Array | Array of items |
| globalOptions | Object | Options applied globally. Can be specified at the initialization of the Itemize object. Local options specified in the arguments of the "apply" function or in the HTML attributes have priority over global options. |
