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   this.leftHandle.draggable({axis: "x",

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

    26   containment: "parent"

    27   });

    28 

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

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

    31   containment: "parent"

    32   });

    33 

    34   

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

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

    37   this._Popcorn.trigger("IriSP.SliceWidget.position", [57, 24]);

    38 };

    39 

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

    41   left = params[0];

    42   width = params[1];

    43   

    44   this.zoneLeft = left;

    45   this.zoneWidth = width;

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

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

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

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

    50 };

    51 

    52 /*

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

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

    55   

    56   var parentOffset = this.selector.offset();  

    57   var relX = event.pageX - parentOffset.left;

    58   

    59   

    60   var increment = this.zoneLeft - relX;

    61   console.log(increment);

    62 

    63   this.sliceZone.css("width", this.zoneWidth + increment);

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

    65   this.zoneLeft = relX;

    66   this.zoneWidth += increment;

    67 };

    68 */

    69 

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

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

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

    73     

    74   var increment = this.zoneLeft - (currentX + 7);

    75   

    76   this.zoneWidth += increment;

    77   this.zoneLeft = currentX + 7;

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

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

    80   this.broadcastChanges();

    81 };

    82 

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

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

    85   var currentX = this.rightHandle.position()["left"];

    86     

    87   var increment = currentX - (this.zoneLeft + this.zoneWidth);  

    88 

    89   this.zoneWidth += increment;  

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

    91   this.broadcastChanges();

    92 };

    93 

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

    95     changed 

    96 */

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

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

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

   100   console.log(leftPercent, zonePercent);

   101   

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

   103   

   104 };