Finished improve collapse block of commands

css/ivprog-visual-1.0.css

@@ -138,17 +138,6 @@ body {
 	margin-right: 10px;
 }
 
-.case_commands_block {
-	/*border: 1px solid red;*/
-}
-
-.context_menu {
-	display: inline;
-	float: right; 
-	margin-right: 25px;
-	margin-top: -4px;
-}
-
 .case_div {
 	border: 1px solid gray;
 	margin-left: 30px;
@@ -1085,3 +1074,31 @@ div.ui.checkbox.transition.visible {
   height: 32px;
   cursor: pointer;
 }
+
+.ui.icon.button.minimize_block_button {
+	background: none;
+	float: right;
+	padding-top: .25rem;
+	margin-right: .3rem;
+}
+
+div.ui.dropdown.menu_commands.pause {
+
+}
+
+.context_menu {
+	display: inline;
+	float: right;
+	margin: 0;
+}
+
+span.textual_expression {
+	color: #2325a6;;
+}
+
+i.button_alternate_expression {
+	cursor: pointer;
+	font-size: 1.1rem;
+	margin-left: 0.3rem;
+	color: black;
+}

js/iassign-integration-functions.js

@@ -20,11 +20,42 @@ var iLMparameters = {
 // and no dependency to the global scope, avoind future 'strict mode' problems
 //localStorage.setItem('ivprog.lang', iLMparameters.lang);
 
+function removeCollapseValue (command) {
+  if (command.collapsed) {
+    delete command.collapsed;
+  }
+  if (command.type == 'iftrue') {
+    if (command.commands_block)
+      for (var i = 0; i < command.commands_block.length; i++) {
+        removeCollapseValue(command.commands_block[i]);
+      }
+    if (command.commands_else)
+      for (var i = 0; i < command.commands_else.length; i++) {
+        removeCollapseValue(command.commands_else[i]);
+      }
+  } else if (command.type == 'repeatNtimes' 
+            || command.type == 'whiletrue' 
+            || command.type == 'dowhiletrue' ) {
+    if (command.commands_block)
+      for (var i = 0; i < command.commands_block.length; i++) {
+        removeCollapseValue(command.commands_block[i]);
+      }
+  }
+}
+
 // Função chamada pelo iTarefa quando o professor finaliza a criação da atividade
 // ou quando o aluno finaliza a resolução do exercício
 // O retorno é um JSON com os dados do exercício ou da resolução
 // Esse retorno será armazenado no banco de dados do Moodle, pelo iTarefa
 function getAnswer () {
+  // Remover o colapsar usado localmente:
+  if (window.program_obj) {
+    for (var i = 0; i < window.program_obj.functions.length; i++) {
+      for (var j = 0; j < window.program_obj.functions[i].commands.length; j++) {
+        removeCollapseValue(window.program_obj.functions[i].commands[j]);
+      }
+    }
+  }
   // Se o parâmetro "iLM_PARAM_SendAnswer" for false,
   // então trata-se de resolução de atividade
   if (iLMparameters.iLM_PARAM_SendAnswer == 'false') {

js/visualUI/algorithm.js

@@ -11,7 +11,6 @@ export function renderAlgorithm () {
 		return;
 	}
 	window.block_render = true;
-	console.log('rendering algorithm');
 
  	$('.all_functions').children().off();
 	$('.all_functions').empty();
@@ -28,7 +27,6 @@ export function renderAlgorithm () {
 	}	
 
 	setTimeout(function(){ window.block_render = false; }, 100);
-	console.log('fim do render');
 
 	if (settingsFilter && settingsFilter[0]) {
       blockAllEditingOptions();

js/visualUI/code_generator.js

@@ -580,7 +580,7 @@ function attributionsCode (command_obj, indentation) {
   return ret;
 }
 
-function elementExpressionCode (expression_obj) {
+export function elementExpressionCode (expression_obj) {
   let ret = "";
 
   for (let i = 0; i < expression_obj.length; i++) {

js/visualUI/commands/break.js

@@ -2,11 +2,11 @@ import { LocalizedStrings } from '../../services/localizedStringsService';
 import * as CommandsManagement from '../commands';
 
 export function createFloatingCommand () {
-	return $('<div class="ui comment created_element"> <i class="ui icon small quote left"></i> <span> '+LocalizedStrings.getUI('text_break')+' </span></div>');
+	return $('<div class="ui comment created_element"> <i class="ui icon small pause"></i> <span> '+LocalizedStrings.getUI('text_break')+' </span></div>');
 }
 
 export function renderCommand (command, function_obj) {
-	var el = $('<div class="ui comment command_container"> <i class="ui icon small quote left"></i> <i class="ui icon times red button_remove_command"></i> <span>'+LocalizedStrings.getUI('text_break')+'</span> </div>');
+	var el = $('<div class="ui comment command_container"> <i class="ui icon small pause"></i> <i class="ui icon times red button_remove_command"></i> <span>'+LocalizedStrings.getUI('text_break')+'</span> </div>');
 	el.data('command', command);
 
 	addHandlers(command, function_obj, el);

js/visualUI/commands/contextualized_menu.js

@@ -6,18 +6,18 @@ import * as SwitchManagement from './switch';
 
 export function renderMenu (command, dom_where_render, function_obj, dom_command) {
 
-	var menu_div = '<div class="ui dropdown menu_commands" ><i class="icon code"></i> <div class="menu"> ';
+	var menu_div = '<button class="ui icon button minimize_block_button tiny"><i class="icon window minimize"></i></button> <div class="ui dropdown menu_commands pause" ><i class="icon pause"></i> <div class="menu"> ';
 
 	if ((command.type == Models.COMMAND_TYPES.repeatNtimes) 
 		|| (command.type == Models.COMMAND_TYPES.whiletrue) 
 		|| (command.type == Models.COMMAND_TYPES.dowhiletrue)) {
 
-		menu_div += '<a class="item" data-command="'+Models.COMMAND_TYPES.break+'"><i class="download icon"></i> '+LocalizedStrings.getUI('btn_break')+' </a>';
+		menu_div += '<a class="item" data-command="'+Models.COMMAND_TYPES.break+'"><i class="pause icon"></i> '+LocalizedStrings.getUI('btn_break')+' </a>';
 
 	} else {
 
-		menu_div += '<a class="item" data-command="'+Models.COMMAND_TYPES.break+'"><i class="download icon"></i> '+LocalizedStrings.getUI('btn_break')+' </a>';
-		menu_div += '<a class="item" data-command="'+Models.COMMAND_TYPES.switchcase+'"><i class="download icon"></i> '+LocalizedStrings.getUI('btn_case')+' </a>';
+		menu_div += '<a class="item" data-command="'+Models.COMMAND_TYPES.break+'"><i class="pause icon"></i> '+LocalizedStrings.getUI('btn_break')+' </a>';
+		menu_div += '<a class="item" data-command="'+Models.COMMAND_TYPES.switchcase+'"><i class="pause icon"></i> '+LocalizedStrings.getUI('btn_case')+' </a>';
 
 	}
 
@@ -28,10 +28,19 @@ export function renderMenu (command, dom_where_render, function_obj, dom_command
 	dom_where_render.append(menu_div);
 
 	addHandlers(command, dom_where_render, function_obj, dom_command);
+
+	if (command.collapsed) {
+		dom_command.children('.ui.block_commands').toggle();
+	}
 }
 
 function addHandlers (command, dom_where_render, function_obj, dom_command) {
 
+	dom_where_render.find('.minimize_block_button').on('click', function(evt){
+		dom_command.children('.ui.block_commands').toggle();
+		command.collapsed = !command.collapsed;
+	});
+
 	dom_where_render.find('.menu_commands').dropdown({
       on: 'hover'
     });

js/visualUI/commands/dowhiletrue.js

@@ -13,7 +13,7 @@ export function renderCommand (command, function_obj) {
 	ret += '<div class="ui dowhiletrue command_container"> <i class="ui icon small sync command_drag"></i> <i class="ui icon times red button_remove_command"></i> <div class="ui context_menu"></div>  <span class="span_command_spec"> ' + LocalizedStrings.getUI('text_command_do') + ' </span>';
 	ret += '<div class="ui block_commands" data-subblock="" data-idcommand="">';
 	ret += '</div>';
-	ret += ' <span class="span_command_spec"> ' + LocalizedStrings.getUI('text_command_do_until') + ' </span> <span class="span_command_spec"> ( </span> <div class="conditional_expression"></div> <span class="span_command_spec"> ) </span>';
+	ret += ' <span class="span_command_spec"> ' + LocalizedStrings.getUI('text_command_do_until') + ' </span> <span class="span_command_spec"> ( </span> <div class="conditional_expression"></div> <i class="ui icon unlock button_alternate_expression"></i> <span class="span_command_spec"> ) </span>';
 	ret += '</div>';
 
 	var el = $(ret);

js/visualUI/commands/iftrue.js

@@ -1,7 +1,7 @@
 import { LocalizedStrings } from '../../services/localizedStringsService';
 import * as CommandsManagement from '../commands';
-import * as ConditionalExpressionManagement from './conditional_expression';
 import * as GenericExpressionManagement from './generic_expression';
+import * as CodeGenerator from '../code_generator';
 
 export function createFloatingCommand () {
 	return $('<div class="ui iftrue created_element"> <i class="ui icon small random"></i> <span> if (x < 1) { } </span></div>');
@@ -9,9 +9,10 @@ export function createFloatingCommand () {
 
 export function renderCommand (command, function_obj) {
 	var ret = '';
-	ret += '<div class="ui iftrue command_container"><div class="ui data_block_if" data-if="true">  <i class="ui icon small random command_drag"></i> <i class="ui icon times red button_remove_command"></i>';
+	ret += '<div class="ui iftrue command_container"><div class="ui data_block_if" data-if="true">  <i class="ui icon small random command_drag"></i> <i class="ui icon times red button_remove_command"></i> <button class="ui icon button minimize_block_button tiny"><i class="icon window minimize"></i></button>';
 	ret += '<span class="span_command_spec"> ' + LocalizedStrings.getUI('text_if') + '</span>';
-	ret += ' <span class="span_command_spec"> ( </span> <div class="conditional_expression"></div> <span class="span_command_spec"> ) </span>';
+	ret += ' <span class="span_command_spec"> ( </span> <div class="conditional_expression"></div> <span class="textual_expression"></span> <span class="span_command_spec"> ) </span> ';
+	ret += '<i class="ui icon unlock button_alternate_expression"></i>';
 	ret += '<span> </span> ';
 	ret += '<div class="ui block_commands commands_if conditional_comands_block" data-if="true">';
  	ret += '</div></div>';
@@ -45,12 +46,44 @@ export function renderCommand (command, function_obj) {
 		}
 	}
 
+	if (command.collapsed) {
+		el.children('.data_block_else').toggle();
+		$(el.find('.block_commands')[0]).toggle();
+	}
+
+	if (command.lockexpression) {
+		if (command.expression) {
+			var text = CodeGenerator.elementExpressionCode(command.expression);
+			if (text) {
+				$(el.find('.conditional_expression')[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');
+			}
+		}
+	}
+
 	return el;
 }
 
 
 function addHandlers (command, function_obj, iftrue_dom) {
 
+	$(iftrue_dom.find('.textual_expression')[0]).toggle();
+	
+	iftrue_dom.find('.button_alternate_expression').on('click', function() {
+		if (command.expression) {
+			var text = CodeGenerator.elementExpressionCode(command.expression);
+			if (text) {
+				$(iftrue_dom.find('.conditional_expression')[0]).toggle();
+				$(iftrue_dom.find('.textual_expression')[0]).text(text);
+				$(iftrue_dom.find('.textual_expression')[0]).toggle();
+				$(this).toggleClass('unlock').toggleClass('lock');
+				command.lockexpression = !command.lockexpression;
+			}
+		}
+	});
+
 	iftrue_dom.find('.button_remove_command').on('click', function() {
 		if (CommandsManagement.removeCommand(command, function_obj, iftrue_dom)) {
 			iftrue_dom.fadeOut(400, function() {
@@ -58,4 +91,11 @@ function addHandlers (command, function_obj, iftrue_dom) {
 			});
 		}
 	});
+
+	iftrue_dom.find('.minimize_block_button').on('click', function() {
+		iftrue_dom.children('.data_block_else').toggle();
+		$(iftrue_dom.find('.block_commands')[0]).toggle();
+		command.collapsed = !command.collapsed;
+	});
+
 }