jquery-ui/ui/widgets/selectable.js

318 lines
7.9 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 OpenJS 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/
//>>css.structure: ../../themes/base/selectable.css
2015-08-24 12:58:20 +00:00
( function( factory ) {
"use strict";
if ( typeof define === "function" && define.amd ) {
// AMD. Register as an anonymous module.
2015-08-24 12:58:20 +00:00
define( [
"jquery",
"./mouse",
"../version",
"../widget"
], factory );
} else {
// Browser globals
factory( jQuery );
}
} )( function( $ ) {
"use strict";
2008-06-04 02:34:33 +00:00
2015-08-24 12:58:20 +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 that = this;
this._addClass( "ui-selectable" );
2008-06-04 02:34:33 +00:00
this.dragged = false;
// Cache selectee children based on filter
2008-06-04 02:34:33 +00:00
this.refresh = function() {
that.elementPos = $( that.element[ 0 ] ).offset();
2015-08-24 12:58:20 +00:00
that.selectees = $( that.options.filter, that.element[ 0 ] );
that._addClass( that.selectees, "ui-selectee" );
2015-08-24 12:58:20 +00:00
that.selectees.each( function() {
var $this = $( this ),
selecteeOffset = $this.offset(),
pos = {
left: selecteeOffset.left - that.elementPos.left,
top: selecteeOffset.top - that.elementPos.top
};
2015-08-24 12:58:20 +00:00
$.data( this, "selectable-item", {
2008-06-04 02:34:33 +00:00
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,
2015-08-24 12:58:20 +00:00
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-08-17 08:15:49 +00:00
this._mouseInit();
2015-08-24 12:58:20 +00:00
this.helper = $( "<div>" );
this._addClass( this.helper, "ui-selectable-helper" );
2008-06-04 02:34:33 +00:00
},
2012-05-24 19:18:04 +00:00
_destroy: function() {
2015-08-24 12:58:20 +00:00
this.selectees.removeData( "selectable-item" );
2008-08-17 08:15:49 +00:00
this._mouseDestroy();
2008-06-04 02:34:33 +00:00
},
2015-08-24 12:58:20 +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 ];
this.elementPos = $( this.element[ 0 ] ).offset();
2015-08-24 12:58:20 +00:00
if ( this.options.disabled ) {
2008-06-04 02:34:33 +00:00
return;
}
2015-08-24 12:58:20 +00:00
this.selectees = $( options.filter, this.element[ 0 ] );
2015-08-24 12:58:20 +00:00
this._trigger( "start", event );
$( options.appendTo ).append( this.helper );
2008-06-04 02:34:33 +00:00
// position helper (lasso)
2015-08-24 12:58:20 +00:00
this.helper.css( {
"left": event.pageX,
"top": event.pageY,
2008-06-04 02:34:33 +00:00
"width": 0,
"height": 0
2015-08-24 12:58:20 +00:00
} );
2015-08-24 12:58:20 +00:00
if ( options.autoRefresh ) {
2008-06-04 02:34:33 +00:00
this.refresh();
}
2015-08-24 12:58:20 +00:00
this.selectees.filter( ".ui-selected" ).each( function() {
var selectee = $.data( this, "selectable-item" );
2008-06-04 02:34:33 +00:00
selectee.startselected = true;
2015-08-24 12:58:20 +00:00
if ( !event.metaKey && !event.ctrlKey ) {
that._removeClass( selectee.$element, "ui-selected" );
2008-06-04 02:34:33 +00:00
selectee.selected = false;
that._addClass( selectee.$element, "ui-unselecting" );
2008-06-04 02:34:33 +00:00
selectee.unselecting = true;
2015-08-24 12:58:20 +00:00
2008-06-04 02:34:33 +00:00
// selectable UNSELECTING callback
2015-08-24 12:58:20 +00:00
that._trigger( "unselecting", event, {
unselecting: selectee.element
2015-08-24 12:58:20 +00:00
} );
2008-06-04 02:34:33 +00:00
}
2015-08-24 12:58:20 +00:00
} );
2015-08-24 12:58:20 +00:00
$( event.target ).parents().addBack().each( function() {
var doSelect,
2015-08-24 12:58:20 +00:00
selectee = $.data( this, "selectable-item" );
if ( selectee ) {
doSelect = ( !event.metaKey && !event.ctrlKey ) ||
!selectee.$element.hasClass( "ui-selected" );
that._removeClass( selectee.$element, doSelect ? "ui-unselecting" : "ui-selected" )
._addClass( selectee.$element, doSelect ? "ui-selecting" : "ui-unselecting" );
selectee.unselecting = !doSelect;
selectee.selecting = doSelect;
selectee.selected = doSelect;
2015-08-24 12:58:20 +00:00
// selectable (UN)SELECTING callback
2015-08-24 12:58:20 +00:00
if ( doSelect ) {
that._trigger( "selecting", event, {
selecting: selectee.element
2015-08-24 12:58:20 +00:00
} );
} else {
2015-08-24 12:58:20 +00:00
that._trigger( "unselecting", event, {
unselecting: selectee.element
2015-08-24 12:58:20 +00:00
} );
}
return false;
}
2015-08-24 12:58:20 +00:00
} );
2008-06-04 02:34:33 +00:00
},
2015-08-24 12:58:20 +00:00
_mouseDrag: function( event ) {
2008-06-04 02:34:33 +00:00
this.dragged = true;
2015-08-24 12:58:20 +00:00
if ( this.options.disabled ) {
2008-06-04 02:34:33 +00:00
return;
}
var tmp,
that = this,
options = this.options,
2015-08-24 12:58:20 +00:00
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;
}
2015-08-24 12:58:20 +00:00
this.helper.css( { left: x1, top: y1, width: x2 - x1, height: y2 - y1 } );
2015-08-24 12:58:20 +00:00
this.selectees.each( function() {
var selectee = $.data( this, "selectable-item" ),
hit = false,
offset = {};
2008-06-04 02:34:33 +00:00
//prevent helper from being selected if appendTo: selectable
2015-08-24 12:58:20 +00:00
if ( !selectee || selectee.element === that.element[ 0 ] ) {
2008-06-04 02:34:33 +00:00
return;
}
offset.left = selectee.left + that.elementPos.left;
offset.right = selectee.right + that.elementPos.left;
offset.top = selectee.top + that.elementPos.top;
offset.bottom = selectee.bottom + that.elementPos.top;
2015-08-24 12:58:20 +00:00
if ( options.tolerance === "touch" ) {
hit = ( !( offset.left > x2 || offset.right < x1 || offset.top > y2 ||
offset.bottom < y1 ) );
2015-08-24 12:58:20 +00:00
} else if ( options.tolerance === "fit" ) {
hit = ( offset.left > x1 && offset.right < x2 && offset.top > y1 &&
offset.bottom < y2 );
2008-06-04 02:34:33 +00:00
}
2015-08-24 12:58:20 +00:00
if ( hit ) {
2008-06-04 02:34:33 +00:00
// SELECT
2015-08-24 12:58:20 +00:00
if ( selectee.selected ) {
that._removeClass( selectee.$element, "ui-selected" );
2008-06-04 02:34:33 +00:00
selectee.selected = false;
}
2015-08-24 12:58:20 +00:00
if ( selectee.unselecting ) {
that._removeClass( selectee.$element, "ui-unselecting" );
2008-06-04 02:34:33 +00:00
selectee.unselecting = false;
}
2015-08-24 12:58:20 +00:00
if ( !selectee.selecting ) {
that._addClass( selectee.$element, "ui-selecting" );
2008-06-04 02:34:33 +00:00
selectee.selecting = true;
2015-08-24 12:58:20 +00:00
2008-06-04 02:34:33 +00:00
// selectable SELECTING callback
2015-08-24 12:58:20 +00:00
that._trigger( "selecting", event, {
selecting: selectee.element
2015-08-24 12:58:20 +00:00
} );
2008-06-04 02:34:33 +00:00
}
} else {
2015-08-24 12:58:20 +00:00
2008-06-04 02:34:33 +00:00
// UNSELECT
2015-08-24 12:58:20 +00:00
if ( selectee.selecting ) {
if ( ( event.metaKey || event.ctrlKey ) && selectee.startselected ) {
that._removeClass( selectee.$element, "ui-selecting" );
2008-06-04 02:34:33 +00:00
selectee.selecting = false;
that._addClass( selectee.$element, "ui-selected" );
2008-06-04 02:34:33 +00:00
selectee.selected = true;
} else {
that._removeClass( selectee.$element, "ui-selecting" );
2008-06-04 02:34:33 +00:00
selectee.selecting = false;
2015-08-24 12:58:20 +00:00
if ( selectee.startselected ) {
that._addClass( selectee.$element, "ui-unselecting" );
2008-06-04 02:34:33 +00:00
selectee.unselecting = true;
}
2015-08-24 12:58:20 +00:00
2008-06-04 02:34:33 +00:00
// selectable UNSELECTING callback
2015-08-24 12:58:20 +00:00
that._trigger( "unselecting", event, {
unselecting: selectee.element
2015-08-24 12:58:20 +00:00
} );
2008-06-04 02:34:33 +00:00
}
}
2015-08-24 12:58:20 +00:00
if ( selectee.selected ) {
if ( !event.metaKey && !event.ctrlKey && !selectee.startselected ) {
that._removeClass( selectee.$element, "ui-selected" );
2008-06-04 02:34:33 +00:00
selectee.selected = false;
that._addClass( selectee.$element, "ui-unselecting" );
2008-06-04 02:34:33 +00:00
selectee.unselecting = true;
2015-08-24 12:58:20 +00:00
2008-06-04 02:34:33 +00:00
// selectable UNSELECTING callback
2015-08-24 12:58:20 +00:00
that._trigger( "unselecting", event, {
unselecting: selectee.element
2015-08-24 12:58:20 +00:00
} );
2008-06-04 02:34:33 +00:00
}
}
}
2015-08-24 12:58:20 +00:00
} );
2008-06-04 02:34:33 +00:00
return false;
},
2015-08-24 12:58:20 +00:00
_mouseStop: function( event ) {
var that = this;
2008-06-04 02:34:33 +00:00
this.dragged = false;
2015-08-24 12:58:20 +00:00
$( ".ui-unselecting", this.element[ 0 ] ).each( function() {
var selectee = $.data( this, "selectable-item" );
that._removeClass( selectee.$element, "ui-unselecting" );
2008-06-04 02:34:33 +00:00
selectee.unselecting = false;
selectee.startselected = false;
2015-08-24 12:58:20 +00:00
that._trigger( "unselected", event, {
unselected: selectee.element
2015-08-24 12:58:20 +00:00
} );
} );
$( ".ui-selecting", this.element[ 0 ] ).each( function() {
var selectee = $.data( this, "selectable-item" );
that._removeClass( selectee.$element, "ui-selecting" )
._addClass( selectee.$element, "ui-selected" );
2008-06-04 02:34:33 +00:00
selectee.selecting = false;
selectee.selected = true;
selectee.startselected = true;
2015-08-24 12:58:20 +00:00
that._trigger( "selected", event, {
selected: selectee.element
2015-08-24 12:58:20 +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;
}
2015-08-24 12:58:20 +00:00
} );
2008-06-04 02:34:33 +00:00
} );