lib/z_Original_Working_meta.js
// Declare a function that we will use to drill into the object and make HTML as we traverse the branches.
Declare a function that we will use to drill into the object and make HTML as we traverse the branches.
Declare a function that we will use to drill into the object and make HTML as we traverse the branches .
function drillIntoObject(formElementObj, objKey, fieldsObject, objectNestLevel, previousPath)
    {
      for (let property in formElementObj[objKey][objKey + "0"])
      {
        if(typeof formElementObj[objKey][objKey + "0"][property] != 'object'){continue;}
        if (formElementObj[objKey][objKey + "0"][property][property + "0"])
        {
          if(formElementObj[objKey][objKey + "0"][property].labelText && !helpers.hasANumber(property))
          {
            elementString = elementString +
            "    ".repeat(objectNestLevel) + "    <div class=\"objectLabel\">" + formElementObj[objKey][objKey + "0"][property].labelText + " &#8681;</div>" + "\n";
          }
            let borderColor =  objectNestLevel % 3 === 0 ? "blue" : objectNestLevel % 2 === 0 ? "green" : "red"
            if(!helpers.hasANumber(property))
            {
              elementString = elementString +
              "    ".repeat(objectNestLevel) + 
              "    <div class=\"objectWrapper groupWrapper\"" +
              " style=\"border: 2px solid " + 
              borderColor + ";\"" + 
              ">" + "\n";
              elementString = elementString +
              "    ".repeat(objectNestLevel) + 
              "      <div class=\"objectWrapper elementWrapper\"" +
              " style=\"border: 2px solid " + 
              borderColor + ";\"" +               
              ">" + "\n";
            }
          drillIntoObject(formElementObj[objKey][objKey + "0"], property, fieldsObject[objKey][objKey + "0"], objectNestLevel + 1, previousPath + objKey + "_" + objKey + "0_");
          if(formElementObj[objKey][objKey + "0"])
          {
            elementString = elementString + 
            "    ".repeat(objectNestLevel) + "        <button type=\"button\" class=\"disabled controlObjectButton moveObjectUpButton blue\" disabled>Move Up</button>"  + "\n" + 
            "    ".repeat(objectNestLevel) + "        <button type=\"button\" class=\"disabled controlObjectButton moveObjectDownButton blue\" disabled>Move Down</button>"  + "\n" + 
            "    ".repeat(objectNestLevel) + "        <button type=\"button\" class=\"disabled controlObjectButton removeObjectButton red\" disabled>Remove</button>"  + "\n" +                         
            "    ".repeat(objectNestLevel) + "      </div>"  + "\n";
            elementString = elementString + "    ".repeat(objectNestLevel) +
            "      <button type=\"button\" class=\"addNewObjectButton\"" +
            " style=\"background-color: " + 
            borderColor + ";\"" +              
            ">Add New " + property[0].toUpperCase() + property.slice(1) + "</button>"  + "\n"; 
            elementString = elementString + 
            "    ".repeat(objectNestLevel) + "    </div>"  + "\n";
          }
          else
          {
            elementString = elementString +
            "    ".repeat(objectNestLevel) + "    </div>"  + "\n";
          }
        }
        else 
        { 
          let objectPath = objKey + "_" + objKey + "0_" + property;
          objectPath = previousPath.length === 0 ? objectPath : previousPath + objectPath;             
          let defaultElementsObject = fieldsObject[objKey][objKey + "0"][property].defaultElements[property];
          let mergedElements = extend(true, defaultElementsObject, formElementObj[objKey][objKey + "0"][property]);
          let attributeText = ""; 
          for (let key in mergedElements.attributes) 
          {
            attributeText = attributeText + 
            " " + key;  
            if(mergedElements.attributes[key])
            {
              attributeText = attributeText + 
              "=\"" + mergedElements.attributes[key] + "\"";
            }
          } 
          if(mergedElements.elementType === "input")
          {
            attributeText = attributeText + "/>";
          }
          else if(mergedElements.elementType === "select")
          {
            attributeText = attributeText + ">";
          }
          elementString = elementString +
          "    ".repeat(objectNestLevel) + "    <div class=\"inputWrapper\">" + "\n";
          let elementNameInTitleCase = elementName[0].toUpperCase() + elementName.slice(1); 
          if(mergedElements.labelText)
          {
            elementString = elementString +
            "    ".repeat(objectNestLevel) + "      <div class=\"inputLabel\">" + mergedElements.labelText + "</div>" + "\n";        
          }
          else 
          {
            elementString = elementString +
            "    ".repeat(objectNestLevel) + "      <div class=\"inputLabel\">" + elementNameInTitleCase + "</div>" + "\n";
          } 
          if(mergedElements.elementType === "input")
          {
            if(attributeText.length > 2)
            {
              elementString = elementString + "    ".repeat(objectNestLevel) +         
              "      <" + mergedElements.elementType + " class=\"resetElement\" name=\"" + objectPath + "\"" + attributeText + "\n" +
              "    ".repeat(objectNestLevel) + "    </div>"  + "\n";      
            }
            else 
            {
              elementString = elementString + "    ".repeat(objectNestLevel) + 
              "      <" + mergedElements.elementType + " class=\"resetElement\" name=\"" + objectPath + "\"" + ">" + "\n" +
              "    ".repeat(objectNestLevel) + "    </div>"  + "\n";
            } 
          }
          else if(mergedElements.elementType === "select")
          {
            if(attributeText.length > 2)
            {
              elementString = elementString + "    ".repeat(objectNestLevel) +         
              "      <" + mergedElements.elementType + " class=\"resetElement\" name=\"" + objectPath + "\"" + attributeText + "\n";
            }
            else 
            {
              elementString = elementString + "    ".repeat(objectNestLevel) + 
              "      <" + mergedElements.elementType + " class=\"resetElement\" name=\"" + objectPath + "\"" + ">" + "\n";
            } 
            let optionText = ""
            for (let key in mergedElements.options) 
            {
              optionText = optionText + 
              "    ".repeat(objectNestLevel) + "        <option value=\"" + key + "\" style=\"display: list-item;\">" + mergedElements.options[key] + "</option>" + "\n";
            } 
            elementString = elementString + optionText;
            elementString = elementString +
            "    ".repeat(objectNestLevel) + "      </" + mergedElements.elementType + ">" + "\n" +                
            "    ".repeat(objectNestLevel) + "    </div>"  + "\n";
          } 
        } 
      } 
    }
