# HG changeset patch
# User durandn
# Date 1442580172 -7200
# Node ID c8fd9dbf3804e6b092de83983628b92375194fa4
# Parent  3820cf5fe29ef3c9d64adb026ece58b911ba8510
Added support for editing the currently selected segment and its potential tags

diff -r 3820cf5fe29e -r c8fd9dbf3804 src/widgets/CurrentSegmentInfobox.css
--- a/src/widgets/CurrentSegmentInfobox.css	Fri Sep 18 14:41:51 2015 +0200
+++ b/src/widgets/CurrentSegmentInfobox.css	Fri Sep 18 14:42:52 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 3820cf5fe29e -r c8fd9dbf3804 src/widgets/CurrentSegmentInfobox.js
--- a/src/widgets/CurrentSegmentInfobox.js	Fri Sep 18 14:41:51 2015 +0200
+++ b/src/widgets/CurrentSegmentInfobox.js	Fri Sep 18 14:42:52 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}}'
@@ -90,6 +96,7 @@
                 return _segment.begin.milliseconds == _segmentBegin.milliseconds && _segment.end.milliseconds == _segmentEnd.milliseconds
             });
         if (_list.length >0){
+            _this.$.toggleClass("editing", false);
             if (_this.currentSegment.id != _list[0].id){
                 _this.currentSegment = _list[0];
                 _data = {
@@ -111,6 +118,7 @@
 }
 
 IriSP.Widgets.CurrentSegmentInfobox.prototype.enableEditMode = function() {
+    var _this = this;
     if(this.currentSegment){
         _data = {
             title: this.currentSegment.title,
@@ -119,11 +127,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 +150,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 +168,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();
 }
@@ -224,6 +256,7 @@
             if(_this.editable_segments&&_this.currentSegment){
                 _this.$.find(".Ldt-CurrentSegmentInfobox").click(_this.functionWrapper("enableEditMode"));             
             }
+            _this.$.toggleClass("editing", false);
             _this.player.trigger("AnnotationsList.refresh"); /* On force le rafraîchissement du widget AnnotationsList */
         },
         error: function(_xhr, _error, _thrown) {