Add openAtDepth function + minor fixes (#34)

* Build after the fix of typo 'appendChildren'

* Add openAtDepth function

* Fix readme about configurations

* Fix call to toggleOpen before any rendering

* Add some documentation in README

* Add example for openAtDepth in README

Author: PaulBernier

README.md

@@ -43,19 +43,35 @@ Default:
   hoverPreviewEnabled: false,
   hoverPreviewArrayCount: 100,
   hoverPreviewFieldCount: 5,
-  theme: ''
+  theme: '',
+  animateOpen: true,
+  animateClose: true
 }
 ```
 Available configurations:
 ##### Hover Preview
 * `hoverPreviewEnabled`:  enable preview on hover.
 * `hoverPreviewArrayCount`: number of array items to show in preview Any array larger than this number will be shown as `Array[XXX]` where `XXX` is length of the array.
 * `hoverPreviewFieldCount`: number of object properties to show for object preview. Any object with more properties that thin number will be truncated.
+
+##### Theme
+* `theme`: a string that can be any of these options: `['dark']`. Look at [`src/style.less`](src/style.less) for making new themes.
+
+##### Animation
 * `animateOpen`: enable animation when expanding json object. True by default.
 * `animateClose`: enable animation when closing json object. True by default.
 
-##### Theme
- * `theme`: a string that can be any of these options: `['dark']`. Look at [`src/style.less`](src/style.less) for making new themes.
+#### `openAtDepth([depth])`
+
+```js
+const formatter = new Formatter({ ... });
+document.body.appendChild(formatter.render());
+formatter.openAtDepth(3);
+```
+
+##### `depth` (`Number`)
+Default: `1`
+This number indicates up to how many levels the rendered tree should open. It allows use cases such as collapse all levels (with value `0`) or expand all levels (with value `Infinity`).
 
 ### Development
 Install the dependencies:

dist/json-formatter.js

@@ -200,14 +200,38 @@ export = class JSONFormatter {
   toggleOpen() {
     this.isOpen = !this.isOpen;
 
-    if (this.isOpen) {
-      this.appendChildren(this.config.animateOpen);
-    } else{
-      this.removeChildren(this.config.animateClose);
+    if (this.element) {
+      if (this.isOpen) {
+        this.appendChildren(this.config.animateOpen);
+      } else{
+        this.removeChildren(this.config.animateClose);
+      }
+      this.element.classList.toggle(cssClass('open'));
+    }
+  }
+
+  /**
+  * Open all children up to a certain depth.
+  * Allows actions such as expand all/collapse all
+  *
+  */
+  openAtDepth(depth = 1) {
+    if (depth < 0) {
+      return;
     }
 
+    this.open = depth;
+    this.isOpen = (depth !== 0);
+
     if (this.element) {
-      this.element.classList.toggle(cssClass('open'));
+      this.removeChildren(false);
+
+      if (depth === 0) {
+        this.element.classList.remove(cssClass('open'));
+      } else {
+        this.appendChildren(this.config.animateOpen);
+        this.element.classList.add(cssClass('open'));
+      }
     }
   }
 

dist/json-formatter.js.map

@@ -65,4 +65,76 @@ describe('url string', ()=> {
   it('should make a link and add class "url"', ()=> {
     expect(formatter.render().querySelector('a.json-formatter-url')).not.to.equal(null);
   });
-});
+});
+
+describe('openAtDepth after rendering', ()=> {
+  const formatter = new JSONFormatter({depth1: {depth2: {depth3 : {depth4: 21}}}}, Infinity, {animateOpen: false, animateClose: false});
+  const element = formatter.render();
+
+  it('should open at depth 1', ()=> {
+    formatter.openAtDepth();
+    expect(element.outerHTML).to.contain('depth1');
+    expect(element.outerHTML).to.not.contain('depth2');
+    expect(element.outerHTML).to.not.contain('depth3');
+    expect(element.outerHTML).to.not.contain('depth4');
+  });
+
+  it('should collapses all', ()=> {
+    formatter.openAtDepth(0);
+    expect(element.outerHTML).to.not.contain('depth1');
+  });
+
+  it('should expand all', ()=> {
+    formatter.openAtDepth(Infinity);
+    expect(element.outerHTML).to.contain('depth1');
+    expect(element.outerHTML).to.contain('depth2');
+    expect(element.outerHTML).to.contain('depth3');
+    expect(element.outerHTML).to.contain('depth4');
+    expect(element.outerHTML).to.contain('21');
+  });
+});
+
+describe('openAtDepth before any rendering', ()=> {
+  const formatter = new JSONFormatter({depth1: {depth2: {depth3 : {depth4: 21}}}}, Infinity, {animateOpen: false, animateClose: false});
+
+  it('should open at depth 1', ()=> {
+    formatter.openAtDepth();
+    const element = formatter.render();
+    expect(element.outerHTML).to.contain('depth1');
+    expect(element.outerHTML).to.not.contain('depth2');
+    expect(element.outerHTML).to.not.contain('depth3');
+    expect(element.outerHTML).to.not.contain('depth4');
+  });
+});
+
+describe('toggleOpen after rendering', ()=> {
+
+  it('should toggle', ()=> {
+    const formatter = new JSONFormatter({depth1: {depth2: {depth3 : {depth4: 21}}}}, Infinity, {animateOpen: false, animateClose: false});
+    const element = formatter.render();
+
+    expect(element.outerHTML).to.contain('Object');
+    expect(element.outerHTML).to.contain('depth1');
+
+    formatter.toggleOpen();
+    
+    expect(element.outerHTML).to.contain('Object');
+    expect(element.outerHTML).to.not.contain('depth1');
+    expect(element.outerHTML).to.not.contain('depth2');
+    expect(element.outerHTML).to.not.contain('depth3');
+    expect(element.outerHTML).to.not.contain('depth4');
+  });
+});
+
+describe('toggleOpen before any rendering', ()=> {
+    it('should toggle', ()=> {
+      const formatter = new JSONFormatter({depth1: {depth2: {depth3 : {depth4: 21}}}}, Infinity, {animateOpen: false, animateClose: false});
+      formatter.toggleOpen();
+      const element = formatter.render();
+      expect(element.outerHTML).to.contain('Object');
+      expect(element.outerHTML).to.not.contain('depth1');
+      expect(element.outerHTML).to.not.contain('depth2');
+      expect(element.outerHTML).to.not.contain('depth3');
+      expect(element.outerHTML).to.not.contain('depth4');
+    });
+});