Checkbox functionality

Signed-off-by: Thomas Anderson <me@thomasanderson.cloud>

appinfo/info.xml

@@ -22,6 +22,6 @@ The Notes app is a distraction free notes taking app. It provides categories for
     <repository type="git">https://github.com/nextcloud/notes.git</repository>
     <screenshot small-thumbnail="https://raw.githubusercontent.com/nextcloud/screenshots/master/apps/Notes/notes-thumbnail.jpg">https://raw.githubusercontent.com/nextcloud/screenshots/master/apps/Notes/notes.png</screenshot>
     <dependencies>
-        <nextcloud min-version="14" max-version="16" />
+        <nextcloud min-version="14" max-version="17" />
     </dependencies>
 </info>

css/notes.scss

@@ -290,6 +290,37 @@ form.category .icon-confirm {
     font-family: MONOSPACE;
 }
 
+/* Checkboxes */
+.CodeMirror .CodeMirror-code .cm-formatting-task {
+    position: relative;
+    display: inline-block;
+    width: 2em;
+}
+
+.CodeMirror .CodeMirror-code .cm-formatting-task.cm-meta::before {
+    content: "\2610";
+    font-size: 1.7em;
+    background: white;
+    position: absolute;
+}
+
+.CodeMirror .CodeMirror-code .cm-formatting-task.cm-property::before {
+    content: "\2611";
+    font-size: 1.7em;
+    background: white;
+    position: absolute;
+}
+
+.CodeMirror .CodeMirror-code .CodeMirror-line.completed-task {
+	color: #999;
+	text-decoration: line-through;
+}
+
+/* Recommended tab size increase for readability */
+.CodeMirror .CodeMirror-code .cm-tab {
+    width: 2em;
+}
+
 /* distraction free styles */
 :-webkit-full-screen,
 :-moz-full-screen,

js/app/controllers/notecontroller.js

@@ -40,6 +40,22 @@ app.controller('NoteController', function($routeParams, $scope, NotesModel,
             t('notes', 'New note');
     };
 
+    $scope.toggleCheckbox = function (el) {
+        var $el = $(el);
+        var cm = $('.CodeMirror')[0].CodeMirror;
+        var doc = cm.getDoc();
+        var index = $el.parents('.CodeMirror-line').index();
+        var line = doc.getLineHandle(index);
+
+        var newvalue = ( $el.text() === '[x]' ) ? '[ ]' : '[x]';
+
+        // + 1 for some reason... not sure why
+        doc.replaceRange(newvalue,
+            {line: index, ch: line.text.indexOf('[')},
+            {line: index, ch: line.text.indexOf(']') + 1}
+        );
+    };
+
     $scope.onEdit = function() {
         var note = $scope.note;
         note.unsaved = true;

js/app/directives/editor.js

@@ -20,6 +20,19 @@ app.directive('editor', ['$timeout',
 			simplemde.value(scope.note.content);
 			simplemde.codemirror.focus();
 
+			/* Initialize Checkboxes */
+			$('.CodeMirror-code').on('mousedown.checkbox touchstart.checkbox', '.cm-formatting-task', function (e) {
+				e.preventDefault();
+				e.stopImmediatePropagation();
+				scope.toggleCheckbox(e.target);
+			});
+
+			simplemde.codemirror.on('update', function () {
+				// For strikethrough styling of completed tasks
+				$('.CodeMirror-line').removeClass('completed-task');
+				$('.CodeMirror-line:contains("[x]")').addClass('completed-task');
+			});
+
 			simplemde.codemirror.on('change', function() {
 				$timeout(function() {
 					scope.$apply(function () {