iVProg/js/visualUI/commands/writer.js

import * as Models from "../ivprog_elements";
import { LocalizedStrings } from "../../services/localizedStringsService";
import * as VariableValueMenu from "./variable_value_menu";
import * as VariableValueMenuManagement from "./variable_value_menu";
import * as CommandsManagement from "../commands";
import * as GenericExpressionManagement from "./generic_expression";
import * as CodeGenerator from '../code_generator';

export function createFloatingCommand () {
  return $(
    '<div class="ui writer created_element"> <i class="ui icon small upload"></i> <span> ' +
      LocalizedStrings.getUI("text_command_write") +
      " var </span></div>"
  );
}

export function renderCommand (command, function_obj) {
  const ret = `<div class="ui writer command_container">
      <i class="ui icon small upload command_drag"></i>
      <i class="ui icon times red button_remove_command"></i>
      <span class="span_command_spec">${LocalizedStrings.getUI(
        "text_command_write"
      )}
      ( </span><div class="all_elements_write"></div> <span class="textual_expression"></span>
      <span class="close_parentheses span_command_spec">)</span>
    <img data-state="${command.newline ? "on" : "false"}" src="${
    command.newline ? "img/new_line.svg" : "img/no_new_line.svg"
  }" class="ivprog_newline_btn"/> 
    <i class="ui icon unlock button_alternate_expression"></i>
    </div>`;
  const el = $(ret);
  el.data("command", command);

  //renderExpression (command, function_obj, div_to_render, expression_array)

  GenericExpressionManagement.renderExpression(
    command,
    function_obj,
    el.find(".all_elements_write"),
    command.content
  );

  /*for (var i = 0; i < command.content.length; i ++) {
		var new_div_item = $( '<div class="var_value_menu_div"></div>' );
		var div_parent_with_handler = $( '<div class="div_parent_handler"></div>' );
		div_parent_with_handler.append($('<i class="ui icon ellipsis vertical inverted handler"></i>'));
		div_parent_with_handler.append(new_div_item);
		div_parent_with_handler.append($('<i class="white inverted icon times handler"></i>'));

		el.find('.all_elements_write').append(div_parent_with_handler);
		VariableValueMenu.renderMenu(command, command.content[i], new_div_item, function_obj);

		addHandlerIconAdd(el.find('.all_elements_write'), command, function_obj);

		addHandlersManager(command, function_obj, el, div_parent_with_handler, command.content[i]);
	}

	if (command.content.length == 0) {
		addHandlerIconAdd(el.find('.all_elements_write'), command, function_obj);
	}*/

  addHandlers(command, function_obj, el);

  if (command.content) {
    try {
      var text = CodeGenerator.elementExpressionCode(command.content);
      if (text) {
        $(el.find('.all_elements_write')[0]).toggle();
        $(el.find('.textual_expression')[0]).text(text);
        $(el.find('.textual_expression')[0]).toggle();
        $(el.find('.button_alternate_expression')[0]).toggleClass('unlock').toggleClass('lock');
      }
    } catch (e) {
      command.lockexpression = false;
    }
  }

  return el;
}

function addHandlersManager (
  command,
  _function_obj,
  _writer_dom,
  item_div,
  content_element
) {
  item_div.find(".times").on("click", function () {
    for (let i = 0; i < command.content.length; i++) {
      if (command.content[i] == content_element) {
        delete command.content[i];
        command.content.splice(i, 1);

        item_div.children().off();
        item_div.off();
        item_div.fadeOut();

        if (command.content.length > 0) {
          item_div.next(".icon_add_item_to_writer").fadeOut();
        }
        break;
      }
    }
  });
}

