Added support for custom button texts + Added support for deleting markers + reworked the way the "+" and "-" buttons work + Added a "placeholder" marker when clicking "+" to show where in the timeline the marker will be posted
authordurandn
Fri, 18 Sep 2015 14:41:51 +0200
changeset 1051 3820cf5fe29e
parent 1050 0b287ecbc2cb
child 1052 c8fd9dbf3804
Added support for custom button texts + Added support for deleting markers + reworked the way the "+" and "-" buttons work + Added a "placeholder" marker when clicking "+" to show where in the timeline the marker will be posted
src/widgets/Markers.css
src/widgets/Markers.js
--- a/src/widgets/Markers.css	Fri Sep 18 14:40:25 2015 +0200
+++ b/src/widgets/Markers.css	Fri Sep 18 14:41:51 2015 +0200
@@ -33,7 +33,7 @@
 	margin-top: 1px;
 }
 
-.Ldt-Markers-Create{
+.Ldt-Markers-RoundButton{
 	display: inline-block;
     background-color: #d93c71;
     color: #ffffff;
@@ -41,7 +41,7 @@
     height: 20px;
     width: 20px;
     border-radius: 20px;
-    font-size: 25;
+    font-size: 25px;
     font-style: bold;
     border: 1px solid;
     border-color: #eca3bc #631e34 #36101c #e16e93;
@@ -56,6 +56,16 @@
 	line-height: 20px;
 }
 
+.Ldt-Markers-RoundButton.Ldt-Markers-CannotCreate{
+	background-color: #999999;
+	border-color: #797979 #444444 #222222 #696969;
+}
+
+.Ldt-Markers-RoundButton.Ldt-Markers-Delete{
+	line-height: 23px;
+	text-indent: 2px;
+}
+
 .Ldt-Markers-Info{
 	height: 125px;
 	width: 90%;
@@ -68,7 +78,8 @@
 	margin: 0px;
 }
 
-.Ldt-Markers-ScreenSending, .Ldt-Markers-ScreenFailure, .Ldt-Markers-ScreenSuccess{
+.Ldt-Markers-ScreenSending, .Ldt-Markers-ScreenFailure, .Ldt-Markers-ScreenSuccess, 
+.Ldt-Markers-ScreenConfirmDelete, .Ldt-Markers-ScreenDeleteSuccess{
 	text-align: center;
 	vertical-align: middle;
 	line-height: 125px;
@@ -90,6 +101,15 @@
     background: url(img/widget-control.png);
 }
 
+a.Ldt-Markers-Screen-SubmitDelete, a.Ldt-Markers-Screen-CancelDelete {
+	color: #3366BB;
+	cursor: pointer;
+}
+
+a.Ldt-Markers-Screen-SubmitDelete:hover, a.Ldt-Markers-Screen-CancelDelete:hover {
+	color: #3a75ff;
+}
+
 .Ldt-Markers-MarkerDescription{
 	height: 45%;
 	width: 90%;
@@ -149,7 +169,12 @@
 	vertical-align: top;
 }
 
-.Ldt-Markers-Create:hover, .Ldt-Markers-MarkerSend:hover, .Ldt-Markers-MarkerCancel:hover{
+.Ldt-Markers-RoundButton:hover, .Ldt-Markers-MarkerSend:hover, .Ldt-Markers-MarkerCancel:hover{
 	background-color: #e15581;
 	border-color: #222222 #e87d9f #f0adc3 #68273c;
+}
+
+.Ldt-Markers-RoundButton.Ldt-Markers-CannotCreate:hover{	
+	background-color: #999999;
+	border-color: #797979 #444444 #222222 #696969;
 }
\ No newline at end of file
--- a/src/widgets/Markers.js	Fri Sep 18 14:40:25 2015 +0200
+++ b/src/widgets/Markers.js	Fri Sep 18 14:41:51 2015 +0200
@@ -10,18 +10,27 @@
     line_height: 8,
     background: "#e0e0e0",
     marker_color: "#ff80fc",
+    placeholder_color: "#ffffff",
     hover_color: "#e15581",
     selected_color: "#74d600",
     ball_radius: 4,
     pause_on_write: true,
+    play_on_submit: true,
     api_serializer: "ldt_annotate",
-    api_endpoint_template: "",
+    api_endpoint_template_create: "",
+    api_endpoint_template_edit: "",
+    api_endpoint_template_delete: "",
     api_method_create: "POST",
-    api_method_editing: "PUT",
+    api_method_edit: "PUT",
+    api_method_delete: "DELETE",
     project_id: "",
     creator_name: "",
     after_send_timeout: 0,
+    markers_gap: 2000,
+    allow_empty_markers: false,
     close_after_send: false,
+    custom_send_button: false,
+    custom_cancel_button: false,
 };
 
 IriSP.Widgets.Markers.prototype.template = 
@@ -31,7 +40,9 @@
     + '</div>'
     + '<div class="Ldt-Markers-Inputs">'
     +     '<div class="Ldt-Markers-Screen Ldt-Markers-ScreenMain">'
-    +         '<div class="Ldt-Markers-Create">+</div>'
+    +         '<div class="Ldt-Markers-RoundButton Ldt-Markers-CannotCreate" title="{{l10n.cannot_create}}">+</div>'
+    +         '<div class="Ldt-Markers-RoundButton Ldt-Markers-Create">+</div>'
+    +         '<div class="Ldt-Markers-RoundButton Ldt-Markers-Delete">&#10006;</div>'
     +         '<div class="Ldt-Markers-Info"></div>'
     +     '</div>'
     +     '<div class="Ldt-Markers-Screen Ldt-Markers-ScreenSending">'  
@@ -41,17 +52,34 @@
     +         '<a title="{{l10n.close_widget}}" class="Ldt-Markers-Close" href="#"></a>'    
     +         '<div class="Ldt-Markers-Screen-InnerBox">{{l10n.annotation_saved}}</div>'
     +     '</div>'
+    +     '<div class="Ldt-Markers-Screen Ldt-Markers-ScreenDeleteSuccess">'
+    +         '<a title="{{l10n.close_widget}}" class="Ldt-Markers-Close" href="#"></a>'    
+    +         '<div class="Ldt-Markers-Screen-InnerBox">{{l10n.delete_saved}}</div>'
+    +     '</div>'
     +     '<div class="Ldt-Markers-Screen Ldt-Markers-ScreenFailure">'
     +         '<a title="{{l10n.close_widget}}" class="Ldt-Markers-Close" href="#"></a>'
     +         '<div class="Ldt-Markers-Screen-InnerBox">{{l10n.error_while_contacting}}</div>'
     +     '</div>'
+    +     '<div class="Ldt-Markers-Screen Ldt-Markers-ScreenConfirmDelete">'
+    +         '<a title="{{l10n.close_widget}}" class="Ldt-Markers-Close" href="#"></a>'
+    +         '<div class="Ldt-Markers-Screen-InnerBox">'
+    +           '{{l10n.delete_text}} '
+    +           '<a class="Ldt-Markers-Screen-SubmitDelete">{{l10n.submit_delete}}</a> '
+    +           '<a class="Ldt-Markers-Screen-CancelDelete">{{l10n.cancel}}</a>'
+    +         '</div>'
+    +     '</div>'
     + '</div>';
 
 
 IriSP.Widgets.Markers.prototype.markerTemplate = 
     '<div class="Ldt-Markers-Marker" style="height:{{height}}px; left:{{left}}px; width: 2px; background-color: black;">' +
         '<div class="Ldt-Markers-MarkerBall" style="background-color: {{marker_color}}; position: relative; width: {{ball_diameter}}px; height: {{ball_diameter}}px; left: {{ball_left}}px; top: {{ball_top}}px; border: 1px solid; border-radius: {{ball_radius}}px"></div>' + 
-    '</div>';   
+    '</div>';
+
+IriSP.Widgets.Markers.prototype.markerPlaceholderTemplate = 
+    '<div class="Ldt-Markers-Marker Ldt-Markers-PlaceholderMarker" style="height:{{height}}px; left:{{left}}px; width: 2px; background-color: black;">' +
+        '<div class="Ldt-Markers-MarkerBall" style="background-color: {{marker_color}}; position: relative; width: {{ball_diameter}}px; height: {{ball_diameter}}px; left: {{ball_left}}px; top: {{ball_top}}px; border: 1px solid; border-radius: {{ball_radius}}px"></div>' + 
+    '</div>'; 
 
 IriSP.Widgets.Markers.prototype.infoTemplate = 
     '{{^edit}}<div class="Ldt-Markers-MarkerDescription">{{marker_info}}</div>{{/edit}}' +
@@ -66,19 +94,27 @@
 IriSP.Widgets.Markers.prototype.messages = {
     en : {
         send : "Send",
+        submit_delete: "Delete",
         cancel : "Cancel",
         wait_while_processing: "Please wait while your annotation is being processed...",
+        delete_text: "The selected marker will be deleted. Continue?",
         error_while_contacting: "An error happened while contacting the server. Your annotation has not been saved.",
         annotation_saved: "Thank you, your annotation has been saved.",
+        delete_saved: "Thank you, your annotation has been deleted",
         close_widget: "Close",
+        cannot_create: "Cannot create marker on this timecode"
     },
     fr : {
         send : "Envoyer",
+        submit_delete: "Supprimer",
         cancel : "Annuler",
         wait_while_processing: "Veuillez patienter pendant le traitement de votre annotation...",
+        delete_text: "Le marqueur sélectionné sera supprimé. Continuer?",
         error_while_contacting: "Une erreur s'est produite en contactant le serveur. Votre annotation n'a pas été enregistrée.",
         annotation_saved: "Merci, votre annotation a été enregistrée.",
+        delete_saved: "Merci, votre annotation a été supprimée",
         close_widget: "Fermer",
+        cannot_create: "Impossible de créer un marqueur sur ce timecode"
     }
 }
 
@@ -92,21 +128,14 @@
     });
     this.drawMarkers();
     
