Add color picker to items

www/kanban/inner.js

@@ -137,7 +137,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();

www/kanban/jkanban.js

@@ -374,14 +374,38 @@
                             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;
+                            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
-                            __onclickHandler(nodeItem);
+                            __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);
+
                             contentBoard.appendChild(nodeItem);
                         }
                         //footer board
@@ -575,7 +599,7 @@
         }());
 
 
-}, {
+    }, {
         "dragula": 9
     }],
     2: [function (require, module, exports) {
@@ -583,7 +607,7 @@
             return Array.prototype.slice.call(a, n);
         }
 
-}, {}],
+    }, {}],
     3: [function (require, module, exports) {
         'use strict';
 
@@ -598,7 +622,7 @@
             });
         };
 
-}, {
+    }, {
         "ticky": 10
     }],
     4: [function (require, module, exports) {
@@ -669,7 +693,7 @@
             return thing;
         };
 
-}, {
+    }, {
         "./debounce": 3,
         "atoa": 2
     }],
@@ -786,7 +810,7 @@
             }
 
         }).call(this, typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
-}, {
+    }, {
         "./eventmap": 6,
         "custom-event": 7
     }],
@@ -807,7 +831,7 @@
             module.exports = eventmap;
 
         }).call(this, typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
-}, {}],
+    }, {}],
     7: [function (require, module, exports) {
         (function (global) {
 
@@ -863,7 +887,7 @@
                     }
 
         }).call(this, typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
-}, {}],
+    }, {}],
     8: [function (require, module, exports) {
         'use strict';
 
@@ -899,7 +923,7 @@
             rm: rmClass
         };
 
-}, {}],
+    }, {}],
     9: [function (require, module, exports) {
         (function (global) {
             'use strict';
@@ -1586,7 +1610,7 @@
             module.exports = dragula;
 
         }).call(this, typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
-}, {
+    }, {
         "./classes": 8,
         "contra/emitter": 4,
         "crossvent": 5
@@ -1605,5 +1629,5 @@
         }
 
         module.exports = tick;
-}, {}]
+    }, {}]
 }, {}, [1]);