JSFiddle - React, Tailwind, and code Playground

by MatyasSvejdik

HTML

<!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Sortable - Connect lists</title>
    <script src="https://viewer.shapediver.com/v2/2.14.0/sdv.concat.min.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <style>
      #sortable1,
      #sortable2 {
        border: 1px solid #eee;
        width: 142px;
        min-height: 20px;
        list-style-type: none;
        margin: 0;
        padding: 5px 0 0 0;
        float: left;
        margin-right: 10px;
      }

      #sortable1 li,
      #sortable2 li {
        margin: 0 5px 5px 5px;
        padding: 5px;
        font-size: 1.2em;
        width: 120px;
      }

    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  </head>

  <body>
    <div id='sdv-container' style="width:100%;height:300px;">
    </div>
    <div id="parameters">
    </div>

    <ul id="sortable1" class="connectedSortable">
      <li id="O6" class="ui-state-default">Obyvaci pokoj<a href="#" class="delete">delete</a></li>
      <li id="S2" class="ui-state-default">Schody<a href="#" class="delete">delete</a></li>
      <li id="P3" class="ui-state-default">Pokoj<a href="#" class="delete">delete</a></li>
      <li id="K3" class="ui-state-default">Koupelna<a href="#" class="delete">delete</a></li>
      <li id="P4" class="ui-state-default">Pokoj<a href="#" class="delete">delete</a></li>
    </ul>
    <span class="jqValue"></span>

    <div id="adder">
      <input type="text" name="add1" />name<br />
      <input type="text" name="add2" />id<br />
      <input class='btn' type='submit' value='Submit' />
    </div>
    <span class="test"></span>

  </body>

</html>

JavaScript

var _container = document.getElementById('sdv-container');
// viewer settings 
var _viewerSettings = {
  // container to use 
  container: _container,
  // when creating the viewer, we want to get back an API v2 object 
  api: {
    version: 2
  },
  // ticket for a ShapeDiver model 
  ticket: 'ad7f8b415e8e520f99133becbc185a08c8929a7540d1405acbb398b41e3fc53315f1bd62cc929101407f71ceb5017c6ffbf54b3762416c1410c11d2d82cc0f2f9b8d44ac947ea2043e501fcd66abc1fc38fb9de036318cd301d42ac943a4e310e57060ec6f0b4c229844f89b87096ea2978c18808293-c1858d6c06b7a0b6532a92750cb740ba',
  modelViewUrl: 'eu-central-1'
};

// create the viewer, get back an API v2 object 
var api = new SDVApp.ParametricViewer(_viewerSettings);

var viewerInit = false;
var parameters;
api.scene.addEventListener(api.scene.EVENTTYPE.VISIBILITY_ON, function() {
  if (!viewerInit) {
    var globalDiv = document.getElementById("parameters");
    parameters = api.parameters.get();
    parameters.data.sort(function(a, b) {
      return a.order - b.order;
    });
    console.log(parameters.data);
    for (let i = 0; i < parameters.data.length; i++) {
      let paramInput = null;
      let paramDiv = document.createElement("div");
      let param = parameters.data[i];
      let label = document.createElement("label");
      label.setAttribute("for", param.id);
      label.innerHTML = param.name;
      if (param.type == "Int" || param.type == "Float" || param.type == "Even" || param.type == "Odd") {
        paramInput = document.createElement("input");
        paramInput.setAttribute("id", param.id);
        paramInput.setAttribute("type", "range");
        paramInput.setAttribute("min", param.min);
        paramInput.setAttribute("max", param.max);
        paramInput.setAttribute("value", param.value);
        if (param.type == "Int") paramInput.setAttribute("step", 1);
        else if (param.type == "Even" || param.type == "Odd") paramInput.setAttribute("step", 2);
        else paramInput.setAttribute("step", 1 /...