iVProg/js/visualUI/commands/attribution.js

// iVProg - www.usp.br/line/ivprog
// LInE - Free Education, Private Data

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 ExpressionManagement from './generic_expression';
import * as CodeGenerator from '../code_generator';
import { renderAlgorithm } from '../algorithm';

export function createFloatingCommand () {
  return $('<div class="ui attribution created_element"> <i class="ui icon small arrow left"></i> <span> x <&#8212; 1 + 1 </span></div>');
  }

export function renderCommand (command, function_obj) {
  var el = $('<div class="ui attribution command_container"><i class="ui icon small arrow left command_drag"></i> <i class="ui icon times red button_remove_command"></i> <div class="var_attributed"></div> <span class="text_attr_receives span_command_spec">'+LocalizedStrings.getUI('text_receives')+'</span> '
     + '<div class="expression_elements"></div>  <span class="textual_expression"></span> <i class="ui icon i cursor button_write_expression"></i> <i class="ui icon unlock button_alternate_expression"></i> </div>');
  el.data('command', command);

  VariableValueMenu.renderMenu(command, command.variable, el.find('.var_attributed'), function_obj);

  if (!command.expression || command.expression.length < 1) {
    var exp = new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true);
    command.expression.push(exp);
    }

  addHandlers(command, function_obj, el);

  ExpressionManagement.renderExpression(command, function_obj, el.find('.expression_elements'), command.expression);

  if (command.lockexpression) {
    if (command.expression) {
      try {
        var text = CodeGenerator.elementExpressionCode(command.expression);
        if (text) {
          $(el.find('.expression_elements')[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;
        }
      }
    }

  el.find('.unlock').popup({
    content : LocalizedStrings.getUI("text_lock_expression"),
    delay: { show: 750, hide: 0 }
    });
  el.find('.lock').popup({
    content : LocalizedStrings.getUI("text_unlock_expression"),
    delay: { show: 750, hide: 0 }
    });
  el.find('.button_write_expression').popup({
    content : LocalizedStrings.getUI("text_edit_expression"),
    delay: { show: 750, hide: 0  }
    });

  return el;
  }

export function manageExpressionElements (command, ref_object, dom_object, menu_var_or_value, function_obj, selectedItem, expression_element) {
  var index_to_move = expression_element.itens.indexOf(ref_object);

  switch (selectedItem.data('exp')) {
    case Models.EXPRESSION_ELEMENTS.exp_op_exp:
      var exp = new Models.ExpressionElement(Models.EXPRESSION_ELEMENTS.exp_op_exp, [expression_element.itens[index_to_move],
           Models.ARITHMETIC_TYPES.plus, 
        new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true)]);
      expression_element.itens[index_to_move] = exp;
      break;
    case Models.EXPRESSION_ELEMENTS.op_exp:
      var exp = new Models.ExpressionElement(Models.EXPRESSION_ELEMENTS.op_exp, [Models.ARITHMETIC_TYPES.plus, 
        expression_element.itens[index_to_move] ]);
      expression_element.itens[index_to_move] = exp;
      break;
    case Models.EXPRESSION_ELEMENTS.par_exp_par:
      var exp = new Models.ExpressionElement(Models.EXPRESSION_ELEMENTS.par_exp_par, [expression_element.itens[index_to_move]]);
      expression_element.itens[index_to_move] = exp;
      break;
    }
  renderExpressionElements(command, function_obj, dom_object);
  }

function renderExpressionElements (command, function_obj, el) {
  var expression_div = el.find('.expression_elements');
  var command_container;

  if (el.hasClass("command_container") == false) {
    var hier = el.parentsUntil(".command_container");
    for (var i = 0; i < hier.length; i++) {
      if ($(hier[i]).hasClass("command_container")) {
        command_container = $(hier[i]);
        break;
        }
      if ($(hier[i]).hasClass("expression_elements")) {
        expression_div = $(hier[i]);
        break;
        }
      }
    }

  if (command_container) {
    expression_div = command_container.find('.expression_elements');
    }

  expression_div.text('');

  for (var i = 0; i < command.expression.length; i++) {
    var temp = $('<div class="expression_element"></div>');
    temp.data('ref_element', command.expression[i]);
    temp.data('ref_index', i);

    expression_div.append(temp);

    renderElement(command, function_obj, temp, command.expression[i]);
    }
  }

function renderOperator (command, function_obj, temp_op, expression_element, index_op) {
  var context_menu = '<div class="ui dropdown"><div class="text">';
  switch (expression_element.itens[index_op]) {
    case Models.ARITHMETIC_TYPES.plus:
      context_menu += '+';
      break;
    case Models.ARITHMETIC_TYPES.minus:
      context_menu += '-';
      break;
    case Models.ARITHMETIC_TYPES.multiplication:
      context_menu += '*';
      break;
    case Models.ARITHMETIC_TYPES.division:
      context_menu += '/';
      break;
    case Models.ARITHMETIC_TYPES.module:
      context_menu += '%';
      break;
    case Models.ARITHMETIC_TYPES.none:
      context_menu += '...';
      break;
    }
  
  context_menu += '</div><div class="menu">';
  context_menu += '<div class="item" data-value="'+Models.ARITHMETIC_TYPES.plus+'">+</div>';
  context_menu += '<div class="item" data-value="'+Models.ARITHMETIC_TYPES.minus+'">-</div>';
  context_menu += '<div class="item" data-value="'+Models.ARITHMETIC_TYPES.multiplication+'">*</div>';
  context_menu += '<div class="item" data-value="'+Models.ARITHMETIC_TYPES.division+'">/</div>';
  context_menu += '<div class="item" data-value="'+Models.ARITHMETIC_TYPES.module+'">%</div>';
  context_menu += '<div class="item" data-value="'+Models.ARITHMETIC_TYPES.none+'" data-text="...">Nenhum</div>';
  context_menu += '</div></div>';
  context_menu = $(context_menu);

  temp_op.append(context_menu);

  context_menu.dropdown({
    onChange: function(value, text, $selectedItem) {
      expression_element.itens[index_op] = value;
      }
    });
  }

function renderMenuAddExpression (command, function_obj, el, dom_append_menu, expression_append_new_expression) {
  if (el.hasClass("command_container") == false) {
    var hier = el.parentsUntil(".commands_list_div");

    for (var i = 0; i < hier.length; i++) {
      if ($(hier[i]).hasClass("command_container")) {
        el = $(hier[i]);
        break;
        }
      }
    }

  if (dom_append_menu.hasClass("expression_elements") == false) {
    var hier = el.parentsUntil(".commands_list_div");
    for (var i = 0; i < hier.length; i++) {
      if ($(hier[i]).hasClass("expression_elements")) {
        dom_append_menu = $(hier[i]);
        break;
        }
      }
    }

  var context_menu = '<div class="ui dropdown"><div class="text"></div><i class="ui icon arrow alternate circle right outline"></i><div class="menu">';
  context_menu += '<div class="item" data-value="'+Models.EXPRESSION_ELEMENTS.exp_op_exp+'">EXP OP EXP</div>';
  context_menu += '<div class="item" data-value="'+Models.EXPRESSION_ELEMENTS.op_exp+'">OP EXP</div>';
  context_menu += '<div class="item" data-value="'+Models.EXPRESSION_ELEMENTS.par_exp_par+'">( EXP )</div>';
  context_menu += '</div></div>';
  context_menu = $(context_menu);

  dom_append_menu.append(context_menu);

  context_menu.dropdown({
    onChange: function(value, text, $selectedItem) {
      switch (value) {
        case Models.EXPRESSION_ELEMENTS.exp_op_exp:
          var exp = new Models.ExpressionElement(Models.EXPRESSION_ELEMENTS.exp_op_exp,
            [new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true),
          Models.ARITHMETIC_TYPES.plus, 
          new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true)]);
          expression_append_new_expression.push(exp);
         break;
        case Models.EXPRESSION_ELEMENTS.op_exp:
          var exp = new Models.ExpressionElement(Models.EXPRESSION_ELEMENTS.op_exp, [Models.ARITHMETIC_TYPES.plus, 
          new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true)]);
          expression_append_new_expression.push(exp);
          break;
        case Models.EXPRESSION_ELEMENTS.par_exp_par:
          var exp = new Models.ExpressionElement(Models.EXPRESSION_ELEMENTS.par_exp_par,
            [new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true)]);
          expression_append_new_expression.push(exp);
          break;
        }
    renderExpressionElements(command, function_obj, el);
      }
    });
  }

