Selectable: Style updates

Ref #14246

1 files changed, 91 insertions, 83 deletions

diff --git a/ui/widgets/selectable.js b/ui/widgets/selectable.js
index 0dadac962..152729d7c 100644
--- a/ui/widgets/selectable.js
+++ b/ui/widgets/selectable.js
@@ -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, {
+				that._trigger( "unselecting", event, {
 					unselecting: selectee.element
-				});
+				} );
 			}
-		});
+		} );
 
-		$(event.target).parents().addBack().each(function() {
+		$( 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;
 	}
 
-});
+} );
 
-}));
+} ) );