diff --git a/README.md b/README.md index 5b2488e..2a98658 100644 --- a/README.md +++ b/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… ] diff --git a/js/jquery.miller.js b/js/jquery.miller.js index af3b55b..30ef728 100644 --- a/js/jquery.miller.js +++ b/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']) { + $('', { '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; }