iVProg/js/visualUI/commands/iftrue.js

import { LocalizedStrings } from '../../services/localizedStringsService';
import * as CommandsManagement from '../commands';
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>');
}

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> <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="textual_expression"></span> <span class="span_command_spec"> ) </span> ';
	ret += '  <i class="ui icon i cursor button_write_expression" style="margin-right: 1rem !important;"></i>  ';
	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>';
	ret += '<div class="ui data_block_else" data-else="true"> <span class="span_command_spec"> ' + LocalizedStrings.getUI('text_else') + ' </span>';
	ret += '<div class="ui block_commands commands_else conditional_comands_block" data-else="true">';
	ret += '</div>';
	ret += '<span></span></div>';
	ret += '</div>';

	var el = $(ret);
	el.data('command', command);
	el.find('.block_commands').data('command', command);
	el.find('.data_block_if').data('command', command);
	el.find('.data_block_else').data('command', command);
	el.find('.commands_if').data('command', command);

	addHandlers(command, function_obj, el);

	//ConditionalExpressionManagement.renderExpression(command, command.expression, function_obj, el.find('.conditional_expression'));
	GenericExpressionManagement.renderExpression(command, function_obj, el.find('.conditional_expression'), command.expression);

	if (command.commands_block) {
		for (var j = 0; j < command.commands_block.length; j++) {
		    CommandsManagement.renderCommand(command.commands_block[j], $(el.find('.commands_if')[0]), 3, function_obj);
		}
	}
	if (command.commands_else) {
		for (var j = 0; j < command.commands_else.length; j++) {
		    CommandsManagement.renderCommand(command.commands_else[j], $(el.find('.commands_else')[0]), 3, function_obj);
		}
	}

	if (command.collapsed) {
		el.children('.data_block_else').toggle();
		$(el.find('.block_commands')[0]).toggle();
	}

	if (command.lockexpression) {
		if (command.expression) {
			try {
				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');
				}
			} 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;
}


function addHandlers (command, function_obj, iftrue_dom) {

	iftrue_dom.find('.button_write_expression').on('click', function() {

		window.expressionEdition = true;
		window.inputExpression = null;
		
		var afterWhichElement;
		var lockButton = $(iftrue_dom.find('.button_alternate_expression')[0]);
		var editButton = $(this);

		afterWhichElement = $(iftrue_dom.find('.conditional_expression')[0]);

		if (command.lockexpression) {
			afterWhichElement = $(iftrue_dom.find('.textual_expression')[0]);
		}

		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) {
			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 = GenericExpressionManagement.expressionParserToVisual(input.val(), function_obj, input);
			if (parsed) {
				window.expressionEdition = false;
				command.expression = parsed;
				renderAlgorithm();
			}
		});

		cancel_button.mousedown(function(evt) {
			var parsed = GenericExpressionManagement.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
			}
		});
	});

	$(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;
			}
		}

		if (command.lockexpression) {
			iftrue_dom.find('.lock').popup({
				content : LocalizedStrings.getUI("text_unlock_expression"),
				delay: {
					show: 750,
					hide: 0
				}
			});
		} else {
			iftrue_dom.find('.unlock').popup({
				content : LocalizedStrings.getUI("text_lock_expression"),
				delay: {
					show: 750,
					hide: 0
				}
			});
		}
	});

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

	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;
	});

}