mxForm.js 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202
  1. /**
  2. * Copyright (c) 2006-2015, JGraph Ltd
  3. * Copyright (c) 2006-2015, Gaudenz Alder
  4. */
  5. /**
  6. * Class: mxForm
  7. *
  8. * A simple class for creating HTML forms.
  9. *
  10. * Constructor: mxForm
  11. *
  12. * Creates a HTML table using the specified classname.
  13. */
  14. function mxForm(className)
  15. {
  16. this.table = document.createElement('table');
  17. this.table.className = className;
  18. this.body = document.createElement('tbody');
  19. this.table.appendChild(this.body);
  20. };
  21. /**
  22. * Variable: table
  23. *
  24. * Holds the DOM node that represents the table.
  25. */
  26. mxForm.prototype.table = null;
  27. /**
  28. * Variable: body
  29. *
  30. * Holds the DOM node that represents the tbody (table body). New rows
  31. * can be added to this object using DOM API.
  32. */
  33. mxForm.prototype.body = false;
  34. /**
  35. * Function: getTable
  36. *
  37. * Returns the table that contains this form.
  38. */
  39. mxForm.prototype.getTable = function()
  40. {
  41. return this.table;
  42. };
  43. /**
  44. * Function: addButtons
  45. *
  46. * Helper method to add an OK and Cancel button using the respective
  47. * functions.
  48. */
  49. mxForm.prototype.addButtons = function(okFunct, cancelFunct)
  50. {
  51. var tr = document.createElement('tr');
  52. var td = document.createElement('td');
  53. tr.appendChild(td);
  54. td = document.createElement('td');
  55. // Adds the ok button
  56. var button = document.createElement('button');
  57. mxUtils.write(button, mxResources.get('ok') || 'OK');
  58. td.appendChild(button);
  59. mxEvent.addListener(button, 'click', function()
  60. {
  61. okFunct();
  62. });
  63. // Adds the cancel button
  64. button = document.createElement('button');
  65. mxUtils.write(button, mxResources.get('cancel') || 'Cancel');
  66. td.appendChild(button);
  67. mxEvent.addListener(button, 'click', function()
  68. {
  69. cancelFunct();
  70. });
  71. tr.appendChild(td);
  72. this.body.appendChild(tr);
  73. };
  74. /**
  75. * Function: addText
  76. *
  77. * Adds an input for the given name, type and value and returns it.
  78. */
  79. mxForm.prototype.addText = function(name, value, type)
  80. {
  81. var input = document.createElement('input');
  82. input.setAttribute('type', type || 'text');
  83. input.value = value;
  84. return this.addField(name, input);
  85. };
  86. /**
  87. * Function: addCheckbox
  88. *
  89. * Adds a checkbox for the given name and value and returns the textfield.
  90. */
  91. mxForm.prototype.addCheckbox = function(name, value)
  92. {
  93. var input = document.createElement('input');
  94. input.setAttribute('type', 'checkbox');
  95. this.addField(name, input);
  96. // IE can only change the checked value if the input is inside the DOM
  97. if (value)
  98. {
  99. input.checked = true;
  100. }
  101. return input;
  102. };
  103. /**
  104. * Function: addTextarea
  105. *
  106. * Adds a textarea for the given name and value and returns the textarea.
  107. */
  108. mxForm.prototype.addTextarea = function(name, value, rows)
  109. {
  110. var input = document.createElement('textarea');
  111. if (mxClient.IS_NS)
  112. {
  113. rows--;
  114. }
  115. input.setAttribute('rows', rows || 2);
  116. input.value = value;
  117. return this.addField(name, input);
  118. };
  119. /**
  120. * Function: addCombo
  121. *
  122. * Adds a combo for the given name and returns the combo.
  123. */
  124. mxForm.prototype.addCombo = function(name, isMultiSelect, size)
  125. {
  126. var select = document.createElement('select');
  127. if (size != null)
  128. {
  129. select.setAttribute('size', size);
  130. }
  131. if (isMultiSelect)
  132. {
  133. select.setAttribute('multiple', 'true');
  134. }
  135. return this.addField(name, select);
  136. };
  137. /**
  138. * Function: addOption
  139. *
  140. * Adds an option for the given label to the specified combo.
  141. */
  142. mxForm.prototype.addOption = function(combo, label, value, isSelected)
  143. {
  144. var option = document.createElement('option');
  145. mxUtils.writeln(option, label);
  146. option.setAttribute('value', value);
  147. if (isSelected)
  148. {
  149. option.setAttribute('selected', isSelected);
  150. }
  151. combo.appendChild(option);
  152. };
  153. /**
  154. * Function: addField
  155. *
  156. * Adds a new row with the name and the input field in two columns and
  157. * returns the given input.
  158. */
  159. mxForm.prototype.addField = function(name, input)
  160. {
  161. var tr = document.createElement('tr');
  162. var td = document.createElement('td');
  163. mxUtils.write(td, name);
  164. tr.appendChild(td);
  165. td = document.createElement('td');
  166. td.appendChild(input);
  167. tr.appendChild(td);
  168. this.body.appendChild(tr);
  169. return input;
  170. };