Installation

Download the latest build and link the minified files in your HTML file's head section. You will also need MaterializeCSS, Google's Material Icon Font and jQuery.

<!-- Link to MaterializeCSS, Material Icon Font and jQuery -->

<link rel="stylesheet" href="materialize-collection-actions-VERSION.min.css">
<script src="materialize-collection-actions-VERSION.min.js"></script>

Usage

Each collection that should receive actions has to be configured. This is done with MaterializeCollectionActions.configureActions. The examples below show how to use this function. New collection items do not need to be registered separately.

To remove all actions from a collection simply call MaterializeCollectionActions.removeActions with the collection to remove the actions from as the first argument. This can, again, be a jQuery or DOM element.

INFO: The action names directly correspond with the material icon used.

IMPORTANT: The content of the collection items can only be text. After a collection has been configured the text is automatically moved to each item's data-mca-text attribute. If the text of an item needs to be retrieved or modified you must use this attribute. Using the content of the item element will result in unwanted behaviour.

Single Action

By default the action is only visible when the user hovers above the collection item. In this example pressing the action icon will remove the appropriate item from the collection.

Item 1 Item 2 Item 3 Item 4

<div id="collection-id" class="collection">
    <a href="#!" class="collection-item">Item 1</a>
    <a href="#!" class="collection-item">Item 2</a>
    <a href="#!" class="collection-item">Item 3</a>
    <a href="#!" class="collection-item">Item 4</a>
</div>

$(document).ready(function() {
   MaterializeCollectionActions.configureActions($('#collection-id'), [
        {
            name: 'delete',
            callback: function (collectionItem, collection) {
                $(collectionItem).remove();
            }
        }
    ]);
});

Multiple Actions

Here you can see multiple actions being used. The brush will change the item background to a random color out of the colors array and the refresh icon will reset the background color The bin will, again, remove the item. Note that the the icons in the array are displayed from right to left.

Item 1 Item 2 Item 3 Item 4

<div id="collection-id" class="collection">
    <a href="#!" class="collection-item">Item 1</a>
    <a href="#!" class="collection-item">Item 2</a>
    <a href="#!" class="collection-item">Item 3</a>
    <a href="#!" class="collection-item">Item 4</a>
</div>

var colors = ['lightgrey', 'lightblue', 'lightgreen'];
MaterializeCollectionActions.configureActions($('#collection-id'), [
    {
        name: 'delete',
        callback: function (collectionItem, collection) {
            $(collectionItem).remove();
        }
    },
    {
        name: 'brush',
        callback: function (collectionItem, collection) {
            $(collectionItem).css('background-color', colors[Math.floor(Math.random() * colors.length)]);
        }
    },
    {
        name: 'refresh',
        callback: function (collectionItem, collection) {
            $(collectionItem).css('background-color', 'inherit');
        }
    }
]);

Permanently Visible Icons

This example is identical to the one above apart from the mca-always-visible class on the collection.

Item 1 Item 2 Item 3 Item 4

<div id="collection-id" class="collection mca-always-visible">
    <a href="#!" class="collection-item">Item 1</a>
    <a href="#!" class="collection-item">Item 2</a>
    <a href="#!" class="collection-item">Item 3</a>
    <a href="#!" class="collection-item">Item 4</a>
</div>

Installation
Usage