EditComponentMenuView.html

<% var isStock = stock[editingComponent]; %>
Name: &nbsp;&nbsp;<input data-property="name" value="<%= thisComponent.name %>" placeholder="Enter Name" class="seventyFiveWidth form-control textInput component" type="text"><br/><br/>
Parent: &nbsp;&nbsp;
    <div class="btn-group">
        <button data-toggle="dropdown" class="btn dropdown-toggle" type="button"><% if (thisComponent.parent){ %><%= components[thisComponent.parent].name %><% }else{ %>No Parent Selected<% } %><span class="caret"></span></button>
        <ul role="menu" class="dropdown-menu">
            <% _.each(components, function(component){ %>
                <% if (component.id == editingComponent || descendants.indexOf(component.id)>=0) return; %>
                <li><a class="changeParent dropdownSelector" data-id="<%= component.id %>" href="#"><%= component.name %></a></li>
            <% }); %>
            <li><a class="changeParent dropdownSelector" href="#">None</a></li>
        </ul>
    </div><br/><br/>
<% if(!isStock){ %>
    <% if(thisComponent.children.length == 0){ %>No Children<% }else{ %>Children:<% }%> &nbsp;&nbsp;
    <div class="btn-group pull-right">
        <button data-toggle="dropdown" class="btn dropdown-toggle" type="button">+ Add Child<span class="caret"></span></button>
        <ul role="menu" class="dropdown-menu">
            <% _.each(components, function(component, id){ %>
                <% if (component.id == editingComponent || ancestors.indexOf(component.id)>=0 || thisComponent.children.indexOf(component.id)>=0) return; %>
                <li><a class="addChild dropdownSelector" data-id="<%= id %>" href="#"><%= component.name %></a></li>
            <% }); %>
            <% _.each(stock, function(thisStock, id){ %>
                <% if (thisStock.id == editingComponent || ancestors.indexOf(thisStock.id)>=0 || thisComponent.children.indexOf(thisStock.id)>=0) return; %>
                <li><a class="addChild dropdownSelector" data-id="<%= id %>" href="#"><%= thisStock.name %></a></li>
            <% }); %>
        </ul>
    </div><br/><br/>
    <% var treeLevel = 0; %>
    <% _.each(tree, function(level, id){ %>
        <% if (descendants.indexOf(id)<0) return; %>
        <% var component = components[id] || stock[id]; %>
        <% treeLevel++; %>
        <div class="alternatingColorList<% if (treeLevel%2 == 0){ %> evenListItem<% } %>" ><label style="padding-left:<%= (level-tree[editingComponent]-1)*10 + 20 %>px"><%= component.name %>
            <% if(tree[editingComponent]+1 == level){ %><a data-id="<%= id %>" class="removeChild pull-right" href="#">Remove</a><% } %></label></div><br/>
    <% }); %><br/>

    Motion:<label class="checkbox pull-right" for="isStatic">
        <input id="isStatic" data-property="isStatic" type="checkbox" <% if (thisComponent.isStatic){ %> checked="checked"<% } %> value="" data-toggle="checkbox" class="component custom-checkbox">
        <span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
        Is Static</label><br/>
        <% if (!thisComponent.isStatic){ %>
            <label class="checkbox" for="isRotary">
            <input id="isRotary" data-property="rotary" type="checkbox" <% if (thisComponent.rotary){ %> checked="checked"<% } %> value="" data-toggle="checkbox" class="component custom-checkbox">
            <span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
            Rotary Axis (default is Linear)</label>
            Vector of Motion (xyz):<br/>
            <input data-property="motionVector" data-key="x" value="<%= thisComponent.motionVector.x %>" placeholder="X" class="form-control floatInput component" type="text">&nbsp;
            <input data-property="motionVector" data-key="y" value="<%= thisComponent.motionVector.y %>" placeholder="Y" class="form-control floatInput component" type="text">&nbsp;
            <input data-property="motionVector" data-key="z" value="<%= thisComponent.motionVector.z %>" placeholder="Z" class="form-control floatInput component" type="text"><br/><br/>
            <% if (thisComponent.rotary){ %>
                Center of Rotation, relative to Origin (xyz):<br/>
                <input data-property="centerOfRotation" data-key="x" value="<%= thisComponent.centerOfRotation.x %>" placeholder="X" class="form-control floatInput component" type="text">&nbsp;
                <input data-property="centerOfRotation" data-key="y" value="<%= thisComponent.centerOfRotation.y %>" placeholder="Y" class="form-control floatInput component" type="text">&nbsp;
                <input data-property="centerOfRotation" data-key="z" value="<%= thisComponent.centerOfRotation.z %>" placeholder="Z" class="form-control floatInput component" type="text"><br/><br/>
            <% } %>
            Jog: &nbsp;&nbsp;<br/>
        <% } %>
        <br/>
    <a id="uploadStl" href="#" class="btn btn-block btn-lg btn-default">Upload STL</a><br/>
    STL: &nbsp;&nbsp;STL Name<br/><br/>
<% } else { %>
    Material: &nbsp;&nbsp;
        <div class="btn-group">
            <button data-toggle="dropdown" class="btn dropdown-toggle" type="button"><%= materials[thisComponent.description.materialName].name %><span class="caret"></span></button>
            <ul role="menu" class="dropdown-menu">
                <% _.each(allMaterials[materialClass], function(material, key){ %>
                    <li><a class="stockMaterial dropdownSelector" data-id="<%= key %>" href="#">
                        <div class="materialColorSwatch">
                        <div style="background-color:<% if(realisticColorScheme){ %><%= material.color %><% }else{ %><%= material.altColor %><% } %>"></div>
                        <span><span class="materialListTitle"><%= material.name %></span></span></div>
                    </a></li>
                <% }); %>
                <% _.each(materials, function(material, key){
                    if (key.substr(0,5) == "super") return;
                    if (material.noDelete) return; %>
                    <li><a class="stockMaterial dropdownSelector" data-id="<%= key %>" href="#">
                        <div class="materialColorSwatch">
                        <div style="background-color:<% if(realisticColorScheme){ %><%= material.color %><% }else{ %><%= material.altColor %><% } %>"></div>
                        <span class="materialListTitle"><%= material.name %></span></div>
                    </a></li>
                <% }); %>
            </ul>
        </div><br/><br/>
<% } %>
Offset (xyz):&nbsp;&nbsp;
    <input data-property="translation" data-key="x" value="<%= translation.x %>" placeholder="X" class="form-control floatInput stl" type="text">&nbsp;
    <input data-property="translation" data-key="y" value="<%= translation.y %>" placeholder="Y" class="form-control floatInput stl" type="text">&nbsp;
    <input data-property="translation" data-key="z" value="<%= translation.z %>" placeholder="Z" class="form-control floatInput stl" type="text"><br/><br/>
Rotation (xyz):&nbsp;&nbsp;
    <input data-property="rotation" data-key="x" value="<%= rotation.x %>" placeholder="X" class="form-control floatInput stl" type="text">&nbsp;
    <input data-property="rotation" data-key="y" value="<%= rotation.y %>" placeholder="Y" class="form-control floatInput stl" type="text">&nbsp;
    <input data-property="rotation" data-key="z" value="<%= rotation.z %>" placeholder="Z" class="form-control floatInput stl" type="text"><br/><br/>
<% if(!isStock){ %> Scale: &nbsp;&nbsp;<input data-property="scale" value="<%= scale %>" placeholder="Scale" class="form-control floatInput stl" type="text"><br/><br/><% } %>
<a id="deleteComponent" href="#" class="btn btn-halfWidth btn-lg btn-default"><span class="fui-trash"></span> Delete</a>
<a id="finishComponent" href="#" class="btn btn-halfWidth pull-right btn-lg btn-success">Save <% if(isStock){ %>Stock<% }else{ %>Component<% } %></a><br/><br/>