library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Selectable: Style updates

Browse Source 
Ref #14246
This commit is contained in:
Alexander Schmitz 2015-08-24 08:58:20 -04:00
parent e583a512d7
commit 9a015df3a3
5 changed files with 182 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
tests/unit/selectable/common.js
View File

@ -24,6 +24,6 @@ common.testWidget( "selectable", {
unselected: null,
unselecting: null
}
});
} );
} );

30
tests/unit/selectable/events.js
View File

@ -4,37 +4,37 @@ define( [
"ui/widgets/selectable"
], function( $, testHelpers ) {
module("selectable: events");
module( "selectable: events" );
test( "start", function() {
expect( 2 );
var el = $("#selectable1");
el.selectable({
var el = $( "#selectable1" );
el.selectable( {
start: function() {
ok( true, "drag fired start callback" );
equal( this, el[0], "context of callback" );
equal( this, el[ 0 ], "context of callback" );
}
});
} );
el.simulate( "drag", {
dx: 20,
dy: 20
});
});
} );
} );
test( "stop", function() {
expect( 2 );
var el = $("#selectable1");
el.selectable({
var el = $( "#selectable1" );
el.selectable( {
start: function() {
ok( true, "drag fired stop callback" );
equal( this, el[0], "context of callback" );
equal( this, el[ 0 ], "context of callback" );
}
});
} );
el.simulate( "drag", {
dx: 20,
dy: 20
});
});
} );
} );
test( "mousedown: initial position of helper", function() {
expect( 2 );
@ -48,7 +48,7 @@ test( "mousedown: initial position of helper", function() {
element.simulate( "mousedown", {
clientX: 10,
clientY: 10
});
} );
helperOffset = $( ".ui-selectable-helper" ).offset();
ok( helperOffset.top, 110, "Scroll top should be accounted for." );
@ -58,6 +58,6 @@ test( "mousedown: initial position of helper", function() {
element.simulate( "mouseup" );
contentToForceScroll.remove();
$( window ).scrollTop( 0 ).scrollLeft( 0 );
});
} );
} );

90
tests/unit/selectable/methods.js
View File

@ -3,73 +3,73 @@ define( [
"ui/widgets/selectable"
], function( $ ) {
module("selectable: methods");
module( "selectable: methods" );
test("init", function() {
test( "init", function() {
expect( 5 );
$("<div></div>").appendTo("body").selectable().remove();
ok(true, ".selectable() called on element");
$( "<div></div>" ).appendTo( "body" ).selectable().remove();
ok( true, ".selectable() called on element" );
$([]).selectable().remove();
ok(true, ".selectable() called on empty collection");
$( [] ).selectable().remove();
ok( true, ".selectable() called on empty collection" );
$("<div></div>").selectable().remove();
ok(true, ".selectable() called on disconnected DOMElement");
$( "<div></div>" ).selectable().remove();
ok( true, ".selectable() called on disconnected DOMElement" );
var el = $("<div></div>").selectable();
el.selectable("option", "foo");
var el = $( "<div></div>" ).selectable();
el.selectable( "option", "foo" );
el.remove();
ok(true, "arbitrary option getter after init");
ok( true, "arbitrary option getter after init" );
$("<div></div>").selectable().selectable("option", "foo", "bar").remove();
ok(true, "arbitrary option setter after init");
});
$( "<div></div>" ).selectable().selectable( "option", "foo", "bar" ).remove();
ok( true, "arbitrary option setter after init" );
} );
test("destroy", function() {
test( "destroy", function() {
expect( 4 );
$("<div></div>").appendTo("body").selectable().selectable("destroy").remove();
ok(true, ".selectable('destroy') called on element");
$( "<div></div>" ).appendTo( "body" ).selectable().selectable( "destroy" ).remove();
ok( true, ".selectable('destroy') called on element" );
$([]).selectable().selectable("destroy").remove();
ok(true, ".selectable('destroy') called on empty collection");
$( [] ).selectable().selectable( "destroy" ).remove();
ok( true, ".selectable('destroy') called on empty collection" );
$("<div></div>").selectable().selectable("destroy").remove();
ok(true, ".selectable('destroy') called on disconnected DOMElement");
$( "<div></div>" ).selectable().selectable( "destroy" ).remove();
ok( true, ".selectable('destroy') called on disconnected DOMElement" );
var expected = $("<div></div>").selectable(),
actual = expected.selectable("destroy");
equal(actual, expected, "destroy is chainable");
});
var expected = $( "<div></div>" ).selectable(),
actual = expected.selectable( "destroy" );
equal( actual, expected, "destroy is chainable" );
} );
test("enable", function() {
expect(3);
test( "enable", function() {
expect( 3 );
var expected, actual,
fired = false,
el = $("#selectable1");
el = $( "#selectable1" );
el.selectable({
el.selectable( {
disabled: true,
start: function() { fired = true; }
});
} );
el.simulate( "drag", {
dx: 20,
dy: 20
});
equal(fired, false, "start fired");
el.selectable("enable");
} );
equal( fired, false, "start fired" );
el.selectable( "enable" );
el.simulate( "drag", {
dx: 20,
dy: 20
});
equal(fired, true, "start fired");
el.selectable("destroy");
} );
equal( fired, true, "start fired" );
el.selectable( "destroy" );
expected = $("<div></div>").selectable();
actual = expected.selectable("enable");
equal(actual, expected, "enable is chainable");
});
expected = $( "<div></div>" ).selectable();
actual = expected.selectable( "enable" );
equal( actual, expected, "enable is chainable" );
} );
test( "disable", function( assert ) {
expect( 6 );
@ -77,16 +77,16 @@ test( "disable", function( assert ) {
fired = false,
element = $( "#selectable1" );
element.selectable({
element.selectable( {
disabled: false,
start: function() {
fired = true;
}
});
} );
element.simulate( "drag", {
dx: 20,
dy: 20
});
} );
equal( fired, true, "start fired" );
chainable = element.selectable( "disable" );
@ -95,7 +95,7 @@ test( "disable", function( assert ) {
element.simulate( "drag", {
dx: 20,
dy: 20
});
} );
equal( fired, false, "start fired" );
assert.lacksClasses( element.selectable( "widget" ), "ui-state-disabled" );
@ -106,6 +106,6 @@ test( "disable", function( assert ) {
element.selectable( "destroy" );
equal( chainable, element, "disable is chainable" );
});
} );
} );

