# HG changeset patch
# User durandn
# Date 1435935430 -7200
# Node ID 5c0416e8bba175964fc62fe56125d4b910530108
# Parent  3b88465041d69633eb988578c8c856e71465645f
AnnotationsList widget new features: show creation date for annotations, hide/show feature on signal trigger, filter by username

diff -r 3b88465041d6 -r 5c0416e8bba1 src/widgets/AnnotationsList.css
--- a/src/widgets/AnnotationsList.css	Fri Jul 03 16:54:26 2015 +0200
+++ b/src/widgets/AnnotationsList.css	Fri Jul 03 16:57:10 2015 +0200
@@ -13,6 +13,33 @@
     width: 1px; height: 1px;
 }
 
+.Ldt-AnnotationsList-Filters {
+	display: table-cell;
+	width: 100%;
+	height: 30px;
+	vertical-align: middle;
+    text-align: center;
+	
+}
+
+.Ldt-AnnotationsList-filter-text {
+    text-align: left;
+	display: inline;
+	margin: 4px 2px;
+}
+
+.Ldt-AnnotationsList-filter-dropdown {
+    text-align: center;
+	display: inline;
+	margin: 4px 2px;
+}
+
+.Ldt-AnnotationsList-filter-checkbox {
+    text-align: center;
+	display: inline;
+	margin: 4px 2px;
+}
+
 ul.Ldt-AnnotationsList-ul {
     list-style: none;
     padding: 2px;
@@ -48,6 +75,12 @@
     font-size: 12px;
     margin: 2px;
 }
