Added support for deleting annotations for teacher scenario
authordurandn
Thu, 17 Sep 2015 11:58:01 +0200
changeset 153 a5a4c9022534
parent 152 4914a246ae46
child 154 cc84bf4cfc56
Added support for deleting annotations for teacher scenario
server/src/remie/static/remie/css/style.css
server/src/remie/static/remie/css/teacher.css
server/src/remie/static/remie/metadataplayer/AnnotationsList.css
server/src/remie/static/remie/metadataplayer/AnnotationsList.js
server/src/remie/static/remie/metadataplayer/LdtPlayer-core.js
server/src/remie/templates/remie/iframe_teacher.html
--- a/server/src/remie/static/remie/css/style.css	Fri Sep 18 13:04:51 2015 +0200
+++ b/server/src/remie/static/remie/css/style.css	Thu Sep 17 11:58:01 2015 +0200
@@ -330,7 +330,7 @@
 	white-space: nowrap; 
 	overflow: hidden; 
 	text-overflow: ellipsis; 
-	width: 320px !important;
+	width: 270px !important;
 	display: inline-block !important;
 	margin: 0px !important;
 	font-size: 12px !important;
@@ -340,6 +340,8 @@
 .Ldt-AnnotationsList-li p.Ldt-AnnotationsList-Title{
     color: #848484;
     font-weight: normal;
+    position: relative;
+    right: 40px;
 }
 .Ldt-AnnotationsList-li .Ldt-AnnotationsList-CreationDate{
     float:left;
--- a/server/src/remie/static/remie/css/teacher.css	Fri Sep 18 13:04:51 2015 +0200
+++ b/server/src/remie/static/remie/css/teacher.css	Thu Sep 17 11:58:01 2015 +0200
@@ -23,6 +23,40 @@
     margin-left: 0;
 }
 
+.Ldt-AnnotationsList-DeleteButton {
+	position: relative;
+	top: 0px !important;
+}
+
+.Ldt-AnnotationsList-Screen{
+	background-color: #F3F7F8;
+}
+
+.Ldt-AnnotationsList-ScreenMain{
+	margin: 0px;
+	padding: 0px;
+}
+
+.Ldt-AnnotationsList-ul-ToDelete .Ldt-AnnotationsList-li{
+	background-color: white;
+}
+
+ul.Ldt-AnnotationsList-ul {
+	padding: 0px;
+	margin: 0px;
+}
+
+.Ldt-AnnotationsList-Close{
+	position: relative;
+	top: -45px;
+	left: 200px;
+}
+
+.Ldt-AnnotationsList-ScreenDelete{
+	margin-top: 15px;
+	padding-top: 15px;
+}
+
 /* ----- Filter style ----- */
 
 .Ldt-AnnotationsListWidget .Ldt-AnnotationsList-Filters{
--- a/server/src/remie/static/remie/metadataplayer/AnnotationsList.css	Fri Sep 18 13:04:51 2015 +0200
+++ b/server/src/remie/static/remie/metadataplayer/AnnotationsList.css	Thu Sep 17 11:58:01 2015 +0200
@@ -45,11 +45,12 @@
 	margin: 4px 2px;
 }
 
