Action Items Component

`buildfire.components.actionItems`#

This component simplifies the development of the management controls when adding Action Items. Used on the Control side of a plugin, it allows the app owner to add, edit, delete and sort action items.

This name space consists of one major class:

sortableList which is the class that instantiates the editor component typically used on the control side to add, edit and delete action items.

Requirements#

Control#

<head>
  <!-- Load helper.css to use our helper classes -->
  <link href="../../../../styles/helper.css" rel="stylesheet" />
  <link href="../../../../styles/siteIcons.css" rel="stylesheet" />

  <!-- JS -->
  <script src="../../../../scripts/buildfire.js"></script>
  <script src="../../../../scripts/sortable.min.js"></script>
  <script src="../../../../scripts/buildfire/components/actionItems/sortableList.js"></script>
</head>

`sortableList`#

Class instance for Sortable List. Typically used on the control side to add, edit and delete action items and handle

Editor

In your controller body create an html container element for sortable list

<body>
  <div class="sortable-list"></div>
</body>

Methods#

`sortableList()`
#

let sortableList = new buildfire.components.actionItems.sortableList(selector, items);

Sortable list class constructor method.

let sortableList = new buildfire.components.actionItems.sortableList(
  ".sortable-list",
  []
);

For full example see https://github.com/BuildFire/simpleBuildFireJSExamples/blob/master/exampleActionItems/control/content/index.html

Arguments#

Name	Type	Required	Description	Default
`selector`	string	yes	Css selector of element that will contain the sortable list
`items`	[object]	no	Optional array of items to be preloaded into sortable list. For possilble objects see Action Items

`sortableList.init()`
#

sortableList.init()

Initializes the sortable list component.

let sortableList = new buildfire.components.actionItems.sortableList(
  ".sortable-list"
);

sortableList.init();

`sortableList.loadItems()`
#

sortableList.loadItems(items, appendItems)

Loads new items into the list

let sortableList = new buildfire.components.actionItems.sortableList(
  ".sortable-list"
);

sortableList.loadItems([
  {
    title: "build fire",
    url: "https://www.facebook.com/buildfireapps",
    action: "linkToWeb",
    openIn: "_blank",
  },
]);

Arguments#

Name	Type	Required	Description	Default
`items`	[object]	yes	Array of items to be loaded into sortable list. For possilble objects see Action Items
`appendItems`	boolean	no	If `true` it will append items to list, otherwise it will replace the list	`false`

`sortableList.append()`
#

sortableList.append(items)

Appends an item or many items to the list

let sortableList = new buildfire.components.actionItems.sortableList(
  ".sortable-list"
);

sortableList.append([
  {
    title: "build fire",
    url: "https://www.facebook.com/buildfireapps",
    action: "linkToWeb",
    openIn: "_blank",
  },
]);

Arguments#

Name	Type	Required	Description	Default
`items`	[object] \| object	yes	Array of items, or sigle item to be appended to sortable list. For possilble objects see Action Items

`sortableList.clear()`
#

sortableList.clear()

Clears the sortable list

let sortableList = new buildfire.components.actionItems.sortableList(
  ".sortable-list"
);

sortableList.clear();

Handlers#

Handlers are overridable functions that serve as event listener when items are added, edited removed or reordered.

tip

You can use handler methods to persist data to datastore

`sortableList.onItemChange()`
#

sortableList.onItemChange(item, index)

Will be triggered when item in list is edited

let sortableList = new buildfire.components.actionItems.sortableList(
  ".sortable-list"
);

sortableList.onItemChange = (item, index) => {
  console.log(`Item on index ${index} changed`, item);
};

Arguments#

Name	Type	Description
`item`	object	Action item object. See Action Items
`index`	number	Action item index in list

`sortableList.onOrderChange()`
#

sortableList.onOrderChange(item, oldIndex, newIndex)

Will be triggered when item in list is reordered

let sortableList = new buildfire.components.actionItems.sortableList(
  ".sortable-list"
);

sortableList.onOrderChange = (item, oldIndex, newIndex) => {
  console.log("Item", item, `reordered from ${oldIndex} to ${newIndex}`);
};

Arguments#

Name	Type	Description
`item`	object	Action item object. See Action Items
`oldIndex`	number	Old action item index in list
`newIndex`	number	New action item index in list

`sortableList.onAddItems()`
#

sortableList.onAddItems(items)

Will be triggered when new item is added to list, item index will be items.length

let sortableList = new buildfire.components.actionItems.sortableList(
  ".sortable-list"
);

sortableList.onAddItems = (items) => {
  console.log("New item added. Items are", items);
};

Arguments#

Name	Type	Description
`items`	object	Array of action item objects. See Action Items

`sortableList.onDeleteItem()`
#

sortableList.onDeleteItem(item, index)

Will be triggered when item is deleted from the list

let sortableList = new buildfire.components.actionItems.sortableList(
  ".sortable-list"
);

sortableList.onDeleteItem = (item, index) => {
  console.log(
    `Item was delted from the list on index ${index}. Item was`,
    item
  );
};

Arguments#

Name	Type	Description
`item`	object	Array of action item objects. See Action Items
`index`	number	Index of delted item

buildfire.components.actionItems#

Requirements#

Control#

sortableList#

Methods#

sortableList() #

Arguments#

sortableList.init() #

sortableList.loadItems() #

Arguments#

sortableList.append() #

Arguments#

sortableList.clear() #

Handlers#

tip

sortableList.onItemChange() #

Arguments#

sortableList.onOrderChange() #

Arguments#

sortableList.onAddItems() #

Arguments#

sortableList.onDeleteItem() #

Arguments#

`buildfire.components.actionItems`#

`sortableList`#

`sortableList()`
#

`sortableList.init()`
#

`sortableList.loadItems()`
#

`sortableList.append()`
#

`sortableList.clear()`
#

`sortableList.onItemChange()`
#

`sortableList.onOrderChange()`
#

`sortableList.onAddItems()`
#

`sortableList.onDeleteItem()`
#