diff -r 573c7ca752e0 -r a8af9da7c622 test/integration/allocine_dossier_independant/js/LdtPlayer-release.js --- a/test/integration/allocine_dossier_independant/js/LdtPlayer-release.js Mon Mar 19 18:46:17 2012 +0100 +++ b/test/integration/allocine_dossier_independant/js/LdtPlayer-release.js Tue Mar 20 21:17:48 2012 +0100 @@ -1040,13 +1040,10 @@ /* widget specific requirements */ for (var idx in config.gui.widgets) { if (config.gui.widgets[idx].type === "PolemicWidget" || - config.gui.widgets[idx].type === "StackGraphWidget") { + config.gui.widgets[idx].type === "StackGraphWidget" || + config.gui.widgets[idx].type === "SparklineWidget") { $L.script(libs.raphael); } - - if (config.gui.widgets[idx].type === "SparklineWidget") { - $L.script(libs.jquery_sparkline); - } } // same for modules @@ -1086,16 +1083,15 @@ callback.call(window) }); }); }; -IriSP.SparklineWidget_template = "

Loading

"; -IriSP.annotation_template = "{{! template for an annotation displayed in a segmentWidget }}

"; -IriSP.annotationWidget_template = "{{! template for the annotation widget }}

"; +IriSP.annotation_template = "{{! template for an annotation displayed in a segmentWidget }}

"; +IriSP.annotationWidget_template = "{{! template for the annotation widget }}

"; IriSP.annotation_loading_template = "{{! template shown while the annotation widget is loading }}

Chargement...

"; -IriSP.annotationsListWidget_template = "{{! template for the annotation list widget }}

{{begin}} - {{end}}

