Mercurial Mercurial > metadataplayer / comparison
summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help
Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
src/widgets/Annotation.js
branchnew-model
changeset 923 b3ee7d1b472a
parent 922 096c06aea8b5
child 924 64c2eaafe5e2
equal deleted inserted replaced
922:096c06aea8b5 923:b3ee7d1b472a 
     1 // TODO: Open share links in a small window - Migrate Timeupdate functions to Extract
 
     1 // TODO: Open share links in a small window - Migrate Timeupdate functions to Extract
 
     2 
     2 
     3 IriSP.Widgets.Annotation = function(player, config) {
 
     3 IriSP.Widgets.Annotation = function(player, config) {
 
     4     IriSP.Widgets.Widget.call(this, player, config);
 
     4     IriSP.Widgets.Widget.call(this, player, config);
 
     5     this.lastAnnotation = false;
 
     5     this.lastAnnotation = false;
 
       
     6     this.minimized = this.start_minimized || false;
 
       
     7     this.bounds = [ 0, 0 ];
 
     6 };
 
     8 };
 
     7 
     9 
     8 IriSP.Widgets.Annotation.prototype = new IriSP.Widgets.Widget();
 
    10 IriSP.Widgets.Annotation.prototype = new IriSP.Widgets.Widget();
 
     9 
    11 
    10 IriSP.Widgets.Annotation.prototype.messages = {
 
    12 IriSP.Widgets.Annotation.prototype.messages = {
 
    11     "fr": {
 
    13     fr: {
 
       
    14         share_: "Partager :",
 
    12         share_on: "Partager sur",
 
    15         share_on: "Partager sur",
 
    13         watching: "Je regarde ",
 
    16         watching: "Je regarde ",
 
    14         on_site: " sur ",
 
    17         on_site: " sur ",
 
    15         tags: "Mots-clés :",
 
    18         tags_: "Mots-clés :",
 
       
    19         description_: "Description :",
 
    16         excerpt_from: "Extrait de :"
 
    20         excerpt_from: "Extrait de :"
 
    17     },
 
    21     },
 
    18     "en": {
 
    22     en: {
 
       
    23         share_: "Share:",
 
    19         share_on: "Share on",
 
    24         share_on: "Share on",
 
    20         watching: "I'm watching ",
 
    25         watching: "I'm watching ",
 
    21         on_site: " on ",
 
    26         on_site: " on ",
 
    22         tags: "Keywords:",
 
    27         tags_: "Keywords:",
 
       
    28         description_: "Description:",
 
    23         excerpt_from: "Excerpt from:"
 
    29         excerpt_from: "Excerpt from:"
 
    24     }
 
    30     }
 
    25 }
 
    31 }
 
    26 
    32 
    27 IriSP.Widgets.Annotation.prototype.template =
 
    33 IriSP.Widgets.Annotation.prototype.template =
 
    28     '<div class="Ldt-Annotation-Widget {{#show_top_border}}Ldt-Annotation-ShowTop{{/show_top_border}}">'
 
    34     '<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">'
 
    35     + '<div class="Ldt-Annotation-Inner Ldt-Annotation-Empty{{#start_minimized}} Ldt-Annotation-Minimized{{/start_minimized}}">'
 
       
    36     + '<div class="Ldt-Annotation-HiddenWhenEmpty Ldt-Annotation-MaxMinButton"></div>'
 
       
    37     + '<h3 class="Ldt-Annotation-HiddenWhenEmpty"><span class="Ldt-Annotation-Title"></span> <span class="Ldt-Annotation-Time">'
 
       
    38     + '( <span class="Ldt-Annotation-Begin"></span> - <span class="Ldt-Annotation-End"></span> )</span></h3>'
 
       
    39     + '<h3 class="Ldt-Annotation-MashupOrigin Ldt-Annotation-HiddenWhenEmpty">{{l10n.excerpt_from}} <span class="Ldt-Annotation-MashupMedia"></span> <span class="Ldt-Annotation-Time">'
 
       
    40     + '( <span class="Ldt-Annotation-MashupBegin"></span> - <span class="Ldt-Annotation-MashupEnd"></span> )</span></h3>'
 
       
    41     + '<div class="Ldt-Annotation-Cleared Ldt-Annotation-HiddenWhenMinimized Ldt-Annotation-HiddenWhenEmpty Ldt-Annotation-Description-Block"><div class="Ldt-Annotation-Label">{{l10n.description_}}</div>'
 
       
    42     + '<p class="Ldt-Annotation-Labelled Ldt-Annotation-Description"></p></div>'
 
       
    43     + '<div class="Ldt-Annotation-Tags-Block Ldt-Annotation-HiddenWhenMinimized Ldt-Annotation-HiddenWhenEmpty Ldt-Annotation-Cleared">'
 
       
    44     + '<div class="Ldt-Annotation-Label">{{l10n.tags_}}</div><ul class="Ldt-Annotation-Labelled Ldt-Annotation-Tags"></ul>'
 
       
    45     + '</div><div class="Ldt-Annotation-Cleared Ldt-Annotation-HiddenWhenMinimized Ldt-Annotation-HiddenWhenEmpty"><div class="Ldt-Annotation-Label">{{l10n.share_}}</div><p class="Ldt-Annotation-Labelled">'
 
    30     + '<a href="#" target="_blank" class="Ldt-Annotation-Share Ldt-Annotation-Fb Ldt-TraceMe" title="{{l10n.share_on}} Facebook"></a>'
 
    46     + '<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>'
 
    47     + '<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>'
 
    48     + '<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">'
 
    49     + '</p></div></div></div></div>';
 
    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 
    50 
    40 IriSP.Widgets.Annotation.prototype.defaults = {
 
    51 IriSP.Widgets.Annotation.prototype.defaults = {
 
    41     annotation_type : "chap",
 
    52     annotation_type : "chap",
 
       
    53     start_minimized: false,
 
    42     show_top_border : false,
 
    54     show_top_border : false,
 
    43     site_name : "Lignes de Temps"
 
    55     site_name : "Lignes de Temps"
 
    44 }
 
    56 }
 
    45 
    57 
    46 IriSP.Widgets.Annotation.prototype.draw = function() {
 
    58 IriSP.Widgets.Annotation.prototype.draw = function() {
 
    48     this.bindPopcorn("timeupdate","onTimeupdate");
 
    60     this.bindPopcorn("timeupdate","onTimeupdate");
 
    49     this.bindPopcorn("IriSP.Annotation.hide","hide");
 
    61     this.bindPopcorn("IriSP.Annotation.hide","hide");
 
    50     this.bindPopcorn("IriSP.Annotation.show","show");
 
    62     this.bindPopcorn("IriSP.Annotation.show","show");
 
    51     this.bindPopcorn("IriSP.Annotation.minimize","minimize");
 
    63     this.bindPopcorn("IriSP.Annotation.minimize","minimize");
 
    52     this.bindPopcorn("IriSP.Annotation.maximize","maximize");
 
    64     this.bindPopcorn("IriSP.Annotation.maximize","maximize");
 
       
    65     this.bindPopcorn("IriSP.Annotation.getBounds","sendBounds");
 
       
    66     this.$.find(".Ldt-Annotation-MaxMinButton").click(this.functionWrapper("toggleSize"));
 
    53     this.onTimeupdate();
 
    67     this.onTimeupdate();
 
    54 }
 
    68 }
 
    55 
    69 
    56 IriSP.Widgets.Annotation.prototype.onTimeupdate = function() {
 
    70 IriSP.Widgets.Annotation.prototype.onTimeupdate = function() {
 
    57     var _time = Math.floor(this.player.popcorn.currentTime() * 1000),
 
    71     var _time = Math.floor(this.player.popcorn.currentTime() * 1000),
 
    58         _list = this.getWidgetAnnotationsAtTime();
 
    72         _list = this.getWidgetAnnotationsAtTime();
 
    59     if (_list.length) {
 
    73     if (_list.length) {
 
    60         if (_list[0].id !== this.lastAnnotation) {
 
    74         if (_list[0].id !== this.lastAnnotation) {
 
    61             this.drawAnnotation(_list[0]);
 
    75             this.drawAnnotation(_list[0]);
 
    62             this.player.popcorn.trigger("IriSP.Annotation.boundsChanged",[ _list[0].begin.valueOf(), _list[0].end.valueOf() ]);
 
    76             this.bounds = [ _list[0].begin.valueOf(), _list[0].end.valueOf() ];
 
    63         }
 
    77         }
 
    64         this.player.popcorn.trigger("IriSP.Arrow.updatePosition",{widget: this.type, time: ( _list[0].begin + _list[0].end ) / 2});
 
    78         this.player.popcorn.trigger("IriSP.Arrow.updatePosition",{widget: this.type, time: ( _list[0].begin + _list[0].end ) / 2});
 
    65     }
 
    79     }
 
    66     else {
 
    80     else {
 
    67         this.lastAnnotation = false;
 
    81         this.lastAnnotation = false;
 
    68         this.$.find(".Ldt-Annotation-Inner").addClass("Ldt-Annotation-Empty");
 
    82         this.$.find(".Ldt-Annotation-Inner").addClass("Ldt-Annotation-Empty");
 
    69         this.player.popcorn.trigger("IriSP.Arrow.updatePosition",{widget: this.type, time: _time});
 
    83         this.player.popcorn.trigger("IriSP.Arrow.updatePosition",{widget: this.type, time: _time});
 
    70         this.player.popcorn.trigger("IriSP.Annotation.boundsChanged",[ _time, _time ]);
 
    84         this.bounds = [ _time, _time ];
 
    71     }
 
    85     }
 
       
    86     this.sendBounds();
 
       
    87 }
 
       
    88 
       
    89 IriSP.Widgets.Annotation.prototype.sendBounds = function() {
 
       
    90     this.player.popcorn.trigger("IriSP.Annotation.boundsChanged",this.bounds);
 
    72 }
 
    91 }
 
    73 
    92 
    74 IriSP.Widgets.Annotation.prototype.drawAnnotation = function(_annotation) {
 
    93 IriSP.Widgets.Annotation.prototype.drawAnnotation = function(_annotation) {
 
    75     this.lastAnnotation = _annotation.id;
 
    94     this.lastAnnotation = _annotation.id;
 
    76     var _url = (typeof _annotation.url !== "undefined" 
    95     var _url = (typeof _annotation.url !== "undefined" 
    95     
   114     
    96         this.$.find('.Ldt-Annotation-TagLabel').click(function() {
 
   115         this.$.find('.Ldt-Annotation-TagLabel').click(function() {
 
    97             _this.player.popcorn.trigger("IriSP.search.triggeredSearch", IriSP.jQuery(this).text().replace(/(^\s+|\s+$)/g,''));
 
   116             _this.player.popcorn.trigger("IriSP.search.triggeredSearch", IriSP.jQuery(this).text().replace(/(^\s+|\s+$)/g,''));
 
    98         });
 
   117         });
 
    99     } else {
 
   118     } else {
 
   100         this.$.find(".Ldt-Annotation-Tags-Block").addClass("Ldt-Annotation-NoTags");
 
   119         this.$.find(".Ldt-Annotation-Tags-Block").hide();
 
   101     }
 
   120     }
 
   102     this.$.find(".Ldt-Annotation-Title").html(_annotation.title);
 
   121     this.$.find(".Ldt-Annotation-Title").html(_annotation.title);
 
   103     this.$.find(".Ldt-Annotation-Description").html(_annotation.description);
 
   122     var _desc = _annotation.description.replace(/(^\s+|\s+$)/g,'');
 
       
   123     if (_desc) {
 
       
   124         this.$.find(".Ldt-Annotation-Description-Block").show();
 
       
   125         this.$.find(".Ldt-Annotation-Description").html(_desc);
 
       
   126     } else {
 
       
   127         this.$.find(".Ldt-Annotation-Description-Block").hide();
 
       
   128     }
 
   104     this.$.find(".Ldt-Annotation-Begin").html(_annotation.begin.toString());
 
   129     this.$.find(".Ldt-Annotation-Begin").html(_annotation.begin.toString());
 
   105     this.$.find(".Ldt-Annotation-End").html(_annotation.end.toString());
 
   130     this.$.find(".Ldt-Annotation-End").html(_annotation.end.toString());
 
   106     if (_annotation.elementType === "mashedAnnotation") {
 
   131     if (_annotation.elementType === "mashedAnnotation") {
 
   107         this.$.find('.Ldt-Annotation-Inner').addClass("Ldt-Annotation-isMashup");
 
   132         this.$.find('.Ldt-Annotation-Inner').addClass("Ldt-Annotation-isMashup");
 
   108         this.$.find(".Ldt-Annotation-MashupMedia").html(_annotation.getMedia().title);
 
   133         this.$.find(".Ldt-Annotation-MashupMedia").html(_annotation.getMedia().title);
 
   123 
   148 
   124 IriSP.Widgets.Annotation.prototype.show = function() {
 
   149 IriSP.Widgets.Annotation.prototype.show = function() {
 
   125     this.$.slideDown();
 
   150     this.$.slideDown();
 
   126 }
 
   151 }
 
   127 
   152 
       
   153 IriSP.Widgets.Annotation.prototype.toggleSize = function() {
 
       
   154     if (this.minimized) {
 
       
   155         this.maximize();
 
       
   156     } else {
 
       
   157         this.minimize();
 
       
   158     }
 
       
   159 }
 
       
   160 
   128 IriSP.Widgets.Annotation.prototype.minimize = function() {
 
   161 IriSP.Widgets.Annotation.prototype.minimize = function() {
 
       
   162     this.minimized = true;
 
   129     this.$.find('.Ldt-Annotation-Inner').addClass("Ldt-Annotation-Minimized");
 
   163     this.$.find('.Ldt-Annotation-Inner').addClass("Ldt-Annotation-Minimized");
 
   130 }
 
   164 }
 
   131 
   165 
   132 IriSP.Widgets.Annotation.prototype.maximize = function() {
 
   166 IriSP.Widgets.Annotation.prototype.maximize = function() {
 
       
   167     this.minimized = false;
 
   133     this.$.find('.Ldt-Annotation-Inner').removeClass("Ldt-Annotation-Minimized");
 
   168     this.$.find('.Ldt-Annotation-Inner').removeClass("Ldt-Annotation-Minimized");
 
   134 }
 
   169 }
metadataplayer