<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <script src="../../dist/jsoneditor.js"></script>
</head>
<body>

<textarea class="debug" cols="30" rows="10"></textarea>
<div class="state"></div>
<button class='get-value'>Get Value</button>
<div class='container'></div>

<script>
  var container = document.querySelector('.container');
  var debug = document.querySelector('.debug');
  var getValue = document.querySelector('.get-value');
  var state = document.querySelector('.state')

  var schema = {
    "type": "object",
    "title": "readOnly",
    "properties": {
      "string": {
        "title": "string",
        "type": "string",
        "readOnly": true,
        "default": "some value"
      },
      "number": {
        "title": "number",
        "type": "number",
        "readOnly": true,
        "default": 5.5
      },
      "integer": {
        "title": "integer",
        "type": "integer",
        "readOnly": true,
        "default": 5
      },
      "multiselect": {
        "title": "multiselect",
        "type": "array",
        "format": "multiselect",
        "uniqueItems": true,
        "readOnly": true,
        "items": {
          "type": "string",
          "enum": ["value1","value2"]
        }
      },
      "select": {
        "title": "select",
        "type": "boolean",
        "readOnly": true
      },
      rating: {
        "title": "rating",
        "readOnly": true,
        "type": "integer",
        "format": "rating",
        "maximum": "5",
        "exclusiveMaximum": false
      },
      checkbox: {
        "title": "checkbox",
        "format": "checkbox",
        "type": "boolean",
        "readOnly": true
      }
    }
  };

  var editor = new JSONEditor(container, {
    schema: schema
  });

  editor.on('ready',function() {
    state.innerText = 'READY'
  });

  getValue.addEventListener('click', function () {
    debug.value = JSON.stringify(editor.getValue());
  });

</script>

</body>
</html>
