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

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

Browse Source 
[WIP] Partially Fix #254
pull/1/head
ansuz 7 years ago 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

1
.jshintignore
Unescape Escape View File

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

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

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

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

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

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

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

1855
www/kanban/jscolor.js
View File

File diff suppressed because it is too large Load Diff
Write Preview
Loading…
Cancel
Save