Components (Sec. A)

UINL works with Components that are mapped like the following:

let COMPONENTS = new Map([
  // 1st Component: Add a Text Variable
  ["Add a Text Variable", { 
    c: "win",                // Class or type identifier
    modal: 1,                // Indicates this is a modal window
    closeable: 1,            // Indicates the window can be closed
    id: "Add a Variable",    // Unique identifier for the window
    v: [                     // Array of elements within this window
      { v: "", id: "inpt_addtxt_name", cap: "Name", input: 1 },  // Input field for variable name
      { v: "", id: "inpt_addtxt_value", cap: "Value", input: 1 }, // Input field for variable value
      { c: "btn", id: "btn_addtextvar", cap: "Add" } // Button to add the text variable
    ]
  }],
  
  // 2nd Component: Add a Number Variable
  ["Add a Number Variable", { 
    c: "win", 
    closeable: 1, 
    modal: 1, 
    id: "Add a num Variable",
    v: [
      { v: "", id: "inpt_addnum_name", cap: "Name", input: 1 },  // Input field for variable name
      { v: "", id: "inpt_addnum_value", cap: "Value", input: 1 }, // Input field for variable value
      { c: "btn", id: "btn_addnumvar", cap: "Add" } // Button to add the number variable
    ]
  }],
  
  // 3rd Component: Add Text to Display
  ["Add Text to Display", { 
    c: "win", 
    closeable: 1, 
    modal: 1, 
    id: "Add text to display",
    v: [
      { v: "", id: "inpt_print_value", cap: "Text to Display ↓", input: 1 }, // Input field for text to display
      "If you want to print a variable you've already set, type the name of the variable", // Instruction text
      { c: "btn", id: "btn_println", cap: "Print" } // Button to print the text
    ]
  }],
  
  // 4th Component: Save JSON File
  ["Save JSON File", { 
    c: "win", 
    closeable: 1, 
    modal: 1, 
    id: "Download the JSON File?",
    v: [
      "Are you sure you want to download the JSON file?", // Confirmation text
      { c: "btn", id: "btn_savejsfile", cap: "Yes" } // Button to save the JSON file
    ]
  }],
  
  // 5th Component: Load JSON File
  ["Load JSON File", { 
    c: "win", 
    closeable: 1, 
    modal: 1, 
    id: "Load the JSON File?",
    v: [
      "Select the JSON file you want to load?", // Instruction text
      { id: "myfile", cap: "", c: "file", accepts: "text" }, // File input for selecting JSON file
      { c: "btn", id: "btn_loadejsfile", cap: "Open" } // Button to load the JSON file
    ]
  }]
]);

Detailed Breakdown

1. Map Initialization: new Map([...]) initializes a new Map object. Each entry in the map consists of a key-value pair, where the key is a string describing the component and the value is an object defining the component's properties.

2. Component Properties:

   • c: Represents the class or type of the component. Here, "win" is used, likely short for "window".

   • modal: Indicates whether the component is a modal dialog (1 for true).

   • closeable: Indicates whether the component can be closed (1 for true).

   • id: A unique identifier for the component.

   • v: An array containing the elements inside the component. Each element can be:

     • An object representing an input field or button.

     • A string representing instructional text.

3. Elements:

   • Each object in the v array can have several properties:

     • v: The initial value of the input field.

     • id: The identifier for the input or button.

     • cap: The caption or label displayed next to the input or on the button.

     • input: Indicates that this object is an input field (1 for true).

     • c: Represents the type of element. For instance, "btn" for button and "file" for file input.

     • accepts: Specifies the type of files accepted for the file input.

Credit: The above outline was built using ChatGPT.