web/res/metadataplayer/Annotation.js
changeset 719 d0d3a9369f84
parent 694 e9400c80e1e4
child 726 d82d070cf23e
--- a/web/res/metadataplayer/Annotation.js	Thu Nov 15 13:12:29 2012 +0100
+++ b/web/res/metadataplayer/Annotation.js	Wed Nov 28 13:19:48 2012 +0100
@@ -15,14 +15,16 @@
         on_site: " sur ",
         tags_: "Mots-clés :",
         description_: "Description :",
-        excerpt_from: "Extrait de :"
+        excerpt_from: "Extrait de :",
+        untitled: "Segment sans titre"
     },
     en: {
         watching: "I'm watching ",
         on_site: " on ",
         tags_: "Keywords:",
         description_: "Description:",
-        excerpt_from: "Excerpt from:"
+        excerpt_from: "Excerpt from:",
+        untitled: "Untitled segment"
     }
 }
 
@@ -31,11 +33,11 @@
     + '<div class="Ldt-Annotation-Widget {{^show_arrow}}Ldt-Annotation-ShowTop{{/show_arrow}}">'
     + '<div class="Ldt-Annotation-Inner Ldt-Annotation-Empty{{#start_minimized}} Ldt-Annotation-Minimized{{/start_minimized}}">'
     + '<div class="Ldt-Annotation-HiddenWhenEmpty Ldt-Annotation-MaxMinButton"></div>'
-    + '<div class="Ldt-Annotation-Social Ldt-Annotation-HiddenWhenMinimized Ldt-Annotation-HiddenWhenEmpty"></div>'
-    + '<h3 class="Ldt-Annotation-HiddenWhenEmpty"><span class="Ldt-Annotation-Title"></span> <span class="Ldt-Annotation-Time">'
-    + '( <span class="Ldt-Annotation-Begin"></span> - <span class="Ldt-Annotation-End"></span> )</span></h3>'
-    + '<h3 class="Ldt-Annotation-MashupOrigin Ldt-Annotation-HiddenWhenEmpty">{{l10n.excerpt_from}} <span class="Ldt-Annotation-MashupMedia"></span> <span class="Ldt-Annotation-Time">'
-    + '( <span class="Ldt-Annotation-MashupBegin"></span> - <span class="Ldt-Annotation-MashupEnd"></span> )</span></h3>'
+    + '{{#show_social}}<div class="Ldt-Annotation-Social Ldt-Annotation-HiddenWhenMinimized Ldt-Annotation-HiddenWhenEmpty"></div>{{/show_social}}'
+    + '<h3 class="Ldt-Annotation-HiddenWhenEmpty">{{#show_annotation_type}}<span class="Ldt-Annotation-Type"></span> » {{/show_annotation_type}}<span class="Ldt-Annotation-Title"></span> <span class="Ldt-Annotation-Time Ldt-Annotation-HiddenWhenMinimized">'
+    + '(<span class="Ldt-Annotation-Begin"></span> - <span class="Ldt-Annotation-End"></span>)</span></h3>'
+    + '<h3 class="Ldt-Annotation-MashupOrigin Ldt-Annotation-HiddenWhenEmpty">{{l10n.excerpt_from}} <span class="Ldt-Annotation-MashupMedia"></span> <span class="Ldt-Annotation-Time Ldt-Annotation-HiddenWhenMinimized">'
+    + '(<span class="Ldt-Annotation-MashupBegin"></span> - <span class="Ldt-Annotation-MashupEnd"></span>)</span></h3>'
     + '<div class="Ldt-Annotation-Cleared Ldt-Annotation-HiddenWhenMinimized Ldt-Annotation-HiddenWhenEmpty Ldt-Annotation-Description-Block"><div class="Ldt-Annotation-Label">{{l10n.description_}}</div>'
     + '<p class="Ldt-Annotation-Labelled Ldt-Annotation-Description"></p></div>'
     + '<div class="Ldt-Annotation-Tags-Block Ldt-Annotation-HiddenWhenMinimized Ldt-Annotation-HiddenWhenEmpty Ldt-Annotation-Cleared">'
@@ -47,12 +49,15 @@
     start_minimized: false,
     show_arrow : true,
     site_name : "Lignes de Temps",
-    search_on_tag_click: true
+    search_on_tag_click: true,
+    show_social: true,
+    show_annotation_type: false
 }
 
 IriSP.Widgets.Annotation.prototype.draw = function() {
     
-    var _this = this;
+    var _this = this,
+        currentAnnotation;
     
     function timeupdate(_time) {
         var _list = _this.getWidgetAnnotationsAtTime();
@@ -66,7 +71,29 @@
         }
     }
     
