47 this.zoneWidth = width; |
47 this.zoneWidth = width; |
48 this.sliceZone.css("left", left + "px"); |
48 this.sliceZone.css("left", left + "px"); |
49 this.sliceZone.css("width", width + "px"); |
49 this.sliceZone.css("width", width + "px"); |
50 this.leftHandle.css("left", (left - 7) + "px"); |
50 this.leftHandle.css("left", (left - 7) + "px"); |
51 this.rightHandle.css("left", left + width + "px"); |
51 this.rightHandle.css("left", left + width + "px"); |
|
52 |
|
53 this._leftHandleOldLeft = left - 7; |
|
54 this._rightHandleOldLeft = left + width; |
52 }; |
55 }; |
53 |
56 |
54 /** handle a dragging of the left handle */ |
57 /** handle a dragging of the left handle */ |
55 IriSP.SliceWidget.prototype.leftHandleDragged = function(event, ui) { |
58 IriSP.SliceWidget.prototype.leftHandleDragged = function(event, ui) { |
|
59 /* we have a special variable, this._leftHandleOldLeft, to keep the |
|
60 previous position of the handle. We do that to know in what direction |
|
61 is the handle being dragged |
|
62 */ |
|
63 |
56 var currentX = this.leftHandle.position()["left"]; |
64 var currentX = this.leftHandle.position()["left"]; |
57 |
65 var rightHandleX = this.rightHandle.position()["left"]; |
|
66 |
|
67 if (currentX >= rightHandleX - 7 && ui.position.left >= this._leftHandleOldLeft) { |
|
68 /* prevent the handle from moving past the right handle */ |
|
69 ui.position.left = this._leftHandleOldLeft; |
|
70 } |
|
71 |
58 var increment = this.zoneLeft - (currentX + 7); |
72 var increment = this.zoneLeft - (currentX + 7); |
59 |
73 |
60 this.zoneWidth += increment; |
74 this.zoneWidth += increment; |
61 this.zoneLeft = currentX + 7; |
75 this.zoneLeft = currentX + 7; |
62 this.sliceZone.css("width", this.zoneWidth); |
76 this.sliceZone.css("width", this.zoneWidth); |
63 this.sliceZone.css("left", this.zoneLeft + "px"); |
77 this.sliceZone.css("left", this.zoneLeft + "px"); |
64 this.broadcastChanges(); |
78 this.broadcastChanges(); |
|
79 |
|
80 this._leftHandleOldLeft = ui.position.left; |
65 }; |
81 }; |
66 |
82 |
67 /** handle a dragging of the right handle */ |
83 /** handle a dragging of the right handle */ |
68 IriSP.SliceWidget.prototype.rightHandleDragged = function(event, ui) { |
84 IriSP.SliceWidget.prototype.rightHandleDragged = function(event, ui) { |
69 var currentX = this.rightHandle.position()["left"]; |
85 var currentX = this.rightHandle.position()["left"]; |
70 |
86 var leftHandleX = this.leftHandle.position()["left"]; |
|
87 |
|
88 if (currentX <= leftHandleX + 7 && ui.position.left <= this._rightHandleOldLeft) { |
|
89 /* prevent the handle from moving past the right handle */ |
|
90 ui.position.left = this._rightHandleOldLeft; |
|
91 } |
|
92 |
71 var increment = currentX - (this.zoneLeft + this.zoneWidth); |
93 var increment = currentX - (this.zoneLeft + this.zoneWidth); |
72 |
94 |
73 this.zoneWidth += increment; |
95 this.zoneWidth += increment; |
74 this.sliceZone.css("width", this.zoneWidth); |
96 this.sliceZone.css("width", this.zoneWidth); |
75 this.broadcastChanges(); |
97 this.broadcastChanges(); |
|
98 |
|
99 this._rightHandleOldLeft = ui.position.left; |
76 }; |
100 }; |
77 |
101 |
78 /** tell to the world that the coordinates of the slice have |
102 /** tell to the world that the coordinates of the slice have |
79 changed |
103 changed |
80 */ |
104 */ |
81 IriSP.SliceWidget.prototype.broadcastChanges = function() { |
105 IriSP.SliceWidget.prototype.broadcastChanges = function() { |
82 var leftPercent = (this.zoneLeft / this.selector.width()) * 100; |
106 var leftPercent = (this.zoneLeft / this.selector.width()) * 100; |
83 var zonePercent = (this.zoneWidth / this.selector.width()) * 100; |
107 var zonePercent = (this.zoneWidth / this.selector.width()) * 100; |
84 console.log(leftPercent, zonePercent); |
|
85 |
108 |
86 this._Popcorn.trigger("IriSP.SliceWidget.zoneChange", [leftPercent, zonePercent]); |
109 this._Popcorn.trigger("IriSP.SliceWidget.zoneChange", [leftPercent, zonePercent]); |
87 |
|
88 }; |
110 }; |