-    this.$.find(".Ldt-Markers-Create").click(function(){
-        if (!_this.selectedMarker){
-            _this.toggleCreateMarker();
-        }
-        else {
-            _this.selectedMarker = false;
-            _this.$.find(".Ldt-Markers-Info").html("");
-            _this.$.find(".Ldt-Markers-MarkerBall").css("background-color", _this.marker_color)
-            _this.$.find(".Ldt-Markers-Create").html("+");
-        }
-    })
-    this.$.find(".Ldt-Markers-Info").click(function(){
-        if (_this.selectedMarker&&!_this.editing){
-            _this.toggleCreateMarker();
-        }
+    this.$.find(".Ldt-Markers-Create").click(this.functionWrapper("onCreateClick"));
+    this.$.find(".Ldt-Markers-Delete").click(this.functionWrapper("onDeleteClick"));
+    this.$.find(".Ldt-Markers-RoundButton").hide()
+    this.updateCreateButtonState(this.media.getCurrentTime())
+    this.$.find(".Ldt-Markers-Screen-SubmitDelete").click(this.functionWrapper("sendDelete"));
+    this.$.find(".Ldt-Markers-Screen-CancelDelete").click(function(){
+        _this.showScreen("Main");
+        _this.cancelEdit();
     })
     this.showScreen("Main");
     this.$.css({
@@ -115,14 +144,14 @@
         background: this.background
     });
     
-    this.$.find(".Ldt-Markers-Close").click(function() {
-        _this.showScreen("Main");
-    });
+    this.$.find(".Ldt-Markers-Close").click(this.functionWrapper("revertToMainScreen"));
     
-    this.onMediaEvent("timeupdate", "updatePosition");
+    this.onMediaEvent("timeupdate", this.functionWrapper("updatePosition"));
+    this.onMediaEvent("timeupdate", this.functionWrapper("updateCreateButtonState"));
+    this.onMediaEvent("play", this.functionWrapper("clearSelectedMarker"));
     this.onMdpEvent("Markers.refresh", this.functionWrapper("drawMarkers"));
-    
-    this.editing = false;
+   
+    this.newMarkerTimeCode = 0;
     this.selectedMarker = false;
 }
 
@@ -132,61 +161,113 @@
     this.$.find('.Ldt-Markers-Position').css({
         left: _x + "px"
     });
-};
+}
 