54
tests/unit/selectable/options.js
View File

@ -3,62 +3,62 @@ define( [
"ui/widgets/selectable"
], function( $ ) {
module("selectable: options");
module( "selectable: options" );
test("autoRefresh", function() {
expect(3);
test( "autoRefresh", function() {
expect( 3 );
var actual = 0,
el = $("#selectable1"),
sel = $("*", el),
el = $( "#selectable1" ),
sel = $( "*", el ),
selected = function() { actual += 1; };
el = $("#selectable1").selectable({ autoRefresh: false, selected: selected });
el = $( "#selectable1" ).selectable( { autoRefresh: false, selected: selected } );
sel.hide();
el.simulate( "drag", {
dx: 1000,
dy: 1000
});
equal(actual, sel.length);
el.selectable("destroy");
} );
equal( actual, sel.length );
el.selectable( "destroy" );
actual = 0;
sel.show();
el = $("#selectable1").selectable({ autoRefresh: true, selected: selected });
el = $( "#selectable1" ).selectable( { autoRefresh: true, selected: selected } );
sel.hide();
el.simulate( "drag", {
dx: 1000,
dy: 1000
});
equal(actual, 0);
} );
equal( actual, 0 );
sel.show();
$( sel[ 0 ] ).simulate( "drag", {
dx: 1000,
dy: 1000
});
equal(actual, sel.length);
} );
equal( actual, sel.length );
el.selectable("destroy");
el.selectable( "destroy" );
sel.show();
});
} );
test("filter", function() {
expect(2);
test( "filter", function() {
expect( 2 );
var actual =0,
el = $("#selectable1"),
sel = $("*", el),
var actual = 0,
el = $( "#selectable1" ),
sel = $( "*", el ),
selected = function() { actual += 1; };
el = $("#selectable1").selectable({ filter: ".special", selected: selected });
el = $( "#selectable1" ).selectable( { filter: ".special", selected: selected } );
el.simulate( "drag", {
dx: 1000,
dy: 1000
});
ok(sel.length !== 1, "this test assumes more than 1 selectee");
equal(actual, 1);
el.selectable("destroy");
});
} );
ok( sel.length !== 1, "this test assumes more than 1 selectee" );
equal( actual, 1 );
el.selectable( "destroy" );
} );
} );

180
ui/widgets/selectable.js
View File

