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

Merge pull request #271 from Nordgedanken/fix-#254 

[WIP] Partially Fix #254
pull/1/head
ansuz 2018-09-19 09:09:55 -04:00 committed by GitHub
parent 82b805fea6 8b384d6bb3
commit cb87f49b1f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 1985 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.jshintignore
View File

@ -17,6 +17,7 @@ www/pad/mediatag-plugin-dialog.js
www/pad/disable-base64.js
www/kanban/jkanban.js
www/kanban/jscolor.js
www/common/media-tag-nacl.min.js

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

@ -117,39 +117,39 @@
}
.kanban-header-yellow {
background: #FC3;
background: #FC3 !important;
}
.kanban-header-orange {
background: #F91;
background: #F91 !important;
}
.kanban-header-blue {
background: #0AC;
background: #0AC !important;
}
.kanban-header-red {
background: #E43;
background: #E43 !important;
}
.kanban-header-green {
background: #8C4;
background: #8C4 !important;
}
.kanban-header-purple {
background: #c851ff;
background: #c851ff !important;
}
.kanban-header-cyan {
background: #00ffff;
background: #00ffff !important;
}
.kanban-header-lightgreen {
background: #c3ff5b;
background: #c3ff5b !important;
}
.kanban-header-lightblue {
background: #adeeff;
background: #adeeff !important;
}
@media (max-width: @browser_media-medium-screen) {

66
www/kanban/inner.js
View File

@ -10,6 +10,7 @@ define([
'/common/modes.js',
'/customize/messages.js',
'/kanban/jkanban.js',
'/kanban/jscolor.js',
'css!/kanban/jkanban.css',
'less!/kanban/app-kanban.less'
@ -107,7 +108,7 @@ define([
var kanban = new window.jKanban({
element: '#cp-app-kanban-content',
gutter: '15px',
gutter: '5px',
widthBoard: '300px',
buttonContent: '❌',
colors: COLORS,
@ -138,7 +139,7 @@ define([
// Remove the input
$(el).text(name);
// Save the value for the correct board
var board = $(el.parentNode.parentNode).attr("data-id");
var board = $(el.parentNode.parentNode.parentNode).attr("data-id");
var pos = kanban.findElementPosition(el);
kanban.getBoardJSON(board).item[pos].title = name;
kanban.onChange();
@ -206,24 +207,53 @@ define([
}
});
},
colorClick: function (el) {
colorClick: function (el, type) {
if (framework.isReadOnly() || framework.isLocked()) { return; }
verbose("in color click");
var board = $(el.parentNode).attr("data-id");
var boardJSON = kanban.getBoardJSON(board);
verbose("on color click");
var boardJSON;
var board;
if (type === "board") {
verbose("board color click");
board = $(el.parentNode).attr("data-id");
boardJSON = kanban.getBoardJSON(board);
} else {
verbose("item color click");
board = $(el.parentNode.parentNode).attr("data-id");
var pos = kanban.findElementPosition(el);
boardJSON = kanban.getBoardJSON(board).item[pos];
}
var onchange = function (colorL) {
var elL = el;
var typeL = type;
var boardJSONL;
var boardL;
if (typeL === "board") {
verbose("board color change");
boardL = $(elL.parentNode).attr("data-id");
boardJSONL = kanban.getBoardJSON(boardL);
} else {
verbose("item color change");
boardL = $(elL.parentNode.parentNode).attr("data-id");
var pos = kanban.findElementPosition(elL);
boardJSONL = kanban.getBoardJSON(boardL).item[pos];
}
var currentColor = boardJSONL.color;
verbose("Current color " + currentColor);
if (currentColor !== colorL.toString()) {
$(elL).removeClass("kanban-header-" + currentColor);
boardJSONL.color = colorL.toString();
kanban.onChange();
}
};
var jscolorL;
el._jscLinkedInstance = undefined;
jscolorL = new window.jscolor(el,{onFineChange: onchange, valueElement:undefined});
jscolorL.show();
var currentColor = boardJSON.color;
verbose("Current color " + currentColor);
var index = kanban.options.colors.findIndex(function (element) {
return (element === currentColor);
}) + 1;
verbose("Next index " + index);
if (index >= kanban.options.colors.length) { index = 0; }
var nextColor = kanban.options.colors[index];
verbose("Next color " + nextColor);
boardJSON.color = nextColor;
$(el).removeClass("kanban-header-" + currentColor);
$(el).addClass("kanban-header-" + nextColor);
kanban.onChange();
if (currentColor === undefined) {
currentColor = '';
}
jscolorL.fromString(currentColor);
},
buttonClick: function (el, boardId, e) {
e.stopPropagation();

101
www/kanban/jkanban.js
View File

@ -52,6 +52,7 @@
widthBoard: '250px',
responsive: '700',
colors: ["yellow", "green", "blue", "red", "orange"],
responsivePercentage: false,
boards: [],
dragBoards: true,
addItemButton: false,
@ -67,7 +68,7 @@
click: function (el) {},
boardTitleclick: function (el, boardId) {},
buttonClick: function (el, boardId) {},
colorClick: function (el, boardId) {},
colorClick: function (el, type) {},
addItemClick: function (el, boardId) {},
onChange: function () {}
};
@ -85,12 +86,12 @@
//Init Drag Board
self.drakeBoard = self.dragula([self.container], {
moves: function (el, source, handle, sibling) {
if (self.options.readOnly) { return false; }
if (self.options.readOnly) { return false; }
if (!self.options.dragBoards) return false;
return (handle.classList.contains('kanban-board-header') || handle.classList.contains('kanban-title-board'));
},
accepts: function (el, target, source, sibling) {
if (self.options.readOnly) { return false; }
if (self.options.readOnly) { return false; }
return target.classList.contains('kanban-container');
},
revertOnSpill: true,
@ -144,15 +145,18 @@
//Init Drag Item
self.drake = self.dragula(self.boardContainer, {
moves: function (el, source, handle, sibling) {
if (self.options.readOnly) { return false; }
return handle.classList.contains('kanban-item');
},
accepts: function (el, target, source, sibling) {
if (self.options.readOnly) { return false; }
return true;
},
revertOnSpill: true
moves: function (el, source, handle, sibling) {
if (self.options.readOnly) { return false; }
return handle.classList.contains('kanban-item');
},
accepts: function (el, target, source, sibling) {
if (self.options.readOnly) { return false; }
return true;
},
revertOnSpill: true
})
.on('cancel', function(el, container, source) {
self.enableAllBoards();
})
.on('drag', function (el, source) {
// we need to calculate the position before starting to drag
@ -184,7 +188,9 @@
var boardId = source.parentNode.dataset.id;
self.options.dragcancelEl(el, boardId);
})
.on('drop', function (el, target, source, sibling) {
.on('drop', function(el, target, source, sibling) {
self.enableAllBoards();
console.log("In drop");
// TODO: update board object board order
@ -229,7 +235,7 @@
// if (board1==board2 && pos2<pos1)
// pos2 = pos2;
// moving element to target array
// moving element to target array
board1.item.splice(pos1, 1);
board2.item.splice(pos2 - 1, 0, item);
@ -240,9 +246,18 @@
}
};
this.enableAllBoards = function() {
var allB = document.querySelectorAll('.kanban-board');
if (allB.length > 0 && allB !== undefined) {
for (var i = 0; i < allB.length; i++) {
allB[i].classList.remove('disabled-board');
}
}
};
this.addElement = function (boardID, element) {
// add Element to JSON
// add Element to JSON
var boardJSON = __findBoardJSON(boardID);
boardJSON.item.push({
title: element.title
@ -260,6 +275,7 @@
nodeItem.dragendfn = element.dragend;
nodeItem.dropfn = element.drop;
__onclickHandler(nodeItem);
__onColorClickHandler(nodeItem, "item");
board.appendChild(nodeItem);
// send event that board has changed
self.onChange();
@ -272,8 +288,19 @@
return self;
};
this.addBoards = function (boards) {
var boardWidth = self.options.widthBoard;
this.addBoards = function(boards) {
if (self.options.responsivePercentage) {
self.container.style.width = '100%';
self.options.gutter = '1%';
if (window.innerWidth > self.options.responsive) {
var boardWidth = (100 - boards.length * 2) / boards.length;
} else {
var boardWidth = 100 - (boards.length * 2);
}
} else {
var boardWidth = self.options.widthBoard;
}
var addButton = self.options.addItemButton;
var buttonContent = self.options.buttonContent;
@ -290,7 +317,11 @@
boardNode.dataset.id = board.id;
boardNode.classList.add('kanban-board');
//set style
boardNode.style.width = boardWidth;
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
@ -303,6 +334,10 @@
headerBoard.classList.add(value);
});
if (board.color !== '' && board.color !== undefined) {
headerBoard._jscLinkedInstance = undefined;
jscolorL = new jscolor(headerBoard,{valueElement:undefined});
jscolorL.fromString(board.color);
headerBoard._jscLinkedInstance = undefined;
headerBoard.classList.add("kanban-header-" + board.color);
}
titleBoard = document.createElement('div');
@ -311,7 +346,7 @@
titleBoard.clickfn = board.boardTitleClick;
__onboardTitleClickHandler(titleBoard);
headerBoard.appendChild(titleBoard);
__onColorClickHandler(headerBoard);
__onColorClickHandler(headerBoard, "board");
// if add button is true, add button to the board
if (addButton) {
@ -332,14 +367,24 @@
var nodeItem = document.createElement('div');
nodeItem.classList.add('kanban-item');
nodeItem.dataset.eid = itemKanban.id;
nodeItem.innerHTML = itemKanban.title;
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
nodeItem.clickfn = itemKanban.click;
nodeItem.dragfn = itemKanban.drag;
nodeItem.dragendfn = itemKanban.dragend;
nodeItem.dropfn = itemKanban.drop;
nodeItemText.clickfn = itemKanban.click;
nodeItemText.dragfn = itemKanban.drag;
nodeItemText.dragendfn = itemKanban.dragend;
nodeItemText.dropfn = itemKanban.drop;
//add click handler of item
__onclickHandler(nodeItem);
__onclickHandler(nodeItemText);
if (itemKanban.color !== '' && itemKanban.color !== undefined) {
jscolorL = new jscolor(nodeItem,{valueElement:undefined});
jscolorL.fromString(itemKanban.color);
}
__onColorClickHandler(nodeItem, "item");
contentBoard.appendChild(nodeItem);
}
//footer board
@ -487,12 +532,10 @@
});
}
function __onColorClickHandler(nodeItem, clickfn) {
function __onColorClickHandler(nodeItem, type) {
nodeItem.addEventListener('click', function (e) {
e.preventDefault;
self.options.colorClick(this);
if (typeof (this.clickfn) === 'function')
this.clickfn(this);
self.options.colorClick(this, type);
});
}

1855
www/kanban/jscolor.js Normal file
View File

File diff suppressed because it is too large Load Diff