-ul.Ldt-AnnotationsList-ul {
+ul.Ldt-AnnotationsList-ul, ul.Ldt-AnnotationsList-ul-toDelete  {
     list-style: none;
-    padding: 2px;
-    margin: 0;
+    padding: 0px;
+    margin: 0px;
 }
+
 li.Ldt-AnnotationsList-li {
     width: 100%;
     clear: both;
@@ -73,6 +74,21 @@
     max-height: 100%;
     margin: 0 auto;
 }
+
+.Ldt-AnnotationsList-DeleteButton {
+	margin: 0px;
+	float: right;
+	font-size: 20px;
+	position: relative;
+	top: -50px;
+	left: -5px;
+	color: #787878
+}
+.Ldt-AnnotationsList-DeleteButton:hover {
+	color: #f7268e;
+	cursor: pointer;
+}
+
 .Ldt-AnnotationsList-Duration {
     color: #f7268e;
     float: right;
@@ -144,4 +160,26 @@
 
 .Ldt-AnnotationsList-Play:hover {
     background-position: 0 bottom;
+}
+
+.Ldt-AnnotationsList-ScreenMain{
+	margin: 0px;
+	padding: 0px;
+}
+
+.Ldt-AnnotationsList-ScreenDelete, .Ldt-AnnotationsList-ScreenSending, 
+.Ldt-AnnotationsList-ScreenError, .Ldt-AnnotationsList-ScreenSuccess{
+	margin-top: 15px;
+	width: 100%
+	text-align: center;
+	vertical-align: middle;
+	font-size: 14px;
+	font-weight: bold;
+	color: #68273C;
+}
+
+a.Ldt-AnnotationsList-Close {
+    position: absolute; right: 2px;
+    display: inline-block; width: 17px; height: 17px; margin: 4px;
+    background: url(img/widget-control.png);
 }
\ No newline at end of file
--- a/server/src/remie/static/remie/metadataplayer/AnnotationsList.js	Fri Sep 18 13:04:51 2015 +0200
+++ b/server/src/remie/static/remie/metadataplayer/AnnotationsList.js	Thu Sep 17 11:58:01 2015 +0200
@@ -45,12 +45,18 @@
     current_day_filter: true,
     show_header : false,
     custom_header : false,
-    annotation_count_header : true,
+    annotations_count_header : true,
     show_creation_date : false,
     show_timecode : true,
     /*
      * Only annotation in the current segment will be displayed. Designed to work with the Segments Widget.
      */
+    allow_annotations_deletion: false,
+    /*
+     * URL to call when deleting annotation. Expects a mustache template with {{annotation_id}}, ex /api/anotations/{{annotation_id}}/
+     */
+    api_delete_endpoint : "",
+    api_delete_method: "DELETE",
     filter_by_segments: false,
     segment_filter: true,
     segments_annotation_type: "chap",
@@ -85,6 +91,13 @@
         header: "Annotations for this content",
         segment_filter: "All cuttings",
         latest_contributions: "Latest contributions",
+        close_widget: "Close",
+        confirm: "Confirm",
+        cancel: "Cancel",
+        annotation_deletion_delete: "You will delete this annotation : ",
+        annotation_deletion_sending: "Your deletion request is being sent ... ",
+        annotation_deletion_success: "The annotation has been deleted.",
+        annotation_deletion_error: "There was an error contacting the server. The annotation has not been deleted."
     },
     fr: {
         voice_annotation: "Annotation Vocale",
@@ -93,6 +106,13 @@
         header: "Annotations sur ce contenu",
         segment_filter: "Tous les segments",
         latest_contributions: "Dernières contributions",
+        close_widget: "Fermer",
+        confirm: "Confirmer",
+        cancel: "Annuler",
+        annotation_deletion_delete: "Vous allez supprimer cette annotation: ",
+        annotation_deletion_sending: "Votre demande de suppression est en cours d'envoi ... ",
+        annotation_deletion_success: "L'annotation a été supprimée.",
+        annotation_deletion_error: "Une erreur s'est produite en contactant le serveur. L'annotation n'a pas été supprimée."
     }
 };
 
@@ -102,30 +122,54 @@
     +     '{{^custom_header}}{{l10n.header}}{{/custom_header}}'
     + '</p>{{/show_header}}'
     + '<div class="Ldt-AnnotationsListWidget">'
