define([ 'jquery', 'json.sortify', '/bower_components/nthen/index.js', '/common/sframe-common.js', '/common/sframe-app-framework.js', '/common/sframe-common-codemirror.js', '/common/common-util.js', '/common/common-hash.js', '/common/common-interface.js', '/common/modes.js', '/customize/messages.js', '/common/hyperscript.js', '/common/text-cursor.js', '/common/diffMarked.js', '/bower_components/chainpad/chainpad.dist.js', '/bower_components/marked/marked.min.js', 'cm/lib/codemirror', 'cm/mode/gfm/gfm', 'css!/bower_components/codemirror/lib/codemirror.css', 'css!/bower_components/codemirror/addon/dialog/dialog.css', 'css!/bower_components/codemirror/addon/fold/foldgutter.css', '/kanban/jkanban.js', '/common/jscolor.js', 'css!/kanban/jkanban.css', 'less!/kanban/app-kanban.less' ], function ( $, Sortify, nThen, SFCommon, Framework, SFCodeMirror, Util, Hash, UI, Modes, Messages, h, TextCursor, DiffMd, ChainPad, Marked, CodeMirror) { var verbose = function (x) { console.log(x); }; verbose = function () {}; // comment out to enable verbose logging var onRedraw = Util.mkEvent(); Messages.kanban_title = "Title"; // XXX Messages.kanban_body = "Body"; // XXX Messages.kanban_color = "Color"; // XXX Messages.kanban_submit = "Submit"; // XXX Messages.kanban_delete = "Delete"; // XXX Messages.kanban_tags = "Filter tags"; // XXX // XXX // Conflicts // use cursor channel to tell others what you are editing // add outline + warning inside the modal? var setValueAndCursor = function (input, val, _cursor) { if (!input) { return; } var $input = $(input); var focus = _cursor || $input.is(':focus'); var oldVal = $input.val(); var ops = ChainPad.Diff.diff(_cursor ? _cursor.value : oldVal, val); var cursor = _cursor || input; var selects = ['selectionStart', 'selectionEnd'].map(function (attr) { return TextCursor.transformCursor(cursor[attr], ops); }); $input.val(val); if (focus) { $input.focus(); } input.selectionStart = selects[0]; input.selectionEnd = selects[1]; }; var getExistingTags = function (boards) { var tags = []; boards = boards || {}; Object.keys(boards.items || {}).forEach(function (id) { var data = boards.items[id]; if (!Array.isArray(data.tags)) { return; } data.tags.forEach(function (tag) { if (tags.indexOf(tag) === -1) { tags.push(tag); } }); }); tags.sort(); return tags; }; var addEditItemButton = function () {}; var onRemoteChange = Util.mkEvent(); var editModal; var PROPERTIES = ['title', 'body', 'tags', 'color']; var BOARD_PROPERTIES = ['title', 'color']; var createEditModal = function (framework, kanban) { var dataObject = {}; var isBoard, id; var commit = function () { framework.localChange(); kanban.setBoards(kanban.options.boards); addEditItemButton(framework, kanban); }; if (editModal) { return editModal; } var titleInput, tagsDiv, colors, text; var content = h('div', [ h('label', {for:'cp-kanban-edit-title'}, Messages.kanban_title), titleInput = h('input#cp-kanban-edit-title'), h('label', {for:'cp-kanban-edit-body'}, Messages.kanban_body), h('div#cp-kanban-edit-body', [ text = h('textarea') ]), h('label', {for:'cp-kanban-edit-tags'}, Messages.fm_tagsName), tagsDiv = h('div#cp-kanban-edit-tags'), h('label', {for:'cp-kanban-edit-color'}, Messages.kanban_color), colors = h('div#cp-kanban-edit-colors'), ]); // Title var $title = $(titleInput); $title.on('change keyup', function () { dataObject.title = $title.val(); commit(); }); var title = { getValue: function () { return $title.val(); }, setValue: function (val, preserveCursor) { if (!preserveCursor) { $title.val(val); } else { setValueAndCursor(titleInput, val); } } }; // Body var editor = CodeMirror.fromTextArea(text, { lineWrapping: true, styleActiveLine : true, mode: "gfm" }); var common = framework._.sfCommon; var markdownTb = common.createMarkdownToolbar(editor); $(text).before(markdownTb.toolbar); $(markdownTb.toolbar).show(); editor.refresh(); var body = { getValue: function () { return editor.getValue(); }, setValue: function (val, preserveCursor) { if (isBoard) { return; } if (!preserveCursor) { setTimeout(function () { editor.setValue(val || ' '); editor.setValue(val || ''); editor.save(); }); } else { SFCodeMirror.setValueAndCursor(editor, editor.getValue(), val || ''); } } }; editor.on('change', function () { dataObject.body = editor.getValue(); commit(); }); // Tags var $tags = $(tagsDiv); var _field, initialTags; var tags = { getValue: function () { if (!_field) { return; } return _field.getTokens(); }, setValue: function (tags, preserveCursor) { if (isBoard) { return; } if (preserveCursor && initialTags && Sortify(tags || []) === initialTags) { // Don't redraw if there is no change return; } initialTags = Sortify(tags || []); $tags.empty(); var input = UI.dialog.textInput(); $tags.append(input); var existing = getExistingTags(kanban.options.boards); _field = UI.tokenField(input, existing).preventDuplicates(function (val) { UI.warn(Messages._getKey('tags_duplicate', [val])); }); _field.setTokens(tags || []); var commitTags = function () { dataObject.tags = _field.getTokens(); initialTags = Sortify(dataObject.tags); commit(); }; _field.tokenfield.on('tokenfield:createdtoken', commitTags); _field.tokenfield.on('tokenfield:editedoken', commitTags); _field.tokenfield.on('tokenfield:removedtoken', commitTags); } }; // Colors var $colors = $(colors); var palette = ['']; for (var i=1; i<=8; i++) { palette.push('color'+i); } var selectedColor = ''; palette.forEach(function (color) { var $color = $(h('span.cp-kanban-palette.fa')); $color.addClass('cp-kanban-palette-'+(color || 'nocolor')); $color.click(function () { if (color === selectedColor) { return; } selectedColor = color; $colors.find('.cp-kanban-palette').removeClass('fa-check'); var $col = $colors.find('.cp-kanban-palette-'+(color || 'nocolor')); $col.addClass('fa-check'); dataObject.color = color; commit(); }).appendTo($colors); }); var color = { getValue: function () { return selectedColor; }, setValue: function (color) { $colors.find('.cp-kanban-palette').removeClass('fa-check'); var $col = $colors.find('.cp-kanban-palette-'+(color || 'nocolor')); $col.addClass('fa-check'); } }; var setId = function (_isBoard, _id) { isBoard = _isBoard; id = _id; if (_isBoard) { dataObject = kanban.getBoardJSON(id); $(content) .find('#cp-kanban-edit-body, #cp-kanban-edit-tags, [for="cp-kanban-edit-body"], [for="cp-kanban-edit-tags"]') .hide(); } else { dataObject = kanban.getItemJSON(id); $(content) .find('#cp-kanban-edit-body, #cp-kanban-edit-tags, [for="cp-kanban-edit-body"], [for="cp-kanban-edit-tags"]') .show(); } }; var button = [{ className: 'danger left', name: Messages.kanban_delete, onClick: function () { var boards = kanban.options.boards || {}; if (isBoard) { var list = boards.list || []; var idx = list.indexOf(id); if (idx !== -1) { list.splice(idx, 1); } delete (boards.data || {})[id]; return void commit(); } Object.keys(boards.data || {}).forEach(function (boardId) { var board = boards.data[boardId]; if (!board) { return; } var items = board.item || []; var idx = items.indexOf(id); if (idx !== -1) { items.splice(idx, 1); } }); delete (boards.items || {})[id]; commit(); }, keys: [] }, { className: 'primary', name: Messages.filePicker_close, onClick: function () { }, keys: [] }]; var modal = UI.dialog.customModal(content, { buttons: button }); onRemoteChange.reg(function () { if (isBoard) { dataObject = kanban.getBoardJSON(id); } else { dataObject = kanban.getItemJSON(id); } // Check if our itme has been deleted if (!dataObject) { var $frame = $(modal).parents('.alertify').first(); if ($frame[0] && $frame[0].closeModal) { $frame[0].closeModal(); } return; } // Not deleted, apply updates PROPERTIES.forEach(function (type) { editModal[type].setValue(dataObject[type], true); }); }); return { modal: modal, setId: setId, title: title, body: body, tags: tags, color: color }; }; var getItemEditModal = function (framework, kanban, eid) { // Create modal if needed if (!editModal) { editModal = createEditModal(framework, kanban); } editModal.setId(false, eid); var boards = kanban.options.boards || {}; var item = (boards.items || {})[eid]; if (!item) { return void UI.warn(Messages.error); } PROPERTIES.forEach(function (type) { if (!editModal[type]) { return; } editModal[type].setValue(item[type]); }); UI.openCustomModal(editModal.modal); }; var getBoardEditModal = function (framework, kanban, id) { // Create modal if needed if (!editModal) { editModal = createEditModal(framework, kanban); } editModal.setId(true, id); var boards = kanban.options.boards || {}; var board = (boards.data || {})[id]; if (!board) { return void UI.warn(Messages.error); } BOARD_PROPERTIES.forEach(function (type) { if (!editModal[type]) { return; } editModal[type].setValue(board[type]); }); UI.openCustomModal(editModal.modal); }; addEditItemButton = function (framework, kanban) { if (!kanban) { return; } if (framework.isReadOnly() || framework.isLocked()) { return; } var $container = $(kanban.element); $container.find('.kanban-edit-item').remove(); $container.find('.kanban-item').each(function (i, el) { var itemId = $(el).attr('data-eid'); $('