--- a/src/js/widgets/segmentsWidget.js Mon Nov 14 16:12:13 2011 +0100
+++ b/src/js/widgets/segmentsWidget.js Mon Nov 14 17:19:26 2011 +0100
@@ -1,148 +1,150 @@
-IriSP.SegmentsWidget = function(Popcorn, config, Serializer) {
+define(["IriSP", "widgets", "util", "tooltipWidget"], function() {
+ IriSP.SegmentsWidget = function(Popcorn, config, Serializer) {
- var self = this;
- IriSP.Widget.call(this, Popcorn, config, Serializer);
- this.oldSearchMatches = [];
+ var self = this;
+ IriSP.Widget.call(this, Popcorn, config, Serializer);
+ this.oldSearchMatches = [];
- // event handlers
- 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); });
-};
+ // event handlers
+ 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); });
+ };
-IriSP.SegmentsWidget.prototype = new IriSP.Widget();
+ IriSP.SegmentsWidget.prototype = new IriSP.Widget();
-IriSP.SegmentsWidget.prototype.draw = function() {
+ IriSP.SegmentsWidget.prototype.draw = function() {
- var self = this;
- var annotations = this._serializer._data.annotations;
+ var self = this;
+ var annotations = this._serializer._data.annotations;
- this.selector.css("overflow", "auto"); // clear the floats - FIXME : to refactor ?
- this.selector.append(Mustache.to_html(IriSP.overlay_marker_template));
-
- this.positionMarker = this.selector.children(":first");
-
- this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.positionUpdater));
-
- this.selector.after("<div class='cleaner'></div>"); // we need to do this because the segments are floated
-
- var i = 0;
- var totalWidth = this.selector.width();
- var onePxPercent = 100 / totalWidth; /* the value of a pixel, in percents */
-
- for (i = 0; i < annotations.length; i++) {
- var annotation = annotations[i];
+ this.selector.css("overflow", "auto"); // clear the floats - FIXME : to refactor ?
+ this.selector.append(Mustache.to_html(IriSP.overlay_marker_template));
+
+ this.positionMarker = this.selector.children(":first");
+
+ this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.positionUpdater));
+
+ this.selector.after("<div class='cleaner'></div>"); // we need to do this because the segments are floated
+
+ var i = 0;
+ var totalWidth = this.selector.width();
+ var onePxPercent = 100 / totalWidth; /* the value of a pixel, in percents */
+
+ for (i = 0; i < annotations.length; i++) {
+ var annotation = annotations[i];
- var begin = Math.round((+ annotation.begin) / 1000);
- var end = Math.round((+ annotation.end) / 1000);
- var duration = this._serializer.currentMedia().meta["dc:duration"] / 1000;
- var id = annotation.id;
- var startPourcent = IriSP.timeToPourcent(begin, duration);
-
- /* some sort of collapsing occurs, so we only have to substract one pixel to each box instead of
- two
- */
- var endPourcent = IriSP.timeToPourcent(end, duration) - startPourcent - onePxPercent * 1;
-
- /* on the other hand, we have to substract one pixel from the first box because it's the only
- one to have to effective 1px margins */
- if (i == 0) {
+ var begin = Math.round((+ annotation.begin) / 1000);
+ var end = Math.round((+ annotation.end) / 1000);
+ var duration = this._serializer.currentMedia().meta["dc:duration"] / 1000;
+ var id = annotation.id;
+ var startPourcent = IriSP.timeToPourcent(begin, duration);
+
+ /* some sort of collapsing occurs, so we only have to substract one pixel to each box instead of
+ two
+ */
+ var endPourcent = IriSP.timeToPourcent(end, duration) - startPourcent - onePxPercent * 1;
+
+ /* on the other hand, we have to substract one pixel from the first box because it's the only
+ one to have to effective 1px margins */
+ if (i == 0) {
- endPourcent -= onePxPercent;
- }
-
- var divTitle = annotation.content.title.substr(0,55);
- var color = annotation.content.color
+ endPourcent -= onePxPercent;
+ }
+
+ var divTitle = annotation.content.title.substr(0,55);
+ var color = annotation.content.color
- var annotationTemplate = Mustache.to_html(IriSP.annotation_template,
- {"divTitle" : divTitle, "id" : id, "startPourcent" : startPourcent,
- "endPourcent" : endPourcent, "hexa_color" : IriSP.DEC_HEXA_COLOR(color),
- "seekPlace" : Math.round(begin/1000)});
+ var annotationTemplate = Mustache.to_html(IriSP.annotation_template,
+ {"divTitle" : divTitle, "id" : id, "startPourcent" : startPourcent,
+ "endPourcent" : endPourcent, "hexa_color" : IriSP.DEC_HEXA_COLOR(color),
+ "seekPlace" : Math.round(begin/1000)});
- var toolTipTemplate = Mustache.to_html(IriSP.tooltip_template,
- {"title" : divTitle, "begin" : begin, "end" : end,
- "description": annotation.content.description});
+ var toolTipTemplate = Mustache.to_html(IriSP.tooltip_template,
+ {"title" : divTitle, "begin" : begin, "end" : end,
+ "description": annotation.content.description});
- this.selector.append(annotationTemplate);
+ this.selector.append(annotationTemplate);
- IriSP.jQuery("#" + id).tooltip({ effect: 'slide'});
+ IriSP.jQuery("#" + id).tooltip({ effect: 'slide'});
- IriSP.jQuery("#" + id).fadeTo(0, 0.3);
+ IriSP.jQuery("#" + id).fadeTo(0, 0.3);
- IriSP.jQuery("#" + id).mouseover(function() {
- IriSP.jQuery("#" + id).animate({opacity: 0.6}, 5);
- }).mouseout(function(){
- IriSP.jQuery("#" + id).animate({opacity: 0.3}, 5);
- });
+ IriSP.jQuery("#" + id).mouseover(function() {
+ IriSP.jQuery("#" + id).animate({opacity: 0.6}, 5);
+ }).mouseout(function(){
+ IriSP.jQuery("#" + id).animate({opacity: 0.3}, 5);
+ });
- IriSP.jQuery("#" + id).click(function(_this, annotation) {
- return function() { _this.clickHandler(annotation)};
- }(this, annotation));
- }
-};
+ IriSP.jQuery("#" + id).click(function(_this, annotation) {
+ return function() { _this.clickHandler(annotation)};
+ }(this, annotation));
+ }
+ };
-/* restores the view after a search */
-IriSP.SegmentsWidget.prototype.clear = function() {
- // reinit the fields
- for (var id in this.oldSearchMatches) {
+ /* restores the view after a search */
+ IriSP.SegmentsWidget.prototype.clear = function() {
+ // reinit the fields
+ for (var id in this.oldSearchMatches) {
- IriSP.jQuery("#"+id).dequeue();
- IriSP.jQuery("#"+id).animate({height:0}, 100);
- IriSP.jQuery("#"+id).css('border-color','lightgray');
- IriSP.jQuery("#"+id).animate({opacity:0.3}, 100);
- }
-};
+ IriSP.jQuery("#"+id).dequeue();
+ IriSP.jQuery("#"+id).animate({height:0}, 100);
+ IriSP.jQuery("#"+id).css('border-color','lightgray');
+ IriSP.jQuery("#"+id).animate({opacity:0.3}, 100);
+ }
+ };
-IriSP.SegmentsWidget.prototype.clickHandler = function(annotation) {
- var begin = Math.round((+ annotation.begin) / 1000);
- this._Popcorn.currentTime(begin);
-};
+ IriSP.SegmentsWidget.prototype.clickHandler = function(annotation) {
+ var begin = Math.round((+ annotation.begin) / 1000);
+ this._Popcorn.currentTime(begin);
+ };
-IriSP.SegmentsWidget.prototype.searchHandler = function(searchString) {
+ IriSP.SegmentsWidget.prototype.searchHandler = function(searchString) {
- if (searchString == "")
- return;
+ if (searchString == "")
+ return;
- var matches = this._serializer.searchOccurences(searchString);
+ var matches = this._serializer.searchOccurences(searchString);
- for (var id in matches) {
- var factor = matches[id] * 8;
- this.selector.find("#"+id).dequeue();
- this.selector.find("#"+id).animate({height: factor}, 200);
- this.selector.find("#"+id).css('border-color','red');
- this.selector.find("#"+id).animate({opacity:0.6}, 200);
+ for (var id in matches) {
+ var factor = matches[id] * 8;
+ this.selector.find("#"+id).dequeue();
+ this.selector.find("#"+id).animate({height: factor}, 200);
+ this.selector.find("#"+id).css('border-color','red');
+ this.selector.find("#"+id).animate({opacity:0.6}, 200);
- IriSP.jQuery("#LdtSearchInput").css('background-color','#e1ffe1');
- }
+ IriSP.jQuery("#LdtSearchInput").css('background-color','#e1ffe1');
+ }
- // clean up the blocks that were in the previous search
- // but who aren't in the current one.
- for (var id in this.oldSearchMatches) {
- if (!matches.hasOwnProperty(id)) {
- IriSP.jQuery("#"+id).dequeue();
- IriSP.jQuery("#"+id).animate({height:0}, 250);
- IriSP.jQuery("#"+id).animate({opacity:0.3}, 200);
- this.selector.find("#"+id).css('border','solid 1px #aaaaaa');
+ // clean up the blocks that were in the previous search
+ // but who aren't in the current one.
+ for (var id in this.oldSearchMatches) {
+ if (!matches.hasOwnProperty(id)) {
+ IriSP.jQuery("#"+id).dequeue();
+ IriSP.jQuery("#"+id).animate({height:0}, 250);
+ IriSP.jQuery("#"+id).animate({opacity:0.3}, 200);
+ this.selector.find("#"+id).css('border','solid 1px #aaaaaa');
+ }
}
- }
-
- this.oldSearchMatches = matches;
-};
+
+ this.oldSearchMatches = matches;
+ };
-IriSP.SegmentsWidget.prototype.searchFieldClearedHandler = function() {
- this.clear();
-};
+ IriSP.SegmentsWidget.prototype.searchFieldClearedHandler = function() {
+ this.clear();
+ };
-IriSP.SegmentsWidget.prototype.searchFieldClosedHandler = function() {
- this.clear();
-};
+ IriSP.SegmentsWidget.prototype.searchFieldClosedHandler = function() {
+ this.clear();
+ };
-IriSP.SegmentsWidget.prototype.positionUpdater = function() {
- var duration = this._serializer.currentMedia().meta["dc:duration"] / 1000;
- var time = this._Popcorn.currentTime();
- var position = ((time / duration) * 100).toFixed(2);
+ IriSP.SegmentsWidget.prototype.positionUpdater = function() {
+ var duration = this._serializer.currentMedia().meta["dc:duration"] / 1000;
+ var time = this._Popcorn.currentTime();
+ var position = ((time / duration) * 100).toFixed(2);
- this.positionMarker.css("left", position + "%");
-};
\ No newline at end of file
+ this.positionMarker.css("left", position + "%");
+ };
+});
\ No newline at end of file