-    + '{{#show_filters}}'
-    + '<div class="Ldt-AnnotationsList-Filters">'
-    +    '{{#keyword_filter}}<input class="Ldt-AnnotationsList-filter-text" id="Ldt-AnnotationsList-keywordsFilter" type="text" value=""></input>{{/keyword_filter}}'
-    +    '{{#user_filter}}<select class="Ldt-AnnotationsList-filter-dropdown" id="Ldt-AnnotationsList-userFilter"><option selected value="">{{l10n.everyone}}</option></select>{{/user_filter}}'
-    +    '{{#date_filter}}<label class="Ldt-AnnotationsList-filter-date">Date: <input id="Ldt-AnnotationsList-dateFilter" type="text"></input></label>{{/date_filter}}'
-    +    '{{#segment_filter}}<label class="Ldt-AnnotationsList-filter-checkbox"><input type="checkbox" id="Ldt-AnnotationsList-ignoreSegmentsFilter">{{l10n.segment_filter}}</label>{{/segment_filter}}'
-    +    '{{#latest_contributions_filter}}<label class="Ldt-AnnotationsList-filter-checkbox"><input type="checkbox" id="Ldt-AnnotationsList-latestContributionsFilter">{{l10n.latest_contributions}}</label>{{/latest_contributions_filter}}'
-    + '</div>'
-    + '{{/show_filters}}'
-    + '{{#show_audio}}<div class="Ldt-AnnotationsList-Audio"></div>{{/show_audio}}'
-    + '<ul class="Ldt-AnnotationsList-ul">'
-    + '</ul>'
+    +     '<div class="Ldt-AnnotationsList-ScreenMain">'
+    +         '{{#show_filters}}'
+    +         '<div class="Ldt-AnnotationsList-Filters">'
+    +             '{{#keyword_filter}}<input class="Ldt-AnnotationsList-filter-text" id="Ldt-AnnotationsList-keywordsFilter" type="text" value=""></input>{{/keyword_filter}}'
+    +             '{{#user_filter}}<select class="Ldt-AnnotationsList-filter-dropdown" id="Ldt-AnnotationsList-userFilter"><option selected value="">{{l10n.everyone}}</option></select>{{/user_filter}}'
+    +             '{{#date_filter}}<label class="Ldt-AnnotationsList-filter-date">Date: <input id="Ldt-AnnotationsList-dateFilter" type="text"></input></label>{{/date_filter}}'
+    +             '{{#segment_filter}}<label class="Ldt-AnnotationsList-filter-checkbox"><input type="checkbox" id="Ldt-AnnotationsList-ignoreSegmentsFilter">{{l10n.segment_filter}}</label>{{/segment_filter}}'
+    +             '{{#latest_contributions_filter}}<label class="Ldt-AnnotationsList-filter-checkbox"><input type="checkbox" id="Ldt-AnnotationsList-latestContributionsFilter">{{l10n.latest_contributions}}</label>{{/latest_contributions_filter}}'
+    +         '</div>'
+    +         '{{/show_filters}}'
+    +         '{{#show_audio}}<div class="Ldt-AnnotationsList-Audio"></div>{{/show_audio}}'
+    +         '<ul class="Ldt-AnnotationsList-ul">'
+    +         '</ul>'
+    +     '</div>'    
+    +     '{{#allow_annotations_deletion}}'
+    +     '<div id="{{id}}" class="Ldt-AnnotationsList-Screen Ldt-AnnotationsList-ScreenDelete">'
+    +         '<a title="{{l10n.close_widget}}" class="Ldt-AnnotationsList-Close" href="#"></a>' 
+    +         '<ul class="Ldt-AnnotationsList-ul-ToDelete"></ul>'
+    +         '{{l10n.annotation_deletion_delete}} <a class="Ldt-AnnotationsList-ConfirmDelete">{{l10n.confirm}}</a> <a class="Ldt-AnnotationsList-CancelDelete">{{l10n.cancel}}</a>'
+    +     '</div>'
+    +     '<div id="{{id}}" class="Ldt-AnnotationsList-Screen Ldt-AnnotationsList-ScreenSending">'
+    +         '<a title="{{l10n.close_widget}}" class="Ldt-AnnotationsList-Close" href="#"></a>'  
+    +         '{{l10n.annotation_deletion_sending}}'
+    +     '</div>'
+    +     '<div id="{{id}}" class="Ldt-AnnotationsList-Screen Ldt-AnnotationsList-ScreenSuccess">'
+    +         '<a title="{{l10n.close_widget}}" class="Ldt-AnnotationsList-Close" href="#"></a>'  
+    +         '{{l10n.annotation_deletion_success}}'
+    +     '</div>'
+    +     '<div id="{{id}}" class="Ldt-AnnotationsList-Screen Ldt-AnnotationsList-ScreenError">'
+    +         '<a title="{{l10n.close_widget}}" class="Ldt-AnnotationsList-Close" href="#"></a>'  
+    +         '{{l10n.annotation_deletion_error}}'
+    +     '</div>'
+    +     '{{/allow_annotations_deletion}}'
     + '</div>';
 
 IriSP.Widgets.AnnotationsList.prototype.annotationTemplate = 
     '<li class="Ldt-AnnotationsList-li Ldt-TraceMe" trace-info="annotation-id:{{id}}, media-id:{{media_id}}" style="{{specific_style}}">'
