JSFiddle - React, Tailwind, and code Playground

by ppanagi

JavaScript

REGIONS_STRUCTURE = {
    window: { name: 'window', view: 'Dynopia.WindowView', children: [
        { name: 'top', view: 'Dynopia.TopView' },
        { name: 'bottom', view: 'Dynopia.BottomView' },
        { name: 'overlay', view: 'Dynopia.OverlayView' },
        { name: 'main', view: 'Dynopia.MainView', children: [
            { name: 'dashboard', view: 'Dynopia.DashboardView' },
            { name: 'navigation', view: 'Dynopia.NavigationView' },
            { name: 'workspaceContainer', view: 'Dynopia.WorkspaceContainer', children: [
                { name: 'toolbar', view: 'Dynopia.ToolbarView', children: [
                    { name: 'leftToolbar', view: 'Dynopia.LeftToolbarView' },
                    { name: 'rightToolbar', view: 'Dynopia.RightToolbarView' }
                ]},
                { name: 'leftbar', view: 'Dynopia.LeftbarView', children: [
                    { name: 'topLeftbar', view: 'Dynopia.TopLeftbarView' },
                    { name: 'bottomLeftbar', view: 'Dynopia.BottomLeftbarView' }
                ]},
                { name: 'content', view: 'Dynopia.ContentView' }
            ]}
        ]}
    ]}
}

function process(name, view, parent) {
  document.write('<p>name:' + name + " view:" + view + " parent:" + parent + '</p>');
}

function traverse(o, parent, func) {
  for (key in o) {  
    console.log(o[key].children.length);
      func.apply(this,[o[key].name, o[key].view, parent]);
   
      if(o[key].children && o[key].children.length>0){
          parent = o.name;
          var children = o[key].children;
          for(i=0; i++; i<children.length){
              traverse(children[i], parent, func);
          }
      }
  }
}
        
        
traverse(REGIONS_STRUCTURE, null, process);