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")
 });


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):

  var itemManager = new Itemize();
  itemManager.apply({
    beforeRemove: (item) => {
      console.log(item);
      return true;
    }
  });

Example (Asynchronous):

  var itemManager = new Itemize();
  itemManager.apply({
    beforeRemove: (item) => {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          console.log(item)
          resolve();
        }, 500);
      });
    }
  });
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.