--- a/server/src/remie/static/remie/metadataplayer/Markers.css Mon Sep 07 16:36:33 2015 +0200
+++ b/server/src/remie/static/remie/metadataplayer/Markers.css Mon Sep 07 17:39:52 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;
@@ -68,7 +68,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 +91,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 +159,7 @@
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;
}
\ No newline at end of file
--- a/server/src/remie/static/remie/metadataplayer/Markers.js Mon Sep 07 16:36:33 2015 +0200
+++ b/server/src/remie/static/remie/metadataplayer/Markers.js Mon Sep 07 17:39:52 2015 +0200
@@ -15,9 +15,12 @@
ball_radius: 4,
pause_on_write: 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,
@@ -31,7 +34,8 @@
+ '</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-Create">+</div>'
+ + '<div class="Ldt-Markers-RoundButton Ldt-Markers-Delete">-</div>'
+ '<div class="Ldt-Markers-Info"></div>'
+ '</div>'
+ '<div class="Ldt-Markers-Screen Ldt-Markers-ScreenSending">'
@@ -41,10 +45,22 @@
+ '<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>';
@@ -66,18 +82,24 @@
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",
},
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",
}
}
@@ -92,21 +114,13 @@
});
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").hide();
+ this.$.find(".Ldt-Markers-Delete").click(this.functionWrapper("onDeleteClick"));
+ 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({
@@ -117,12 +131,12 @@
this.$.find(".Ldt-Markers-Close").click(function() {
_this.showScreen("Main");
+ _this.cancelEdit();
});
this.onMediaEvent("timeupdate", "updatePosition");
this.onMdpEvent("Markers.refresh", this.functionWrapper("drawMarkers"));
- this.editing = false;
this.selectedMarker = false;
}
@@ -134,47 +148,105 @@
});
};
+IriSP.Widgets.Markers.prototype.onCreateClick = function(){
+ this.pauseOnWrite();
+ if (!this.selectedMarker){
+ this.startEdit();
+ }
+}
-IriSP.Widgets.Markers.prototype.toggleCreateMarker = function(){
- if(!this.editing){
- this.editing = true
+IriSP.Widgets.Markers.prototype.onDeleteClick = function(){
+ _this = this;
+ this.pauseOnWrite();
+ if(this.selectedMarker){
+ this.showScreen("ConfirmDelete");
}
else {
- this.editing = false
+ // Clic sur - sans marqueur sélectionné = retour à l'état initial
+ this.cancelEdit();
}
- var _divHtml = "";
- if (this.selectedMarker){
+}
+
+IriSP.Widgets.Markers.prototype.sendDelete = function(){
+ _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(function(){
+ _this.showScreen("Main");
+ _this.cancelEdit();
+ },
+ (_this.after_send_timeout || 5000));
+ if (_this.pause_on_write && _this.media.getPaused()) {
+ _this.media.play();
+ }
+ _this.markers.removeElement(_this.selectedMarker);
+ _this.selectedMarker = false
+ _this.cancelEdit();
+ _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(function(){
+ _this.showScreen("Main");
+ },
+ (_this.after_send_timeout || 5000));
+ }
+ });
+ this.showScreen("Sending")
+}
+
+IriSP.Widgets.Markers.prototype.startEdit = function(){
+ if (this.selectedMarker){
_divHtml = Mustache.to_html(this.infoTemplate, {
- edit: this.editing,
+ edit: true,
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("-");
}
else {
- this.$.find(".Ldt-Markers-Create").html("+");
+ _divHtml = Mustache.to_html(this.infoTemplate, {
+ edit: true,
+ marker_info: "",
+ send: this.l10n.send,
+ cancel: 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-Delete").show();
+ this.$.find(".Ldt-Markers-Create").hide();
+ 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);
+ this.$.find(".Ldt-Markers-MarkerDescription").click(this.functionWrapper("startEdit"));
+ }
+ else {
+ // Clic sur "cancel" pendant la création d'un marqueur = retour à l'état initial
+ this.$.find(".Ldt-Markers-Info").html("");
+ this.$.find(".Ldt-Markers-Delete").hide();
+ this.$.find(".Ldt-Markers-Create").show();
+ }
+ this.editing = false;
+}
IriSP.Widgets.Markers.prototype.onDescriptionChange = function(){
var _field = this.$.find(".Ldt-Markers-MarkerTextArea"),
@@ -198,13 +270,11 @@
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.drawMarkers = function(){
this.$.remove("Ldt-Markers-Marker");
+ this.$.find(".Ldt-Markers-List").html("")
var _this = this,
_scale = this.width / this.source.getDuration(),
list_$ = this.$.find('.Ldt-Markers-List');
@@ -234,53 +304,38 @@
})
.click(function(){
_this.showScreen("Main");
+ _this.cancelEdit();
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)
_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-Delete").show();
+ _this.$.find(".Ldt-Markers-Create").hide();
- if(_this.editing){
- _this.$.find(".Ldt-Markers-MarkerSend").click(_this.functionWrapper("onSubmit"));
- _this.$.find(".Ldt-Markers-MarkerCancel").click(_this.functionWrapper("toggleCreateMarker"));
- }
}
else {
+ // if we click the currently selected marker, we unselect it
var _divHtml = ""
- if (_this.editing){
- _divHtml = Mustache.to_html(_this.infoTemplate, {
- edit: _this.editing,
- marker_info: "",
- send: _this.l10n.send,
- cancel: _this.l10n.cancel
- });
- }
_el.children().css("background-color", _this.hover_color);
_this.selectedMarker = false;
_this.$.find(".Ldt-Markers-Info").html(_divHtml);
+ _this.$.find(".Ldt-Markers-Create").show();
+ _this.$.find(".Ldt-Markers-Delete").hide();
- 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("+")
}
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,6 +344,7 @@
})
}
+
IriSP.Widgets.Markers.prototype.onSubmit = function(){
/* Si les champs obligatoires sont vides, on annule l'envoi */
@@ -302,11 +358,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 +372,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 */
@@ -353,13 +410,14 @@
/* 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.showScreen("Main");
+ _this.cancelEdit();
},
(_this.after_send_timeout || 5000));
_export.getAnnotations().removeElement(_annotation, true); /* Pour éviter les doublons, on supprime l'annotation qui a été envoyée */
@@ -371,9 +429,10 @@
}
_this.markers.push(_annotation);
_this.selectedMarker = _annotation;
+ _this.cancelEdit();
+ _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);