Aurelia JSON Debugger

aurelia-json-debugger.html

<template>
  <require from="./aurelia-json-debugger.css"></require>

  <div class="aurelia-json-debugger
    ${editMode ? 'active' : ''}
    ${error ? 'error' : ''}">

    <div
      class="aurelia-json-debugger-error"
      show.bind="error">
      Invalid JSON
    </div>

    <pre><code
      contenteditable="true"
      text-content.two-way="json"
      focus.trigger="toogleMode()"
      blur.trigger="toogleMode()"
      keyup.delegate="updateObject()"></code></pre>
  </div>
</template>

aurelia-json-debugger.scss

aurelia-json-debugger {
  display: block;
}

.aurelia-json-debugger {
  position: relative;

  .aurelia-json-debugger-error {
    position: absolute;
    font-size: 11px;
    position: absolute;
    background-color: #f39898;
    font-size: 11px;
    right: 4px;
    top: 4px;
    border-radius: 3px;
    padding: 5px 10px;
    color: #fff;
  }

  & pre {
    padding: 8px;
    margin: 0 0 15px;
    font-size: 13px;
    line-height: 1.72222;
    color: inherit;
    white-space: pre;
    background-color: #fff;
    border: 2px solid #e7e9ec;
    border-radius: 6px;
  }

  &.active pre {
    border-color: #c784ff;
  }

  &.error pre {
    border-color: #f39898;
  }

  & pre code {
    padding: 0;
    font-size: inherit;
    color: inherit;
    white-space: pre-wrap;
    background-color: transparent;
    border-radius: 0;
    outline: none;
  }
}

aurelia-json-debugger.ts

import {bindable, bindingMode} from 'aurelia-framework';

export class AureliaJsonDebugger {
  private interval: any;
  private boject: Object;

  @bindable({defaultBindingMode: bindingMode.twoWay}) private object: any;
  @bindable private spaces: number = 2;

  public json: string;
  public error: boolean = false;
  public editMode: boolean = false;

  public bind(boject: Object): void {
    // Make sure spaces is a Number.
    this.spaces = Number(this.spaces);

    this.updateJson();
    this.interval = setInterval(() => this.updateJson(), 150);
  }

  public unbind(): void {
    this.object = null;
    clearInterval(this.interval);
  }

  public toogleMode(save: boolean): void {
    this.editMode = !this.editMode;
  }

  public updateObject(): void {
    if (this.json) {
      try {
        this.object = JSON.parse(this.json);
        this.error = false;
      } catch (err) {
        this.error = true;
      }
    }
  }

  private updateJson(): void {
    if (!this.editMode) {
      if (this.object === null) {
        this.json = 'null';
      } else if (this.object === undefined) {
        this.json = 'undefined';
      } else {
        this.json = JSON.stringify(this.object, null, this.spaces);
      }
    }
  }
}