SplitButton.js 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. /**
  2. * SplitButton.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 split button.
  12. *
  13. * @-x-less SplitButton.less
  14. * @class tinymce.ui.SplitButton
  15. * @extends tinymce.ui.Button
  16. */
  17. define("tinymce/ui/SplitButton", [
  18. "tinymce/ui/MenuButton",
  19. "tinymce/ui/DomUtils"
  20. ], function(MenuButton, DomUtils) {
  21. return MenuButton.extend({
  22. Defaults: {
  23. classes: "widget btn splitbtn",
  24. role: "button"
  25. },
  26. /**
  27. * Repaints the control after a layout operation.
  28. *
  29. * @method repaint
  30. */
  31. repaint: function() {
  32. var self = this, elm = self.getEl(), rect = self.layoutRect(), mainButtonElm, menuButtonElm;
  33. self._super();
  34. mainButtonElm = elm.firstChild;
  35. menuButtonElm = elm.lastChild;
  36. DomUtils.css(mainButtonElm, {
  37. width: rect.w - DomUtils.getSize(menuButtonElm).width,
  38. height: rect.h - 2
  39. });
  40. DomUtils.css(menuButtonElm, {
  41. height: rect.h - 2
  42. });
  43. return self;
  44. },
  45. /**
  46. * Sets the active menu state.
  47. *
  48. * @private
  49. */
  50. activeMenu: function(state) {
  51. var self = this;
  52. DomUtils.toggleClass(self.getEl().lastChild, self.classPrefix + 'active', state);
  53. },
  54. /**
  55. * Renders the control as a HTML string.
  56. *
  57. * @method renderHtml
  58. * @return {String} HTML representing the control.
  59. */
  60. renderHtml: function() {
  61. var self = this, id = self._id, prefix = self.classPrefix;
  62. var icon = self.settings.icon ? prefix + 'ico ' + prefix + 'i-' + self.settings.icon : '';
  63. return (
  64. '<div id="' + id + '" class="' + self.classes() + '" role="button" tabindex="-1">' +
  65. '<button type="button" hidefocus="1" tabindex="-1">' +
  66. (icon ? '<i class="' + icon + '"></i>' : '') +
  67. (self._text ? (icon ? ' ' : '') + self._text : '') +
  68. '</button>' +
  69. '<button type="button" class="' + prefix + 'open" hidefocus="1" tabindex="-1">' +
  70. //(icon ? '<i class="' + icon + '"></i>' : '') +
  71. (self._menuBtnText ? (icon ? '\u00a0' : '') + self._menuBtnText : '') +
  72. ' <i class="' + prefix + 'caret"></i>' +
  73. '</button>' +
  74. '</div>'
  75. );
  76. },
  77. /**
  78. * Called after the control has been rendered.
  79. *
  80. * @method postRender
  81. */
  82. postRender: function() {
  83. var self = this, onClickHandler = self.settings.onclick;
  84. self.on('click', function(e) {
  85. var node = e.target;
  86. if (e.control == this) {
  87. // Find clicks that is on the main button
  88. while (node) {
  89. if ((e.aria && e.aria.key != 'down') || (node.nodeName == 'BUTTON' && node.className.indexOf('open') == -1)) {
  90. e.stopImmediatePropagation();
  91. onClickHandler.call(this, e);
  92. return;
  93. }
  94. node = node.parentNode;
  95. }
  96. }
  97. });
  98. delete self.settings.onclick;
  99. return self._super();
  100. }
  101. });
  102. });