Desenvolvimento parcial

css/ivprog-visual-1.0.css

@@ -62,10 +62,12 @@ body {
 	font-weight: bold;
 	color: black;
 }
-.ui.selection.data_types_dropdown.visible.dropdown>.text:not(.default) {
+.ui.selection.data_types_dropdown.visible.dropdown>.text:not(.default),
+.ui.selection.parameter_data_types_dropdown.visible.dropdown>.text:not(.default) {
 	font-weight: bold;
 }
-.ui.selection.data_types_dropdown.dropdown {
+.ui.selection.data_types_dropdown.dropdown,
+.ui.selection.parameter_data_types_dropdown.dropdown {
 	padding-bottom: 0;
 }
 
@@ -75,7 +77,15 @@ body {
 	border: none;
 	background: none;
 }
-.ui.fluid.dropdown.data_types_dropdown.selection .dropdown.icon {
+
+.ui.fluid.dropdown.parameter_data_types_dropdown {
+	display: inline;
+	border: none;
+	background: none;
+}
+
+.ui.fluid.dropdown.data_types_dropdown.selection .dropdown.icon,
+.ui.fluid.dropdown.parameter_data_types_dropdown.selection .dropdown.icon {
 	font-size: 1em;
 }
 
@@ -101,12 +111,11 @@ body {
 	min-width: 50px;
 }
 
-.function_name_div, .function_return_div {
+.function_name_div, .function_return_div, .function_name_parameter {
 	display: inline;
-	/*border: 1px solid #eaebed;*/
 }
 
-.enable_edit_name_function {
+.enable_edit_name_function, .enable_edit_name_parameter {
 	cursor: pointer;
 }
 
@@ -170,4 +179,8 @@ body {
 .ui.labeled.icon.button.add_variable_button,
 .ui.labeled.icon.button.add_command_button {
 	
+}
+
+.parameters_list {
+	display: inline;
 }

i18n/i18n-database.json

@@ -0,0 +1,57 @@
+{
+	"function": {
+		"en": "function",
+		"es": "función",
+		"pt": "função"
+	},
+	"start": {
+		"en": "start",
+		"es": "comienzo",
+		"pt": "inicio"
+	},
+	"void": {
+		"en": "void",
+		"es": "vacío",
+		"pt": "vazio"
+	},
+	"integer": {
+		"en": "integer",
+		"es": "entero",
+		"pt": "inteiro"
+	},
+	"real": {
+		"en": "real",
+		"es": "real",
+		"pt": "real"
+	},
+	"text": {
+		"en": "text",
+		"es": "texto",
+		"pt": "texto"
+	},
+	"boolean": {
+		"en": "boolean",
+		"es": "booleano",
+		"pt": "booleano"
+	},
+	"Variable": {
+		"en": "Variable",
+		"es": "Variable",
+		"pt": "Variável"
+	},
+	"Command": {
+		"en": "Command",
+		"es": "Mando",
+		"pt": "Comando"
+	},
+	"": {
+		"en": "",
+		"es": "",
+		"pt": ""
+	},
+	"": {
+		"en": "",
+		"es": "",
+		"pt": ""
+	}
+}

i18n/i18n-engine.js

@@ -0,0 +1,37 @@
+
+function i18n(template) {
+  for (var
+    info = i18n.db[i18n.locale][template.join('\x01')],
+    out = [info.t[0]],
+    i = 1, length = info.t.length; i < length; i++
+  ) out[i] = arguments[1 + info.v[i - 1]] + info.t[i];
+  return out.join('');
+}
+
+i18n.set = locale => (tCurrent, ...rCurrent) => {
+  const key = tCurrent.join('\x01');
+  let db = i18n.db[locale] || (i18n.db[locale] = {});
+  db[key] = {
+    t: tCurrent.slice(),
+    v: rCurrent.map((value, i) => i)
+  };
+  const config = {
+    for: other => (tOther, ...rOther) => {
+      db = i18n.db[other] || (i18n.db[other] = {});
+      db[key] = {
+        t: tOther.slice(),
+        v: rOther.map((value, i) => rCurrent.indexOf(value))
+      };
+      return config;
+    }
+  };
+  return config;
+};
+
+i18n.locale = 'en';
+i18n.db = {};
+
+
+$.getJSON('i18n/i18n-database.json', function(data) {
+    console.log("acho que funcionou");
+});

js/ivprog-visual-1.0.js

@@ -2,10 +2,12 @@
 
 var tiposDados = Object.freeze({void:"void", integer:"integer", real:"real", text:"text", boolean:"boolean"});
 
-var Variavel = function(tipo, nome, dimensoes = 0) {
+var Variavel = function(tipo, nome, valor, dimensoes = 0, eh_constante = false) {
 	this.tipo = tipo;
 	this.nome = nome;
+	this.valor = valor;
 	this.dimensoes = dimensoes;
+	this.eh_constante = eh_constante;
 };
 
 var Funcao = function(nome, tipo_retorno = tiposDados.void, dimensoes_retorno = 0, lista_parametros = null, eh_principal = false, esta_oculta = false) {
@@ -17,16 +19,29 @@ var Funcao = function(nome, tipo_retorno = tiposDados.void, dimensoes_retorno =
 	this.esta_oculta = esta_oculta;
 };
 
+var Comando = function(tipo) {
+	this.tipo = tipo;
+};
+
+var Expressao = function(conteudo) {
+	this.conteudo = conteudo;
+
+};
+
+
 var Programa = function () {
 	this.funcoes = new Array();
 };
 
 function adicionarFuncao(funcao) {
 	programa.funcoes.push(funcao);
-};
+}
 
 // Adicionando a função principal automaticamente
 var programa = new Programa();
-var funcaoPrincipal = new Funcao("principal", tiposDados.void, 0, null, true);
+var funcaoPrincipal = new Funcao("principal", tiposDados.void, 0, new Array(), true);
+
+funcaoPrincipal.lista_parametros.push(new Variavel(tiposDados.text, "args"));
+
 
 adicionarFuncao(funcaoPrincipal);

js/ivprog-visual-functions-1.0.js

@@ -1,4 +1,5 @@
 var counter_new_functions = 0;
+var counter_new_parameters = 0;
 
 function addFunctionHandler() {
 	new_function = new Funcao("new_function_" + counter_new_functions);
@@ -33,12 +34,35 @@ function renderAlgorithm() {
 		appendFunction(programa.funcoes[i], i);
 	}
 	$('.data_types_dropdown').dropdown();
+	
+	$('.parameter_data_types_dropdown').dropdown();
+	addHandlers();
+}
+
+function addHandlers() {
+
+}
+
+function addParameter(sequence) {
+	if (programa.funcoes[sequence].lista_parametros == null) {
+		programa.funcoes[sequence].lista_parametros = new Array();
+	}
+	programa.funcoes[sequence].lista_parametros.push(new Variavel(tiposDados.integer, "new_parameter_" + counter_new_parameters));
+	counter_new_parameters ++;
+
+	renderAlgorithm();
 }
 
 function updateFunctionReturn(sequence, new_value) {
 	programa.funcoes[sequence].tipo_retorno = new_value;
 }
 
+function updateParameterType(wich_function, wich_parameter, new_value) {
+	programa.funcoes[wich_function].lista_parametros[wich_parameter].tipo = new_value;
+}
+
+
+
 var opened_name_function = false;
 var opened_input = null;
 var sequence_name_opened;
@@ -95,12 +119,93 @@ function enableNameFunctionUpdate(div_el, sequence) {
 
 			renderAlgorithm();
 		}
+		if(code == 27) {
+			$(div_el).find('.span_name_function').text(programa.funcoes[sequence_name_opened].nome);
+
+			$(this).remove();
+
+			/// update elements:
+			opened_name_function = false;
+			opened_input = false;
+		}
 	});
 	
 }
 
+
+var opened_name_parameter = false;
+var opened_input_parameter = null;
+var sequence_name_opened_parameter;
+var sequence_function_opened_parameter;
+function enableNameParameterUpdate(parent_node, which_function, which_parameter) {
+	if (opened_name_parameter) {
+		$(opened_input_parameter).focus();
+		return;
+	}
+	opened_name_parameter = true;
+	sequence_name_opened_parameter = which_parameter;
+	sequence_function_opened_parameter = which_function;
+
+	$(parent_node).find('.span_name_parameter').text('');
+	$( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"+programa.funcoes[which_function].lista_parametros[which_parameter].nome+"' />" ).insertBefore($(parent_node).find('.span_name_parameter'));
+
+	$('.width-dynamic').on('input', function() {
+	    var inputWidth = $(this).textWidth()+10;
+	    opened_input_parameter = this;
+	    $(this).focus();
+
+	    var tmpStr = $(this).val();
+		$(this).val('');
+		$(this).val(tmpStr);
+
+	    $(this).css({
+	        width: inputWidth
+	    })
+	}).trigger('input');
+
+	$('.width-dynamic').focusout(function() {
+		/// update array:
+		if ($(this).val().trim()) {
+			programa.funcoes[which_function].lista_parametros[which_parameter].nome = $(this).val().trim();
+		}
+		$(this).remove();
+
+		/// update elements:
+		opened_name_parameter = false;
+		opened_input_parameter = false;
+
+		renderAlgorithm();
+	});
+
+	$('.width-dynamic').on('keydown', function(e) {
+		var code = e.keyCode || e.which;
+		if(code == 13) {
+			if ($(this).val().trim()) {
+				programa.funcoes[which_function].lista_parametros[which_parameter].nome = $(this).val().trim();
+			}
+			$(this).remove();
+
+			/// update elements:
+			opened_name_parameter = false;
+			opened_input_parameter = false;
+
+			renderAlgorithm();
+		}
+		if(code == 27) {
+			$(parent_node).find('.span_name_parameter').text(programa.funcoes[which_function].lista_parametros[which_parameter].nome);
+
+			$(this).remove();
+
+			/// update elements:
+			opened_name_parameter = false;
+			opened_input_parameter = false;
+		}
+	});
+
+}
+
 function appendFunction(function_obj, sequence) {
-	$('.all_functions').append('<div class="ui secondary segment function_div list-group-item">'
+	var appender = '<div class="ui secondary segment function_div list-group-item">'
 		+ '<span class="glyphicon glyphicon-move" aria-hidden="true"><i class="icon sort alternate vertical"></i></span>'
 		
 		+ (!function_obj.eh_principal ? '<button class="ui icon button large remove_function_button" onclick="removeFunctionHandler(this.parentNode, '+sequence+')"><i class="red icon times"></i></button>' : '')
@@ -116,16 +221,40 @@ function appendFunction(function_obj, sequence) {
         + '<option value="'+tiposDados.boolean+'" '+(function_obj.tipo_retorno == tiposDados.boolean ? 'selected' : '')+'>'+tiposDados.boolean+'</option>'
         + '</select>'
 
-		+ '<div class="function_name_div"><span class="span_name_function">'+function_obj.nome+'</span> <i class="icon small pencil alternate enable_edit_name_function" onclick="enableNameFunctionUpdate(this.parentNode, '+sequence+')"></i></div> ( ) {</div>'
+		+ '<div class="function_name_div"><span class="span_name_function" ondblclick="enableNameFunctionUpdate(this.parentNode, '+sequence+')" >'+function_obj.nome+'</span> <i class="icon small pencil alternate enable_edit_name_function" onclick="enableNameFunctionUpdate(this.parentNode, '+sequence+')"></i></div> ' 
+
+		+ '( <i class="ui icon plus square outline add_parameter" onclick="addParameter('+sequence+')"></i> <div class="ui large labels parameters_list">';
+
+
+		if (function_obj.lista_parametros != null) {
+			for (var j = 0; j < function_obj.lista_parametros.length; j++) {
+				var par_temp = function_obj.lista_parametros[j];
+
+				appender += '<div class="ui label function_name_parameter"><span class="span_name_parameter" ondblclick="enableNameParameterUpdate(this.parentNode, '+sequence+', '+j+')">'+par_temp.nome+'</span> <i class="icon small pencil alternate enable_edit_name_parameter" onclick="enableNameParameterUpdate(this.parentNode, '+sequence+', '+j+')"></i>';
+
+				appender += '<select class="ui fluid dropdown parameter_data_types_dropdown" onchange="updateParameterType('+sequence+', '+j+', this.value)">'
+        		+ '<option value="'+tiposDados.integer+'" '+(par_temp.tipo == tiposDados.integer ? 'selected' : '')+'>'+tiposDados.integer+'</option>'
+        		+ '<option value="'+tiposDados.real+'" '+(par_temp.tipo == tiposDados.real ? 'selected' : '')+'>'+tiposDados.real+'</option>'
+        		+ '<option value="'+tiposDados.text+'" '+(par_temp.tipo == tiposDados.text ? 'selected' : '')+'>'+tiposDados.text+'</option>'
+        		+ '<option value="'+tiposDados.boolean+'" '+(par_temp.tipo == tiposDados.boolean ? 'selected' : '')+'>'+tiposDados.boolean+'</option>'
+        		+ '</select>';
+
+				appender += "</div>";
+			}
+		}
+
+		appender += '</div> ) {</div>'
 		
-		+ (function_obj.esta_oculta ? '<div class="function_area" style="display: none;">' : '<div class="function_area">')
+		+ (function_obj.esta_oculta ? ' <div class="function_area" style="display: none;"> ' : ' <div class="function_area"> ')
 
 		+ '<div class="ui top attached segment variables_list_div"><div class="ui teal small labeled icon button add_variable_button">Variable<i class="add icon"></i></div></div>'
 		+ '<div class="ui bottom attached segment commands_list_div"><div class="ui teal small labeled icon button add_command_button">Command<i class="add icon"></i></div></div>'		
 
 		+ '<div class="function_close_div">}</div>'
 		+ '</div>'
-		+ '</div>'); 
+		+ '</div>';
+
+	$('.all_functions').append(appender); 
 }
 
 

main.html

@@ -5,6 +5,9 @@
     <link rel="stylesheet" type="text/css" href="js/semantic/semantic.min.css">
     <link rel="stylesheet" type="text/css" href="css/ivprog-visual-1.0.css">
     <script src="js/jquery-3.3.1.min.js"></script>
+
+    <script src="i18n/i18n-engine.js"></script>
+
     <script src="js/semantic/semantic.min.js"></script>
     <script src="js/semantic/semantic-buttons.js"></script>
 
@@ -22,6 +25,8 @@
           <span>interactive coding</span>
         </div>
 
+        
+
         <div class="ui container content_margin">
           <div class="content_sub_margin">
               <div class="blue ui ivprog_format buttons">