added a "preview" mode for CreateAnnotation and Markers that blocks inputs so sending annotations is impossible
authordurandn
Fri, 25 Sep 2015 10:44:54 +0200
changeset 1066 5ef7182907c5
parent 1065 77658c018e83
child 1067 539c9bee5372
added a "preview" mode for CreateAnnotation and Markers that blocks inputs so sending annotations is impossible
src/widgets/CreateAnnotation.css
src/widgets/CreateAnnotation.js
src/widgets/Markers.css
src/widgets/Markers.js
--- a/src/widgets/CreateAnnotation.css	Thu Sep 24 15:51:32 2015 +0200
+++ b/src/widgets/CreateAnnotation.css	Fri Sep 25 10:44:54 2015 +0200
@@ -44,7 +44,8 @@
 }
 
 .Ldt-CreateAnnotation-Submit,
-.Ldt-CreateAnnotation-Cancel{
+.Ldt-CreateAnnotation-Cancel,
+.Ldt-CreateAnnotation-PreviewSubmit{
     position: absolute;
     bottom: 7px;
     right: 7px;
--- a/src/widgets/CreateAnnotation.js	Thu Sep 24 15:51:32 2015 +0200
+++ b/src/widgets/CreateAnnotation.js	Fri Sep 25 10:44:54 2015 +0200
@@ -55,6 +55,7 @@
     pause_when_displaying: false,
     custom_send_button: false,
     custom_cancel_button: false,
+    preview_mode: false,
 };
 
 IriSP.Widgets.CreateAnnotation.prototype.messages = {
@@ -63,6 +64,7 @@
         to_time: "to",
         at_time: "at",
         submit: "Submit",
+        preview_submit: "You cannot submit annotations in preview mode",
         cancel: "Cancel",
         add_keywords_: "Add keywords:",
         add_polemic_keywords_: "Add polemic attributes :",
@@ -85,6 +87,7 @@
         to_time: "à",
         at_time: "à",
         submit: "Envoyer",
+        preview_submit: "Vous ne pouvez pas envoyer d'annotation en mode aperçu",
         cancel: "Annuler",
         add_keywords_: "Ajouter des mots-clés\u00a0:",
         add_polemic_keywords_: "Ajouter des attributs polémiques\u00a0:",
@@ -116,7 +119,8 @@
     + '{{#show_creator_field}}{{l10n.your_name_}} <input class="Ldt-CreateAnnotation-Creator empty" value="{{creator_name}}" {{#creator_field_readonly}}readonly{{/creator_field_readonly}}/>{{/show_creator_field}}</h3>'
     + '<textarea class="Ldt-CreateAnnotation-Description empty" placeholder="{{l10n.type_description}}"></textarea>'
     + '<div class="Ldt-CreateAnnotation-Avatar"><img src="{{creator_avatar}}" title="{{creator_name}}"></img></div>'
-    + '<input type="submit" class="Ldt-CreateAnnotation-Submit" value="{{#custom_send_button}}{{custom_send_button}}{{/custom_send_button}}{{^custom_send_button}}{{l10n.submit}}{{/custom_send_button}}" />'
+    + '{{#preview_mode}}<input type="button" class="Ldt-CreateAnnotation-PreviewSubmit" title="{{l10n.preview_submit}}" value="{{#custom_send_button}}{{custom_send_button}}{{/custom_send_button}}{{^custom_send_button}}{{l10n.submit}}{{/custom_send_button}}" />{{/preview_mode}}'
+    + '{{^preview_mode}}<input type="submit" class="Ldt-CreateAnnotation-Submit" value="{{#custom_send_button}}{{custom_send_button}}{{/custom_send_button}}{{^custom_send_button}}{{l10n.submit}}{{/custom_send_button}}" />{{/preview_mode}}'
     + '<input type="button" class="Ldt-CreateAnnotation-Cancel" value="{{#custom_cancel_button}}{{custom_cancel_button}}{{/custom_cancel_button}}{{^custom_cancel_button}}{{l10n.cancel}}{{/custom_cancel_button}}" />'
     + '{{#show_mic_record}}<div class="Ldt-CreateAnnotation-RecBlock"><div class="Ldt-CreateAnnotation-RecLabel">Add voice annotation</div>'
     + '    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="220" height="160">'
--- a/src/widgets/Markers.css	Thu Sep 24 15:51:32 2015 +0200
+++ b/src/widgets/Markers.css	Fri Sep 25 10:44:54 2015 +0200
@@ -66,6 +66,11 @@
 	text-indent: 2px;
 }
 
+.Ldt-Markers-RoundButton.Ldt-Markers-PreviewDelete{
+	line-height: 23px;
+	text-indent: 2px;
+}
+
 .Ldt-Markers-Info{
 	height: 125px;
 	width: 90%;
@@ -146,7 +151,7 @@
 	vertical-align: top;
 }
 
-.Ldt-Markers-MarkerSend, .Ldt-Markers-MarkerCancel{
+.Ldt-Markers-MarkerSend, .Ldt-Markers-MarkerPreviewSend, .Ldt-Markers-MarkerCancel{
 	display: inline-block;
     background-color: #d93c71;
     color: #ffffff;
@@ -169,7 +174,7 @@
 	vertical-align: top;
 }
 
-.Ldt-Markers-RoundButton:hover, .Ldt-Markers-MarkerSend:hover, .Ldt-Markers-MarkerCancel:hover{
+.Ldt-Markers-RoundButton:hover, .Ldt-Markers-MarkerSend:hover, .Ldt-Markers-MarkerPreviewSend:hover, .Ldt-Markers-MarkerCancel:hover{
 	background-color: #e15581;
 	border-color: #222222 #e87d9f #f0adc3 #68273c;
 }
--- a/src/widgets/Markers.js	Thu Sep 24 15:51:32 2015 +0200
+++ b/src/widgets/Markers.js	Fri Sep 25 10:44:54 2015 +0200
@@ -31,6 +31,7 @@
     close_after_send: false,
     custom_send_button: false,
     custom_cancel_button: false,
+    preview_mode: false,
 };
 
 IriSP.Widgets.Markers.prototype.template = 
@@ -40,9 +41,10 @@
     + '</div>'
     + '<div class="Ldt-Markers-Inputs">'
     +     '<div class="Ldt-Markers-Screen Ldt-Markers-ScreenMain">'
-    +         '<div class="Ldt-Markers-RoundButton Ldt-Markers-CannotCreate" title="{{l10n.cannot_create}}">+</div>'
+    +         '<div class="Ldt-Markers-RoundButton Ldt-Markers-CannotCreate" title="{{#preview_mode}}{{l10n.preview_mode_submit}}{{/preview_mode}}{{^preview_mode}}{{l10n.cannot_create}}{{/preview_mode}}">+</div>'
     +         '<div class="Ldt-Markers-RoundButton Ldt-Markers-Create">+</div>'
-    +         '<div class="Ldt-Markers-RoundButton Ldt-Markers-Delete">&#10006;</div>'
+    +         '{{^preview_mode}}<div class="Ldt-Markers-RoundButton Ldt-Markers-Delete">&#10006;</div>{{/preview_mode}}'
+    +         '{{#preview_mode}}<div class="Ldt-Markers-RoundButton Ldt-Markers-PreviewDelete" title="{{l10n.preview_mode_delete}}">&#10006;</div>{{/preview_mode}}'
     +         '<div class="Ldt-Markers-Info"></div>'
     +     '</div>'
     +     '<div class="Ldt-Markers-Screen Ldt-Markers-ScreenSending">'  
@@ -86,7 +88,8 @@
     '{{#edit}}<div class="Ldt-Markers-MarkerEdit">' + 
         '<textarea class="Ldt-Markers-MarkerTextArea" cols="60" rows="4">{{marker_info}}</textarea>' +
         '<div class="Ldt-Markers-Buttons">' +
-            '<div class="Ldt-Markers-MarkerSend">{{send}}</div>' +
+            '{{^preview_mode}}<div class="Ldt-Markers-MarkerSend">{{send}}</div>{{/preview_mode}}' +
+            '{{#preview_mode}}<div class="Ldt-Markers-MarkerPreviewSend" title="{{preview_mode_text}}">{{send}}</div>{{/preview_mode}}' +
             '<div class="Ldt-Markers-MarkerCancel">{{cancel}}</div>' +
         '</div>' +
     '</div>{{/edit}}'
@@ -96,6 +99,8 @@
         send : "Send",
         submit_delete: "Delete",
         cancel : "Cancel",
+        preview_mode_submit: "You cannot submit a marker in preview mode.",
+        preview_mode_delete: "You cannot delete a marker in preview mode",
         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.",
@@ -108,6 +113,8 @@
         send : "Envoyer",
         submit_delete: "Supprimer",
         cancel : "Annuler",
+        preview_mode_submit: "Vous ne pouvez pas créer ou éditer de marqueur en mode aperçu",
+        preview_mode_delete: "Vous ne pouvez pas supprimer de marqueur en mode aperçu",
         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.",
@@ -165,17 +172,17 @@
 
 IriSP.Widgets.Markers.prototype.updateCreateButtonState = function(_time){
     _this = this
-    var can_create = this.markers.every(function(_marker){   
+    var can_create = this.preview_mode? false : 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"))){
+        if ((this.$.find(".Ldt-Markers-Create").is(":hidden"))&&(this.$.find(".Ldt-Markers-Delete").is(":hidden")||this.$.find(".Ldt-Markers-PreviewDelete").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"))){
+        if ((this.$.find(".Ldt-Markers-CannotCreate").is(":hidden"))&&(this.$.find(".Ldt-Markers-Delete").is(":hidden")||this.$.find(".Ldt-Markers-PreviewDelete").is(":hidden"))){
             this.$.find(".Ldt-Markers-RoundButton").hide();
             this.$.find(".Ldt-Markers-CannotCreate").show();
         }
@@ -207,6 +214,8 @@
     if (this.selectedMarker){
         _divHtml = Mustache.to_html(this.infoTemplate, {
             edit: true,
+            preview_mode: this.preview_mode,
+            preview_mode_text: this.l10n.preview_mode_submit,
             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
@@ -216,6 +225,8 @@
         _divHtml = Mustache.to_html(this.infoTemplate, {
             edit: true,
             marker_info: "",
+            preview_mode: this.preview_mode,
+            preview_mode_text: this.l10n.preview_mode_submit,
             send: this.custom_send_button? this.custom_send_button : this.l10n.send,
             cancel: this.custom_cancel_button? this.custom_cancel_button :this.l10n.cancel
         })
@@ -225,7 +236,12 @@
     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();
+    if (this.preview_mode){
+        this.$.find(".Ldt-Markers-PreviewDelete").show(); 
+    }
+    else {
+        this.$.find(".Ldt-Markers-Delete").show();
+    }
     this.editing = true;
 }
 
@@ -237,7 +253,9 @@
             marker_info: this.selectedMarker.description,
         })
         this.$.find(".Ldt-Markers-Info").html(_divHtml);
-        this.$.find(".Ldt-Markers-MarkerDescription").click(this.functionWrapper("startEdit"));
+        if (!this.preview_mode){
+            this.$.find(".Ldt-Markers-MarkerDescription").click(this.functionWrapper("startEdit"));
+        }
     }
     else {
         // Clic sur "cancel" pendant la création d'un marqueur = retour à l'état initial
@@ -287,7 +305,12 @@
         this.cancelEdit();
         if (this.selectedMarker){
             this.$.find(".Ldt-Markers-RoundButton").hide();
-            this.$.find(".Ldt-Markers-Delete").show();
+            if (this.preview_mode){
+                this.$.find(".Ldt-Markers-PreviewDelete").show(); 
+            }
+            else {
+                this.$.find(".Ldt-Markers-Delete").show();
+            }
         }
         else {
             this.$.find(".Ldt-Markers-RoundButton").hide();
@@ -386,9 +409,16 @@
                   })
                   
                   _this.$.find(".Ldt-Markers-Info").html(_divHtml);
-                  _this.$.find(".Ldt-Markers-MarkerDescription").click(_this.functionWrapper("startEdit"));
+                  if (!_this.preview_mode){
+                      _this.$.find(".Ldt-Markers-MarkerDescription").click(_this.functionWrapper("startEdit"));
+                  }
                   _this.$.find(".Ldt-Markers-RoundButton").hide();
-                  _this.$.find(".Ldt-Markers-Delete").show();
+                  if (_this.preview_mode){
+                      _this.$.find(".Ldt-Markers-PreviewDelete").show(); 
+                  }
+                  else {
+                      _this.$.find(".Ldt-Markers-Delete").show();
+                  }
 
                }
                else {