# HG changeset patch # User durandn # Date 1442580111 -7200 # Node ID 3820cf5fe29ef3c9d64adb026ece58b911ba8510 # Parent 0b287ecbc2cb23718dbba71a37e58257bb295aa2 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 diff -r 0b287ecbc2cb -r 3820cf5fe29e src/widgets/Markers.css --- 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 diff -r 0b287ecbc2cb -r 3820cf5fe29e src/widgets/Markers.js --- 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 @@ + '' + '
' + '
' - + '
+
' + + '
+
' + + '
+
' + + '
✖
' + '
' + '
' + '
' @@ -41,17 +52,34 @@ + '' + '
{{l10n.annotation_saved}}
' + '
' + + '
' + + '' + + '
{{l10n.delete_saved}}
' + + '
' + '
' + '' + '
{{l10n.error_while_contacting}}
' + '
' + + '
' + + '' + + '
' + + '{{l10n.delete_text}} ' + + '{{l10n.submit_delete}} ' + + '{{l10n.cancel}}' + + '
' + + '
' + '
'; IriSP.Widgets.Markers.prototype.markerTemplate = '
' + '
' + - '
'; + ''; + +IriSP.Widgets.Markers.prototype.markerPlaceholderTemplate = + '
' + + '
' + + '
'; IriSP.Widgets.Markers.prototype.infoTemplate = '{{^edit}}
{{marker_info}}
{{/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