--- a/src/widgets/AnnotationsList.js Tue Sep 01 15:24:26 2015 +0200
+++ b/src/widgets/AnnotationsList.js Tue Sep 01 15:31:46 2015 +0200
@@ -37,8 +37,10 @@
start_visible: true,
show_audio : true,
show_filters : false,
+ show_header : false,
+ custom_header : false,
show_creation_date : false,
- show_timecode : true,
+ show_timecode : true,
/*
* Only annotation in the current segment will be displayed. Designed to work with the Segments Widget.
*/
@@ -71,21 +73,30 @@
IriSP.Widgets.AnnotationsList.prototype.messages = {
en: {
voice_annotation: "Voice Annotation",
- now_playing: "Now playing..."
+ now_playing: "Now playing...",
+ everyone: "Everyone",
+ header: "Annotations for this content"
},
fr: {
voice_annotation: "Annotation Vocale",
- now_playing: "Lecture en cours..."
+ now_playing: "Lecture en cours...",
+ everyone: "Tous",
+ header: "Annotations sur ce contenu"
}
};
IriSP.Widgets.AnnotationsList.prototype.template =
- '<div class="Ldt-AnnotationsListWidget">'
+ '{{#show_header}}<p class="Ldt-AnnotationsList-header">'
+ + '{{#custom_header}}{{custom_header}}{{/custom_header}}'
+ + '{{^custom_header}}{{l10n.header}}{{/custom_header}}'
+ + '</p>{{/show_header}}'
+ + '<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>'
+ + '<input class="Ldt-AnnotationsList-filter-text" id="Ldt-AnnotationsList-keywordsFilter" type="text" value=""></input>'
+ + '<select class="Ldt-AnnotationsList-filter-dropdown" id="Ldt-AnnotationsList-userFilter"><option selected value="">{{l10n.everyone}}</option></select>'
+ + '<label class="Ldt-AnnotationsList-filter-date">Date: <input id="Ldt-AnnotationsList-dateFilter" type="text"></input></label>'
+ + '<label class="Ldt-AnnotationsList-filter-checkbox"><input type="checkbox" id="Ldt-AnnotationsList-ignoreSegmentsFilter">Toutes annotations</label>'
+ '</div>'
+ '{{/show_filters}}'
+ '{{#show_audio}}<div class="Ldt-AnnotationsList-Audio"></div>{{/show_audio}}'
@@ -177,15 +188,23 @@
_list = _list.filter(function(_annotation) {
return _annotation.found !== false;
});
- if (this.filter_by_segments) {
+
+ if ((this.filter_by_segments)&&(!(this.show_filters && this.ignoresegmentcheckbox_$[0].checked))) {
/*
* 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 (this.media.getTimeRange()){
+ _currentSegments = _segmentsAnnotation.filter(function(_segment){
+ return (_this.media.getTimeRange()[0] == _segment.begin && _this.media.getTimeRange()[1] == _segment.end)
+ });
+ }
+ else {
+ _currentSegments = _segmentsAnnotation.filter(function(_segment){
+ return (_currentTime >= _segment.begin && _currentTime <= _segment.end)
+ });
+ }
if (_currentSegments.length == 0) {
_list = _list.filter(function(_annotation){
return false;
@@ -209,6 +228,7 @@
return Math.abs((_annotation.begin + _annotation.end) / 2 - _currentTime);
}).slice(0, this.limit_count);
}
+
if (this.newest_first) {
_list = _list.sortBy(function(_annotation) {
return -_annotation.created.valueOf();
@@ -219,6 +239,31 @@
});
}
+ if (this.show_filters){
+ _username = this.userselect_$[0].options[this.userselect_$[0].selectedIndex].value;
+ if (_username != "false")
+ {
+ _list = _list.filter(function(_annotation){
+ return _annotation.creator == _username
+ })
+ }
+ _keyword = this.keywordinput_$[0].value;
+ if (_keyword != ""){
+ _list = _list.filter(function(_annotation){
+ return _annotation.description.toLowerCase().match(_keyword.toLowerCase());
+ });
+ }
+
+
+ if(this.datefilterinput_$[0].value != ""){
+ _date = this.datefilterinput_$.datepicker("getDate");
+ _list = _list.filter(function(_annotation){
+ return ((_annotation.created.getDate() == _date.getDate())&&(_annotation.created.getMonth() == _date.getMonth())&&(_annotation.created.getFullYear() == _date.getFullYear()))
+ });
+ }
+
+ }
+
var _ids = _list.idIndex;
if (_forceRedraw || !IriSP._.isEqual(_ids, this.lastIds) || this.searchString !== this.lastSearch) {
@@ -246,7 +291,8 @@
);
var _title = "",
_description = _annotation.description,
- _thumbnail = (typeof _annotation.thumbnail !== "undefined" && _annotation.thumbnail ? _annotation.thumbnail : _this.default_thumbnail);
+ _thumbnail = (typeof _annotation.thumbnail !== "undefined" && _annotation.thumbnail ? _annotation.thumbnail : _this.default_thumbnail)
+
// Update : display creator
if (_annotation.creator) {
_title = _annotation.creator;
@@ -334,6 +380,9 @@
.mouseout(function() {
_annotation.trigger("unselect");
})
+ .click(function() {
+ _annotation.trigger("click");
+ })
.appendTo(_this.list_$);
IriSP.attachDndData(_el.find("[draggable]"), {
title: _title,
@@ -393,16 +442,20 @@
};
IriSP.Widgets.AnnotationsList.prototype.hide = function() {
+ var _this = this;
if (this.visible){
this.visible = false;
- this.widget_$.slideUp()
+ this.widget_$.slideUp(function(){
+ _this.$.find('.Ldt-AnnotationsList-header').hide();
+ });
}
}
IriSP.Widgets.AnnotationsList.prototype.show = function() {
if(!this.visible){
this.visible = true;
- this.widget_$.slideDown()
+ this.$.find('.Ldt-AnnotationsList-header').show();
+ this.widget_$.slideDown();
}
}
@@ -428,7 +481,23 @@
this.list_$ = this.$.find(".Ldt-AnnotationsList-ul");
this.widget_$ = this.$.find(".Ldt-AnnotationsListWidget");
-
+ this.userselect_$ = this.$.find("#Ldt-AnnotationsList-userFilter");
+ this.userselect_$.change(function(){
+ _this.player.trigger("AnnotationsList.refresh");
+ });
+ this.keywordinput_$ = this.$.find("#Ldt-AnnotationsList-keywordsFilter");
+ this.keywordinput_$.keyup(function(){
+ _this.player.trigger("AnnotationsList.refresh");
+ });
+ this.ignoresegmentcheckbox_$ = this.$.find("#Ldt-AnnotationsList-ignoreSegmentsFilter");
+ this.ignoresegmentcheckbox_$.click(function(){
+ _this.player.trigger("AnnotationsList.refresh");
+ });
+ this.datefilterinput_$ = this.$.find("#Ldt-AnnotationsList-dateFilter");
+ this.datefilterinput_$.datepicker({ dateFormat: 'dd/mm/yy' });
+ this.datefilterinput_$.change(function(){
+ _this.player.trigger("AnnotationsList.refresh")
+ })
this.source.getAnnotations().on("search", function(_text) {
_this.searchString = _text;
@@ -453,6 +522,20 @@
_this.throttledRefresh();
});
+ if (this.show_filters){
+ _usernames = Array();
+ _list = this.getWidgetAnnotations()
+ _list.forEach(function(_annotation){
+ if(_usernames.indexOf(_annotation.creator) == -1){
+ _usernames.push(_annotation.creator);
+ }
+ });
+ this.userselect_$.html("<option selected value='false'>"+this.l10n.everyone+"</option>");
+ _usernames.forEach(function(_user){
+ _this.userselect_$.append("<option value='"+_user+"'>"+_user+"</option>");
+ });
+ }
+
this.onMdpEvent("AnnotationsList.refresh", function() {
if (_this.ajax_url) {
if (_this.mashupMode) {
@@ -484,11 +567,12 @@
this.onMdpEvent("AnnotationsList.hide", "hide");
this.onMdpEvent("AnnotationsList.show", "show");
- this.onMdpEvent("createAnnotationWidget.addedAnnotation", "refresh");
+ this.onMdpEvent("createAnnotationWidget.addedAnnotation", this.throttledRefresh);
var _events = [
"timeupdate",
"seeked",
- "loadedmetadata"
+ "loadedmetadata",
+ "settimerange"
];
for (var _i = 0; _i < _events.length; _i++) {
this.onMediaEvent(_events[_i], this.throttledRefresh);