Add 'tags' to annotations

Allow to add, select, unselect between all existings tags in the current
project (= on others annotations)

capsule-prototype/css/popup.css

 
+#popupLabelsInput label {
+  cursor: pointer;
+  width: fit-content;
+  padding: 2px;
+}
+
+#popupLabelsInput input:checked + label {
+  background-color: rgba(255, 255, 255, .5);
+}
 
 #popupSpace, #popupAlertSpace, #popupAddLinkSpace, #popupSettingsSpace {
 	width: 100%;

capsule-prototype/index.html

@@ -184,6 +184,14 @@
 
 					<div class="popupRightItem" id="popupSpeed" title="Speed"></div>
 					<input type='range' min='0' max='4' class='popupInput' id='popupSpeedInput' />
+
+          <div class="popupRightItem" id="popupLabels" title="Labels"></div>
+          <!-- templates -->
+          <div id='popupLabelsInput' class='popupInput flex-col'>
+            <input type='text' id='new_annotation_label' />
+            <input class='annotation_labels_template' type='checkbox' name='annotation_labels' id='' value='' style='display: none;' />
+            <label class='annotation_labels_template' for='' style='display: none;'></label>
+          </div>
 				</td>
 			</tr>
 		</table>

capsule-prototype/js/online-rekall/Project.js

@@ -211,6 +211,8 @@ Project.prototype.timelineUpdate = function() {
 Project.prototype.analyse = function() {
 	$('#flattentimeline').html("<div id='flattentimeline_highlight'></div>");
 
+  var parsed_labels = $('input.annotation_labels').toArray().map(i => i.value);
+
 	//Analyse
 	Tags.flattenTimelineTags = [];
 	var filtredTags = new Array();
@@ -223,6 +225,34 @@ Project.prototype.analyse = function() {
 				rekall.sortings["horizontal"].analyseAdd(tag);
 				rekall.sortings["colors"]    .analyseAdd(tag);
 				Tags.flattenTimelineTags.push(tag);
+        var labels = tag.getMetadata('Rekall->Labels');
+        if (labels && labels != '') {
+          var input_template = $('input.annotation_labels_template').first();
+          var html_label_template = $('label.annotation_labels_template').first();
+          var _labels = labels.split(';');
+          for (var i in _labels) {
+            var label = _labels[i];
+            if (label == '') continue;
+            if (parsed_labels.indexOf(label) != -1)
+              continue;
+            parsed_labels.push(label);
+            var inp = input_template.clone();
+            var id = 'annotation_label_' + parsed_labels.indexOf(label);
+            inp.attr('id', id);
+            inp.attr('value', label);
+
+            var html_label = html_label_template.clone();
+            html_label.attr('for', id);
+            html_label.html(label);
+
+            html_label.show();
+            html_label.addClass('annotation_labels').removeClass('annotation_labels_template');
+            inp.addClass('annotation_labels').removeClass('annotation_labels_template');
+
+            $('#popupLabelsInput').append(inp);
+            $('#popupLabelsInput').append(html_label);
+          }
+        }
 			}
 		}
 	}

capsule-prototype/js/online-script.js

@@ -152,6 +152,33 @@ $(document).ready(function() {
 });
 
 function setEditionControls() {
+
+  $('#new_annotation_label').keypress(function(event) {
+    var keycode = (event.keyCode ? event.keyCode : event.which);
+    if (keycode != 13) {
+      return
+    }
+    var label = $('#new_annotation_label').val();
+    var input = $('input.annotation_labels_template').first().clone();
+    var html_label = $('label.annotation_labels_template').first().clone();
+    var id = 'annotation_label_' + Math.floor((Math.random()*1000));
+
+    input.attr('checked', 'true');
+    input.attr('id', id);
+    input.attr('value', label);
+
+    html_label.attr('for', id);
+    html_label.html(label);
+
+    html_label.show();
+    html_label.addClass('annotation_labels').removeClass('annotation_labels_template');
+    input.addClass('annotation_labels').removeClass('annotation_labels_template');
+
+    $('#popupLabelsInput').append(input);
+    $('#popupLabelsInput').append(html_label);
+    $('#new_annotation_label').val('');
+  })
+
 	//Drag&drop files
 	$(document).on({
 		dragenter: function(event) {
@@ -465,6 +492,13 @@ function setEditionControls() {
 		closeInputs();
 	});
 
+	$("#popupLabels").click(function(event){
+		event.stopPropagation();
+		closeInputs();
+		$(this).hide();
+		$("#popupLabelsInput").show().focus();
+	});
+
 	$("#popupSpeed").click(function(event){
 		event.stopPropagation();
 		closeInputs();
@@ -777,6 +811,20 @@ function closeInputs() {
 				if(newSpeed!="") $("#popupSpeed").html(get_str_for_speed(newSpeed)).removeClass("empty");
 				else $("#popupSpeed").html("+ Set video speed during this annotation ").addClass("empty");
 
+			} else if($(this).attr("id")=="popupLabelsInput") {
+
+				var keyDoc = $(this).parent().attr("keydoc");
+        var newLabels = '';
+        $('[name="annotation_labels"]:checked')
+          .toArray().forEach(e => newLabels += e.value + ';');
+        console.log('new labels: ', newLabels);
+        setMetaFromDom(keyDoc, "Rekall->Labels", newLabels);
+
+        if (newLabels === '') {
+          $('#popupLabels').html('+ Set annotation labels ').addClass('empty');
+          $('#popupLabelsInput').hide();
+        }
+
 			} else if($(this).attr("id")=="popupAuthorInput") {
 
 				var keyDoc = $(this).parent().attr("keydoc");
@@ -1009,6 +1057,19 @@ bgColorLeft = getTagGradientColor(tag);
 	if((speed)&&(speed!="")) $("#popupSpeed").html(get_str_for_speed(speed)).removeClass("empty");
 	else $("#popupSpeed").html("+ Set video speed during this annotation").addClass("empty");
 
+	var labels = tag.getMetadata("Rekall->Labels");
+  if (labels && labels != '') {
+    var _labels = labels.split(';');
+    console.log('got labels', _labels);
+    $('input.annotation_labels').toArray().forEach(e => {
+      e.checked = (_labels.indexOf(e.value) != -1);
+    })
+    $('#popupLabelsInput').show();
+  } else {
+    $('#popupLabelsInput').hide();
+    $('#popupLabels').html('+ Add labels');
+  }
+
 	var comments = tag.getMetadata("Rekall->Comments");
 	if((comments)&&(comments!="")) $("#popupLegende").html(comments).removeClass("empty");
 	else $("#popupLegende").html("+ Add a comment").addClass("empty");