19 this.zoneWidth = 0; |
19 this.zoneWidth = 0; |
20 |
20 |
21 this.leftHandle = this.selector.find(".Ldt-sliceLeftHandle"); |
21 this.leftHandle = this.selector.find(".Ldt-sliceLeftHandle"); |
22 this.rightHandle = this.selector.find(".Ldt-sliceRightHandle"); |
22 this.rightHandle = this.selector.find(".Ldt-sliceRightHandle"); |
23 |
23 |
|
24 var left = this.selector.offset().left; |
|
25 var top = this.selector.offset().top; |
|
26 |
|
27 // contain the handles correctly - we cannot set |
|
28 // containment: parent because it wouldn't allow to select the |
|
29 // whole slice, so we have to compute a box in which the slice is |
|
30 // allowed to move. |
|
31 var containment = [left - 8, top, this.selector.width() + left, top]; |
24 this.leftHandle.draggable({axis: "x", |
32 this.leftHandle.draggable({axis: "x", |
25 drag: IriSP.wrap(this, this.leftHandleDragged), |
33 drag: IriSP.wrap(this, this.leftHandleDragged), |
26 containment: "parent" |
34 containment: containment |
27 }); |
35 }); |
28 |
36 |
|
37 containment = [left, top, this.selector.width() + left, top]; |
29 this.rightHandle.draggable({axis: "x", |
38 this.rightHandle.draggable({axis: "x", |
30 drag: IriSP.wrap(this, this.rightHandleDragged), |
39 drag: IriSP.wrap(this, this.rightHandleDragged), |
31 containment: "parent" |
40 containment: containment |
32 }); |
41 }); |
33 |
42 |
34 this.leftHandle.css("position", "absolute"); |
43 this.leftHandle.css("position", "absolute"); |
35 this.rightHandle.css("position", "absolute"); |
44 this.rightHandle.css("position", "absolute"); |
36 |
45 |
66 /* we have a special variable, this._leftHandleOldLeft, to keep the |
75 /* we have a special variable, this._leftHandleOldLeft, to keep the |
67 previous position of the handle. We do that to know in what direction |
76 previous position of the handle. We do that to know in what direction |
68 is the handle being dragged |
77 is the handle being dragged |
69 */ |
78 */ |
70 |
79 |
71 var currentX = this.leftHandle.position()["left"]; |
80 var currentX = this.leftHandle.offset().left; |
72 var rightHandleX = Math.floor(this.rightHandle.position()["left"]); |
81 var rightHandleX = Math.floor(this.rightHandle.position()["left"]); |
73 |
82 |
|
83 var container_offset = this.selector.offset().left; |
|
84 |
74 if (Math.floor(ui.position.left) >= rightHandleX - 7) { |
85 if (Math.floor(ui.position.left) >= rightHandleX - 7) { |
75 /* prevent the handle from moving past the right handle */ |
86 /* prevent the handle from moving past the right handle */ |
76 ui.position.left = rightHandleX - 7; |
87 ui.position.left = rightHandleX - 7; |
77 } |
88 } |
78 |
89 |
79 this.zoneWidth = rightHandleX - Math.floor(ui.position.left) - 7; |
90 this.zoneWidth = rightHandleX - Math.floor(ui.position.left) - 7; |
80 this.zoneLeft = Math.floor(ui.position.left) + 8; |
91 this.zoneLeft = Math.floor(ui.position.left) + 8; |
81 |
92 |
82 this.sliceZone.css("width", this.zoneWidth); |
93 this.sliceZone.css("width", this.zoneWidth); |
83 this.sliceZone.css("left", this.zoneLeft + "px"); |
94 this.sliceZone.css("left", this.zoneLeft + "px"); |
84 this._leftHandleOldLeft = Math.floor(this._leftHandleOldLeft); |
95 |
|
96 this._leftHandleOldLeft = ui.position.left; |
85 this.broadcastChanges(); |
97 this.broadcastChanges(); |
86 |
98 |
87 }; |
99 }; |
88 |
100 |
89 /** handle a dragging of the right handle */ |
101 /** handle a dragging of the right handle */ |
93 is the handle being dragged |
105 is the handle being dragged |
94 */ |
106 */ |
95 |
107 |
96 var currentX = this.leftHandle.position()["left"]; |
108 var currentX = this.leftHandle.position()["left"]; |
97 var leftHandleX = Math.floor(this.leftHandle.position()["left"]); |
109 var leftHandleX = Math.floor(this.leftHandle.position()["left"]); |
|
110 |
|
111 var container_offset = this.selector.offset().left + this.selector.width(); |
98 |
112 |
99 if (Math.floor(ui.position.left) < leftHandleX + 7) { |
113 if (Math.floor(ui.position.left) < leftHandleX + 7) { |
100 /* prevent the handle from moving past the right handle */ |
114 /* prevent the handle from moving past the left handle */ |
101 ui.position.left = leftHandleX + 7; |
115 ui.position.left = leftHandleX + 7; |
102 } |
116 } |
103 |
117 |
104 this.zoneWidth = Math.floor(ui.position.left) - (leftHandleX + 7); |
118 this.zoneWidth = Math.floor(ui.position.left) - (leftHandleX + 7); |
105 |
119 |
113 changed |
127 changed |
114 */ |
128 */ |
115 IriSP.SliceWidget.prototype.broadcastChanges = function() { |
129 IriSP.SliceWidget.prototype.broadcastChanges = function() { |
116 var leftPercent = (this.zoneLeft / this.selector.width()) * 100; |
130 var leftPercent = (this.zoneLeft / this.selector.width()) * 100; |
117 var zonePercent = (this.zoneWidth / this.selector.width()) * 100; |
131 var zonePercent = (this.zoneWidth / this.selector.width()) * 100; |
118 |
132 |
119 this._Popcorn.trigger("IriSP.SliceWidget.zoneChange", [leftPercent, zonePercent]); |
133 this._Popcorn.trigger("IriSP.SliceWidget.zoneChange", [leftPercent, zonePercent]); |
120 }; |
134 }; |
121 |
135 |
122 IriSP.SliceWidget.prototype.show = function() { |
136 IriSP.SliceWidget.prototype.show = function() { |
123 this.selector.show(); |
137 this.selector.show(); |