Merge branch 'master' of github.com:mohsen1/json-formatter-js

Mohsen Azimi · Mohsen Azimi · commit 4d94fe8512ad · 2016-07-13T23:07:53.000-07:00
diff --git a/.travis.yml b/.travis.yml
@@ -1,5 +1,6 @@
+sudo: required
 language: node_js
-
+node_js: [stable]
 before_install:
   - export DISPLAY=:99.0
-  - sh -e /etc/init.d/xvfb start
+  - sh -e /etc/init.d/xvfb start
diff --git a/README.md b/README.md
@@ -6,6 +6,7 @@
 
 JSON Formatter started as an [AngularJS directive](https://github.com/mohsen1/json-formatter). This is pure JavaScript implementation of the same module.
 
+**[Live Demo](http://azimi.me/json-formatter-js/)**
 
 ### Usage
 
@@ -47,9 +48,11 @@ Default:
 ```
 Available configurations:
 ##### Hover Preview
-* `hoverPreviewEnabled`:  enable preview on hover
+* `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.
+* `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.
diff --git a/dist/bundle.js b/dist/bundle.js
diff --git a/dist/bundle.js.map b/dist/bundle.js.map
diff --git a/index.html b/index.html
@@ -15,14 +15,17 @@
       border-radius: 5px;
       padding: 10px;
     }
-    code {
+    h1 code {
       font-size: 2em;
     }
     pre {
       font-size: 1.5rem;
       background: #efefef;
       padding: 1em;
     }
+    textarea {
+      font-family: monospace;
+    }
     </style>
   </head>
   <body>
@@ -74,24 +77,34 @@ <h2>Playground</h2>
             <div id="live-result"></div>
           </td>
         </tr>
+        <tr>
+          <p>
+            <input type="checkbox" id="hoverPreviewEnabled">
+            <label for="hoverPreviewEnabled"><code>hoverPreviewEnabled</code></label>
+          </p>
+        </tr>
       </table>
     </div>
     <h2>Examples</h2>
     <div class="result"></div>
     <script>
       var live = document.getElementById('live');
+      var hoverPreviewEnabledCheckbox = document.getElementById('hoverPreviewEnabled');
+
 
       function render() {
+        live.style.backgroundColor = 'transparent';
         var result = document.getElementById('live-result');
         try {
-          var formatter = new JSONFormatter(JSON.parse(live.value));
+          var formatter = new JSONFormatter(JSON.parse(live.value), 1, {hoverPreviewEnabled: hoverPreviewEnabledCheckbox.checked});
           result.innerHTML = '';
           result.appendChild(formatter.render());
         } catch(e) {
-          console.error(e);
+          live.style.backgroundColor = 'rgba(255, 87, 34, 0.35)';
         }
       }
       live.addEventListener('keyup', render);
+      hoverPreviewEnabledCheckbox.addEventListener('change', render);
       render();
     </script>
     <script>
@@ -160,4 +173,4 @@ <h2>Examples</h2>
       })
     </script>
   </body>
-</html>
+</html>
diff --git a/server.js b/server.js
@@ -1,13 +1,13 @@
 'use strict';
 var webpack = require('webpack');
 var webpackDevServer = require('webpack-dev-server');
-
+var PORT = process.env.PORT || 8080;
 var config = require("./webpack.config.js");
-config.entry.app.unshift("webpack-dev-server/client?http://localhost:8080/", "webpack/hot/dev-server");
+config.entry.app.unshift(`webpack-dev-server/client?http://localhost:{PORT}/`, "webpack/hot/dev-server");
 var compiler = webpack(config);
 var server = new webpackDevServer(compiler, {
   progress: true,
   quiet: true,
   publicPath: config.output.publicPath
 });
-server.listen(8080, console.log.bind(null, 'Development server started at http://localhost:8080'));
+server.listen(PORT, console.log.bind(null, `Development server started at http://localhost:${PORT}`));
diff --git a/src/index.ts b/src/index.ts
@@ -24,13 +24,17 @@ interface JSONFormatterConfiguration {
   hoverPreviewEnabled: boolean;
   hoverPreviewArrayCount: number;
   hoverPreviewFieldCount: number;
+  animateOpen: boolean;
+  animateClose: boolean;
   theme: string;
 };
 
 const _defaultConfig: JSONFormatterConfiguration = {
   hoverPreviewEnabled: false,
   hoverPreviewArrayCount: 100,
   hoverPreviewFieldCount: 5,
+  animateOpen: true,
+  animateClose: true,
   theme: null
 };
 
@@ -134,7 +138,7 @@ export = class JSONFormatter {
 
   /*
    * is this an object?
-   * Note: In this context objects are array as well
+   * Note: In this context arrays are object as well
   */
   private get isObject(): boolean {
     return isObject(this.json);
@@ -197,9 +201,9 @@ export = class JSONFormatter {
     this.isOpen = !this.isOpen;
 
     if (this.isOpen) {
-      this.appendChildern(true);
+      this.appendChildern(this.config.animateOpen);
     } else{
-      this.removeChildren(true);
+      this.removeChildren(this.config.animateClose);
     }
 
     if (this.element) {
diff --git a/test/karma.conf.js b/test/karma.conf.js
@@ -16,6 +16,7 @@ module.exports = function(config) {
 
     // List of files / patterns to load in the browser
     files: [
+      'dist/bundle.js',
       'test/spec.ts'
     ],
 
diff --git a/test/spec.ts b/test/spec.ts
@@ -3,12 +3,11 @@
 declare const describe;
 declare const it;
 declare const expect;
-
-import JSONFormatter from '../dist/bundle.js'
+declare const JSONFormatter;
 
 
 describe('null', ()=> {
-  it('should render "null"', function () {
+  it('should render "null"', ()=> {
     const formatter = new JSONFormatter(null);
 
     expect(formatter.render().innerText).to.contain('null');
@@ -41,11 +40,6 @@ describe('string', ()=> {
 
     expect(formatter.render().innerText).to.contain('Hello World');
   });
-
-  it('should assing date class to date string', ()=> {
-    const formatter = new JSONFormatter('2015-12-05T18:58:53.727Z');
-    expect(formatter.render().querySelector('.json-formatter-date')).not.to.be.null;
-  });
 });
 
 describe('date string', ()=> {
@@ -55,9 +49,9 @@ describe('date string', ()=> {
     expect(formatter.render().innerText).to.contain('"' + (new Date(0)).toString() + '"');
   });
 
-  it('add the "date" class', ()=> {
-
-    expect(formatter.render().querySelector('.json-formatter-date')).not.to.equal(null);
+  it('should assing date class to date string', ()=> {
+    const formatter = new JSONFormatter('2015-12-05T18:58:53.727Z');
+    expect(formatter.render().querySelector('.json-formatter-date')).not.to.be.null;
   });
 });
 
