Style updates based on latest version of style guide

Gruntfile.js

@@ -55,19 +55,6 @@ var
 	},
 	component = grunt.option( "component" ) || "**",
 
-	jscsBad = [
-		"ui/button.js",
-		"ui/datepicker.js",
-		"ui/draggable.js",
-		"ui/droppable.js",
-		"ui/effect.js",
-		"ui/mouse.js",
-		"ui/resizable.js",
-		"ui/selectable.js",
-		"ui/slider.js",
-		"ui/sortable.js"
-	],
-
 	htmllintBad = [
 		"demos/tabs/ajax/content*.html",
 		"demos/tooltip/ajax/content*.html",
@@ -150,35 +137,13 @@ grunt.initConfig({
 
 	// Remove the requireSpacesInsideParentheses override once everything is fixed
 	jscs: {
-		"ui-good": [ "ui/*.js" ].concat( jscsBad.map( function( file ) {
-			return "!" + file;
-		} ) ),
-		"ui-bad": {
-			options: {
-				requireSpacesInsideParentheses: null
-			},
-			src: jscsBad
-		},
-		tests: {
-			options: {
-				requireSpacesInsideParentheses: null
-			},
-			src: "tests/unit/**/*.js"
-		},
-		grunt: {
-			options: {
-				requireSpacesInsideParentheses: null
-			},
-			src: [ "Gruntfile.js", "build/tasks/*.js" ]
-		},
-		demos: {
+		all: {
 			options: {
-
-				// While the style guide removed onevar upgrading jscs to allow it causes too many
-				// errors right now
-				disallowMultipleVarDecl: null
+				requireCapitalizedComments: null
 			},
-			src: "demos/**/*.js"
+			files: {
+				src: [ "demos/**/*.js", "build/**/*.js", "tests/**/*.js", "ui/**/*.js" ]
+			}
 		}
 	},
 	uglify: minify,

demos/bootstrap.js

@@ -1,4 +1,4 @@
-/* globals window:true, document:true */
+/* globals window, document */
 ( function() {
 
 // Find the script element
@@ -80,7 +80,6 @@ require.config( {
 	}
 } );
 
-
 // Replace effects all shortcut modules with all the effects modules
 if ( modules && modules.indexOf( "effects-all" ) !== -1 ) {
 	modules = modules.replace( /effects-all/, effectsAll.join( " " ) );

demos/droppable/photo-manager.html

@@ -22,11 +22,11 @@
 	<script src="../../external/requirejs/require.js"></script>
 	<script src="../bootstrap.js" data-modules="dialog">
 
-		// there's the gallery and the trash
+		// There's the gallery and the trash
 		var $gallery = $( "#gallery" ),
 			$trash = $( "#trash" );
 
-		// let the gallery items be draggable
+		// Let the gallery items be draggable
 		$( "li", $gallery ).draggable({
 			cancel: "a.ui-icon", // clicking an icon won't initiate dragging
 			revert: "invalid", // when not dropped, the item will revert back to its initial position
@@ -35,7 +35,7 @@
 			cursor: "move"
 		});
 
-		// let the trash be droppable, accepting the gallery items
+		// Let the trash be droppable, accepting the gallery items
 		$trash.droppable({
 			accept: "#gallery > li",
 			classes: {
@@ -46,7 +46,7 @@
 			}
 		});
 
-		// let the gallery be droppable as well, accepting items from the trash
+		// Let the gallery be droppable as well, accepting items from the trash
 		$gallery.droppable({
 			accept: "#trash li",
 			classes: {
@@ -57,7 +57,7 @@
 			}
 		});
 
-		// image deletion function
+		// Image deletion function
 		var recycle_icon = "<a href='link/to/recycle/script/when/we/have/js/off' title='Recycle this image' class='ui-icon ui-icon-refresh'>Recycle image</a>";
 		function deleteImage( $item ) {
 			$item.fadeOut(function() {
@@ -75,7 +75,7 @@
 			});
 		}
 
-		// image recycle function
+		// Image recycle function
 		var trash_icon = "<a href='link/to/trash/script/when/we/have/js/off' title='Delete this image' class='ui-icon ui-icon-trash'>Delete image</a>";
 		function recycleImage( $item ) {
 			$item.fadeOut(function() {
@@ -93,7 +93,7 @@
 			});
 		}
 
-		// image preview function, demonstrating the ui.dialog used as a modal window
+		// Image preview function, demonstrating the ui.dialog used as a modal window
 		function viewLargerImage( $link ) {
 			var src = $link.attr( "href" ),
 				title = $link.siblings( "img" ).attr( "alt" ),
@@ -114,7 +114,7 @@
 			}
 		}
 
-		// resolve the icons behavior with event delegation
+		// Resolve the icons behavior with event delegation
 		$( "ul.gallery > li" ).on( "click", function( event ) {
 			var $item = $( this ),
 				$target = $( event.target );

demos/effect/default.html

@@ -19,7 +19,7 @@
 			// get effect type from
 			var selectedEffect = $( "#effectTypes" ).val();
 
-			// most effect types need no options passed by default
+			// Most effect types need no options passed by default
 			var options = {};
 			// some effects have required parameters
 			if ( selectedEffect === "scale" ) {
@@ -30,18 +30,18 @@
 				options = { to: { width: 200, height: 60 } };
 			}
 
-			// run the effect
+			// Run the effect
 			$( "#effect" ).effect( selectedEffect, options, 500, callback );
 		};
 
-		// callback function to bring a hidden box back
+		// Callback function to bring a hidden box back
 		function callback() {
 			setTimeout(function() {
 				$( "#effect" ).removeAttr( "style" ).hide().fadeIn();
 			}, 1000 );
 		};
 
-		// set effect from select menu value
+		// Set effect from select menu value
 		$( "#button" ).on( "click", function() {
 			runEffect();
 			return false;

demos/effect/easing.html

@@ -37,7 +37,7 @@
 				ctx = canvas.getContext( "2d" );
 			ctx.fillStyle = "black";
 
-			// draw background
+			// Draw background
 			ctx.beginPath();
 			ctx.moveTo( cradius, 0 );
 			ctx.quadraticCurveTo( 0, 0, 0, cradius );
@@ -49,21 +49,21 @@
 			ctx.lineTo( cradius, 0 );
 			ctx.fill();
 
-			// draw bottom line
+			// Draw bottom line
 			ctx.strokeStyle = "#555";
 			ctx.beginPath();
 			ctx.moveTo( width * 0.1, drawHeight + .5 );
 			ctx.lineTo( width * 0.9, drawHeight + .5 );
 			ctx.stroke();
 
-			// draw top line
+			// Draw top line
 			ctx.strokeStyle = "#555";
 			ctx.beginPath();
 			ctx.moveTo( width * 0.1, drawHeight * .3 - .5 );
 			ctx.lineTo( width * 0.9, drawHeight * .3 - .5 );
 			ctx.stroke();
 
-			// plot easing
+			// Plot easing
 			ctx.strokeStyle = "white";
 			ctx.beginPath();
 			ctx.lineWidth = 2;
@@ -76,7 +76,7 @@
 			});
 			ctx.stroke();
 
-			// animate on click
+			// Animate on click
 			graph.on( "click", function() {
 				wrap
 					.animate( { height: "hide" }, 2000, name )

demos/effect/hide.html

@@ -18,7 +18,7 @@
 			// get effect type from
 			var selectedEffect = $( "#effectTypes" ).val();
 
-			// most effect types need no options passed by default
+			// Most effect types need no options passed by default
 			var options = {};
 			// some effects have required parameters
 			if ( selectedEffect === "scale" ) {
@@ -27,18 +27,18 @@
 				options = { to: { width: 200, height: 60 } };
 			}
 
-			// run the effect
+			// Run the effect
 			$( "#effect" ).hide( selectedEffect, options, 1000, callback );
 		};
 
-		// callback function to bring a hidden box back
+		// Callback function to bring a hidden box back
 		function callback() {
 			setTimeout(function() {
 				$( "#effect" ).removeAttr( "style" ).hide().fadeIn();
 			}, 1000 );
 		};
 
-		// set effect from select menu value
+		// Set effect from select menu value
 		$( "#button" ).on( "click", function() {
 			runEffect();
 		});

demos/effect/show.html

@@ -18,7 +18,7 @@
 			// get effect type from
 			var selectedEffect = $( "#effectTypes" ).val();
 
-			// most effect types need no options passed by default
+			// Most effect types need no options passed by default
 			var options = {};
 			// some effects have required parameters
 			if ( selectedEffect === "scale" ) {
@@ -27,7 +27,7 @@
 				options = { to: { width: 280, height: 185 } };
 			}
 
-			// run the effect
+			// Run the effect
 			$( "#effect" ).show( selectedEffect, options, 500, callback );
 		};
 
@@ -38,7 +38,7 @@
 			}, 1000 );
 		};
 
-		// set effect from select menu value
+		// Set effect from select menu value
 		$( "#button" ).on( "click", function() {
 			runEffect();
 		});

demos/effect/toggle.html

@@ -33,7 +33,7 @@
 			// get effect type from
 			var selectedEffect = $( "#effectTypes" ).val();
 
-			// most effect types need no options passed by default
+			// Most effect types need no options passed by default
 			var options = {};
 			// some effects have required parameters
 			if ( selectedEffect === "scale" ) {
@@ -42,11 +42,11 @@
 				options = { to: { width: 200, height: 60 } };
 			}
 
-			// run the effect
+			// Run the effect
 			$( "#effect" ).toggle( selectedEffect, options, 500 );
 		};
 
-		// set effect from select menu value
+		// Set effect from select menu value
 		$( "#button" ).on( "click", function() {
 			runEffect();
 		});

demos/tabs/manipulation.html

@@ -22,7 +22,7 @@
 
 		var tabs = $( "#tabs" ).tabs();
 
-		// modal dialog init: custom buttons and a "close" callback resetting the form inside
+		// Modal dialog init: custom buttons and a "close" callback resetting the form inside
 		var dialog = $( "#dialog" ).dialog({
 			autoOpen: false,
 			modal: true,
@@ -40,14 +40,14 @@
 			}
 		});
 
-		// addTab form: calls addTab function on submit and closes the dialog
+		// AddTab form: calls addTab function on submit and closes the dialog
 		var form = dialog.find( "form" ).on( "submit", function( event ) {
 			addTab();
 			dialog.dialog( "close" );
 			event.preventDefault();
 		});
 
-		// actual addTab function: adds new tab using the input from the form above
+		// Actual addTab function: adds new tab using the input from the form above
 		function addTab() {
 			var label = tabTitle.val() || "Tab " + tabCounter,
 				id = "tabs-" + tabCounter,
@@ -60,14 +60,14 @@
 			tabCounter++;
 		}
 
-		// addTab button: just opens the dialog
+		// AddTab button: just opens the dialog
 		$( "#add_tab" )
 			.button()
 			.on( "click", function() {
 				dialog.dialog( "open" );
 			});
 
-		// close icon: removing the tab on click
+		// Close icon: removing the tab on click
 		tabs.on( "click", "span.ui-icon-close", function() {
 			var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
 			$( "#" + panelId ).remove();