diff --git a/capsule-prototype/css/popup.css b/capsule-prototype/css/popup.css
index b8baa3e33acc276e6cfe75feb0fc1746987a091e..5f75752b2afe8aa9e8247ef56eb9ff2c3ec26330 100644
--- a/capsule-prototype/css/popup.css
+++ b/capsule-prototype/css/popup.css
@@ -1,4 +1,13 @@
+#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%;
diff --git a/capsule-prototype/index.html b/capsule-prototype/index.html
index 970c40a6e842dba94ffe84bbd4762822f6586152..fc51a2d88932c70771ee99273f577655e40d95eb 100644
--- a/capsule-prototype/index.html
+++ b/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>
diff --git a/capsule-prototype/js/online-rekall/Project.js b/capsule-prototype/js/online-rekall/Project.js
index ebc832ca4e60938692fcc1c5943dff7cd465252a..6698c77fbccdc4cea39cda5b5c18a0085ad3607f 100644
--- a/capsule-prototype/js/online-rekall/Project.js
+++ b/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);
+ }
+ }
}
}
}
diff --git a/capsule-prototype/js/online-script.js b/capsule-prototype/js/online-script.js
index 8f53cf8fa0bc0660838410e9cefe4471bdcc590f..bfbbc4ec9a3f2195c0696c18fd578c5dd966f64a 100644
--- a/capsule-prototype/js/online-script.js
+++ b/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");