';
if (function_obj.function_comment) {
//appender += renderComment(function_obj.function_comment, sequence, true, -1);
}
appender += '
'+LocalizedStrings.getUI("function")+' ';
if (function_obj.is_main) {
appender += '
' + LocalizedStrings.getUI('void') + ' '+function_obj.name+'
'
+ '
( ';
} else {
appender += '
';
appender += '
'+function_obj.name+'
'
+ '
( ';
}
appender += '
) '
+ (function_obj.is_hidden ? '
' : '
');
appender += '
';
appender += '
';
appender += '
';
appender += '
';
appender += '
';
appender = $(appender);
$('.all_functions').append(appender);
appender.data('fun', function_obj);
appender.find('.commands_list_div').data('fun', function_obj);
renderFunctionReturn(function_obj, appender);
addHandlers(function_obj, appender);
// Rendering parameters:
for (var j = 0; j < function_obj.parameters_list.length; j++) {
renderParameter(function_obj, function_obj.parameters_list[j], appender);
}
// Rendering variables:
for (var j = 0; j < function_obj.variables_list.length; j++) {
VariablesManagement.renderVariable(appender, function_obj.variables_list[j], function_obj);
}
// Rendering commands:
for (var j = 0; j < function_obj.commands.length; j++) {
CommandsManagement.renderCommand(function_obj.commands[j], $(appender.find('.commands_list_div')[0]), 3, function_obj);
}
$('.minimize_function_button').popup({
content : LocalizedStrings.getUI("tooltip_minimize"),
delay: {
show: 750,
hide: 0
}
});
Sortable.create(appender.find(".variables_list_div")[0], {
handle: '.ellipsis',
animation: 100,
ghostClass: 'ghost',
group: 'local_vars_drag_' + program.functions.indexOf(function_obj),
onEnd: function (evt) {
updateSequenceLocals(evt.oldIndex, evt.newIndex, function_obj);
}
});
Sortable.create(appender.find(".commands_list_div")[0], {
handle: '.command_drag',
animation: 100,
ghostClass: 'ghost',
group: 'commands_drag_' + program.functions.indexOf(function_obj),
onEnd: function (evt) {
//updateSequenceLocals(evt.oldIndex, evt.newIndex, function_obj);
}
});
if (!function_obj.is_main) {
Sortable.create(appender.find(".container_parameters_list")[0], {
handle: '.ellipsis',
animation: 100,
ghostClass: 'ghost',
group: 'parameters_drag_' + program.functions.indexOf(function_obj),
onEnd: function (evt) {
updateSequenceParameters(evt.oldIndex, evt.newIndex, function_obj);
}
});
}
return appender;
}
export function initVisualUI () {
// MUST USE CONST, LET, OR VAR !!!!!!
const mainDiv = $('#visual-main-div');
// fill mainDiv with functions and globals...
// renderAlgorithm()...
$('.add_function_button').on('click', () => {
addFunctionHandler();
});
$('.add_global_button').on('click', () => {
window.insertContext = true;
GlobalsManagement.addGlobal(program, true);
});
$('.run_button').on('click', () => {
runCode();
});
$('.visual_coding_button').on('click', () => {
toggleVisualCoding();
});
$('.textual_coding_button').on('click', () => {
toggleTextualCoding();
});
$('.assessment').on('click', () => {
runCodeAssessment();
is_iassign = true;
});
$('.div_toggle_console').on('click', () => {
toggleConsole();
});
$('.expand_button').on('click', () => {
full_screen();
});
$('.main_title h2').prop('title', LocalizedStrings.getUI('text_ivprog_description'));
}
var is_iassign = false;
$( document ).ready(function() {
var time_show = 750;
$('.visual_coding_button').popup({
content : LocalizedStrings.getUI("tooltip_visual"),
delay: {
show: time_show,
hide: 0
}
});
$('.textual_coding_button').popup({
content : LocalizedStrings.getUI("tooltip_textual"),
delay: {
show: time_show,
hide: 0
}
});
$('.upload_file_button').popup({
content : LocalizedStrings.getUI("tooltip_upload"),
delay: {
show: time_show,
hide: 0
}
});
$('.download_file_button').popup({
content : LocalizedStrings.getUI("tooltip_download"),
delay: {
show: time_show,
hide: 0
}
});
$('.undo_button').popup({
content : LocalizedStrings.getUI("tooltip_undo"),
delay: {
show: time_show,
hide: 0
}
});
$('.redo_button').popup({
content : LocalizedStrings.getUI("tooltip_redo"),
delay: {
show: time_show,
hide: 0
}
});
$('.run_button').popup({
content : LocalizedStrings.getUI("tooltip_run"),
delay: {
show: time_show,
hide: 0
}
});
$('.assessment_button').popup({
content : LocalizedStrings.getUI("tooltip_evaluate"),
delay: {
show: time_show,
hide: 0
}
});
$('.help_button').popup({
content : LocalizedStrings.getUI("tooltip_help") + ' - ' + LocalizedStrings.getUI("text_ivprog_version"),
delay: {
show: time_show,
hide: 0
}
});
$('.add_global_button').popup({
content : LocalizedStrings.getUI("tooltip_add_global"),
delay: {
show: time_show,
hide: 0
}
});
$('.div_toggle_console').popup({
content : LocalizedStrings.getUI("tooltip_console"),
delay: {
show: time_show,
hide: 0
}
});
Sortable.create(listWithHandle, {
handle: '.glyphicon-move',
animation: 100,
ghostClass: 'ghost',
group: 'functions_divs_drag',
onEnd: function (evt) {
updateSequenceFunction(evt.oldIndex, evt.newIndex);
}
});
var listGlobalsHandle = document.getElementById("listGlobalsHandle");
Sortable.create(listGlobalsHandle, {
handle: '.ellipsis',
animation: 100,
ghostClass: 'ghost',
group: 'globals_divs_drag',
onEnd: function (evt) {
updateSequenceGlobals(evt.oldIndex, evt.newIndex);
}
});
renderAlgorithm();
});
function updateSequenceParameters (oldIndex, newIndex, function_obj) {
function_obj.parameters_list.splice(newIndex, 0, function_obj.parameters_list.splice(oldIndex, 1)[0]);
}
function updateSequenceLocals (oldIndex, newIndex, function_obj) {
function_obj.variables_list.splice(newIndex, 0, function_obj.variables_list.splice(oldIndex, 1)[0]);
}
function updateSequenceGlobals (oldIndex, newIndex) {
program_obj.globals.splice(newIndex, 0, program_obj.globals.splice(oldIndex, 1)[0]);
}
function updateSequenceFunction (oldIndex, newIndex) {
program_obj.functions.splice(newIndex, 0, program_obj.functions.splice(oldIndex, 1)[0]);
}
function runCodeAssessment () {
window.studentGrade = null;
studentTemp = null;
const strCode = CodeManagement.generate();
if (strCode == null) {
return;
}
toggleConsole(true);
if(domConsole == null)
domConsole = new DOMConsole("#ivprog-term");
$("#ivprog-term").slideDown(500);
const runner = new IVProgAssessment(strCode, testCases, domConsole);
runner.runTest().then(grade => {
if (!is_iassign) {
parent.getEvaluationCallback(grade);
} else {
is_iassign = false;
}
}).catch( err => domConsole.err(err.message));
}
function runCode () {
const strCode = CodeManagement.generate();
if (strCode == null) {
return;
}
toggleConsole(true);
if(domConsole == null)
domConsole = new DOMConsole("#ivprog-term");
$("#ivprog-term").slideDown(500);
try {
const parser = IVProgParser.createParser(strCode);
const analyser = new SemanticAnalyser(parser.parseTree());
const data = analyser.analyseTree();
const proc = new IVProgProcessor(data);
proc.registerInput(domConsole);
proc.registerOutput(domConsole);
$("#ivprog-term").addClass('ivprog-term-active');
proc.interpretAST().then( _ => {
domConsole.info("Programa executado com sucesso!");
$("#ivprog-term").removeClass('ivprog-term-active');
}).catch(err => {
domConsole.err(err.message);
$("#ivprog-term").removeClass('ivprog-term-active');
})
} catch (error) {
domConsole.err(error.message);
console.log(error);
}
}
function toggleConsole (is_running) {
if (is_running) {
$('.ivprog-term-div').css('display', 'block');
$('#ivprog-term').css('min-height', '160px');
$('#ivprog-term').css('margin-top', '-170px');
return;
}
if ($('#ivprog-term').css('min-height') == '160px') {
// esconder
$('.ivprog-term-div').css('display', 'none');
$('#ivprog-term').css('min-height', '0');
$('#ivprog-term').css('margin-top', '-30px');
$('#ivprog-term').css('padding', '5px');
} else {
// mostrar
$('.ivprog-term-div').css('display', 'block');
$('#ivprog-term').css('min-height', '160px');
$('#ivprog-term').css('margin-top', '-170px');
}
}
function waitToCloseConsole () {
domConsole.info("Aperte qualquer tecla para fechar...");
const p = new Promise((resolve, _) => {
domConsole.requestInput(resolve, true);
});
p.then( _ => {
domConsole.dispose();
domConsole = null;
$("#ivprog-term").hide();
})
}
function toggleTextualCoding () {
var code = CodeManagement.generate();
if (code == null) {
return;
}
$('.ivprog_visual_panel').css('display', 'none');
$('.ivprog_textual_panel').css('display', 'block');
$('.ivprog_textual_panel').removeClass('loading');
$('.ivprog_textual_code').text(code);
$('.visual_coding_button').removeClass('active');
$('.textual_coding_button').addClass('active');
}
function toggleVisualCoding () {
$('.ivprog_textual_panel').addClass('loading');
$('.ivprog_textual_panel').css('display', 'none');
$('.ivprog_visual_panel').css('display', 'block');
$('.textual_coding_button').removeClass('active');
$('.visual_coding_button').addClass('active');
}
function removeParameter (function_obj, parameter_obj, parameter_container) {
var index = function_obj.parameters_list.indexOf(parameter_obj);
if (index > -1) {
window.insertContext = true;
function_obj.parameters_list.splice(index, 1);
}
$(parameter_container).fadeOut();
}
function updateParameterType (parameter_obj, new_type, new_dimensions = 0) {
parameter_obj.type = new_type;
parameter_obj.dimensions = new_dimensions;
if (new_dimensions > 0) {
parameter_obj.rows = new_dimensions;
parameter_obj.columns = 2;
}
}
function renderParameter (function_obj, parameter_obj, function_container) {
var ret = "";
ret += '
';
ret += '
';
if (parameter_obj.dimensions > 0) {
ret += '
'+ LocalizedStrings.getUI('vector')+':'+LocalizedStrings.getUI(parameter_obj.type);
if (parameter_obj.dimensions == 1) {
ret += ' [ ] ';
} else {
ret += ' [ ] [ ] ';
}
ret += '
';
} else {
ret += '
'+LocalizedStrings.getUI(parameter_obj.type)+'
';
}
ret += '
';
ret += '
'+parameter_obj.name+'
';
ret += '
';
ret = $(ret);
function_container.find('.container_parameters_list').append(ret);
ret.find('.remove_parameter').on('click', function(e){
removeParameter(function_obj, parameter_obj, ret);
});
ret.find('.ui.dropdown.parameter_type').dropdown({
onChange: function(value, text, $selectedItem) {
if ($selectedItem.data('dimensions')) {
updateParameterType(parameter_obj, Types[$selectedItem.data('type')], $selectedItem.data('dimensions'));
} else {
updateParameterType(parameter_obj, Types[$selectedItem.data('type')]);
}
},
selectOnKeydown: false
});
ret.find('.label_enable_name_parameter').on('click', function(e){
enableNameParameterUpdate(parameter_obj, ret, function_obj);
});
return ret;
}
function updateParameterName (parameter_var, new_name, parameter_obj_dom, function_obj) {
if (isValidIdentifier(new_name)) {
if (variableNameAlreadyExists(new_name, function_obj)) {
Utils.renderErrorMessage(parameter_obj_dom.find('.parameter_div_edit'), LocalizedStrings.getUI('inform_valid_variable_duplicated'));
} else {
parameter_var.name = new_name;
}
} else {
Utils.renderErrorMessage(parameter_obj_dom.find('.parameter_div_edit'), LocalizedStrings.getUI('inform_valid_name'));
}
}
function variableNameAlreadyExists (name_var, function_obj) {
if (function_obj.parameters_list) {
for (var i = 0; i < function_obj.parameters_list.length; i++) {
if (function_obj.parameters_list[i].name == name_var) {
return true;
}
}
}
if (function_obj.variables_list) {
for (var i = 0; i < function_obj.variables_list.length; i++) {
if (function_obj.variables_list[i].name == name_var) {
return true;
}
}
}
return false;
}
function updateFunctionName (function_var, new_name, function_obj_dom) {
if (isValidIdentifier(new_name)) {
if (functionNameAlreadyExists(new_name)) {
Utils.renderErrorMessage(function_obj_dom.find('.function_name_div'), LocalizedStrings.getUI('inform_valid_name_duplicated'));
} else {
function_var.name = new_name;
}
} else {
Utils.renderErrorMessage(function_obj_dom.find('.function_name_div'), LocalizedStrings.getUI('inform_valid_name'));
}
}
function functionNameAlreadyExists (function_name) {
for (var i = 0; i < window.program_obj.functions.length; i++) {
if (window.program_obj.functions[i].name == function_name) {
return true;
}
}
return false;
}
function isValidIdentifier (identifier_str) {
return /^[a-zA-Z_][a-zA-Z0-9_]*$/.test(identifier_str);
}
var opened_name_parameter = false;
var opened_input_parameter = null;
function enableNameParameterUpdate (parameter_obj, parent_node, function_obj) {
if (opened_name_parameter) {
opened_input_parameter.focus();
return;
}
opened_name_parameter = true;
parent_node = $(parent_node);
var input_field;
parent_node.find('.span_name_parameter').text('');
input_field = $( "
" );
input_field.insertBefore(parent_node.find('.span_name_parameter'));
input_field.on('input', function() {
var inputWidth = input_field.textWidth()+10;
opened_input_parameter = input_field;
input_field.focus();
var tmpStr = input_field.val();
input_field.val('');
input_field.val(tmpStr);
input_field.css({
width: inputWidth
})
}).trigger('input');
input_field.focusout(function() {
/// update array:
if (input_field.val().trim()) {
updateParameterName(parameter_obj, input_field.val().trim(), parent_node, function_obj);
parent_node.find('.span_name_parameter').text(parameter_obj.name);
}
input_field.off();
input_field.remove();
/// update elements:
opened_name_parameter = false;
opened_input_parameter = false;
});
input_field.on('keydown', function(e) {
var code = e.keyCode || e.which;
if(code == 13) {
if (input_field.val().trim()) {
updateParameterName(parameter_obj, input_field.val().trim(), parent_node, function_obj);
parent_node.find('.span_name_parameter').text(parameter_obj.name);
}
input_field.off();
input_field.remove();
/// update elements:
opened_name_parameter = false;
opened_input_parameter = false;
}
if(code == 27) {
parent_node.find('.span_name_parameter').text(parameter_obj.name);
input_field.off();
input_field.remove();
/// update elements:
opened_name_parameter = false;
opened_input_parameter = false;
}
});
input_field.select();
}
var opened_name_function = false;
var opened_input = null;
var previousPadding = null;
function enableNameFunctionUpdate (function_obj, parent_node) {
if (opened_name_function) {
opened_input.focus();
return;
}
parent_node = $(parent_node);
parent_node.find('.span_name_function').text('');
var input_field;
if (!previousPadding) {
previousPadding = parent_node.find('.span_name_function').css('padding-left');
}
parent_node.find('.span_name_function').css('padding-left', '0');
parent_node.find('.span_name_function').css('padding-right', '0');
input_field = $( "
" );
input_field.insertBefore(parent_node.find('.span_name_function'));
input_field.on('input', function() {
var inputWidth = input_field.textWidth()+10;
opened_input = input_field;
input_field.focus();
var tmpStr = input_field.val();
input_field.val('');
input_field.val(tmpStr);
input_field.css({
width: inputWidth
})
}).trigger('input');
input_field.focusout(function() {
/// update array:
if (input_field.val().trim()) {
updateFunctionName(function_obj, input_field.val().trim(), parent_node);
}
input_field.off();
input_field.remove();
parent_node.find('.span_name_function').css('padding-left', previousPadding);
parent_node.find('.span_name_function').css('padding-right', previousPadding);
parent_node.find('.span_name_function').text(function_obj.name);
/// update elements:
opened_name_function = false;
opened_input = false;
});
input_field.on('keydown', function(e) {
var code = e.keyCode || e.which;
if(code == 13) {
if (input_field.val().trim()) {
updateFunctionName(function_obj, input_field.val().trim(), parent_node);
}
input_field.off();
input_field.remove();
parent_node.find('.span_name_function').css('padding-left', previousPadding);
parent_node.find('.span_name_function').css('padding-right', previousPadding);
parent_node.find('.span_name_function').text(function_obj.name);
/// update elements:
opened_name_function = false;
opened_input = false;
}
if(code == 27) {
input_field.off();
input_field.remove();
parent_node.find('.span_name_function').css('padding-left', previousPadding);
parent_node.find('.span_name_function').css('padding-right', previousPadding);
parent_node.find('.span_name_function').text(function_obj.name);
/// update elements:
opened_name_function = false;
opened_input = false;
}
});
input_field.select();
}