-    + '<div class="Ldt-AnnotationsList-ThumbContainer">'
+    + '<div id="{{id}}" class="Ldt-AnnotationsList-ThumbContainer Ldt-AnnotationsList-Annotation-Screen Ldt-AnnotationsList-Annotation-ScreenMain">'
     + '<a href="{{url}}" draggable="true">'
     + '<img class="Ldt-AnnotationsList-Thumbnail" src="{{thumbnail}}" />'
     + '</a>'
     + '</div>'
+    + '{{#allow_annotations_deletion}}'
+    + '<div id={{id}} class="Ldt-AnnotationsList-DeleteButton">&#10006;</div>'
+    + '{{/allow_annotations_deletion}}'
     + '{{#show_timecode}}<div class="Ldt-AnnotationsList-Duration">{{begin}} - {{end}}</div>{{/show_timecode}}'
     + '<h3 class="Ldt-AnnotationsList-Title" draggable="true">'
-    + '<a href="{{url}}">{{{htitle}}}</a>'
+    + '<a {{#url}} href="{{url}}" {{/url}}>{{{htitle}}}</a>'
     + '</h3>'
     + '<p class="Ldt-AnnotationsList-Description">{{{hdescription}}}</p>'
     + '{{#created}}'
@@ -142,7 +186,7 @@
     + '{{/tags}}'
     + '</ul>'
     + '{{/tags.length}}'
-    + '{{#audio}}<div class="Ldt-AnnotationsList-Play" data-annotation-id="{{id}}">{{l10n.voice_annotation}}</div>{{/audio}}'
+    + '{{#audio}}<div class="Ldt-AnnotationsList-Play" data-annotation-id="{{id}}">{{l10n.voice_annotation}}</div>{{/audio}}'    
     + '</li>';
 
 // obj.url = this.project_url + "/" + media + "/" + annotations[i].meta.project
@@ -162,6 +206,11 @@
     }, this.metadata));
 };
 
+IriSP.Widgets.AnnotationsList.prototype.showScreen = function(_screenName) {
+    this.$.find('.Ldt-AnnotationsList-Screen' + _screenName).show()
+        .siblings().hide();
+}
+
 IriSP.Widgets.AnnotationsList.prototype.ajaxMashup = function() {
     var _currentTime = this.media.getCurrentTime();
     var _currentAnnotation = this.source.currentMedia.getAnnotationAtTime(_currentTime);
@@ -228,6 +277,10 @@
                 return (_currentSegments[0].begin <= _annotation_time && _currentSegments[0].end >= _annotation_time)
             });
         }
+        if(this.annotations_count_header && this.annotations_count != _list.length){
+            this.annotations_count = _list.length;
+            this.refreshHeader();
+        }
     }
     if (this.show_only_annotation_from_user){
         _list = _list.filter(function(_annotation){
@@ -364,7 +417,8 @@
                 url : _url,
                 tags : _tags,
                 specific_style : (typeof _bgcolor !== "undefined" ? "background-color: " + _bgcolor : ""),
-                l10n: _this.l10n
+                l10n: _this.l10n,
+                allow_annotations_deletion: _this.allow_annotations_deletion
             };
             if (_this.show_audio && _annotation.audio && _annotation.audio.href && _annotation.audio.href != "null") {
                 _data.audio = true;
@@ -456,6 +510,8 @@
                 _$.html(IriSP.textFieldHtml(_$.text(), rx));
             });
         }
+
+        this.$.find(".Ldt-AnnotationsList-DeleteButton").click(_this.functionWrapper("onDeleteClick"))
     }
     
     if (this.ajax_url) {
@@ -471,6 +527,65 @@
     return _list.length;
 };
 
