JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<ul class="timeline">

</ul>

JavaScript

var scene = {

	meshes: [
  	{
    	id: "mesh1",
      position: {
      	x: 0,
        y: 1,
        z: 3
      },
      rotation: {
      	x: 1,
        y: 2,
        z: 0
      },
      scaling: {
      	x: 1,
        y: 1,
        z: 1
      },
      visibility: 1
    }
  ]
}


function Timeline(scene,options){
	
	var t = this;
  
  t.selector = '.timeline';
  t.parentElement = $(t.selector);
  
  t.getKeys = function(obj){
     var keys = [];
     for(var key in obj){
        keys.push(key);
     }
     return keys;
  }
	
	t.loadTimeline = function(){
		
		for(let m=0;m<scene.meshes.length;m++){
    
    console.log("FOUND A MESH");
			
			var track = $('<li class="mesh-track"><ul class="property-tracks"></ul></li>');
			
      t.parentElement.append(track);
      
			for(let p=0;p<options.properties.length;p++){
			
				var ptrack;

				if(typeof(scene.meshes[m][options.properties[p]]) == "object"){
        
        	var keys = t.getKeys(scene.meshes[m][options.properties[p]]);
          
          for(let k=0;k<keys.length;k++){
          
          	ptrack = $('<li class="property-track" data-property="' + options.properties[p] + '" data-key="' + keys[k] + '"><label>' + keys[k] + ':<input type="text" value="' + scene.meshes[m][options.properties[p]][keys[k]] + '" /></label></li>');
            
            ptrack.find('input').change(function(){
            
             scene.meshes[m][options.properties[p]][keys[k]] = parseFloat($(this).val());

            });
            
            track.find('>ul').append(ptrack);
          
          }
        
        } else {
        
        	ptrack = $('<li class="property-track" data-property="' + options.properties[p] + '"><label>' + options.properties[p] + '<input type="text" value="' + scene.meshes[m][options.properties[p]] + '" /></label></li>');
          
         ptrack.find('input').change(function(){
            
             scene.meshes[m][options.properties[p]] = parseFloat($(this).val());
       ...