src/widgets/AnnotationsList.js
changeset 1069 2409cb4cebaf
parent 1068 7623f9af9272
child 1072 ac1eacb3aa33
--- a/src/widgets/AnnotationsList.js	Fri Oct 02 11:27:17 2015 +0200
+++ b/src/widgets/AnnotationsList.js	Mon Dec 28 15:50:04 2015 +0100
@@ -28,6 +28,7 @@
      */
     ajax_granularity : 600000,
     default_thumbnail : "",
+    custom_external_icon : "",
     /*
      * URL when the annotation is not in the current project, e.g.
      * http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/front/player/{{media}}/{{project}}/{{annotationType}}#id={{annotation}}
@@ -37,9 +38,9 @@
     refresh_interval : 0,
     limit_count : 20,
     newest_first : false,
-
+    show_title: true,
     show_audio: true,
-    show_creator: false,
+    show_creator: true,
     show_controls: false,
     show_end_time: true,
     show_publish: false,
@@ -55,7 +56,7 @@
     editable: false,
     // Id that will be used as localStorage key
     editable_storage: "",
-
+    widget_max_height: 680,
     always_visible : false,
     start_visible: true,
     show_audio : true,
@@ -69,8 +70,10 @@
     show_header : false,
     custom_header : false,
     annotations_count_header : true,
+    annotations_count_header_string: "annotations",
     show_creation_date : false,
     show_timecode : true,
+    show_end_time : true,
     project_id: "",
     /*
      * Only annotation in the current segment will be displayed. Designed to work with the Segments Widget.
@@ -160,6 +163,7 @@
         confirm_delete_message: "You are about to delete {{ annotation.title }}. Are you sure you want to delete it?",
         confirm_publish_message: "You are about to publish {{ annotation.title }}. Are you sure you want to make it public?",
         tweet_annotation: "Tweet annotation",
+        external_annotation: "This annotation was submitted to another project",
         everyone: "Everyone",
         header: "Annotations for this content",
         segment_filter: "All cuttings",
@@ -167,7 +171,7 @@
         close_widget: "Close",
         confirm: "Confirm",
         cancel: "Cancel",
-        annotation_deletion_delete: "You will delete this annotation : ",
+        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."
@@ -185,6 +189,7 @@
         confirm_delete_message: "Vous allez supprimer {{ annotation.title }}. Êtes-vous certain(e) ?",
         confirm_publish_message: "Vous allez publier {{ annotation.title }}. Êtes-vous certain(e) ?",
         tweet_annotation: "Tweeter l'annotation",
+        external_annotation: "Cette annotation a été postée sur un autre projet",
         everyone: "Tous",
         header: "Annotations sur ce contenu",
         segment_filter: "Tous les segments",
@@ -192,7 +197,7 @@
         close_widget: "Fermer",
         confirm: "Confirmer",
         cancel: "Annuler",
-        annotation_deletion_delete: "Vous allez supprimer cette annotation: ",
+        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."
@@ -223,8 +228,9 @@
     +     '{{#allow_annotations_deletion}}'
     +     '<div data-annotation="{{id}}" class="Ldt-AnnotationsList-Screen Ldt-AnnotationsList-ScreenDelete">'
     +         '<a title="{{l10n.close_widget}}" class="Ldt-AnnotationsList-Close" href="#"></a>' 
+    +         '{{l10n.annotation_deletion_delete}}'
     +         '<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>'
+    +         '<a class="Ldt-AnnotationsList-ConfirmDelete">{{l10n.confirm}}</a> <a class="Ldt-AnnotationsList-CancelDelete">{{l10n.cancel}}</a>'
     +     '</div>'
     +     '<div data-annotation="{{id}}" class="Ldt-AnnotationsList-Screen Ldt-AnnotationsList-ScreenSending">'
     +         '<a title="{{l10n.close_widget}}" class="Ldt-AnnotationsList-Close" href="#"></a>'  
@@ -244,8 +250,9 @@
 IriSP.Widgets.AnnotationsList.prototype.annotationTemplate =
     '<li class="Ldt-AnnotationsList-li Ldt-Highlighter-Annotation Ldt-TraceMe" data-annotation="{{ id }}" data-begin="{{ begin_ms }}" data-end="{{ end_ms }}" trace-info="annotation-id:{{id}}, media-id:{{media_id}}" style="{{specific_style}}">'
     + '<div data-annotation="{{ id }}" class="Ldt-AnnotationsList-ThumbContainer Ldt-AnnotationsList-Annotation-Screen Ldt-AnnotationsList-Annotation-ScreenMain">'
-    +   '<a href="{{url}}" draggable="true">'
-    +     '<img title="{{ begin }} - {{ title }}" class="Ldt-AnnotationsList-Thumbnail" src="{{thumbnail}}" />'
+    +   '<a {{#url}}href="{{url}}"{{/url}} draggable="true">'
+    +     '<img title="{{^external}}{{ begin }} - {{ end }}{{/external}}{{#external}}{{l10n.external_annotation}}{{/external}}" class="Ldt-AnnotationsList-Thumbnail" src="{{thumbnail}}" />'
+    +     '{{#external}}<div title="{{l10n.external_annotation}}" class="Ldt-AnnotationsList-External-Icon"></div>{{/external}}'
     +   '</a>'
     + '</div>'
     + '{{#allow_annotations_deletion}}'
@@ -253,7 +260,7 @@
     + '{{/allow_annotations_deletion}}'
     + '{{#show_timecode}}<div title="{{l10n.set_time}}" class="Ldt-AnnotationsList-Duration"><span class="Ldt-AnnotationsList-Begin Ldt-live-editable Ldt-AnnotationsList-TimeEdit" data-editable_value="{{begin}}" data-editable_id="{{id}}" data-editable_field="begin" data-editable_type="timestamp">{{begin}}</span>{{#show_end_time}} - <span class="Ldt-AnnotationsList-End Ldt-live-editable" data-editable_value="{{end}}" data-editable_id="{{id}}" data-editable_field="end" data-editable_type="timestamp">{{end}}</span>{{/show_end_time}}</div>{{/show_timecode}}'
     + '<h3 class="Ldt-AnnotationsList-Title Ldt-Annotation-Timecode" data-timecode="{{ begin_ms }}" draggable="true">'
-    +   '<span class="Ldt-AnnotationsList-TitleContent Ldt-live-editable" data-editable_value="{{title}}" data-editable_type="multiline" data-editable_id="{{id}}" data-editable_field="title">{{{htitle}}}</span>'
+    + '{{#show_title}}<span class="Ldt-AnnotationsList-TitleContent Ldt-live-editable" data-editable_value="{{title}}" data-editable_type="multiline" data-editable_id="{{id}}" data-editable_field="title">{{{htitle}}}</span>{{/show_title}}'
     + '{{#show_creator}}<span class="Ldt-AnnotationsList-Creator">{{ creator }}</span>{{/show_creator}}'
     + '</h3>'
     + '<p class="Ldt-AnnotationsList-Description Ldt-live-editable" data-editable_type="multiline" data-editable_value="{{description}}" data-editable_id="{{id}}" data-editable_field="description">{{{hdescription}}}</p>'
@@ -534,34 +541,32 @@
                     )
                     : document.location.href.replace(/#.*$/,'') + '#id=' + _annotation.id + '&t=' + (_annotation.begin / 1000.0)
                     )
-            );
-            var _title = "",
+                ),
+                _external = _annotation.project != _this.source.projectId ? true : false,
+                _title = "",
                 _description = _annotation.description,
                 _thumbnail = (typeof _annotation.thumbnail !== "undefined" && _annotation.thumbnail ? _annotation.thumbnail : _this.default_thumbnail);
-            
-            // Update : display creator
-            if (_annotation.creator) {
-                var _users = [],
-                    _user = {};
-                if (_this.source.users_data) {
-                    _users = _this.source.users_data.filter(function(_user_data){
-                        return _user_data.username == _annotation.creator;
-                    });
+            if (_this.show_creator){
+                if (_annotation.creator) {
+                    var _users = [],
+                        _user = {},
+                        _creator = "";
+                    if (_this.source.users_data) {
+                        _users = _this.source.users_data.filter(function(_user_data){
+                            return _user_data.username == _annotation.creator;
+                        });
+                    }
+                    if (_users.length == 0){
+                        _user.username = _annotation.creator
+                    }
+                    else{
+                        _user = _users[0]
+                    }
+                    _creator = _this.make_name_string_function(_user);
                 }
-                if (_users.length == 0){
-                    _user.username = _annotation.creator
-                }
-                else{
-                    _user = _users[0]
-                }
-                _title = _this.make_name_string_function(_user);
             }
-            if (_annotation.title) {
-                var tempTitle = _annotation.title;
-                if( tempTitle.substr(0, _title.length + 1) == (_title + ":") ){
-                    _title = "";
-                }
-                _title = _title + ( (_title=="") ? "" : ": ") + _annotation.title;
+            if (_this.show_title && _annotation.title){
+                    var _title = _annotation.title;
             }
             var _bgcolor;
             IriSP._(_this.polemics).each(function(_polemic) {
@@ -572,7 +577,7 @@
             });
             var _created = false;
             if (_this.show_creation_date) {
-                _created = _annotation.created.toLocaleDateString()+", "+_annotation.created.toLocaleTimeString();
+                _created = _annotation.created.toLocaleDateString()+", "+_annotation.created.toLocaleTimeString().replace(/\u200E/g, '').replace(/^([^\d]*\d{1,2}:\d{1,2}):\d{1,2}([^\d]*)$/, '$1$2');;
             }
             if(this.tags == true){
                 var _tags = _annotation.getTagTexts();
@@ -585,19 +590,22 @@
                 media_id : _annotation.getMedia().id,
                 htitle : IriSP.textFieldHtml(_title),
                 title: _title,
-                creator: _annotation.creator ? ' (' + _annotation.creator + ')' : "",
+                creator: _creator,
                 hdescription : IriSP.textFieldHtml(_description),
                 description: _description,
                 begin : _annotation.begin.toString(),
                 end : _annotation.end.toString(),
                 created : _created,
                 show_timecode : _this.show_timecode,
+                show_end_time : _this.show_end_time,
+                show_title : _this.show_title && _title,
                 thumbnail : _thumbnail,
                 url : _url,
                 tags : _tags,
                 specific_style : (typeof _bgcolor !== "undefined" ? "background-color: " + _bgcolor : ""),
                 l10n: _this.l10n,
                 editable: _this.editable,
+                external: _external,
                 show_publish: _this.show_publish,
                 show_creator: _this.show_creator,
                 show_twitter: _this.show_twitter,
@@ -649,6 +657,12 @@
                     _annotation.trigger("unselect");
                 })
                 .click(function() {
+                    if (_this.filter_by_segments && _this.media.getTimeRange()){
+                        _ann_time = ( _annotation.begin + _annotation.end ) / 2;
+                        if ((_ann_time <= _this.media.getTimeRange()[0]) || (_ann_time >= _this.media.getTimeRange()[1])){
+                            _this.media.resetTimeRange()
+                        }
+                    }
                     _annotation.trigger("click");
                 })
                 .appendTo(_this.list_$);
@@ -903,16 +917,16 @@
 };
 
 IriSP.Widgets.AnnotationsList.prototype.onDeleteClick = function(event){
-    
+    _list = this.getWidgetAnnotations();
     ann_id = event.target.dataset.annotation;
     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 = "",
+        _creator = "",
         _this = this;
     if (_annotation.creator) {
         var _users = [],
@@ -928,7 +942,7 @@
         else{
             _user = _users[0]
         }
-        _title = _this.make_name_string_function(_user);
+        _creator = _this.make_name_string_function(_user);
     }
     if (_annotation.title) {
         var tempTitle = _annotation.title;
@@ -950,6 +964,8 @@
             end : _annotation.end.toString(),
             created : _created,
             show_timecode : this.show_timecode,
+            show_creator : this.show_creator,
+            creator : _creator,
             tags : false,
             l10n: this.l10n,
             allow_annotations_deletion: false
@@ -965,7 +981,7 @@
 }
 
 IriSP.Widgets.AnnotationsList.prototype.refreshHeader = function() {
-    var annotation_count_string = " (" + this.annotations_count +" annotations)";
+    var annotation_count_string = " (" + this.annotations_count +" "+this.annotations_count_header_string+")";
     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
@@ -1042,6 +1058,10 @@
     this.list_$ = this.$.find(".Ldt-AnnotationsList-ul");
     this.widget_$ = this.$.find(".Ldt-AnnotationsListWidget");
     
+    if (this.widget_max_height){
+        this.widget_$.css("max-height", this.widget_max_height)
+    }
+    
     if (this.show_filters){
         if (this.user_filter){
             this.userselect_$ = this.$.find("#Ldt-AnnotationsList-userFilter");