function renderElement (command, function_obj, el, expression_element) {
  switch (expression_element.type_exp) {
    case Models.EXPRESSION_ELEMENTS.exp_op_exp:
      var temp_op = $('<div class="component_element"></div>');
      var temp_exp_1 = $('<div class="component_element"></div>');
      var temp_exp_2 = $('<div class="component_element"></div>');
      el.append(temp_exp_1);
      el.append(temp_op);
      el.append(temp_exp_2);      
      if (expression_element.itens[0].type) {
        VariableValueMenu.renderMenu(command, expression_element.itens[0], temp_exp_1, function_obj, 2, expression_element);
      } else {
        renderElement(command, function_obj, temp_exp_1, expression_element.itens[0]);
        }
      renderOperator(command, function_obj, temp_op, expression_element, 1);
      if (expression_element.itens[2].type) {
        VariableValueMenu.renderMenu(command, expression_element.itens[2], temp_exp_2, function_obj, 2, expression_element);
      } else {
        renderElement(command, function_obj, temp_exp_2, expression_element.itens[2]);
        }
      break;
    case Models.EXPRESSION_ELEMENTS.op_exp:
      var temp_op = $('<div class="component_element"></div>');
      var temp_exp = $('<div class="component_element"></div>');
      el.append(temp_op);
      el.append(temp_exp);
      renderOperator(command, function_obj, temp_op, expression_element, 0);
      if (expression_element.itens[1].type) {
        VariableValueMenu.renderMenu(command, expression_element.itens[1], temp_exp, function_obj, 2, expression_element);
      } else {
        renderElement(command, function_obj, temp_exp, expression_element.itens[1]);
      }
      break;
    case Models.EXPRESSION_ELEMENTS.par_exp_par:
      var temp_par_1 = $('<div class="component_element"> ( </div>');
      var temp_exp = $('<div class="component_element"></div>');
      var temp_par_2 = $('<div class="component_element"> ) </div>');
      el.append(temp_par_1);
      el.append(temp_exp);
      for (var j = 0; j < expression_element.itens.length; j++) {
        if (expression_element.itens[j].type) {
          VariableValueMenu.renderMenu(command, expression_element.itens[j], temp_exp, function_obj, 2, expression_element);
        } else {
          renderElement(command, function_obj, temp_exp, expression_element.itens[j]);
         }
        } 
      //renderMenuAddExpression(command, function_obj, el, el, expression_element.itens);
      el.append(temp_par_2);
      break;
    }
  } // function renderElement(command, function_obj, el, expression_element)


