Fix UI and realtime issues with kanban
yflory
parent
365b32d378
commit
f0512bbb1d
|
|
@ -84,16 +84,27 @@
|
|||
.tools_unselectable();
|
||||
}
|
||||
|
||||
.kanban-removeboard {
|
||||
.kanban-additem, .kanban-remove-item {
|
||||
float: right;
|
||||
margin: 10px;
|
||||
background: #EEE;
|
||||
padding: .25rem .5rem;
|
||||
line-height: 1;
|
||||
&:hover {
|
||||
background: transparent;
|
||||
}
|
||||
/* margin: 10px;
|
||||
padding: 3px;
|
||||
width: 30px;
|
||||
text-align: center;
|
||||
background: #eee;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
.tools_unselectable();
|
||||
.tools_unselectable(); */
|
||||
}
|
||||
|
||||
.kanban-additem {
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.kanban-header-yellow {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
define([
|
||||
'jquery',
|
||||
'json.sortify',
|
||||
'/bower_components/nthen/index.js',
|
||||
'/common/sframe-common.js',
|
||||
'/common/sframe-app-framework.js',
|
||||
|
|
@ -12,6 +13,7 @@ define([
|
|||
'css!/kanban/jkanban.css',
|
||||
], function (
|
||||
$,
|
||||
Sortify,
|
||||
nThen,
|
||||
SFCommon,
|
||||
Framework,
|
||||
|
|
@ -25,6 +27,23 @@ define([
|
|||
var verbose = function (x) { console.log(x); };
|
||||
verbose = function () {}; // comment out to enable verbose logging
|
||||
|
||||
var addRemoveItemButton = function (framework, kanban) {
|
||||
var $container = $(kanban.element);
|
||||
$container.find('.kanban-remove-item').remove();
|
||||
$container.find('.kanban-board .kanban-item').each(function (i, el) {
|
||||
var pos = kanban.findElementPosition(el);
|
||||
var board = kanban.options.boards.find(function (b) {
|
||||
return b.id === $(el.parentNode.parentNode).attr('data-id');
|
||||
});
|
||||
$('<button>', {'class': 'kanban-remove-item btn btn-default'}).click(function (e) {
|
||||
e.stopPropagation();
|
||||
board.item.splice(pos, 1);
|
||||
$(el).remove();
|
||||
kanban.onChange();
|
||||
}).text('🗙').appendTo($(el));
|
||||
});
|
||||
};
|
||||
|
||||
// Kanban code
|
||||
var initKanban = function (framework, boards) {
|
||||
var defaultBoards = [{
|
||||
|
|
@ -78,9 +97,13 @@ define([
|
|||
element: '#cp-app-kanban-content',
|
||||
gutter: '15px',
|
||||
widthBoard: '300px',
|
||||
buttonContent: '🗙',
|
||||
onChange: function () {
|
||||
verbose("Board object has changed");
|
||||
framework.localChange();
|
||||
if (kanban) {
|
||||
addRemoveItemButton(framework, kanban);
|
||||
}
|
||||
},
|
||||
click: function (el) {
|
||||
if (kanban.inEditMode) {
|
||||
|
|
@ -182,40 +205,42 @@ define([
|
|||
kanban.onChange();
|
||||
|
||||
},
|
||||
removeClick: function (el) {
|
||||
buttonClick: function (el, boardId, e) {
|
||||
e.stopPropagation();
|
||||
UI.confirm(Messages.kanban_deleteBoard, function (yes) {
|
||||
if (!yes) { return; }
|
||||
verbose("Delete board");
|
||||
var boardName = $(el.parentNode.parentNode).attr("data-id");
|
||||
//var boardName = $(el.parentNode.parentNode).attr("data-id");
|
||||
for (var index in kanban.options.boards) {
|
||||
if (kanban.options.boards[index].id === boardName) {
|
||||
if (kanban.options.boards[index].id === boardId) {
|
||||
break;
|
||||
}
|
||||
index++;
|
||||
}
|
||||
kanban.options.boards.splice(index, 1);
|
||||
kanban.removeBoard(boardName);
|
||||
kanban.removeBoard(boardId);
|
||||
kanban.onChange();
|
||||
});
|
||||
},
|
||||
buttonClick: function (el, boardId, e) {
|
||||
e.stopPropagation();
|
||||
addItemClick: function (el) {
|
||||
if (kanban.inEditMode) {
|
||||
verbose("An edit is already active");
|
||||
return;
|
||||
}
|
||||
kanban.inEditMode = true;
|
||||
// create a form to enter element
|
||||
var boardId = $(el.parentNode.parentNode).attr("data-id");
|
||||
var $item = $('<div>', {'class': 'kanban-item'});
|
||||
var $input = getInput().val(name).appendTo($item);
|
||||
kanban.addForm(boardId, $item[0]);
|
||||
$input.focus();
|
||||
var save = function () {
|
||||
$item.remove();
|
||||
kanban.inEditMode = false;
|
||||
if (!$input.val()) { return; }
|
||||
kanban.addElement(boardId, {
|
||||
"title": $input.val(),
|
||||
});
|
||||
kanban.inEditMode = false;
|
||||
};
|
||||
$input.blur(save);
|
||||
$input.keydown(function (e) {
|
||||
|
|
@ -236,7 +261,7 @@ define([
|
|||
},
|
||||
addItemButton: true,
|
||||
boards: boards,
|
||||
dragcancelEl: function (el, boardId) {
|
||||
/*dragcancelEl: function (el, boardId) {
|
||||
var pos = kanban.findElementPosition(el);
|
||||
UI.confirm(Messages.kanban_deleteItem, function (yes) {
|
||||
if (!yes) { return; }
|
||||
|
|
@ -251,7 +276,7 @@ define([
|
|||
$(el).remove();
|
||||
kanban.onChange();
|
||||
});
|
||||
}
|
||||
}*/
|
||||
});
|
||||
|
||||
var addBoardDefault = document.getElementById('kanban-addboard');
|
||||
|
|
@ -259,9 +284,8 @@ define([
|
|||
var counter = 1;
|
||||
|
||||
// Get the new board id
|
||||
while (kanban.options.boards.indexOf("board" + counter) !== -1) {
|
||||
counter++;
|
||||
}
|
||||
var boardExists = function (b) { return b.id === "board" + counter; };
|
||||
while (kanban.options.boards.some(boardExists)) { counter++; }
|
||||
|
||||
kanban.addBoards([{
|
||||
"id": "board" + counter,
|
||||
|
|
@ -280,24 +304,32 @@ define([
|
|||
// Start of the main loop
|
||||
var andThen2 = function (framework) {
|
||||
|
||||
var kanban = initKanban(framework);
|
||||
var kanban;
|
||||
|
||||
framework.onContentUpdate(function (newContent) {
|
||||
// Init if needed
|
||||
if (!kanban) {
|
||||
kanban = initKanban(framework, (newContent || {}).content);
|
||||
addRemoveItemButton(framework, kanban);
|
||||
return;
|
||||
}
|
||||
|
||||
// Need to update the content
|
||||
verbose("Content should be updated to " + newContent);
|
||||
var currentContent = kanban.getBoardsJSON();
|
||||
var remoteContent = newContent.content;
|
||||
|
||||
if (currentContent !== remoteContent) {
|
||||
if (Sortify(currentContent) !== Sortify(remoteContent)) {
|
||||
// reinit kanban (TODO: optimize to diff only)
|
||||
verbose("Content is different.. Applying content");
|
||||
kanban.setBoards(remoteContent);
|
||||
kanban.inEditMode = false;
|
||||
addRemoveItemButton(framework, kanban);
|
||||
}
|
||||
});
|
||||
|
||||
framework.setContentGetter(function () {
|
||||
// var content = $("#cp-app-kanban-content").val();
|
||||
if (!kanban) { return; }
|
||||
var content = kanban.getBoardsJSON();
|
||||
verbose("Content current value is " + content);
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@
|
|||
boardTitleclick: function (el, boardId) {},
|
||||
buttonClick: function (el, boardId) {},
|
||||
colorClick: function (el, boardId) {},
|
||||
removeClick: function (el, boardId) {},
|
||||
addItemClick: function (el, boardId) {},
|
||||
onChange: function () {}
|
||||
};
|
||||
|
||||
|
|
@ -257,13 +257,6 @@
|
|||
if (self.options.boards !== boards)
|
||||
self.options.boards.push(board);
|
||||
|
||||
//add width to container
|
||||
/*if (self.container.style.width === '') {
|
||||
self.container.style.width = parseInt(boardWidth) + (parseInt(self.options.gutter) * 2) + 'px';
|
||||
} else {
|
||||
self.container.style.width = parseInt(self.container.style.width) + parseInt(boardWidth) + (parseInt(self.options.gutter) * 2) + 'px';
|
||||
}*/
|
||||
|
||||
//create node
|
||||
var boardNode = document.createElement('div');
|
||||
boardNode.dataset.id = board.id;
|
||||
|
|
@ -325,12 +318,12 @@
|
|||
}
|
||||
//footer board
|
||||
var footerBoard = document.createElement('footer');
|
||||
//remove button
|
||||
var removeBoard = document.createElement('div');
|
||||
$(removeBoard).text("-")
|
||||
$(removeBoard).addClass("kanban-removeboard");
|
||||
footerBoard.appendChild(removeBoard);
|
||||
__onRemoveClickHandler(removeBoard);
|
||||
//add button
|
||||
var addBoardItem = document.createElement('button');
|
||||
$(addBoardItem).text("＋")
|
||||
$(addBoardItem).addClass("kanban-additem btn btn-default");
|
||||
footerBoard.appendChild(addBoardItem);
|
||||
__onAddItemClickHandler(addBoardItem);
|
||||
|
||||
//board assembly
|
||||
boardNode.appendChild(headerBoard);
|
||||
|
|
@ -347,9 +340,9 @@
|
|||
}
|
||||
|
||||
this.setBoards = function (boards) {
|
||||
for (var boardkey in boards) {
|
||||
// single board
|
||||
var board = boards[boardkey];
|
||||
self.element
|
||||
for (var boardkey in this.options.boards) {
|
||||
var board = this.options.boards[boardkey];
|
||||
this.removeBoard(board.id);
|
||||
}
|
||||
this.options.boards = [];
|
||||
|
|
@ -478,10 +471,10 @@
|
|||
});
|
||||
}
|
||||
|
||||
function __onRemoveClickHandler(nodeItem, clickfn) {
|
||||
function __onAddItemClickHandler(nodeItem, clickfn) {
|
||||
nodeItem.addEventListener('click', function (e) {
|
||||
e.preventDefault;
|
||||
self.options.removeClick(this);
|
||||
self.options.addItemClick(this);
|
||||
if (typeof (this.clickfn) === 'function')
|
||||
this.clickfn(this);
|
||||
});
|
||||
|
|
@ -489,6 +482,7 @@
|
|||
|
||||
function __onButtonClickHandler(nodeItem, boardId) {
|
||||
nodeItem.addEventListener('click', function (e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault;
|
||||
self.options.buttonClick(this, boardId, e);
|
||||
// if(typeof(this.clickfn) === 'function')
|
||||
|
|
|
|||
Loading…
Reference in New Issue