src/widgets/Polemic.js
author veltr
Fri, 27 Apr 2012 19:18:21 +0200
branchnew-model
changeset 881 f11b234497f7
parent 880 4c7b33bf2795
child 882 61c384dda19e
permissions -rw-r--r--
Finished Mediafragment

IriSP.Widgets.Polemic = function(player, config) {
    IriSP.Widgets.Widget.call(this, player, config);
};

IriSP.Widgets.Polemic.prototype = new IriSP.Widgets.Widget();

IriSP.Widgets.Polemic.prototype.defaults = {
    element_width : 5,
    element_height : 5,
    annotation_type : "tweet",
    defaultcolor : "#585858",
    foundcolor : "#fc00ff",
    polemics : [
        {
            "keywords" : [ "++" ],
            "description" : "positif",
            "color" : "#1D973D"
        },
        {
            "keywords" : [ "--" ],
            "description" : "negatif",
            "color" : "#CE0A15"
        },
        {
            "keywords" : [ "==" ],
            "description" : "reference",
            "color" : "#C5A62D"  
        },
        {
            "keywords" : [ "??" ],
            "description" : "question",
            "color" : "#036AAE"
        }
    ],
    requires : [
        {
            type: "Tooltip"
        }
    ]
};

IriSP.Widgets.Polemic.prototype.onSearch = function(searchString) {
    this.searchString = typeof searchString !== "undefined" ? searchString : '';
    var _found = 0,
        _re = IriSP.Model.regexpFromTextOrArray(searchString),
        _this = this;
    this.$tweets.each(function() {
        var _el = IriSP.jQuery(this);
        if (_this.searchString) {
            if (_re.test(_el.attr("tweet-title"))) {
                _el.css({
                    "background" : _this.foundcolor,
                    "opacity" : 1
                });
                _found++;
            } else {
                _el.css({
                    "background" : _el.attr("polemic-color"),
                    "opacity" : .5
                });
            }
        } else {
            _el.css({
                "background" : _el.attr("polemic-color"),
                "opacity" : 1
            });
        }
    });
    if (this.searchString) {
        if (_found) {
            this.player.popcorn.trigger("IriSP.search.matchFound");
        } else {
            this.player.popcorn.trigger("IriSP.search.noMatchFound");
        }
    }
}

IriSP.Widgets.Polemic.prototype.draw = function() {
    
    this.bindPopcorn("IriSP.search", "onSearch");
    this.bindPopcorn("IriSP.search.closed", "onSearch");
    this.bindPopcorn("IriSP.search.cleared", "onSearch");
    this.bindPopcorn("timeupdate", "onTimeupdate");
    this.$zone = IriSP.jQuery('<div>');
    this.$.append(this.$zone);
    
    var _slices = [],
        _slice_count = Math.floor( this.width / this.element_width ),
        _duration = this.source.getDuration(),
        _max = 0,
        _list = this.getWidgetAnnotations();
    
    for (var _i = 0; _i < _slice_count; _i++) {
        var _begin = new IriSP.Model.Time( _i * _duration / _slice_count ),
            _end = new IriSP.Model.Time( ( _i + 1 ) * _duration / _slice_count ),
            _count = 0,
            _res = {
                annotations : _list.filter(function(_annotation) {
                    return _annotation.begin >= _begin && _annotation.end < _end;
                }),
                polemicStacks : []
            }
            
        for (var _j = 0; _j < this.polemics.length; _j++) {
            var _polemic = _res.annotations.searchByDescription(this.polemics[_j].keywords);
            _count += _polemic.length;
            _res.polemicStacks.push(_polemic);
        }
        for (var _j = 0; _j < this.polemics.length; _j++) {
            _res.annotations.removeElements(_res.polemicStacks[_j]);
        }
        _count += _res.annotations.length;
        _max = Math.max(_max, _count);
        _slices.push(_res);
    }
    this.height = (_max ? (_max + 2) * this.element_height : 0);
    this.$zone.css({
        width: this.width + "px",
        height: this.height + "px",
        position: "relative"
    });
    
    this.$elapsed = IriSP.jQuery('<div>')
        .css({
            background: '#cccccc',
            position: "absolute",
            top: 0,
            left: 0,
            width: 0,
            height: "100%"
        });
        
    this.$zone.append(this.$elapsed);
    
    var _x = 0,
        _this = this,
        _html = '';
    
    function displayElement(_x, _y, _color, _id, _title) {
        _html += Mustache.to_html(
            '<div class="Ldt-Polemic-TweetDiv" annotation-id="{{id}}" tweet-title="{{title}}" pos-x="{{posx}}" pos-y="{{top}}" polemic-color="{{color}}"'
            + ' style="width: {{width}}px; height: {{height}}px; top: {{top}}px; left: {{left}}px; background: {{color}}"></div>',
        {
            id: _id,
            title: _title,
            posx: Math.floor(_x + (_this.element_width - 1) / 2),
            left: _x,
            top: _y,
            color: _color,
            width: (_this.element_width-1),
            height: _this.element_height
        });
    }
    
    IriSP._(_slices).forEach(function(_slice) {
        var _y = _this.height;
        _slice.annotations.forEach(function(_annotation) {
            _y -= _this.element_height;
            displayElement(_x, _y, _this.defaultcolor, _annotation.id, _annotation.title);
        });
        IriSP._(_slice.polemicStacks).forEach(function(_annotations, _j) {
            var _color = _this.polemics[_j].color;
            _annotations.forEach(function(_annotation) {
                _y -= _this.element_height;
                displayElement(_x, _y, _color, _annotation.id, _annotation.title);
            });
        });
        _x += _this.element_width;
    });
    
    this.$zone.append(_html);
    
    this.$tweets = this.$.find(".Ldt-Polemic-TweetDiv");
    
    this.$position = IriSP.jQuery('<div>').addClass("Ldt-Polemic-Position");
        
    this.$zone.append(this.$position);
    
    this.$tweets
        .mouseover(function() {
            var _el = IriSP.jQuery(this);
            _this.tooltip.show(_el.attr("pos-x"), _el.attr("pos-y"), _el.attr("tweet-title"), _el.attr("polemic-color"));
        })
        .mouseout(function() {
            _this.tooltip.hide();
        })
        .click(function() {
            var _id = IriSP.jQuery(this).attr("annotation-id");
            _this.player.popcorn.trigger("IriSP.Mediafragment.setHashToAnnotation", _id);
            _this.player.popcorn.trigger("IriSP.Tweet.show", _id);
        });
    
    this.$zone.click(function(_e) {
        var _x = _e.pageX - _this.$zone.offset().left;
        _this.player.popcorn.currentTime(_this.source.getDuration().getSeconds() * _x / _this.width);
    });
}

IriSP.Widgets.Polemic.prototype.onTimeupdate = function() {
    var _x = Math.floor( this.width * this.player.popcorn.currentTime() / this.source.getDuration().getSeconds());
    this.$elapsed.css({
        width:  _x + "px"
    });
    this.$position.css({
        left: _x + "px"
    })
}