responsive-miller-column

Please look at the practical demo page here link.

Responsive Miller columns

This is a Jquery plugin that implements Miller Columns with responsive design. Miller columns (also known as Cascading) are a browsing/visualization technique that can be applied to tree structures. The columns allow multiple levels of the hierarchy to be open at once, and provide a visual representation of the current location. It is closely related to techniques used earlier in the Smalltalk browser, but was independently invented by Mark S. Miller in 1980 at Yale University. The technique was then used at Project Xanadu, Datapoint, and NeXT. More info

Main Features

1. Responsive on all screen sizes 2. Material Design support 3. Editable

Dependency

_jQuery_

How to install

```npm i responsive-miller-column```

Interfaces

The plugin defines two data classes so far.

Category

Data class that defines the columns.

	function Category() {

    var _this = this;

    _this.categoryId = guid();

    _this.setCategoryId = function (categoryId) {

        _this.categoryId = categoryId;

    };

    _this.getCategoryId = function () {
        return _this.categoryId;
    };


    _this.setCategoryName = function (categoryName) {

        _this.categoryName = categoryName;

    };
    _this.getCategoryName = function () {
        return _this.categoryName;
    };


    _this.setParentId = function (parentId) {

        _this.parentId = parentId;

    };
    _this.getParentId = function () {
        return _this.parentId;
    };


    _this.setIsLowestLevel = function (isLowestLevel) {
        _this.isLowestLevel = isLowestLevel;
    };
    _this.getIsLowestLevel = function () {
        return _this.isLowestLevel
    };

    _this.setItems = function (categoryItems) {
        _this.items = categoryItems;
    };
    _this.getItems = function () {
        return _this.items
    }


}

CategoryItem

Data class that defines each item that are contained with in columns.

function CategoryItem() {

    var _this = this;

    _this.itemId = guid();

    _this.setItemId = function (itemId) {

        _this.itemId = itemId;

    };

    _this.getItemId = function () {
        return _this.itemId;
    };


    _this.setItemName = function (itemName) {

        _this.itemName = itemName;

    };
    _this.getItemName = function () {
        return _this.itemName;
    };


    _this.setItemIcon = function (itemIcon) {

        _this.itemIcon = itemIcon;

    };
    _this.getItemIcon = function () {
        return _this.itemIcon;
    };


    _this.setParentId = function (parentId) {

        _this.parentId = parentId;

    };
    _this.getParentId = function () {
        return _this.parentId;
    };


    _this.setCategoryId = function (categoryId) {

        _this.categoryId = categoryId;

    };
    _this.getCategoryId = function () {
        return _this.categoryId;
    };


    _this.setHasChildren = function (hasChildren) {
        _this.hasChildren = hasChildren;
    };
    _this.getHasChildren = function () {
        return _this.hasChildren
    };

    _this.setNumChildren = function(numChildren) {
        _this.numChildren = numChildren;
        _this.setHasChildren(numChildren != 0);
    }
    
    _this.getNumChildren = function(){
        return _this.numChildren;
    };

    _this.isDeletable = true;
    _this.setIsDeletable = function (isDeletable) {
        _this.isDeletable = isDeletable;
    };
    _this.getIsDeletable = function () {
        return _this.isDeletable
    };


}

isDeleteable property is used if the miller column is editable. If this prop is true a Delete icon will appear infront of the item.

Category contains zero or more CategoryItem.

JSON support