{{! if the url is not present, it means that the annotation exists in the current project }} {{^url}} {{/url}} {{! otherwise link to url }} {{#url}} {{/url}} {{title}}

{{desc}}
{{#tags.length}}
- {{.}}
{{/tags.length}}

"; +IriSP.annotationsListWidget_template = "{{! template for the annotation list widget }}

{{begin}} - {{end}}

{{! if the url is not present, it means that the annotation exists in the current project }} {{^url}} {{/url}} {{! otherwise link to url }} {{#url}} {{/url}} {{title}}

{{desc}}
{{#tags.length}}
- {{.}}
{{/tags.length}}

"; IriSP.arrowWidget_template = "

"; -IriSP.createAnnotationWidget_template = "{{! template for the annotation creation widget }}

{{^cinecast_version}}

{{/cinecast_version}}

{{#show_from_field}} Your name : {{/show_from_field}}

{{^user_avatar}}

{{/user_avatar}} {{#user_avatar}}

{{/user_avatar}}

{{#keywords.length}}

Add keywords :

{{/keywords.length}} {{#polemic_mode}} {{#polemics.length}}

Add polemic keywords :

{{/polemics.length}} {{/polemic_mode}}

"; -IriSP.createAnnotation_errorMessage_template = "

You must enter text to submit an annotation

"; +IriSP.createAnnotationWidget_template = "{{! template for the annotation creation widget }}

{{^cinecast_version}}

{{/cinecast_version}}

{{#show_from_field}} Your name : {{/show_from_field}}

{{^user_avatar}}

{{/user_avatar}} {{#user_avatar}}

{{/user_avatar}}

{{#keywords.length}}

Ajouter des mots-clés :

{{/keywords.length}} {{#polemic_mode}} {{#polemics.length}}

Add polemic keywords :

{{/polemics.length}} {{/polemic_mode}}

"; +IriSP.createAnnotation_errorMessage_template = "

Vous devez entrer un texte pour créer une annotation

"; IriSP.overlay_marker_template = "{{! the template for the small bars which is z-indexed over our segment widget }}

"; -IriSP.player_template = "{{! template for the radio player }}

{{^disable_annotate_btn}}

{{/disable_annotate_btn}} {{^disable_search_btn}}

{{/disable_search_btn}}

00:00

/

00:00

"; +IriSP.player_template = "{{! template for the radio player }}

{{^disable_annotate_btn}}

{{/disable_annotate_btn}} {{^disable_search_btn}}

{{/disable_search_btn}}

00:00

/

00:00

"; IriSP.search_template = "{{! template for the search container }}

"; IriSP.share_template = "{{! social network sharing template }} "; IriSP.sliceWidget_template = "{{! template for the slice widget }}

{{! the whole bar }}

{{! the zone which represents our slice }}

"; @@ -1227,7 +1223,11 @@ IriSP.encodeURI = function(str) { return encodeURIComponent(str).replace(/!/g, '%21').replace(/'/g, '%27').replace(/\(/g, '%28'). replace(/\)/g, '%29').replace(/\*/g, '%2A'); -} +} + +IriSP.jqId = function (myid) { + return IriSP.jQuery('#' + myid.replace(/(:|\.)/g,'\\$1')); + } IriSP.__guidCounter = 0; IriSP.guid = function(prefix) { @@ -1710,14 +1710,14 @@ minimize_period: 850 // how long does the slider stays maximized after the user leaves the zone ? }, "createAnnotationWidget" : { - keywords: ["#faux-raccord", "#mot-clef"], + keywords: ["#amateur", "#digital-studies"], polemic_mode: true, /* enable polemics ? */ /* polemics - the corresponding class names defined in the css should be for instance : Ldt-createAnnotation-polemic-positive for positive Ldt-createAnnotation-polemic-equalequal for equalequal, etc. */ polemics: [ { "className" : "positive", "keyword" : "++" }, { "className" : "negative", "keyword" : "--" }, { "className" : "reference", "keyword" : "==" }, { "className" : "question", "keyword" : "??" } ], - cinecast_version: true, /* put to false to enable the platform version, true for the festival cinecast one. */ + cinecast_version: false, /* put to false to enable the platform version, true for the festival cinecast one. */ /* where does the widget PUT the annotations - this is a mustache template. id refers to the id of the media ans is filled by the widget. @@ -1744,6 +1744,8 @@ ajax_granularity: 10000, /* how much ms should we look before and after the current timecode */ + + default_thumbnail: "/metadataplayer/src/css/imgs/video_sequence.png", project_url: platform_url + "/ldtplatform/ldt/front/player/" /* the beginning of a link to the @@ -2659,6 +2661,7 @@ this.checkOption('ajax_mode'); this.checkOption('project_url'); + this.checkOption('default_thumbnail'); this.checkOption("cinecast_version", false); var _this = this; }; @@ -2682,10 +2685,12 @@ var _this = this return { "id" : a.id, - "title": this.cinecast_version ? a.meta.creator.replace(/^.*:/,'') : a.content.title, + "title": this.cinecast_version ? IriSP.get_aliased(a.meta, ['creator_name', 'creator']) : a.content.title, "desc" : this.cinecast_version ? a.content.data : a.content.description, "begin": IriSP.msToTime(a.begin), "end" : IriSP.msToTime(a.end), + "thumbnail" : (typeof a.meta == "object" && typeof a.meta.thumbnail == "string") ? a.meta.thumbnail : this.default_thumbnail, + "url" : (typeof a.meta == "object" && typeof a.meta.url == "string") ? a.meta.url : null, "tags": typeof a.tags == "object" ? IriSP.underscore(a.tags) .chain() @@ -2714,7 +2719,6 @@ /** draw the annotation list */ IriSP.AnnotationsListWidget.prototype.drawList = function(force_redraw) { - console.log('drawList'); var _this = this; // var view_type = this._serializer.getContributions(); @@ -2813,7 +2817,7 @@ /* only if the annotation isn't present in the document create an external link */ - if (!this.annotations_ids.hasOwnProperty(obj["id"])) { + if (!this.annotations_ids.indexOf(obj["id"]) != -1) { // braindead url; jacques didn't want to create a new one in the platform, // so we append the cutting id to the url. obj["url"] = this.project_url + "/" + media + "/" + @@ -2833,12 +2837,12 @@ /* build a table of the annotations present in the document for faster lookup */ - this.annotations_ids = {}; + this.annotations_ids = []; var annotations = this._serializer._data.annotations; var i = 0; for(i = 0; i < annotations.length; i++) { - this.annotations_ids[annotations[i]["id"]] = 1; + this.annotations_ids.push(annotations[i]["id"]); } this.drawList(); @@ -3144,11 +3148,7 @@ .bind("propertychange keyup input paste js_mod", IriSP.wrap(this, this.handleTextChanges)); /* the cinecast version of the player is supposed to pause when the user clicks on the button */ - if (this.cinecast_version) { - this.selector.find(".Ldt-createAnnotation-Description") - .one("propertychange keyup input paste js_mod", - function() { if (!_this._Popcorn.media.paused) _this._Popcorn.pause() }); - } + /* the cinecast version expects the user to comment on a defined segment. As the widget is always shown, we need a way to update it's content as time passes. We do this like we did with the annotationsWidget : we schedule @@ -3277,7 +3277,9 @@ /** watch for changes in the textfield and change the buttons accordingly */ IriSP.createAnnotationWidget.prototype.handleTextChanges = function(event) { var contents = this.selector.find(".Ldt-createAnnotation-Description").val(); - + if (this.cinecast_version && !this._Popcorn.media.paused) { + this._Popcorn.pause(); + } this.selector.find(".Ldt-createAnnotation-btnblock button").each(function() { var _rx = IriSP.regexpFromText(IriSP.jQuery(this).text()); if (_rx.test(contents)) { @@ -3330,7 +3332,7 @@ this.selector.find(".Ldt-createAnnotation-Title").parent().show(); } - var url = document.location.href + "#id=" + annotation.id; + var url = typeof annotation.url == "string" ? annotation.url : document.location.href + "#id=" + annotation.id; var twStatus = IriSP.mkTweetUrl(url); var gpStatus = IriSP.mkGplusUrl(url); var fbStatus = IriSP.mkFbUrl(url); @@ -4187,36 +4189,13 @@ this._Popcorn.listen("IriSP.search", function(searchString) { self.searchHandler.call(self, searchString); }); this._Popcorn.listen("IriSP.search.closed", function() { self.searchFieldClosedHandler.call(self); }); this._Popcorn.listen("IriSP.search.cleared", function() { self.searchFieldClearedHandler.call(self); }); + + this.checkOption("cinecast_version"); + this.defaultColors = ["#1f77b4","#aec7e8","#ff7f0e","#ffbb78","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5","#8c564b","#c49c94","#e377c2","#f7b6d2","#7f7f7f","#c7c7c7","#bcbd22","#dbdb8d","#17becf","#9edae5"] }; IriSP.SegmentsWidget.prototype = new IriSP.Widget(); -/* Get the width of a segment, in pixels. */ -IriSP.SegmentsWidget.prototype.segmentToPixel = function(annotation) { - var begin = Math.round((+ annotation.begin) / 1000); - var end = Math.round((+ annotation.end) / 1000); - var duration = this._serializer.getDuration() / 1000; - - var startPourcent = IriSP.timeToPourcent(begin, duration); - var startPixel = Math.floor(this.selector.parent().width() * (startPourcent / 100)); - - var endPourcent = Math.floor(IriSP.timeToPourcent(end, duration) - startPourcent); - var endPixel = Math.floor(this.selector.parent().width() * (endPourcent / 100)); - - return endPixel; -}; - -/* compute the total length of a group of segments */ -IriSP.SegmentsWidget.prototype.segmentsLength = function(segmentsList) { - var self = this; - var total = 0; - - for (var i = 0; i < segmentsList.length; i++) - total += self.segmentToPixel(segmentsList[i].annotation); - - return total; -}; - IriSP.SegmentsWidget.prototype.draw = function() { var self = this; @@ -4224,69 +4203,84 @@ this.selector.addClass("Ldt-SegmentsWidget"); this.selector.append(Mustache.to_html(IriSP.overlay_marker_template)); - - var view_type = this._serializer.getChapitrage(); - if (typeof(view_type) === "undefined") { - view_type = this._serializer.getNonTweetIds()[0]; - } + this.positionMarker = this.selector.find(".Ldt-SegmentPositionMarker"); this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.positionUpdater)); - - - var i = 0; - - var segments_annotations = []; - - for (i = 0; i < annotations.length; i++) { - var annotation = annotations[i]; - - /* filter the annotations whose type is not the one we want */ - if (view_type != "" && typeof(annotation.meta) !== "undefined" && typeof(annotation.meta["id-ref"]) !== "undefined" - && annotation.meta["id-ref"] != view_type) { - continue; - } - - segments_annotations.push(annotation); + if (this.cinecast_version) { + var _sourceMedia = IriSP.__jsonMetadata.medias[0], + _mediaId = _sourceMedia.id, + duration = IriSP.__jsonMetadata.medias[0].meta.duration; + + var segments_annotations = IriSP.underscore.filter( + this._serializer._data.annotations, + function(_a) { + return _a.type == "cinecast:MovieExtract" && _a.media == _mediaId; + } + ); } + else { + + var duration = this._serializer.getDuration(); + var view_type = this._serializer.getChapitrage(); + if (typeof(view_type) === "undefined") { + view_type = this._serializer.getNonTweetIds()[0]; + } - var totalWidth = this.selector.width() - segments_annotations.length; + + var i = 0; + + var segments_annotations = []; + + for (i = 0; i < annotations.length; i++) { + var annotation = annotations[i]; + + /* filter the annotations whose type is not the one we want */ + if (view_type != "" && typeof(annotation.meta) !== "undefined" && typeof(annotation.meta["id-ref"]) !== "undefined" + && annotation.meta["id-ref"] != view_type) { + continue; + } + + segments_annotations.push(annotation); + } +} + var _w = this.selector.width(); var lastSegment = IriSP.underscore.max(segments_annotations, function(annotation) { return annotation.end; }); for (i = 0; i < segments_annotations.length; i++) { var annotation = segments_annotations[i]; - var begin = (+ annotation.begin); - var end = (+ annotation.end); - var duration = this._serializer.getDuration(); + var begin = (+ annotation.begin * (this.cinecast_version ? 1000 : 1)); + var end = (+ annotation.end * (this.cinecast_version ? 1000 : 1)); var id = annotation.id; - var startPixel = Math.floor(this.selector.parent().width() * (begin / duration)); - - var endPixel = Math.floor(this.selector.parent().width() * (end / duration)); - + var startPixel = Math.floor(_w * (begin / duration)); + + var endPixel = Math.floor(_w * (end / duration)); if (annotation.id !== lastSegment.id) var pxWidth = endPixel - startPixel -1; else /* the last segment has no segment following it */ var pxWidth = endPixel - startPixel; - - var divTitle = IriSP.clean_substr(annotation.content.title + " -
" + annotation.content.description, 0, 132) + "..."; - - if (typeof(annotation.content.color) !== "undefined") - var color = annotation.content.color; - else - var color = annotation.color; + + var divTitle = this.cinecast_version + ? annotation.content.data + : IriSP.clean_substr(annotation.content.title + " -
" + annotation.content.description, 0, 132) + "..."; - var hexa_color = IriSP.DEC_HEXA_COLOR(color); + var hexa_color = typeof(annotation.content.color) !== "undefined" + ? '#' + IriSP.DEC_HEXA_COLOR(annotation.content.color) + : typeof(annotation.color) !== "undefined" + ? '#' + IriSP.DEC_HEXA_COLOR(annotation.color) + : this.defaultColors[i % this.defaultColors.length]; /* if (hexa_color === "FFCC00") hexa_color = "333"; */ - if (hexa_color.length == 4) + if (hexa_color.length == 5) hexa_color = hexa_color + '00'; + var annotationTemplate = Mustache.to_html(IriSP.annotation_template, {"divTitle" : divTitle, "id" : id, "startPixel" : startPixel, "pxWidth" : pxWidth, "hexa_color" : hexa_color, @@ -4297,61 +4291,44 @@ /* add a special class to the last segment and change its border */ if (annotation.id === lastSegment.id) { - this.selector.find("#" + id).addClass("Ldt-lastSegment"); - this.selector.find(".Ldt-lastSegment").css("border-color", "#" + hexa_color); + IriSP.jqId(id).addClass("Ldt-lastSegment").css("border-color", hexa_color); } - - IriSP.jQuery("#" + id).fadeTo(0, 0.3); - - IriSP.jQuery("#" + id).mouseover( - /* we wrap the handler in another function because js's scoping - rules are function-based - otherwise, the internal vars like - divTitle are preserved but they are looked-up from the draw - method scope, so after that the loop is run, so they're not - preserved */ - (function(divTitle) { - return function(event) { - IriSP.jQuery(this).animate({opacity: 0.6}, 5); - var offset_x = IriSP.jQuery(this).position().left + IriSP.jQuery(this).outerWidth() / 2; - - self.TooltipWidget.show(divTitle, color, offset_x, 0); - } })(divTitle)).mouseout(function(){ - IriSP.jQuery(this).animate({opacity: 0.3}, 5); - self.TooltipWidget.hide(); - }); - + } // react to mediafragment messages. this._Popcorn.listen("IriSP.Mediafragment.showAnnotation", - function(id, divTitle) { - return function(annotation_id) { - if (annotation_id !== id) - return; + function(id, divTitle) { - var divObject = IriSP.jQuery("#" + id); - divObject.animate({opacity: 0.6}, 5); - var offset = divObject.offset(); - var correction = divObject.outerWidth() / 2; - - var offset_x = offset.left + correction - 106; - if (offset_x < 0) - offset_x = 0; - - var offset_y = offset.top; - - self.TooltipWidget.show(divTitle, color, offset_x, offset_y - 160); - IriSP.jQuery(document).one("mousemove", function() { divObject.animate({opacity: 0.3}, 5); + var divObject = IriSP.jqId(id); + if (divObject.length) { + divObject.fadeTo(0,1); + var offset_x = divObject.position().left + divObject.outerWidth() / 2; + self.TooltipWidget.show(divObject.attr("title"), IriSP.jQuery(this).css("background-color"), offset_x, 0); + IriSP.jQuery(document).one("mousemove", function() { divObject.fadeTo(0,.5); self.TooltipWidget.hide(); }); - }; }(id, divTitle)); - - IriSP.jQuery("#" + id).click(function(_this, annotation) { - return function() { _this.clickHandler(annotation)}; - }(this, annotation)); - } + } + }); + + this.selector.find(".Ldt-iri-chapter") + .fadeTo(0, .5) + .click(function() { + self._Popcorn.trigger("IriSP.SegmentsWidget.click", this.id); + self._Popcorn.currentTime(IriSP.jQuery(this).attr("data-seek")); + }) + .mouseover( function(event) { + var divObject = IriSP.jQuery(this); + divObject.fadeTo(0,1); + var offset_x = divObject.position().left + divObject.outerWidth() / 2; + self.TooltipWidget.show(divObject.attr("title"), IriSP.jQuery(this).css("background-color"), offset_x, 0); + }) + .mouseout(function(){ + IriSP.jQuery(this).fadeTo(0,.5); + self.TooltipWidget.hide(); + }); }; /* restores the view after a search */ IriSP.SegmentsWidget.prototype.clear = function() { - this.selector.children(".Ldt-iri-chapter").animate({opacity:0.3}, 100); + this.selector.children(".Ldt-iri-chapter").fadeTo(0,.5); }; IriSP.SegmentsWidget.prototype.clickHandler = function(annotation) { @@ -4396,7 +4373,11 @@ }; IriSP.SegmentsWidget.prototype.positionUpdater = function() { - var duration = this._serializer.getDuration() / 1000; + if (this.cinecast_version) { + var duration = IriSP.__jsonMetadata.medias[0].meta.duration; + } else { + var duration = this._serializer.getDuration() / 1000; + } var time = this._Popcorn.currentTime(); //var position = ((time / duration) * 100).toFixed(2); var position = ((time / duration) * 100).toFixed(2); @@ -4746,6 +4727,21 @@ this._oldAnnotation = null; this._results = []; + + this.lineColor = this._config.lineColor || "#7492b4"; + this.fillColor = this._config.fillColor || "#aeaeb8"; + this.lineWidth = this._config.lineWidth || 2; + this.slices = this._config.slices || Math.floor(this.width/20); + if (!this.width) { + this.width = this.selector.width(); + } + if (!this.height) { + this.height = 40; + } + this.selector.css("height", this.height + "px"); + if (this._config.background) { + this.selector.css("background", this._config.background); + } }; @@ -4757,19 +4753,13 @@ /** draw the sparkline using jquery sparkline */ IriSP.SparklineWidget.prototype.draw = function() { - var templ = Mustache.to_html(IriSP.SparklineWidget_template, {width: this.width, height: this.height}); - /** this widget uses three divs - - the first is the sparkline, which is generated by jquery sparkline, - the second is an overlay div to display the progression in the video, - and the third is a div to react to clicks - */ + this.duration = this._serializer.getDuration(); + this.paper = new Raphael(this.selector[0], this.width, this.height); var views = this._serializer._data.views; var stat_view; if (!IriSP.null_or_undefined(views)) { - - var i; - for (i = 0; i < views.length; i++) { + for (var i = 0; i < views.length; i++) { var view = views[i]; if (view.id === "stat") { stat_view = view; @@ -4778,107 +4768,103 @@ } } + var _ = IriSP.underscore; // If we've found the correct view, feed the directly the data from the view // to jquery sparkline. Otherwise, compute it ourselves. - if (!IriSP.null_or_undefined(stat_view)) { - console.log("sparklinewidget : using stats embedded in the json"); - var results = stat_view.meta.stat.split(","); - } else { - console.log("sparklinewidget : computing stats ourselves"); - var num_columns = (this.selector.width()) / IriSP.widgetsDefaults["SparklineWidget"].column_width; - var duration = this._serializer.getDuration(); - var time_step = duration / num_columns; /* the time interval between two columns */ - var results = []; - var i = 0; /* the index in the loop */ - - /* this algorithm makes one assumption : that the array is sorted - (it's done for us by the JSONSerializer). We go through the array - and count how many comments fall within a peculiar time piece. - As i is preserved between each iteration, it's O(n). - */ - - for(var j = 0; j < num_columns && i < this._serializer._data.annotations.length; j++) { - var count = 0; - var annotation_begin = +(this._serializer._data.annotations[i].begin); - - while(annotation_begin >= j * time_step && annotation_begin <= (j + 1) * time_step ) { - count++; - i++; - if (i >= this._serializer._data.annotations.length) - break; - - annotation_begin = +(this._serializer._data.annotations[i].begin); - - } - - results.push(count); + if (!IriSP.null_or_undefined(stat_view)) { + console.log("sparklinewidget : using stats embedded in the json"); + var _results = stat_view.meta.stat.split(","); + } else { + var _annotations = this._serializer._data.annotations, + _sliceDuration = Math.floor( this.duration / this.slices), + _results = _(_.range(this.slices)).map(function(_i) { + return _(_annotations).filter(function(_a){ + return (_a.begin <= (1 + _i) * _sliceDuration) && (_a.end >= _i * _sliceDuration) + }).length; + }); } - } - + var _max = Math.max(1, _(_results).max()), + _h = this.height, + _scale = (_h - this.lineWidth) / _max, + _width = this.width / this.slices, + _y = _(_results).map(function(_v) { + return _h - (_scale * _v); + }), + _d = _(_y).reduce(function(_memo, _v, _k) { + return _memo + ( _k + ? 'C' + (_k * _width) + ' ' + _y[_k - 1] + ' ' + (_k * _width) + ' ' + _v + ' ' + ((_k + .5) * _width) + ' ' + _v + : 'M0 ' + _v + 'L' + (.5*_width) + ' ' + _v ) + },'') + 'L' + this.width + ' ' + _y[_y.length - 1], + _d2 = _d + 'L' + this.width + ' ' + this.height + 'L0 ' + this.height; + this.paper.path(_d2).attr({ + "stroke" : "none", + "fill" : this.fillColor + }); + + this.paper.path(_d).attr({ + "fill" : "none", + "stroke" : this.lineColor, + "stroke-width" : this.lineWidth + }); + + this.rectangleProgress = this.paper.rect(0,0,0,this.height) + .attr({ + "stroke" : "none", + "fill" : "#808080", + "opacity" : .3 + }); + this.ligneProgress = this.paper.path("M0 0L0 "+this.height).attr({"stroke":"#ff00ff", "line-width" : 2}); // save the results in an array so that we can re-use them when a new annotation // is added. - this._results = results; - - this.selector.append(templ); - this.selector.find(".Ldt-sparkLine").css("background", "#c7c8cc"); - this.selector.find(".Ldt-sparkLine").sparkline(results, {lineColor: "#7492b4", fillColor: "#aeaeb8", - spotColor: "#b70056", - width: this.width, height: this.height}); + this._results = _results; + this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.timeUpdateHandler)); - this._Popcorn.listen("IriSP.createAnnotationWidget.addedAnnotation", IriSP.wrap(this, this.handleNewAnnotation)); - - IriSP.jQuery(".Ldt-sparkLineClickOverlay").click(IriSP.wrap(this, this.clickHandler)); +// this._Popcorn.listen("IriSP.createAnnotationWidget.addedAnnotation", IriSP.wrap(this, this.handleNewAnnotation)); + + this.selector.click(IriSP.wrap(this, this.clickHandler)); }; /** react to a timeupdate event */ IriSP.SparklineWidget.prototype.timeUpdateHandler = function() { - var currentTime = this._Popcorn.currentTime(); - var duration = this._serializer.getDuration() / 1000; - var proportion = ((currentTime / duration) * 100).toFixed(4); - - IriSP.jQuery(".Ldt-sparkLinePositionMarker").css("width", proportion + "%"); + var _currentTime = this._Popcorn.currentTime(), + _x = (1000 * _currentTime / this.duration) * this.width; + this.rectangleProgress.attr({ + "width" : _x + }); + this.ligneProgress.attr({ + "path" : "M" + _x + " 0L" + _x + " " + this.height + }); + } /** handle clicks on the widget */ IriSP.SparklineWidget.prototype.clickHandler = function(event) { - /* this piece of code is a little bit convoluted - here's how it works : - we want to handle clicks on the progress bar and convert those to seeks in the media. - However, jquery only gives us a global position, and we want a number of pixels relative - to our container div, so we get the parent position, and compute an offset to this position, - and finally compute the progress ratio in the media. - Finally we multiply this ratio with the duration to get the correct time - */ - - var parentOffset = this.selector.offset(); - var width = this.selector.width(); - var relX = event.pageX - parentOffset.left; - - var duration = this._serializer.getDuration() / 1000; - var newTime = ((relX / width) * duration).toFixed(2); + var relX = event.pageX - this.selector.offset().left; + var newTime = ((relX / this.width) * this.duration/1000).toFixed(2); this._Popcorn.trigger("IriSP.SparklineWidget.clicked", newTime); - this._Popcorn.currentTime(newTime); + this._Popcorn.currentTime(newTime); }; /** react when a new annotation is added */ IriSP.SparklineWidget.prototype.handleNewAnnotation = function(annotation) { - var num_columns = this._results.length; - var duration = this._serializer.getDuration(); - var time_step = Math.round(duration / num_columns); /* the time interval between two columns */ - var begin = +annotation.begin; - var end = +annotation.end; - - /* increment all the values between the beginning and the end of the annotation */ - var index_begin = Math.floor(begin / time_step); - var index_end = Math.floor(end / time_step); - - for (var i = index_begin; i < Math.min(index_end, this._results.length); i++) { - this._results[i]++; - } - - this.selector.find(".Ldt-sparkLine").sparkline(this._results, {lineColor: "#7492b4", fillColor: "#aeaeb8", - spotColor: "#b70056", - width: this.width, height: this.height}); +// var num_columns = this._results.length; +// var duration = this._serializer.getDuration(); +// var time_step = Math.round(duration / num_columns); /* the time interval between two columns */ +// var begin = +annotation.begin; +// var end = +annotation.end; +// +// /* increment all the values between the beginning and the end of the annotation */ +// var index_begin = Math.floor(begin / time_step); +// var index_end = Math.floor(end / time_step); +// +// for (var i = index_begin; i < Math.min(index_end, this._results.length); i++) { +// this._results[i]++; +// } +// +// this.selector.find(".Ldt-sparkLine").sparkline(this._results, {lineColor: "#7492b4", fillColor: "#aeaeb8", +// spotColor: "#b70056", +// width: this.width, height: this.height}); };IriSP.StackGraphWidget = function(Popcorn, config, Serializer) { IriSP.Widget.call(this, Popcorn, config, Serializer); } @@ -4941,7 +4927,7 @@ return _g.length }).length, _scale = this.height / _max, - _width = this.width / this.sliceCount + _width = this.width / this.sliceCount, _showTitle = !this._config.excludeTitle, _showDescription = !this._config.excludeDescription;