"use strict";
// Class definition
var KTKanbanBoardDemo = function() {
// Private functions
var _demo1 = function() {
var kanban = new jKanban({
element: '#kt_kanban_1',
gutter: '0',
widthBoard: '250px',
boards: [{
'id': '_inprocess',
'title': 'In Process',
'item': [{
'title': 'You can drag me too'
},
{
'title': 'Buy Milk'
}
]
}, {
'id': '_working',
'title': 'Working',
'item': [{
'title': 'Do Something!'
},
{
'title': 'Run?'
}
]
}, {
'id': '_done',
'title': 'Done',
'item': [{
'title': 'All right'
},
{
'title': 'Ok!'
}
]
}
]
});
}
var _demo2 = function() {
var kanban = new jKanban({
element: '#kt_kanban_2',
gutter: '0',
widthBoard: '250px',
boards: [{
'id': '_inprocess',
'title': 'In Process',
'class': 'primary',
'item': [{
'title': 'You can drag me too',
'class': 'light-primary',
},
{
'title': 'Buy Milk',
'class': 'light-primary',
}
]
}, {
'id': '_working',
'title': 'Working',
'class': 'success',
'item': [{
'title': 'Do Something!',
'class': 'light-success',
},
{
'title': 'Run?',
'class': 'light-success',
}
]
}, {
'id': '_done',
'title': 'Done',
'class': 'danger',
'item': [{
'title': 'All right',
'class': 'light-danger',
},
{
'title': 'Ok!',
'class': 'light-danger',
}
]
}
]
});
}
var _demo3 = function() {
var kanban = new jKanban({
element: '#kt_kanban_3',
gutter: '0',
widthBoard: '250px',
click: function(el) {
alert(el.innerHTML);
},
boards: [{
'id': '_todo',
'title': 'To Do',
'class': 'light-primary',
'dragTo': ['_working'],
'item': [{
'title': 'My Task Test',
'class': 'primary'
},
{
'title': 'Buy Milk',
'class': 'primary'
}
]
},
{
'id': '_working',
'title': 'Working',
'class': 'light-warning',
'item': [{
'title': 'Do Something!',
'class': 'warning'
},
{
'title': 'Run?',
'class': 'warning'
}
]
},
{
'id': '_done',
'title': 'Done',
'class': 'light-success',
'dragTo': ['_working'],
'item': [{
'title': 'All right',
'class': 'success'
},
{
'title': 'Ok!',
'class': 'success'
}
]
},
{
'id': '_notes',
'title': 'Notes',
'class': 'light-danger',
'item': [{
'title': 'Warning Task',
'class': 'danger'
},
{
'title': 'Do not enter',
'class': 'danger'
}
]
}
]
});
}
var _demo4 = function() {
var kanban = new jKanban({
element: '#kt_kanban_4',
gutter: '0',
click: function(el) {
alert(el.innerHTML);
},
boards: [{
'id': '_backlog',
'title': 'Backlog',
'class': 'light-dark',
'item': [{
'title': `
SEO Optimization
In progress
`,
},
{
'title': `
`,
}
]
},
{
'id': '_todo',
'title': 'To Do',
'class': 'light-danger',
'item': [{
'title': `
`,
},
{
'title': `
`,
}
]
},
{
'id': '_working',
'title': 'Working',
'class': 'light-primary',
'item': [{
'title': `
`,
},
{
'title': `
`,
}
]
},
{
'id': '_done',
'title': 'Done',
'class': 'light-success',
'item': [{
'title': `
SEO Optimization
In progress
`,
},
{
'title': `
`,
}
]
},
{
'id': '_deploy',
'title': 'Deploy',
'class': 'light-primary',
'item': [{
'title': `
D.L
SEO Optimization
In progress
`,
},
{
'title': `
E.K
Requirement Study
Scheduled
`,
}
]
}
]
});
var toDoButton = document.getElementById('addToDo');
toDoButton.addEventListener('click', function() {
kanban.addElement(
'_todo', {
'title': `
Requirement Study
Scheduled
`
}
);
});
var addBoardDefault = document.getElementById('addDefault');
addBoardDefault.addEventListener('click', function() {
kanban.addBoards(
[{
'id': '_default',
'title': 'New Board',
'class': 'primary-light',
'item': [{
'title': `
Payment Modules
In development
`},{
'title': `
`}
]
}]
)
});
var removeBoard = document.getElementById('removeBoard');
removeBoard.addEventListener('click', function() {
kanban.removeBoard('_done');
});
}
// Public functions
return {
init: function() {
_demo1();
_demo2();
_demo3();
_demo4();
}
};
}();
jQuery(document).ready(function() {
KTKanbanBoardDemo.init();
});