function renderExpression (command, function_obj, el) {
  //D console.log("src/ivprog/js/visualUI/commands/attribution.js: renderExpression(.): command="+JSON.stringify(command)+"\nfunction_obj=|"+JSON.stringify(function_obj)+"|\n");
  var expression_div = el.find('.expression_elements');
  expression_div.text('');

  var menu_add_item = $('<div class="menu_add_item"></div>');
  menu_add_item.data('index_add', 0);

  expression_div.append(menu_add_item);

  for (var i = 0; i < command.expression.length; i++) {
    //D console.log(i + " : " + JSON.stringify(command.expression));
    if (command.expression[i].type) {
      var temp = $('<div class="expression_element"></div>');
      temp.data('ref_element', command.expression[i]);
      temp.data('ref_index', i);
      expression_div.append(temp);
      VariableValueMenu.renderMenu(command, command.expression[i], temp, function_obj);
    } else if (command.expression[i] == "(" || command.expression[i] == ")") {
      var temp = $('<div class="expression_element">'+command.expression[i]+'</div>');
      temp.data('ref_element', command.expression[i]);
      temp.data('ref_index', i);
      expression_div.append(temp);
    } else {
      var temp = '<div class="expression_element">';
      switch(command.expression[i]) {
        case Models.ARITHMETIC_TYPES.plus:
          temp += '+';
          break;
        case Models.ARITHMETIC_TYPES.minus:
          temp += '-';
          break;
        case Models.ARITHMETIC_TYPES.multiplication:
          temp += '*';
          break;
        case Models.ARITHMETIC_TYPES.division:
          temp += '/';
          break;
        case Models.ARITHMETIC_TYPES.module:
          temp += '%';
          break;
        }
      temp += '</div>';
      temp = $(temp);
      temp.data('ref_element', command.expression[i]);
      temp.data('ref_index', i);
      expression_div.append(temp);
      }
    var menu_add_item_seq = $('<div class="menu_add_item"></div>');
    var index_temp = (i + 1);
    menu_add_item_seq.data('index_add', index_temp);
    expression_div.append(menu_add_item_seq);
    }
  addMenuItens(command, function_obj, el);
  } // function renderExpression(command, function_obj, el)


