Custom attributes to items

[marcosrocha85]

Wouldn't be nice if we had custom attributes to items of a board with data- like properties? Here's a suggestion:

@@ -14,6 +14,7 @@ var dragula = require('dragula');

     this.jKanban = function () {
         var self = this;
+        this._disallowedItemProperties = ['id', 'title', 'click', 'drag', 'dragend', 'drop'];
         this.element = '';
         this.container = '';
         this.boardContainer = [];
@@ -159,6 +160,7 @@ var dragula = require('dragula');
             nodeItem.dragfn = element.drag;
             nodeItem.dragendfn = element.dragend;
             nodeItem.dropfn = element.drop;
+            __appendCustomProperties(nodeItem, element);
             __onclickHandler(nodeItem);
             board.appendChild(nodeItem);
             return self;
@@ -249,6 +251,7 @@ var dragula = require('dragula');
                     nodeItem.dragfn = itemKanban.drag;
                     nodeItem.dragendfn = itemKanban.dragend;
                     nodeItem.dropfn = itemKanban.drop;
+                    __appendCustomProperties(nodeItem, itemKanban);
                     //add click handler of item
                     __onclickHandler(nodeItem);
                     contentBoard.appendChild(nodeItem);
@@ -351,6 +354,15 @@ var dragula = require('dragula');
             return el[0]
         }

+        function __appendCustomProperties(element, parentObject) {
+            for (var propertyName in parentObject) {
+                if (self._disallowedItemProperties.indexOf(propertyName) > -1) {
+                    continue;
+                }
+
+                element.setAttribute('data-' + propertyName, parentObject[propertyName]);
+            }
+        }

Usage example:

var jkanban = new jKanban({
    boards:
    [
        {
            "id"    : "_todo",
            "title" : "Todo Tasks",
            "item"  : [
                {
                    "id"      : "1",
                    "title"   : "Card inner content...",
                    "username": "marcosrocha85"
                }
            ]
        }
    ]});

That will produce a result like this:

<div data-id="_todo" class="kanban-board" style="width: 250px; margin-left: 15px; margin-right: 15px;">
    <header class="kanban-board-header">
        <div class="kanban-title-board">
            Todo Tasks
        </div>
    </header>
    <main class="kanban-drag">
        <div class="kanban-item" data-eid="1" data-username="marcosrocha85">
            Card inner content...
        </div>
    </main>
    <footer></footer>
</div>

If it's ok, I can create a pull request.

[riktar]

Hi @marcosrocha85 It's a great idea, a pull request will welcome :smile: Thanks for support!