TextBox.js 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214
  1. /**
  2. * TextBox.js
  3. *
  4. * Copyright, Moxiecode Systems AB
  5. * Released under LGPL License.
  6. *
  7. * License: http://www.tinymce.com/license
  8. * Contributing: http://www.tinymce.com/contributing
  9. */
  10. /**
  11. * Creates a new textbox.
  12. *
  13. * @-x-less TextBox.less
  14. * @class tinymce.ui.TextBox
  15. * @extends tinymce.ui.Widget
  16. */
  17. define("tinymce/ui/TextBox", [
  18. "tinymce/ui/Widget",
  19. "tinymce/ui/DomUtils"
  20. ], function(Widget, DomUtils) {
  21. "use strict";
  22. return Widget.extend({
  23. /**
  24. * Constructs a instance with the specified settings.
  25. *
  26. * @constructor
  27. * @param {Object} settings Name/value object with settings.
  28. * @setting {Boolean} multiline True if the textbox is a multiline control.
  29. * @setting {Number} maxLength Max length for the textbox.
  30. * @setting {Number} size Size of the textbox in characters.
  31. */
  32. init: function(settings) {
  33. var self = this;
  34. self._super(settings);
  35. self._value = settings.value || '';
  36. self.addClass('textbox');
  37. if (settings.multiline) {
  38. self.addClass('multiline');
  39. } else {
  40. // TODO: Rework this
  41. self.on('keydown', function(e) {
  42. if (e.keyCode == 13) {
  43. self.parents().reverse().each(function(ctrl) {
  44. e.preventDefault();
  45. if (ctrl.hasEventListeners('submit') && ctrl.toJSON) {
  46. ctrl.fire('submit', {data: ctrl.toJSON()});
  47. return false;
  48. }
  49. });
  50. }
  51. });
  52. }
  53. },
  54. /**
  55. * Getter/setter function for the disabled state.
  56. *
  57. * @method value
  58. * @param {Boolean} [state] State to be set.
  59. * @return {Boolean|tinymce.ui.ComboBox} True/false or self if it's a set operation.
  60. */
  61. disabled: function(state) {
  62. var self = this;
  63. if (self._rendered && typeof(state) != 'undefined') {
  64. self.getEl().disabled = state;
  65. }
  66. return self._super(state);
  67. },
  68. /**
  69. * Getter/setter function for the control value.
  70. *
  71. * @method value
  72. * @param {String} [value] Value to be set.
  73. * @return {String|tinymce.ui.ComboBox} Value or self if it's a set operation.
  74. */
  75. value: function(value) {
  76. var self = this;
  77. if (typeof(value) != "undefined") {
  78. self._value = value;
  79. if (self._rendered) {
  80. self.getEl().value = value;
  81. }
  82. return self;
  83. }
  84. if (self._rendered) {
  85. return self.getEl().value;
  86. }
  87. return self._value;
  88. },
  89. /**
  90. * Repaints the control after a layout operation.
  91. *
  92. * @method repaint
  93. */
  94. repaint: function() {
  95. var self = this, style, rect, borderBox, borderW = 0, borderH = 0, lastRepaintRect;
  96. style = self.getEl().style;
  97. rect = self._layoutRect;
  98. lastRepaintRect = self._lastRepaintRect || {};
  99. // Detect old IE 7+8 add lineHeight to align caret vertically in the middle
  100. var doc = document;
  101. if (!self.settings.multiline && doc.all && (!doc.documentMode || doc.documentMode <= 8)) {
  102. style.lineHeight = (rect.h - borderH) + 'px';
  103. }
  104. borderBox = self._borderBox;
  105. borderW = borderBox.left + borderBox.right + 8;
  106. borderH = borderBox.top + borderBox.bottom + (self.settings.multiline ? 8 : 0);
  107. if (rect.x !== lastRepaintRect.x) {
  108. style.left = rect.x + 'px';
  109. lastRepaintRect.x = rect.x;
  110. }
  111. if (rect.y !== lastRepaintRect.y) {
  112. style.top = rect.y + 'px';
  113. lastRepaintRect.y = rect.y;
  114. }
  115. if (rect.w !== lastRepaintRect.w) {
  116. style.width = (rect.w - borderW) + 'px';
  117. lastRepaintRect.w = rect.w;
  118. }
  119. if (rect.h !== lastRepaintRect.h) {
  120. style.height = (rect.h - borderH) + 'px';
  121. lastRepaintRect.h = rect.h;
  122. }
  123. self._lastRepaintRect = lastRepaintRect;
  124. self.fire('repaint', {}, false);
  125. return self;
  126. },
  127. /**
  128. * Renders the control as a HTML string.
  129. *
  130. * @method renderHtml
  131. * @return {String} HTML representing the control.
  132. */
  133. renderHtml: function() {
  134. var self = this, id = self._id, settings = self.settings, value = self.encode(self._value, false), extraAttrs = '';
  135. if ("spellcheck" in settings) {
  136. extraAttrs += ' spellcheck="' + settings.spellcheck + '"';
  137. }
  138. if (settings.maxLength) {
  139. extraAttrs += ' maxlength="' + settings.maxLength + '"';
  140. }
  141. if (settings.size) {
  142. extraAttrs += ' size="' + settings.size + '"';
  143. }
  144. if (settings.subtype) {
  145. extraAttrs += ' type="' + settings.subtype + '"';
  146. }
  147. if (self.disabled()) {
  148. extraAttrs += ' disabled="disabled"';
  149. }
  150. if (settings.multiline) {
  151. return (
  152. '<textarea id="' + id + '" class="' + self.classes() + '" ' +
  153. (settings.rows ? ' rows="' + settings.rows + '"' : '') +
  154. ' hidefocus="1"' + extraAttrs + '>' + value +
  155. '</textarea>'
  156. );
  157. }
  158. return '<input id="' + id + '" class="' + self.classes() + '" value="' + value + '" hidefocus="1"' + extraAttrs + ' />';
  159. },
  160. /**
  161. * Called after the control has been rendered.
  162. *
  163. * @method postRender
  164. */
  165. postRender: function() {
  166. var self = this;
  167. DomUtils.on(self.getEl(), 'change', function(e) {
  168. self.fire('change', e);
  169. });
  170. return self._super();
  171. },
  172. remove: function() {
  173. DomUtils.off(this.getEl());
  174. this._super();
  175. }
  176. });
  177. });