1
0

writer.js 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
  1. import $ from 'jquery';
  2. import { Types } from '../types';
  3. import * as Models from '../ivprog_elements';
  4. import { LocalizedStrings } from '../../services/localizedStringsService';
  5. import * as GlobalsManagement from '../globals';
  6. import * as VariablesManagement from '../variables';
  7. import * as VariableValueMenu from './variable_value_menu';
  8. import * as VariableValueMenuManagement from './variable_value_menu';
  9. import * as CommandsManagement from '../commands';
  10. import '../../Sortable.js';
  11. export function createFloatingCommand () {
  12. return $('<div class="ui writer created_element"> <i class="ui icon small upload"></i> <span> '+LocalizedStrings.getUI('text_command_write')+' var </span></div>');
  13. }
  14. export function renderCommand (command, function_obj) {
  15. var ret = '';
  16. ret += '<div class="ui writer command_container"> <i class="ui icon small upload command_drag"></i> <i class="ui icon times red button_remove_command"></i> <span class="span_command_spec">'+LocalizedStrings.getUI('text_command_write')+' ( </span><div class="all_elements_write"></div> <span class="close_parentheses span_command_spec">)</span> </div>';
  17. var el = $(ret);
  18. el.data('command', command);
  19. for (var i = 0; i < command.content.length; i ++) {
  20. var new_div_item = $( '<div class="var_value_menu_div"></div>' );
  21. var div_parent_with_handler = $( '<div class="div_parent_handler"></div>' );
  22. div_parent_with_handler.append($('<i class="ui icon ellipsis vertical inverted handler"></i>'));
  23. div_parent_with_handler.append(new_div_item);
  24. div_parent_with_handler.append($('<i class="white inverted icon times handler"></i>'));
  25. el.find('.all_elements_write').append(div_parent_with_handler);
  26. VariableValueMenu.renderMenu(command, command.content[i], new_div_item, function_obj);
  27. addHandlerIconAdd(el.find('.all_elements_write'), command, function_obj);
  28. addHandlersManager(command, function_obj, el, div_parent_with_handler, command.content[i]);
  29. }
  30. if (command.content.length == 0) {
  31. addHandlerIconAdd(el.find('.all_elements_write'), command, function_obj);
  32. }
  33. addHandlers(command, function_obj, el);
  34. return el;
  35. }
  36. function addHandlersManager (command, function_obj, writer_dom, item_div, content_element) {
  37. item_div.find('.times').on('click', function() {
  38. for (var i = 0; i < command.content.length; i++) {
  39. if (command.content[i] == content_element) {
  40. delete command.content[i];
  41. command.content.splice(i, 1);
  42. item_div.children().off();
  43. item_div.off();
  44. item_div.fadeOut();
  45. if (command.content.length > 0) {
  46. item_div.next('.icon_add_item_to_writer').fadeOut();
  47. }
  48. break;
  49. }
  50. }
  51. });
  52. }
  53. function addHandlers (command, function_obj, writer_dom) {
  54. writer_dom.find('.button_remove_command').on('click', function() {
  55. if (CommandsManagement.removeCommand(command, function_obj, writer_dom)) {
  56. writer_dom.fadeOut();
  57. }
  58. });
  59. Sortable.create(writer_dom.find(".all_elements_write")[0], {
  60. handle: '.ellipsis',
  61. animation: 100,
  62. ghostClass: 'ghost',
  63. group: 'writer_' + Math.floor(Math.random() * 10000000),
  64. draggable: '.div_parent_handler',
  65. onEnd: function (evt) {
  66. command.content.splice(evt.newIndex, 0, command.content.splice(evt.oldIndex, 1)[0]);
  67. writer_dom.empty();
  68. writer_dom.replaceWith(renderCommand(command, function_obj));
  69. }
  70. });
  71. }
  72. function addHandlerIconAdd (dom_object, command, function_obj, insert_after = false, after_which = null) {
  73. var icon_add_item = $( '<i class="ui icon plus square outline icon_add_item_to_writer"></i> ' );
  74. if (!insert_after) {
  75. dom_object.append(icon_add_item);
  76. } else {
  77. icon_add_item.insertAfter(after_which);
  78. }
  79. icon_add_item.on('click', function(e) {
  80. var div_parent_with_handler = $( '<div class="div_parent_handler" style="display:none;"></div>' );
  81. var new_div_item = $( '<div class="var_value_menu_div"></div>' );
  82. div_parent_with_handler.append($('<i class="ui icon ellipsis vertical inverted handler"></i>'));
  83. div_parent_with_handler.append(new_div_item);
  84. div_parent_with_handler.append($('<i class="white inverted icon times handler"></i>'));
  85. div_parent_with_handler.insertAfter(icon_add_item);
  86. var new_related_menu = new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true);
  87. VariableValueMenu.renderMenu(command, new_related_menu, new_div_item, function_obj);
  88. addHandlerIconAdd(dom_object, command, function_obj, true, div_parent_with_handler);
  89. addHandlersManager(command, function_obj, dom_object, div_parent_with_handler, new_related_menu);
  90. var pos = 1;
  91. dom_object.find('.icon_add_item_to_writer').each(function() {
  92. if ($(this).get(0) === icon_add_item.get(0)) {
  93. command.content.splice(pos, 0, new_related_menu);
  94. } else {
  95. pos ++;
  96. }
  97. });
  98. if (command.content.length == 1) {
  99. icon_add_item.remove();
  100. }
  101. div_parent_with_handler.fadeIn();
  102. });
  103. }
  104. export function addContent (command, ref_object, dom_object, menu_var_or_value, function_obj, ref_object_content) {
  105. if (dom_object.hasClass('var_value_menu_div')) {
  106. var icon_add_item = $( '<i class="ui icon plus square outline icon_add_item_to_writer"></i> ' );
  107. icon_add_item.insertAfter(dom_object);
  108. icon_add_item.on('click', function(e) {
  109. var div_parent_with_handler = $( '<div class="div_parent_handler"></div>' );
  110. div_parent_with_handler.append($('<i class="ui icon ellipsis vertical inverted handler"></i>'));
  111. div_parent_with_handler.append(new_div_item);
  112. div_parent_with_handler.append($('<i class="white inverted icon times handler"></i>'));
  113. div_parent_with_handler.insertAfter(icon_add_item);
  114. var new_related_menu = new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true);
  115. VariableValueMenu.renderMenu(command, new_related_menu, new_div_item, function_obj);
  116. addHandlersManager(command, function_obj, dom_object, div_parent_with_handler, new_related_menu);
  117. command.content.push(new_related_menu);
  118. if (command.content.length == 1) {
  119. icon_add_item.remove();
  120. }
  121. });
  122. }
  123. }