+IriSP.Widgets.AnnotationsList.prototype.onDeleteClick = function(event){
+    
+    ann_id = event.target.id;
+    console.log(ann_id)
+    delete_preview_$ = this.$.find(".Ldt-AnnotationsList-ul-ToDelete");
+    delete_preview_$.html("");
+    _list = this.getWidgetAnnotations()
+    _list = _list.filter(function(_annotation){
+        return _annotation.id == ann_id
+    })
+    var _annotation = _list[0],
+        _title = "",
+        _this = this;
+    console.log(_annotation)
+    if (_annotation.creator) {
+        _title = _annotation.creator;
+    }
+    if (_annotation.title) {
+        var tempTitle = _annotation.title;
+        if( tempTitle.substr(0, _title.length + 1) == (_title + ":") ){
+            _title = "";
+        }
+        _title = _title + ( (_title=="") ? "" : ": ") + _annotation.title;
+    }
+    var _created = false;
+    if (this.show_creation_date) {
+        _created = _annotation.created.toLocaleDateString()+", "+_annotation.created.toLocaleTimeString();
+    }
+    var _data = {
+            id : _annotation.id,
+            media_id : _annotation.getMedia().id,
+            htitle : IriSP.textFieldHtml(_title),
+            hdescription : IriSP.textFieldHtml(_annotation.description),
+            begin : _annotation.begin.toString(),
+            end : _annotation.end.toString(),
+            created : _created,
+            show_timecode : this.show_timecode,
+            tags : false,
+            l10n: this.l10n,
+            allow_annotations_deletion: false
+    }
+    _html = Mustache.to_html(this.annotationTemplate, _data)
+    delete_preview_$.html(_html)
+    
+    this.$.find(".Ldt-AnnotationsList-ConfirmDelete").click(function(){
+        _this.sendDelete(ann_id);
+    });
+    
+    this.showScreen("Delete");    
+}
+
+IriSP.Widgets.AnnotationsList.prototype.refreshHeader = function() {
+    var annotation_count_string = " (" + this.annotations_count +" annotations)";
+    this.$.find('.Ldt-AnnotationsList-header').html("");
+    this.$.find('.Ldt-AnnotationsList-header').html(
+        this.custom_header && typeof this.custom_header == "string"? this.custom_header + annotation_count_string : this.l10n.header + annotation_count_string
+    );
+}
+
 IriSP.Widgets.AnnotationsList.prototype.hide = function() {
     var _this = this;
     if (this.visible){
@@ -478,6 +593,7 @@
         this.widget_$.slideUp(function(){
             _this.$.find('.Ldt-AnnotationsList-header').hide();            
         });
+        this.showScreen("Main")
     }
 }
 
@@ -486,6 +602,7 @@
         this.visible = true;
         this.$.find('.Ldt-AnnotationsList-header').show();
         this.widget_$.slideDown();
+        this.showScreen("Main")
     }
 }
 
@@ -500,8 +617,37 @@
     }
 };
 
+IriSP.Widgets.AnnotationsList.prototype.revertToMainScreen = function(){
+    if (this.$.find(".Ldt-AnnotationsList-ScreenMain").is(":hidden")){
+        this.showScreen("Main");
+    }
+}
+
+IriSP.Widgets.AnnotationsList.prototype.sendDelete = function(id){
+    console.log("deleting "+id)
+    var _this = this,
+        _url = Mustache.to_html(this.api_delete_endpoint, {annotation_id: id})
+    
+    IriSP.jQuery.ajax({
+        url: _url,
+        type: this.api_delete_method,
+        contentType: 'application/json',
+        success: function(_data) {
+            _this.showScreen('Success');
+            window.setTimeout(_this.functionWrapper("revertToMainScreen"),(_this.after_send_timeout || 2000));
+            _this.currentSource.getAnnotations().removeId(id);
+            _this.player.trigger("AnnotationsList.refresh");
+        },
+        error: function(_xhr, _error, _thrown) {
+            IriSP.log("Error when sending annotation", _thrown);
+            _this.showScreen('Error');
+            window.setTimeout(_this.functionWrapper("revertToMainScreen"),(_this.after_send_timeout || 2000));
+        }
+    });
+    this.showScreen('Sending');
+}
+
 IriSP.Widgets.AnnotationsList.prototype.draw = function() {
-    
     this.jwplayers = {};
     this.mashupMode = (this.media.elementType === "mashup");
     
@@ -581,14 +727,15 @@
             _this.currentSource.getAnnotations().trigger("clear-search");
         }
     });
