From f3a77dd67c3660e60b0767c4746747ba3d60d40e Mon Sep 17 00:00:00 2001 From: Stanton Sievers Date: Wed, 27 Nov 2013 14:36:45 -0500 Subject: [PATCH 1/6] Adding the ability to provide a transform function to transform data before using it to build columns. --- README.md | 1 + js/jquery.miller.js | 9 +++++++-- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 5b2488e..38cf8e9 100644 --- a/README.md +++ b/README.md @@ -44,6 +44,7 @@ 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 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 diff --git a/js/jquery.miller.js b/js/jquery.miller.js index af3b55b..dde5fab 100644 --- a/js/jquery.miller.js +++ b/js/jquery.miller.js @@ -21,6 +21,7 @@ var currentAjaxRequest = null; var settings = $.extend(true, { 'url': function(id) { return id; }, + 'transform': function(lines) { return lines; }, 'tabindex': 0, 'minWidth': 40, 'carroussel': false, @@ -310,6 +311,10 @@ } ; + var transformAndBuildColumn = function(data) { + buildColumn(settings.transform.call(miller, data)); + }; + var getLines = function(event) { if (currentAjaxRequest) { currentAjaxRequest.abort(); @@ -320,7 +325,7 @@ .addClass('parentLoading') ; - currentAjaxRequest = $.getJSON(settings.url($(this).data('id')), buildColumn) + currentAjaxRequest = $.getJSON(settings.url($(this).data('id')), transformAndBuildColumn) .always(function() { currentLine .removeClass('parentLoading') @@ -335,7 +340,7 @@ } ; - $.getJSON(settings.url(), buildColumn); + $.getJSON(settings.url(), transformAndBuildColumn); return miller; } From ee7e3e5fcd3864e067f06d72d47451da816ac028 Mon Sep 17 00:00:00 2001 From: Stanton Sievers Date: Wed, 27 Nov 2013 14:37:59 -0500 Subject: [PATCH 2/6] =?UTF-8?q?Setting=20the=20scope=20so=20implementors?= =?UTF-8?q?=20of=20the=20=E2=80=98url=E2=80=99=20function=20can=20use=20?= =?UTF-8?q?=E2=80=9Cthis=E2=80=9D=20to=20get=20a=20handle=20to=20the=20mil?= =?UTF-8?q?ler=20object?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/jquery.miller.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/jquery.miller.js b/js/jquery.miller.js index dde5fab..6881c2e 100644 --- a/js/jquery.miller.js +++ b/js/jquery.miller.js @@ -325,7 +325,7 @@ .addClass('parentLoading') ; - currentAjaxRequest = $.getJSON(settings.url($(this).data('id')), transformAndBuildColumn) + currentAjaxRequest = $.getJSON(settings.url.call(miller, $(this).data('id')), transformAndBuildColumn) .always(function() { currentLine .removeClass('parentLoading') @@ -340,7 +340,7 @@ } ; - $.getJSON(settings.url(), transformAndBuildColumn); + $.getJSON(settings.url.call(miller), transformAndBuildColumn); return miller; } From 6c1b90d786a2b7089a220d8b832635455f6c4221 Mon Sep 17 00:00:00 2001 From: Stanton Sievers Date: Mon, 2 Dec 2013 12:07:43 -0500 Subject: [PATCH 3/6] =?UTF-8?q?Adding=20the=20ability=20to=20give=20preloa?= =?UTF-8?q?ded=20data=20that=20will=20be=20used=20before=20attempting=20to?= =?UTF-8?q?=20call=20=E2=80=98url=E2=80=99.=20=20Also=20adding=20the=20abi?= =?UTF-8?q?lity=20to=20set=20an=20initial=20path=20for=20the=20UI.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 + js/jquery.miller.js | 89 ++++++++++++++++++++++++++++++++++++++------- 2 files changed, 77 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index 38cf8e9..c4402c0 100644 --- a/README.md +++ b/README.md @@ -45,6 +45,8 @@ The default values are : { 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 diff --git a/js/jquery.miller.js b/js/jquery.miller.js index 6881c2e..be0825e 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(); + }); } }; @@ -22,6 +37,8 @@ var settings = $.extend(true, { 'url': function(id) { return id; }, 'transform': function(lines) { return lines; }, + 'preloadedData': {}, + 'initialPath': [], 'tabindex': 0, 'minWidth': 40, 'carroussel': false, @@ -316,31 +333,75 @@ }; var getLines = function(event) { - if (currentAjaxRequest) { - currentAjaxRequest.abort(); - } - + 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.call(miller, $(this).data('id')), transformAndBuildColumn) - .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.call(miller), transformAndBuildColumn); + init(); return miller; } From 8b2903f5b71290efa2287f96b8f46808136fef7f Mon Sep 17 00:00:00 2001 From: Stanton Sievers Date: Sat, 18 Jan 2014 12:57:10 -0500 Subject: [PATCH 4/6] Ability to add an image to a node --- README.md | 1 + js/jquery.miller.js | 5 +++++ 2 files changed, 6 insertions(+) diff --git a/README.md b/README.md index c4402c0..2a98658 100644 --- a/README.md +++ b/README.md @@ -66,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 be0825e..584e0bb 100644 --- a/js/jquery.miller.js +++ b/js/jquery.miller.js @@ -278,6 +278,11 @@ if (data['parent']) { line.addClass('parent'); } + if (data['image']) { + $('', { 'src': data['image']}) + .prependTo(line) + ; + } } ); From 18cb906f679c57adeb264284b64bc0aa5c813732 Mon Sep 17 00:00:00 2001 From: Stanton Sievers Date: Mon, 27 Jan 2014 14:36:13 -0500 Subject: [PATCH 5/6] =?UTF-8?q?If=20a=20=E2=80=98class=E2=80=99=20is=20pro?= =?UTF-8?q?vided=20on=20the=20data,=20add=20it=20to=20the=20CSS=20of=20the?= =?UTF-8?q?=20item?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/jquery.miller.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/js/jquery.miller.js b/js/jquery.miller.js index 584e0bb..0c0c58e 100644 --- a/js/jquery.miller.js +++ b/js/jquery.miller.js @@ -278,6 +278,9 @@ if (data['parent']) { line.addClass('parent'); } + if (data['class']) { + line.addClass(data['class']); + } if (data['image']) { $('', { 'src': data['image']}) .prependTo(line) From 8370ef001eced1b744374b22f3979345c21e3453 Mon Sep 17 00:00:00 2001 From: Stanton Sievers Date: Tue, 15 Jul 2014 10:57:03 -0400 Subject: [PATCH 6/6] Allow click events to be registered for individual node selections --- js/jquery.miller.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/js/jquery.miller.js b/js/jquery.miller.js index 0c0c58e..30ef728 100644 --- a/js/jquery.miller.js +++ b/js/jquery.miller.js @@ -47,7 +47,10 @@ }, 'pane': { 'options': {} - } + }, + 'onClick' : function() { + // No-op + } }, mixed ) @@ -272,6 +275,7 @@ .data('id', data['id']) .click(removeNextColumns) .click(getLines) + .click(settings.onClick) .appendTo(column) ;