<pre id="pre">
<code id="code">
</code>
</pre>
<div id="colorPreview"></div>
<div class="github">
  <a class="btn btn-link" href="https://github.com/matteobruni/object-gui" title="Find more info on GitHub" target="_blank">
    <img class="img-fluid" id="gh-mark" src="https://cdn.matteobruni.it/images/particles/GitHub-Mark-120px-plus.png" alt="">
    <span id="gh-project">Object GUI</span>
  </a>
  <div>
    <a class="github-button" href="https://github.com/matteobruni/object-gui" data-icon="octicon-star" aria-label="Star matteobruni/object-gui on GitHub">Star</a>
    <a class="github-button" href="https://github.com/matteobruni/object-gui/fork" data-icon="octicon-repo-forked" aria-label="Fork matteobruni/object-gui on GitHub">Fork</a>
  </div>
</div>
<script async="" defer="" src="https://buttons.github.io/buttons.js"></script>

#colorPreview {
  width: 2em;
  height: 2em;
  border-radius: 0.5em;
  border: 1px solid #000;
}

.github {
  bottom: 10px;
  right: 10px;
  position: fixed;
  border-radius: 10px;
  background: #fff;
  padding: 6px 12px 6px 12px;
  border: 1px solid #000;
  font-family: sans-serif;
}

.github a:hover,
.github a:link,
.github a:visited,
.github a:active {
  color: #000;
  text-decoration: none;
}

.github img {
  height: 30px;
}

.github #gh-project {
  font-size: 20px;
  padding-left: 5px;
  font-weight: bold;
  vertical-align: bottom;
}

const code = document.getElementById("code");

const data = {
  enable: true,
  prop1: "pluto",
  prop2: 3,
  group1: {
    prop1: "paperino",
    prop2: 0.3
  },
  color1: "#ff0000",
  select1: "Item 2",
  alert: function () {
    alert(JSON.stringify(data, null, 4));
  }
};

const editor = new Editor("sample", "Sample", () => data);

editor.top().right();
editor.theme("neu-dark");

const group1 = editor.root.addGroup("group1", "Group 1", true);

group1.addProperty("prop1", "Property 1", "string").change(() => {
  code.innerText = JSON.stringify(data, null, 4);

  console.log(data);
});

group1
  .addProperty("prop2", "Property 2", "number")
  .min(0)
  .max(1)
  .step(0.01)
  .change(() => {
    code.innerText = JSON.stringify(data, null, 4);

    console.log(data);
  });

editor.root.addProperty("enable", "Enable", "boolean").change(() => {
  code.innerText = JSON.stringify(data, null, 4);

  console.log(data);
});

editor.root.addProperty("prop1", "Property 1", "string").change(() => {
  code.innerText = JSON.stringify(data, null, 4);

  console.log(data);
});

editor.root
  .addProperty("prop2", "Property 2", "number")
  .min(0)
  .max(10)
  .step(0.5)
  .change(() => {
    code.innerText = JSON.stringify(data, null, 4);

    console.log(data);
  });

editor.root.addProperty("color1", "Color 1", "color").change(() => {
  code.innerText = JSON.stringify(data, null, 4);

  document.getElementById("colorPreview").style.backgroundColor = data.color1;

  console.log(data);
});

const select1Input = editor.root
  .addProperty("select1", "Select 1", "select")
  .change(() => {
    code.innerText = JSON.stringify(data, null, 4);

    console.log(data);
  });

select1Input.addItem("Item 1");
select1Input.addItem("Item 2");
select1Input.addItem("Item 3");

editor.root.addButton("alert", "Alert");

code.innerText = JSON.stringify(data, null, 4);

document.getElementById("colorPreview").style.backgroundColor = data.color1;