1 // TODO: 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     this.minimized = this.start_minimized || false;

     7     this.bounds = [ 0, 0 ];

     8 };

     9 

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

    11 

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

    13     fr: {

    14         watching: "Je regarde ",

    15         on_site: " sur ",

    16         tags_: "Mots-clés\u00a0:",

    17         description_: "Description\u00a0:",

    18         creator_: "Créé par\u00a0:",

    19         excerpt_from: "Extrait de\u00a0:",

    20         untitled: "Segment sans titre"

    21     },

    22     en: {

    23         watching: "I'm watching ",

    24         on_site: " on ",

    25         tags_: "Keywords:",

    26         description_: "Description:",

    27         creator_: "Created by\u00a0:",

    28         excerpt_from: "Excerpt from:",

    29         untitled: "Untitled segment"

    30     }

    31 };

    32 

    33 IriSP.Widgets.Annotation.prototype.template =

    34     '{{#show_arrow}}<div class="Ldt-Annotation-Arrow"></div>{{/show_arrow}}'

    35     + '<div class="Ldt-Annotation-Widget {{^show_arrow}}Ldt-Annotation-ShowTop{{/show_arrow}}">'

    36     + '<div class="Ldt-Annotation-Inner Ldt-Annotation-Empty{{#start_minimized}} Ldt-Annotation-Minimized{{/start_minimized}}">'

    37     + '<div class="Ldt-Annotation-HiddenWhenEmpty Ldt-Annotation-MaxMinButton"></div>'

    38     + '{{#show_social}}<div class="Ldt-Annotation-Social Ldt-Annotation-HiddenWhenMinimized Ldt-Annotation-HiddenWhenEmpty"></div>{{/show_social}}'

    39     + '<h3 class="Ldt-Annotation-HiddenWhenEmpty">{{#show_annotation_type}}<span class="Ldt-Annotation-Type"></span> » {{/show_annotation_type}}<a class="Ldt-Annotation-Title" href="#"></a> <span class="Ldt-Annotation-Time Ldt-Annotation-HiddenWhenMinimized">'

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

    41     + '<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">'

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

    43     + '<div class="Ldt-Annotation-Cleared Ldt-Annotation-HiddenWhenMinimized Ldt-Annotation-HiddenWhenEmpty Ldt-Annotation-Creator-Block"><div class="Ldt-Annotation-Label">{{l10n.creator_}}</div>'

    44     + '{{#show_creator}}<p class="Ldt-Annotation-Labelled Ldt-Annotation-Creator"></p></div>{{/show_creator}}'

    45     + '{{#show_description}}<div class="Ldt-Annotation-Cleared Ldt-Annotation-HiddenWhenMinimized Ldt-Annotation-HiddenWhenEmpty Ldt-Annotation-Description-Block"><div class="Ldt-Annotation-Label">{{l10n.description_}}</div>'

    46     + '<p class="Ldt-Annotation-Labelled Ldt-Annotation-Description"></p></div>{{/show_description}}'

    47     + '<div class="Ldt-Annotation-Tags-Block Ldt-Annotation-HiddenWhenMinimized Ldt-Annotation-HiddenWhenEmpty Ldt-Annotation-Cleared">'

    48     + '<div class="Ldt-Annotation-Label">{{l10n.tags_}}</div><ul class="Ldt-Annotation-Labelled Ldt-Annotation-Tags"></ul>'

    49     + '</div></div></div></div>';

    50 

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

    52     annotation_type : "chap",

    53     start_minimized: false,

    54     show_arrow : true,

    55     show_creator: true,

    56     show_description: true,

    57     arrow_position: .5,

    58     site_name : "Lignes de Temps",

    59     search_on_tag_click: true,

    60     show_social: true,

    61     show_annotation_type: false

    62 };

    63 

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

    65     

    66     var _this = this,

    67         currentAnnotation;

    68     

    69     function timeupdate(_time) {

    70         var _list = _this.getWidgetAnnotationsAtTime();

    71         if (!_list.length) {

    72             _this.$.find(".Ldt-Annotation-Inner").addClass("Ldt-Annotation-Empty");

    73             if (_this.arrow) {

    74                 _this.arrow.moveToTime(_time);

    75             }

    76             _this.bounds = [ _time, _time ];

    77             _this.sendBounds();

    78         }

    79     }

    80     

    81     function highlightTitleAndDescription() {

    82         if (!currentAnnotation) {

    83             return;

    84         }

    85         var title = currentAnnotation.title,

    86             description = currentAnnotation.description.replace(/(^\s+|\s+$)/g,''),

    87             rx = (currentAnnotation.found ? (_this.source.getAnnotations().regexp || false) : false);

    88         _this.$.find(".Ldt-Annotation-Title").html(IriSP.textFieldHtml(title,rx)  || "(" + _this.l10n.untitled + ")");

    89         if (description) {

    90             _this.$.find(".Ldt-Annotation-Description-Block").removeClass("Ldt-Annotation-EmptyBlock");

    91             _this.$.find(".Ldt-Annotation-Description").html(IriSP.textFieldHtml(description,rx));

    92         } else {

    93             _this.$.find(".Ldt-Annotation-Description-Block").addClass("Ldt-Annotation-EmptyBlock");

    94         }

    95     }

    96     

    97     function drawAnnotation(_annotation) {

    98         currentAnnotation = _annotation;

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

   100                 ? _annotation.url

   101                 : (document.location.href.replace(/#.*$/,'') + '#id='  + _annotation.id)),

   102             _text = _this.l10n.watching + _annotation.title + (_this.site_name ? _this.l10n.on_site + _this.site_name : ''),

   103             _tags = _annotation.getTags(),

   104             _tagblock = _this.$.find(".Ldt-Annotation-Tags");

   105         _tagblock.empty();

   106         if (_tags.length) {

   107             _this.$.find(".Ldt-Annotation-Tags-Block").removeClass("Ldt-Annotation-EmptyBlock");

   108             _tags.forEach(function(_tag) {

   109                 var _trimmedTitle =  _tag.title.replace(/(^\s+|\s+$)/g,'');

   110                 if (_trimmedTitle) {

   111                     var _el = IriSP.jQuery('<li class="Ldt-Annotation-TagLabel"></li>').append(IriSP.jQuery('<span>').text(_trimmedTitle));

   112                     _el.click(function() {

   113                         if (_this.search_on_tag_click) {

   114                             _this.source.getAnnotations().search(_trimmedTitle);

   115                         }

   116                         _tag.trigger("click");

   117                     });

   118                     _tagblock.append(_el);

   119                 }

   120             });

   121         } else {

   122             _this.$.find(".Ldt-Annotation-Tags-Block").addClass("Ldt-Annotation-EmptyBlock");

   123         }

   124         highlightTitleAndDescription();

   125         if (_this.show_creator) {

   126              _this.$.find(".Ldt-Annotation-Creator").text(_annotation.creator);

   127         }

   128         if (_this.show_annotation_type) {

   129             _this.$.find(".Ldt-Annotation-Type").text(_annotation.getAnnotationType().title);

   130             _this.$.find(".Ldt-Annotation-Type").attr("title", _annotation.getAnnotationType().description);

   131         }

   132         _this.$.find(".Ldt-Annotation-Begin").text(_annotation.begin.toString());

   133         _this.$.find(".Ldt-Annotation-End").text(_annotation.end.toString());

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

   135             _this.$.find('.Ldt-Annotation-Inner').addClass("Ldt-Annotation-isMashup");

   136             _this.$.find(".Ldt-Annotation-MashupMedia").text(_annotation.getMedia().title);

   137             _this.$.find(".Ldt-Annotation-MashupBegin").text(_annotation.annotation.begin.toString());

   138             _this.$.find(".Ldt-Annotation-MashupEnd").text(_annotation.annotation.end.toString());

   139         } else {

   140             _this.$.find('.Ldt-Annotation-Inner').removeClass("Ldt-Annotation-isMashup");

   141         }

   142         if (typeof _this.socialWidget !== "undefined") {

   143             _this.socialWidget.updateUrls(_url, _text);

   144         } else {

   145             setTimeout(function() {

   146                 if (typeof _this.socialWidget !== "undefined") {

   147                     _this.socialWidget.updateUrls(_url, _text);

   148                 }

   149             },800);

   150         }

   151         _this.$.find(".Ldt-Annotation-Inner").removeClass("Ldt-Annotation-Empty");

   152         _this.bounds = [ _annotation.begin, _annotation.end ];

   153         if (_this.arrow) {

   154             _this.arrow.moveToTime((1 - _this.arrow_position) * _annotation.begin + _this.arrow_position * _annotation.end);

   155         }

   156         _this.sendBounds();

   157     }

   158     

   159     this.renderTemplate();

   160     

   161     this.$.find(".Ldt-Annotation-Title").click(function() {

   162         if (currentAnnotation) {

   163             _this.media.setCurrentTime(currentAnnotation.begin);

   164         }

   165         return false;

   166     });

   167     

   168     if (this.show_social) {

   169         this.insertSubwidget(this.$.find(".Ldt-Annotation-Social"), { type: "Social" }, "socialWidget");

   170     }

   171     

   172     if (this.show_arrow) {

   173         this.insertSubwidget(this.$.find(".Ldt-Annotation-Arrow"), { type: "Arrow", width: this.width }, "arrow");

   174     }

   175     this.onMediaEvent("timeupdate",timeupdate);

   176     this.onMdpEvent("Annotation.hide","hide");

   177     this.onMdpEvent("Annotation.show","show");

   178     this.onMdpEvent("Annotation.minimize","minimize");

   179     this.onMdpEvent("Annotation.maximize","maximize");

   180     this.onMdpEvent("Annotation.getBounds","sendBounds");

   181     this.$.find(".Ldt-Annotation-MaxMinButton").click(this.functionWrapper("toggleSize"));

   182     this.$.on("resize", function () { _this.width = _this.$.parent().width();

   183                                       _this.$.css({ width: _this.width });

   184                                     });

   185     this.getWidgetAnnotations().forEach(function(_a) {

   186         _a.on("enter", function() {

   187             drawAnnotation(_a);

   188         });

   189     });

   190     this.source.getAnnotations().on("found", highlightTitleAndDescription);

   191     this.source.getAnnotations().on("not-found", highlightTitleAndDescription);

   192     this.source.getAnnotations().on("search-cleared", highlightTitleAndDescription);

   193     IriSP.attachDndData(this.$.find("h3"), function() {

   194     	return {

   195 	    	title: currentAnnotation.title,

   196 	    	description: currentAnnotation.description,

   197 	    	image: currentAnnotation.thumbnail,

   198 	    	uri: (typeof currentAnnotation.url !== "undefined" 

   199 	            ? currentAnnotation.url

   200 	            : (document.location.href.replace(/#.*$/,'') + '#id='  + currentAnnotation.id)),

   201             text: '[' + currentAnnotation.begin.toString() + '] ' + currentAnnotation.title

   202 	    };

   203     });

   204 };

   205 

   206 IriSP.Widgets.Annotation.prototype.sendBounds = function() {

   207     this.player.trigger("Annotation.boundsChanged",this.bounds);

   208 };

   209 

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

   211     this.lastAnnotation = _annotation.id;

   212 

   213 };

   214 

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

   216     this.$.slideUp();

   217 };

   218 

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

   220     this.$.slideDown();

   221 };

   222 

   223 IriSP.Widgets.Annotation.prototype.toggleSize = function() {

   224     if (this.minimized) {

   225         this.maximize();

   226     } else {

   227         this.minimize();

   228     }

   229 };

   230 

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

   232     this.minimized = true;

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

   234 };

   235 

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

   237     this.minimized = false;

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

   239 };