From 0d45e3ed77df296a1df7ed21e4a877bf34a5386c Mon Sep 17 00:00:00 2001 From: Stephen James Date: Thu, 29 Oct 2015 15:46:07 -0400 Subject: [PATCH] Add refreshFolder method to tree - adds isBackgroundProcess parameter to populate --- index.html | 1 + index.js | 16 ++++++++++++++++ js/tree.js | 27 ++++++++++++++++++++++++--- test/tree-test.js | 41 ++++++++++++++++++++++++++++++++++++----- 4 files changed, 77 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index 033f7d615..a7f7e8bb4 100644 --- a/index.html +++ b/index.html @@ -2241,6 +2241,7 @@

only items selectable (please note structure of treebranch)

+ diff --git a/index.js b/index.js index 6e504fff0..e888e085e 100644 --- a/index.js +++ b/index.js @@ -1207,6 +1207,18 @@ define(function (require) { console.log($('#myTree1').tree('selectedItems')); }); + var mostRecentlyOpenedFolderId = null; + $('#btnTreeRefresh').click(function () { + if (mostRecentlyOpenedFolderId === null) { + log('Please open a folder first. This is only needed for already opened and "DOM cached" folders.'); + } + else { + var $itemToRefresh = $('#'+mostRecentlyOpenedFolderId) + $('#myTree1').tree('refreshFolder', $itemToRefresh); + } + + }); + // events $('#myTree1').on('loaded.fu.tree', function (e) { log('#myTree1 Loaded'); @@ -1223,6 +1235,7 @@ define(function (require) { log($('#myTree1').tree('selectedItems')); }); $('#myTree1').on('disclosedFolder.fu.tree', function (event, parentData) { + mostRecentlyOpenedFolderId = parentData.attr.id; log('Opened Event, parent data: ', parentData); }); $('#myTree1').on('closed.fu.tree', function (event, parentData) { @@ -1240,6 +1253,9 @@ define(function (require) { $('#myTree1').on('disclosedAll.fu.tree', function (event, data) { log('Disclosed All, this many recursions: ', data.disclosures); }); + $('#myTree1').on('refreshedFolder.fu.tree', function (event, parentData) { + log('Refreshed Folder Event: ', parentData); + }); /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - SUPERPICKER diff --git a/js/tree.js b/js/tree.js index e81c54281..cf7e568d1 100644 --- a/js/tree.js +++ b/js/tree.js @@ -87,13 +87,16 @@ this.populate(this.$element); }, - populate: function populate($el) { + populate: function populate($el, isBackgroundProcess) { var self = this; var $parent = ($el.hasClass('tree')) ? $el : $el.parent(); var loader = $parent.find('.tree-loader:eq(0)'); var treeData = $parent.data(); + isBackgroundProcess = isBackgroundProcess || false; // no user affordance needed (ex.- "loading") - loader.removeClass('hide hidden'); // hide is deprecated + if (isBackgroundProcess === false) { + loader.removeClass('hide hidden'); // hide is deprecated + } this.options.dataSource(treeData ? treeData : {}, function (items) { loader.addClass('hidden'); @@ -423,9 +426,27 @@ } } + }, + + // This refreshes the children of a folder. Please destroy and re-initilize for "root level" refresh. + // The data of the refreshed folder is not updated. This control's architecture only allows updating of children. + // Folder renames should probably be handled directly on the node. + refreshFolder: function refreshFolder($el) { + var $treeFolder = $el.closest('.tree-branch'); + var $treeFolderChildren = $treeFolder.find('.tree-branch-children'); + $treeFolderChildren.eq(0).empty(); + + if ($treeFolder.hasClass('tree-open')) { + this.populate($treeFolderChildren, false); + } + else { + this.populate($treeFolderChildren, true); + } + + this.$element.trigger('refreshedFolder.fu.tree', $treeFolder.data()); } - }; + }; // ALIASES diff --git a/test/tree-test.js b/test/tree-test.js index 1b2debcf9..96a5ad424 100644 --- a/test/tree-test.js +++ b/test/tree-test.js @@ -15,6 +15,15 @@ define(function (require) { var callLimit = 50; var callCount = 0; + function guid () { + function s4 () { + return Math.floor((1 + Math.random()) * 0x10000) + .toString(16) + .substring(1); + } + return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4(); + } + this.dataSource = function (options, callback) { if (callCount >= callLimit) { callback({ @@ -39,14 +48,14 @@ define(function (require) { name: 'Ascending and Descending', type: 'folder', attr: { - id: 'folder1' + id: 'folder' + guid(), } }, { name: 'Sky and Water I (with custom icon)', type: 'item', attr: { - id: 'item1', + id: 'folder' + guid(), 'data-icon': 'glyphicon glyphicon-file' } }, @@ -54,7 +63,7 @@ define(function (require) { name: 'Drawing Hands', type: 'folder', attr: { - id: 'folder2', + id: 'folder' + guid(), 'data-children': false } }, @@ -69,7 +78,7 @@ define(function (require) { name: 'Belvedere', type: 'folder', attr: { - id: 'folder3' + id: 'folder' + guid(), } }, { @@ -84,7 +93,7 @@ define(function (require) { name: 'House of Stairs', type: 'folder', attr: { - id: 'folder4' + id: 'folder' + guid(), } }, { @@ -111,6 +120,7 @@ define(function (require) { ] }); }; + } }); @@ -365,6 +375,27 @@ define(function (require) { $tree.tree('discloseAll'); }); + test("should refresh an already opened/cached folder with new nodes", function () { + var $tree = $(html).find('#MyTree'); + var $folderToRefresh; + var initialLoadedFolderId, refreshedLoadedFolderId; + var selector = '.tree-branch-children > li:eq(0)'; + + $tree.tree({ + dataSource: this.dataSource + }); + $folderToRefresh = $tree.find('.tree-branch:eq(1)'); + + // open folder + $tree.tree('discloseFolder', $folderToRefresh.find('.tree-branch-name')); + equal($folderToRefresh.find('.tree-branch-children > li').length, 8, 'Folder has been populated with items/sub-folders'); + initialLoadedFolderId = $folderToRefresh.find(selector).attr('id'); + + // refresh and see if it's the same ID + $tree.tree('refreshFolder', $folderToRefresh); + refreshedLoadedFolderId = $folderToRefresh.find('.tree-branch-children > li:eq(0)').attr('id'); + notEqual(refreshedLoadedFolderId, initialLoadedFolderId, 'Folder has been refreshed and populated with different items/sub-folders'); + }); test("should destroy control", function () { var $tree = $(html).find('#MyTree');