Tweaks to hide/show elements for several widgets to adjust for remie scenarii + More work on new widgets
authordurandn
Fri, 03 Jul 2015 15:49:04 +0200
changeset 1394 5eecb7d31547
parent 1393 2c75b482088b
child 1395 3097cb0581ac
Tweaks to hide/show elements for several widgets to adjust for remie scenarii + More work on new widgets
src/ldt/ldt/static/ldt/metadataplayer/AnnotationsController.css
src/ldt/ldt/static/ldt/metadataplayer/AnnotationsController.js
src/ldt/ldt/static/ldt/metadataplayer/AnnotationsList.css
src/ldt/ldt/static/ldt/metadataplayer/AnnotationsList.js
src/ldt/ldt/static/ldt/metadataplayer/CreateAnnotation.js
src/ldt/ldt/static/ldt/metadataplayer/LatestAnnotation.css
src/ldt/ldt/static/ldt/metadataplayer/LatestAnnotation.js
--- a/src/ldt/ldt/static/ldt/metadataplayer/AnnotationsController.css	Fri Jul 03 15:47:35 2015 +0200
+++ b/src/ldt/ldt/static/ldt/metadataplayer/AnnotationsController.css	Fri Jul 03 15:49:04 2015 +0200
@@ -1,7 +1,7 @@
 
 .Ldt-AnnotationsController{
 	background: url(img/pinstripe.png);
-	width: 537px;
+	width: 535px;
     max-height: 280px;
 	margin: 0px;
 	margin-top: 4px;
--- a/src/ldt/ldt/static/ldt/metadataplayer/AnnotationsController.js	Fri Jul 03 15:47:35 2015 +0200
+++ b/src/ldt/ldt/static/ldt/metadataplayer/AnnotationsController.js	Fri Jul 03 15:49:04 2015 +0200
@@ -13,6 +13,9 @@
 IriSP.Widgets.AnnotationsController.prototype.defaults = {
     // If true, displaying AnnotationList will hide CreateAnnotation and vice versa.
     display_or_write: false,
+    starts_hidden: false,
+    hide_without_segment: false,
+    segments_annotation_type: "chap"
 };
 
 IriSP.Widgets.AnnotationsController.prototype.template = 
@@ -37,20 +40,70 @@
 IriSP.Widgets.AnnotationsController.prototype.draw = function() { 
     this.renderTemplate();
     var _this = this;
+    this.element_$ = this.$.find(".Ldt-AnnotationsController")
     
-    this.$displayButton = this.$.find(".Ldt-AnnotationsController-ShowAnnotationsListButton");
-    this.$writeButton = this.$.find(".Ldt-AnnotationsController-ShowCreateAnnotationButton");
+    this.displayButton_$ = this.$.find(".Ldt-AnnotationsController-ShowAnnotationsListButton");
+    this.writeButton_$ = this.$.find(".Ldt-AnnotationsController-ShowCreateAnnotationButton");
     
-    this.$writeButton.click(function(){
+    this.writeButton_$.click(function(){
         _this.player.trigger("CreateAnnotation.toggle");
         if (_this.display_or_write){
             _this.player.trigger("AnnotationsList.hide");
         }
     });
-    this.$displayButton.click(function(){
+    this.displayButton_$.click(function(){
         _this.player.trigger("AnnotationsList.toggle");
         if (_this.display_or_write){
             _this.player.trigger("CreateAnnotation.hide");
         }
     })
+    this.onMediaEvent("timeupdate", "onTimeUpdate")
+    
+    if (this.starts_hidden) {
+        this.visible = true
+        this.hide();
+    }
+    else{
+        this.visible = false
+        this.show();
+    }
+    
 };
+
+IriSP.Widgets.AnnotationsController.prototype.onTimeUpdate = function(){
+    if (this.hide_without_segment){
+        _currentTime = this.media.getCurrentTime() 
+        _segmentsAnnotations = this.source.getAnnotationsByTypeTitle(this.segments_annotation_type)
+        _currentSegments = _segmentsAnnotations.filter(function(_segment){
+            return (_currentTime >= _segment.begin && _currentTime <= _segment.end)
+        });
+        if (_currentSegments.length == 0){
+            if (this.visible){
+                this.hide();
+                _this.player.trigger("CreateAnnotation.hide");
+                _this.player.trigger("AnnotationsList.hide");
+            }
+        }
+        else {
+            if (!this.visible){
+                this.show();
+                _this.player.trigger("CreateAnnotation.hide");
+                _this.player.trigger("AnnotationsList.hide");
+            }
+        }
+    }
+}
+
+IriSP.Widgets.AnnotationsController.prototype.hide = function() {
+    if (this.visible){
+        this.visible = false;
+        this.element_$.hide()
+    }
+}
+
+IriSP.Widgets.AnnotationsController.prototype.show = function() {
+    if(!this.visible){
+        this.visible = true;
+        this.element_$.show()
+    }
+}
--- a/src/ldt/ldt/static/ldt/metadataplayer/AnnotationsList.css	Fri Jul 03 15:47:35 2015 +0200
+++ b/src/ldt/ldt/static/ldt/metadataplayer/AnnotationsList.css	Fri Jul 03 15:49:04 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;
--- a/src/ldt/ldt/static/ldt/metadataplayer/AnnotationsList.js	Fri Jul 03 15:47:35 2015 +0200
+++ b/src/ldt/ldt/static/ldt/metadataplayer/AnnotationsList.js	Fri Jul 03 15:49:04 2015 +0200
@@ -35,8 +35,10 @@
     newest_first : false,
     always_visible : false,
     start_visible: true,
-    show_audio: true,
-    show_creation_date: false,
+    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.
      */
@@ -50,7 +52,7 @@
      * Show a text field that filter annotations by username
      */
     filter_by_user: false,
-    
+    tags : true,
     polemics : [{
         keyword: "++",
         background_color: "#c9ecc6"
@@ -79,6 +81,13 @@
 
 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}}'
     + '<ul class="Ldt-AnnotationsList-ul">'
     + '</ul>'
@@ -91,7 +100,7 @@
     + '<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>'
@@ -173,19 +182,19 @@
          *  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)
          */
-        _segments_annotations = this.currentSource.getAnnotationsByTypeTitle(this.segments_annotation_type)
-        _current_segments = _segments_annotations.filter(function(_segment){
+        _segmentsAnnotation = this.currentSource.getAnnotationsByTypeTitle(this.segments_annotation_type)
+        _currentSegments = _segmentsAnnotation.filter(function(_segment){
             return (_currentTime >= _segment.begin && _currentTime <= _segment.end)
         });
-        if (_current_segments.length == 0) {
+        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 (_current_segments[0].begin <= _annotation_time && _current_segments[0].end >= _annotation_time)
+                return (_currentSegments[0].begin <= _annotation_time && _currentSegments[0].end >= _annotation_time)
             });
         }
     }
@@ -260,6 +269,12 @@
             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,
@@ -268,9 +283,10 @@
                 begin : _annotation.begin.toString(),
                 end : _annotation.end.toString(),
                 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
             };
@@ -379,14 +395,14 @@
 IriSP.Widgets.AnnotationsList.prototype.hide = function() {
     if (this.visible){
         this.visible = false;
-        this.list_$.slideUp()
+        this.widget_$.slideUp()
     }
 }
 
 IriSP.Widgets.AnnotationsList.prototype.show = function() {
     if(!this.visible){
         this.visible = true;
-        this.list_$.slideDown()
+        this.widget_$.slideDown()
     }
 }
 
@@ -411,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) {
--- a/src/ldt/ldt/static/ldt/metadataplayer/CreateAnnotation.js	Fri Jul 03 15:47:35 2015 +0200
+++ b/src/ldt/ldt/static/ldt/metadataplayer/CreateAnnotation.js	Fri Jul 03 15:49:04 2015 +0200
@@ -16,6 +16,7 @@
     show_arrow : true,
     show_mic_record: false,
     show_mic_play: false,
+    show_time: true,
     minimize_annotation_widget : true,
     creator_name : "",
     creator_avatar : "",
@@ -42,6 +43,8 @@
     }],
     slice_annotation_type: "chap",
     annotation_type: "Contributions",
