Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/riktar/jkanban
Vanilla Javascript plugin for manage kanban boards
https://github.com/riktar/jkanban
component hacktoberfest javascript javascript-plugin kanban kanban-board todolist vanilla vanilla-js
Last synced: 20 days ago
JSON representation
Vanilla Javascript plugin for manage kanban boards
- Host: GitHub
- URL: https://github.com/riktar/jkanban
- Owner: riktar
- License: apache-2.0
- Created: 2017-06-27T11:06:24.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-10-02T18:31:22.000Z (about 1 year ago)
- Last Synced: 2024-10-01T19:41:56.210Z (about 1 month ago)
- Topics: component, hacktoberfest, javascript, javascript-plugin, kanban, kanban-board, todolist, vanilla, vanilla-js
- Language: JavaScript
- Homepage: https://www.riccardotartaglia.it/jkanban/
- Size: 382 KB
- Stars: 1,081
- Watchers: 37
- Forks: 300
- Open Issues: 32
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# jKanban
> Javascript plugin for Kanban boards
jKanban allow you to create and manage Kanban Board in your project!
Please try out the live [demo][1]!
[1]: http://www.riccardotartaglia.it/jkanban/
## Install
Clone the repo and use the javascript and the css files in the `dist` folder.
You have to include
``
and
``
in your page and you are done.
## Usage
Init jKanban is a piece of cake!
### `var kanban = new jKanban(options)`
Here's an **overview of the default values**.
```js
var kanban = new jKanban({
element : '', // selector of the kanban container
gutter : '15px', // gutter of the board
widthBoard : '250px', // width of the board
responsivePercentage: false, // if it is true I use percentage in the width of the boards and it is not necessary gutter and widthBoard
dragItems : true, // if false, all items are not draggable
boards : [], // json of boards
dragBoards : true, // the boards are draggable, if false only item can be dragged
itemAddOptions: {
enabled: false, // add a button to board for easy item creation
content: '+', // text or html content of the board button
class: 'kanban-title-button btn btn-default btn-xs', // default class of the button
footer: false // position the button on footer
},
itemHandleOptions: {
enabled : false, // if board item handle is enabled or not
handleClass : "item_handle", // css class for your custom item handle
customCssHandler : "drag_handler", // when customHandler is undefined, jKanban will use this property to set main handler class
customCssIconHandler: "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 here
customHandler : "+ %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 clicked
context : function (el, event) {}, // callback when any board's item are right clicked
dragEl : function (el, source) {}, // callback when any board's item are dragged
dragendEl : function (el) {}, // callback when any board's item stop drag
dropEl : function (el, target, source, sibling) {}, // callback when any board's item drop in a board
dragBoard : function (el, source) {}, // callback when any board stop drag
dragendBoard : function (el) {}, // callback when any board stop drag
buttonClick : function(el, boardId) {}, // callback when the board's button is clicked
propagationHandlers: [], // the specified callback does not cancel the browser event. possible values: "click", "context"
})
```
Now take a look to the `boards` object
```js
[
{
"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:
```js
[
{
"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:
```html
Item 1
Item 2
```
## 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
## Example
Clone the repo and look in the `example` folder
## Thanks
jKanban use [dragula](https://github.com/bevacqua/dragula) for drag&drop
## Develop
Clone the repo then use `npm install` for download all the dependencies then launch `npm run build` for build the project
### Pull Requests?
I'd love them!
### Comments?
Let's hear them! (The nice ones please!)
### Me?
In case you're interested I'm [@riktarweb](http://twitter.com/riktarweb)