improve item color picker logic and UX

www/kanban/inner.js

@@ -207,15 +207,36 @@ 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 boardL = $(elL.parentNode).attr("data-id");
-                    var boardJSONL = kanban.getBoardJSON(boardL);
+                    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()) {
@@ -226,12 +247,16 @@ define([
                 };
                 var jscolorL;
                 el._jscLinkedInstance = undefined;
-                jscolorL = new jscolor(el,{onFineChange: onchange, valueElement:undefined});
+                jscolorL = new window.jscolor(el,{onFineChange: onchange, valueElement:undefined});
                 jscolorL.show();
                 var currentColor = boardJSON.color;
+                if (currentColor == undefined) {
+                    currentColor = ''
+                }
                 jscolorL.fromString(currentColor);
             },
             buttonClick: function (el, boardId) {
+                e.stopPropagation();
                 if (framework.isReadOnly() || framework.isLocked()) { return; }
                 UI.confirm(Messages.kanban_deleteBoard, function (yes) {
                     if (!yes) { return; }

www/kanban/jkanban.js

@@ -68,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 () {}
                 };
@@ -345,7 +345,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) {
@@ -378,25 +378,7 @@
                             nodeItemText.dropfn = itemKanban.drop;
                             //add click handler of item
                             __onclickHandler(nodeItemText);
-
-                            var onchange = function (colorL) {
-                                var currentColor = itemKanban.color;
-                                if (currentColor !== colorL.toString()) {
-                                    itemKanban.color = colorL.toString();
-                                    self.onChange();
-                                }
-                            };
-
-                            var jscolorL;
-                            nodeItem._jscLinkedInstance = undefined;
-                            jscolorL = new jscolor(nodeItem,{onFineChange: onchange, valueElement:undefined});
-                            var currentColor = itemKanban.color;
-                            // If not defined dont have it undefined
-                            if (currentColor == undefined) {
-                                currentColor = ''
-                            }
-                            console.log(currentColor);
-                            jscolorL.fromString(currentColor);
+                            __onColorClickHandler(nodeItem, "item");
 
                             contentBoard.appendChild(nodeItem);
                         }
@@ -545,12 +527,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);
                     });
                 }