+    post_at_segment_time: false,
+    segment_annotation_type: "chap",
     api_serializer: "ldt_annotate",
     api_endpoint_template: "",
     api_method: "POST",
@@ -103,7 +106,7 @@
     + '<form class="Ldt-CreateAnnotation-Screen Ldt-CreateAnnotation-Main">'
     + '<h3><span class="Ldt-CreateAnnotation-h3Left">{{l10n.annotate_video}}{{#show_title_field}}</span></h3>'
     + '<h3><span class="Ldt-CreateAnnotation-h3Left"><input class="Ldt-CreateAnnotation-Title empty" placeholder="{{l10n.type_title}}" />{{/show_title_field}}'
-    + '<span class="Ldt-CreateAnnotation-Times"> {{#show_slice}}{{l10n.from_time}} {{/show_slice}}{{^show_slice}}{{l10n.at_time}} {{/show_slice}} <span class="Ldt-CreateAnnotation-Begin">00:00</span>'
+    + '{{#show_time}}<span class="Ldt-CreateAnnotation-Times"> {{#show_slice}}{{l10n.from_time}} {{/show_slice}}{{^show_slice}}{{l10n.at_time}} {{/show_slice}} <span class="Ldt-CreateAnnotation-Begin">00:00</span>{{/show_time}}'
     + '{{#show_slice}} {{l10n.to_time}} <span class="Ldt-CreateAnnotation-End">{{end}}</span>{{/show_slice}}</span></span>'
     + '{{#show_creator_field}}{{l10n.your_name_}} <input class="Ldt-CreateAnnotation-Creator empty" value="{{creator_name}}" {{#creator_field_readonly}}readonly{{/creator_field_readonly}}/>{{/show_creator_field}}</h3>'
     + '<textarea class="Ldt-CreateAnnotation-Description empty" placeholder="{{l10n.type_description}}"></textarea>'
