Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 178 Commits
.github		.github
dist		dist
example		example
.gitattributes		.gitattributes
.gitignore		.gitignore
.huskyrc.json		.huskyrc.json
LICENSE		LICENSE
README.md		README.md
jest-unit-config.js		jest-unit-config.js
jest.config.js		jest.config.js
jkanban.css		jkanban.css
jkanban.js		jkanban.js
jkanban.spec.js		jkanban.spec.js
package-lock.json		package-lock.json
package.json		package.json

Repository files navigation

jKanban

Javascript plugin for Kanban boards

jKanban allow you to create and manage Kanban Board in your project!

Please try out the livedemo!

Install

Clone the repo and use the javascript and the css files in thedist folder.

You have to include

<link rel="stylesheet" href="path/to/jkanban.min.css">

and

<script src="path/to/jkanban.min.js"></script>

in your page and you are done.

Usage

Init jKanban is a piece of cake!

`var kanban = new jKanban(options)`

Here's anoverview of the default values.

varkanban=newjKanban({element          :'',// selector of the kanban containergutter           :'15px',// gutter of the boardwidthBoard       :'250px',// width of the boardresponsivePercentage:false,// if it is true I use percentage in the width of the boards and it is not necessary gutter and widthBoarddragItems        :true,// if false, all items are not draggableboards           :[],// json of boardsdragBoards       :true,// the boards are draggable, if false only item can be draggeditemAddOptions:{enabled:false,// add a button to board for easy item creationcontent:'+',// text or html content of the board buttonclass:'kanban-title-button btn btn-default btn-xs',// default class of the buttonfooter:false// position the button on footer},itemHandleOptions:{enabled             :false,// if board item handle is enabled or nothandleClass         :"item_handle",// css class for your custom item handlecustomCssHandler    :"drag_handler",// when customHandler is undefined, jKanban will use this property to set main handler classcustomCssIconHandler:"drag_handler_icon",// when customHandler is undefined, jKanban will use this property to set main icon handler class. If you want, you can use font icon libraries herecustomHandler       :"<span class='item_handle'>+</span> %title% "// your entirely customized handler. Use %title% to position item title// any key's value included in item collection can be replaced with %key%},click            :function(el){},// callback when any board's item are clickedcontext          :function(el,event){},// callback when any board's item are right clickeddragEl           :function(el,source){},// callback when any board's item are draggeddragendEl        :function(el){},// callback when any board's item stop dragdropEl           :function(el,target,source,sibling){},// callback when any board's item drop in a boarddragBoard        :function(el,source){},// callback when any board stop dragdragendBoard     :function(el){},// callback when any board stop dragbuttonClick      :function(el,boardId){},// callback when the board's button is clickedpropagationHandlers:[],// the specified callback does not cancel the browser event. possible values: "click", "context"})

Now take a look to theboards object

[{"id"    :"board-id-1",// id of the board"title" :"Board Title",// title of the board"class" :"class1,class2,...",// css classes to add at the title"dragTo":['another-board-id',...],// array of ids of boards where items can be dropped (default: [])"item"  :[// item of this board{"id"    :"item-id-1",// id of the item"title" :"Item 1"// title of the item"class" :["myClass",...]// array of additional classes},{"id"    :"item-id-2","title" :"Item 2"}]},{"id"    :"board-id-2","title" :"Board Title 2"}]

WARNING: all ids are unique!

About custom properties

jKanban also support custom properties on items to improve your applications with html data- properties. You can define them at like:

[{"id"    :"board-id-1","title" :"Board Title","item"  :[{"id"      :"item-id-1","title"   :"Item 1","username":"username1"},{"id"      :"item-id-2","title"   :"Item 2","username":"username2"}]}]

Which jKanban will convert to:

<mainclass="kanban-drag"><divclass="kanban-item"data-eid="item-id-1"data-username="username1">Item 1</div><divclass="kanban-item"data-eid="item-id-2"data-username="username2">Item 2</div></main>

API

jKanban provides the easiest possible API to make your boards awesome!

Method Name	Arguments	Description
`addElement`	`boardID, element, position`	Add`element` in the board with ID`boardID`,`element` is the standard format. If`position` is set, inserts at position starting from 0
`addForm`	`boardID, formItem`	Add`formItem` as html element into the board with ID`boardID`
`addBoards`	`boards`	Add one or more boards in the kanban,`boards` are in the standard format
`findElement`	`id`	Find board's item by`id`
`replaceElement`	`id, element`	Replace item by`id` with`element` JSON standard format
`getParentBoardID`	`id`	Get board ID of item`id` passed
`findBoard`	`id`	Find board by`id`
`getBoardElements`	`id`	Get all item of a board
`removeElement`	`id`	Remove a board's element by id
`removeBoard`	`id`	Remove a board by id