3 //If the UI scope is not availalable, add it
\r
6 //Add methods that are vital for all mouse interaction stuff (plugin registering)
\r
9 add: function(w, c, o, p) {
\r
10 var a = $.ui[w].prototype; if(!a.plugins[c]) a.plugins[c] = [];
\r
11 a.plugins[c].push([o,p]);
\r
13 call: function(instance, name, arguments) {
\r
14 var c = instance.plugins[name]; if(!c) return;
\r
15 var o = instance.interaction ? instance.interaction.options : instance.options;
\r
16 var e = instance.interaction ? instance.interaction.element : instance.element;
\r
18 for (var i = 0; i < c.length; i++) {
\r
19 if (o[c[i][0]]) c[i][1].apply(e, arguments);
\r
25 $.fn.mouseInteractionDestroy = function() {
\r
26 this.each(function() {
\r
27 if($.data(this, "ui-mouse")) $.data(this, "ui-mouse").destroy();
\r
31 $.ui.mouseInteraction = function(el,o) {
\r
35 $.data(this.element, "ui-mouse", this);
\r
38 $.extend(this.options, o);
\r
39 $.extend(this.options, {
\r
40 handle : o.handle ? ($(o.handle, el)[0] ? $(o.handle, el) : $(el)) : $(el),
\r
41 helper: o.helper || 'original',
\r
42 preventionDistance: o.preventionDistance || 0,
\r
43 dragPrevention: o.dragPrevention ? o.dragPrevention.toLowerCase().split(',') : ['input','textarea','button','select','option'],
\r
44 cursorAt: { top: ((o.cursorAt && o.cursorAt.top) ? o.cursorAt.top : 0), left: ((o.cursorAt && o.cursorAt.left) ? o.cursorAt.left : 0), bottom: ((o.cursorAt && o.cursorAt.bottom) ? o.cursorAt.bottom : 0), right: ((o.cursorAt && o.cursorAt.right) ? o.cursorAt.right : 0) },
\r
45 cursorAtIgnore: (!o.cursorAt) ? true : false, //Internal property
\r
46 appendTo: o.appendTo || 'parent'
\r
48 o = this.options; //Just Lazyness
\r
50 if(!this.options.nonDestructive && (o.helper == 'clone' || o.helper == 'original')) {
\r
52 // Let's save the margins for better reference
\r
54 top: parseInt($(el).css('marginTop')) || 0,
\r
55 left: parseInt($(el).css('marginLeft')) || 0,
\r
56 bottom: parseInt($(el).css('marginBottom')) || 0,
\r
57 right: parseInt($(el).css('marginRight')) || 0
\r
60 // We have to add margins to our cursorAt
\r
61 if(o.cursorAt.top != 0) o.cursorAt.top = o.margins.top;
\r
62 if(o.cursorAt.left != 0) o.cursorAt.left += o.margins.left;
\r
63 if(o.cursorAt.bottom != 0) o.cursorAt.bottom += o.margins.bottom;
\r
64 if(o.cursorAt.right != 0) o.cursorAt.right += o.margins.right;
\r
67 if(o.helper == 'original')
\r
68 o.wasPositioned = $(el).css('position');
\r
71 o.margins = { top: 0, left: 0, right: 0, bottom: 0 };
\r
75 this.mousedownfunc = function(e) { // Bind the mousedown event
\r
76 return self.click.apply(self, [e]);
\r
78 o.handle.bind('mousedown', this.mousedownfunc);
\r
80 //Prevent selection of text when starting the drag in IE
\r
81 if($.browser.msie) $(this.element).attr('unselectable', 'on');
\r
85 $.extend($.ui.mouseInteraction.prototype, {
\r
87 currentTarget: null,
\r
92 destroy: function() {
\r
93 this.options.handle.unbind('mousedown', this.mousedownfunc);
\r
95 trigger: function(e) {
\r
96 return this.click.apply(this, arguments);
\r
98 click: function(e) {
\r
100 var o = this.options;
\r
103 if(e.which != 1) return true; //only left click starts dragging
\r
105 // Prevent execution on defined elements
\r
106 var targetName = (e.target) ? e.target.nodeName.toLowerCase() : e.srcElement.nodeName.toLowerCase();
\r
107 for(var i=0;i<o.dragPrevention.length;i++) {
\r
108 if(targetName == o.dragPrevention[i]) return true;
\r
111 //Prevent execution on condition
\r
112 if(o.startCondition && !o.startCondition.apply(this, [e])) return true;
\r
115 this.mouseup = function(e) { return self.stop.apply(self, [e]); }
\r
116 this.mousemove = function(e) { return self.drag.apply(self, [e]); }
\r
118 var initFunc = function() { //This function get's called at bottom or after timeout
\r
119 $(document).bind('mouseup', self.mouseup);
\r
120 $(document).bind('mousemove', self.mousemove);
\r
121 self.opos = [e.pageX,e.pageY]; // Get the original mouse position
\r
124 if(o.preventionTimeout) { //use prevention timeout
\r
125 if(this.timer) clearInterval(this.timer);
\r
126 this.timer = setTimeout(function() { initFunc(); }, o.preventionTimeout);
\r
134 start: function(e) {
\r
136 var o = this.options; var a = this.element;
\r
137 o.co = $(a).offset(); //get the current offset
\r
139 this.helper = typeof o.helper == 'function' ? $(o.helper.apply(a, [e,this]))[0] : (o.helper == 'clone' ? $(a).clone()[0] : a);
\r
141 if(o.appendTo == 'parent') { // Let's see if we have a positioned parent
\r
142 var cp = a.parentNode;
\r
144 if(cp.style && ($(cp).css('position') == 'relative' || $(cp).css('position') == 'absolute')) {
\r
146 o.po = $(cp).offset();
\r
147 o.ppOverflow = !!($(o.pp).css('overflow') == 'auto' || $(o.pp).css('overflow') == 'scroll'); //TODO!
\r
150 cp = cp.parentNode ? cp.parentNode : null;
\r
153 if(!o.pp) o.po = { top: 0, left: 0 };
\r
156 this.pos = [this.opos[0],this.opos[1]]; //Use the relative position
\r
157 this.rpos = [this.pos[0],this.pos[1]]; //Save the absolute position
\r
159 if(o.cursorAtIgnore) { // If we want to pick the element where we clicked, we borrow cursorAt and add margins
\r
160 o.cursorAt.left = this.pos[0] - o.co.left + o.margins.left;
\r
161 o.cursorAt.top = this.pos[1] - o.co.top + o.margins.top;
\r
166 if(o.pp) { // If we have a positioned parent, we pick the draggable relative to it
\r
167 this.pos[0] -= o.po.left;
\r
168 this.pos[1] -= o.po.top;
\r
171 this.slowMode = (o.cursorAt && (o.cursorAt.top-o.margins.top > 0 || o.cursorAt.bottom-o.margins.bottom > 0) && (o.cursorAt.left-o.margins.left > 0 || o.cursorAt.right-o.margins.right > 0)) ? true : false; //If cursorAt is within the helper, set slowMode to true
\r
173 if(!o.nonDestructive) $(this.helper).css('position', 'absolute');
\r
174 if(o.helper != 'original') $(this.helper).appendTo((o.appendTo == 'parent' ? a.parentNode : o.appendTo)).show();
\r
176 // Remap right/bottom properties for cursorAt to left/top
\r
177 if(o.cursorAt.right && !o.cursorAt.left) o.cursorAt.left = this.helper.offsetWidth+o.margins.right+o.margins.left - o.cursorAt.right;
\r
178 if(o.cursorAt.bottom && !o.cursorAt.top) o.cursorAt.top = this.helper.offsetHeight+o.margins.top+o.margins.bottom - o.cursorAt.bottom;
\r
182 if(o._start) o._start.apply(a, [this.helper, this.pos, o.cursorAt, this, e]); // Trigger the start callback
\r
183 this.helperSize = { width: outerWidth(this.helper), height: outerHeight(this.helper) }; //Set helper size property
\r
187 stop: function(e) {
\r
189 var o = this.options; var a = this.element; var self = this;
\r
191 $(document).unbind('mouseup', self.mouseup);
\r
192 $(document).unbind('mousemove', self.mousemove);
\r
194 if(this.init == false) return this.opos = this.pos = null;
\r
195 if(o._beforeStop) o._beforeStop.apply(a, [this.helper, this.pos, o.cursorAt, this, e]);
\r
197 if(this.helper != a && !o.beQuietAtEnd) { // Remove helper, if it's not the original node
\r
198 $(this.helper).remove(); this.helper = null;
\r
201 if(!o.beQuietAtEnd) {
\r
202 //if(o.wasPositioned) $(a).css('position', o.wasPositioned);
\r
203 if(o._stop) o._stop.apply(a, [this.helper, this.pos, o.cursorAt, this, e]);
\r
207 this.opos = this.pos = null;
\r
211 drag: function(e) {
\r
213 if (!this.opos || ($.browser.msie && !e.button)) return this.stop.apply(this, [e]); // check for IE mouseup when moving into the document again
\r
214 var o = this.options;
\r
216 this.pos = [e.pageX,e.pageY]; //relative mouse position
\r
217 if(this.rpos && this.rpos[0] == this.pos[0] && this.rpos[1] == this.pos[1]) return false;
\r
218 this.rpos = [this.pos[0],this.pos[1]]; //absolute mouse position
\r
220 if(o.pp) { //If we have a positioned parent, use a relative position
\r
221 this.pos[0] -= o.po.left;
\r
222 this.pos[1] -= o.po.top;
\r
225 if( (Math.abs(this.rpos[0]-this.opos[0]) > o.preventionDistance || Math.abs(this.rpos[1]-this.opos[1]) > o.preventionDistance) && this.init == false) //If position is more than x pixels from original position, start dragging
\r
226 this.start.apply(this,[e]);
\r
228 if(this.init == false) return false;
\r
231 if(o._drag) o._drag.apply(this.element, [this.helper, this.pos, o.cursorAt, this, e]);
\r
237 var num = function(el, prop) {
\r
238 return parseInt($.css(el.jquery?el[0]:el,prop))||0;
\r
240 function outerWidth(el) {
\r
241 var $el = $(el), ow = $el.width();
\r
242 for (var i = 0, props = ['borderLeftWidth', 'paddingLeft', 'paddingRight', 'borderRightWidth']; i < props.length; i++)
\r
243 ow += num($el, props[i]);
\r
246 function outerHeight(el) {
\r
247 var $el = $(el), oh = $el.width();
\r
248 for (var i = 0, props = ['borderTopWidth', 'paddingTop', 'paddingBottom', 'borderBottomWidth']; i < props.length; i++)
\r
249 oh += num($el, props[i]);
\r