@@ -409,9 +412,26 @@
      * ATTENTION: Si nous sommes sur un MASHUP, ces éléments doivent se référer AU MEDIA D'ORIGINE
      * */
     _annotation.setMedia(this.source.currentMedia.id); /* Id du média annoté */
-    _annotation.setBegin(this.begin); /*Timecode de début */
-    _annotation.setEnd(this.end); /* Timecode de fin */
-   
+    
+    if (this.post_at_segment_time){
+        var _currentTime = this.media.getCurrentTime() 
+        var _segmentsAnnotations = this.source.getAnnotationsByTypeTitle(this.segments_annotation_type)
+        var _currentSegments = _segmentsAnnotations.filter(function(_segment){
+            return (_currentTime >= _segment.begin && _currentTime <= _segment.end)
+        });
+        if (_currentSegments.length == 0){
+            _annotation.setBegin(this.begin); /* Timecode de début du widget */
+            _annotation.setEnd(this.end); /* Timecode de fin du widget */
+        }
+        else {
+            _annotation.setBegin(_currentSegments[0].begin); /* Timecode de début du segment */
+            _annotation.setEnd(_currentSegments[0].end); /* Timecode de fin du segment */
+        }
+    }
+    else {
+        _annotation.setBegin(this.begin); /*Timecode de début du widget */
+        _annotation.setEnd(this.end); /* Timecode de fin du widget */
+    }
     _annotation.setAnnotationType(_annotationType.id); /* Id du type d'annotation */
     if (this.show_title_field) {
         /* Champ titre, seulement s'il est visible */
@@ -460,7 +480,6 @@
     }
     _exportedAnnotations.push(_annotation); /* Ajout de l'annotation à la liste à exporter */
     _export.addList("annotation",_exportedAnnotations); /* Ajout de la liste à exporter à l'objet Source */
