front_idill/src/player/metadataplayer/Annotation.js
author bastiena
Thu, 24 May 2012 10:30:05 +0200
changeset 33 2d9b15f99b4e
parent 31 2c7fc855eba8
permissions -rw-r--r--
Front IDILL : search by curves added search by type added notifications added timeline improved
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
31
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
     1
// TODO: Open share links in a small window - Migrate Timeupdate functions to Extract
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
     2
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
     3
IriSP.Widgets.Annotation = function(player, config) {
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
     4
    IriSP.Widgets.Widget.call(this, player, config);
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
     5
    this.lastAnnotation = false;
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
     6
};
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
     7
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
     8
IriSP.Widgets.Annotation.prototype = new IriSP.Widgets.Widget();
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
     9
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    10
IriSP.Widgets.Annotation.prototype.messages = {
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    11
    "fr": {
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    12
        share_on: "Partager sur",
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    13
        watching: "Je regarde ",
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    14
        on_site: " sur ",
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    15
        tags: "Mots-clés :"
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    16
    },
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    17
    "en": {
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    18
        share_on: "Share on",
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    19
        watching: "I'm watching ",
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    20
        on_site: " on ",
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    21
        tags: "Keywords:"
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    22
    }
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    23
}
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    24
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    25
IriSP.Widgets.Annotation.prototype.template =
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    26
    '<div class="Ldt-Annotation-Widget {{#show_top_border}}Ldt-Annotation-ShowTop{{/show_top_border}}">'
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    27
    + '<div class="Ldt-Annotation-Inner Ldt-Annotation-Empty"><div class="Ldt-Annotation-ShareIcons Ldt-Annotation-HiddenWhenMinimized Ldt-Annotation-HiddenWhenEmpty">'
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    28
    + '<a href="#" target="_blank" class="Ldt-Annotation-Share Ldt-Annotation-Fb" title="{{l10n.share_on}} Facebook"></a>'
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    29
    + '<a href="#" target="_blank" class="Ldt-Annotation-Share Ldt-Annotation-Twitter" title="{{l10n.share_on}} Twitter"></a>'
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    30
    + '<a href="#" target="_blank" class="Ldt-Annotation-Share Ldt-Annotation-Gplus" title="{{l10n.share_on}} Google+"></a>'
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    31
    + '</div><h3 class="Ldt-Annotation-HiddenWhenEmpty"><span class="Ldt-Annotation-Title"></span> <span class="Ldt-Annotation-Time">'
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    32
    + '( <span class="Ldt-Annotation-Begin"></span> - <span class="Ldt-Annotation-End"></span> )</span></h3>'
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    33
    + '<p class="Ldt-Annotation-Description Ldt-Annotation-HiddenWhenMinimized Ldt-Annotation-HiddenWhenEmpty"></p>'
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    34
    + '<div class="Ldt-Annotation-Tags-Block Ldt-Annotation-HiddenWhenMinimized Ldt-Annotation-HiddenWhenEmpty Ldt-Annotation-NoTags">{{l10n.tags}}<ul class="Ldt-Annotation-Tags"></ul></div></div></div>';
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    35
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    36
IriSP.Widgets.Annotation.prototype.defaults = {
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    37
    annotation_type : "chap",
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    38
    show_top_border : false,
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    39
    site_name : "Lignes de Temps"
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    40
}
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    41
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    42
IriSP.Widgets.Annotation.prototype.draw = function() {
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    43
    this.renderTemplate();
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    44
    this.bindPopcorn("timeupdate","onTimeupdate");
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    45
    this.bindPopcorn("IriSP.Annotation.hide","hide");
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    46
    this.bindPopcorn("IriSP.Annotation.show","show");
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    47
    this.bindPopcorn("IriSP.Annotation.minimize","minimize");
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    48
    this.bindPopcorn("IriSP.Annotation.maximize","maximize");
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    49
    this.onTimeupdate();
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    50
}
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    51
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    52
IriSP.Widgets.Annotation.prototype.onTimeupdate = function() {
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    53
    var _time = Math.floor(this.player.popcorn.currentTime() * 1000),
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    54
        _list = this.getWidgetAnnotations().filter(function(_annotation) {
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    55
            return _annotation.begin <= _time && _annotation.end > _time;
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    56
        });
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    57
    if (_list.length) {
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    58
        if (_list[0].id !== this.lastAnnotation) {
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    59
            this.drawAnnotation(_list[0]);
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    60
            this.player.popcorn.trigger("IriSP.Annotation.boundsChanged",[ _list[0].begin.valueOf(), _list[0].end.valueOf() ]);
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    61
        }
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    62
        this.player.popcorn.trigger("IriSP.Arrow.updatePosition",{widget: this.type, time: ( _list[0].begin + _list[0].end ) / 2});
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    63
    }
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    64
    else {
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    65
        this.lastAnnotation = false;
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    66
        this.$.find(".Ldt-Annotation-Inner").addClass("Ldt-Annotation-Empty");
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    67
        this.player.popcorn.trigger("IriSP.Arrow.updatePosition",{widget: this.type, time: _time});
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    68
        this.player.popcorn.trigger("IriSP.Annotation.boundsChanged",[ _time, _time ]);
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    69
    }
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    70
}
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    71
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    72
IriSP.Widgets.Annotation.prototype.drawAnnotation = function(_annotation) {
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    73
    this.lastAnnotation = _annotation.id;
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    74
    var _url = (typeof _annotation.url !== "undefined" 
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    75
            ? _annotation.url
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    76
            : (document.location.href.replace(/#.*$/,'') + '#id='  + _annotation.namespacedId.name));
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    77
    var _text = this.l10n.watching + _annotation.title + (this.site_name ? this.l10n.on_site + this.site_name : '');
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    78
    var _tags = _annotation.getTagTexts();
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    79
    if (_tags.length) {
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    80
        var _html = IriSP._(_tags).map(function(_tag) {
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    81
            return '<li class="Ldt-Annotation-TagLabel">' + _tag + '</li>';
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    82
        }).join("");
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    83
        this.$.find(".Ldt-Annotation-Tags").html(_html);
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    84
        this.$.find(".Ldt-Annotation-Tags-Block").removeClass("Ldt-Annotation-NoTags");
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    85
    } else {
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    86
        this.$.find(".Ldt-Annotation-Tags-Block").addClass("Ldt-Annotation-NoTags");
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    87
    }
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    88
    this.$.find(".Ldt-Annotation-Title").html(_annotation.title);
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    89
    this.$.find(".Ldt-Annotation-Description").html(_annotation.description);
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    90
    this.$.find(".Ldt-Annotation-Begin").html(_annotation.begin.toString());
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    91
    this.$.find(".Ldt-Annotation-End").html(_annotation.end.toString());
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    92
    this.$.find(".Ldt-Annotation-Fb").attr("href", "http://www.facebook.com/share.php?" + IriSP.jQuery.param({ u: _url, t: _text }));
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    93
    this.$.find(".Ldt-Annotation-Twitter").attr("href", "https://twitter.com/intent/tweet?" + IriSP.jQuery.param({ url: _url, text: _text }));
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    94
    this.$.find(".Ldt-Annotation-Gplus").attr("href", "https://plusone.google.com/_/+1/confirm?" + IriSP.jQuery.param({ url: _url, title: _text }));
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    95
    this.$.find(".Ldt-Annotation-Inner").removeClass("Ldt-Annotation-Empty");
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    96
}
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    97
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    98
IriSP.Widgets.Annotation.prototype.hide = function() {
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
    99
    this.$.slideUp();
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
   100
}
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
   101
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
   102
IriSP.Widgets.Annotation.prototype.show = function() {
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
   103
    this.$.slideDown();
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
   104
}
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
   105
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
   106
IriSP.Widgets.Annotation.prototype.minimize = function() {
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
   107
    this.$.find('.Ldt-Annotation-Inner').addClass("Ldt-Annotation-Minimized");
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
   108
}
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
   109
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
   110
IriSP.Widgets.Annotation.prototype.maximize = function() {
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
   111
    this.$.find('.Ldt-Annotation-Inner').removeClass("Ldt-Annotation-Minimized");
2c7fc855eba8 FRONT IDILL :
bastiena
parents:
diff changeset
   112
}