4 //Make nodes selectable by expression
\r
5 $.extend($.expr[':'], { selectable: "(' '+a.className+' ').indexOf(' ui-selectable ')" });
\r
6 $.extend($.expr[':'], { selectee: "(' '+a.className+' ').indexOf(' ui-selectee ')" });
\r
8 $.fn.selectable = function(o) {
\r
9 return this.each(function() {
\r
10 if (!$(this).is(".ui-selectable")) new $.ui.selectable(this, o);
\r
14 $.ui.selectable = function(el, o) {
\r
19 var o = o || {}; $.extend(options, o); //Extend and copy options
\r
20 this.element = el; var self = this; //Do bindings
\r
21 self.dragged = false;
\r
24 helper: function() { return $(document.createElement('div')).css({border:'1px dotted black'}); },
\r
25 _start: function(h,p,c,t,e) {
\r
26 self.start.apply(t, [self, e]); // Trigger the start callback
\r
28 _drag: function(h,p,c,t,e) {
\r
29 self.dragged = true;
\r
30 self.drag.apply(t, [self, e]); // Trigger the drag callback
\r
32 _stop: function(h,p,c,t,e) {
\r
33 self.stop.apply(t, [self, e]); // Trigger the end callback
\r
34 self.dragged = false;
\r
38 //Initialize mouse interaction
\r
39 this.mouse = new $.ui.mouseInteraction(el, options);
\r
41 //Add the class for themeing
\r
42 $(this.element).addClass("ui-selectable");
\r
43 $(this.element).children(options.filter).addClass("ui-selectee");
\r
47 $.extend($.ui.selectable.prototype, {
\r
49 start: function(self, ev) {
\r
50 $(self.mouse.helper).css({'z-index': 100, position: 'absolute', left: ev.clientX, top: ev.clientY, width:0, height: 0});
\r
52 if ($(ev.target).is('.ui-selected')) {
\r
53 $(ev.target).removeClass('ui-selected').addClass('ui-unselecting');
\r
54 $(self.element).triggerHandler("selectableunselecting", [ev, {
\r
55 selectable: self.element,
\r
56 unselecting: ev.target,
\r
57 options: this.options
\r
58 }], this.options.unselecting);
\r
61 self.unselecting(self, ev, this.options);
\r
62 self.selectingTarget(self, ev, this.options);
\r
65 drag: function(self, ev) {
\r
66 var x1 = self.mouse.opos[0], y1 = self.mouse.opos[1], x2 = ev.pageX, y2 = ev.pageY;
\r
67 if (x1 > x2) { var tmp = x2; x2 = x1; x1 = tmp; }
\r
68 if (y1 > y2) { var tmp = y2; y2 = y1; y1 = tmp; }
\r
69 $(self.mouse.helper).css({left: x1, top: y1, width: x2-x1, height: y2-y1});
\r
70 self.selectingTarget(self, ev, this.options);
\r
72 stop: function(self, ev) {
\r
73 var options = this.options;
\r
74 $('.ui-selecting', self.element).each(function() {
\r
75 $(this).removeClass('ui-selecting').addClass('ui-selected');
\r
76 $(self.element).triggerHandler("selectableselected", [ev, {
\r
77 selectable: self.element,
\r
80 }], options.selected);
\r
82 $('.ui-unselecting', self.element).each(function() {
\r
83 $(this).removeClass('ui-unselecting');
\r
84 $(self.element).triggerHandler("selectableunselected", [ev, {
\r
85 selectable: self.element,
\r
88 }], options.unselected);
\r
91 unselecting: function(self, ev, options) {
\r
92 $('.ui-selected', self.element).each(function() {
\r
93 if (this != ev.target) {
\r
94 $(this).removeClass('ui-selected').addClass('ui-unselecting');
\r
95 $(self.element).triggerHandler("selectableunselecting", [ev, {
\r
96 selectable: self.element,
\r
99 }], options.unselecting);
\r
103 selectingTarget: function(self, ev, options) {
\r
104 var target = $(ev.target);
\r
105 if (target.is('.ui-selectee:not(.ui-selecting)')) {
\r
106 target.removeClass('ui-selected').removeClass('ui-unselecting').addClass('ui-selecting');
\r
107 $(self.element).triggerHandler("selectableselecting", [ev, {
\r
108 selectable: self.element,
\r
109 selecting: ev.target,
\r
111 }], options.selecting);
\r