metadataplayer: comparison src/widgets/AnnotationsList.js

Mercurial Mercurial > metadataplayer / comparison

summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help

src/widgets/AnnotationsList.js

changeset 1046	eb77616c245f
parent 1037	5c0416e8bba1
child 1053	149a4ea20ea7

equal deleted inserted replaced

-:b06345320ffb
+:eb77616c245f
 newest_first : false,
 always_visible : false,
 start_visible: true,
 show_audio : true,
 show_filters : false,
+show_header : false,
+custom_header : 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",
 };
 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>'
++    '<input class="Ldt-AnnotationsList-filter-text" id="Ldt-AnnotationsList-keywordsFilter" type="text" value=""></input>'
-+    '<select class="Ldt-AnnotationsList-filter-dropdown"></select>'
++    '<select class="Ldt-AnnotationsList-filter-dropdown" id="Ldt-AnnotationsList-userFilter"><option selected value="">{{l10n.everyone}}</option></select>'
-+    '<label class="Ldt-AnnotationsList-filter-checkbox"><input type="checkbox">Toutes annotations</label>'
++    '<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}}'
 + '<ul class="Ldt-AnnotationsList-ul">'
 + '</ul>'
 }
 }
 _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){
+if (this.media.getTimeRange()){
-return (_currentTime >= _segment.begin && _currentTime <= _segment.end)
+_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;
 });
 }
 /* Get the n annotations closest to current timecode */
 _list = _list.sortBy(function(_annotation) {
 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();
 });
 } else {
 _list = _list.sortBy(function(_annotation) {
 return _annotation.begin;
 });
+}
+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) {
 : document.location.href.replace(/#.*$/,'') + '#id=' + _annotation.id
 )
 );
 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;
 }
 if (_annotation.title) {
 _annotation.trigger("select");
 })
 .mouseout(function() {
 _annotation.trigger("unselect");
 })
+.click(function() {
+_annotation.trigger("click");
+})
 .appendTo(_this.list_$);
 IriSP.attachDndData(_el.find("[draggable]"), {
 title: _title,
 description: _description,
 uri: _url,
 return _list.length;
 };
 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();
 }
 }
 IriSP.Widgets.AnnotationsList.prototype.toggle = function() {
 var _this = this;
 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;
 if (_this.source !== _this.currentSource) {
 _this.currentSource.getAnnotations().search(_text);
 }
 });
 this.source.getAnnotations().on("search-cleared", function() {
 _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) {
 _this.ajaxMashup();
 this.onMdpEvent("AnnotationsList.toggle","toggle");
 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);
 }

metadataplayer