add new option to allow enter a tag through an input box rather than button. Adapt css to the new input box
--- a/server/src/remie/static/remie/metadataplayer/CurrentSegmentInfobox.css Mon Sep 07 16:03:34 2015 +0200
+++ b/server/src/remie/static/remie/metadataplayer/CurrentSegmentInfobox.css Mon Sep 07 16:25:09 2015 +0200
@@ -125,4 +125,10 @@
.Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton:hover{
color: #e16e93
+}
+
+.Ldt-CurrentSegmentInfobox-CreateTagInput{
+ border: 2px solid #848484;
+ margin: 5px 0;
+ padding: 4px;
}
\ No newline at end of file
--- a/server/src/remie/static/remie/metadataplayer/CurrentSegmentInfobox.js Mon Sep 07 16:03:34 2015 +0200
+++ b/server/src/remie/static/remie/metadataplayer/CurrentSegmentInfobox.js Mon Sep 07 16:25:09 2015 +0200
@@ -13,7 +13,8 @@
project_id: false,
api_serializer: "ldt_annotate",
api_method: "PUT",
- api_endpoint_template: ""
+ api_endpoint_template: "",
+ new_tag_button: true,
};
IriSP.Widgets.CurrentSegmentInfobox.prototype.template =
@@ -41,8 +42,13 @@
+ '<div class="Ldt-CurrentSegmentInfobox-CancelButton">{{cancel}}</div>'
+ '<div class="Ldt-CurrentSegmentInfobox-SubmitButton">{{submit}}</div>'
+ '<textarea class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-DescriptionInput Ldt-CurrentSegmentInfobox-Description">{{description}}</textarea>'
- + '<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Tags">'
+ + '<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Tags">'
+ + '{{#new_tag_button}}'
+ '<div class="Ldt-CurrentSegmentInfobox-CreateTagButton">{{new_tag}}</div>'
+ + '{{/new_tag_button}}'
+ + '{{^new_tag_button}}'
+ + '<input class="Ldt-CurrentSegmentInfobox-CreateTagInput" placeholder="{{new_tag}}"></input>'
+ + '{{/new_tag_button}}'
+ '{{#tags.length}}'
+ '<ul class="Ldt-CurrentSegmentInfobox-Tags-Ul">'
+ '{{#tags}}'
@@ -111,6 +117,7 @@
}
IriSP.Widgets.CurrentSegmentInfobox.prototype.enableEditMode = function() {
+ var _this = this;
if(this.currentSegment){
_data = {
title: this.currentSegment.title,
@@ -119,11 +126,17 @@
submit : this.l10n.submit,
cancel : this.l10n.cancel,
new_tag : this.l10n.new_tag,
- delete_tag : this.l10n.delete_tag
+ delete_tag : this.l10n.delete_tag,
+ new_tag_button : this.new_tag_button,
}
+ this.$.toggleClass("editing", true);
this.$.html(Mustache.to_html(this.editTemplate, _data));
this.$.find(".Ldt-CurrentSegmentInfobox-CancelButton").click(this.functionWrapper("disableEditMode"));
- this.$.find(".Ldt-CurrentSegmentInfobox-CreateTagButton").click(this.functionWrapper("insertTagInput"));
+ if (this.new_tag_button){
+ this.$.find(".Ldt-CurrentSegmentInfobox-CreateTagButton").click(this.functionWrapper("insertTagInput"));
+ } else {
+ this.$.find(".Ldt-CurrentSegmentInfobox-CreateTagInput").keypress(this.functionWrapper("insertTagInputKeypress"));
+ }
this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton").click(this.functionWrapper("deleteTagInput"));
this.$.find(".Ldt-CurrentSegmentInfobox-SubmitButton").click(this.functionWrapper("onSubmit"))
}
@@ -136,6 +149,7 @@
description : this.currentSegment.description,
tags : this.currentSegment.getTagTexts()
}
+ this.$.toggleClass("editing", false);
this.$.html(Mustache.to_html(this.template, _data));
this.$.find(".Ldt-CurrentSegmentInfobox").click(this.functionWrapper("enableEditMode"));
}
@@ -153,6 +167,23 @@
this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton").click(this.functionWrapper("deleteTagInput"));
}
+IriSP.Widgets.CurrentSegmentInfobox.prototype.insertTagInputKeypress = function(event) {
+ var keycode = (event.keyCode ? event.keyCode : event.which);
+ if(keycode == '13'){
+ if((!this.currentSegment.getTagTexts().length)&&(!this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Ul").length)){
+ this.$.find(".Ldt-CurrentSegmentInfobox-Tags").prepend('<ul class="Ldt-CurrentSegmentInfobox-Tags-Ul"></ul>')
+ }
+ this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Ul").append(
+ '<li class="Ldt-CurrentSegmentInfobox-Tags-Li">'
+ +'<input type="text" class="Ldt-CurrentSegmentInfobox-Tags-Li-Input" value="'+ this.$.find(".Ldt-CurrentSegmentInfobox-CreateTagInput").val() +'"></input>'
+ +'<div class="Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton">'+this.l10n.delete_tag+'</div>'
+ +'</li>');
+ this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton").click(this.functionWrapper("deleteTagInput"));
+ this.$.find(".Ldt-CurrentSegmentInfobox-CreateTagInput").val("");
+ return false;
+ }
+}
+
IriSP.Widgets.CurrentSegmentInfobox.prototype.deleteTagInput = function(clickEvent) {
$(clickEvent.currentTarget).parent().remove();
}