The plugin also accepts any js object as far as it contains the required props. Here is a valid json object as example. Note: the plugin does not accepts JSON string, if you have a json string you have to call JSON.parse(jsonString) to convert your json string into object.

	{
	   "categoryId":"63ef58e5-fc92-9934-9b4c-ca5f457a425b",
	   "categoryName":"Category 2",
	   "parentId":"53732c02-f3d3-10de-1710-c74a8e3df260",
	   "isLowestLevel":false,
	   "items":[
	      {
		 "itemId":"50b73f3a-a302-14dc-e61c-3da72876e712",
		 "isDeleteable":true,
		 "itemName":"Category 2 item 1",
		 "hasChildren":false,
		 "categoryId":"63ef58e5-fc92-9934-9b4c-ca5f457a425b",
		 "parentId":"d39e098e-5ecb-3ba5-8fd8-fa20c7685e8c"
	      },
	      {
		 "itemId":"d98c4bfc-cae5-3355-08b8-84d0bc4edd59",
		 "isDeleteable":true,
		 "itemName":"Category 2 item 2",
		 "hasChildren":true,
		 "categoryId":"63ef58e5-fc92-9934-9b4c-ca5f457a425b",
		 "parentId":"d39e098e-5ecb-3ba5-8fd8-fa20c7685e8c"
	      },
	      {
		 "itemId":"50603731-b62e-d0d2-dda8-493e9882651f",
		 "isDeleteable":true,
		 "itemName":"Category 2 item 3",
		 "hasChildren":true,
		 "categoryId":"63ef58e5-fc92-9934-9b4c-ca5f457a425b",
		 "parentId":"d39e098e-5ecb-3ba5-8fd8-fa20c7685e8c"
	      },
	      {
		 "itemId":"72942b44-d011-1530-26b0-aa7f3351209e",
		 "isDeleteable":true,
		 "itemName":"Category 2 item 4",
		 "hasChildren":true,
		 "categoryId":"63ef58e5-fc92-9934-9b4c-ca5f457a425b",
		 "parentId":"d39e098e-5ecb-3ba5-8fd8-fa20c7685e8c"
	      },
	      {
		 "itemId":"34644c0c-56f2-dc59-a649-2ea8d7195e97",
		 "isDeleteable":true,
		 "itemName":"Category 2 item 5",
		 "hasChildren":false,
		 "categoryId":"63ef58e5-fc92-9934-9b4c-ca5f457a425b",
		 "parentId":"d39e098e-5ecb-3ba5-8fd8-fa20c7685e8c"
	      }
	   ]
	}

Usage:

How to initialize?

	var $millerCol = $("#miller_col");
	$millerCol.millerColumn({
	    initData: rootCategory
	});

rootCategory has to be type of class Category or any other class that contains at aleast the required props defined with in class Category.

Options

Read only

The miller column can be either readonly or editable; if it is editable you will action buttons for adding childrens, editing category item, deleting category item. When these action buttons are clicked they will emit the appropriate events. See events section for more info.

	$millerCol.millerColumn({
	    isReadOnly: true,
	    initData: rootCategory
	});

Adding a Category(Column)

	var $millerCol = $("#miller_col");
	$millerCol.millerColumn("addCol", category);

Adding a Category Item

	var $millerCol = $("#miller_col");
	$millerCol.millerColumn("addItem", categoryItem);

categoryItem has to be type of class CategoryItem or any other class that contains at aleast the required props defined with in class CategoryItem.

Update Category Item

	var $millerCol = $("#miller_col");
	$millerCol.millerColumn("updateItem", categoryItem);

Delete Category Item

	var $millerCol = $("#miller_col");
	$millerCol.millerColumn("deleteItem", categoryItem);

Events:

The plugin emits the ff events.

Item Selected Event

Event Name: item-selected
Data: CategoryItem object that contains all necessary info about the selected category item.
Usage: e.g how to listen for this event:

 $millerCol.on("item-selected", ".miller-col-list-item", function (event, data) {
	//your logic here.
 });

Add CategoryItem event

Event Name: add-item
Data: Category object that contains all necessary info about category where the action was triggered.
Usage: e.g how to listen for this event:

 $millerCol.on("add-item", ".miller-col-container", function (event, data) {
	//your logic here.
 });

Edit CategoryItem event

Event Name: edit-item
Data: CategoryItem object that contains all necessary info about the tobe edited category item.
Usage: e.g how to listen for this event:

 $millerCol.on("edit-item", ".miller-col-list-item", function (event, data) {
	//your logic here.
 });

Delete CategoryItem event

Event Name: delete-item
Data: CategoryItem object that contains all necessary info about the tobe deleted category item.
Usage: e.g how to listen for this event:

 $millerCol.on("delete-item", ".miller-col-list-item", function (event, data) {
	//your logic here.
 });