close #63: add an 'empty' class to objects and arrays w/o children

awendland · Jan 9, 2019 · 2852d56 · 2852d56
1 parent 808d1af
commit 2852d56
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/src/json-tree.js b/src/json-tree.js
@@ -112,6 +112,10 @@ angular.module('angular-json-tree', ['ajs.RecursiveDirectiveHelper'])
                     scope.isExpandable = true;
                     // Add expandable class for CSS usage
                     elem.addClass('expandable');
+                    // Add a class indicating an empty Object/Array (for removing expandable UI, if desired)
+                    if (Object.keys(scope.value).length < 1) {
+                      elem.addClass('empty');
+                    }
                     // Setup preview text
                     var isArray = utils.is(scope.value, 'Array');
                     scope.preview = isArray ? '[ ' : '{ ';

diff --git a/test/unit/json-tree-test.js b/test/unit/json-tree-test.js
@@ -12,9 +12,11 @@ describe('The json-tree directive', function () {
         scope.someObject = {
             test: 'hello',
             array: [1,1,2,3,5,8],
+            emptyArray: [],
+            emptyObject: {},
             subObj: {
                 subTest: 'hi',
-                subArray: [2,1,3,4,7,11]
+                subArray: [2,1,3,4,7,11],
             }
         };
     });
@@ -51,6 +53,15 @@ describe('The json-tree directive', function () {
         expect(expanded.length).toEqual(expandable.length);
     });
 
+    it('should indicate which expandable nodes are empty', function () {
+        var html = expandedHtml;
+        var elem = angular.element(html);
+        compile(elem)(scope);
+        scope.$digest();
+        var empty = elem[0].querySelectorAll('json-node.empty');
+        expect(empty.length).toEqual(2);
+    });
+
     it('should have no subnodes until click', function () {
         var html = unexpandedHtml;
         var elem = angular.element(html);