+.Ldt-AnnotationsList-CreationDate {
+    color: #f7268e;
+    text-align: left;
+    font-size: 12px;
+    margin: 2px 2px 0 82px;
+}
 h3.Ldt-AnnotationsList-Title {
     color: #0068c4;
     font-size: 13px;
@@ -106,12 +139,4 @@
 
 .Ldt-AnnotationsList-Play:hover {
     background-position: 0 bottom;
-}
-
-.Ldt-AnnotationsList-Control-Prev {
-    cursor: url(img/hand_left.png), pointer;
-}
-
-.Ldt-AnnotationsList-Control-Next {
-    cursor: url(img/hand_right.png), pointer;
-}
+}
\ No newline at end of file
diff -r 3b88465041d6 -r 5c0416e8bba1 src/widgets/AnnotationsList.js
--- a/src/widgets/AnnotationsList.js	Fri Jul 03 16:54:26 2015 +0200
+++ b/src/widgets/AnnotationsList.js	Fri Jul 03 16:57:10 2015 +0200
@@ -12,25 +12,47 @@
 IriSP.Widgets.AnnotationsList.prototype = new IriSP.Widgets.Widget();
 
 IriSP.Widgets.AnnotationsList.prototype.defaults = {
-    /* URL when the annotations are to be reloaded from an LDT-like segment API
-     * e.g. http://ldt.iri.centrepompidou.fr/ldtplatform/api/ldt/segments/{{media}}/{{begin}}/{{end}}?callback=?
+    /*
+     * URL when the annotations are to be reloaded from an LDT-like segment API
+     * e.g.
+     * http://ldt.iri.centrepompidou.fr/ldtplatform/api/ldt/segments/{{media}}/{{begin}}/{{end}}?callback=?
      */
     ajax_url : false,
-    /* number of milliseconds before/after the current timecode when calling the segment API
+    /*
+     * number of milliseconds before/after the current timecode when calling the
+     * segment API
      */
     ajax_granularity : 600000, 
     default_thumbnail : "",
-    /* 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}}
+    /*
+     * 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}}
      */
     foreign_url : "",
     annotation_type : false,
     refresh_interval : 0,
     limit_count : 20,
     newest_first : false,
-    show_audio: true,
-    show_creator: false,
-    show_controls: false,
+    always_visible : false,
+    start_visible: true,
+    show_audio : true,
+    show_filters : false,
+    show_creation_date : false,
+    show_timecode : true, 
+    /*
+     * Only annotation in the current segment will be displayed. Designed to work with the Segments Widget.
+     */
+    filter_by_segments: false,
+    segments_annotation_type: "chap",
+    /*
+     * Set to a username if you only want to display annotations from a given user
+     */
+    show_only_annotation_from_user: false,
+    /*
+     * Show a text field that filter annotations by username
+     */
+    filter_by_user: false,
+    tags : true,
     polemics : [{
         keyword: "++",
         background_color: "#c9ecc6"
@@ -59,24 +81,33 @@
 
 IriSP.Widgets.AnnotationsList.prototype.template =
     '<div class="Ldt-AnnotationsListWidget">'
+    + '{{#show_filters}}'
+    + '<div class="Ldt-AnnotationsList-Filters">'
+    +    '<input class="Ldt-AnnotationsList-filter-text" type="text" value="Mot-clés"></input>'
+    +    '<select class="Ldt-AnnotationsList-filter-dropdown"></select>'
+    +    '<label class="Ldt-AnnotationsList-filter-checkbox"><input type="checkbox">Toutes annotations</label>'
+    + '</div>'
+    + '{{/show_filters}}'
     + '{{#show_audio}}<div class="Ldt-AnnotationsList-Audio"></div>{{/show_audio}}'
-    + '{{#show_controls}}<div class="Ldt-AnnotationsList-Controls"><span class="Ldt-AnnotationsList-Control-Prev">Previous</span> | <span class="Ldt-AnnotationsList-Control-Next">Next</span></div>{{/show_controls}}'
     + '<ul class="Ldt-AnnotationsList-ul">'
     + '</ul>'
     + '</div>';
 
 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}}">'
+    '<li class="Ldt-AnnotationsList-li Ldt-TraceMe" trace-info="annotation-id:{{id}}, media-id:{{media_id}}" style="{{specific_style}}">'
     + '<div class="Ldt-AnnotationsList-ThumbContainer">'
     + '<a href="{{url}}" draggable="true">'
-    + '<img title="{{ begin }} - {{ atitle }}" class="Ldt-AnnotationsList-Thumbnail" src="{{thumbnail}}" />'
+    + '<img class="Ldt-AnnotationsList-Thumbnail" src="{{thumbnail}}" />'
     + '</a>'
     + '</div>'
-    + '<div class="Ldt-AnnotationsList-Duration">{{begin}} - {{end}}</div>'
+    + '{{#show_timecode}}<div class="Ldt-AnnotationsList-Duration">{{begin}} - {{end}}</div>{{/show_timecode}}'
     + '<h3 class="Ldt-AnnotationsList-Title" draggable="true">'
     + '<a href="{{url}}">{{{htitle}}}</a>'
     + '</h3>'
     + '<p class="Ldt-AnnotationsList-Description">{{{hdescription}}}</p>'
+    + '{{#created}}'
+    + '<div class="Ldt-AnnotationsList-CreationDate">{{{created}}}</div>'
+    + '{{/created}}'
     + '{{#tags.length}}'
     + '<ul class="Ldt-AnnotationsList-Tags">'
     + '{{#tags}}'
@@ -91,7 +122,8 @@
     + '{{#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 + "/" + annotations[i].meta["id-ref"] + '#id=' + annotations[i].id;
+// obj.url = this.project_url + "/" + media + "/" + annotations[i].meta.project
+// + "/" + annotations[i].meta["id-ref"] + '#id=' + annotations[i].id;
 
 IriSP.Widgets.AnnotationsList.prototype.ajaxSource = function() {
     var _currentTime = this.media.getCurrentTime(),
@@ -145,6 +177,32 @@
     _list = _list.filter(function(_annotation) {
         return _annotation.found !== false;
     });
+    if (this.filter_by_segments) {
+        /*
+         *  A given annotation is considered "in" segment if the middle of it is between the segment beginning and the segment end. 
+         *  Note this is meant to be used for "markings" annotations (not segments)
+         */
+        _segmentsAnnotation = this.currentSource.getAnnotationsByTypeTitle(this.segments_annotation_type)
+        _currentSegments = _segmentsAnnotation.filter(function(_segment){
+            return (_currentTime >= _segment.begin && _currentTime <= _segment.end)
+        });
+        if (_currentSegments.length == 0) {
+            _list = _list.filter(function(_annotation){
+                return false;
+            });
+        }
+        else {
+            _list = _list.filter(function(_annotation){
+                _annotation_time = (_annotation.begin+_annotation.end)/2;
+                return (_currentSegments[0].begin <= _annotation_time && _currentSegments[0].end >= _annotation_time)
+            });
+        }
+    }
+    if (this.show_only_annotation_from_user){
+        _list = _list.filter(function(_annotation){
+           return _annotation.creator == _this.show_only_annotation_from_user;
+        });
+    }
     if (this.limit_count) {
         /* Get the n annotations closest to current timecode */
         _list = _list.sortBy(function(_annotation) {
@@ -190,14 +248,14 @@
                 _description = _annotation.description,
                 _thumbnail = (typeof _annotation.thumbnail !== "undefined" && _annotation.thumbnail ? _annotation.thumbnail : _this.default_thumbnail);
             // Update : display creator
-            if (_annotation.creator && _this.show_creator) {
-            	_title = _annotation.creator;
+            if (_annotation.creator) {
+                _title = _annotation.creator;
             }
             if (_annotation.title) {
-            	var tempTitle = _annotation.title;
-            	if( tempTitle.substr(0, _title.length + 1) == (_title + ":") ){
-            		_title = "";
-            	}
+                var tempTitle = _annotation.title;
+                if( tempTitle.substr(0, _title.length + 1) == (_title + ":") ){
+                    _title = "";
+                }
                 _title = _title + ( (_title=="") ? "" : ": ") + _annotation.title;
             }
             var _bgcolor;
@@ -207,26 +265,31 @@
                     _bgcolor = _polemic.background_color;
                 }
             });
+            var _created = false;
+            if (_this.show_creation_date) {
+                _created = _annotation.created.toLocaleDateString()+", "+_annotation.created.toLocaleTimeString();
+            }
+            if(this.tags == true){
+                var _tags = _annotation.getTagTexts();
+            }
+            else {
+                var _tags = false;
+            }
             var _data = {
                 id : _annotation.id,
                 media_id : _annotation.getMedia().id,
-                atitle: IriSP.textFieldHtml(_annotation.title),
                 htitle : IriSP.textFieldHtml(_title),
                 hdescription : IriSP.textFieldHtml(_description),
                 begin : _annotation.begin.toString(),
                 end : _annotation.end.toString(),
-                begin_ms : _annotation.begin.milliseconds,
-                end_ms : _annotation.end.milliseconds,
+                created : _created,
+                show_timecode : _this.show_timecode,
                 thumbnail : _thumbnail,
                 url : _url,
-                tags : _annotation.getTagTexts(),
+                tags : _tags,
                 specific_style : (typeof _bgcolor !== "undefined" ? "background-color: " + _bgcolor : ""),
                 l10n: _this.l10n
             };
-            if (_this.show_controls) {
-                _this.$.find(".Ldt-AnnotationsList-Control-Prev").on("click", function (e) { e.preventDefault(); _this.navigate(-1); });
-                _this.$.find(".Ldt-AnnotationsList-Control-Next").on("click", function (e) { e.preventDefault(); _this.navigate(+1); });
-           }
             if (_this.show_audio && _annotation.audio && _annotation.audio.href && _annotation.audio.href != "null") {
                 _data.audio = true;
                 if (!_this.jwplayers[_annotation.id]) {
@@ -273,10 +336,10 @@
                 })
                 .appendTo(_this.list_$);
             IriSP.attachDndData(_el.find("[draggable]"), {
-            	title: _title,
-            	description: _description,
-            	uri: _url,
-            	image: _annotation.thumbnail
+                title: _title,
+                description: _description,
+                uri: _url,
+                image: _annotation.thumbnail
             });
             _el.on("remove", function() {
                 _annotation.off("select", _onselect);
@@ -325,9 +388,35 @@
             }
         }
     }
+    
     return _list.length;
 };
 
+IriSP.Widgets.AnnotationsList.prototype.hide = function() {
+    if (this.visible){
+        this.visible = false;
+        this.widget_$.slideUp()
+    }
+}
+
+IriSP.Widgets.AnnotationsList.prototype.show = function() {
+    if(!this.visible){
+        this.visible = true;
+        this.widget_$.slideDown()
+    }
+}
+
+
+IriSP.Widgets.AnnotationsList.prototype.toggle = function() {
+    if (!this.always_visible) {
+        if (this.visible) {
+            this.hide();
+        } else {
+            this.show();
+        }
+    }
+};
+
 IriSP.Widgets.AnnotationsList.prototype.draw = function() {
     
     this.jwplayers = {};
@@ -338,6 +427,7 @@
     var _this = this;
         
     this.list_$ = this.$.find(".Ldt-AnnotationsList-ul");
+    this.widget_$ = this.$.find(".Ldt-AnnotationsListWidget");
     
     
     this.source.getAnnotations().on("search", function(_text) {
@@ -390,7 +480,11 @@
         }, this.refresh_interval);
     }
     
-    this.onMdpEvent("createAnnotationWidget.addedAnnotation");
+    this.onMdpEvent("AnnotationsList.toggle","toggle");
+    this.onMdpEvent("AnnotationsList.hide", "hide");
+    this.onMdpEvent("AnnotationsList.show", "show");
+    
+    this.onMdpEvent("createAnnotationWidget.addedAnnotation", "refresh");
     var _events = [
         "timeupdate",
         "seeked",
@@ -401,5 +495,10 @@
     }
     
     this.throttledRefresh();
-
+    
+    this.visible = true;
+    if (!this.start_visible){
+        this.hide();
+    }
+    
 };