Kanban App

by karim79

HTML

<table id="board">
    <tr class="columnHeading"><td>Prepared</td><td>Dev in progress</td><td>QA by dev</td><td>Ready for QA</td>
    </tr>
    <tr class="controls"><td colspan="4"><span class="addRow">Add row</span></td></tr>
</table>

CSS

#board tr.columnHeading > td {
    width: 170px;.
    text-align: center;
    font-weight: bold;
    padding-top: 5px; 
    padding-bottom: 5px;
    background: lightblue;  
}

.controls > td {
    text-align: left;
    font-size: 12px;
    background: #EEE9C1; 
}

.controls > td:hover {
    color: #ABAE71;
}

#board .edit {
    font-size: 12px;  
}

#board .edit:hover {
    color: blue;
    text-decoration: underline;
}

JavaScript

var board = (function() {

    var conf = {
        columns: 4,
        boardId: "board"
    };

    var b = $("#" + conf.boardId);

    var addRow = function() {
        var row = '<tr class="content clean">';
        var editLink = '<span class="edit">[edit]</span>';
        for (var i = 0; i < conf.columns; i++) {
            row = row += "<td>" + editLink + "</td>";
        }
        row += "</tr>";
        b.append(row);
    };
    
    var nl2br = function (str) {
        return str.replace(/\n\r?/g, '<br />');
    };

    var isBeingEdited = function () {
        
    };

    // return interface to closure
    return {
        addRow: addRow,
        nl2br: nl2br
    };
}());

$("span.addRow").click(board.addRow);

$("#board").on("dblclick", function(e) {
    var t = e.target;
    if ($(t).closest(".content").length) {
        var ta = $("<textarea />").text($(t).text()).blur(function() {
            $(this).replaceWith("<span>" + board.nl2br($(this).val()) + "</span>");
        });

        $(t).html(ta);
    }


});