function addHandlers (command, function_obj, writer_dom) {

  $(writer_dom.find('.textual_expression')[0]).toggle();
	
	writer_dom.find('.button_alternate_expression').on('click', function() {
		if (command.content) {
      var text = CodeGenerator.elementExpressionCode(command.content);
			if (text) {
				$(writer_dom.find('.all_elements_write')[0]).toggle();
				$(writer_dom.find('.textual_expression')[0]).text(text);
				$(writer_dom.find('.textual_expression')[0]).toggle();
				$(this).toggleClass('unlock').toggleClass('lock');
				command.lockexpression = !command.lockexpression;
			}
		}
	});

  writer_dom.find(".button_remove_command").on("click", function () {
    if (CommandsManagement.removeCommand(command, function_obj, writer_dom)) {
      writer_dom.fadeOut(400, function () {
        writer_dom.remove();
      });
    }
  });

  Sortable.create(writer_dom.find(".all_elements_write")[0], {
    handle: ".ellipsis",
    animation: 100,
    ghostClass: "ghost",
    group: "writer_" + Math.floor(Math.random() * 10000000),
    draggable: ".div_parent_handler",
    onEnd: function (evt) {
      command.content.splice(
        evt.newIndex,
        0,
        command.content.splice(evt.oldIndex, 1)[0]
      );

      writer_dom.empty();
      writer_dom.replaceWith(renderCommand(command, function_obj));
    },
  });
  // Attach event handles for the newline button
  const newlineBtn = writer_dom.find(".ivprog_newline_btn");
  newlineBtn.on("click", function () {
    const state = this.dataset.state;
    if (state === "on") {
      this.dataset.state = "off";
      command.newline = false;
      this.setAttribute("src", "img/no_new_line.svg");
    } else {
      this.dataset.state = "on";
      command.newline = true;
      this.setAttribute("src", "img/new_line.svg");
    }
    writer_dom.data("command", command);
    setPopup(newlineBtn, command.newline);
  });
  // Attach jquery popup
  setPopup(newlineBtn, command.newline);
}

function setPopup (element, state) {
  if (element.popup("exists")) {
    element.popup("destroy");
  }
  const content = state
    ? LocalizedStrings.getUI("write_command_newline_on")
    : LocalizedStrings.getUI("write_command_newline_off");
  element.popup({
    content: content,
    delay: {
      show: 750,
      hide: 0,
    },
  });
}

function _addHandlerIconAdd (
  dom_object,
  command,
  function_obj,
  insert_after = false,
  after_which = null
) {
  const icon_add_item = $(
    '<i class="ui icon plus square outline icon_add_item_to_writer"></i> '
  );
  if (!insert_after) {
    dom_object.append(icon_add_item);
  } else {
    icon_add_item.insertAfter(after_which);
  }

  icon_add_item.on("click", function (_event) {
    const div_parent_with_handler = $(
      '<div class="div_parent_handler" style="display:none;"></div>'
    );
    const new_div_item = $('<div class="var_value_menu_div"></div>');
    div_parent_with_handler.append(
      $('<i class="ui icon ellipsis vertical inverted handler"></i>')
    );
    div_parent_with_handler.append(new_div_item);
    div_parent_with_handler.append(
      $('<i class="white inverted icon times handler"></i>')
    );
    div_parent_with_handler.insertAfter(icon_add_item);

    const new_related_menu = new Models.VariableValueMenu(
      VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all,
      null,
      null,
      null,
      true
    );

    VariableValueMenu.renderMenu(
      command,
      new_related_menu,
      new_div_item,
      function_obj
    );

    addHandlerIconAdd(
      dom_object,
      command,
      function_obj,
      true,
      div_parent_with_handler
    );

    addHandlersManager(
      command,
      function_obj,
      dom_object,
      div_parent_with_handler,
      new_related_menu
    );
    let pos = 1;
    dom_object.find(".icon_add_item_to_writer").each(function () {
      if ($(this).get(0) === icon_add_item.get(0)) {
        command.content.splice(pos, 0, new_related_menu);
      } else {
        pos++;
      }
    });
    if (command.content.length == 1) {
      icon_add_item.remove();
    }
    div_parent_with_handler.fadeIn();
  });
}

export function addContent (
  command,
  _ref_object,
  dom_object,
  _menu_var_or_value,
  function_obj,
  _ref_object_content
) {
  if (dom_object.hasClass("var_value_menu_div")) {
    const icon_add_item = $(
      '<i class="ui icon plus square outline icon_add_item_to_writer"></i> '
    );
    icon_add_item.insertAfter(dom_object);

    icon_add_item.on("click", function (_event) {
      const div_parent_with_handler = $(
        '<div class="div_parent_handler"></div>'
      );
      div_parent_with_handler.append(
        $('<i class="ui icon ellipsis vertical inverted handler"></i>')
      );
      div_parent_with_handler.append(new_div_item);
      div_parent_with_handler.append(
        $('<i class="white inverted icon times handler"></i>')
      );

      div_parent_with_handler.insertAfter(icon_add_item);
      const new_related_menu = new Models.VariableValueMenu(
        VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all,
        null,
        null,
        null,
        true
      );

      VariableValueMenu.renderMenu(
        command,
        new_related_menu,
        new_div_item,
        function_obj
      );

      addHandlersManager(
        command,
        function_obj,
        dom_object,
        div_parent_with_handler,
        new_related_menu
      );

      command.content.push(new_related_menu);

      if (command.content.length == 1) {
        icon_add_item.remove();
      }
    });
  }
}