infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

Fix issues with the new structure and better restoreCursor

Browse Source
pull/1/head
yflory 5 years ago
parent 2e81605c95
commit 0b5f76d471
3 changed files with 180 additions and 204 deletions
Show Stats Download Patch File Download Diff File

1
www/kanban/app-kanban.less
Unescape Escape View File

@ -89,6 +89,7 @@
@button-size: 50px;
#kanban-addboard {
order: 2;
margin: 30px;
border: 1px solid;
width: @button-size;

139
www/kanban/inner.js
Unescape Escape View File

@ -99,7 +99,13 @@ define([
} else {
verbose("Initializing with boards content " + boards);
}
boards = defaultBoards;
// XXX TODO
/*
Delete a board ==> remove from array, delete the data + delete the items
Delete an item ==> remove from array + delete the item data
*/
// Remove any existing elements
$(".kanban-container-outer").remove();
@ -133,21 +139,23 @@ define([
verbose("An edit is already active");
//return;
}
kanban.inEditMode = true;
$(el).find('button').remove();
var eid = $(el).attr('data-eid');
kanban.inEditMode = eid;
var name = $(el).text();
$(el).html('');
// Add input
var $input = getInput().val(name).appendTo(el).focus();
$input[0].select();
var save = function () {
// Store the value
var name = $input.val();
// Remove the input
$(el).text(name);
// Save the value for the correct board
var board = $(el).closest('.kanban-board').attr("data-id");
var pos = kanban.findElementPosition(el.parentNode);
kanban.getBoardJSON(board).item[pos].title = name;
var item = kanban.getItemJSON(eid);
item.title = name;
kanban.onChange();
// Unlock edit mode
kanban.inEditMode = false;
@ -182,11 +190,14 @@ define([
verbose("An edit is already active");
//return;
}
kanban.inEditMode = true;
var boardId = $(el).closest('.kanban-board').attr("data-id");
kanban.inEditMode = boardId;
var name = $(el).text();
$(el).html('');
var $input = getInput().val(name).appendTo(el).focus();
$input[0].select();
var save = function () {
// Store the value
var name = $input.val();
@ -196,8 +207,7 @@ define([
// Remove the input
$(el).text(name);
// Save the value for the correct board
var board = $(el.parentNode.parentNode).attr("data-id");
kanban.getBoardJSON(board).title = name;
kanban.getBoardJSON(boardId).title = name;
kanban.onChange();
// Unlock edit mode
kanban.inEditMode = false;
@ -294,7 +304,7 @@ define([
verbose("An edit is already active");
//return;
}
kanban.inEditMode = true;
kanban.inEditMode = "new";
// create a form to enter element
var boardId = $(el.parentNode.parentNode).attr("data-id");
var $item = $('<div>', {'class': 'kanban-item new-item'});
@ -305,7 +315,9 @@ define([
$item.remove();
kanban.inEditMode = false;
if (!$input.val()) { return; }
var id = Hash.createChannelId();
kanban.addElement(boardId, {
"id": id,
"title": $input.val(),
});
};
@ -336,20 +348,20 @@ define([
$(addBoardDefault).attr('title', Messages.kanban_addBoard);
addBoardDefault.addEventListener('click', function () {
if (framework.isReadOnly()) { return; }
var counter = 1;
/*var counter = 1;
// Get the new board id
var boardExists = function (b) { return b.id === "board" + counter; };
while (kanban.options.boards.some(boardExists)) { counter++; }
*/
var id = Hash.createChannelId();
kanban.addBoards([{
"id": "board" + counter,
kanban.addBoard({
"id": id,
"title": Messages.kanban_newBoard,
"color": COLORS[Math.floor(Math.random()*COLORS.length)], // random color
"item": [{
"title": Messages._getKey('kanban_item', [1]),
}]
}]);
"item": []
});
kanban.onChange();
});
@ -403,86 +415,73 @@ define([
$container.addClass('cp-app-readonly');
});
var getSelectedElement = function () {
var node = document.getSelection().anchorNode;
return (node.nodeType === 3 ? node.parentNode : node);
};
var getCursor = function () {
if (!kanban || !kanban.inEditMode) { return; }
try {
var el = getSelectedElement();
var input = $(el).is('input') ? el : $(el).find('input')[0];
if (!input) { return; }
var $input = $(input);
var pos;
var $item = $(el).closest('.kanban-item');
if ($item.length) {
pos = kanban.findElementPosition($item[0]);
var id = kanban.inEditMode;
var newBoard;
var $el = $container.find('[data-id="'+id+'"]');
if (id === "new") {
$el = $container.find('.kanban-item.new-item');
newBoard = $el.closest('.kanban-board').attr('data-id');
} else if (!$el.length) {
$el = $container.find('[data-eid="'+id+'"]');
}
var board = $input.closest('.kanban-board').attr('data-id');
if (!$el.length) { return; }
var $input = $el.find('input');
if (!$input.length) { return; }
var input = $input[0];
var val = ($input.val && $input.val()) || '';
var start = input.selectionStart;
var end = input.selectionEnd;
var boardEl = kanban.options.boards.find(function (b) {
return b.id === board;
});
var oldVal = ((pos ? boardEl.item[pos] : boardEl) || {}).title;
var json = kanban.getBoardJSON(id) || kanban.getItemJSON(id);
// XXX only title for now...
var oldVal = json && json.title;
return {
board: board,
pos: pos,
id: id,
newBoard: newBoard,
value: val,
start: start,
end: end,
oldValue: oldVal
};
} catch (e) {
console.error(e);
return {};
}
};
var restoreCursor = function (data) {
try {
var boardEl = kanban.options.boards.find(function (b) {
return b.id === data.board;
});
if (!boardEl) { return; }
var $board = $('.kanban-board[data-id="'+data.board+'"');
var id = data.id;
// Editing a board title...
if (!data.pos && $board.length) {
if (boardEl.title !== data.oldValue) { return; }
$board.find('.kanban-title-board').click();
var $boardInput = $board.find('.kanban-title-board input');
$boardInput.val(data.value);
$boardInput[0].selectionStart = data.start;
$boardInput[0].selectionEnd = data.end;
return;
}
// Editing a deleted board title: abort
if (!data.pos) {
return;
}
// An item was added: add a new item
if (!data.oldValue) {
$board.find('.kanban-title-button.fa-plus').click();
var $newInput = $board.find('.kanban-item:last-child input');
// An item was being added: add a new item
if (id === "new" && !data.oldValue) {
var $newBoard = $('.kanban-board[data-id="'+data.newBoard+'"]');
$newBoard.find('.kanban-title-button.fa-plus').click();
var $newInput = $newBoard.find('.kanban-item:last-child input');
$newInput.val(data.value);
$newInput[0].selectionStart = data.start;
$newInput[0].selectionEnd = data.end;
return;
}
// An item was edited: click on the correct item
var newVal = boardEl.item[data.pos];
if (!newVal || newVal.title !== data.oldValue) { return; }
var $el = $('.kanban-board[data-id="' + data.board + '"]')
.find('.kanban-item:nth-child('+(data.pos + 1)+')');
$el.find('.kanban-item-text').click();
// Edit a board title or a card title
var $el = $container.find('.kanban-board[data-id="'+id+'"]');
if (!$el.length) {
$el = $container.find('.kanban-item[data-eid="'+id+'"]');
}
if (!$el.length) { return; }
var json = kanban.getBoardJSON(id) || kanban.getItemJSON(id);
// if the value was changed by a remote user, abort
if (data.oldValue !== json.title) { return; }
// Editing a board title...
$el.find('.kanban-title-board, .kanban-item-text').click();
var $input = $el.find('input');
if ($input.length) {
$input.val(data.value);
@ -490,6 +489,7 @@ define([
$input[0].selectionEnd = data.end;
}
} catch (e) {
console.error(e);
return;
}
};
@ -509,6 +509,7 @@ define([
if (Sortify(currentContent) !== Sortify(remoteContent)) {
var cursor = getCursor();
console.error(cursor);
verbose("Content is different.. Applying content");
kanban.setBoards(remoteContent);
kanban.inEditMode = false;

244
www/kanban/jkanban.js
Unescape Escape View File

@ -45,7 +45,6 @@
this.drake = '';
this.drakeBoard = '';
this.addItemButton = false;
this.buttonContent = '+';
defaults = {
element: '',
gutter: '15px',
@ -60,7 +59,6 @@
},
dragBoards: true,
addItemButton: false,
buttonContent: '+',
readOnly: false,
dragEl: function (el, source) {},
dragendEl: function (el) {},
@ -230,22 +228,14 @@ console.log(source, target, sourceId, targetId, board1, board2);
}
};
this.addElement = function (boardID, element) {
// add Element to JSON
var boardJSON = __findBoardJSON(boardID);
boardJSON.item.push({
title: element.title
});
var board = self.element.querySelector('[data-id="' + boardID + '"] .kanban-drag');
var getElementNode = function (element) {
var nodeItem = document.createElement('div');
nodeItem.classList.add('kanban-item');
if (element.id) {
nodeItem.setAttribute('data-eid', element.id)
}
nodeItem.dataset.eid = element.id;
var nodeItemText = document.createElement('div');
nodeItemText.classList.add('kanban-item-text');
nodeItemText.innerHTML = element.title;
nodeItemText.dataset.eid = element.id;
nodeItemText.innerText = element.title;
nodeItem.appendChild(nodeItemText);
//add function
nodeItem.clickfn = element.click;
@ -253,8 +243,21 @@ console.log(source, target, sourceId, targetId, board1, board2);
nodeItem.dragendfn = element.dragend;
nodeItem.dropfn = element.drop;
__onclickHandler(nodeItemText);
__onColorClickHandler(nodeItem, "item");
board.appendChild(nodeItem);
//__onColorClickHandler(nodeItem, "item");
return nodeItem;
};
this.addElement = function (boardID, element) {
// add Element to JSON
var boardJSON = __findBoardJSON(boardID);
boardJSON.item.push(element.id);
self.options.boards.items = self.options.boards.items || {};
self.options.boards.items[element.id] = element;
var board = self.element.querySelector('[data-id="' + boardID + '"] .kanban-drag');
board.appendChild(getElementNode(element));
// send event that board has changed
self.onChange();
return self;
@ -266,15 +269,90 @@ console.log(source, target, sourceId, targetId, board1, board2);
return self;
};
this.addBoards = function(boards) {
var getBoardNode = function (board) {
var boards = self.options.boards;
var boardWidth = self.options.widthBoard;
var addButton = self.options.addItemButton;
var buttonContent = self.options.buttonContent;
//create node
var boardNode = document.createElement('div');
boardNode.dataset.id = board.id;
boardNode.classList.add('kanban-board');
//set style
if (self.options.responsivePercentage) {
boardNode.style.width = boardWidth + '%';
} else {
boardNode.style.width = boardWidth;
}
boardNode.style.marginLeft = self.options.gutter;
boardNode.style.marginRight = self.options.gutter;
// header board
var headerBoard = document.createElement('header');
if (board.class !== '' && board.class !== undefined) {
var allClasses = board.class.split(",");
} else {
allClasses = [];
}
headerBoard.classList.add('kanban-board-header');
allClasses.map(function (value) {
headerBoard.classList.add(value);
});
if (board.color !== '' && board.color !== undefined) {
// XXX color
headerBoard.classList.add("kanban-header-" + board.color);
}
titleBoard = document.createElement('div');
titleBoard.classList.add('kanban-title-board');
titleBoard.innerText = board.title;
titleBoard.clickfn = board.boardTitleClick;
__onboardTitleClickHandler(titleBoard);
headerBoard.appendChild(titleBoard);
//content board
var contentBoard = document.createElement('main');
contentBoard.classList.add('kanban-drag');
//add drag to array for dragula
self.boardContainer.push(contentBoard);
(board.item || []).forEach(function (itemkey) {
//create item
var itemKanban = boards.items[itemkey];
if (!itemKanban) { return; } // XXX clean invalid data
var nodeItem = getElementNode(itemKanban);
contentBoard.appendChild(nodeItem);
});
//footer board
var footerBoard = document.createElement('footer');
footerBoard.classList.add('kanban-board-footer');
//add button
var addBoardItem = document.createElement('button');
$(addBoardItem).addClass("kanban-title-button btn btn-default fa fa-plus");
footerBoard.appendChild(addBoardItem);
__onAddItemClickHandler(addBoardItem);
//board assembly
boardNode.appendChild(headerBoard);
boardNode.appendChild(contentBoard);
boardNode.appendChild(footerBoard);
return boardNode;
};
this.addBoard = function (board) {
if (!board || !board.id) { return; }
var boards = self.options.boards;
boards.data = boards.data || {};
boards.list = boards.list || [];
// If it already there, abort
boards.data[board.id] = board;
if (boards.list.indexOf(board.id) !== -1) { return; }
boards.list.push(board.id);
var boardNode = getBoardNode(board);
self.container.appendChild(boardNode);
};
this.addBoards = function() {
//for on all the boards
var old = self.options.boards;
var boards = self.options.boards;
boards.list = boards.list || [];
boards.data = boards.data || {};
for (var index in boards.list) {
@ -283,111 +361,8 @@ console.log(source, target, sourceId, targetId, board1, board2);
var board = boards.data[boardkey];
if (!board) { continue; } // XXX clean invalid data
// Remote changes, we had to reset our data
if (old !== boards && old.list.indexOf(boardKey === -1)) {
old.list.push(boardKey);
}
var boardNode = getBoardNode(board);
//create node
var boardNode = document.createElement('div');
boardNode.dataset.id = board.id;
boardNode.classList.add('kanban-board');
//set style
if (self.options.responsivePercentage) {
boardNode.style.width = boardWidth + '%';
} else {
boardNode.style.width = boardWidth;
}
boardNode.style.marginLeft = self.options.gutter;
boardNode.style.marginRight = self.options.gutter;
// header board
var headerBoard = document.createElement('header');
if (board.class !== '' && board.class !== undefined) {
var allClasses = board.class.split(",");
} else {
allClasses = [];
}
headerBoard.classList.add('kanban-board-header');
allClasses.map(function (value) {
headerBoard.classList.add(value);
});
if (board.color !== '' && board.color !== undefined) {
/*
headerBoard._jscLinkedInstance = undefined;
jscolorL = new jscolor(headerBoard,{showOnClick: false, valueElement:undefined});
jscolorL.fromString(board.color);
headerBoard._jscLinkedInstance = undefined;
*/
// XXX fixed list of color: use class?
headerBoard.classList.add("kanban-header-" + board.color);
}
titleBoard = document.createElement('div');
titleBoard.classList.add('kanban-title-board');
titleBoard.innerHTML = board.title;
//titleBoard.setAttribute('title', board.title);
titleBoard.clickfn = board.boardTitleClick;
__onboardTitleClickHandler(titleBoard);
headerBoard.appendChild(titleBoard);
//__onColorClickHandler(headerBoard, "board"); // XXX color
// add button to the board
/* // XXX delete board button ==> removed
var btn = document.createElement("BUTTON");
btn.setAttribute("class", "kanban-title-button btn btn-default btn-xs fa fa-times");
headerBoard.appendChild(btn);
__onButtonClickHandler(btn, board.id);
*/
//content board
var contentBoard = document.createElement('main');
contentBoard.classList.add('kanban-drag');
//add drag to array for dragula
self.boardContainer.push(contentBoard);
(board.item || []).forEach(function (itemkey) {
//create item
var itemKanban = boards.items[itemkey];
if (!itemKanban) { return; } // XXX clean invalid data
var nodeItem = document.createElement('div');
nodeItem.classList.add('kanban-item');
nodeItem.dataset.eid = itemKanban.id;
var nodeItemText = document.createElement('div');
nodeItemText.classList.add('kanban-item-text');
nodeItemText.dataset.eid = itemKanban.id;
nodeItemText.innerHTML = itemKanban.title;
nodeItem.appendChild(nodeItemText);
//add function
nodeItemText.clickfn = itemKanban.click;
nodeItemText.dragfn = itemKanban.drag;
nodeItemText.dragendfn = itemKanban.dragend;
nodeItemText.dropfn = itemKanban.drop;
//add click handler of item
__onclickHandler(nodeItemText);
/*
// XXX color handle color differently
if (itemKanban.color !== '' && itemKanban.color !== undefined) {
jscolorL = new jscolor(nodeItem,{
showOnClick: false, valueElement:undefined
});
jscolorL.fromString(itemKanban.color);
}*/
//__onColorClickHandler(nodeItem, "item"); // XXX color
contentBoard.appendChild(nodeItem);
});
//footer board
var footerBoard = document.createElement('footer');
footerBoard.classList.add('kanban-board-footer');
//add button
var addBoardItem = document.createElement('button');
$(addBoardItem).addClass("kanban-title-button btn btn-default fa fa-plus");
footerBoard.appendChild(addBoardItem);
__onAddItemClickHandler(addBoardItem);
//board assembly
boardNode.appendChild(headerBoard);
boardNode.appendChild(contentBoard);
boardNode.appendChild(footerBoard);
//board add
self.container.appendChild(boardNode);
}
@ -400,16 +375,12 @@ console.log(source, target, sourceId, targetId, board1, board2);
this.setBoards = function (boards) {
//self.element
for (var boardkey in this.options.boards.list) {
//var board = this.options.boards[boardkey];
this.removeBoard(boardKey);
for (var i in this.options.boards.list) {
var boardkey = boards.list[i];
this.removeBoard(boardkey);
}
this.options.boards = {
list: [],
data: boards.data || {},
items: boards.items || {}
};
this.addBoards(boards);
this.options.boards = boards;
this.addBoards();
}
this.findBoard = function (id) {
@ -472,6 +443,9 @@ console.log(source, target, sourceId, targetId, board1, board2);
this.getBoardJSON = function (id) {
return __findBoardJSON(id);
}
this.getItemJSON = function (id) {
return (self.options.boards.items || {})[id];
};
//PRIVATE FUNCTION
function __extendDefaults(source, properties) {
@ -499,7 +473,7 @@ console.log(source, target, sourceId, targetId, board1, board2);
self.container = boardContainer;
//add boards
self.addBoards(self.options.boards);
self.addBoards();
//appends to container
self.element.appendChild(boardContainerOuter);

Write Preview
Loading…
Cancel
Save