cryptpad/www/kanban/inner.js

define([
    'jquery',
    'json.sortify',
    '/bower_components/nthen/index.js',
    '/common/sframe-common.js',
    '/common/sframe-app-framework.js',
    '/common/common-util.js',
    '/common/common-hash.js',
    '/common/common-interface.js',
    '/common/modes.js',
    '/customize/messages.js',
    '/kanban/jkanban.js',
    '/common/jscolor.js',
    'css!/kanban/jkanban.css',

    'less!/kanban/app-kanban.less'
], function (
    $,
    Sortify,
    nThen,
    SFCommon,
    Framework,
    Util,
    Hash,
    UI,
    Modes,
    Messages)
{

    var verbose = function (x) { console.log(x); };
    verbose = function () {}; // comment out to enable verbose logging

    var COLORS = ['yellow', 'green', 'orange', 'blue', 'red', 'purple', 'cyan', 'lightgreen', 'lightblue'];

    var addRemoveItemButton = function (framework, kanban) {
        if (!kanban) { return; }
        if (framework.isReadOnly() || framework.isLocked()) { return; }
        var $container = $(kanban.element);
        $container.find('.kanban-remove-item').remove();
        $container.find('.kanban-board .kanban-item').each(function (i, el) {
            var pos = kanban.findElementPosition(el);
            var board = kanban.options.boards.find(function (b) {
                return b.id === $(el.parentNode.parentNode).attr('data-id');
            });
            $('<button>', {
                'class': 'kanban-remove-item btn btn-default fa fa-times',
                title: Messages.kanban_removeItem
            }).click(function (e) {
                e.stopPropagation();
                UI.confirm(Messages.kanban_removeItemConfirm, function (yes) {
                    if (!yes) { return; }
                    board.item.splice(pos, 1);
                    $(el).remove();
                    kanban.onChange();
                });
            }).appendTo($(el));
        });
    };

    // Kanban code
    var initKanban = function (framework, boards) {
        var defaultBoards = [{
            "id": "todo",
            "title": Messages.kanban_todo,
            "color": "blue",
            "item": [{
                "title": Messages._getKey('kanban_item', [1])
            }, {
                "title": Messages._getKey('kanban_item', [2])
            }]
        }, {
            "id": "working",
            "title": Messages.kanban_working,
            "color": "orange",
            "item": [{
                "title": Messages._getKey('kanban_item', [3])
            }, {
                "title": Messages._getKey('kanban_item', [4])
            }]
        }, {
            "id": "done",
            "title": Messages.kanban_done,
            "color": "green",
            "item": [{
                "title": Messages._getKey('kanban_item', [5])
            }, {
                "title": Messages._getKey('kanban_item', [6])
            }]
        }];

        if (!boards) {
            verbose("Initializing with default boards content");
            boards = defaultBoards;
        } else {
            verbose("Initializing with boards content " + boards);
        }

        // Remove any existing elements
        $(".kanban-container-outer").remove();

        var getInput = function () {
            return $('<input>', {
                'type': 'text',
                'id': 'kanban-edit',
                'size': '30'
            }).click(function (e) { e.stopPropagation(); });
        };

        var kanban = new window.jKanban({
            element: '#cp-app-kanban-content',
            gutter: '5px',
            widthBoard: '300px',
            buttonContent: '❌',
            colors: COLORS,
            readOnly: framework.isReadOnly(),
            onChange: function () {
                verbose("Board object has changed");
                framework.localChange();
                if (kanban) {
                    addRemoveItemButton(framework, kanban);
                }
            },
            click: function (el) {
                if (framework.isReadOnly() || framework.isLocked()) { return; }
                if (kanban.inEditMode) {
                    $(el).focus();
                    verbose("An edit is already active");
                    //return;
                }
                kanban.inEditMode = true;
                $(el).find('button').remove();
                var name = $(el).text();
                $(el).html('');
                var $input = getInput().val(name).appendTo(el).focus();
                $input[0].select();
                var save = function () {
                    // Store the value
                    var name = $input.val();
                    // Remove the input
                    $(el).text(name);
                    // Save the value for the correct board
                    var board = $(el).closest('.kanban-board').attr("data-id");
                    var pos = kanban.findElementPosition(el.parentNode);
                    kanban.getBoardJSON(board).item[pos].title = name;
                    kanban.onChange();
                    // Unlock edit mode
                    kanban.inEditMode = false;
                };
                $input.blur(save);
                $input.keydown(function (e) {
                    if (e.which === 13) {
                        e.preventDefault();
                        e.stopPropagation();
                        save();
                        if (!$input.val()) { return; }
                        if (!$(el).closest('.kanban-item').is(':last-child')) { return; }
                        $(el).closest('.kanban-board').find('.kanban-title-button.fa-plus').click();
                        return;
                    }
                    if (e.which === 27) {
                        e.preventDefault();
                        e.stopPropagation();
                        $(el).text(name);
                        kanban.inEditMode = false;
                        addRemoveItemButton(framework, kanban);
                        return;
                    }
                });

            },
            boardTitleClick: function (el, e) {
                e.stopPropagation();
                if (framework.isReadOnly() || framework.isLocked()) { return; }
                if (kanban.inEditMode) {
                    $(el).focus();
                    verbose("An edit is already active");
                    //return;
                }
                kanban.inEditMode = true;
                var name = $(el).text();
                $(el).html('');
                var $input = getInput().val(name).appendTo(el).focus();
                $input[0].select();
                var save = function () {
                    // Store the value
                    var name = $input.val();
                    // Remove the input
                    $(el).text(name);
                    // Save the value for the correct board
                    var board = $(el.parentNode.parentNode).attr("data-id");
                    kanban.getBoardJSON(board).title = name;
                    kanban.onChange();
                    // Unlock edit mode
                    kanban.inEditMode = false;
                };
                $input.blur(save);
                $input.keydown(function (e) {
                    if (e.which === 13) {
                        e.preventDefault();
                        e.stopPropagation();
                        save();
                        return;
                    }
                    if (e.which === 27) {
                        e.preventDefault();
                        e.stopPropagation();
                        $(el).text(name);
                        kanban.inEditMode = false;
                        return;
                    }
                });
            },
            colorClick: function (el, type) {
                if (framework.isReadOnly() || framework.isLocked()) { return; }
                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 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,{showOnClick: false, onFineChange: onchange, valueElement:undefined});
                jscolorL.show();
                var currentColor = boardJSON.color;
                if (currentColor === undefined) {
                    currentColor = '';
                }
                jscolorL.fromString(currentColor);
            },
            buttonClick: function (el, boardId, e) {
                e.stopPropagation();
                if (framework.isReadOnly() || framework.isLocked()) { return; }
                UI.confirm(Messages.kanban_deleteBoard, function (yes) {
                    if (!yes) { return; }
                    verbose("Delete board");
                    //var boardName = $(el.parentNode.parentNode).attr("data-id");
                    for (var index in kanban.options.boards) {
                        if (kanban.options.boards[index].id === boardId) {
                            break;
                        }
                        index++;
                    }
                    kanban.options.boards.splice(index, 1);
                    kanban.removeBoard(boardId);
                    kanban.onChange();
                });
            },
            addItemClick: function (el) {
                if (framework.isReadOnly() || framework.isLocked()) { return; }
                if (kanban.inEditMode) {
                    $(el).focus();
                    verbose("An edit is already active");
                    //return;
                }
                kanban.inEditMode = true;
                // create a form to enter element
                var boardId = $(el.parentNode.parentNode).attr("data-id");
                var $item = $('<div>', {'class': 'kanban-item new-item'});
                var $input = getInput().val(name).appendTo($item);
                kanban.addForm(boardId, $item[0]);
                $input.focus();
                var save = function () {
                    $item.remove();
                    kanban.inEditMode = false;
                    if (!$input.val()) { return; }
                    kanban.addElement(boardId, {
                        "title": $input.val(),
                    });
                };
                $input.blur(save);
                $input.keydown(function (e) {
                    if (e.which === 13) {
                        e.preventDefault();
                        e.stopPropagation();
                        save();
                        if (!$input.val()) { return; }
                        $(el).closest('.kanban-board').find('.kanban-title-button.fa-plus').click();
                        return;
                    }
                    if (e.which === 27) {
                        e.preventDefault();
                        e.stopPropagation();
                        $item.remove();
                        kanban.inEditMode = false;
                        return;
                    }
                });
            },
            addItemButton: true,
            boards: boards
        });

        var addBoardDefault = document.getElementById('kanban-addboard');
        $(addBoardDefault).attr('title', Messages.kanban_addBoard);
        addBoardDefault.addEventListener('click', function () {
            if (framework.isReadOnly()) { return; }
            var counter = 1;

            // Get the new board id
            var boardExists = function (b) { return b.id === "board" + counter; };
            while (kanban.options.boards.some(boardExists)) { counter++; }

            kanban.addBoards([{
                "id": "board" + counter,
                "title": Messages.kanban_newBoard,
                "color": COLORS[Math.floor(Math.random()*COLORS.length)], // random color
                "item": [{
                    "title": Messages._getKey('kanban_item', [1]),
                }]
            }]);
            kanban.onChange();
        });

        return kanban;
    };

    var mkHelpMenu = function (framework) {
        var $toolbarContainer = $('#cp-app-kanban-container');
        var helpMenu = framework._.sfCommon.createHelpMenu(['kanban']);
        $toolbarContainer.prepend(helpMenu.menu);

        framework._.toolbar.$drawer.append(helpMenu.button);
    };

    // Start of the main loop
    var andThen2 = function (framework) {

        var kanban;
        var $container = $('#cp-app-kanban-content');

        mkHelpMenu(framework);

        if (framework.isReadOnly()) {
            $container.addClass('cp-app-readonly');
        } else {
            framework.setFileImporter({}, function (content /*, file */) {
                var parsed;
                try { parsed = JSON.parse(content); }
                catch (e) { return void console.error(e); }
                return { content: parsed };
            });
        }

        framework.setFileExporter('.json', function () {
            return new Blob([JSON.stringify(kanban.getBoardsJSON(), 0, 2)], {
                type: 'application/json',
            });
        });

        framework.onEditableChange(function (unlocked) {
            if (framework.isReadOnly()) { return; }
            if (!kanban) { return; }
            if (unlocked) {
                addRemoveItemButton(framework, kanban);
                kanban.options.readOnly = false;
                return void $container.removeClass('cp-app-readonly');
            }
            kanban.options.readOnly = true;
            $container.addClass('cp-app-readonly');
        });

        var getSelectedElement = function () {
            var node = document.getSelection().anchorNode;
            return (node.nodeType === 3 ? node.parentNode : node);
        };
        var getCursor = function () {
            if (!kanban || !kanban.inEditMode) { return; }
            try {
                var el = getSelectedElement();
                var input = $(el).is('input') ? el : $(el).find('input')[0];
                if (!input) { return; }
                var $input = $(input);

                var pos;
                var $item = $(el).closest('.kanban-item');
                if ($item.length) {
                    pos = kanban.findElementPosition($item[0]);
                }
                var board = $input.closest('.kanban-board').attr('data-id');
                var val = ($input.val && $input.val()) || '';
                var start = input.selectionStart;
                var end = input.selectionEnd;


                var boardEl = kanban.options.boards.find(function (b) {
                    return b.id === board;
                });
                var oldVal = ((pos ? boardEl.item[pos] : boardEl) || {}).title;

                return {
                    board: board,
                    pos: pos,
                    value: val,
                    start: start,
                    end: end,
                    oldValue: oldVal
                };
            } catch (e) {
                return {};
            }
        };
        var restoreCursor = function (data) {
            try {
                var boardEl = kanban.options.boards.find(function (b) {
                    return b.id === data.board;
                });
                if (!boardEl) { return; }

                var $board = $('.kanban-board[data-id="'+data.board+'"');

                // Editing a board title...
                if (!data.pos && $board.length) {
                    if (boardEl.title !== data.oldValue) { return; }
                    $board.find('.kanban-title-board').click();
                    var $boardInput = $board.find('.kanban-title-board input');
                    $boardInput.val(data.value);
                    $boardInput[0].selectionStart = data.start;
                    $boardInput[0].selectionEnd = data.end;
                    return;
                }
                // Editing a deleted board title: abort
                if (!data.pos) {
                    return;
                }

                // An item was added: add a new item
                if (!data.oldValue) {
                    $board.find('.kanban-title-button.fa-plus').click();
                    var $newInput = $board.find('.kanban-item:last-child input');
                    $newInput.val(data.value);
                    $newInput[0].selectionStart = data.start;
                    $newInput[0].selectionEnd = data.end;
                    return;
                }

                // An item was edited: click on the correct item
                var newVal = boardEl.item[data.pos];
                if (!newVal || newVal.title !== data.oldValue) { return; }
                var $el = $('.kanban-board[data-id="' + data.board + '"]')
                            .find('.kanban-item:nth-child('+(data.pos + 1)+')');
                $el.find('.kanban-item-text').click();
                var $input = $el.find('input');
                if ($input.length) {
                    $input.val(data.value);
                    $input[0].selectionStart = data.start;
                    $input[0].selectionEnd = data.end;
                }
            } catch (e) {
                return;
            }
        };

        framework.onContentUpdate(function (newContent) {
            // Init if needed
            if (!kanban) {
                kanban = initKanban(framework, (newContent || {}).content);
                addRemoveItemButton(framework, kanban);
                return;
            }

            // Need to update the content
            verbose("Content should be updated to " + newContent);
            var currentContent = kanban.getBoardsJSON();
            var remoteContent = newContent.content;

            if (Sortify(currentContent) !== Sortify(remoteContent)) {
                var cursor = getCursor();
                verbose("Content is different.. Applying content");
                kanban.setBoards(remoteContent);
                kanban.inEditMode = false;
                addRemoveItemButton(framework, kanban);
                restoreCursor(cursor);
            }
        });

        framework.setContentGetter(function () {
            if (!kanban) {
                return {
                    content: []
                };
            }
            var content = kanban.getBoardsJSON();
            verbose("Content current value is " + content);
            return {
                content: content
            };
        });

        framework.onReady(function () {
            $("#cp-app-kanban-content").focus();
        });

        framework.onDefaultContentNeeded(function () {
            kanban = initKanban(framework);
        });

        framework.start();
    };

    var main = function () {
        // var framework;
        nThen(function (waitFor) {

            // Framework initialization
            Framework.create({
                toolbarContainer: '#cme_toolbox',
                contentContainer: '#cp-app-kanban-editor',
            }, waitFor(function (framework) {
                andThen2(framework);
            }));
        });
    };
    main();
});