Added filters for AnnotationsList and clicking support + copying and editing for LatestAnnotation
--- a/server/src/remie/static/remie/metadataplayer/AnnotationsList.css Mon Jul 20 08:30:28 2015 +0200
+++ b/server/src/remie/static/remie/metadataplayer/AnnotationsList.css Mon Jul 20 10:45:02 2015 +0200
@@ -1,9 +1,14 @@
/* AnnotationsListWidget */
+#ui-datepicker-div
+{
+ display: none;
+}
+
.Ldt-AnnotationsListWidget {
border: none; margin: 0; padding: 0;
overflow: auto;
- max-height: 480px;
+ max-height: 380px;
}
.Ldt-AnnotationsListWidget a {
text-decoration: none;
--- a/server/src/remie/static/remie/metadataplayer/AnnotationsList.js Mon Jul 20 08:30:28 2015 +0200
+++ b/server/src/remie/static/remie/metadataplayer/AnnotationsList.js Mon Jul 20 10:45:02 2015 +0200
@@ -71,11 +71,13 @@
IriSP.Widgets.AnnotationsList.prototype.messages = {
en: {
voice_annotation: "Voice Annotation",
- now_playing: "Now playing..."
+ now_playing: "Now playing...",
+ everyone: "Everyone"
},
fr: {
voice_annotation: "Annotation Vocale",
- now_playing: "Lecture en cours..."
+ now_playing: "Lecture en cours...",
+ everyone: "Tous"
}
};
@@ -83,9 +85,10 @@
'<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,7 +180,8 @@
_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)
@@ -209,6 +213,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 +224,30 @@
});
}
+ 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());
+ });
+ }
+
+ _date = this.datefilterinput_$[0].value
+ if(_date != ""){
+ _list = _list.filter(function(_annotation){
+ return _annotation.created.toLocaleDateString() == _date
+ });
+ }
+
+ }
+
var _ids = _list.idIndex;
if (_forceRedraw || !IriSP._.isEqual(_ids, this.lastIds) || this.searchString !== this.lastSearch) {
@@ -334,6 +363,9 @@
.mouseout(function() {
_annotation.trigger("unselect");
})
+ .click(function() {
+ _annotation.trigger("click");
+ })
.appendTo(_this.list_$);
IriSP.attachDndData(_el.find("[draggable]"), {
title: _title,
@@ -428,7 +460,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 +501,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) {
--- a/server/src/remie/static/remie/metadataplayer/LatestAnnotation.css Mon Jul 20 08:30:28 2015 +0200
+++ b/server/src/remie/static/remie/metadataplayer/LatestAnnotation.css Mon Jul 20 10:45:02 2015 +0200
@@ -25,6 +25,8 @@
}
.Ldt-LatestAnnotation-Content{
+ max-width: 230px;
+ text-align: justify;
}
.Ldt-LatestAnnotation-Title{
@@ -37,3 +39,26 @@
font-size: 14px;
font-weight: bold;
}
+
+.Ldt-LatestAnnotation-CopyEditButton{
+ display: inline-block;
+ background-color: #d93c71;
+ color: #ffffff;
+ float: right;
+ cursor: pointer;
+ height: 14px;
+ width: 100px;
+ margin: 2px;
+ padding: 2px;
+ font-size: 11px;
+ border: 1px solid;
+ border-color: #eca3bc #631e34 #36101c #e16e93;
+ cursor: pointer;
+ text-align: center;
+ vertical-align: middle;
+}
+
+.Ldt-LatestAnnotation-CopyEditButton:hover{
+ background-color: #e15581;
+ border-color: #222222 #e87d9f #f0adc3 #68273c;
+}
\ No newline at end of file
--- a/server/src/remie/static/remie/metadataplayer/LatestAnnotation.js Mon Jul 20 08:30:28 2015 +0200
+++ b/server/src/remie/static/remie/metadataplayer/LatestAnnotation.js Mon Jul 20 10:45:02 2015 +0200
@@ -16,32 +16,78 @@
* Set to a username if you only want to display annotations from a given user
*/
show_only_annotation_from_user: false,
+ /*
+ * Displays a button that copy currently displayed annotation into CreateAnnotation input field
+ */
+ copy_and_edit_button: false,
+ /*
+ * Allows clicks on an annotation from Annotations to display the annotation content into this widget
+ */
+ selectable_annotations: false,
empty_message: false,
starts_hidden: false,
};
+IriSP.Widgets.LatestAnnotation.prototype.messages = {
+ fr : {
+ copy_and_edit: "Copier et Editer",
+ empty : "Aucune annotation à afficher"
+ },
+ en: {
+ copy_and_edit: "Copy and Edit",
+ empty: "No annotation to display"
+ }
+}
+
IriSP.Widgets.LatestAnnotation.prototype.template =
"<div class='Ldt-LatestAnnotation'>"
+ "</div>";
IriSP.Widgets.LatestAnnotation.prototype.annotationTemplate =
"<div class='Ldt-LatestAnnotation-Box'>"
- + " <div class='Ldt-LatestAnnotation-Element Ldt-LatestAnnotation-CreationDate'>{{{annotation_created}}}</div>"
- + " <div class='Ldt-LatestAnnotation-Element Ldt-LatestAnnotation-Title'>{{{annotation_creator}}}{{#annotation_title}}: {{{annotation_title}}}{{/annotation_title}}</div>"
- + " <div class='Ldt-LatestAnnotation-Element Ldt-LatestAnnotation-Content'>"
+ + "<div class='Ldt-LatestAnnotation-Element Ldt-LatestAnnotation-CreationDate'>{{{annotation_created}}}</div>"
+ + "<div class='Ldt-LatestAnnotation-Element Ldt-LatestAnnotation-Title'>{{{annotation_creator}}}{{#annotation_title}}: {{{annotation_title}}}{{/annotation_title}}</div>"
+ + "<div class='Ldt-LatestAnnotation-Element Ldt-LatestAnnotation-Content'>"
+ "{{{annotation_content}}}"
- + " </div>"
+ + "</div>"
+ + "{{#copy_and_edit_button}}<div class='Ldt-LatestAnnotation-CopyEditButton'>{{button_text}}</div>{{/copy_and_edit_button}}"
+ "</div>"
+
IriSP.Widgets.LatestAnnotation.prototype.draw = function(){
var _this = this;
-
this.renderTemplate();
this.annotationContainer_$ = this.$.find('.Ldt-LatestAnnotation');
this.onMediaEvent("timeupdate", "refresh");
+ if (this.selectable_annotations){
+ this.onMdpEvent("AnnotationsList.refresh", function(){
+ _this.getWidgetAnnotations().forEach(function(_annotation){
+ _annotation.off("click");
+ _annotation.on("click", function(){
+ _html = Mustache.to_html(_this.annotationTemplate, {
+ annotation_created: _annotation.created.toLocaleDateString()+", "+_annotation.created.toLocaleTimeString(),
+ annotation_creator: _annotation.creator,
+ annotation_title: _annotation.title,
+ annotation_content: _annotation.description,
+ copy_and_edit_button: _this.copy_and_edit_button,
+ button_text: _this.l10n.copy_and_edit,
+ });
+ _this.annotationContainer_$.html(_html);
+ _this.selectedAnnotation = true;
+ });
+ });
+ });
+
+ var _segmentsAnnotations = _this.source.getAnnotationsByTypeTitle(this.segments_annotation_type)
+ _segmentsAnnotations.forEach(function(_segment){
+ _segment.on("click", function(){
+ _this.selectedAnnotation = false;
+ })
+ })
+ }
if (this.starts_hidden){
this.visible = true;
this.hide();
@@ -51,17 +97,11 @@
this.show();
}
+ this.selectedAnnotation = false; // This flag tells the widget if it must display last annotation (false) or clicked annotation (true)
+ this.player.trigger("AnnotationsList.refresh")
this.refresh();
}
-IriSP.Widgets.LatestAnnotation.prototype.messages = {
- fr : {
- empty : "Aucune annotation à afficher"
- },
- en: {
- empty: "No annotation to display"
- }
-}
IriSP.Widgets.LatestAnnotation.prototype.refresh = function(){
var _currentTime = this.media.getCurrentTime()
@@ -69,6 +109,11 @@
var _currentSegments = _segmentsAnnotations.filter(function(_segment){
return (_currentTime >= _segment.begin && _currentTime <= _segment.end)
});
+
+ if (_currentSegments.length == 0){
+ this.selectedAnnotation = false;
+ }
+
if (this.hide_without_segment){
if (_currentSegments.length == 0){
if (this.visible){
@@ -81,8 +126,10 @@
}
}
}
- if (this.visible){
+
+ if (this.visible && !this.selectedAnnotation){
var _list = this.getWidgetAnnotations();
+
if(this.filter_by_segment){
if (_currentSegments.length == 0) {
_list = _list.filter(function(_annotation){
@@ -95,32 +142,47 @@
return (_currentSegments[0].begin <= _annotationTime && _currentSegments[0].end >= _annotationTime);
});
}
- _list.sortBy(function(_annotation){
- return _annotation.created;
+ }
+
+ _list = _list.sortBy(function(_annotation){
+ return _annotation.created;
+ });
+
+ var _latestAnnotation = false;
+ var _html="";
+ if (_list.length != 0){
+ _latestAnnotation = _list.pop();
+ _html = Mustache.to_html(this.annotationTemplate, {
+ annotation_created: _latestAnnotation.created.toLocaleDateString()+", "+_latestAnnotation.created.toLocaleTimeString(),
+ annotation_creator: _latestAnnotation.creator,
+ annotation_title: _latestAnnotation.title,
+ annotation_content: _latestAnnotation.description,
+ copy_and_edit_button: this.copy_and_edit_button,
+ button_text: this.l10n.copy_and_edit,
});
+ }
+ else {
+ var _empty_message = this.l10n.empty
+ if (this.empty_message) {
+ _empty_message = this.empty_message
+ }
+ _html = "<div class='Ldt-LatestAnnotation-Element Ldt-LatestAnnotation-NoAnnotation'>"+_empty_message+"</div>";
+ }
+ this.annotationContainer_$.html(_html);
+ }
+
+ if(this.copy_and_edit_button){
+ this.copyAndEditButton_$ = this.$.find('.Ldt-LatestAnnotation-CopyEditButton');
+ this.copyAndEditButton_$.click(function(){
+ _this.player.trigger("CreateAnnotation.show");
+ _this.player.trigger("AnnotationsList.hide");
+ annotationText = $('.Ldt-LatestAnnotation-Content').get(0).innerHTML;
- var _latestAnnotation = false;
- var _html="";
- if (_list.length != 0){
- _latestAnnotation = _list.pop();
- _html = Mustache.to_html(this.annotationTemplate, {
- annotation_created: _latestAnnotation.created.toLocaleDateString()+", "+_latestAnnotation.created.toLocaleTimeString(),
- annotation_creator: _latestAnnotation.creator,
- annotation_title: _latestAnnotation.title,
- annotation_content: _latestAnnotation.description,
- });
- }
- else {
- var _empty_message = this.l10n.empty
- if (this.empty_message) {
- _empty_message = this.empty_message
- }
- _html = "<div class='Ldt-LatestAnnotation-Element Ldt-LatestAnnotation-NoAnnotation'>"+_empty_message+"</div>";
- }
- this.annotationContainer_$.html(_html);
-
- }
+ $('.Ldt-CreateAnnotation-Description').removeClass('empty');
+ $('.Ldt-CreateAnnotation-Description').val(annotationText);
+ });
}
+
}
IriSP.Widgets.LatestAnnotation.prototype.hide = function() {