bennadel · July 18, 2013 13:58
diff --git a/alpha-numeric-sort.htm b/alpha-numeric-sort.htm
 <!doctype html>
 <html ng-app="Demo" ng-controller="DemoController">
 <head>
 	<meta charset="utf-8" />

 	<title>
 		User-Friendly Sort Of Alpha-Numeric Data In JavaScript
 	</title>
 </head>
 <body>

 	<h1>
 		User-Friendly Sort Of Alpha-Numeric Data In JavaScript
 	</h1>

 	<ul>
 		<li ng-repeat="file in files">

 			{{ file.name }}

 		</li>
 	</ul>

 	<form ng-submit="saveFile()">

 		<input type="text" ng-model="form.name" size="20" />

 		<input type="submit" value="Add File" />

 	</form>



 	<!-- Load jQuery and AngularJS from the CDN. -->
 	<script
 		type="text/javascript"
 		src="//code.jquery.com/jquery-2.0.0.min.js">
 	</script>
 	<script
 		type="text/javascript"
 		src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js">
 	</script>
 	<script type="text/javascript">


 		// Create an application module for our demo.
 		var app = angular.module( "Demo", [] );


 		// -------------------------------------------------- //
 		// -------------------------------------------------- //


 		// I control the main application.
 		app.controller(
 			"DemoController",
 			function( $scope ) {

 				// I am the initial list of files.
 				$scope.files = [
 					{
 						id: 1,
 						name: "kittens-1.jpg"
 					},
 					{
 						id: 2,
 						name: "kittens-2.jpg"
 					},
 					{
 						id: 3,
 						name: "kittens-12.jpg"
 					}
 				];

 				// Sort the initial list of files so that they are
 				// in mixed-type, alpha-numeric order.
 				sortFiles();

 				// I hold the form values for ngModel.
 				$scope.form = {
 					name: "kittens-3.jpg"
 				};


 				// ---
 				// PUBLIC METHODS.
 				// ---


 				// I process the intake form for file names.
 				$scope.saveFile = function() {

 					if ( ! $scope.form.name ) {

 						return;

 					}

 					addFile( $scope.form.name );

 				};


 				// ---
 				// PRIVATE METHODS.
 				// ---


 				// I add a file with the given name to the current
 				// collection.
 				function addFile( name ) {

 					$scope.files.push({
 						id: ( new Date() ).getTime(),
 						name: $scope.form.name
 					});

 					sortFiles();

 				}


 				// I take a value and try to return a value in which
 				// the numeric values have a standardized number of
 				// leading and trailing zeros. This *MAY* help makes
 				// an alphabetic sort seem more natural to the user's
 				// intent.
 				function normalizeMixedDataValue( value ) {

 					var padding = "000000000000000";

 					// Loop over all numeric values in the string and
 					// replace them with a value of a fixed-width for
 					// both leading (integer) and trailing (decimal)
 					// padded zeroes.
 					value = value.replace(
 						/(\d+)((\.\d+)+)?/g,
 						function( $0, integer, decimal, $3 ) {

 							// If this numeric value has "multiple"
 							// decimal portions, then the complexity
 							// is too high for this simple approach -
 							// just return the padded integer.
 							if ( decimal !== $3 ) {

 								return(
 									padding.slice( integer.length ) +
 									integer +
 									decimal
 								);

 							}

 							decimal = ( decimal || ".0" );

 							return(
 								padding.slice( integer.length ) +
 								integer +
 								decimal +
 								padding.slice( decimal.length )
 							);

 						}
 					);

 					console.log( value );

 					return( value );

 				}


 				// I sort the current files based on the file name.
 				function sortFiles() {

 					$scope.files.sort(
 						function( a, b ) {

 							// Normalize the file names with fixed-
 							// width numeric data.
 							var aMixed = normalizeMixedDataValue( a.name );
 							var bMixed = normalizeMixedDataValue( b.name );

 							return( aMixed < bMixed ? -1 : 1 );

 						}
 					);

 				}

 			}
 		);


 	</script>

 </body>
 </html>
	<!doctype html>
	<html ng-app="Demo" ng-controller="DemoController">
	<head>
	<meta charset="utf-8" />

	<title>
	User-Friendly Sort Of Alpha-Numeric Data In JavaScript
	</title>
	</head>
	<body>

	<h1>
	User-Friendly Sort Of Alpha-Numeric Data In JavaScript
	</h1>

	<ul>
	<li ng-repeat="file in files">

	{{ file.name }}

	</li>
	</ul>

	<form ng-submit="saveFile()">

	<input type="text" ng-model="form.name" size="20" />

	<input type="submit" value="Add File" />

	</form>



	<!-- Load jQuery and AngularJS from the CDN. -->
	<script
	type="text/javascript"
	src="//code.jquery.com/jquery-2.0.0.min.js">
	</script>
	<script
	type="text/javascript"
	src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js">
	</script>
	<script type="text/javascript">


	// Create an application module for our demo.
	var app = angular.module( "Demo", [] );


	// -------------------------------------------------- //
	// -------------------------------------------------- //


	// I control the main application.
	app.controller(
	"DemoController",
	function( $scope ) {

	// I am the initial list of files.
	$scope.files = [
	{
	id: 1,
	name: "kittens-1.jpg"
	},
	{
	id: 2,
	name: "kittens-2.jpg"
	},
	{
	id: 3,
	name: "kittens-12.jpg"
	}
	];

	// Sort the initial list of files so that they are
	// in mixed-type, alpha-numeric order.
	sortFiles();

	// I hold the form values for ngModel.
	$scope.form = {
	name: "kittens-3.jpg"
	};


	// ---
	// PUBLIC METHODS.
	// ---


	// I process the intake form for file names.
	$scope.saveFile = function() {

	if ( ! $scope.form.name ) {

	return;

	}

	addFile( $scope.form.name );

	};


	// ---
	// PRIVATE METHODS.
	// ---


	// I add a file with the given name to the current
	// collection.
	function addFile( name ) {

	$scope.files.push({
	id: ( new Date() ).getTime(),
	name: $scope.form.name
	});

	sortFiles();

	}


	// I take a value and try to return a value in which
	// the numeric values have a standardized number of
	// leading and trailing zeros. This MAY help makes
	// an alphabetic sort seem more natural to the user's
	// intent.
	function normalizeMixedDataValue( value ) {

	var padding = "000000000000000";

	// Loop over all numeric values in the string and
	// replace them with a value of a fixed-width for
	// both leading (integer) and trailing (decimal)
	// padded zeroes.
	value = value.replace(
	/(\d+)((\.\d+)+)?/g,
	function( $0, integer, decimal, $3 ) {

	// If this numeric value has "multiple"
	// decimal portions, then the complexity
	// is too high for this simple approach -
	// just return the padded integer.
	if ( decimal !== $3 ) {

	return(
	padding.slice( integer.length ) +
	integer +
	decimal
	);

	}

	decimal = ( decimal \|\| ".0" );

	return(
	padding.slice( integer.length ) +
	integer +
	decimal +
	padding.slice( decimal.length )
	);

	}
	);

	console.log( value );

	return( value );

	}


	// I sort the current files based on the file name.
	function sortFiles() {

	$scope.files.sort(
	function( a, b ) {

	// Normalize the file names with fixed-
	// width numeric data.
	var aMixed = normalizeMixedDataValue( a.name );
	var bMixed = normalizeMixedDataValue( b.name );

	return( aMixed < bMixed ? -1 : 1 );

	}
	);

	}

	}
	);


	</script>

	</body>
	</html>