function addMenuItens (command, function_obj, expression_div) {
  var divs_expression = expression_div.find('.menu_add_item');

  for (var i = 0; i < divs_expression.length; i++) {
    var temp = $(divs_expression[i]).data('index_add');
    var context_menu = '<div class="ui dropdown context_menu_clear"><i class="ui icon plus square outline"></i><div class="menu">';
    context_menu += '<div class="item" data-option="value" data-index="'+temp+'">'+LocalizedStrings.getUI('text_value')+'</div>';
    context_menu += '<div class="item" data-option="operator" data-index="'+temp+'">'+LocalizedStrings.getUI('text_operator')+'</div>';
    context_menu += '<div class="item" data-option="parentheses" data-index="'+temp+'">'+LocalizedStrings.getUI('text_parentheses')+'</div>';
    context_menu += '</div></div>';
    context_menu = $(context_menu);

    $(divs_expression[i]).append(context_menu);

    context_menu.dropdown({
        on: 'hover',
        onChange: function(value, text, $selectedItem) {
        switch ($selectedItem.data('option')) {
          case "value":
            command.expression.splice($selectedItem.data('index'), 0, new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true));
            renderExpression(command, function_obj, expression_div);
            break;
          case "operator":
            command.expression.splice($selectedItem.data('index'), 0, Models.ARITHMETIC_TYPES.plus);
            renderExpression(command, function_obj, expression_div);
            break;
          case "parentheses":
            command.expression.splice($selectedItem.data('index'), 0, "(");
            command.expression.splice($selectedItem.data('index') + 1, 0, new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true));
            command.expression.splice($selectedItem.data('index') + 2, 0, ")");
            renderExpression(command, function_obj, expression_div);
            break;
            }
          }
        });
    }
  }