+    
+    this.$.find(".Ldt-AnnotationsList-Close").click(function(){
+        _this.showScreen("Main");
+    })
+    
     this.source.getAnnotations().on("search-cleared", function() {
         _this.throttledRefresh();
     });
     
-    if (this.show_filters){
-        
-    }
-    
     this.onMdpEvent("AnnotationsList.refresh", function() {
         if (_this.ajax_url) {
             if (_this.mashupMode) {
@@ -616,6 +763,10 @@
         }, this.refresh_interval);
     }
     
+    if (this.annotations_count_header){
+        this.annotations_count = false;
+    }
+    
     this.onMdpEvent("AnnotationsList.toggle","toggle");
     this.onMdpEvent("AnnotationsList.hide", "hide");
     this.onMdpEvent("AnnotationsList.show", "show");
@@ -633,9 +784,13 @@
     
     this.throttledRefresh();
     
+    this.showScreen("Main");
+    this.$.find(".Ldt-AnnotationsList-CancelDelete").click(function(){
+        _this.showScreen("Main")
+    });
+    
     this.visible = true;
     if (!this.start_visible){
         this.hide();
     }
-    
 };
--- a/server/src/remie/static/remie/metadataplayer/LdtPlayer-core.js	Fri Sep 18 13:04:51 2015 +0200
+++ b/server/src/remie/static/remie/metadataplayer/LdtPlayer-core.js	Thu Sep 17 11:58:01 2015 +0200
@@ -2462,15 +2462,24 @@
         _this.player.trigger("widget-loaded");
     }
     
+    if (this.pre_draw_callback){
+        onloadcallback = function(){
+            IriSP.jQuery.when(_this.pre_draw_callback()).done(onsourceloaded());
+        }     
+     }
+     else {
+         onloadcallback = onsourceloaded;
+     }
+    
     if (this.metadata) {
         /* Getting metadata */
         this.source = player.loadMetadata(this.metadata);
         
         /* Call draw when loaded */
-        this.source.onLoad(onsourceloaded);
+        this.source.onLoad(onloadcallback);
     } else {
         if (this.source) {
-            onsourceloaded();
+            onloadcallback();
         }
     }
     
--- a/server/src/remie/templates/remie/iframe_teacher.html	Fri Sep 18 13:04:51 2015 +0200
+++ b/server/src/remie/templates/remie/iframe_teacher.html	Thu Sep 17 11:58:01 2015 +0200
@@ -124,7 +124,7 @@
         },{
             type: "AnnotationsList",
             container: "AnnotationsList_container",
-            annotation_type: "user_{{current_user}}",
+            annotation_type: "user_",
             filter_by_segments: true,
             segments_annotation_type: "découpage",
             show_creation_date: true,
@@ -137,9 +137,11 @@
             start_visible: false,
             newest_first: true,
             tags: false,
+            allow_annotations_deletion: true,
+            api_delete_endpoint: "{% url 'api_dispatch_list' resource_name='annotations' api_name='1.0' %}{% templatetag openvariable %}annotation_id{% templatetag closevariable %}/"
         },{
             type: "LatestAnnotation",
-            annotation_type: "user_{% if not group_mode %}{{current_user}}{% endif %}",
+            annotation_type: "user_",
             container: "LatestAnnotation_container",
             filter_by_segment: true,
             starts_hidden: true,
@@ -147,7 +149,7 @@
             segments_annotation_type: "découpage",
             selectable_annotations: true,
             copy_and_edit_button: true,
-            show_header: true,
+            show_header: false,
         },{
           type: "CurrentSegmentInfobox",
           annotation_type: "découpage",