# HG changeset patch
# User durandn
# Date 1443090347 -7200
# Node ID b9c816d95ab0acc994717f5451bd6acd71454671
# Parent  e9765601184d6e9883441481eea3d7d42c00b412
Added headers to editable fields in CurrentSegmentInfobox

diff -r e9765601184d -r b9c816d95ab0 src/widgets/CurrentSegmentInfobox.css
--- a/src/widgets/CurrentSegmentInfobox.css	Thu Sep 24 11:54:30 2015 +0200
+++ b/src/widgets/CurrentSegmentInfobox.css	Thu Sep 24 12:25:47 2015 +0200
@@ -134,7 +134,7 @@
 	line-height: 18px;
 }
 
-.Ldt-CurrentSegmentInfobox-EditButton:hover{
+.Ldt-CurrentSegmentInfobox-EditButton:hover, .Ldt-CurrentSegmentInfobox-CreateTagInput-Add:hover{
 	background-color: #e15581;
 	border-color: #222222 #e87d9f #f0adc3 #68273c;
 }
@@ -154,8 +154,37 @@
 	color: #e16e93
 }
 
+.Ldt-CurrentSegmentInfobox-FieldsHeader{
+	margin: 5px;
+}
+
+.Ldt-CurrentSegmentInfobox-TagsHeader{
+	margin-top: 10px;
+	margin-left: 5px;
+}
+
 .Ldt-CurrentSegmentInfobox-CreateTagInput{
     border: 2px solid #848484;
     margin: 5px 0;
     padding: 4px;
+}
+
+.Ldt-CurrentSegmentInfobox-CreateTagInput-Add{
+    margin: 5px;
+    padding: 4px;
+	display: inline-block;
+    background-color: #d93c71;
+    color: #ffffff;
+    cursor: pointer;
+    height: 14px;
+    width: 14px;
+    font-size: 14px;
+    font-style: bold;
+    border: 1px solid;
+    border-color: #eca3bc #631e34 #36101c #e16e93;
+    cursor: pointer;
+    padding: 4px;
+    text-align: center;
+	vertical-align: middle;
+	line-height: 14px;
 }
\ No newline at end of file
diff -r e9765601184d -r b9c816d95ab0 src/widgets/CurrentSegmentInfobox.js
--- a/src/widgets/CurrentSegmentInfobox.js	Thu Sep 24 11:54:30 2015 +0200
+++ b/src/widgets/CurrentSegmentInfobox.js	Thu Sep 24 12:25:47 2015 +0200
@@ -15,6 +15,7 @@
     api_method: "PUT",
     api_endpoint_template: "",
     new_tag_button: true,
+    show_headers: false,
 };
 
 IriSP.Widgets.CurrentSegmentInfobox.prototype.template = 
@@ -39,16 +40,19 @@
 
 IriSP.Widgets.CurrentSegmentInfobox.prototype.editTemplate = 
       '<div class="Ldt-CurrentSegmentInfobox">'
+    +     '{{#headers}}<div class="Ldt-CurrentSegmentInfobox-FieldsHeader">{{fields_header}}</div>{{/headers}}'
     +     '<input type="text" class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-TitleInput Ldt-CurrentSegmentInfobox-Title" value="{{title}}"></input>'   
     +     '<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">'
+    +         '{{#headers}}<div class="Ldt-CurrentSegmentInfobox-TagsHeader">{{tags_header}}</div>{{/headers}}'
     +     '{{#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>'
+    +         '<div class="Ldt-CurrentSegmentInfobox-CreateTagInput-Add">+</div>'
     +     '{{/new_tag_button}}'
     +         '{{#tags.length}}'
     +         '<ul class="Ldt-CurrentSegmentInfobox-Tags-Ul">'
@@ -72,6 +76,8 @@
         edit : "Editer",
         new_tag : "Nouveau tag",
         delete_tag : "Supprimer",
+        fields_header : "Contenu du segment courant",
+        tags_header : "Mots-clés du segment courant",
         empty : "Le player vidéo ne lit actuellement aucun segment"
     },
     en: {
@@ -80,6 +86,8 @@
         edit : "Edit",
         new_tag : "New tag",
         delete_tag : "Delete tag",
+        fields_header : "Current segment content",
+        tags_header : "Current segment tags",
         empty : "The player currently doesn't read any segment"
     }
 }    
@@ -131,6 +139,9 @@
             tags : this.currentSegment.getTagTexts(),
             submit : this.l10n.submit,
             cancel : this.l10n.cancel,
+            headers : this.show_headers,
+            tags_header : this.custom_tags_header ? this.custom_tags_header : this.l10n.tags_header,
+            fields_header : this.custom_fields_header ? this.custom_fields_header : this.l10n.fields_header,
             new_tag : this.l10n.new_tag,
             delete_tag : this.l10n.delete_tag,
             new_tag_button : this.new_tag_button,
@@ -141,7 +152,8 @@
         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-CreateTagInput").keypress(this.functionWrapper("insertTagInputKeypress"));
+            this.$.find(".Ldt-CurrentSegmentInfobox-CreateTagInput-Add").click(this.functionWrapper("insertTagInputKeypress"));
         }
         this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton").click(this.functionWrapper("deleteTagInput"));
         this.$.find(".Ldt-CurrentSegmentInfobox-SubmitButton").click(this.functionWrapper("onSubmit"))
@@ -177,7 +189,7 @@
 
 IriSP.Widgets.CurrentSegmentInfobox.prototype.insertTagInputKeypress = function(event) {
     var keycode = (event.keyCode ? event.keyCode : event.which);
-    if(keycode == '13'){
+    if(keycode == '13' || event.type == 'click'){
         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>')
         }