+    function highlightTitleAndDescription() {
+        if (!currentAnnotation) {
+            return;
+        }
+        var title = currentAnnotation.title,
+            description = currentAnnotation.description.replace(/(^\s+|\s+$)/g,'');
+        if (currentAnnotation.found) {
+            var rgxp = _this.source.getAnnotations().regexp || /^$/,
+                repl = '<span class="Ldt-Annotation-Highlight">$1</span>';
+            title = title.replace(rgxp,repl);
+            description = description.replace(rgxp,repl);
+        }
+        _this.$.find(".Ldt-Annotation-Title").html(title || "(" + _this.l10n.untitled + ")");
+        if (description) {
+            _this.$.find(".Ldt-Annotation-Description-Block").removeClass("Ldt-Annotation-EmptyBlock");
+            _this.$.find(".Ldt-Annotation-Description").html(description);
+        } else {
+            _this.$.find(".Ldt-Annotation-Description-Block").addClass("Ldt-Annotation-EmptyBlock");
+        }
+    }
+    
     function drawAnnotation(_annotation) {
+        currentAnnotation = _annotation;
         var _url = (typeof _annotation.url !== "undefined" 
                 ? _annotation.url
                 : (document.location.href.replace(/#.*$/,'') + '#id='  + _annotation.id)),
@@ -81,7 +108,7 @@
                     var _el = IriSP.jQuery('<li class="Ldt-Annotation-TagLabel"></li>').append(IriSP.jQuery('<span>').text(_trimmedTitle));
                     _el.click(function() {
                         if (_this.search_on_tag_click) {
-                            _this.player.trigger("search.triggeredSearch",_trimmedTitle);
+                            _this.source.getAnnotations().search(_trimmedTitle);
                         }
                         _tag.trigger("click");
                     });
@@ -91,21 +118,17 @@
         } else {
             _this.$.find(".Ldt-Annotation-Tags-Block").addClass("Ldt-Annotation-EmptyBlock");
         }
-        _this.$.find(".Ldt-Annotation-Title").html(_annotation.title);
-        var _desc = _annotation.description.replace(/(^\s+|\s+$)/g,'');
-        if (_desc) {
-            _this.$.find(".Ldt-Annotation-Description-Block").removeClass("Ldt-Annotation-EmptyBlock");
-            _this.$.find(".Ldt-Annotation-Description").html(_desc);
-        } else {
-            _this.$.find(".Ldt-Annotation-Description-Block").addClass("Ldt-Annotation-EmptyBlock");
+        highlightTitleAndDescription();
+        if (_this.show_annotation_type) {
+            _this.$.find(".Ldt-Annotation-Type").text(_annotation.getAnnotationType().title)
         }
-        _this.$.find(".Ldt-Annotation-Begin").html(_annotation.begin.toString());
-        _this.$.find(".Ldt-Annotation-End").html(_annotation.end.toString());
+        _this.$.find(".Ldt-Annotation-Begin").text(_annotation.begin.toString());
+        _this.$.find(".Ldt-Annotation-End").text(_annotation.end.toString());
         if (_annotation.elementType === "mashedAnnotation") {
             _this.$.find('.Ldt-Annotation-Inner').addClass("Ldt-Annotation-isMashup");
-            _this.$.find(".Ldt-Annotation-MashupMedia").html(_annotation.getMedia().title);
-            _this.$.find(".Ldt-Annotation-MashupBegin").html(_annotation.annotation.begin.toString());
-            _this.$.find(".Ldt-Annotation-MashupEnd").html(_annotation.annotation.end.toString());
+            _this.$.find(".Ldt-Annotation-MashupMedia").text(_annotation.getMedia().title);
+            _this.$.find(".Ldt-Annotation-MashupBegin").text(_annotation.annotation.begin.toString());
+            _this.$.find(".Ldt-Annotation-MashupEnd").text(_annotation.annotation.end.toString());
         } else {
             _this.$.find('.Ldt-Annotation-Inner').removeClass("Ldt-Annotation-isMashup");
         }
@@ -127,7 +150,11 @@
     }
     
     this.renderTemplate();
-    this.insertSubwidget(this.$.find(".Ldt-Annotation-Social"), { type: "Social" }, "socialWidget");
+    
+    if (this.show_social) {
+        this.insertSubwidget(this.$.find(".Ldt-Annotation-Social"), { type: "Social" }, "socialWidget");
+    }
+    
     this.insertSubwidget(this.$.find(".Ldt-Annotation-Arrow"), { type: "Arrow" }, "arrow");
     this.onMediaEvent("timeupdate",timeupdate);
     this.onMdpEvent("Annotation.hide","hide");
@@ -141,6 +168,9 @@
             drawAnnotation(_a)
         });
     });
+    this.source.getAnnotations().on("found", highlightTitleAndDescription);
+    this.source.getAnnotations().on("not-found", highlightTitleAndDescription);
+    this.source.getAnnotations().on("search-cleared", highlightTitleAndDescription);
 }
 
 IriSP.Widgets.Annotation.prototype.sendBounds = function() {