function addHandlers (command, function_obj, attribution_dom) {
  attribution_dom.find('.button_write_expression').on('click', function() {
    window.expressionEdition = true;
    window.inputExpression = null;
    
    var afterWhichElement;
    var lockButton = $(attribution_dom.find('.button_alternate_expression')[0]);
    var editButton = $(this);

    afterWhichElement = attribution_dom.find('.expression_elements');

    if (command.lockexpression) {
      afterWhichElement = attribution_dom.find('.textual_expression');
      }

    var text = "";
    if (command.expression) {
      if (command.expression.length == 1 && command.expression[0].content == null && !command.expression[0].function_called) {
        text = "";
      } else {
        try {
          text = CodeGenerator.elementExpressionCode(command.expression);
        } catch(ex) {
          text = "";
          }
        }
      }

    var ok_button = $('<i class="ui icon check circle expression-edit-confirm"></i>');
    var cancel_button = $('<i class="ui icon undo expression-edit-cancel"></i>');
    var input = $('<input type="text" spellcheck="false" autocomplete="off" class="input-expression-field" >');
    input.val(text);

    input.focusout(function(evt) {
      console.log('focosout event!');
      ok_button.click();
      evt.preventDefault();
      return true;
      });
    
    input.keyup(function(evt) {
      if (evt.keyCode == 27) { // esc
        cancel_button.click();
        }
      if (evt.keyCode == 13) { // enter
        ok_button.click();
        }
      });

    ok_button.click(function() {
      var parsed = null;
      parsed = ExpressionManagement.expressionParserToVisual(input.val(), function_obj, input);
      if (parsed) {
        window.expressionEdition = false;
        command.expression = parsed;
        renderAlgorithm();
        }
      });

    cancel_button.mousedown(function(evt) {
      var parsed = ExpressionManagement.expressionParserToVisual(text, function_obj, input);
      if (parsed) {
        window.expressionEdition = false;
        command.expression = parsed;
        renderAlgorithm();
        }
      });

    input.insertAfter(afterWhichElement);
    input.focus();
    cancel_button.insertAfter(input);
    ok_button.insertAfter(input);
    var len = text.length; 
    input[0].setSelectionRange(len, len); 

    afterWhichElement.css('display', 'none');
    lockButton.css('display', 'none');
    editButton.css('display', 'none');

    ok_button.popup({
      content : LocalizedStrings.getUI("text_edit_expression_confirm"),
      delay: { show: 750, hide: 0 }
      });
    cancel_button.popup({
      content : LocalizedStrings.getUI("text_edit_expression_cancel"),
      delay: { show: 750, hide: 0 }
      });
    });

  $(attribution_dom.find('.textual_expression')[0]).toggle();
  
  attribution_dom.find('.button_alternate_expression').on('click', function() {
    if (command.expression) {
      var text = CodeGenerator.elementExpressionCode(command.expression);
      if (text) {
        $(attribution_dom.find('.expression_elements')[0]).toggle();
        $(attribution_dom.find('.textual_expression')[0]).text(text);
        $(attribution_dom.find('.textual_expression')[0]).toggle();
        $(this).toggleClass('unlock').toggleClass('lock');
        command.lockexpression = !command.lockexpression;
        }
      if (command.lockexpression) {
        attribution_dom.find('.lock').popup({
          content : LocalizedStrings.getUI("text_unlock_expression"),
          delay: { show: 750, hide: 0 }
        });
      } else {
        attribution_dom.find('.unlock').popup({
          content : LocalizedStrings.getUI("text_lock_expression"),
          delay: { show: 750, hide: 0 }
          });
        }
      }
    });

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

  attribution_dom.find('.button_refresh_attribution').on('click', function() {
    renderExpressionElements(command, function_obj, attribution_dom);
    });
  }

export function renderMenuOperations (command, ref_object, dom_object, menu_var_or_value, function_obj, variable_selected) {

  /*console.log("recebido o seguinte DOM: ");
  console.log(dom_object);
  if (dom_object.hasClass('var_attributed')) { return; } else {
    var hier = dom_object.parentsUntil(".command_container");
    for (var i = 0; i < hier.length; i++) { if ($(hier[i]).hasClass('var_attributed') || $(hier[i]).hasClass('parameters_function_called')) { return; } }
    }
  dom_object.find('.context_menu_clear').remove();
  var menu_operations = '<div class="ui dropdown menu_operations"><div class="text"></div><i class="dropdown icon"></i><div class="menu">';
  for (var tm in Models.ARITHMETIC_TYPES) { menu_operations += '<div class="item" data-option="'+tm+'">'+LocalizedStrings.getUI('btn_arithmetic_' + tm)+'</div>'; }
    menu_operations += '<div class="item" data-option="clear">'+LocalizedStrings.getUI('btn_clear')+'</div>';
    menu_operations += '</div></div>';
    menu_operations = $(menu_operations);
    dom_object.append(menu_operations);
    menu_operations.dropdown({
      onChange: function(value, text, $selectedItem) {
        switch ($($selectedItem).data('option')) {
          case "clear": $(dom_object).text(''); VariableValueMenu.renderMenu(command, ref_object, dom_object, function_obj); break;
          default: createExpressionAround(command, ref_object, dom_object, function_obj); menu_operations.find('.text').text('');
          }
        }
    });*/
  }

function createExpressionAround (command, ref_object, dom_object, function_obj) {
  $('<span> ( </span>').insertBefore(dom_object);
  $('<span> ) </span>').insertAfter(dom_object);
  VariableValueMenu.renderMenu(command, new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true), dom_object, function_obj);
  }