jquery-ui/ui/selectable.js

293 lines
7.1 KiB
JavaScript
Raw Normal View History

/*!
* jQuery UI Selectable @VERSION
2012-07-04 13:08:08 +00:00
* http://jqueryui.com
2008-06-04 02:34:33 +00:00
*
* Copyright jQuery Foundation and other contributors
2012-08-09 14:13:24 +00:00
* Released under the MIT license.
* http://jquery.org/license
2008-06-04 02:34:33 +00:00
*/
//>>label: Selectable
//>>group: Interactions
//>>description: Allows groups of elements to be selected with the mouse.
//>>docs: http://api.jqueryui.com/selectable/
//>>demos: http://jqueryui.com/selectable/
(function( factory ) {
if ( typeof define === "function" && define.amd ) {
// AMD. Register as an anonymous module.
define([
"jquery",
"./core",
"./mouse",
"./widget"
], factory );
} else {
// Browser globals
factory( jQuery );
}
}(function( $ ) {
2008-06-04 02:34:33 +00:00
return $.widget("ui.selectable", $.ui.mouse, {
version: "@VERSION",
options: {
appendTo: "body",
autoRefresh: true,
distance: 0,
filter: "*",
tolerance: "touch",
// callbacks
selected: null,
selecting: null,
start: null,
stop: null,
unselected: null,
unselecting: null
},
_create: function() {
var selectees,
that = this;
2008-06-04 02:34:33 +00:00
this.element.addClass("ui-selectable");
2008-06-04 02:34:33 +00:00
this.dragged = false;
2008-06-04 02:34:33 +00:00
// cache selectee children based on filter
this.refresh = function() {
selectees = $(that.options.filter, that.element[0]);
selectees.addClass("ui-selectee");
2008-06-04 02:34:33 +00:00
selectees.each(function() {
var $this = $(this),
pos = $this.offset();
2008-06-04 02:34:33 +00:00
$.data(this, "selectable-item", {
element: this,
$element: $this,
left: pos.left,
top: pos.top,
right: pos.left + $this.outerWidth(),
bottom: pos.top + $this.outerHeight(),
2008-06-04 02:34:33 +00:00
startselected: false,
selected: $this.hasClass("ui-selected"),
selecting: $this.hasClass("ui-selecting"),
unselecting: $this.hasClass("ui-unselecting")
2008-06-04 02:34:33 +00:00
});
});
};
this.refresh();
2008-06-04 02:34:33 +00:00
this.selectees = selectees.addClass("ui-selectee");
2008-08-17 08:15:49 +00:00
this._mouseInit();
this.helper = $("<div class='ui-selectable-helper'></div>");
2008-06-04 02:34:33 +00:00
},
2012-05-24 19:18:04 +00:00
_destroy: function() {
this.selectees
.removeClass("ui-selectee")
.removeData("selectable-item");
2008-06-04 02:34:33 +00:00
this.element
2012-05-24 19:18:04 +00:00
.removeClass("ui-selectable ui-selectable-disabled");
2008-08-17 08:15:49 +00:00
this._mouseDestroy();
2008-06-04 02:34:33 +00:00
},
_mouseStart: function(event) {
var that = this,
options = this.options;
2013-10-16 18:43:09 +00:00
this.opos = [ event.pageX, event.pageY ];
if (this.options.disabled) {
2008-06-04 02:34:33 +00:00
return;
}
2008-06-04 02:34:33 +00:00
this.selectees = $(options.filter, this.element[0]);
this._trigger("start", event);
$(options.appendTo).append(this.helper);
2008-06-04 02:34:33 +00:00
// position helper (lasso)
this.helper.css({
"left": event.pageX,
"top": event.pageY,
2008-06-04 02:34:33 +00:00
"width": 0,
"height": 0
});
2008-06-04 02:34:33 +00:00
if (options.autoRefresh) {
this.refresh();
}
this.selectees.filter(".ui-selected").each(function() {
2008-06-04 02:34:33 +00:00
var selectee = $.data(this, "selectable-item");
selectee.startselected = true;
if (!event.metaKey && !event.ctrlKey) {
selectee.$element.removeClass("ui-selected");
2008-06-04 02:34:33 +00:00
selectee.selected = false;
selectee.$element.addClass("ui-unselecting");
2008-06-04 02:34:33 +00:00
selectee.unselecting = true;
// selectable UNSELECTING callback
that._trigger("unselecting", event, {
unselecting: selectee.element
});
2008-06-04 02:34:33 +00:00
}
});
$(event.target).parents().addBack().each(function() {
var doSelect,
selectee = $.data(this, "selectable-item");
if (selectee) {
doSelect = (!event.metaKey && !event.ctrlKey) || !selectee.$element.hasClass("ui-selected");
selectee.$element
.removeClass(doSelect ? "ui-unselecting" : "ui-selected")
.addClass(doSelect ? "ui-selecting" : "ui-unselecting");
selectee.unselecting = !doSelect;
selectee.selecting = doSelect;
selectee.selected = doSelect;
// selectable (UN)SELECTING callback
if (doSelect) {
that._trigger("selecting", event, {
selecting: selectee.element
});
} else {
that._trigger("unselecting", event, {
unselecting: selectee.element
});
}
return false;
}
2008-06-04 02:34:33 +00:00
});
2008-06-04 02:34:33 +00:00
},
_mouseDrag: function(event) {
2008-06-04 02:34:33 +00:00
this.dragged = true;
if (this.options.disabled) {
2008-06-04 02:34:33 +00:00
return;
}
var tmp,
that = this,
options = this.options,
x1 = this.opos[0],
y1 = this.opos[1],
x2 = event.pageX,
y2 = event.pageY;
if (x1 > x2) { tmp = x2; x2 = x1; x1 = tmp; }
if (y1 > y2) { tmp = y2; y2 = y1; y1 = tmp; }
2013-10-16 18:43:09 +00:00
this.helper.css({ left: x1, top: y1, width: x2 - x1, height: y2 - y1 });
2008-06-04 02:34:33 +00:00
this.selectees.each(function() {
var selectee = $.data(this, "selectable-item"),
hit = false;
2008-06-04 02:34:33 +00:00
//prevent helper from being selected if appendTo: selectable
if (!selectee || selectee.element === that.element[0]) {
2008-06-04 02:34:33 +00:00
return;
}
if (options.tolerance === "touch") {
2008-06-04 02:34:33 +00:00
hit = ( !(selectee.left > x2 || selectee.right < x1 || selectee.top > y2 || selectee.bottom < y1) );
} else if (options.tolerance === "fit") {
2008-06-04 02:34:33 +00:00
hit = (selectee.left > x1 && selectee.right < x2 && selectee.top > y1 && selectee.bottom < y2);
}
2008-06-04 02:34:33 +00:00
if (hit) {
// SELECT
if (selectee.selected) {
selectee.$element.removeClass("ui-selected");
2008-06-04 02:34:33 +00:00
selectee.selected = false;
}
if (selectee.unselecting) {
selectee.$element.removeClass("ui-unselecting");
2008-06-04 02:34:33 +00:00
selectee.unselecting = false;
}
if (!selectee.selecting) {
selectee.$element.addClass("ui-selecting");
2008-06-04 02:34:33 +00:00
selectee.selecting = true;
// selectable SELECTING callback
that._trigger("selecting", event, {
selecting: selectee.element
});
2008-06-04 02:34:33 +00:00
}
} else {
// UNSELECT
if (selectee.selecting) {
if ((event.metaKey || event.ctrlKey) && selectee.startselected) {
selectee.$element.removeClass("ui-selecting");
2008-06-04 02:34:33 +00:00
selectee.selecting = false;
selectee.$element.addClass("ui-selected");
2008-06-04 02:34:33 +00:00
selectee.selected = true;
} else {
selectee.$element.removeClass("ui-selecting");
2008-06-04 02:34:33 +00:00
selectee.selecting = false;
if (selectee.startselected) {
selectee.$element.addClass("ui-unselecting");
2008-06-04 02:34:33 +00:00
selectee.unselecting = true;
}
// selectable UNSELECTING callback
that._trigger("unselecting", event, {
unselecting: selectee.element
});
2008-06-04 02:34:33 +00:00
}
}
if (selectee.selected) {
if (!event.metaKey && !event.ctrlKey && !selectee.startselected) {
selectee.$element.removeClass("ui-selected");
2008-06-04 02:34:33 +00:00
selectee.selected = false;
selectee.$element.addClass("ui-unselecting");
2008-06-04 02:34:33 +00:00
selectee.unselecting = true;
// selectable UNSELECTING callback
that._trigger("unselecting", event, {
unselecting: selectee.element
});
2008-06-04 02:34:33 +00:00
}
}
}
});
2008-06-04 02:34:33 +00:00
return false;
},
_mouseStop: function(event) {
var that = this;
2008-06-04 02:34:33 +00:00
this.dragged = false;
$(".ui-unselecting", this.element[0]).each(function() {
2008-06-04 02:34:33 +00:00
var selectee = $.data(this, "selectable-item");
selectee.$element.removeClass("ui-unselecting");
2008-06-04 02:34:33 +00:00
selectee.unselecting = false;
selectee.startselected = false;
that._trigger("unselected", event, {
unselected: selectee.element
});
2008-06-04 02:34:33 +00:00
});
$(".ui-selecting", this.element[0]).each(function() {
2008-06-04 02:34:33 +00:00
var selectee = $.data(this, "selectable-item");
selectee.$element.removeClass("ui-selecting").addClass("ui-selected");
2008-06-04 02:34:33 +00:00
selectee.selecting = false;
selectee.selected = true;
selectee.startselected = true;
that._trigger("selected", event, {
selected: selectee.element
});
2008-06-04 02:34:33 +00:00
});
this._trigger("stop", event);
2008-06-04 02:34:33 +00:00
this.helper.remove();
2008-06-04 02:34:33 +00:00
return false;
}
});
2008-06-04 02:34:33 +00:00
}));