web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Drag to remove

Browse Source
This commit is contained in:
yflory 2020-03-02 12:05:09 +01:00
parent 0b5f76d471
commit 889b18a1ff
4 changed files with 104 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
www/kanban/app-kanban.less
View File

@ -45,6 +45,23 @@
justify-content: space-around;
}
}
#kanban-trash {
width: 100px;
height: 100px;
align-self: end;
font-size: 40px;
display: flex;
align-items: center;
justify-content: center;
&.kanban-trash-active {
color: red;
border: 1px solid red;
background-color: rgba(255,0,0,0.5);
}
.kanban-item, .kanban-board {
display: none;
}
}
.kanban-item {
display: flex;
@ -103,6 +120,7 @@
.tools_unselectable();
}
/*
.kanban-remove-item {
padding: 0 0.5em;
visibility: hidden;
@ -112,6 +130,7 @@
visibility: visible;
}
}
*/
.kanban-additem {
float: right;

54
www/kanban/inner.js
View File

@ -32,28 +32,37 @@ define([
var COLORS = ['yellow', 'green', 'orange', 'blue', 'red', 'purple', 'cyan', 'lightgreen', 'lightblue'];
var addRemoveItemButton = function (framework, kanban) {
var addEditItemButton = function (framework, kanban) {
if (!kanban) { return; }
if (framework.isReadOnly() || framework.isLocked()) { return; }
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 boards = kanban.options.boards;
var board = boards.data[$(el.parentNode.parentNode).attr('data-id')];
$container.find('.kanban-edit-item').remove();
$container.find('.kanban-item').each(function (i, el) {
var itemId = $(el).attr('data-eid');
$('<button>', {
'class': 'kanban-remove-item btn btn-default fa fa-times',
title: Messages.kanban_removeItem
'class': 'kanban-edit-item btn btn-default fa fa-pencil',
}).click(function (e) {
e.stopPropagation();
/*
UI.confirm(Messages.kanban_removeItemConfirm, function (yes) {
if (!yes) { return; }
board.item.splice(pos, 1);
$(el).remove();
kanban.onChange();
});
*/
// XXX Open edit modal
}).appendTo($(el));
});
$container.find('.kanban-board').each(function (i, el) {
var itemId = $(el).attr('data-id');
$('<button>', {
'class': 'kanban-edit-item btn btn-default fa fa-pencil',
}).click(function (e) {
e.stopPropagation();
// XXX Open edit modal
}).appendTo($(el).find('.kanban-board-header'));
});
};
// Kanban code
@ -129,7 +138,7 @@ define([
verbose("Board object has changed");
framework.localChange();
if (kanban) {
addRemoveItemButton(framework, kanban);
addEditItemButton(framework, kanban);
}
},
click: function (el) {
@ -176,7 +185,7 @@ define([
e.stopPropagation();
$(el).text(name);
kanban.inEditMode = false;
addRemoveItemButton(framework, kanban);
addEditItemButton(framework, kanban);
return;
}
});
@ -407,7 +416,7 @@ define([
if (framework.isReadOnly()) { return; }
if (!kanban) { return; }
if (unlocked) {
addRemoveItemButton(framework, kanban);
addEditItemButton(framework, kanban);
kanban.options.readOnly = false;
return void $container.removeClass('cp-app-readonly');
}
@ -498,7 +507,7 @@ define([
// Init if needed
if (!kanban) {
kanban = initKanban(framework, (newContent || {}).content);
addRemoveItemButton(framework, kanban);
addEditItemButton(framework, kanban);
return;
}
@ -513,7 +522,7 @@ define([
verbose("Content is different.. Applying content");
kanban.setBoards(remoteContent);
kanban.inEditMode = false;
addRemoveItemButton(framework, kanban);
addEditItemButton(framework, kanban);
restoreCursor(cursor);
}
});
@ -531,8 +540,27 @@ define([
};
});
var cleanData = function (boards) {
if (typeof(boards) !== "object") { return; }
var items = boards.items || {};
var data = boards.data || {};
var list = boards.list || [];
Object.keys(data).forEach(function (id) {
if (list.indexOf(id) === -1) { delete data[id]; }
});
Object.keys(items).forEach(function (eid) {
var exists = Object.keys(data).some(function (id) {
return (data[id].item || []).indexOf(eid) !== -1;
});
if (!exists) { delete items[eid]; }
});
framework.localChange();
};
framework.onReady(function () {
$("#cp-app-kanban-content").focus();
var content = kanban.getBoardsJSON();
cleanData(content);
});
framework.onDefaultContentNeeded(function () {

2
www/kanban/jkanban.css
View File

@ -19,6 +19,7 @@
.kanban-board.is-moving.gu-mirror {
transform: rotate(3deg);
opacity: 0.8;
}
.kanban-board.is-moving.gu-mirror .kanban-drag {
@ -69,6 +70,7 @@
.kanban-item.is-moving.gu-mirror {
transform: rotate(3deg);
height: auto !important;
opacity: 0.8;
}
/* Dragula CSS */

55
www/kanban/jkanban.js
View File

@ -94,7 +94,8 @@
},
accepts: function (el, target, source, sibling) {
if (self.options.readOnly) { return false; }
return target.classList.contains('kanban-container');
return target.classList.contains('kanban-container') ||
target.classList.contains('kanban-trash');
},
revertOnSpill: true,
direction: 'horizontal',
@ -179,6 +180,14 @@
var boardId = $(source).closest('kanban-board').data('id');
self.options.dragcancelEl(el, boardId);
})
.on('over', function (el, target, source) {
if (!target.classList.contains('kanban-trash')) { return false; }
target.classList.add('kanban-trash-active');
})
.on('out', function (el, target) {
if (!target.classList.contains('kanban-trash')) { return false; }
target.classList.remove('kanban-trash-active');
})
.on('drop', function(el, target, source, sibling) {
self.enableAllBoards();
el.classList.remove('is-moving');
@ -186,15 +195,26 @@
console.log("In drop");
var sourceId = $(source).closest('.kanban-board').data('id');
var targetId = $(target).closest('.kanban-board').data('id');
var board1 = __findBoardJSON(sourceId);
var board2 = __findBoardJSON(targetId);
console.log(source, target, sourceId, targetId, board1, board2);
var id1 = $(el).attr('data-eid');
var pos1 = board1.item.indexOf(id1);
if (target.classList.contains('kanban-trash')) {
board1.item.splice(pos1, 1);
delete self.options.boards.items[id1];
self.onChange();
return;
}
var targetId = $(target).closest('.kanban-board').data('id');
var board2 = __findBoardJSON(targetId);
var id2 = $(sibling).attr('data-eid');
var pos2 = id2 ? board2.item.indexOf(id2) : (board2.item.length)
if (pos2 === -1) { pos2 = board2.item.length; }
var pos1 = self.dragItemPos;
var pos2 = (sibling) ? self.findElementPosition(sibling) : (board2.item.length + 1);
console.log("Drop element " + pos1 + " before " + pos2);
if (el !== null) {
self.options.dropEl(el, target, source, sibling);
@ -204,13 +224,14 @@ console.log(source, target, sourceId, targetId, board1, board2);
}
}
var item = board1.item[pos1];
// if (board1==board2 && pos2<pos1)
// pos2 = pos2;
if (board1 === board2 && pos1 < pos2) {
pos2 = pos2 - 1;
}
// moving element to target array
board1.item.splice(pos1, 1);
board2.item.splice(pos2 - 1, 0, item);
var item = board1.item.splice(pos1, 1);
board2.item.splice(pos2, 0, item[0]);
// send event that board has changed
self.onChange();
@ -470,12 +491,20 @@ console.log(source, target, sourceId, targetId, board1, board2);
addBoard.id = 'kanban-addboard';
addBoard.setAttribute('class', 'fa fa-plus');
boardContainer.appendChild(addBoard);
var trash = document.createElement('div');
trash.setAttribute('id', 'kanban-trash');
trash.setAttribute('class', 'kanban-trash');
var trashIcon = document.createElement('i');
trashIcon.setAttribute('class', 'fa fa-trash');
trash.appendChild(trashIcon);
self.boardContainer.push(trash);
self.container = boardContainer;
//add boards
self.addBoards();
//appends to container
self.element.appendChild(boardContainerOuter);
self.element.appendChild(trash);
// send event that board has changed
self.onChange();