-    console.log(_export)
     var _this = this;
     /* Envoi de l'annotation via AJAX au serveur ! */
     IriSP.jQuery.ajax({
--- a/src/ldt/ldt/static/ldt/metadataplayer/LatestAnnotation.css	Fri Jul 03 15:47:35 2015 +0200
+++ b/src/ldt/ldt/static/ldt/metadataplayer/LatestAnnotation.css	Fri Jul 03 15:49:04 2015 +0200
@@ -1,6 +1,6 @@
 .Ldt-LatestAnnotation{
 	background: url(img/pinstripe.png);
-	width: 537px;
+	width: 535px;
 	max-height: 180px;
 	margin: 0px;
 	margin-top: 4px;
--- a/src/ldt/ldt/static/ldt/metadataplayer/LatestAnnotation.js	Fri Jul 03 15:47:35 2015 +0200
+++ b/src/ldt/ldt/static/ldt/metadataplayer/LatestAnnotation.js	Fri Jul 03 15:49:04 2015 +0200
@@ -9,8 +9,15 @@
 IriSP.Widgets.LatestAnnotation.prototype.defaults = {
     from_user: false,
     filter_by_segment: false,
-    segment_annotation_type: "chap",
-    annotation_type: "contribution"
+    segments_annotation_type: "chap",
+    hide_without_segment: false,
+    annotation_type: "contribution",
+    /*
+     * Set to a username if you only want to display annotations from a given user
+     */
+    show_only_annotation_from_user: false,
+    empty_message: false,
+    starts_hidden: false,
 };
 
 IriSP.Widgets.LatestAnnotation.prototype.template = 
@@ -32,54 +39,100 @@
     this.renderTemplate();
     
     this.annotationContainer_$ = this.$.find('.Ldt-LatestAnnotation');
-    this.refresh();
     
     this.onMediaEvent("timeupdate", "refresh");
+    
+    if (this.starts_hidden){
+        this.visible = true;
+        this.hide();
+    }
+    else{
+        this.visible = false;
+        this.show();
+    }
+    
+    this.refresh();
 }
 
-IriSP.Widgets.LatestAnnotation.prototype.refresh = function(){
-    var _list = this.getWidgetAnnotations();
-    if(this.filter_by_segment){
-        _currentTime = this.media.getCurrentTime();
-        _segments_annotations = this.source.getAnnotationsByTypeTitle(this.segments_annotation_type);
-        _current_segments = _segments_annotations.filter(function(_segment){
-            return (_currentTime >= _segment.begin && _currentTime <= _segment.end);
-        });
-        if (_current_segments.length == 0) {
-            _list = _list.filter(function(_annotation){
-                return false;
-            });
+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() 
+    var _segmentsAnnotations = this.source.getAnnotationsByTypeTitle(this.segments_annotation_type)
+    var _currentSegments = _segmentsAnnotations.filter(function(_segment){
+        return (_currentTime >= _segment.begin && _currentTime <= _segment.end)
+    });
+    if (this.hide_without_segment){
+        if (_currentSegments.length == 0){
+            if (this.visible){
+                this.hide()
+            }
         }
         else {
-            _list = _list.filter(function(_annotation){
-                _annotation_time = (_annotation.begin+_annotation.end)/2;
-                return (_current_segments[0].begin <= _annotation_time && _current_segments[0].end >= _annotation_time);
-            });
+            if (!this.visible){
+                this.show()
+            }
         }
-        _list.sortBy(function(_annotation){
-            return _annotation.created;
-        });
-        
-        var _latestAnnotation = false;
-        var _html="";
-        if (_list.length != 0){
-            _latestAnnotation = _list.pop();
-            console.log(_latestAnnotation.creator);
-            _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,
+    }
+    if (this.visible){
+        var _list = this.getWidgetAnnotations();
+        if(this.filter_by_segment){
+            if (_currentSegments.length == 0) {
+                _list = _list.filter(function(_annotation){
+                    return false;
+                });
+            }
+            else {
+                _list = _list.filter(function(_annotation){
+                    _annotationTime = (_annotation.begin+_annotation.end)/2;
+                    return (_currentSegments[0].begin <= _annotationTime && _currentSegments[0].end >= _annotationTime);
+                });
+            }
+            _list.sortBy(function(_annotation){
+                return _annotation.created;
             });
-        }
-        else {
-            _html = "<div class='Ldt-LatestAnnotation-Element Ldt-LatestAnnotation-NoAnnotation'>Aucune annotation à afficher</div>";
+            
+            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);
+            
         }
-        this.annotationContainer_$.html(_html);
-        
-    };
+    }
 }
 
-IriSP.Widgets.LatestAnnotation.prototype.getLastAnnotation = function(){
-    
-}
\ No newline at end of file
+IriSP.Widgets.LatestAnnotation.prototype.hide = function() {
+    if (this.visible){
+        this.visible = false;
+        this.annotationContainer_$.hide()
+    }
+}
+
+IriSP.Widgets.LatestAnnotation.prototype.show = function() {
+    if(!this.visible){
+        this.visible = true;
+        this.annotationContainer_$.show()
+    }
+}