# HG changeset patch
# User rougeronj
# Date 1441635909 -7200
# Node ID e00c89006e9aa8cd363708a2606453c0d0ec3e5e
# Parent  ccfe677e62a3a034954f1ee93982d7e2c1e2e2a8
add new option to allow enter a tag through an input box rather than button. Adapt css to the new input box

diff -r ccfe677e62a3 -r e00c89006e9a server/src/remie/static/remie/metadataplayer/CurrentSegmentInfobox.css
--- 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
diff -r ccfe677e62a3 -r e00c89006e9a server/src/remie/static/remie/metadataplayer/CurrentSegmentInfobox.js
--- 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();
 }