Adding the ability to provide a transform function for transforming data

README.md

@@ -44,6 +44,9 @@ The default values are :
 ``` JavaScript
 {
 	url: function(id) { return id; }, // generate url for ajax call, id is the value of the node ID
+	transform: function(lines) { return lines; }, // transform the data to conform to the JSON array structure outlined below
+	preloadedData: {}, // A data object matching the JSON structure below that will be used before calls to 'url' to fetch data
+	initialPath: [], // The path to initialize the UI to.  This is an array of IDs.  Currently only works when using preloadedData.
 	minWidth: 40, // minimum width of one column
 	tabindex: 0, // default tabindex if it is undefined on the DOM element
 	carroussel: false, // If set to true, the user will go to the first item of the column if it use ↓ on the last item
@@ -63,6 +66,7 @@ The ajax call must return a JSON array with the following structure:
    { 'id': 'ID of node 1', 'name': 'Name of node 1', 'parent': false }, // this node has no child
    { 'id': 'ID of node 2', 'name': 'Name of node 2', 'parent': true }, // this node has some children
    { 'id': 'ID of node 3', 'name': 'Name of node 3', 'parent': false }, // this node has no child
+   { 'id': 'ID of node 4', 'name': 'Name of node 4', 'parent': false, 'image': '../image.png' }, // this node has an image
 	// and so on…
 ]
 

js/jquery.miller.js

@@ -9,6 +9,21 @@
 			);
 
 			return path;
+		},
+		'setPath': function(path) {
+			// Make sure path is an array
+			if (!$.isArray(path) || path.length == 0) {
+				return;
+			}
+
+			$.each(path, function(index, value) {
+				var list = $('.columns ul').get(index);
+				var $listItems = $(list).children();
+				var $item = $listItems.filter(function(index) {
+					return $(this).data('id') == value;
+				});
+				$item.click();
+			});
 		}
 	};
 
@@ -21,6 +36,9 @@
 			var currentAjaxRequest = null;
 			var settings = $.extend(true, {
 						'url': function(id) { return id; },
+						'transform': function(lines) { return lines; },
+						'preloadedData': {},
+						'initialPath': [],
 						'tabindex': 0,
 						'minWidth': 40,
 						'carroussel': false,
@@ -29,7 +47,10 @@
 						},
 						'pane': {
 							'options': {}
-						}
+						},
+                        'onClick' : function() {
+                            // No-op
+                        }
 					},
 					mixed
 				)
@@ -254,12 +275,21 @@
 										.data('id', data['id'])
 										.click(removeNextColumns)
 										.click(getLines)
+                                        .click(settings.onClick)
 										.appendTo(column)
 									;
 
 									if (data['parent']) {
 										line.addClass('parent');
 									}
+									if (data['class']) {
+										line.addClass(data['class']);
+									}
+									if (data['image']) {
+										$('<img>', { 'src': data['image']})
+											.prependTo(line)
+										;
+									}
 								}
 							);
 
@@ -310,32 +340,80 @@
 				}
 			;
 
-			var getLines = function(event) {
-					if (currentAjaxRequest) {
-						currentAjaxRequest.abort();
-					}
+			var transformAndBuildColumn = function(data) {
+					buildColumn(settings.transform.call(miller, data));
+			};
 
+			var getLines = function(event) {
+					var id = $(this).data('id');
 					currentLine = $(event.currentTarget)
 						.removeClass('parentSelected')
 						.addClass('parentLoading')
 					;
+					// First, let's check for preloadedData
+					var preloadedData = getPreloadedData();
+					if (preloadedData) {
+						buildColumn(preloadedData);
+						currentLine
+							.removeClass('parentLoading')
+						;
+					} else {
+						if (currentAjaxRequest) {
+							currentAjaxRequest.abort();
+						}
 
-					currentAjaxRequest = $.getJSON(settings.url($(this).data('id')), buildColumn)
-						.always(function() {
-								currentLine
-									.removeClass('parentLoading')
-								;
+						currentAjaxRequest = $.getJSON(settings.url.call(miller, id), transformAndBuildColumn)
+							.always(function() {
+									currentLine
+										.removeClass('parentLoading')
+									;
 
-								currentAjaxRequest = null;
+									currentAjaxRequest = null;
+								}
+							)
+							.fail(function() {})
+						;
+					}
+				}
+			;
+
+			var getPreloadedData = function() {
+					if (!$.isEmptyObject(settings.preloadedData)) {
+						var currentPath = $.map(methods['getPath'].call(miller), function(value, index) {
+							return value.id;
+						});
+
+						var currentObj = settings.preloadedData;
+						$.each(currentPath, function(pathIndex, pathValue) {
+							var children = currentObj.children;
+							if (!$.isArray(children) || children.length == 0) {
+								return false; // break
 							}
-						)
-						.fail(function() {})
-					;
+							$.each(children, function(childIndex, childValue) {
+								if (childValue.id == pathValue) {
+									currentObj = childValue;
+									return false; // break
+								}
+							});
+						});
+						return currentObj.children || [];
+					}
+					return null;
+				}
+			;
 
+			var init = function() {
+					var preloadedData = getPreloadedData();
+					if(preloadedData) {
+						buildColumn(preloadedData);
+					} else {
+						$.getJSON(settings.url.call(miller), transformAndBuildColumn);
+					}
+					methods['setPath'](settings.initialPath);
 				}
 			;
 
-			$.getJSON(settings.url(), buildColumn);
+			init();
 
 			return miller;
 		}