@ -14,11 +14,11 @@
//>>demos: http://jqueryui.com/selectable/
//>>css.structure: ../themes/base/selectable.css
(function( factory ) {
( function( factory ) {
if ( typeof define === "function" && define.amd ) {
// AMD. Register as an anonymous module.
define([
define( [
"jquery",
"./mouse",
"../version",
@ -29,9 +29,9 @@
// Browser globals
factory( jQuery );
}
}(function( $ ) {
}( function( $ ) {
return $.widget("ui.selectable", $.ui.mouse, {
return $.widget( "ui.selectable", $.ui.mouse, {
version: "@VERSION",
options: {
appendTo: "body",
@ -57,12 +57,12 @@ return $.widget("ui.selectable", $.ui.mouse, {
// Cache selectee children based on filter
this.refresh = function() {
that.selectees = $(that.options.filter, that.element[0]);
that.selectees = $( that.options.filter, that.element[ 0 ] );
that._addClass( that.selectees, "ui-selectee" );
that.selectees.each(function() {
var $this = $(this),
that.selectees.each( function() {
var $this = $( this ),
pos = $this.offset();
$.data(this, "selectable-item", {
$.data( this, "selectable-item", {
element: this,
$element: $this,
left: pos.left,
@ -70,150 +70,156 @@ return $.widget("ui.selectable", $.ui.mouse, {
right: pos.left + $this.outerWidth(),
bottom: pos.top + $this.outerHeight(),
startselected: false,
selected: $this.hasClass("ui-selected"),
selecting: $this.hasClass("ui-selecting"),
unselecting: $this.hasClass("ui-unselecting")
});
});
selected: $this.hasClass( "ui-selected" ),
selecting: $this.hasClass( "ui-selecting" ),
unselecting: $this.hasClass( "ui-unselecting" )
} );
} );
};
this.refresh();
this._mouseInit();
this.helper = $("<div>");
this.helper = $( "<div>" );
this._addClass( this.helper, "ui-selectable-helper" );
},
_destroy: function() {
this.selectees.removeData("selectable-item");
this.selectees.removeData( "selectable-item" );
this._mouseDestroy();
},
_mouseStart: function(event) {
_mouseStart: function( event ) {
var that = this,
options = this.options;
this.opos = [ event.pageX, event.pageY ];
if (this.options.disabled) {
if ( this.options.disabled ) {
return;
}
this.selectees = $(options.filter, this.element[0]);
this.selectees = $( options.filter, this.element[ 0 ] );
this._trigger("start", event);
this._trigger( "start", event );
$( options.appendTo ).append( this.helper );
$(options.appendTo).append(this.helper);
// position helper (lasso)
this.helper.css({
this.helper.css( {
"left": event.pageX,
"top": event.pageY,
"width": 0,
"height": 0
});
} );
if (options.autoRefresh) {
if ( options.autoRefresh ) {
this.refresh();
}
this.selectees.filter(".ui-selected").each(function() {
var selectee = $.data(this, "selectable-item");
this.selectees.filter( ".ui-selected" ).each( function() {
var selectee = $.data( this, "selectable-item" );
selectee.startselected = true;
if (!event.metaKey && !event.ctrlKey) {
if ( !event.metaKey && !event.ctrlKey ) {
that._removeClass( selectee.$element, "ui-selected" );
selectee.selected = false;
that._addClass( selectee.$element, "ui-unselecting" );
selectee.unselecting = true;
// selectable UNSELECTING callback
that._trigger("unselecting", event, {
unselecting: selectee.element
});
}
});
$(event.target).parents().addBack().each(function() {
// selectable UNSELECTING callback
that._trigger( "unselecting", event, {
unselecting: selectee.element
} );
}
} );
$( 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 = $.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;
// selectable (UN)SELECTING callback
if (doSelect) {
that._trigger("selecting", event, {
if ( doSelect ) {
that._trigger( "selecting", event, {
selecting: selectee.element
});
} );
} else {
that._trigger("unselecting", event, {
that._trigger( "unselecting", event, {
unselecting: selectee.element
});
} );
}
return false;
}
});
} );
},
_mouseDrag: function(event) {
_mouseDrag: function( event ) {
this.dragged = true;
if (this.options.disabled) {
if ( this.options.disabled ) {
return;
}
var tmp,
that = this,
options = this.options,
x1 = this.opos[0],
y1 = this.opos[1],
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; }
this.helper.css({ left: x1, top: y1, width: x2 - x1, height: y2 - y1 });
if ( x1 > x2 ) { tmp = x2; x2 = x1; x1 = tmp; }
if ( y1 > y2 ) { tmp = y2; y2 = y1; y1 = tmp; }
this.helper.css( { left: x1, top: y1, width: x2 - x1, height: y2 - y1 } );
this.selectees.each(function() {
var selectee = $.data(this, "selectable-item"),
this.selectees.each( function() {
var selectee = $.data( this, "selectable-item" ),
hit = false;
//prevent helper from being selected if appendTo: selectable
if (!selectee || selectee.element === that.element[0]) {
if ( !selectee || selectee.element === that.element[ 0 ] ) {
return;
}
if (options.tolerance === "touch") {
hit = ( !(selectee.left > x2 || selectee.right < x1 || selectee.top > y2 || selectee.bottom < y1) );
} else if (options.tolerance === "fit") {
hit = (selectee.left > x1 && selectee.right < x2 && selectee.top > y1 && selectee.bottom < y2);
if ( options.tolerance === "touch" ) {
hit = ( !( selectee.left > x2 || selectee.right < x1 || selectee.top > y2 || selectee.bottom < y1 ) );
} else if ( options.tolerance === "fit" ) {
hit = ( selectee.left > x1 && selectee.right < x2 && selectee.top > y1 && selectee.bottom < y2 );
}
if (hit) {
if ( hit ) {
// SELECT
if (selectee.selected) {
if ( selectee.selected ) {
that._removeClass( selectee.$element, "ui-selected" );
selectee.selected = false;
}
if (selectee.unselecting) {
if ( selectee.unselecting ) {
that._removeClass( selectee.$element, "ui-unselecting" );
selectee.unselecting = false;
}
if (!selectee.selecting) {
if ( !selectee.selecting ) {
that._addClass( selectee.$element, "ui-selecting" );
selectee.selecting = true;
// selectable SELECTING callback
that._trigger("selecting", event, {
that._trigger( "selecting", event, {
selecting: selectee.element
});
} );
}
} else {
// UNSELECT
if (selectee.selecting) {
if ((event.metaKey || event.ctrlKey) && selectee.startselected) {
if ( selectee.selecting ) {
if ( ( event.metaKey || event.ctrlKey ) && selectee.startselected ) {
that._removeClass( selectee.$element, "ui-selecting" );
selectee.selecting = false;
that._addClass( selectee.$element, "ui-selected" );
@ -221,67 +227,69 @@ return $.widget("ui.selectable", $.ui.mouse, {
} else {
that._removeClass( selectee.$element, "ui-selecting" );
selectee.selecting = false;
if (selectee.startselected) {
if ( selectee.startselected ) {
that._addClass( selectee.$element, "ui-unselecting" );
selectee.unselecting = true;
}
// selectable UNSELECTING callback
that._trigger("unselecting", event, {
that._trigger( "unselecting", event, {
unselecting: selectee.element
});
} );
}
}
if (selectee.selected) {
if (!event.metaKey && !event.ctrlKey && !selectee.startselected) {
if ( selectee.selected ) {
if ( !event.metaKey && !event.ctrlKey && !selectee.startselected ) {
that._removeClass( selectee.$element, "ui-selected" );
selectee.selected = false;
that._addClass( selectee.$element, "ui-unselecting" );
selectee.unselecting = true;
// selectable UNSELECTING callback
that._trigger("unselecting", event, {
that._trigger( "unselecting", event, {
unselecting: selectee.element
});
} );
}
}
}
});
} );
return false;
},
_mouseStop: function(event) {
_mouseStop: function( event ) {
var that = this;
this.dragged = false;
$(".ui-unselecting", this.element[0]).each(function() {
var selectee = $.data(this, "selectable-item");
$( ".ui-unselecting", this.element[ 0 ] ).each( function() {
var selectee = $.data( this, "selectable-item" );
that._removeClass( selectee.$element, "ui-unselecting" );
selectee.unselecting = false;
selectee.startselected = false;
that._trigger("unselected", event, {
that._trigger( "unselected", event, {
unselected: selectee.element
});
});
$(".ui-selecting", this.element[0]).each(function() {
var selectee = $.data(this, "selectable-item");
} );
} );
$( ".ui-selecting", this.element[ 0 ] ).each( function() {
var selectee = $.data( this, "selectable-item" );
that._removeClass( selectee.$element, "ui-selecting" )
._addClass( selectee.$element, "ui-selected" );
selectee.selecting = false;
selectee.selected = true;
selectee.startselected = true;
that._trigger("selected", event, {
that._trigger( "selected", event, {
selected: selectee.element
});
});
this._trigger("stop", event);
} );
} );
this._trigger( "stop", event );
this.helper.remove();
return false;
}
});
} );
}));
} ) );