Button.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170
  1. /**
  2. * Button.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. * This class is used to create buttons. You can create them directly or through the Factory.
  12. *
  13. * @example
  14. * // Create and render a button to the body element
  15. * tinymce.ui.Factory.create({
  16. * type: 'button',
  17. * text: 'My button'
  18. * }).renderTo(document.body);
  19. *
  20. * @-x-less Button.less
  21. * @class tinymce.ui.Button
  22. * @extends tinymce.ui.Widget
  23. */
  24. define("tinymce/ui/Button", [
  25. "tinymce/ui/Widget"
  26. ], function(Widget) {
  27. "use strict";
  28. return Widget.extend({
  29. Defaults: {
  30. classes: "widget btn",
  31. role: "button"
  32. },
  33. /**
  34. * Constructs a new button instance with the specified settings.
  35. *
  36. * @constructor
  37. * @param {Object} settings Name/value object with settings.
  38. * @setting {String} size Size of the button small|medium|large.
  39. * @setting {String} image Image to use for icon.
  40. * @setting {String} icon Icon to use for button.
  41. */
  42. init: function(settings) {
  43. var self = this, size;
  44. self.on('click mousedown', function(e) {
  45. e.preventDefault();
  46. });
  47. self._super(settings);
  48. size = settings.size;
  49. if (settings.subtype) {
  50. self.addClass(settings.subtype);
  51. }
  52. if (size) {
  53. self.addClass('btn-' + size);
  54. }
  55. },
  56. /**
  57. * Sets/gets the current button icon.
  58. *
  59. * @method icon
  60. * @param {String} [icon] New icon identifier.
  61. * @return {String|tinymce.ui.MenuButton} Current icon or current MenuButton instance.
  62. */
  63. icon: function(icon) {
  64. var self = this, prefix = self.classPrefix;
  65. if (typeof(icon) == 'undefined') {
  66. return self.settings.icon;
  67. }
  68. self.settings.icon = icon;
  69. icon = icon ? prefix + 'ico ' + prefix + 'i-' + self.settings.icon : '';
  70. if (self._rendered) {
  71. var btnElm = self.getEl().firstChild, iconElm = btnElm.getElementsByTagName('i')[0];
  72. if (icon) {
  73. if (!iconElm || iconElm != btnElm.firstChild) {
  74. iconElm = document.createElement('i');
  75. btnElm.insertBefore(iconElm, btnElm.firstChild);
  76. }
  77. iconElm.className = icon;
  78. } else if (iconElm) {
  79. btnElm.removeChild(iconElm);
  80. }
  81. self.text(self._text); // Set text again to fix whitespace between icon + text
  82. }
  83. return self;
  84. },
  85. /**
  86. * Repaints the button for example after it's been resizes by a layout engine.
  87. *
  88. * @method repaint
  89. */
  90. repaint: function() {
  91. var btnStyle = this.getEl().firstChild.style;
  92. btnStyle.width = btnStyle.height = "100%";
  93. this._super();
  94. },
  95. /**
  96. * Sets/gets the current button text.
  97. *
  98. * @method text
  99. * @param {String} [text] New button text.
  100. * @return {String|tinymce.ui.Button} Current text or current Button instance.
  101. */
  102. text: function(text) {
  103. var self = this;
  104. if (self._rendered) {
  105. var textNode = self.getEl().lastChild.lastChild;
  106. if (textNode) {
  107. textNode.data = self.translate(text);
  108. }
  109. }
  110. return self._super(text);
  111. },
  112. /**
  113. * Renders the control as a HTML string.
  114. *
  115. * @method renderHtml
  116. * @return {String} HTML representing the control.
  117. */
  118. renderHtml: function() {
  119. var self = this, id = self._id, prefix = self.classPrefix;
  120. var icon = self.settings.icon, image;
  121. image = self.settings.image;
  122. if (image) {
  123. icon = 'none';
  124. // Support for [high dpi, low dpi] image sources
  125. if (typeof image != "string") {
  126. image = window.getSelection ? image[0] : image[1];
  127. }
  128. image = ' style="background-image: url(\'' + image + '\')"';
  129. } else {
  130. image = '';
  131. }
  132. icon = self.settings.icon ? prefix + 'ico ' + prefix + 'i-' + icon : '';
  133. return (
  134. '<div id="' + id + '" class="' + self.classes() + '" tabindex="-1" aria-labelledby="' + id + '">' +
  135. '<button role="presentation" type="button" tabindex="-1">' +
  136. (icon ? '<i class="' + icon + '"' + image + '></i>' : '') +
  137. (self._text ? (icon ? '\u00a0' : '') + self.encode(self._text) : '') +
  138. '</button>' +
  139. '</div>'
  140. );
  141. }
  142. });
  143. });