diff --git a/bower.json b/bower.json index f9501dfeb..7bf775e64 100644 --- a/bower.json +++ b/bower.json @@ -45,7 +45,8 @@ "bootstrap-tokenfield": "^0.12.1", "localforage": "^1.5.2", "html2canvas": "^0.4.1", - "croppie": "^2.5.0" + "croppie": "^2.5.0", + "sortablejs": "#^1.6.0" }, "resolutions": { "bootstrap": "v4.0.0-alpha.6" diff --git a/www/todo/app-todo.less b/www/todo/app-todo.less index d4fe830b3..5008498b1 100644 --- a/www/todo/app-todo.less +++ b/www/todo/app-todo.less @@ -88,6 +88,13 @@ color: #777; } + .cp-app-todo-task-input { + margin: @spacing; + flex: 1; + min-width: 0; + font-weight: bold; + display: none; + } .cp-app-todo-task-text { margin: @spacing; flex: 1; diff --git a/www/todo/inner.js b/www/todo/inner.js index 748467360..d502d2990 100644 --- a/www/todo/inner.js +++ b/www/todo/inner.js @@ -9,6 +9,7 @@ define([ '/common/common-hash.js', '/todo/todo.js', '/customize/messages.js', + '/bower_components/sortablejs/Sortable.min.js', 'css!/bower_components/bootstrap/dist/css/bootstrap.min.css', 'less!/bower_components/components-font-awesome/css/font-awesome.min.css', @@ -23,7 +24,8 @@ define([ UI, Hash, Todo, - Messages + Messages, + Sortable ) { var APP = window.APP = {}; @@ -47,6 +49,17 @@ define([ var onReady = function () { var todo = Todo.init(APP.lm.proxy); + Sortable.create($list[0], { + store: { + get: function (sortable) { + return todo.getOrder(); + }, + set: function (sortable) { + todo.reorder(sortable.toArray()); + } + } + }); + var deleteTask = function(id) { todo.remove(id); @@ -106,6 +119,7 @@ define([ $taskDiv.appendTo($list); } $taskDiv.data('id', el); + $taskDiv.attr('data-id', el); makeCheckbox(el, function (/*state*/) { APP.display(); @@ -121,9 +135,25 @@ define([ $taskDiv.addClass('cp-app-todo-task-complete'); } - $('', { 'class': 'cp-app-todo-task-text' }) + var $input = $('', { + type: 'text', + 'class': 'cp-app-todo-task-input' + }).val(entry.task).keydown(function (e) { + if (e.which === 13) { + todo.val(el, 'task', $input.val().trim()); + $input.hide(); + $span.text($input.val().trim()); + $span.show(); + } + }).appendTo($taskDiv); + + var $span = $('', { 'class': 'cp-app-todo-task-text' }) .text(entry.task) - .appendTo($taskDiv); + .appendTo($taskDiv) + .click(function () { + $input.show(); + $span.hide(); + }); /*$('', { 'class': 'cp-app-todo-task-date' }) .text(new Date(entry.ctime).toLocaleString()) .appendTo($taskDiv);*/ diff --git a/www/todo/todo.js b/www/todo/todo.js index 8c68774dd..8727180c8 100644 --- a/www/todo/todo.js +++ b/www/todo/todo.js @@ -77,6 +77,17 @@ define([ if (proxy.data[id]) { delete proxy.data[id]; } }; + /* change the order in the proxy (with a check to make sure that nothing is missing */ + var reorder = function (proxy, order) { + var existingOrder = proxy.order.slice().sort(); + var newOrder = order.slice().sort(); + if (JSON.stringify(existingOrder) === JSON.stringify(newOrder)) { + proxy.order = order.slice(); + } else { + console.error("Can't reorder the tasks. Some tasks are missing or added"); + } + }; + Todo.init = function (proxy) { var api = {}; initialize(proxy); @@ -90,6 +101,12 @@ define([ api.remove = function (id) { return remove(proxy, id); }; + api.getOrder = function () { + return proxy.order.slice(); + }; + api.reorder = function (order) { + return reorder(proxy, order); + }; return api; };