iVProg/js/accessibleUI/modules/variables/variables.js

// Imports
import { htmlOlCommandsVariables, generateUUID } from "./../../main";
import {
  getVariableTypeByValue,
  htmlVariableScheme,
  variableScheme,
  VariableType,
} from "./variables-schemes";
import { deleteOperationByVariable } from "../operations/operations";
// Imports

export const variables = [];
let variablesIndex = 0;

// Creating variable
export function createVariable() {
  const variable = Object.assign({}, variableScheme);

  variable.hash = generateUUID().replaceAll("-", "");
  variable.name = "var" + variablesIndex;
  variable.type = VariableType[0];
  variable.value = variable.type.defaultValue;

  variables.push(variable);

  variablesIndex++;

  let htmlVariable = htmlVariableScheme();

  htmlVariable = htmlVariable.replaceAll("<variableId>", variable.hash);
  htmlVariable = htmlVariable.replaceAll("<variableName>", variable.name);

  htmlOlCommandsVariables.insertAdjacentHTML("beforeend", htmlVariable);

  document
    .getElementById(`variable${variable.hash}Type`)
    .addEventListener("change", (ev) => {
      const variableHash = ev.target.getAttribute("variable-id");

      updateVariable(variableHash);
    });

  document
    .getElementById(`variable${variable.hash}Name`)
    .addEventListener("change", (ev) => {
      const variableHash = ev.target.getAttribute("variable-id");

      updateVariable(variableHash);
    });

  document
    .getElementById(`variable${variable.hash}Value`)
    .addEventListener("change", (ev) => {
      const variableHash = ev.target.getAttribute("variable-id");

      updateVariable(variableHash);
    });

  document
    .getElementById(`variable${variable.hash}Delete`)
    .addEventListener("click", (ev) => {
      const variableHash = ev.target.getAttribute("variable-id");

      deleteVariable(variableHash);
    });

  document
    .getElementById(`variable${variable.hash}Resume`)
    .addEventListener("focus", (ev) => {
      const variableHash = ev.target.getAttribute("variable-id");

      manageVariableEditing(variableHash);
    });

  document
    .getElementById(`variable${variable.hash}Display`)
    .addEventListener("keyup", (ev) => {
      const variableHash = ev.target.getAttribute("variable-id");

      if (ev.key === "Enter") manageVariableEditing(variableHash, true);
    });

  updateResume(variable.hash);
  updateAllVariableSelect();

  // Changing focus to the variable type after creation for screen readers
  document.getElementById(`variable${variable.hash}Type`).focus();
}

// *********************************************************************************
// Updating variable
// *********************************************************************************

let variableName;
let variableType;
let variableValue;

function updateVariable(hash) {
  const variable = getVariableByHash(hash);

  variableName = document.getElementById(`variable${hash}Name`).value;
  if (variable.name !== variableName) {
    variable.name = variableName;
  }

  variableType = getVariableTypeByValue(
    document.getElementById(`variable${hash}Type`).value
  );
  if (variable.type !== variableType) {
    variable.type = variableType;

    document.getElementById(`variable${hash}Value`).type =
      variable.type.htmlType;
    document.getElementById(`variable${hash}Value`).value =
      variable.type.defaultValue;
  }

  variableValue = document.getElementById(`variable${hash}Value`).value;
  if (variable.value !== variableValue) {
    variable.value = variableValue;
  }

  updateResume(hash);
}

// *********************************************************************************

// Deleting variable
export function deleteVariable(hash) {
  const variable = getVariableByHash(hash);

  document.getElementById(`variable${hash}Li`).remove();

  deleteOperationByVariable(variable);
  variables.splice(variables.indexOf(variable), 1);

  updateAllVariableSelect();
}

// Deleting all variable
export function deleteAllVariable() {
  for (let i = 0; i < variables.length; i++) {
    document.getElementById(`variable${variables[i].hash}Li`).remove();
  }

  variables.length = 0;
}

// ***********************************************************************
// Managing variable editing
// ***********************************************************************

const manageVariableEditing = (hash, enableForEditing = false) => {
  const variable = getVariableByHash(hash);
  const variableForm = document.getElementById(`variable${variable.hash}Form`);

  if (variable.editing && !enableForEditing) {
    // Editing fields
    variableForm.childNodes[1].childNodes[1].style.display = "none";
    variableForm.childNodes[1].childNodes[3].style.display = "none";
    variableForm.childNodes[1].childNodes[5].style.display = "none";
    variableForm.childNodes[1].childNodes[7].style.display = "none";

    // Resume field
    variableForm.childNodes[1].childNodes[9].style.display = "inline";

    variable.editing = false;
  } else if (enableForEditing) {
    // Editing fields
    variableForm.childNodes[1].childNodes[1].style.display = "inline";
    variableForm.childNodes[1].childNodes[3].style.display = "inline";
    variableForm.childNodes[1].childNodes[5].style.display = "inline";
    variableForm.childNodes[1].childNodes[7].style.display = "inline";

    // Resume field
    variableForm.childNodes[1].childNodes[9].style.display = "none";

    // Changing focus to firt child
    document.getElementById(`variable${variable.hash}Type`).focus();

    variable.editing = true;
  }
};

// ***********************************************************************
// Updating variable resume
// ***********************************************************************

function updateResume(hash) {
  const resume = generateResume(hash);

  document.getElementById(`variable${hash}DisplayCode`).innerText = resume.display;
  document
    .getElementById(`variable${hash}Resume`)
    .setAttribute("title", resume.resume);
}

function generateResume(hash) {
  const variable = getVariableByHash(hash);

  let resume = `${variable.type.name} ${variable.name}, recebe ${variable.value}`;
  let display = `${variable.type.name} ${variable.name} <- ${variable.value};`;

  return {resume: resume, display: display};
}

// ***********************************************************************
// Update all variable select
// **********************************************************************

function updateAllVariableSelect() {
  const variableSelects = document.getElementsByName("variableSelect");

  let variablesSelect = variables.length === 0 ? `<option>N/A</option>` : ``;

  for (let i = 0; i < variables.length; i++) {
    variablesSelect += `<option value="${variables[i].hash}">${variables[i].name}</option>`;
  }

  for (let i = 0; i < variableSelects.length; i++) {
    const selectedOption = variableSelects[i].value;
    variableSelects[i].innerHTML = variablesSelect;
    variableSelects[i].value = selectedOption;
  }
}

// *********************************************************************************
// Util
// *********************************************************************************

export function getVariableByHash(hash) {
  for (let i = 0; i < variables.length; i++) {
    if (variables[i].hash === hash) return variables[i];
  }

  return null;
}

// *********************************************************************************