1 /** A widget to create a new segment */

     2 IriSP.SliceWidget = function(Popcorn, config, Serializer) {

     3   IriSP.Widget.call(this, Popcorn, config, Serializer);

     4   

     5 };

     6 

     7 IriSP.SliceWidget.prototype = new IriSP.Widget();

     8 

     9 IriSP.SliceWidget.prototype.draw = function() {

    10   var templ = Mustache.to_html(IriSP.sliceWidget_template);

    11   this.selector.append(templ);

    12   

    13   this.sliceZone = this.selector.find(".Ldt-sliceZone");

    14   

    15   /* global variables used to keep the position and width

    16      of the zone.

    17   */  

    18   this.zoneLeft = 0;

    19   this.zoneWidth = 0;

    20   

    21   this.leftHandle = this.selector.find(".Ldt-sliceLeftHandle");

    22   this.rightHandle = this.selector.find(".Ldt-sliceRightHandle");

    23 

    24   var left = this.selector.offset().left;

    25   var top = this.selector.offset().top;

    26 

    27   // a bug in firefox makes it use the wrong format

    28   if (!IriSP.jQuery.browser.mozilla) {

    29     // contain the handles correctly - we cannot set

    30     // containment: parent because it wouldn't allow to select the 

    31     // whole slice, so we have to compute a box in which the slice is

    32     // allowed to move.

    33     var containment = [left - 8, top, this.selector.width() + left, top];

    34 

    35     // var containment = [left - 16, top, this.selector.width() + left - 8, top];

    36     this.leftHandle.draggable({axis: "x",

    37     drag: IriSP.wrap(this, this.leftHandleDragged),  

    38     containment: containment

    39     });

    40 

    41     containment = [left, top, this.selector.width() + left, top];

    42     // containment = [left, top, this.selector.width() + left - 8, top];

    43     this.rightHandle.draggable({axis: "x",

    44     drag: IriSP.wrap(this, this.rightHandleDragged),    

    45     containment: containment

    46     });

    47   

    48   } else { // firefox

    49     // we need to define a containment specific to firefox.

    50     

    51     var containment = [left - 16, top, this.selector.width() + left - 8, top];

    52     this.leftHandle.draggable({axis: "x",

    53     drag: IriSP.wrap(this, this.leftHandleDragged),  

    54     containment: containment

    55     });

    56 

    57     containment = [left, top, this.selector.width() + left - 8, top];

    58     this.rightHandle.draggable({axis: "x",

    59     drag: IriSP.wrap(this, this.rightHandleDragged),    

    60     containment: containment

    61     });

    62   }

    63   

    64   this.leftHandle.css("position", "absolute");

    65   this.rightHandle.css("position", "absolute");

    66   

    67   this._Popcorn.listen("IriSP.SliceWidget.position", 

    68                         IriSP.wrap(this, this.positionSliceHandler));

    69   

    70   this._Popcorn.listen("IriSP.SliceWidget.show", IriSP.wrap(this, this.show));

    71   this._Popcorn.listen("IriSP.SliceWidget.hide", IriSP.wrap(this, this.hide));

    72   this.selector.hide();

    73 };

    74 

    75 /** responds to an "IriSP.SliceWidget.position" message

    76     @param params an array with the first element being the left distance in

    77            percents and the second element the width of the slice in pixels

    78 */        

    79 IriSP.SliceWidget.prototype.positionSliceHandler = function(params) {

    80   left = params[0];

    81   width = params[1];

    82   

    83   this.zoneLeft = left;

    84   this.zoneWidth = width;

    85   this.sliceZone.css("left", left + "px");

    86   this.sliceZone.css("width", width + "px");

    87   this.leftHandle.css("left", (left - 7) + "px");

    88   this.rightHandle.css("left", left + width + "px");

    89   

    90   this._leftHandleOldLeft = left - 7;

    91   this._rightHandleOldLeft = left + width;

    92 };

    93 

    94 /** handle a dragging of the left handle */

    95 IriSP.SliceWidget.prototype.leftHandleDragged = function(event, ui) {

    96   /* we have a special variable, this._leftHandleOldLeft, to keep the

    97      previous position of the handle. We do that to know in what direction

    98      is the handle being dragged

    99   */

   100   

   101   var currentX = this.leftHandle.offset().left;

   102   var rightHandleX = Math.floor(this.rightHandle.position()["left"]);

   103   

   104   var container_offset = this.selector.offset().left;

   105 

   106   if (Math.floor(ui.position.left) >= rightHandleX - 7) {

   107     /* prevent the handle from moving past the right handle */

   108     ui.position.left = rightHandleX - 7;

   109   }

   110 

   111   this.zoneWidth = rightHandleX - Math.floor(ui.position.left) - 7;  

   112   this.zoneLeft = Math.floor(ui.position.left) + 8;

   113   

   114   this.sliceZone.css("width", this.zoneWidth);

   115   this.sliceZone.css("left", this.zoneLeft + "px");

   116   

   117   this._leftHandleOldLeft = ui.position.left;  

   118   this.broadcastChanges();

   119     

   120 };

   121 

   122 /** handle a dragging of the right handle */

   123 IriSP.SliceWidget.prototype.rightHandleDragged = function(event, ui) { 

   124   /* we have a special variable, this._leftHandleOldLeft, to keep the

   125      previous position of the handle. We do that to know in what direction

   126      is the handle being dragged

   127   */

   128   

   129   var currentX = this.leftHandle.position()["left"];

   130   var leftHandleX = Math.floor(this.leftHandle.position()["left"]);

   131 

   132   var container_offset = this.selector.offset().left + this.selector.width();

   133   

   134   if (Math.floor(ui.position.left) < leftHandleX + 7) {

   135     /* prevent the handle from moving past the left handle */

   136     ui.position.left = leftHandleX + 7;

   137   }

   138 

   139   this.zoneWidth = Math.floor(ui.position.left) - (leftHandleX + 7);    

   140   

   141   this.sliceZone.css("width", this.zoneWidth);

   142   //this.sliceZone.css("left", this.zoneLeft + "px");

   143   this._rightHandleOldLeft = Math.floor(this._rightHandleOldLeft);  

   144   this.broadcastChanges();

   145 };

   146 

   147 /** tell to the world that the coordinates of the slice have

   148     changed 

   149 */

   150 IriSP.SliceWidget.prototype.broadcastChanges = function() {

   151   var leftPercent = (this.zoneLeft / this.selector.width()) * 100;

   152   var zonePercent = (this.zoneWidth / this.selector.width()) * 100;

   153 

   154   this._Popcorn.trigger("IriSP.SliceWidget.zoneChange", [leftPercent, zonePercent]);  

   155 };

   156 

   157 IriSP.SliceWidget.prototype.show = function() {

   158   this.selector.show();

   159 };

   160 

   161 IriSP.SliceWidget.prototype.hide = function() {

   162   this.selector.hide();

   163 };