+IriSP.Widgets.Markers.prototype.updateCreateButtonState = function(_time){
+    _this = this
+    var can_create = this.markers.every(function(_marker){   
+        return ((_time < (_marker.begin-_this.markers_gap))||(_time > (_marker.begin+_this.markers_gap)))
+    });
+    if (can_create){
+        if ((this.$.find(".Ldt-Markers-Create").is(":hidden"))&&(this.$.find(".Ldt-Markers-Delete").is(":hidden"))){
+            this.$.find(".Ldt-Markers-RoundButton").hide();
+            this.$.find(".Ldt-Markers-Create").show();
+        }
+    }
+    else {
+        if ((this.$.find(".Ldt-Markers-CannotCreate").is(":hidden"))&&(this.$.find(".Ldt-Markers-Delete").is(":hidden"))){
+            this.$.find(".Ldt-Markers-RoundButton").hide();
+            this.$.find(".Ldt-Markers-CannotCreate").show();
+        }
+    }
+}
 
-IriSP.Widgets.Markers.prototype.toggleCreateMarker = function(){
-    if(!this.editing){
-        this.editing = true
+IriSP.Widgets.Markers.prototype.onCreateClick = function(){
+    this.pauseOnWrite();
+    if (!this.selectedMarker){
+        this.newMarkerCurrentTime = this.media.getCurrentTime();
+        this.showPlaceholder(this.media.getCurrentTime());
+        this.startEdit();
+    }
+}
+
+IriSP.Widgets.Markers.prototype.onDeleteClick = function(){
+    _this = this;
+    this.pauseOnWrite();
+    if(this.selectedMarker){
+        this.showScreen("ConfirmDelete");
+    }
+    else {
+        // Clic sur - sans marqueur sélectionné = retour à l'état initial
+        this.cancelEdit();
+    }
+}
+
+IriSP.Widgets.Markers.prototype.startEdit = function(){
+    if (this.selectedMarker){
+        _divHtml = Mustache.to_html(this.infoTemplate, {
+            edit: true,
+            marker_info: this.selectedMarker.description,
+            send: this.custom_send_button? this.custom_send_button : this.l10n.send,
+            cancel: this.custom_cancel_button? this.custom_cancel_button :this.l10n.cancel
+        })
     }
     else {
-        this.editing = false
-    }
-    var _divHtml = "";
-    if (this.selectedMarker){       
         _divHtml = Mustache.to_html(this.infoTemplate, {
-            edit: this.editing,
+            edit: true,
+            marker_info: "",
+            send: this.custom_send_button? this.custom_send_button : this.l10n.send,
+            cancel: this.custom_cancel_button? this.custom_cancel_button :this.l10n.cancel
+        })
+    }
+    this.$.find(".Ldt-Markers-Info").html(_divHtml);
+    this.$.find(".Ldt-Markers-MarkerSend").click(this.functionWrapper("onSubmit"));
+    this.$.find(".Ldt-Markers-MarkerCancel").click(this.functionWrapper("cancelEdit"));
+    this.$.find(".Ldt-Markers-MarkerTextArea").bind("change keyup input paste", this.functionWrapper("onDescriptionChange"));
+    this.$.find(".Ldt-Markers-RoundButton").hide();
+    this.$.find(".Ldt-Markers-Delete").show();
+    this.editing = true;
+}
+
+IriSP.Widgets.Markers.prototype.cancelEdit = function(){
+    if (this.selectedMarker){
+        // Clic sur "cancel" pendant édition d'un marqueur = retour à l'état visualisation
+        _divHtml = Mustache.to_html(this.infoTemplate, {
+            edit: false,
             marker_info: this.selectedMarker.description,
-            send: this.l10n.send,
-            cancel: this.l10n.cancel
         })
-        
         this.$.find(".Ldt-Markers-Info").html(_divHtml);
-     }
-     else {
-         if (this.editing) {
-             _divHtml = Mustache.to_html(this.infoTemplate, {
-                 edit: this.editing,
-                 marker_info: "",
-                 send: this.l10n.send,
-                 cancel: this.l10n.cancel,
-             })
-         }
-         this.$.find(".Ldt-Markers-Info").html(_divHtml);
-     }
-    
-    if(this.editing){
-        this.$.find(".Ldt-Markers-MarkerSend").click(this.functionWrapper("onSubmit"));
-        this.$.find(".Ldt-Markers-MarkerCancel").click(this.functionWrapper("toggleCreateMarker"));
-        this.$.find(".Ldt-Markers-MarkerTextArea").bind("change keyup input paste", this.functionWrapper("onDescriptionChange"));
-        this.$.find(".Ldt-Markers-Create").html("-");
+        this.$.find(".Ldt-Markers-MarkerDescription").click(this.functionWrapper("startEdit"));
     }
     else {
-        this.$.find(".Ldt-Markers-Create").html("+");
+        // Clic sur "cancel" pendant la création d'un marqueur = retour à l'état initial
+        this.hidePlaceholder();
+        this.$.find(".Ldt-Markers-Info").html("");
+        this.$.find(".Ldt-Markers-RoundButton").hide()
+        this.$.find(".Ldt-Markers-Create").show()
+        this.updateCreateButtonState(this.media.getCurrentTime())
     }
-};
+    this.editing = false;
+}
 
 IriSP.Widgets.Markers.prototype.onDescriptionChange = function(){
-    var _field = this.$.find(".Ldt-Markers-MarkerTextArea"),
-        _contents = _field.val();
-    _field.css("border-color", !!_contents ? "#e87d9f" : "#ff0000");
-    if (!!_contents) {
-        _field.removeClass("empty");
-    } else {
-        _field.addClass("empty");
+    // Returns false if the textarea is empty, true if there is text in it
+    if(!this.allow_empty_markers){
+        var _field = this.$.find(".Ldt-Markers-MarkerTextArea"),
+            _contents = _field.val();
+        _field.css("border-color", !!_contents ? "#e87d9f" : "#ff0000");
+        if (!!_contents) {
+            _field.removeClass("empty");
+        } else {
+            _field.addClass("empty");
+        }
+        this.pauseOnWrite();
+        return !!_contents;
     }
-    this.pauseOnWrite();
-    return !!_contents;
+    else {
+        // If the widget is configured to allow to post empty markers, it returns true
+        return true
+    }
 };
 
 IriSP.Widgets.Markers.prototype.pauseOnWrite = function(){
@@ -198,30 +279,85 @@
 IriSP.Widgets.Markers.prototype.showScreen = function(_screenName) {
     this.$.find('.Ldt-Markers-Screen' + _screenName).show()
         .siblings().hide();
-    if ((_screenName=="Main")&&(this.editing)){
-        this.toggleCreateMarker();
-    };
+}
+
+IriSP.Widgets.Markers.prototype.revertToMainScreen = function(){
+    if (this.$.find(".Ldt-Markers-ScreenMain").is(":hidden")){
+        this.showScreen("Main");
+        this.cancelEdit();
+        if (this.selectedMarker){
+            this.$.find(".Ldt-Markers-RoundButton").hide();
+            this.$.find(".Ldt-Markers-Delete").show();
+        }
+        else {
+            this.$.find(".Ldt-Markers-RoundButton").hide();
+            this.$.find(".Ldt-Markers-Create").show();
+            this.updateCreateButtonState();
+        }
+    }
+}
+
+IriSP.Widgets.Markers.prototype.hidePlaceholder = function(){
+    this.$.find(".Ldt-Markers-PlaceholderMarker").remove();
+}
+
+IriSP.Widgets.Markers.prototype.showPlaceholder = function(_time){   
+    var _scale = this.width / this.source.getDuration(),
+        _left = _time * _scale -1,
+        _data = {
+            left: _left,
+            height: this.line_height-1,
+            ball_top: (this.ball_radius*2 > this.line_height) ? 0 : ((this.line_height - this.ball_radius*2)/2)-1,
+            ball_radius: (this.ball_radius*2 > this.line_height) ? this.line_height/2 : this.ball_radius,
+            ball_diameter: (this.ball_radius*2 > this.line_height) ? this.line_height/2 : this.ball_radius*2,
+            ball_left: -this.ball_radius,
+            marker_color: this.placeholder_color
+        },
+        _html = Mustache.to_html(this.markerPlaceholderTemplate, _data),
+        _el = IriSP.jQuery(_html);
+        
+    list_$ = this.$.find(".Ldt-Markers-List");
+    _el.appendTo(list_$);
+}
+
+IriSP.Widgets.Markers.prototype.clearSelectedMarker = function(){
+    if (this.selectedMarker){
+        var _divHtml = "";
+        
+        this.selectedMarker = false;
+        this.$.find(".Ldt-Markers-Info").html(_divHtml);
+        this.$.find(".Ldt-Markers-RoundButton").hide();
+        this.$.find(".Ldt-Markers-Create").show();
+        this.$.find(".Ldt-Markers-MarkerBall").toggleClass("selected", false);
+        this.updateCreateButtonState(this.media.getCurrentTime())
+    }
 }
 
 IriSP.Widgets.Markers.prototype.drawMarkers = function(){
-    this.$.remove("Ldt-Markers-Marker");
     var _this = this,
         _scale = this.width / this.source.getDuration(),
         list_$ = this.$.find('.Ldt-Markers-List');
-    
+
+    this.$.remove("Ldt-Markers-Marker");
+    list_$.html("");
     this.markers.forEach(function(_marker){
-        var _left = _marker.begin * _scale -1;
-        _data = {
-            left: _left,
-            height: _this.line_height-1,
-            ball_top: (_this.ball_radius*2 > _this.line_height) ? 0 : ((_this.line_height - _this.ball_radius*2)/2)-1,
-            ball_radius: (_this.ball_radius*2 > _this.line_height) ? _this.line_height/2 : _this.ball_radius,
-            ball_diameter: (_this.ball_radius*2 > _this.line_height) ? _this.line_height/2 : _this.ball_radius*2,
-            ball_left: -_this.ball_radius,
-            marker_color: ((_this.selectedMarker)&&(_this.selectedMarker.id == _marker.id))? _this.selected_color : _this.marker_color
+        var _left = _marker.begin * _scale -1,
+            _data = {
+                left: _left,
+                height: _this.line_height-1,
+                ball_top: (_this.ball_radius*2 > _this.line_height) ? 0 : ((_this.line_height - _this.ball_radius*2)/2)-1,
+                ball_radius: (_this.ball_radius*2 > _this.line_height) ? _this.line_height/2 : _this.ball_radius,
+                ball_diameter: (_this.ball_radius*2 > _this.line_height) ? _this.line_height/2 : _this.ball_radius*2,
+                ball_left: -_this.ball_radius,
+                marker_color: ((_this.selectedMarker)&&(_this.selectedMarker.id == _marker.id))? _this.selected_color : _this.marker_color
+            },
+            _html = Mustache.to_html(_this.markerTemplate, _data),
+            _el = IriSP.jQuery(_html);
+        
+        if ((_this.selectedMarker)&&(_this.selectedMarker.id == _marker.id)){
+            _el.children().toggleClass("selected", true);
         }
-        var _html = Mustache.to_html(_this.markerTemplate, _data),
-            _el = IriSP.jQuery(_html);
+        
         _el.mouseover(function(){
                 if (!((_this.selectedMarker)&&(_this.selectedMarker.id == _marker.id))){
                     _el.children().css("background-color", _this.hover_color);
@@ -234,53 +370,35 @@
            })
            .click(function(){
                _this.showScreen("Main");
+               _this.cancelEdit();
+               _this.hidePlaceholder();
                if (!((_this.selectedMarker)&&(_this.selectedMarker.id == _marker.id))){
+                  // if there either is no marker selected or we click a different marker
                   list_$.find(".Ldt-Markers-MarkerBall").css("background-color", _this.marker_color)
+                  list_$.find(".Ldt-Markers-MarkerBall").toggleClass("selected", false);
+                  _el.children().toggleClass("selected", true);
                   _el.children().css("background-color", _this.selected_color)
                   _this.selectedMarker = _marker;
+                  
                   _divHtml = Mustache.to_html(_this.infoTemplate, {
-                      edit: _this.editing,
+                      edit: false,
                       marker_info: _marker.description,
-                      send: _this.l10n.send,
-                      cancel: _this.l10n.cancel
                   })
                   
                   _this.$.find(".Ldt-Markers-Info").html(_divHtml);
+                  _this.$.find(".Ldt-Markers-MarkerDescription").click(_this.functionWrapper("startEdit"));
+                  _this.$.find(".Ldt-Markers-RoundButton").hide();
+                  _this.$.find(".Ldt-Markers-Delete").show();
 
-                  if(_this.editing){
-                      _this.$.find(".Ldt-Markers-MarkerSend").click(_this.functionWrapper("onSubmit"));
-                      _this.$.find(".Ldt-Markers-MarkerCancel").click(_this.functionWrapper("toggleCreateMarker"));
-                  }
                }
                else {
-                   var _divHtml = ""
-                   if (_this.editing){
-                       _divHtml = Mustache.to_html(_this.infoTemplate, {
-                           edit: _this.editing,
-                           marker_info: "",
-                           send: _this.l10n.send,
-                           cancel: _this.l10n.cancel
-                       });
-                   }
+                   // if we click the currently selected marker, we unselect it
                    _el.children().css("background-color", _this.hover_color);
-                   _this.selectedMarker = false;
-                   _this.$.find(".Ldt-Markers-Info").html(_divHtml);
-                   
-                   if(_this.editing){
-                       _this.$.find(".Ldt-Markers-MarkerSend").click(_this.functionWrapper("onSubmit"));
-                       _this.$.find(".Ldt-Markers-MarkerCancel").click(_this.functionWrapper("toggleCreateMarker"));
-                   }
-               }
-               
-               if (_this.selectedMarker){
-                   _this.$.find(".Ldt-Markers-Create").html("-")
-               }
-               else {
-                   _this.$.find(".Ldt-Markers-Create").html("+")
+                   _this.clearSelectedMarker();
                }
                
                if (_this.selectedMarker) {
-                   // If we unselect a marker we shouldn't trigger pause or time jump
+                   // Only if we select a new marker do we pause video and time jump
                    _this.media.pause();
                    _marker.trigger("click");
                }
@@ -289,10 +407,11 @@
     })
 }
 
+
 IriSP.Widgets.Markers.prototype.onSubmit = function(){
     
     /* Si les champs obligatoires sont vides, on annule l'envoi */
-    if (!this.onDescriptionChange()) {
+    if (!this.allow_empty_markers && !this.onDescriptionChange()){
         return false;
     }
     
@@ -302,11 +421,11 @@
     }
     
     var _this = this,
-        _exportedAnnotations = new IriSP.Model.List(this.player.sourceManager), /* Création d'une liste d'annotations contenant une annotation afin de l'envoyer au serveur */
-        _url = Mustache.to_html(this.api_endpoint_template, {annotation_id: this.selectedMarker ? this.selectedMarker.id : ""});
+        _exportedAnnotations = new IriSP.Model.List(this.player.sourceManager); /* Création d'une liste d'annotations contenant une annotation afin de l'envoyer au serveur */        
     if (this.selectedMarker){
         var _export = this.player.sourceManager.newLocalSource({serializer: IriSP.serializers[this.api_serializer]})
-            _annotation = this.selectedMarker;
+            _annotation = this.selectedMarker,
+            _url = Mustache.to_html(this.api_endpoint_template_edit, {annotation_id: this.selectedMarker ? this.selectedMarker.id : ""});
         _annotation.source = _export
         _annotation.description = this.$.find(".Ldt-Markers-MarkerTextArea").val(), /* Champ description */
         _annotationTypes = this.source.getAnnotationTypes().searchByTitle(this.annotation_type, true), /* Récupération du type d'annotation dans lequel l'annotation doit être ajoutée */
@@ -316,7 +435,8 @@
         var _export = this.player.sourceManager.newLocalSource({serializer: IriSP.serializers[this.api_serializer]}), /* Création d'un objet source utilisant un sérialiseur spécifique pour l'export */
             _annotation = new IriSP.Model.Annotation(false, _export); /* Création d'une annotation dans cette source avec un ID généré à la volée (param. false) */
             _annotationTypes = this.source.getAnnotationTypes().searchByTitle(this.annotation_type, true), /* Récupération du type d'annotation dans lequel l'annotation doit être ajoutée */
-            _annotationType = (_annotationTypes.length ? _annotationTypes[0] : new IriSP.Model.AnnotationType(false, _export)); /* Si le Type d'Annotation n'existe pas, il est créé à la volée */
+            _annotationType = (_annotationTypes.length ? _annotationTypes[0] : new IriSP.Model.AnnotationType(false, _export)), /* Si le Type d'Annotation n'existe pas, il est créé à la volée */
+            _url = Mustache.to_html(this.api_endpoint_template_create);
         /* Si nous avons dû générer un ID d'annotationType à la volée... */
         if (!_annotationTypes.length) {
             /* Il ne faudra pas envoyer l'ID généré au serveur */
@@ -324,11 +444,12 @@
             /* Il faut inclure le titre dans le type d'annotation */
             _annotationType.title = this.annotation_type;
         }
-    
+        
         _annotation.setMedia(this.source.currentMedia.id); /* Id du média annoté */
-        _currentTime = this.media.getCurrentTime();
-        _annotation.setBegin(_currentTime); /* Timecode de la lecture de la video */
-        _annotation.setEnd(_currentTime); /* Timecode de fin du widget */
+        if (!this.selectedMarker){
+            _annotation.setBegin(this.newMarkerCurrentTime);
+            _annotation.setEnd(this.newMarkerCurrentTime);
+        }
         _annotation.setAnnotationType(_annotationType.id); /* Id du type d'annotation */
         if (this.project_id != ""){
             /* Champ id projet, seulement si on l'a renseigné dans la config */
@@ -351,38 +472,60 @@
     /* Envoi de l'annotation via AJAX au serveur ! */
     IriSP.jQuery.ajax({
         url: _url,
-        type: this.selectedMarker ? this.api_method_editing : this.api_method_create,
+        type: this.selectedMarker ? this.api_method_edit : this.api_method_create,
         contentType: 'application/json',
         data: _export.serialize(), /* L'objet Source est sérialisé */
         success: function(_data) {
             _this.showScreen('Success'); /* Si l'appel a fonctionné, on affiche l'écran "Annotation enregistrée" */
-            window.setTimeout(function(){
-                _this.showScreen("Main")
-            },
-            (_this.after_send_timeout || 5000));
+            window.setTimeout(_this.functionWrapper("revertToMainScreen"),(_this.after_send_timeout || 5000));
             _export.getAnnotations().removeElement(_annotation, true); /* Pour éviter les doublons, on supprime l'annotation qui a été envoyée */
             _export.deSerialize(_data); /* On désérialise les données reçues pour les réinjecter */
+            _annotation.id = _data.id;
             _this.source.merge(_export); /* On récupère les données réimportées dans l'espace global des données */
-            if (_this.pause_on_write && _this.media.getPaused()) {
+            if (_this.pause_on_write && _this.media.getPaused() && _this.play_on_submit) {
                 _this.media.play();
             }
             _this.markers.push(_annotation);
             _this.selectedMarker = _annotation;
+            _this.drawMarkers();
             _this.player.trigger("AnnotationsList.refresh"); /* On force le rafraîchissement du widget AnnotationsList */
             _this.player.trigger("Markers.refresh");
-            _this.$.find(".Ldt-Markers-MarkerTextArea").val("")
         },
         error: function(_xhr, _error, _thrown) {
             IriSP.log("Error when sending annotation", _thrown);
             _export.getAnnotations().removeElement(_annotation, true);
             _this.showScreen('Failure');
-            window.setTimeout(function(){
-                _this.showScreen("Main");
-            },
-            (_this.after_send_timeout || 5000));
+            window.setTimeout(_this.functionWrapper("revertToMainScreen"),(_this.after_send_timeout || 5000));
         }
     });
     this.showScreen('Sending');
     
     return false;
-};
\ No newline at end of file
+};
+
+IriSP.Widgets.Markers.prototype.sendDelete = function(){
+    _this = this;
+    _url = Mustache.to_html(this.api_endpoint_template_delete, {annotation_id: this.selectedMarker ? this.selectedMarker.id : ""});
+    IriSP.jQuery.ajax({
+        url: _url,
+        type: this.api_method_delete,
+        contentType: 'application/json',
+        success: function(_data) {
+            _this.showScreen('DeleteSuccess'); /* Si l'appel a fonctionné, on affiche l'écran "Annotation enregistrée" */
+            window.setTimeout(_this.functionWrapper("revertToMainScreen"),(_this.after_send_timeout || 5000));
+            if (_this.pause_on_write && _this.media.getPaused() && _this.play_on_submit) {
+                _this.media.play();
+            }
+            _this.markers.removeElement(_this.selectedMarker);
+            _this.selectedMarker = false
+            _this.player.trigger("AnnotationsList.refresh"); /* On force le rafraîchissement du widget AnnotationsList */
+            _this.player.trigger("Markers.refresh");
+        },
+        error: function(_xhr, _error, _thrown) {
+            IriSP.log("Error when sending annotation", _thrown);
+            _this.showScreen('Failure');
+            window.setTimeout(_this.functionWrapper("revertToMainScreen"),(_this.after_send_timeout || 5000));
+        }
+    });
+    this.showScreen("Sending")
+}
\ No newline at end of file