function drillIntoObject ( formElementObj , objKey , fieldsObject , objectNestLevel , previousPath ) { for ( let property in formElementObj [ objKey ] [ objKey + "0" ] ) { if ( typeof formElementObj [ objKey ] [ objKey + "0" ] [ property ] != 'object' ) { continue ; } if ( formElementObj [ objKey ] [ objKey + "0" ] [ property ] [ property + "0" ] ) { if ( formElementObj [ objKey ] [ objKey + "0" ] [ property ] . labelText && ! helpers . hasANumber ( property ) ) { elementString = elementString + "    " . repeat ( objectNestLevel ) + "    <div class=\"objectLabel\">" + formElementObj [ objKey ] [ objKey + "0" ] [ property ] . labelText + " &#8681;</div>" + "\n" ; } let borderColor = objectNestLevel % 3 === 0 ? "blue" : objectNestLevel % 2 === 0 ? "green" : "red" if ( ! helpers . hasANumber ( property ) ) { elementString = elementString + "    " . repeat ( objectNestLevel ) + "    <div class=\"objectWrapper groupWrapper\"" + " style=\"border: 2px solid " + borderColor + ";\"" + ">" + "\n" ; elementString = elementString + "    " . repeat ( objectNestLevel ) + "      <div class=\"objectWrapper elementWrapper\"" + " style=\"border: 2px solid " + borderColor + ";\"" + ">" + "\n" ; } drillIntoObject ( formElementObj [ objKey ] [ objKey + "0" ] , property , fieldsObject [ objKey ] [ objKey + "0" ] , objectNestLevel + 1 , previousPath + objKey + "_" + objKey + "0_" ) ; if ( formElementObj [ objKey ] [ objKey + "0" ] ) { elementString = elementString + "    " . repeat ( objectNestLevel ) + "        <button type=\"button\" class=\"disabled controlObjectButton moveObjectUpButton blue\" disabled>Move Up</button>" + "\n" + "    " . repeat ( objectNestLevel ) + "        <button type=\"button\" class=\"disabled controlObjectButton moveObjectDownButton blue\" disabled>Move Down</button>" + "\n" + "    " . repeat ( objectNestLevel ) + "        <button type=\"button\" class=\"disabled controlObjectButton removeObjectButton red\" disabled>Remove</button>" + "\n" + "    " . repeat ( objectNestLevel ) + "      </div>" + "\n" ; elementString = elementString + "    " . repeat ( objectNestLevel ) + "      <button type=\"button\" class=\"addNewObjectButton\"" + " style=\"background-color: " + borderColor + ";\"" + ">Add New " + property [ 0 ] . toUpperCase ( ) + property . slice ( 1 ) + "</button>" + "\n" ; elementString = elementString + "    " . repeat ( objectNestLevel ) + "    </div>" + "\n" ; } else { elementString = elementString + "    " . repeat ( objectNestLevel ) + "    </div>" + "\n" ; } } else { let objectPath = objKey + "_" + objKey + "0_" + property ; objectPath = previousPath . length === 0 ? objectPath : previousPath + objectPath ; let defaultElementsObject = fieldsObject [ objKey ] [ objKey + "0" ] [ property ] . defaultElements [ property ] ; let mergedElements = extend ( true , defaultElementsObject , formElementObj [ objKey ] [ objKey + "0" ] [ property ] ) ; let attributeText = "" ; for ( let key in mergedElements . attributes ) { attributeText = attributeText + " " + key ; if ( mergedElements . attributes [ key ] ) { attributeText = attributeText + "=\"" + mergedElements . attributes [ key ] + "\"" ; } } if ( mergedElements . elementType === "input" ) { attributeText = attributeText + "/>" ; } else if ( mergedElements . elementType === "select" ) { attributeText = attributeText + ">" ; } elementString = elementString + "    " . repeat ( objectNestLevel ) + "    <div class=\"inputWrapper\">" + "\n" ; let elementNameInTitleCase = elementName [ 0 ] . toUpperCase ( ) + elementName . slice ( 1 ) ; if ( mergedElements . labelText ) { elementString = elementString + "    " . repeat ( objectNestLevel ) + "      <div class=\"inputLabel\">" + mergedElements . labelText + "</div>" + "\n" ; } else { elementString = elementString + "    " . repeat ( objectNestLevel ) + "      <div class=\"inputLabel\">" + elementNameInTitleCase + "</div>" + "\n" ; } if ( mergedElements . elementType === "input" ) { if ( attributeText . length > 2 ) { elementString = elementString + "    " . repeat ( objectNestLevel ) + "      <" + mergedElements . elementType + " class=\"resetElement\" name=\"" + objectPath + "\"" + attributeText + "\n" + "    " . repeat ( objectNestLevel ) + "    </div>" + "\n" ; } else { elementString = elementString + "    " . repeat ( objectNestLevel ) + "      <" + mergedElements . elementType + " class=\"resetElement\" name=\"" + objectPath + "\"" + ">" + "\n" + "    " . repeat ( objectNestLevel ) + "    </div>" + "\n" ; } } else if ( mergedElements . elementType === "select" ) { if ( attributeText . length > 2 ) { elementString = elementString + "    " . repeat ( objectNestLevel ) + "      <" + mergedElements . elementType + " class=\"resetElement\" name=\"" + objectPath + "\"" + attributeText + "\n" ; } else { elementString = elementString + "    " . repeat ( objectNestLevel ) + "      <" + mergedElements . elementType + " class=\"resetElement\" name=\"" + objectPath + "\"" + ">" + "\n" ; } let optionText = "" for ( let key in mergedElements . options ) { optionText = optionText + "    " . repeat ( objectNestLevel ) + "        <option value=\"" + key + "\" style=\"display: list-item;\">" + mergedElements . options [ key ] + "</option>" + "\n" ; } elementString = elementString + optionText ; elementString = elementString + "    " . repeat ( objectNestLevel ) + "      </" + mergedElements . elementType + ">" + "\n" + "    " . repeat ( objectNestLevel ) + "    </div>" + "\n" ; } } } }
Declare a function that we will use to drill into the object and make HTML as we traverse the branches.
Declare a function that we will use to drill into the object and make HTML as we traverse the branches .
// Check each property of the container object to see if any are also containers. // Only work with properties which are objects or are at the end of a branch. // If the property is also a container. // A label on numbered container objects interferes with the operation of the up and down controls. // Checking that a label exists for this property and that the property key does not contain a number. // objectNestLevel handles indentation as we make HTML for the addPage. // Border color alternates with nest level. Blue, Red, Green, Blue ... // The following is just a ternary if-else statement.  // Group wrappers should not be applied where the property contains a number. // This function calls itself so as to go deeper into the object // If we were working with a container object then it's time to make buttons. // Close the object container // Not a container object. We are at the end of the branch where we encounter a formElement. // Assemble the path through the current object to the current formElement. // If the current object is nested then prepend the path to include the parent objects. // console.log("10. This is the objectPath\n", objectPath, "\n") // Now we need to merge the form element with it's default field element. // To start, create an object of default elements for the current field. // console.log("11. This is the defaultElementObject\n", defaultElementsObject, "\n\n"); // Deep merge the defaultElements with formElements - formElements taking precedence. // console.log("13. These are the mergedElements: ", mergedElements) // The next element tag must be built in a loop because we won't know what or  // how many attributes there will be.  // Also, it is possible that there will be no elementType and/or no attributes  // in which case we will need to asign properties and attributes programmatically // based on the following properties:   // unique, published, and defaultElements. // These are the required fields in the data dictionary (metadata.json) // The defaultElement's keys must have one at least one object in it's // value in order to get on a webpage. The key for this child object  // will be the name of a control element such as an input that is placed  // on a form. Thats how the field and form element are linked. // Usually, the name will be the same as the field but it could be different. // This child must also have an elementType property such as "input" or "select". // This child must also have an attribute property which contains a value such as // "text" or "password" if the default element is an input. // That's all we can count on. We may have to figure out what's best // from that information. // Start by making the HTML for the attributes from the mergedElements object. // holds the attribute text for the element tag. // Loop through mergedElements.attributes. // build HTML for the attribute. // End of: Loop through mergedElements.attributes. // An input element is self closing - it needs the forward slash // The select element is closed with a tag - no closing forward slash needed. // console.log("14. The attributeText is:" + "\n", attributeText, "\n"); // Get the current field with the first letter capitalized. // We will use this for the labelText if none was specifed. // console.log("15. The elementNameInTitleCase is:" + "\n", elementNameInTitleCase, "\n"); // If we have specified lableText for the element: // Make the label according the entry in the data dictionary. // We did not specify labelText. Make a generic label programmatically. // End of: If we have specifed... // If we have specified attributes for the element: // Make the element's HTML according the entry in the data dictionary. // We did not specify attributes. Remove code that produces HTML for attributes. // End of: If we have specifed... // If we have specified attributes for the element: // Make the element's HTML according the entry in the data dictionary. // We did not specify attributes. Remove code that produces HTML for attributes. // End of: Else - We did not specify attributes{...} // Loop through mergedElements.options // Make the current option HTML for the current form element. // End of: Loop through mergedElements.attributes // End of: Else If(mergedElements.elementType === "select"){...} // console.log("16. The following is the elementString: " + "\n", elementString, "\n"); // End of: else - This property is not an object. // End of: for-let Check each property of the subobject to see if it too is an object.