# HG changeset patch
# User durandn
# Date 1437381902 -7200
# Node ID 3e47f3eb145b27448084e9b3d80ce5baf2e8e0c1
# Parent  f40a84c7cebff5ddaf87ec0890bb560d2ee886b5
Added filters for AnnotationsList and clicking support + copying and editing for LatestAnnotation

diff -r f40a84c7cebf -r 3e47f3eb145b server/src/remie/static/remie/metadataplayer/AnnotationsList.css
--- 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;
diff -r f40a84c7cebf -r 3e47f3eb145b server/src/remie/static/remie/metadataplayer/AnnotationsList.js
--- 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) {
diff -r f40a84c7cebf -r 3e47f3eb145b server/src/remie/static/remie/metadataplayer/LatestAnnotation.css
--- 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
diff -r f40a84c7cebf -r 3e47f3eb145b server/src/remie/static/remie/metadataplayer/LatestAnnotation.js
--- 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() {