1 // TODO: Open share links in a small window - Migrate Timeupdate functions to Extract

     2 

     3 IriSP.Widgets.Annotation = function(player, config) {

     4     IriSP.Widgets.Widget.call(this, player, config);

     5     this.lastAnnotation = false;

     6 };

     7 

     8 IriSP.Widgets.Annotation.prototype = new IriSP.Widgets.Widget();

     9 

    10 IriSP.Widgets.Annotation.prototype.messages = {

    11     "fr": {

    12         share_on: "Partager sur",

    13         watching: "Je regarde ",

    14         on_site: " sur ",

    15         tags: "Mots-clés :",

    16         excerpt_from: "Extrait de :"

    17     },

    18     "en": {

    19         share_on: "Share on",

    20         watching: "I'm watching ",

    21         on_site: " on ",

    22         tags: "Keywords:",

    23         excerpt_from: "Excerpt from:"

    24     }

    25 }

    26 

    27 IriSP.Widgets.Annotation.prototype.template =

    28     '<div class="Ldt-Annotation-Widget {{#show_top_border}}Ldt-Annotation-ShowTop{{/show_top_border}}">'

    29     + '<div class="Ldt-Annotation-Inner Ldt-Annotation-Empty"><div class="Ldt-Annotation-ShareIcons Ldt-Annotation-HiddenWhenMinimized Ldt-Annotation-HiddenWhenEmpty">'

    30     + '<a href="#" target="_blank" class="Ldt-Annotation-Share Ldt-Annotation-Fb Ldt-TraceMe" title="{{l10n.share_on}} Facebook"></a>'

    31     + '<a href="#" target="_blank" class="Ldt-Annotation-Share Ldt-Annotation-Twitter Ldt-TraceMe" title="{{l10n.share_on}} Twitter"></a>'

    32     + '<a href="#" target="_blank" class="Ldt-Annotation-Share Ldt-Annotation-Gplus Ldt-TraceMe" title="{{l10n.share_on}} Google+"></a>'

    33     + '</div><h3 class="Ldt-Annotation-HiddenWhenEmpty"><span class="Ldt-Annotation-Title"></span> <span class="Ldt-Annotation-Time">'

    34     + '( <span class="Ldt-Annotation-Begin"></span> - <span class="Ldt-Annotation-End"></span> )</span></h3>'

    35     + '<h3 class="Ldt-Annotation-MashupOrigin Ldt-Annotation-HiddenWhenEmpty">{{l10n.excerpt_from}} <span class="Ldt-Annotation-MashupMedia"></span> <span class="Ldt-Annotation-Time">'

    36     + '( <span class="Ldt-Annotation-MashupBegin"></span> - <span class="Ldt-Annotation-MashupEnd"></span> )</span></h3>'

    37     + '<p class="Ldt-Annotation-Description Ldt-Annotation-HiddenWhenMinimized Ldt-Annotation-HiddenWhenEmpty"></p>'

    38     + '<div class="Ldt-Annotation-Tags-Block Ldt-Annotation-HiddenWhenMinimized Ldt-Annotation-HiddenWhenEmpty Ldt-Annotation-NoTags"><div class="Ldt-Annotation-TagTitle">{{l10n.tags}}</div><ul class="Ldt-Annotation-Tags"></ul></div></div></div>';

    39 

    40 IriSP.Widgets.Annotation.prototype.defaults = {

    41     annotation_type : "chap",

    42     show_top_border : false,

    43     site_name : "Lignes de Temps"

    44 }

    45 

    46 IriSP.Widgets.Annotation.prototype.draw = function() {

    47     this.renderTemplate();

    48     this.bindPopcorn("timeupdate","onTimeupdate");

    49     this.bindPopcorn("IriSP.Annotation.hide","hide");

    50     this.bindPopcorn("IriSP.Annotation.show","show");

    51     this.bindPopcorn("IriSP.Annotation.minimize","minimize");

    52     this.bindPopcorn("IriSP.Annotation.maximize","maximize");

    53     this.onTimeupdate();

    54 }

    55 

    56 IriSP.Widgets.Annotation.prototype.onTimeupdate = function() {

    57     var _time = Math.floor(this.player.popcorn.currentTime() * 1000),

    58         _list = this.getWidgetAnnotations().filter(function(_annotation) {

    59             return _annotation.begin <= _time && _annotation.end > _time;

    60         });

    61     if (_list.length) {

    62         if (_list[0].id !== this.lastAnnotation) {

    63             this.drawAnnotation(_list[0]);

    64             this.player.popcorn.trigger("IriSP.Annotation.boundsChanged",[ _list[0].begin.valueOf(), _list[0].end.valueOf() ]);

    65         }

    66         this.player.popcorn.trigger("IriSP.Arrow.updatePosition",{widget: this.type, time: ( _list[0].begin + _list[0].end ) / 2});

    67     }

    68     else {

    69         this.lastAnnotation = false;

    70         this.$.find(".Ldt-Annotation-Inner").addClass("Ldt-Annotation-Empty");

    71         this.player.popcorn.trigger("IriSP.Arrow.updatePosition",{widget: this.type, time: _time});

    72         this.player.popcorn.trigger("IriSP.Annotation.boundsChanged",[ _time, _time ]);

    73     }

    74 }

    75 

    76 IriSP.Widgets.Annotation.prototype.drawAnnotation = function(_annotation) {

    77     this.lastAnnotation = _annotation.id;

    78     var _url = (typeof _annotation.url !== "undefined" 

    79             ? _annotation.url

    80             : (document.location.href.replace(/#.*$/,'') + '#id='  + _annotation.namespacedId.name));

    81     var _text = this.l10n.watching + _annotation.title + (this.site_name ? this.l10n.on_site + this.site_name : '');

    82     var _tags = _annotation.getTagTexts();

    83     if (_tags.length) {

    84         var _html = IriSP._(_tags).map(function(_tag) {

    85             return '<li class="Ldt-Annotation-TagLabel"><span>' + _tag + '</span></li>';

    86         }).join("");

    87         this.$.find(".Ldt-Annotation-Tags").html(_html);

    88         this.$.find(".Ldt-Annotation-Tags-Block").removeClass("Ldt-Annotation-NoTags");

    89         

    90         /* Correct the empty tag bug */

    91         this.$.find('.Ldt-Annotation-TagLabel').each(function() {

    92             var _el = IriSP.jQuery(this);

    93             if (!_el.text().replace(/(^\s+|\s+$)/g,'')) {

    94                 _el.detach();

    95             }

    96         });

    97     

    98         this.$.find('.Ldt-Annotation-TagLabel').click(function() {

    99             _this.player.popcorn.trigger("IriSP.search.triggeredSearch", IriSP.jQuery(this).text().replace(/(^\s+|\s+$)/g,''));

   100         });

   101     } else {

   102         this.$.find(".Ldt-Annotation-Tags-Block").addClass("Ldt-Annotation-NoTags");

   103     }

   104     this.$.find(".Ldt-Annotation-Title").html(_annotation.title);

   105     this.$.find(".Ldt-Annotation-Description").html(_annotation.description);

   106     this.$.find(".Ldt-Annotation-Begin").html(_annotation.begin.toString());

   107     this.$.find(".Ldt-Annotation-End").html(_annotation.end.toString());

   108     if (_annotation.elementType === "mashedAnnotation") {

   109         this.$.find('.Ldt-Annotation-Inner').addClass("Ldt-Annotation-isMashup");

   110         this.$.find(".Ldt-Annotation-MashupMedia").html(_annotation.getMedia().title);

   111         this.$.find(".Ldt-Annotation-MashupBegin").html(_annotation.annotation.begin.toString());

   112         this.$.find(".Ldt-Annotation-MashupEnd").html(_annotation.annotation.end.toString());

   113     } else {

   114         this.$.find('.Ldt-Annotation-Inner').removeClass("Ldt-Annotation-isMashup");

   115     }

   116     this.$.find(".Ldt-Annotation-Fb").attr("href", "http://www.facebook.com/share.php?" + IriSP.jQuery.param({ u: _url, t: _text }));

   117     this.$.find(".Ldt-Annotation-Twitter").attr("href", "https://twitter.com/intent/tweet?" + IriSP.jQuery.param({ url: _url, text: _text }));

   118     this.$.find(".Ldt-Annotation-Gplus").attr("href", "https://plusone.google.com/_/+1/confirm?" + IriSP.jQuery.param({ url: _url, title: _text }));

   119     this.$.find(".Ldt-Annotation-Inner").removeClass("Ldt-Annotation-Empty");

   120 }

   121 

   122 IriSP.Widgets.Annotation.prototype.hide = function() {

   123     this.$.slideUp();

   124 }

   125 

   126 IriSP.Widgets.Annotation.prototype.show = function() {

   127     this.$.slideDown();

   128 }

   129 

   130 IriSP.Widgets.Annotation.prototype.minimize = function() {

   131     this.$.find('.Ldt-Annotation-Inner').addClass("Ldt-Annotation-Minimized");

   132 }

   133 

   134 IriSP.Widgets.Annotation.prototype.maximize = function() {

   135     this.$.find('.Ldt-Annotation-Inner').removeClass("Ldt-Annotation-Minimized");

   136 }